Design Journal

Design Journal - student project

Design Journal - image 1 - student project

For this project, I wanted to explore a variety of design types based on images and products I encounter regularly. When examining these designs, I also tried to focus on 'Key Elements' and how product type provides a constraint on the design. 


Design Journal - image 2 - student project

Design 1 is a simple alert message, so the design focuses on use of white space to draw attention to the central message. Contrast in color, typography, and size also lends to the hierarchy of the design. Balancing the design by limiting the colors and centering the message keeps the design function-focused so that users do not spend too much time trying to understand the page. 

Design 2 is a graphic illustration based on state of mind. Use of the word "anxious" conveys the message explicitly but use of contrast, tension, and scale help to elicit the feelings of the word. Tension, specifically, is created by utilizing diagonal and off-center placement, as well as unusual typography. Contrasting colors also help to draw the eye to the central message. 

Design Journal - image 3 - student project

Design 3, being a physical product for consumption, requires more information and utilizes a variety of design elements to lead the consumer to relevant information about the product. Information Hierarchy is established through the scale of typography, symbols, and branding. In addition, placing the brand name at the top with a contrasting color makes it easy to find. Tension is also created through the mix of straight and curved lines in the center focal point. Using the depth of the illustration also adds to tension, in addition to conveying important information about the use of the product. 

Design 4 also displays a product, but focuses the attention on the visual aspect of the product through use of scale and contrast. A vibrant color scheme contrasts a more pale drink, allowing it to stand out. The scale of the product also allows the branding to take center focus, while the typography creates tension through shape and smaller scale. Tension is also added through shapes overlapping and cutting off at the edges. 

Design Journal - image 4 - student project

Design 5 uses the tension of shapes such as an arrow to draw the user's eye and then lead them directly to the information. Hierarchy is established through the use of typography to establish a header, subtitles, and details. Use of contrast in the colors, shapes, and sizes keep the user's eyes engaged long enough to identify information before leaving the page.

Design 6, in contrast, relies on repetition and white space to unify the user's experience. The shapes of images are all of equal size, and use the same background color. Contrast is used by minimizing contrast between white space and image backgrounds, and emphasizing the contrast between prices and white space. 

Design Journal - image 5 - student project

Design 7 uses high contrast to catch the consumer's attention. The image and typography utilize tension through diagonal lines, cut off edges, and overlap. Repetition is established through use of reflection, and color helps to locate the relevant information against the white space.

Design 8, as a medical product, utilizes a lot of white space to help the user locate the necessary product information. Use of color also helps to identify the brand and product names. The design is balanced through symmetry of the dots, which also help the user open & close the product correctly. The symmetrical blue tabs also function to help follow correct usage. 

 

Design Journal - image 6 - student project

Design 9 uses Hierarchy and Repetition to help the user locate and understand the information displayed. Hierarchy is established by size of boxes, typography, and symbols. Symbols, types of data, and shapes are all used repetitively to familiarize the user with the information. Color is then used to elaborate on the information by codifying each color. White space aids in this design to break up the information to make it more readable.

Design 10 makes more use of tension through filling the space with lines and colors. The lines also overlap with transparency to add to the tension. Color, here, is used to emphasize tension and provide contrast to the typography. Scale of Typography also leads the consumer around the book cover in order of most important information to details.

 

Also of note is that all of these images were pulled from previously saved screenshots. It was very interesting to go through my saved images and take note of what types of designs I am naturally drawn to, even when I wasn't consciously choosing design when they were saved.