ABOUT

The practicum itself is split into three main phases modeled around facilitating an effective learning oppurtunity - the before, during, and after. As part of the final deliverable, this website acts as the central repository, holding the work from each phase.
The before phase focused on the 'what' and 'why' of graphic design - primarily researching the history and principles behind modern graphic design.
In doing so, I read through Graphic Design: The New Basics and compiled reports on basic graphic design principles and history, can be found in the basics and history sections.
The during phase next centered around the 'how' of graphic design, and the experience of teaching myself the tools behind modern digital design. Using basic HTML5, CSS3, and Javascript, I created a series of webpages to practice each tool from scratch, which can be found in the extras section.
The after phase finally brought everything together, aiming to create a central, well-designed website that you are currently on. While by no means a comprehensive guide, this website contains important work and takeaways I learned over the course of completing this project.
The during phase next centered around the 'how' of graphic design, and the experience of teaching myself the tools behind modern digital design. Using basic HTML5, CSS3, and Javascript, I created a series of webpages to practice each tool from scratch, which can be found in the extras section.
The after phase finally brought everything together, aiming to create a central, well-designed website that you are currently on. While by no means a comprehensive guide, this website contains important work and takeaways I learned over the course of completing this project.
Learning Objectives
- How does graphic design help relay information in an intuitive but cohesive manner?
- How has graphic design evolved over time and culture?
- What principles have shifted in the transition from graphic to digital design?
Learning Outcomes
- I can analyze how graphic design guides the flow of information, tone, and aesthetics in a work.
- I can utilize graphic design principles in my own work to better capture one’s attention and relay information.
- I can create an informative, intuitive, and interactive website demonstrating graphic & digital design principles.
test
BASICS
Point, line, and plane are perhaps the most foundational elements of graphic design, and together create the basic visual language that underlies all graphics (Lupton & Phillips, p33). At their most broad, they are the shapes and outlines that guide the readers eyeline across the page, and can be combined to create complex patterns, diagrams, and icons (Lupton & Phillips, p33).
By itself, the point is nothing but a position on the page (Lupton & Phillips, p34). Points make up every tool to follow yet carry little by themselves; Comprised of singular pieces of visual data, – dots, pixels, letters, etc. – they can together be repeated in one direction ad infinitum to create lines, and perhaps broadened even further to create entire planes. By themselves, points stand as assertions, drawing attention to important visual and textual data in the graphic. In lines, they mark the end and beginning of the natural flow of information, much similar to how a sentence starts with a capitalized letter and ends with a definite period (Lupton & Phillips, p34).
The line, comparatively, can be interpreted as the path ...
By itself, the point is nothing but a position on the page (Lupton & Phillips, p34). Points make up every tool to follow yet carry little by themselves; Comprised of singular pieces of visual data, – dots, pixels, letters, etc. – they can together be repeated in one direction ad infinitum to create lines, and perhaps broadened even further to create entire planes. By themselves, points stand as assertions, drawing attention to important visual and textual data in the graphic. In lines, they mark the end and beginning of the natural flow of information, much similar to how a sentence starts with a capitalized letter and ends with a definite period (Lupton & Phillips, p34).
The line, comparatively, can be interpreted as the path ...
Color is perhaps one of the most essential elements of any design, being able to establish a mood, differentiate planes, and perhaps even highlight or camouflage certain datapoints (Lupton & Phillips, p81). To create the entire spectrum of color, many systems are used to measure the degree of each color value within a hue. For LEDs and electronics, the most common systems for color are RGB, which modifies the brightness of red, green, and blue components in a pixel, as well as HSL, which determines the hue, saturation, and lightness of the color (Lupton & Phillips, p86; w3schools, web). For printing, because light is absorbed instead of emitted, a CYMK color scheme is used, mixing cyan, magenta, and yellow pigments to create the color spectrum, with a black pigment to fill in the gaps (Lupton & Phillips, p86). An important tool for understanding this spectrum is the color wheel, which can depict hues as a function of the values along its circumference and their respective shades and tints as they get closer and further from the center of the circle respectively (Lupton & Phillips, p85). Using the color wheel, the entire spectrum can be ...
Texture in graphic design can be subtle, but important in reinforcing a mood and sense of physicality in a piece, or perhaps a lack thereof (Lupton & Phillips, pp69). The presence of textures such as the sky, ice, or linen can add needed depth and complexity to a graphic, pulling in the audience to an illusion of the physical world. In contrast, a lack of texture through the use of solid colors can suggest abstraction, taking the outline and breaking away from the physical word. Particularly when it comes to printed or digital designs, however, the texture is important to keep in mind when balancing an image as too messy textures can confuse or detract from the message of a piece.
Text can have texture as well, varying with size, font, spacing, and other details that influence its message (Lupton & Phillips, pp74-75). Thick, bolded fonts such as Aharoni can come off as strong and structurally-sound, often fitting for titles and important information, while thin fonts such as Courier New can conversely come off as delicate and graceful, but lack the weight necessary for regular use. Small details in typography can have large ...
Text can have texture as well, varying with size, font, spacing, and other details that influence its message (Lupton & Phillips, pp74-75). Thick, bolded fonts such as Aharoni can come off as strong and structurally-sound, often fitting for titles and important information, while thin fonts such as Courier New can conversely come off as delicate and graceful, but lack the weight necessary for regular use. Small details in typography can have large ...
Scale is an essential consideration of every graphic design, and can add depth, emphasis, and a visual hierarchy that guides the viewer through the piece (Lupton & Phillips, p61). Notably, scaling requires multiple objects within a graphic, and only characterizes them in relation to the surrounding subjects (Lupton & Phillips, p62). Graphics without differing scales in their shapes and text can come off as flat and somewhat uniform – while this may be beneficial for long passages of text, it can also leave a more visual design feeling confused in direction (Lupton & Phillips, p62). In contrast, differentiating scale can draw an eye towards larger shapes or text, adding both depth and a greater sense of importance to the subjects. Scaling can even run off the side of a graphic for greater perceived size, but also a sense of externality (Lupton & Phillips, p62).
Scaling in text is often important to create emphasis and textual hierarchy in an image (Lupton & Phillips, p66). In markup languages such as HTML, different level of headers are differentiated in scale, with the largest typically titling entire webpages while the smaller ones correspond to ...
Scaling in text is often important to create emphasis and textual hierarchy in an image (Lupton & Phillips, p66). In markup languages such as HTML, different level of headers are differentiated in scale, with the largest typically titling entire webpages while the smaller ones correspond to ...
Gestalt Principles encompass the idea of perception in and of graphic design, particularly when it comes to organizing its visual information (Lupton & Phillips, p99). As it turns out, humans will tend to follow certain patterns when deconstructing visuals, and gestalt principles attempt to exploit them to create striking, intuitive, and effective graphics (Lupton & Phillips, p99). Perhaps most importantly, gestalt principles are all built on an idea of contrasting negative- and positive-spaces; When viewing a graphic, the subject of interest is typically seen in the foreground, existing in space positive to our attention, whereas the rest can make up the background in respective negative space (Lupton & Phillips, p99). By differentiating the two layers, people can more easily recognize and abstract important datapoints about the subject, even when the subject defies convention as in the case of a cut-out (Lupton & Phillips, p106). To understand how subjects are then understood, there exist 6 so-called gestalt principles related to how humans may pick apart the visual language of graphic design (Lupton & Phillips, p102). ...
Balance and rhythm are perhaps the last essential considerations of graphic design, tying together a piece’s parts into a cohesive and intuitive whole (Lupton & Phillips, p49). Balance can encompass every element of graphic design discussed so far, from scale to color to texture, and serves to create a certain stability to the piece’s visuals and message. When a design is unbalanced, one side or point can often feel dominant to its surroundings, muddling the overall message and leaving the viewer confused as to where they should center their attention (Lupton & Phillips, p49). Thus, design is one of the necessities that becomes more noticeable when it isn’t present, and is important to keep a piece striking but easily navigable. Balance typically revolves arounds the basis of symmetry, but can be achieved either way – symmetrical balances can make a piece look orderly and organized whereas asymmetrical balance can add a flair of randomness and visual intrigue (Lupton & Phillips, p50). By achieving balance, however, both methods can prevent either side from dominating the screen, and more evenly spreads attention throughout ...
No graphic can exist without a frame, and, as such, framing is an important tool in how the messages of graphic designs are ultimately expressed (Lupton & Phillips, p117). By themselves, frames are just the containers for the items within it, but, with their use, they can provide visual structure and modularity while separating their contents from the rest of the surrounding page (Lupton & Phillips, p117). In doing so, frames can partition off their contents as self-contained objects, while also setting a standard scale within them. Frames that that are similar can group and compare related objects or can vary with weight and size to emphasize their content’s importance (Lupton & Phillips, p117).
Notably, when it comes to the spacing in- and outside of the frame, padding makes up the distance between the frame border and its internal contents, whereas margin makes up the negative-space between the frame border and its external surroundings (Lupton & Phillips, p120; Hossain, web). In doing so, margins can provide a protective space from the frame/contents and the rest of the ...
Notably, when it comes to the spacing in- and outside of the frame, padding makes up the distance between the frame border and its internal contents, whereas margin makes up the negative-space between the frame border and its external surroundings (Lupton & Phillips, p120; Hossain, web). In doing so, margins can provide a protective space from the frame/contents and the rest of the ...
Hierarchy is an important tool in graphic design in organizing and ordering the informational or visual importance of several datapoints (Lupton & Phillips, p129). Hierarchy can introduced through a variety of means – most commonly through properties such as scale, color, font, and alignment – but also through the clever use of layout and rhythm. In doing so, an effective hierarchy could guide the viewer through a graphic, emphasizing important datapoints while perhaps recontextualizing others (Lupton & Phillips, p129). A design without hierarchy, whether textually or visually, can look flat and somewhat confusing as to follow, muddling the delivery of the message to its viewers (Lupton & Phillips, p129). Common mistakes in graphics and presentations include the overabundance of similar text, which can overwhelm a hierarchy and the audience’s attention as where to look next (Lupton & Phillips, p130). As such, good hierarchies don’t only structure the order of datapoints, but can reduce informational bloat in a graphic as well. When considering menus or table of contents, for example, effective hierarchies can eliminate repeated ...
Layers are an important consideration in graphic design, as they can add depth and structure to a graphic, as well as deconstruct it into several overlapping parts (Lupton & Phillips, p141). Layers themselves are just several planes that intersect, creating an illusion of items at the top being closer to the viewer than those underneath (Lupton & Phillips, p141). This contributes to a sense of visual hierarchy and structure, highlighting the information in front while obscuring or even grounding the rest as literal background information. Common works that implement heavy layering include collages and maps, which may use the bottom layer as a foundation which it then builds upon with more information (Lupton & Phillips, p142). Layering is particularly thematic in graphic design due to its role in the design and production process throughout history. In the pre-digital era of graphic design, works know as mechanicals or ‘paste-ups’ used to be created to lay out and eventually capture a publication page, which would involve cutting and pasting elements on separate precisely-aligned layers of paper and acetate (Lupton & Phillips, p141). Today, many applications related ...
Gridding in graphic design is an important tool in creating the framework of a graphic, helping direct the placement of items while maintaining a sense of consistency and modularity (Lupton & Phillips, p187). The ‘grids’ themselves are typically collections of vertical, horizontal, and sometimes even diagonal lines that together form outlines for potential items, and can vary in quantity, angle, and shape (Lupton & Phillips, p187). Using these lines, items can be positioned such that they always exhibit the same angle and spacing, as well as very precisely on certain measurements about the graphic (Lupton & Phillips, p187). This helps improve the modularity of items around the graphic, as the entire layout doesn’t need to change to add or swap one image, but instead just needs to snap along the grid. As well, grids can help create consistent spacing for margins and padding, working with the negative-space to provide structure to the overall graphic (Lupton & Phillips, p196). While the grid itself doesn’t often exist in the final product, they can often be made out according to the placement of objects along it (Lupton & Phillips, p187). As ...
Patterns are a common technique within graphic design, with the power to create a consistent visual motif across planes and layers while also contributing to the larger overall texture of a graphic (Lupton & Phillips, p201). Broken down, any pattern consists of a repetition of three abstract elements, those being isolated points, linear stripes, and the intersection of the other two elements (Lupton & Phillips, p202). Together, they start to form a complex grid that takes on a new texture by combining the outlines of each of the smaller objects into one larger subject (Lupton & Phillips, p202). In doing so, the positive and negative space can switch between what is considered the points and what is considered the line, creating an interesting dichotomy for the viewer. Notably, any image or shape can comprise the points and lines if they’re geometrically similar, enabling patterns to be made using any object whatsoever (Lupton & Phillips, p203). The repetition formed by these objects contributes to the overall rhythm of a piece without needing to be in perfect geometric intervals (Lupton & Phillips, p203). In doing so, the pattern extends a certain cohesiveness ...
test
HISTORY
test