[[TOC]]

With a current website, start identifying the layout it is using, as well as the different components that will be required. The following sections will guide you through the different elements in detail. we will use https://www.blackrock.com/aladdin as an example to start with that website

Identifying the main components help understand what will probably be reused across all pages. Things like Navigation bars, Menu, Header, Footer.

If there is one, identify it now. This will be the input for the max-width of the page's body, sections or containers.

Make sure to keep track if there are any differences between different device sizes:

class	view	min resolution	max-width
body	wide	1200	1024
body	desktop	900	-
body	tablet	700	-
body	mobile-landscape	500	-
body	mobile	300	-

Picture shows flow.ninja website in where the content wrapped with class `container` cannot go above 1340px

When taking out the `max-width` restriction, content will always streth to the sides

Sections will basically be a way to separate content at a higher level within the same page. they typically have a width of 100%. Max width can be applied to them if needed.

In the example below, we can see that the yellow area could be a section that goes all the width, while the content is centered due to the container.

section name	description
default	used to go through the whole width of the screen. could use different background colors
short	specific section that only goes a certain width.

Inside sections, there could be also content that needs to be separated from the other containers. it helps designers to add dividers within a single section. It is important to identify if there will be different type of containers in terms of width.

container name	description
default	used to limit content up to certain width
wide	used when content must reach the full width

In the example below, it can be seen that the container has some padding applied to it (in green). also has a max-width applied and margins set to auto to the sides so the content is centered in the screen.

Following example shows that this container has a top and bottom padding that separates what is shown in this container from other containers or sections that could be above or below.

Whether or not there is an existing website to start with, it is recommended to start identifying the different ways content will be displayed through sections. Examples:

Text and image are displayed in a 2-column flexbox

2 column flexbox displaying text

Similar content than previous, but with different background color

Take note of the following topics for each:

Topic	Things to identify
Titles	sizes, font family, line height and weight.
Text	sizes, font family, line height and weight.
Links	Different type of links used. describe the font family, line height, weight and hover effect
Colors	Colors found in the website used as background and text color. These will be defined later as variables.
Buttons	Identify the different alternatives used, including sizes and styling used.
Form elements	Note box styling, placeholder fonts and colors used.
Spacing	Identify all the different spacing sizes used for margins and padding. include separations after titles, paragraphs, columns, containers, sections, images.

This task should have an output similar as following for each topic:

Titles:

tag	class	view	color	font size	font family	line height	weight
h1	title	widescreen	#000	20px	Arial, Helvetica	10px	400
h1	title	desktop	#000	18px	Arial, Helvetica	10px	400
h1	title	mobile-landscape	#000	16px	Arial, Helvetica	10px	400
h1	title	mobile	#000	14px	Arial, Helvetica	10px	400
h2	N/A	desktop	#141414	1em	Arial, Helvetica	1em	700

It is feasible that even though most content isn't layed-out in the same way, there are a few basic settings that are used everywhere. Example:

This portion of information has padding around it (green box surrounding the blue one). Avoid having different spacing between top-bottom and left-right unless really required.

Displays how content is separated from the left-right limits of the screen

The idea is to translate these common settings to be taken by Sections and Containers.

Spacing between paragraphs, titles, images and everything that is supposed to go together will be taken into account later