Surf the web and find one good example of a website that uses hierarchy to guide the viewer’s eye on the homepage.
- Explain how visual hierarchy was achieved (scale, colour, spacing or contrast) and mention the viewers pattern if there is one.
- Take screenshots and use the colour picker in Photoshop or Illustrator to put together the website’s colour palette. Describe the use of colour in terms of primary, secondary, and accent colours.
- Use screenshots to show and discuss the different text styles and choice of fonts for these (mention at least the H1, button and body text styles).
Post the following to your blog: your findings, at least one screenshot and a working link to the website.
I choose to take a closer look at the furniture shop Vitra.
It looks like the website is using the Z pattern, because of the logo that’s placed in the top left corner, a lot of buttons in the top right, a big attention grabbing photo, or in this case a looping video in the middle of the page, and more products to look at in the bottom.
The designers have gone for a clean, white background that makes the pictures and products they are selling really stand out. There is a sparingly use of color on the website, as most of the colors come from the photographs. They have used a beige color to highlight some important information on the top of the page, and grey on the footer. The logo and all of the text is black.
They have used modern sans serif fonts for all of the text, even the logo. The fonts are light and doesn’t take the focus away from the images and is easy to read. It seems to be the same font on the buttons as well, only changing between bold and light versions. This websites buttons doesn’t really stand out from the rest of text as it is the same font, and doesn’t have any border around them etc.