Typographic Composition

DVB201 Typography A2 - Typographic Composition

Week 7 - Critique

How many typefaces were used?

12 different typefaces were used across both labels.

How do the typefaces relate to each other?

Large and bolder font is usually paired with a smaller more compact font to provide a big eye catching element for the important information and then provide more miscellaneous info through the small text.

How did the designer use space and alignment to organise the text?

For the front label the designer had 4 main points of information being delivered with plenty of space in between them to emphasise the points.

On the back label the information is organised from top to bottom, with prominent headers that provide relevant information beneath. The spacing is much tighter to allow for the inclusion of much more detailed information then the front label.

What were the treatments used to differentiate text and organise information — size, scale, treatment (colour, effects)?

For the front label the logo is the largest element and centralised to allow for strong brand association. The other 3 main elements for the front label are about half the size of the logo with on a couple words each clearly seen to quickly get its message across to the customer. The logo is also surrounded by white space with helps to further emphasis the saturated red and blue logo, while the secondary elements are a light blue which is easier on the eyes and makes them obvious enough without over stimulating the customers eyes with colour.

What are the other elements on the label (logos, images, graphics, rules, background colours)?

The bottle presents the logo of the company, has a trusted brand badge and a graphic of bubbles on a gold background surrounding the main logo.

What is your opinion about the quality of the label? Does it work? Is it aesthetically pleasing? Is it effective? Why do you think that is?

In my opinion the label is well done and for the most part very serviceable and follows all the rules for a good design, but it is quite unoriginal. I say this because it looks like/ what I imagine what any other cleaning product would look like while walking down the cleaning section in a grocery store. It is effective and efficient at getting it's main message across of being a powerful stain remover from a trusted company, prominently through the four main elements shown on the front label. The colours work well together, they make the text clear and readable without over stimulating the eyes of the customer.

How does the use of type and its organisation on the label influence the aesthetic quality and efficiency of this label?

As mentioned above the label is efficient because it breaks up the front label into 4 clearly recognisable sections with enough spacing between them all with the secondary elements surrounding the centralised main logo. While the label has effective messaging and design the aesthetic quality as stated is generic and uninspired.

Week 7 - Label Design

LABEL 1: 2 typefaces and one colour only

This label has tight wording but uses size and weight to show the hierarchy of information. This was achieved by setting the tracking on the words to -10% for the front labelling and adjusting the weight of the appropriate text to make them standout. The composition and arrangement of the text resembles a square and the brand name stands out from this square and has a different font with handwriting style to stand out from the rest of the label. Another eye catching element is the badge showing “30 Washes” and uses wording around the badge to notify the user that it is “made in Queensland”. This design overall has a top to bottom design that clearly shows all of the important information with minimal ink.

LABEL 2: 1 typeface and one colour only

This label tries to achieve the opposite effect of the previous label by using the space between the words to show the hierarchy of information. The same font is used but the colour green is used to compliment the keywords “Naturals” and “Eco” in the label. The brand name in centre uses a circle that has all the information provided about that company inside of it. All of the larger more important information uses +25% tracking to emphasise it. All capitals are used with the smaller text that uses the tracking to further emphasise it and beneath each of them has a smaller bit of information to not overload the viewer with too much information at once.

LABEL 3: 1 typeface only and up to two colours

This label has a more grounded style then the other 2. This is achieved by featuring only lowercase letters and only using size and weight to differentiate the information and by aligning all of the text to the left. By using no extra graphical elements and the earthy colours reinforces the grounded style further. A compact style font is used to give it a more utilitarian look. The information is grouped into 4 sections to give the viewer a few points to look at quickly and then look into it further if given more time.

Week 8 - Designs

Design 1

This design was heavily designed by vintage poster style such as boxing match posters. The information is shown top down and the weight of the type is used to show the hierarchy of information as the viewer is looking from top down. The 4 key points of information (date, time and price, place) are zigzag from each other to follows the readers natural left to right reading style and also gives balanced to the poster. Both wide and close tracking is used to fit information within a grid-like presentation that helps organise the information as the style doesn’t leave much negative space as the viewer could easily get lost in the clutter otherwise.

Design 2

This design is quite the opposite of the last where there is plenty of negative space to give the poster a more elegant and simple design. The hierarchy of information again is highlighted by both size and weight of the font, but instead of making the important information massive I have chosen to make the less important information very small which serves the same purpose but with different effects. Some of the words have been cut out to simply the content to add value to the simplistic nature of the style while still giving enough context.

Design 3

This design once again uses a vertical design but is much more visually organised then the previous one. The information seems to be wrapped into rectangles much like the first design but provides more spacing between the content. The hierarchy of information is determined by the size of the font and the order from top that they are in. An element that stands out the most is the massive quotation marks around the quote that draws the viewers’ attention and the good review it’s been given. The title is also very bold, and its shape makes sure it is the first thing to grab the viewers’ attention. The font style is bold and curvy, suggesting that it is likely to be a comedy.

Week 8 - Critique and Redesign

Critique

The website’s structure contains a navigation bar, headers, paragraph text, contact information, buttons. Overall the typography for this website is very bland and shows little thought into type hierarchy besides position. Beneath the navigation shows a banner that is green with white text, this is visually dynamic and stands out from the rest of the text on the page. There is no difference in font style from the navigation elements and the paragraph type besides the use of icons. The header from the paragraph show no difference in style except for size. The contact information is also a bland and difficult to follow and has highlighted email that doesn’t fit the surrounding style. The designer of this website uses left alignment for the text to group them visually which works well but is very basic and the orientation works fine as it is only a simple website with limited purpose. The font for the website isn’t consist for the font the headers in the images making them seem like they don’t belong.

Website: https://www.bosistos.com.au

Redesign

NOTE: Graphical elements such as images, logos and interface element have been left out of the design as they aren’t directly related to the typography of the website.

The main changes I made were to the font style and adding a wider variety of weights, sizes and colour. For the font I changed it from the standard Arial to Barlow which comes in a condensed style which allows for a greater variety which maintaining consistency. I’ve used the condensed version of the font for headers and anything similar with also a bold or semi bold weight to make them stand out and create visual consistency among them. For the banner under the navigation I have made the type standout by making it italics to give it emphasis and also suggest that it’s a limited thing.

For the main green section beneath the first few images I have increased the size of the header drastically to allow for clarity and to draw the viewers’ attention to the section, as previously the header blended in with the rest of the text. The bottom section of the text talking about the social media is given more space from the rest of the content, lightened given italics to suggest that it is a side note to the main content. For the footer section I’ve given the headers the condensed style and extra weight but also changed the colour to blend a little better with the background to bring out the information beneath them. For the contact and the company information I have also changed the colour for the sub headers of bit of information to increase the clarity of the information itself.

The organisation of the footer is left the same as it is suitable. The style for the top image headers were simple and well done and mostly kept the same in the redesign.

Week 9 - Critique

The magazine uses a regular times new roman style font for the majority of the reading text and uses slab serif font for most headers and fonts. Sans-serif font seems to be used for side notes that overlay images, and a larger thin serif font is used also for some headers. The content is about the history of motorbikes, so the heavy use of serif and slab serif fonts are appropriate as they appear old fashion compared to sans-serif fonts.

Small quotation boxes up in the top left are markers that indicate what the current content is written about and also uses colour to present this. The hierarchical structure follows a typical magazine design with a bold header and the text continuing beneath and going from left to right.

Each page has 5 columns and 6 rows (shown roughly in the image). The written content mostly stays within the grid unless it is an annotation or part of the timeline diagram (page 61). Elements that reinforce this grid are lines that separate the text columns and also most of the images align with the grid too. Although some images don’t follow the grid but only with collections of images without text.

Overall the design works well for it’s intended purpose and audience. While there are a lot of text to read the line length isn’t too long and is broken up with stunning and appropriate images and side notes that are placed within the grid as to look well balanced and structured. There are no clear improvements or recommendations to improve this design besides using a justify left for the text so the body text reinforces the grid of the spreads.

Week 9 - Fact Sheet Design

NOTE: This design is intended to be 1 double sided A4 page.

For creating my own grid system for a health fact sheet I first thought about the different style types and the hierarchy of the content. Since the content provided was very long, I opted to use a grid that is small with decent sized spacers. The advantage of this is that it allows for increased modularity and versatility so I could make many variations while still looking consistent. I also had big spacers for the grid so the content wouldn’t be too cramped while still having enough room to fit it all. If there was much less content, I would perhaps use a larger grid with even more space between the content.

Zine Critique

OH MY GRID

https://www.behance.net/gallery/10356467/Oh-My-Grid-Typography-II-Process-Book

Oh my grid uses juxtaposition effectively between the message of the text and the imagery to get it's point across why grid is important. They use grid lines in an unconventional way that is also used as a framing device in unexpected ways. The designer will often use a single quote across a single spread this is an effective way to use minimal words to get across the message it is trying to portray. My take away from this zine is that breaking the rules puts into perspective how effective the rules are but also shows that they are more so guidelines then rules.

Taste the Waste

https://www.behance.net/gallery/74715233/taste-the-waste-zine tracking_source=search_projects_recommended%7Czine

Taste the waste goes for a very tangible zine look with creases in the page, faded ink printing and handwriting, highlighting and torn catalogue pieces. The style of the zine seems to be inspired by old cook books. The designer uses minimalism and contrast to make their point clear. Handwritten sections stand out amongst the printed words as it contrasts with the printed paper and feels personalised. My take away from this zine is that simplicity is key and using colour and type effectively can create contrast and serve the story well.

Zine Concept

My background as a programmer influenced my choice with the topic of monospaced typography and with the theme of computer programming. After initial research on the topic I found plenty of content written on the typewriter which is where the origin of the monospaced typeface came from. Therefore, I decided to mix the 2 ideas of the typewriter and computer coding to create a style that is a mix of print and digital design.

After the conception of my idea I had 2 very clear ideas for stylistic looks before drafting them. One as to write in computer code but make it look like it was from a typewriter, before making a draft I realised that lack accessibility since being in a print based class I cannot expect many people to be able to read proper computer code. My second Idea was to have a spread with one page appeared as code and the other as print so it could still be legible to those not familiar with programming. First challenge was to give the appearance of computer coding, as they typically have dark backgrounds with bright with brightly coloured code.

With 2 spot colours I could combine them to make a very dark blue/purple that I could use as the background but also as the brightly coloured wording.

Zine Paper Draft

I created a paper draft to get a better understanding of the length of the zine as well as the size, layout and binding I’d need for it. I chose a traditional paper back with 4 A5 pages binding by staples down the centre (example is not representative of this as I could not achieve it).

Originally I would have the content written on both sides of the spread but quickly realised that it wasn’t interesting and took up unnecessary amount of space, so I decided to have the content writing on the coding side and with the paper draft I began to think of what visuals I could use for the print side of each spread.

Zine Digital Draft

After I decided on a style and general layout of the zine, I began to make full digital drafts. I got feedback that the having the coding section on the left side meant that the eye was drawn to the white page, which was counter to normal reading patterns, so this was changed in later versions.

I couldn’t think of visual representations for every page, so I opted to use quotes from my research to support my written content.

I began to use my 2 spot colours and layered words over each other to create a misprint look that also helped emphasise the message I am trying to get across.

Zine Second Digital Design

To keep the composition consistent I created a grid to constrain the content. Due to the contrast in style on either page I made to different grids to fit their styles. The print side was styled like a typewritten manuscript so text was kept in the centre but still left aligned as too keep the characters inline with each other. The coding was styled after the HTML5 programming language, it isn't proper coding but it's made to look like it while also presenting the content. In coding languages it's common to use white colour for strings or written content that would be presented on a website and the indents to show the hierarchy of code to help with debugging.

The final spread about proportional fonts I decided to use a proportional font for the entire spread to further solidify the difference between monospaced and proportional fonts.

More saturated colours were chosen to give a more vibrant look which made gave a better contrast between either side of the spread.

Zine Final Design