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
• 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.

Unlisted Collection

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

Cloudberry

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

War Child

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

The Peach Design

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

Grind

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

Urbanoff

Another beautiful example of proportions creating emphasis.

Bellstrike

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

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.

Giftrocket

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

KARB

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

Thuy Truc

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

Kyle Steed

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

Indubitablee

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

Pandr

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

Sunday Best

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

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.

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.

Solo

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

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.

Institute of Awesome

Nice emphasis created by isolating the content.

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.

Ignacio Macri

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

Mickaël Larchevêque

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

Playground

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

Source:

Unmatchedstyle
The Best Designs