25 Examples of Emphasis Applied in Web Design

Last week Patrick wrote a nice article about Developing Emphasis in Web Design, and today, based on that article, we decided to show you some examples of emphasis in web design. As explained in last week’s article, we will split the examples in three different perspectives: Proportion, Contrast and Physical Relationship

Emphasis in Web Design

Last week Patrick wrote a nice article about Developing Emphasis in Web Design, and today, based on that article, we decided to show you some examples of emphasis in web design. As explained in last week’s article, we will split the examples in three different perspectives:

  • Proportion
  • Contrast
  • Physical Relationship

In case you missed last week’s article, give it a look to know more about each perspective. Enjoy.

Proportion

Proportion is essentially the size and scale relationship of two or more elements on the page.

Cinco

Cinco uses beautiful images to create a sense of proportion that first drives us to the main image and later to the rest of the content. With these images they made pretty clear what they want to show first.

Emphasis in Web Design

Unlisted Collection

Also a good example of proportion. The big typography and the image get our attention right away.

Emphasis in Web Design

Cloudberry

Cloudberry uses different proportions in a nice and beautiful way. We have different sizes that get our attention and create a nice flow.

Emphasis in Web Design

War Child

Beautiful emphasis created by nice proportions that get our attention to what the site is about and also to the donate button.

Emphasis in Web Design

The Peach Design

Here we have a great example of emphasis usage done by the sizes of the elements. Nicely done by the way.

Emphasis in Web Design

Grind

Different typography sizes create a nice example of contrast to emphasize content.

Emphasis in Web Design

Urbanoff

Another beautiful example of proportions creating emphasis.

Emphasis in Web Design

Bellstrike

Bellstrike is also a beautiful example of emphasis created by different proportions.

Emphasis in Web Design

Contrast

A really easy way to create focal points in web design is to use contrasting elements.

Pongathon

Here we can see a good example of contrast using color, size and shapes. The big and colorful typography gets your attention and so does the menu.

Emphasis in Web Design

Giftrocket

Giftrocket is using contrast to get our attention to the space ship and the circular menu.

Emphasis in Web Design

KARB

The contrast created by the bursting star puts emphasis on the services KARB offers.

Emphasis in Web Design

Thuy Truc

Beautiful emphasis created by the contrast of the logo, typography and images. Really nice and clean flow.

Emphasis in Web Design

Kyle Steed

Colors and shapes create an instant emphasis here, pretty straight forward and beautiful.

Emphasis in Web Design

Indubitablee

Indubitablee by Denise Chandler creates a beautiful emphasis with the contrast of colors, sizes and shapes.

Emphasis in Web Design

Pandr

Here we have a good contrast mix of color, shapes and sizes creating emphasis in a clean and beautiful way.

Emphasis in Web Design

Sunday Best

Sunday Best uses a strong color contrast, shapes and sizes to create a balanced structure and to emphasize the main content.

Emphasis in Web Design

Literacy 2030

Here we can also see an example of contrast to emphasize content. Typography, colors and sizes get our attention quickly before we follow the page’s flow.

Emphasis in Web Design

Physical Relationship

Just the mere physical relationship between objects will create emphasis.

Power of One

Power of One gets our attention by isolating their logo and date of the event, we are strongly driven to the middle of the page, after which we are guided to the content.

Emphasis in Web Design

Solo

Solo creates a beautiful and clean physical relation concentrating their main content in the middle of the page.

Emphasis in Web Design

Best Made

Best Made is an elegant example of eye direction in physical relation. By centralizing the images they create a beautiful flow and a strong emphasis on their items.

Emphasis in Web Design

Institute of Awesome

Nice emphasis created by isolating the content.

Emphasis in Web Design

James Garner

Even with the illustrations we can see the emphasis on the isolated and ‘brighter’ part of the page where the tittle and menus are.

Emphasis in Web Design

Ignacio Macri

The physical relation here is created by grouping similar elements. Similar shapes to one side, menus to the other.

Emphasis in Web Design

Mickaël Larchevêque

Nice emphasis created by isolated similar shapes which are circles in this case.

Emphasis in Web Design

Playground

Playground used isolated typographical elements to emphasize content, with a great result.

Emphasis in Web Design

Source:

Unmatchedstyle
The Best Designs

Tagged with:

Gisele Muller

Gisele Muller is the Co-founder of Refilmagem and Mentaway, and also the editor for the Portuguese version of Abduzeedo, Abduzeedo Brazil. She loves communication, creativity, technology and everything in between.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 10

Comments are closed.
  1. Thanks for putting this together Gisele. We build a lot of sites but haven’t really thought of this angle before quite frankly.
    Its rather self evident once clearly pointed out like you have- a lesson learned.
    I’d rate ‘best made’ as my favorite.

  2. A bee-oo-tif-full list O’ sites…
    thanks for sharing.
    Perusing the standard fare CSS galleries is a bit boring sometimes.
    A nice roundup of butt-kickers here, to inspire others to get it in gear!!

  3. Great examples. The minimalist design of these sites is truly inspirational. Thanks Gisele.

  4. There are some great examples of emphasis in this article.

    I think it is clear that typography plays a big part when it comes to grabbing peoples’ attention.

    My favourites are Urbanoff and Bellstrike as I feel these contain the best use of colours and text to create a more interactive experience for the user.