Anatomy and Grid Theory this is where you start

Designing a webpage can be fun, but can also feel daunting if one does not know the anatomy of a webpage. Learning the different components of a webpage and how they should be arranged is the key to a beautiful and user friendly website.

Ultimately, a viewer is going to a webpage in search of specific content and the arrangement of its various elements will determine whether their experience is a negative or positive one. The elements that make up a webpage are the container, logo, navigation, content, footer, and whitespace. Below is some information on what each section contains and how they should be arranged to create an effective webpage.

Webpage Anatomy

Container- The area in which all the elements will be placed. The width can be fluid, which means it’s edges line up with the edges of the browser winder, or it can be fixed, meaning it stays the same size no matter how it is being viewed.

Logo- This is a visual element that identifies the brand of the webpage. The company name should be grouped with the logo and placed at the top of the webpage. This allows viewers to easily identify who the website belongs to and increases brand recognition.

Navigation- This should always be easy to find as you want your viewer to be able to get to information easily. It should be closest to the top and can be placed on the top or on the side. Primary navigation tools should always be placed “above the fold.”

What does “above the fold” mean?

The fold is where the content of the webpage stops forcing the viewer to scroll down. You want to make sure all primary elements are above this point, which for webpages is usually about 500 px.

Content: This is the most important section of a webpage as it houses it’s main content. Since it is considered as the focal point of the page, it should take up the most space within the layout. A viewer will leave the website if it is not easy to find the information they are looking for.

Footer- This is generally kept at the bottom of the page and contains contact, legal, and copyright information.

Whitespace- New designers will try to fill up every bit of space on a webpage, but in order to design a well-balanced webpage it is crucial to include negative space. Too many elements cramped together can make the page feel crowded and can be overwhelming to the viewer’s eyes.

Grid Theory

Now that you know the parts of a webpage, you must be wondering how to arrange them and make it visually interesting. There are different methods to help designers place elements within a design.

The most popular is the grid system, which are evenly spaced lines used as a guide to arrange a webpage in a structured manner. This system enables the designer to establish consistency and proportion throughout the website. There are different approaches to this method, like the golden ratio, rule of thirds, and the 960 grid system. Below are examples of each approach.

Golden Ratio

Rule of Thirds

960 Grid System With 12 Columns

Picture Sources:

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.