Graphic Design Basics Part 3: Composition

Posted in Tips, Web Design • Posted on 5 Comments

The second article in the series talked about the Principles of Graphic Design and we took a look at concepts such as Balance, Dominance, Contrast and Harmony. Today we go a bit more in-depth with the last episode and talk about the composition and its basic elements.

1. Single Visual

This composition is where a single image is used for the design. This means the image is usually powerful, creates an impact and the whole design is built on it. Examples of single visual pages include landing pages, but this is more popular in print than in web.

The single visual composition is one of the easiest to achieve, although you need to carefully select the image, otherwise it won’t have the desired effect. The main principle behind this pattern is to make sure the typography and the other design elements reinforce the visual element and do not compete with it. There has to be a clear definition over which one is more important and in this case the image, illustration or graphic element used have to be the most powerful.

Glitter Denmark is a very good example of a single visual pattern design.

2. The Golden Ratio

The Golden Ration, which is also known as the Fibonacci Spiral or Phi, is around 1:1.618. The Fibonacci Spiral is found all over the world in different things and the web is no exception. It is a good idea to place the elements into a website along the lines of the Spiral, because this is the way the human eye works. Managing to use the Golden Ratio properly will bring the focus of the visitors onto specific things you wish to emphasize.

The Fibonacci Spiral

3. Focal Point

This is another important one because the focal point is the one who gives the viewers something to look at. The focal point adds a more specific idea to the design and acts as a starting point for most of the visitors. The focal point can be represented through simple typography, a button, illustration, a picture or any other element. It is totally up to the designers which is the way he wants to create a focal point through.

Girlfriend Agency uses the focal point properly, by emphasizing the headline

The focal point has to be in focus and has to be the first element a viewer sees when he enters the page (especially for the first time). However, making it too important and visible will break the balance of the layout. Keep the focal point within your site’s goal and make the purpose of the page be shown through it. For example, having a call to action button is a focal point, because that is the final action you want the user to take on your page.

4. Grid design

This should not be a new one for you. Grid theory is maybe the most popular element of a composition, because we do it all the time even without realizing. Grids add structure to a design and are used to hold a good proportion among the elements on the page. You can find lots of grid frameworks on the internet, which are free to download and build on, and I actually recommend you to use them if you are a beginner in this domain. Working from the beginning with grids will make you feel comfortable with this approach and this is good for your layouts.

Grids do not have to be rigid all the time, they can also be subtle, but if you go for this option, then make sure the design will still be clean and refined before the delivery. When working with grids it is always a good idea to ask feedback from the ones around you, because working for hours long with a grid framework in front of you will probably make your eyes not see small mistakes that need adjustments.

The Grid System

5. Gestalt Laws

When I learned this principle in school I was amazed by the difference it made in my designs. The laws are the result of the human visual perception of things, including websites and elements. The laws are created by the way different elements impact the viewer.

There are five principles Gestalt Laws: closure, similarity, continuation, alignment and proximity.

Shortly explained, the law of closure says we are accustomed to close things in our imagination that are not really closed. A good example is a near circle which you draw only on 330°. The human brain will perceive it as a whole, completed circle. The law of proximity shows we tend to group objects that are closer to each other, while the law of similarity emphasizes the same thing, only that we group  things that have the same color, shape or texture. The law of continuation emphasizes that objects will be grouped as a whole if they are co-linear or follow a specific direction, while the last rule, the one of alignment, shows that objects are aligned based on their edges (very popular pattern), or based on their centerlines. The objects can also overlap each other.

The Gestalt Law of Closure

The Gestalt Law of Proximity

There are actually more Gestalt Laws, but not all of them are important for designers. At the end of the article you can find a link with all the laws and you can learn more about each one of them.

6. The “Z” and “F” Layout

The so-called “Z” layout is based on the normal movement of the human eye. As the name says, most of the people who’ve been eye-tracked look at a webpage in a Z shape, meaning they start in the upper left corner and finish in the bottom right one. Managing to align all the objects on a home page along this shape will definitely provide better results and will make your design more efficient.

Layout in a Z shape

There is another type of layout as well, shaped as an F. This means users read the first line and then continue to read the second, continuing like that in a specific order.

Goal Arena is a layout in a visible F shape

Bottom line

These are the most important principles of design and by having a strong knowledge of each one of them your layouts will not only look better, but will also offer a better user experience. Creating good interfaces for the user will make them keep your page in mind and, if you get used to working with these principles, at some point in time it will even get normal and logic.

Sure, there is much more knowledge to get about all these laws, but this knowledge comes along with the experience and you can’t really get it only from books, but by practicing. By looking back at all these three articles you should already have enough knowledge of the basic elements of a graphic design and I really hope that if you are a beginner, this series of articles made you think more seriously about a graphic design career.

Read more

The Gestalt Psychology on Wikipedia

The Gestalt Principle on Tutsplus

Grid Theory on Design Festival

Grid Design Basics on Opera Developers

The Golden Ratio in Web Design on Tutsplus

Golden Ration on Wikipedia

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

5 Comments Best Comments First
  • reb

    Tuesday, November 15th, 2011 14:02

    1

    5 stars!!!
    Very very well written article. Interesting read!
    You have given me more to think about while designing and taught me about gestalt laws !
    Thank you :)

    0
  • Basheer Shamary

    Tuesday, November 15th, 2011 20:44

    2

    Well.. The Z and F Layout can vary in countries like the middle-east,china and japan, because they look at the screen in a diffrent way. So you should know sometimes you are designing a web site for the hole world and some times you nedd to consider. in my university the say to make a grid layout will be general for every body…Well need to check that . Thanks for the article

    0
  • kris

    Wednesday, November 16th, 2011 18:38

    3

    really good overview of the basics every designer should be aware of. I highly agree with Basheer though – lots of rules and principles we follow do only work in our (western) world.

    0
  • thoppp

    Wednesday, January 11th, 2012 17:51

    4

    Incredible post .. great reading

    0
  • Luiza

    Thursday, April 19th, 2012 22:36

    5

    This is great information. You have definitely encouraged me to look closer at my details when designing.

    0
  • Luiza

    Thursday, April 19th, 2012 22:36

    5

    This is great information. You have definitely encouraged me to look closer at my details when designing.

    0
  • thoppp

    Wednesday, January 11th, 2012 17:51

    4

    Incredible post .. great reading

    0
  • kris

    Wednesday, November 16th, 2011 18:38

    3

    really good overview of the basics every designer should be aware of. I highly agree with Basheer though – lots of rules and principles we follow do only work in our (western) world.

    0
  • Basheer Shamary

    Tuesday, November 15th, 2011 20:44

    2

    Well.. The Z and F Layout can vary in countries like the middle-east,china and japan, because they look at the screen in a diffrent way. So you should know sometimes you are designing a web site for the hole world and some times you nedd to consider. in my university the say to make a grid layout will be general for every body…Well need to check that . Thanks for the article

    0
  • reb

    Tuesday, November 15th, 2011 14:02

    1

    5 stars!!!
    Very very well written article. Interesting read!
    You have given me more to think about while designing and taught me about gestalt laws !
    Thank you :)

    0

Comments are closed.

54.83.103.17 - unknown - unknown - US