Layout Key Design Points
To manage a web page layout, you need to understand what the key design points are. There are several design points that help to determine the layout. Here, we'll explain three major ones.
1. Layout structure (Sectioning)
The first thing you need to define in layout design is layout structure (sectioning). Usually, a wireframe gives you a layout structure for each web page. To implement the wireframe in website design, you need to convert each frame into HTML and CSS code. Different HTML tags for sectioning, such as <header>, <nav>, <main>, <section>, <article>, or <footer>, give semantics; however, they won't control a layout structure visually. To actually give a layout structure, you need to use CSS code. The display property is often used to set layout structure (e.g., Flex Box Layout or Grid Layout).
2. Position and Alignment
Once a layout structure is determined, you need to control the position and alignment of each element. For example, the top navigation bar often has a brand logo, some links, and buttons that are horizontally laid out. The display property and its related properties (e.g., justify-content) are often used to control these positions and alignment.
3. Sizing and Spacing
Along with defining a layout structure and setting the position and alignment of each element, you need to manage the size of each element with proper spacing. The width and height properties are key properties for block element sizing but you also need to control text-related properties as well using font-size or line-height. The margin and padding properties are the key properties used to control spacing. For text, you may also want to utilize letter-spacing.
To manage a web page layout, you need to understand what the key design points are. There are several design points that help to determine the layout. Here, we'll explain three major ones.
1. Layout structure (Sectioning)
The first thing you need to define in layout design is layout structure (sectioning). Usually, a wireframe gives you a layout structure for each web page. To implement the wireframe in website design, you need to convert each frame into HTML and CSS code. Different HTML tags for sectioning, such as <header>, <nav>, <main>, <section>, <article>, or <footer>, give semantics; however, they won't control a layout structure visually. To actually give a layout structure, you need to use CSS code. The display property is often used to set layout structure (e.g., Flex Box Layout or Grid Layout).
2. Position and Alignment
Once a layout structure is determined, you need to control the position and alignment of each element. For example, the top navigation bar often has a brand logo, some links, and buttons that are horizontally laid out. The display property and its related properties (e.g., justify-content) are often used to control these positions and alignment.
3. Sizing and Spacing
Along with defining a layout structure and setting the position and alignment of each element, you need to manage the size of each element with proper spacing. The width and height properties are key properties for block element sizing but you also need to control text-related properties as well using font-size or line-height. The margin and padding properties are the key properties used to control spacing. For text, you may also want to utilize letter-spacing.
