Week 8
Typographic Hierarchy
Task 1
Type Hierarchy Challenge
Poster Design 1
The overall aesthetic for the first poster design was bold and classical, which was achieved through a combination of two serif typefaces (Ambroise and Didot). The first element seen on the poster is the title "MUCH ADO ABOUT NOTHING" which can be attributed to its size, its use of upper case letters and the significant vertical stress of the Ambroise typeface. With the remaining text written with Didot, "William Shakespeare's" is the next element that stands out because it is written in white on a black box, which also helps to separate the title from the other text. The quote by USA Today is larger and separated from the other text to be the next element to stand out, which is followed by the director and actors, with line weight used to make words stand out to improve legibility. Then in decreasing size, the elements seen are the date, performance details, venue details and finally the website and phone number. Overall, the poster layout is very balanced and the use of size, line weight, and spacing successfully create a hierarchy to improve the legibility.
Poster Design 2
Compared to the previous design, poster 2 was intended to be more modern, which was achieved through the use of white text on a black background and sans serif typefaces (Lemon Milk and Source Sans Variable). The typeface chosen for "MUCH ADO ABOUT NOTHING" was Lemon Milk, which was chosen for its thick line weight and sharp corners.
To make it stand out, the title was written at the top of the page on the line between the white and black sections, with "MUCH ADO" written in black and "ABOUT NOTHING" in white (with about nothing written in white as a pun). Despite its light line weight, "William Shakespeare's" is the next text that is seen as its the only other text written in black and is at the top of the page. Compared to the previous design, poster 2 is more dynamic to make it more modern, which is achieved through the alignment and positioning of text and the use of curved vertical lines, which also add visual interest and help the flow of the poster. Following the poster down, the director, actors and performance details are all written in similar sizes as they are of similar importance, with bold letters used to highlight important elements. Next the USA Today is written in bold and the quote is written in large italic letters to differentiate it from the other text to show its importance. Finally the location and contact information are written in the smallest font at the bottom corners of the page as they are the least important.
Poster Design 3
The final poster was intended to be bold, with a slab serif typeface called Rokkit used with varying sizes and line weights. To match the blocky nature of the typeface and to add visual interest to the poster, 3D blocks were included as a means to display information more dramatically. Written at an angle follow the perspective of the block, written using a bold line weight and large letters, the title is the first element which is seen. To add further interest and to take advantage of the use of 3d elements, the word nothing is cut out of the title. Next, "William Shakespeare's" is seen because of its positioning on the block, written vertically in a large size to make it stand out. The next element that is seen is the quote by USA Today, which stands out because of the large, bold letters and the use of large quotation marks. To create a consistent theme for the poster and to highlight key information, another 3D block is added with the date of the event written on it in large white text. The remaining information is left aligned to improve legibility and is organised using size and line weight, with the characters getting progressively smaller depending on their relative importance.
Task 2
Critique and Redesign
What is the structure of the content (main titles, subtitles, times/dates, menu, contact information, news text, body text, etc)?
The top banner of the computer alliance website features the logo in the top left corner with contact information directly below it. In the right hand corner there are headings pertaining to customer information with a search bar directly below it. In the next section of the banner, there are headings including the shop menu, specials and help, with a drop down box coming from the shop menu to navigate the website. In the centre of the page, there is an advertisement with descriptive body text below it and subtitles below that. Finally the specials are shown at the bottom of the page, with payment options shown to the left.
What resources did the designer use to visually represent the structure of the content, to create a visual hierarchy on the page (typeface, position, scale/size, weight, colour, contrast, orientation)?
At the top of the page, a banner utilising two shades of purple separates the most important information from the rest of the page. Within this banner, the position of text helps to create hierarchy, with the contact information directly below the logo and headings directly above the search bar. The text also utilises scale and capital letters to create hierarchy, with the headings written in all capital letters in a large size and line weight. Placed vertically down the left side of the page, a grey box is used to draw focus to the navigation headings, which are written in a larger size and line weight in all caps. Then to make the information easier to read, lines are placed between each option and small arrows are used to show their function. Finally, scale is used in the body text to include information that is less important directly below the paragraph.
What do you think works? What doesn't and why?
The simple layout of the website allows it to be easily understandable and therefore quick to navigate. The use of colour in the banner is effective in organising information and makes the page more visually appealing. The use of a single typeface makes the page cohesive, with scale, line weight and capital letters effectively used to create a hierarchy of information. Finally the use of shapes to highlight elements and the vertical orientation of the menu makes it stand out and suits the context of the information. While this website is simple and effective, elements such as the application of colour, the search bar and the rounded shape of the menu contribute to make the page look outdated and tacky.
Describe your design decisions, and style guide. Please use InDesign for this task and make sure you set up your styles as per Studio content video.
The Computer Alliance website was redesigned to be more modern and visually appealing. Similarly to the original, only one typeface was used when designing the new website, however the variations in scale and line weight were made more dramatic to make the hierarchy more clear. First the scale of the heading and menu navigation were increased, with the text written in all caps to make it stand out. Next, the scale, line weight and spacing for the customer navigation was increased to improve legibility, with the icons removed to make the banner look cleaner. To better align the website, elements such as the customer reviews were moved around to better fill out the page. Finally, the accent colours of the banner were utilised in separation lines throughout the website which worked to add visual interest and better organise the information.
