Screen based design 1 task-4


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, color, spacing or contrast) and mention the viewers pattern if there is one.

    Visual hierarchy on the Apple website is achieved through a combination of scale, color, spacing, and contrast. The website uses large, bold headings to draw the viewer’s attention and guide them through the page. The use of color also helps to create visual hierarchy, with primary colors like blue and black used for important buttons and links, and secondary colors like grey and white used for less prominent elements.

  • Take screenshots and use the color picker in Photoshop or Illustrator to put together the website’s color palette. Describe the use of color in terms of primary, secondary, and accent colors.

    The website’s color palette includes a range of colors, including bright blue, deep black, and various shades of grey. The use of black as a primary color and grey tones add a sense of sophistication and elegance. While the use of accent blue helps to create a sense of excitement and energy. The use of different shades of grey also helps to create a sense of depth and visual hierarchy, with lighter shades used for background elements and darker shades used for more prominent elements.


  • 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).

    In terms of text styles and fonts, the Apple website uses a variety of unique styles to create visual interest and communicate diverse types of information. The H1 headings use a bold, sans-serif font in a generous size to draw the viewer’s attention and convey the main message of the page. The button text uses a slightly smaller, bold sans-serif font to highlight the call to action and make it easy for the viewer to interact with the website. The body text uses a slightly smaller, sans-serif font in a more neutral color to provide additional information and context. Overall, the use of different text styles and fonts helps to create a cohesive and visually appealing design.

Post the following to your blog: your findings, at least one screenshot and a working link to the website.