From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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:
- Physical Relationship
In case you missed last week’s article, give it a look to know more about each perspective. Enjoy.
Proportion is essentially the size and scale relationship of two or more elements on the page.
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.
Also a good example of proportion. The big typography and the image get our attention right away.
Cloudberry uses different proportions in a nice and beautiful way. We have different sizes that get our attention and create a nice flow.
Beautiful emphasis created by nice proportions that get our attention to what the site is about and also to the donate button.
Here we have a great example of emphasis usage done by the sizes of the elements. Nicely done by the way.
Different typography sizes create a nice example of contrast to emphasize content.
Another beautiful example of proportions creating emphasis.
Bellstrike is also a beautiful example of emphasis created by different proportions.
A really easy way to create focal points in web design is to use contrasting elements.
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 is using contrast to get our attention to the space ship and the circular menu.
The contrast created by the bursting star puts emphasis on the services KARB offers.
Beautiful emphasis created by the contrast of the logo, typography and images. Really nice and clean flow.
Colors and shapes create an instant emphasis here, pretty straight forward and beautiful.
Indubitablee by Denise Chandler creates a beautiful emphasis with the contrast of colors, sizes and shapes.
Here we have a good contrast mix of color, shapes and sizes creating emphasis in a clean and beautiful way.
Sunday Best uses a strong color contrast, shapes and sizes to create a balanced structure and to emphasize the main content.
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.
Just the mere physical relationship between objects will create emphasis.
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 creates a beautiful and clean physical relation concentrating their main content in the middle of the page.
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.
Nice emphasis created by isolating the content.
Even with the illustrations we can see the emphasis on the isolated and ‘brighter’ part of the page where the tittle and menus are.
The physical relation here is created by grouping similar elements. Similar shapes to one side, menus to the other.
Nice emphasis created by isolated similar shapes which are circles in this case.
Playground used isolated typographical elements to emphasize content, with a great result.