Principles of Design - Composition My Name Is Allison Longcrier

This is a simple webpage that explains the Principle of Design - Website composition. Here we will define it and how to utilize this principle in our website creations.


A website composition is referring to the use of layouts of your web page. There are many different kinds of layouts for use in web design but in this web page we will be discussing major 4 types of successful website composition.

Types of Layouts

  • Single Visual
  • Rule of Thirds
  • The Grid
  • F-Layout
4 types of layouts

Single Visual

A single visual layout utilizes a single, strong main image. Pick a strong image and let it do the bulk of the work for you. The key here is to make sure that other elements of your design support and reinforce the main visual, and don’t try to compete with it.

Why is Single Visual the easiest layout to use?

It utilizes one main strong image which will carry the message of your website.

Rule of Thirds

The rule of thirds is a guideline, which proposes that an image should be split into nine equal parts (three across, three down) with elements of that image or design aligning to the edges of each of these parts.

What are the Sweet Spots it's talking about?

The “sweet spots” – intersecting points along the grid – are flexible in size and easy to find and align.

The Grid

Most designers see an invisible grid running through all their designs. In modern web design, clean grid lines have become popular and almost impossible to avoid.

Grid Layout

Why is the grid the most used layout out there?

Grids add structure and order to designs, and can be a useful method for achieving good proportion among elements in your work. It also allows you the freedom to utilize multiple compositions in one.


The F-Layout relies upon various eye tracking studies for it's foundational concept. These scientific studies show that web surfers read the screen in an "F" pattern - seeing the top, upper left corner and left sides of the screen most... only occasionally taking glances towards the right side of the screen.

Why does the F-Layout work so well?

  • Visitors start at the top left of the page.
  • Then they scan the top of the site (navigation, subscription, search, etc.)
  • Next they move down, reading the next full row of content... all the way to the sidebar.
  • Last, surfers enter a "scanning pattern" once they hit the bulk of the site content.

The key reason this works so well is it follow the natural eye pattern of humans.


This doesn’t mean that you leave vast, empty areas in your designs, but is instead about being clever with the space that you have available to you. Harnessing whitespace is as much about providing focus for your content, as leaving empty areas.

Bad Whitespace
Awesome Whitespace

The Importance of Whitespace

Instead, think of it more like structural “empty” space, where no extra elements, embellishments or other parts to your design are placed. In-keeping with hierarchy, whitespace can also help guide users around the website properly and as we intend them to.


Keep it simple, stupid.

What is KISS?

Keeping your design simple doesn't only help to make your life as a designer and a developer easier, but it makes things easier for your users too. Keep things simple by stripping out absolutely anything that isn’t necessary or important, or that the user doesn’t need to know.


In conclusion, composition of a website takes conscience effort. Understanding what is important will help you with the composition. Whatever you do, don't forget KISS!


For Educational Purposes Only - Only used as an Adobe Sparks Webpage.

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.