Week 9: Editorial Design 2 / Typographic Hierarchy
TASK 1
Critique and Redesign
What is the structure of the content and what resources did the designer use to visually represent the structure of the content, to create a visual hierarchy on the page?
The entire main content of the webpage is structured in the center of the page, with only the language choices and tabs to other similar websites surrounding it. This creates a large margin on either side of the content, enabling a lot of white space to be shown.
The headline for the main content is the ‘Hello’, which helps create the structure for the content below, as it is left aligned with the body text. The search box beside the header has a similar purpose, with it being the structure for how far right the body text goes off to.
The left side navigation is coloured in the brands unique pink colour, which helps to create a sense of familiarity. The navigation is also the ideal design and layout as side navigations are commonly used for webpages with a lot of tabs, for more efficient scanning and structuring.
The body text uses a Times New Roman font, which helps with increasing both the readability and speed of reading through the paragraphs. Under the first paragraph is another text, which again sues the brands pink colour. A different font is used here instead of the body text, to help differentiate the purpose of it.
Another navigation bar is situated on top of the webpage, mostly hidden from view. This is done as the navigation bar’s information is not important for majority of the users to this webpage. The languages bar is also not important for most users; however, it is not as hidden as it needs to be noticeable for people that do not understand the language to help navigate the site without problems.
The left navigation and headline/body text are both aligned to the padding between the two elements, wherein the nav bar is right aligned and main content is left aligned. This creates a structure for the rest of the content on the page. The various sizing and colour of text helps to ensure a visual hierarchy is formed from top to bottom, to help with the readability and flow of the content.
What do you think works? What doesn't and why?
I think the webpage works to communicate a lot of information about the website in one go, but I sense the feeling the website has not been updated for many years, and this effects my desire to stay on the page. The emphasis on the text rather then the search bar is a problem, as the search bar itself is one of the more important reasons to come to this webpage. Another problem with the search bar is the greyed-out design, which does not help to bring any attention to it. The only thing helping bring any attention is the border around it, which is differentiating it from the other content.
The colour is used in a nice, minimalist sense, where only a few parts include any colour. This is the logo, nav bar, language options, editor button and footer end. This helps to achieve a very clean looks and helps to create a visual hierarchy with the elements and content. The center alignment of the body text to the webpage helps to ensure the eye is focused only to the content the whole way down. The colours also helps to create a different between the interactive and static elements, by making the interactive elements either blue (hyperlinks) or pink.
Website Redesign
Continuing on from the critique I gave earlier about the p5js.org website, I wanted to redesign the site in a modern fashion, in keeping with the new trends set by other companies lately. The main inspiration in the final redesign was the home page for W3 schools, who in recent years have updated their website to a trendier style which is more inviting and simpler to use.
I also wanted to include a more obvious visual hierarchy, with the rectangle on top helping to break the webpage into two equal halves. The top section is reserved for the main information users come on the webpage for, and the other section is the secondary information. A screengrab of the p5 editor is included alongside the body text in the top section, in order to assist the user in visually guiding them where to go. This design was heavily inspired by W3 schools, who follows the similar pattern.
I also decided to eliminate most of the white space that was shown on the previous version, as it was serving no purpose in the overall design. No images or information was being complimented by the white space, and the only aspect the space influenced was creating a longer vertical scroll, which was a problem I addressed in my redesign. Due to my design including the two horizontal columns for information, it allowed me to fit more information on a single row, thus making the scrolling overall shorter. The white space still plays a role in my redesign, but is this time done with the purpose to allow more better readability, whilst pushing the content up.
The left navigation bar was taken out completely, and the tabs were moved either to the top navigation, or footer, depending on the importance to the user. Due to the previous vertical scrolling, the left navigation was useful as it allowed for better structuring and scanning of the content. With the redesign however, the left nav bar was out of place and incorrectly structured the content on the page, whilst also taking away valuable white space.
Finally, I used Open Sans for my type face, which was the ideal font to use for modern websites due to its ability to optimise for different sizing, and versatility to combine with most other fonts. It is also a commonly used font for digital devices nowadays.
Redesign
Drafts and Inspiration
TASK 2
Event Program - Conference line up
For my conference line-up, I decided to go with some of the most influential scientists in history. Albert Einstein, Nikola Tesla, Charles Darwin, Isaac Newton, and Marie Curie. These 5 have contributors greatly in the expansion of human knowledge, which paved the way for many of the principles and technologies alive today.
As this is a scientific conference, I wanted to evoke a feeling of professionalism, whilst including a modern twist to attract a wider audience. The colours used, and designs of the images are simple ways to attract attention to the conference, bringing people in to listen to the great minds throughout history.
I used a 5-column grid to structurally spread out the information across the pages. The grid allowed me to have more flexibility with my placement of images and text. I eventually stuck with the layout below as the visual hierarchy formed guides the viewer through the content in a simple, readable manner. On the other hand, twelve rows are used due to the large quantity of content. I needed to fit everyone in the spread, but also allow white spacing between the content to ensure readability remains.
A variety of typefaces were used in this event program to help with structuring of the content. The headers both use the Roboto typeface, with the top one utilising a bold styling, and the one below utilising a light styling. The separation of the styles helps to split the two headers to form a greater visual hierarchy, as the bold styling attracts the viewers’ attention first to the top of the page, and the other stylings and sizes of the fonts guides the eye down and across the rest of the spread. I used Architects Daughter for the names of the scientists, in order to help evoke the modern style of the program. The coloured rectangles work as backgrounds for the text, additionally the text uses a negative space approach to add greater contrast between the names and pages. Nunito light is used for the body text information, with Nunito light italic used for each quote, I felt that the Nunito font complimented the Architects Daughter font in providing a modern style to the program.
The green colour used throughout the program is hex colour #2BB673. This colour complimented the modern style I was going for, without bringing too much attention to the colour. It allowed the program to have just enough colour for it to be interesting to look at.
The atom icons scattered behind the content was simple a design choice to take away most of the empty space, which originally made the program look plain. The icons also helped to relate the overall content back to the science theme of the entire conference.
Grid used
References
home | p5.js. (2021). Retrieved 13 June 2021, from https://p5js.org/
p5.js Web Editor. (2021). Retrieved 13 June 2021, from https://editor.p5js.org/
W3Schools Online Web Tutorials. (2021). Retrieved 13 June 2021, from https://www.w3schools.com/
Nikola Tesla - Wikipedia. (2021). Retrieved 13 June 2021, from https://en.wikipedia.org/wiki/Nikola_Tesla
Albert Einstein - Wikipedia. (2021). Retrieved 13 June 2021, from https://en.wikipedia.org/wiki/Albert_Einstein
Charles Darwin - Wikipedia. (2021). Retrieved 13 June 2021, from https://en.wikipedia.org/wiki/Charles_Darwin
Isaac Newton - Wikipedia. (2021). Retrieved 13 June 2021, from https://en.wikipedia.org/wiki/Isaac_Newton
Marie Curie - Wikipedia. (2021). Retrieved 13 June 2021, from https://en.wikipedia.org/wiki/Marie_Curie
Nikola Tesla. (2021). Retrieved 13 June 2021, from https://www.biography.com/inventor/nikola-tesla#:~:text=Quick%20Facts&text=Tesla%20designed%20the%20alternating%2Dcurrent,used%20across%20the%20world%20today.
