Design Template by Anonymous

Introduction to Page Layout Design

Page layout is the arrangement of content and visual elements on a webpage. It plays a crucial role in user experience, helping visitors quickly find what they need and shaping their perception of your product or company.

image showing four purple rectangles in with Header,Navigation,Content,Footer — Basic Page layouts Consist of three main components. These components being Header,Navigation,Content,Footer

Page Components

Web developers have learned that most of the time its better to Design pages similarly to reduce the cognitive load that the user will need to effectively use the website. In doing so you might have noticed that most websites seem to always have some components that are present in the layout. Usually there is a place where you see the company name, company logo, or maybe even a hero image. Theres also a place usually where you find what your looking for, that being a document to read or another service that is being provided to the user. And then, there is a place where you might find the copyright symbol, maybe terms of use, cookies information, and possible social media links. These typical areas have names wich will be discussed below.

Header - area where you will usually sea the company name, company logo or hero images. One of the first things the user will notice.
Navigation - Is the area where you might first look to see if their are other parts of the page that might be more aligned with what your looking for.
Content - Is the area where you will go to once you think you might have found what your looking for. Content can range from documents or articles that a person might read to a specific service that Company may provide.
Footer - s the area located usually towards the bottom of the page. Containing information that a user might not regularly look for but is still easily accessible. This information usually contains but is not limited to copyright, terms of use, cookies information, social media links.

Types of Page Layouts

There are several basic types of page layouts, including:

1-Column Layout: One column layouts are one of the simplest page layouts but are also the best for overall accesibility. It is one of the primary layouts used for pagelayouts intended to be veiwed on a mobile device. This is primarily because the viewport of a mobile device is so small. Commonly used mobile-layouts

Image showing three green rectangles with Mobile, Tablet, Monitor+. — one column layouts are good for the following.

2-Column Layout: Two Column Layouts is a step up from the one column layout. utilizing two columns of space instead of one makes it tough for mobile users to have a good user experience.This layout is Commonlyused for blogs and articles.

Image showing two green and one red rectangle, Mobile in red and Tablet and Monitor+ in green. — Two column layouts are good for the following.

3-Column Layout: Three Column layouts have alot more stuff going on and might not function well with users browsing on a tablet and is more suited for monitor size or larger. Often used for dashboards or news sites.

Image showing two red and one green rectangle, Mobile and Tablet in red and Monitor+ in green. — Three column layouts are good for the following.

You can also combine these layouts to create more complex designs.

picture of one column layout. — One column layouts are good for mobile.

picture of two column layout. — Two column layouts are good for tablets and larger.

picture of three column layout. — Three column layouts are good for monitors and larger.

picture of a combined layout. two columns with the left column containing a two row layout. — A more complex layout like this layout made up of a two column layout where one column is a two row layout would be good for tablets and larger.

Wireframing

Wireframes are some of the first steps to take when determining what the page layout should be.

Easy Restructuring

Wireframes allow designers to quickly modify and refine the layout before investing time in detailed design or development.
Helps teams visualize structure and identify usability issues early.

Defines the Basic page Structure

Provides a blueprint of content placement, navigation, and functionality.
Focuses on layout without distractions like color or graphics.

Serves as Documentation

Acts as a reference for designers, developers, and stakeholders.
Ensures alignment on what the final product should look like before development begins.

Width of Content - Keep content width between 66-75 characters for readability.
Keep things Logical - Follow a logical structure that breaks down content.
Make Navigation Easy - Ensure easy navigation and mobile-friendliness.
Emphasize your content - Not emphasizing your content can make the size feel bland and take away from the user experience. utilizing graphics to further get a point accross is great way to further emphasize something.
Keep a Mobile Mindset - Mobile is ever growing, with a large amount of users browsing on their phones its important to make sure your page layout adheres to a mobile device or that a different layout is used for mobile devices.

Implementing Layouts with Flexbox

Flexbox is a powerful CSS tool for creating flexible and responsive layouts. Flex box comes with a couple of attributes that can be utilized to make sure you get the layout that is intended. Some commonly used attributes with flex box include: justify-content, flex-direction, flex-grow, flex-shrink, flex-wrap, align-items,Align-Content, and Gap. We will discuss these attributes below.

justify-content

Justify-content determines the way the items are aligned along the main axis of the flex container.

Three purple squares spaced as far from eachother. Two on the further ends and one in the center. — Space-between creates as much space between the items as possible. In this scenario the two outer squares are pushed out to the edges and the middle square ends up being positioned in the middle.

Three purple squares spaced as far from eachother with half the space being put on the ends. — Space-around creates as much space between the items as possible but leaves half the space used to seperate the items on each ends of the container.

Three purple squares spaced evenly apart with equal space left on the ends. — Space-evenly creates even spacing between the items including space on the ends.

flex-direction

Flex-direction determines the orientation of the main axis of the flex box and the direction of the axis. the default orientation being row where the direction goes left to right.

Three purple rectangles going vertically down creating a column with elements listed as Item 1, Item 2, and Item 3.

Three purple rectangles going vetically down creating a column with elements listed as Item 3, Item 2, and Item 1.

Three purplec rectangles going horizontally to the right creating a row with elements listed as Item 3, Item 2, Item 1. — Three purple rectangles going horizontally to the right creating a row with elements listed as Item 3, Item 2, Item 1.

flex-grow & flex-shrink

Flex-grow determines the rate at which flex items grow. Somehing with attribute value of 2 will grow two times as fast as an item with a value of 1. Flex-shrink works in the same fashion as flex-grow so something with a flex-shrink value as 2 will shrink 2 times faster than an item with a value of 1.

One black box showing options for flex-grow and flex shrink being values greater than or equal to 0. — Options for flex-grow & flex-shrink.

Image showing three purple squares growing at different rates. Left-most growing at regular rate. Middle Item is growing at two times the base rate. Rightmost item is growing 3 times the base rate. — Grow 1 is growing at the base rate of 1. Grow 2 is growing two times as fast as Grow 1. Grow 3 is growing three times as fast as Grow 1.

flex-wrap

Flex-wrap effects whether items are able to wrap to another row or column in the container if the items overflow that container.

Three purple containers wrapping to different rows. — wrap allows flex items to the next column or row depending on the flex-direction.

Three purple containers overflowing out of the container — Without wrap the items overflow the container.

align-items

Align-items affects where the flex items are in the cross-axis of the container.

Three purple boxes going left to right pushed to the top of the container. — In this scenario since the direction is row the items are pushed up towards the start of the cross-axis.

Three purple boxes going left to right in the center of the cross axis of the container. — In this scenario since the direction is row the items are positioned in the center of the cross-axis of the container.

Three purple boxes going left to right positioned in the bottom of the container at the end of the cross axis. — In this scenario since the direction if row the items are positioned towards the bottom of the container at the end of the cross axis.

align-content

Align Content Affects the items Along the cross axis when flex-wrap:wrap is applied.

Three purple boxes with supposed to be having row orientation, but looks like a column due to flex wrap. these items are positioned towards the top of the container. — Since the direction is actually row the cross axis is going up and down. Due to wrap the items are pushed onto another row. where they are pushed to the top of that container.

Three purple boxes with supposed to be having row orientation, but looks like a column due to flex wrap. these items are positioned towards the center of the container. — Since the direction is actually row the cross axis is going up and down. Due to wrap the items are pushed onto another row. where they are pushed to the center of the container.

Three purple boxes with supposed to be having row orientation, but looks like a column due to flex wrap. these items are positioned towards the bottom of the container.

gap

Gap affects the distance between the the flex items. The default value is a gap value of 0.

One black box showing the options for gap being values greater than or equal to 0. — Options for gap.

Two sets of three purple boxes. The first set having no gap between each of the boxes. The second set having a gap of 2rem between them. — The first image shows items having no gap between them. The second image having a gap of 2rem between the items.

Example Layouts

A single layout type isn’t enough. That’s where combining layouts comes in. By mixing and matching different structures, you can create a more dynamic and flexible design. For instance, you might use a two-column layout for the main content and a one-column layout for the footer. This approach allows you to tailor the layout to the specific needs of your content and audience

Image showing three rows. The first row being header, the second row containing A,B,C, the third row containing footer. — This layout is composed of a column oriented container with a row oriented container in the middle.

Image showing four rows. The first row being header, the second row being A, the third row containing B and C, and the last row being footer. — This layout is composed of a column oriented container with a row oriented container being the third row.

Image showing three rows. the First row being header, the second being A with a column container to the right of it containing B and C, and the final row being footer. — This layout is composed of a column oriented container with a column oriented container as the second element in the second row.