Anatomy & Grid Theory

Web page anatomy

The components

There are a couple main components to a webpage. Generally, a webpage is made up of 6 things: a containing block, a logo/ header, navigation/ non-content information, the main content, a footer, and whitespace.

Example of a webpage and its content

Containing Block: Each web page has container so that we can view the contents of the webpage within the browser window. The width of the container can be fluid (expands to fill the window’s width) or fixed (stays the same regardless of the window’s width).

Logo/ Header: The logo and header are at the top of every webpage. It helps you to identify the company, as well as aiding the company with brand recognition. It could also give you important information about the webpage, such as what the webpage is featuring.

Navigation/ Non-Content Information: Navigation is generally at the top of or on the side of the page. It should be easy to find, and if it’s on the side, it should also be above the fold, meaning it shouldn’t go past where the content ends before users scroll down. Non-content information can also be on the side of the page, such as information that complements the main content or goes on a subset of pages.

Main Content: The content should be the focal point that takes up a majority of the page. Content what really attracts users, because if the information they need isn’t on the page, they will find a different site.

Footer: The footer belongs at the bottom of the page and usually contains information regarding copyright, contact, or legal notices. The footer should indicate that users have reached the end of the page.

Whitespace: Whitespace is just as important as everything else on the page, because without any whitespace, the page can feel very cluttered and unorganized. Using whitespace makes a webpage more appealing and creates balance and unity.

Organization of components

It's important to note that they are a number of ways that these individual pieces can be placed together on a page:

1- header, 2- footer, A- main content, B1 & B2- side content

1-column layouts are best for phones, 2-column layouts are best for tablets, and 3-column layouts are best for big screen desktops. Mixing is where you can really get creative, but keep in mind that 1 (header) is always on top, 2 (footer) is always at the bottom, and A (main content) is the most important and should get the most space.

grid theory

What's a grid? Do I need it?

A grid is essentially a system of intersecting vertical and horizontal lines used to figure out the placement of your content. Grids are useful as they allow you to incorporate strong structure and form within your web design. They are important to creators/ designers, as well as to users, because they create a consistent and proportional organization that is helpful to the design process and pleasing to the eye.

The theory & Why it matters

Proportion is where the theory portion comes in. Grid theory has technically existed for thousands of years, dating back to when Pythagoras and his followers used ratios instead of single-unit numbers. The Pythagoreans discovered the golden ratio, or divine proportion, which was a naturally occurring mathematical pattern. In fact, they found the golden ratio so often in nature that they believed it was “divinely inspired.” Essentially, the way the golden ratio works is that you bisect lines by diving their length by 1.62. The result is lines proportionate to the golden ratio, which is considered aesthetically pleasing. This is the reason why this ratio is so important to design and why it's often used in brochures, page layouts, etc.

Help, I feel restricted by my grid

Grids are intended to help you when you are creating a webpage. Using grids produces a uniform and well-balanced page. But in the case that you feel grids are restricting you, the best way to go about the issue is to simply ignore your grid for the time being and play around with your elements until you feel that they’re in the right place. Once you feel good about where your elements are, come back to your grid and see how your design fits with the grid. If it still isn’t working out, you may need to change your design or your grid.

helpful tips when using grids:
  1. Overlay your grid onto your design
  2. Use guides to help define the edges of your grid columns
  3. Work with, not against, the restrictions and constraints of the grid
  4. Don’t forget about spacing (horizontal and vertical)

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.