Design Principles in Critical Mass and Salad Websites

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 and Salad. The report covers width, alignment, header, logo, navigation, hero content, search, sidebar, footer, typefaces, colours, transitions and other design aspects.

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;

 Large screen devices- Devices with large screens and higher resolutions. For example a desktop
or a laptop
 Medium screen devices- Devices with medium screen sizes and medium screen resolutions. For
example a tablet or an iPad.
 Small screen devices- Devices with smaller screens thus lower resolutions for example a mobile
phone.
Most devices are now running a high screen resolution thus it’s important to consider these devices
when designing a website. However, the optimal width for a website is still 960px as it accommodates a
lot of older devices and newer devices. However, according to Statista the global mobile internet traffic
as of the second quarter 2018 is 51.89% of the total web traffic thus from this statistic most web traffic
is from mobile devices ("Mobile percentage of website traffic 2018 | Statistic", 2018). This means that
the optimal website width to use is 100% of the browser width.
Alignment
Both websites follow the common trend where the elements of the website extend to a 100% of the
browser width. For the Salad website both the heading and the content are aligned left. The Critical
Mass website uses a different alignment pattern where by the headings and the content are aligned at
the center of the pages. Both websites are multi-paged thus each navigation link opens a different page.
There are different types of horizontal alignment;
 Center alignment- Center alignment is mostly used for headings. A common bad practice is to
center align everything which is a weak and easy choice for most web designers. For text, center
alignment works best when the text is only a few times but large paragraphs of test should not
be center aligned (Wiley, 2015).
 Left alignment- This type of alignment is the strongest and safest choice to use when aligning
text. Its commonly used thus users expect text content to be flushed to the left. Flushing
content to the left also requires the headings to be flushed left too.
 Right alignment- This type of alignment is not common but it’s commonly used when you want
to design a unique look and feel from the typical center or left alignment. Flushing right is also
used to achieve readability for languages that read right to left including Arabic, Chinese and
Japanese (Printwand, 2012).
Header
The header of the Salad website consists of the logo of the website which is also the title and the
navigation menu. Its 66px high and it’s pinned to the top thus to view the header from the bottom of the
page you have to scroll back up. The header of the critical mass website has logo which is also the tile of
the website and the navigation menu. The header is 90px high and not pinned to the top as it remains
static when you scroll thus its visible even at the bottom of the page.
Logo
Both websites follow the conventional technique where the log is a link to the home page of each
website. For the Critical Mass website, the Logo is centered on the header. The logo is an image with
Critical Mass in black and a red underline. Hovering over the logo has no effect on the appearance of the

logo. For the salad website, the logo is an image with Salad title in black. The logo is aligned on the left
of the header. Hovering over the log has no effect on its appearance.
Navigation
The two websites have adapted a different type of navigation. The navigation of the website Critical
Mass website is a hamburger drop down menu with 9 items in it. The navigation is placed on the left
most side of the header as shown in the figure below.
Figure 3: Desktop version navigation menu

Figure 4: Mobile version navigation menu
Clicking the menu button drops down the menu which fills the entire browser window for both desktop
and mobile versions of the browser as shown in the figure below;

Figure 5: Dropped down navigation menu
The font color of the links is white and hovering over each of the links produces an underline effect on
the link
For the Salad website, the navigation menu is the common horizontal items aligned on the right side of
the header. The color of the links and hovering over the each link changes the color of the link to red.
The Salad website navigation menu adapts according to the type of device its opened from. For desktop
devices or devices with large screen sizes the navigation menu remains the common horizontal menu as
shown in the figure below.
Figure 6: Salad website navigation menu (Desktop version)

For the mobile devices, the navigation menu adapts and transforms to a hamburger drop down menu
aligned at the right side of the header. Clicking the drop down menu in the home page drops down the
menu filling the entire browser window as shown in the figure below;
Figure 7: Salad website mobile navigation menu (home page)
For the other pages, the navigation menu is different and does not fill the entire browser window. The
background of the menu is also not black as is in the home page.

Figure 8: Mobile version navigation menu (other pages)
Hero content
Both websites have hero content areas which is the first area that a visitor sees when they open the
website (Bullock, 2017). For both websites the hero content is designed to fill most part of the browser
window. Critical Mass website has only one image thus does not have a slider. The hero content
displayed on top of the image is a short description of the website. The salad website has a slider which
is aligned on the right. The slider is vertical thus in mobile devices the user scrolls up or down to go
through the images. The slider has 6 images and there is no automatic transition thus the user to trigger

the transition manually by clicking the respective manual button. Each image has a corresponding
caption describing the image and a link to view more content regarding that caption.
Search
Both websites have not implemented search functionality. This can be attributed to the fact that both
websites do not have a lot of content that would require a search feature thus by using the menu the
user can find all the information in the website.
Sidebar
Neither of the websites has implemented a sidebar in any of the pages. A review of many top websites
did not include a sidebar in any of the pages thus this feature is likely not be implemented in my
website.
Footer
Both websites have a footer at the bottom of every page except that the Salad website does not have a
footer in the home page but all other pages have a footer. The footer of the Salad website is 336px in
height and extends to 100% of the width. It uses a black background with white as the font color
Content on the footer is aligned at the center of the footer. Some of the content include the links to
contacts, terms and cookie policies and other social media links. This footer has contact information of
the website and the partners of the website.
The critical mass website has a footer in all its pages. The footer is 159.5px and stretches to 100% of the
browser width. The footer has a black background and white as the font color. The content in this footer
includes contact information, a link to the careers page, social media links and copyright information.
From my review of most websites, I found out that the footer contains the contact information, social
media links and the copyright information thus this is a good standard to follow when implementing my
website.
Typefaces
The following fonts have been used in the Salad website;
Body font: 'Graphik Web', Arial,"Helvetica Neue",Helvetica,sans-serif; with 16px font-size
and 1.4em line height
Heading-small:17px
Heading-medium:24px;
Heading-big:31px
The font used for the critical mass website is;
Body font: Plantin W01","Times New Roman",Times,serif; with 18px font size.
Font weight: 400

H1, h2, h3, h4: "Trade Gothic W01",Helvetica,Arial,sans-serif;
Intro title; Italic, font weight 700
Colours
The critical Mass website uses a very bold and eye catching color palette with the main colors being
white, black, grey and red. These colours are used interchangeably in different sections of the website.
For example the background of the drop down menu is red with font color being white. Most of the
heading and sub heading are red and most content sections are white with black font. The website also
uses image as backgrounds which help make the design more attractive as shown in the example below;
Figure 9: Critical mass image background
For the Salad website, the color palette is simple but it has been implemented very thoughtfully thus
resulting to a very appealing design. The primary colors used are black, white, grey and red. Red is
mostly used for heading and sub headings and also when hovering over links. White is used as the
background color in most of the sections with black font. Where black is used as the background color
then white is the font color. Some sections have grey as the background. Images are also used as
backgrounds in some sections to enhance the design of the website.

Figure 10: Different backgrounds
Transitions
Each website has its own different type of transitions. The header of the Critical Mass website is pinned
at the top immediately the user starts scrolling. Different sections of the page have different types of
transitions when scrolling down. For example the title of each page slides from the bottom of the header
section in animated style. This animation is also done for other sections where by the test slides from
either the left or right side of the browser window. In some sections hovering over an image brings up
text using an animated effect. Before a page loads, a spinner is displayed to show that the page is
loading as shown in the figure below;

Figure 11: Critical mass spinner
The salad website has fewer transitions compared to the Critical Mass website. The home page of the
salad website has 6 images which transition from one image to the other depending on the slider
pressed by the user. Before a page loads, a spinner is displayed to show that the page is loading as
shown in the figure below;
Figure 12: The salad website spinner

Other
The Salad website uses a grid based layout which is implemented differently in different sections of each
page. Some sections have one box stretching t0 100% of the width while other sections have column
based layout where a box can have two or three columns in a box. This strategy works out very well
because it allows the designers to structure content in the page differently thus achieving a
sophisticated design that is very appealing to its target audience.
The Critical Mass website uses the concept of a grid based layout where by most sections consist of one
box that is occupies 100% of the width. Column based grid appearance has been used especially where
there is used of images and this has helped to deliver a lot of content using images which also help
enhance the design of the website.
Most of the design aspects used in both websites help create a very appealing design to the target
audience. I intend to use adapt most of these design aspects in my website to achieve a similar design
suited for my website.
References
Bullock, P. (2017). What is Hero Content? | Fast Web Media. Retrieved from
https://fastweb.media/blog/what-is-hero-content
Mobile percentage of website traffic 2018 | Statistic. (2018). Retrieved from
https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-
devices/
Printwand. (2012). Basic Alignment Principles in Graphic Design (with Examples). Retrieved from
https://www.printwand.com/blog/basic-alignment-principles-in-graphic-design-with-examples
Wiley, M. (2015). No Justification: Don’t Use Right, Center, and Full Justification on the Web. Retrieved
from https://mrwweb.com/no-justification-dont-use-right-center-and-full-justification-on-the-
web/