Project 3: Newsletter
Fontfaces and Glyphs
This project involves the creation of a digital newsletter using existing brand guidelines and the study of interaction design and usability. Before the official start of the project however, I had to understand the importance of fontfaces and typography in changing connotation.
As an exercise in studying glyphs from different fontfaces, I traced over the following four fonts with tracing paper, noting how line width, curves, and shape differed between them:
- Adobe Garamond
- Didot
- Helvetica
- Futura
I noted that between the two serif fonts, Adobe Garamond and Didot, the latter had much higher contrast in its stroke width. Didot seems to be a more modern serif font, while Adobe Garamond is a little more old style, including thicker serifs that round off. I also noticed that with the sans serif fonts, Helvetica seemed more grotesque and Futura seemed more geometric. Although both were sans serif, Helvetica did seem to be more embellished than Futura in my opinion; I also noted how consistent the stroke weight was for these two fonts compared to the two serif fonts.
As a continuation to this activity in studying type, I looked at the intricate details in a single fontface. Studying Neue Haas Grotesque, I marked out the baseline, the x-height line, and the cap-height line. I also noted interesting details with the glyphs in the fontface:
- The end of glyphs, like with the “r” character, had a slightly thicker stroke weight than the start of the stroke.
- The dot on the “i” character was a rectangle.
- The curves that the characters follow, like with the “y” and “t” seemed to be similar curvature.
- The bottom of the “g” character was above the baseline.
- The descenders on these glyphs were relatively short.
Type and Connotation
In another exercise to explore the ways fontfaces impact design, I chose the word “light” and looked at how I could use type to change the implied meaning of the word.
On the left, I tried to choose a fontface that would enhance the meaning of the word; I used Zen Loop, a sans serif font with a lighter weight and thin, consistent strokes. I thought this would illustrate the feeling of a feather, light and delicate.
On the right, I chose a fontface that challenged the meaning of the word “light”. I used Felix Titling, a serif font with more consistent stroke weight and elegant serifs. In choosing this, I imagined “light” in its other meaning, luminescence. I thought about how the font was emulating sunlight and its almost “graceful” light rays.
In sharing with my peers, I found that people actually thought of a candle light when looking at my first font and thought about fragility and weight when looking at my second font. Although we had slightly different ideas about what feeling the fontfaces emulated, I found it interesting how type could change the meaning and atmosphere surrounding a single word.
Sticking to a Brand Identity
Continuing in this project, we had to choose a company whose brand guidelines we would follow. I chose the Greater Pittsburgh Community Food Bank, whose brand identity is displayed below:
As an introduction to following brand guidelines and encompassing the values and look of a company, I created three iterations of business cards for the GPCFB and looked at different ways I could play with color, text, and blocking to invoke different feelings.
Through these three designs, I gained valuable insights into some of the issues involved with designing with existing rules. The main problem I ran into was the lack of color continuity across platforms. In the original brand identity sheet, the color palette given was in CMYK; in Figma, however, colors are in RGB or hex, and you can’t give CMYK values. I tried to convert the colors online and color picked from the .pdf itself, but the colors were inconsistent and it was difficult to know which set I should use. In the end, I chose to use the ones directly from the file; in the future, however, I think I will use the colors displayed on the GPCFB website, which is actually designed for digital consumption.
Below are the three business card designs I came up with. For design 1, I tried to play with color blocking and used the red and green in the brand guidelines as complementary colors for contrast. For the second design, I enlarged the logo and tried to incorporate it into the main part of the design. Lastly, for design 3, I went for a more minimalist approach; after seeing some inspiration for business cards online, I felt that I could give the same information in simplified forms, and the design would still be effective.
Developing the Newsletter
I began working on protoyping the e-newsletter for the final part of this project. Looking at the GPCFB, I defined my audience to be primarily older adults and the elderly who have more time on their hands. Since these were my users, I knew that I would have to make my design more straightforward and accessible, since they may not be as familiar with technology as the younger generations.
Design Research:
I started by gathering inspiration for e-newsletters through Pinterest and began sketching a basic wireframe for how I could lay out my design. I also tried to gather more information from their website: pittsburghfoodbank.org, looking at what colors they used the most and what their design language looked like.
From the research I gathered, I noticed that they mainly used green and red for their CTAs, leaving the dark blue for all the rest of the text. I also noticed that they utilized these rounded rectangles as separate cards from their main text; this was a way for them to introduce more important information without it drowning out in their body text.
Prototyping:
I began to make an initial prototype in Figma, blocking out text and images in the same way I did in my initial sketch. I had created a larger frame so I could play with alignment and layout easily, but this ended up being detrimental to my process.
Using this initial prototype, I started to set up my design language:
- All text is in Praxis Next, though line weights would vary for hierarchy
- Dark blue is used for body text
- Green and red is used for headings and subheadings, respectively
- Any CTAs are in red and important dates are in green
- Main information about events are laid out in rounded rectangle cards
After I laid out a portion of the text, however, I wondered if the font size was too small. I resized my prototyping frame and placed it into the mobile email template provided for us. Loading the design on my phone, I realized that the font was way too small, and the way I blocked out my newsletter was more fit for a desktop screen rather than a mobile one.
In my second iteration of this design, I kept the medium in mind and tried to make sure the items were readable on the phone. This process involved referencing some emails I received and noticing how large their font sizes and images were, which became the basis for my second prototype.
After some peer review on this iteration, I received comments that this font size was still too small to comfortably read on the phone. One of my peers introduced me to the mobile version of Figma, which helped me immensely in testing: I continued to use this when creating my final iteration of the newsletter. I also needed to create a separate version for the desktop version of this newsletter, which required extra iteration.
For my final iteration, I increased the font size further to accommodate for my older audience and I altered my existing design to fit onto a desktop version of the email. The final prototypes are shown below:
Reflecting back on this process, I wish I had gotten others to look at my work sooner: having user testing was incredibly helpful in letting me notice what issues were wrong with my existing design, allowing me to iterate faster. Despite this, I think being able to look at an existing branding sheet and design around that was really insightful and was perfect in allowing me to actually understand what goes into creating a brand and graphics.