6 Web layout & composition

This chapter covers

The basic layout fundamentals to create a website’s structure for a home page and secondary pages
How to create and use a grid throughout a website to create consistency and familiarity
How to apply visual design principles when laying out sections of a web page and placing components to create hierarchy and rhythm
Different reading patterns that users have that should be taken into consideration when choosing how to approach a page’s layout

Up until the mid-2010s, the web technology available to developers to create unique and interesting layouts using only HTML and CSS easily were limited. If you did any sort of web development that involved building the structure of a website from the early 2000s up until the mid-2010s, you probably had your CSS utility classes for specific layout fixes like clearing floats and vertically aligning items. This was all fine for building our website layouts until our devices became portable, we started viewing the web on desktops and phones, screens got smaller, and the sizing became more irregular.

6.1 Establishing your website structure

6.1.1 Defining a basic sections of the website

6.2 Defining the Grid

6.2.1 Grid dimensions

6.3 Choosing a layout

6.3.1 Using one-column patterns

6.3.2 Common multi-columned patterns

6.3.3 Reading Patterns

6.4 Using space

6.4.1 “The logo is too small, make it bigger and fill the space!”

6.5 Responsive design considerations

6.5.1 Designing for mobile

6.5.2 Designing for multi-screen and foldable devices

6.6 Summary