Trevor Waturuocha's profile

Week 8: Editorial Design 2 | Typographic Hierarchy

Week 8: Editorial Design 2 | Typographic Hierarchy
Poster Design 1:
Explain your design decisions:
For the first prototype of the poster advert, I aimed to depict the play using the most traditional techniques of type hierarchy to understand the fundamentals. I chose the Garamond typeface to create a historically accurate setting. Afterwards, I used alignment heavily in the text to indicate the levels of importance in the information. In this case, the title, playwright and other areas such as the cast and details were centred. In addition, I used subtle type furniture in between the contact details at the bottom of the page to hide the negative space.  Last of all, the magazine quote was broken down into three lines where its transitioned from flush left to centre and flush right. Overall, I was pleased with the outcome on the basis that it was my first attempt, but I believed that more complex skills could be used in the future.
Poster Design 2:
Explain your design decisions and what, why, and how you changed from one to the other:
With the second iteration, I decided to incorporate a style of poster typography that is commonly associated with twentieth century theatre. The typefaces, for example, are modern serifs that belong to the ‘Rockwell’ and ‘Bienetresocial’ font-families. I used Rockwell for the display face as the weight of the strokes were easily distinguishable with large point sizes and therefore suitable for a headline. In contrast, Bienetresocial was applied throughout the text since the strokes were considerably thinner and lower in hierarchy. At the top of the poster, I positioned the headline in a manner that created a visual effect where the words appeared to gradually increase in point size up to the word “nothing”. This effectively symbolised the theme of the play as the design connoted the idea of exaggerating small things. Meanwhile, the name and surname of the author was aligned flush left and right at the top of the page to compliment the headline. The remainder of the text was centre aligned and justified where appliable to minimise some of the excessive negative spacing that was encountered in the first design. Finally, I used more variations of type furniture through the vertical lines and callout bubble to create a structure for the text that is legible and attractive. If there was one improvement I could make, I would try to minimise using type furniture entirely and instead use the font by itself to define the hierarchy.
Explain your design decisions and what, why, and how you changed from one to the other:
My third and final poster design for the Shakespeare challenge was intended to be a culmination of the design hierarchy skills that I have adopted from the previous editions. I used the sans-serif ‘Codec’ font to produce a contemporary theme to the print that can be appreciated by a wider audience. Much like the other illustrations, the text was organised by the precedence of information that is being conveyed. The title, for example, used the heaviest weight, largest point size of the entire page, and was italicised.  Moreover, subtle symbolism was used in the thin strokes of the word ‘nothing’. On the contrary, the type for the contact details were lighter and smaller since it was lower in priority. By applying this method, every section of information was clear and uniquely identifiable. Above all, I ensured every line had the same justified alignment for consistency and increased the tracking for words that did not originally touch the margin. As a result, the poster made it easier for a viewer’s eyes to look at and track the flow of writing.
Critique and Redesign:
Puppyworld Pet Shop Website (https://puppyworldpetshop.com.au/)
Critique:
When a user visits the page, they are immediately presented with a responsive navigation bar, headings, buttons, body paragraphs, a table and business contact information. Even though the typography is clear and serves the baseline of communicating information, the choice of typeface and overall hierarchy had amendments to be desired. First and foremost, the buttons on the navigation bar, while identifiable with the contrast, were slightly difficult to read due to a small point size. Following the bar, the next section of interest was the banner which consisted of a company message and call to action buttons. While the image may draw attention to a visitor, the text positioned on top of it, like the navigation bar, was difficult to read due to a bright coloured background. Furthermore, the thin strokes for most headings did not aid in defining the priority of the respective information. Weighting throughout the page was inconsistent as the titles and headers that would otherwise be of greater importance were light while some less essential text was heavier. Alignment could also be varied as nearly all writing shared a common theme of centre or flush left positioning. Most importantly, the overall page could benefit from incorporating a typeface that was marginally softer in form to create a friendlier appeal.
Redesign:
To make the redesign possible, I focussed on three primary issues that impacted the original page; typeface, weighting and point size. Initially, I decided to change the Open Sans font family entirely as I thought it appeared generic and uninspiring. In place of this, I used the Microsoft Bahnschrift typeface – a Sans Serif font that is popular among designers for its industrial aesthetic and versatility. It complemented well with the relaxed theme of the website as the type signified elegance in simplicity.

For the navigation bar, I increased the point sizes of the buttons to 7 points to address legibility. The weighting of the home button was also increased to bold so that users could easily discern the difference between an active and inactive page.

Subsequently, I made several changes to the banner to improve the clarity of the text as it was difficult to read prior. A brightness mask applied to the background image and the levels were reduced slightly to help accentuate the white font colour. I then increased the point size of the ethos to 14 points to help animate the writing and encourage readers to give attention to the message.

With regards to the four columns of text in the section thereafter, headings and call to action buttons were modified to have heavier weighting while each body text was left aligned. This helped separate the text visually to create a clearer hierarchy between elements. The ‘about’ section adhered to the same pattern since it was similar in style, but I also increased the point size and spacing to improve the sentence flow.

Afterwards, I removed the underlined phone contact from the enquiry section and instead boldened it to reduce the use of unnecessary type furniture. Lastly, I increased point size and weighting for all footer text as it was previously illegible with the smaller, wiry strokes. I also added a subtle grey colour tint to the opening hours to highlight the important information.
Week 8: Editorial Design 2 | Typographic Hierarchy
Published:

Week 8: Editorial Design 2 | Typographic Hierarchy

#QUT_TypeDesign20

Published: