Design Principles in Critical Mass and Salad Websites

COVER PAGE

Contents
Introduction.................................................................................................................................................3
Primary websites and screenshots..............................................................................................................3
Width...........................................................................................................................................................4
Alignment....................................................................................................................................................5
Header.........................................................................................................................................................5
Logo.............................................................................................................................................................5
Navigation...................................................................................................................................................6
Hero content.............................................................................................................................................10
Search........................................................................................................................................................11
Sidebar......................................................................................................................................................11
Footer........................................................................................................................................................11
Typefaces...................................................................................................................................................11
Colours......................................................................................................................................................12
Transitions.................................................................................................................................................13
Other.........................................................................................................................................................15
References.................................................................................................................................................15

Introduction
This report discusses the design and production of two websites by identifying how various core design
principles have been implemented in each of the websites. The two selected websites are;
 Critical Mass available at: https://www.criticalmass.com/
 Salad available at: https://saladcreative.com/
All measurement have been done using a HP Envy m17 with a screen resolution of 1920x1080 pixels.
The primary web browser used to test the websites is Google Chrome and Google developer tools which
is an extension of Google Chrome.
Primary websites and screenshots
Critical Mass
https://www.criticalmass.com/
Figure 1: Critical mass website

Salad
https://saladcreative.com/
Figure 2: Salad website
Width
Both the Critical mass and Salad website are fully responsive thus the width depends on the screen size
the websites are opened from. Thus opening the two websites from my browser window and using
Google Chrome developer tools showed that the two websites have a width of 1920 pixels which is
100% of the browser width. All pages use a common width n both websites. Since the two websites are
fully responsive, they can adapt to any of the following screen sizes;