Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Emphasis in Web Design
Transcript of Emphasis in Web Design
is creating a focal point that will grab the viewer’s eye.
in web design can be tricky
in that it all depends on what
you want to accomplish with it. For the most part, whatever the product is, is what will be our focal point and in most cases it’s not the picture of the product but how to get/buy the product that becomes the focal point –
the call to action
is a button or link that you add to your website in order to guide your visitor and tell them what to do next.
is all about what is important it will be whatever you want your user to accomplish, the purpose, the goal of the site. Because design is all about
– you want to make sure that the message you are trying to tell your users is dominant, all other items should be subordinate to that.
should capture some of the user’s attention or even
the user to the dominate element, but they should never eclipse the dominant element on the page.
These elements should always support your
Most designers get lost in the elements and can never quite figure out how to create emphasis in web design. But it’s actually a pretty easy thing to develop and chances are many of us do it without even thinking about it.
Create a Focal Point
The main three components to emphasis are:
However, too much contrast can be
or can over shadow subordinate elements altogether, so the trick is not to add too much contrast between elements – you want just enough to create a separation.
Proportion is essentially the size and scale relationship of two or more elements on the page. Larger objects demand more of our attention so a quick way to create a focal point is to make the focal element bigger than things around it.
A really easy way to create focal points in web design is to use contrasting elements. Contrast is really about making
element stand out against another element making it more visible.
You can create contrast between elements by using one or more of these three properties:
Bolder and brighter colors like red, orange, or neon colors naturally demand our attention. A red object next to a blue element will always be the focal point.
This is also true for black and white, but depending on what value is used, the white or the black will be the focal point. A white object on a black background will demand our attention and a black object on a white background will grab our eyes.
is a great way to create contrast.
The use of color
An element with a more complex shape (like a star or sunburst) will contrast more than smoother, simpler shapes like squares and circles.
We have all seen those star/explosion ‘stickers’ on web sites the read “Try it FREE!!!” and the reason why they stand out (besides the obnoxious bright yellow color) is their star or explosion shape, a circle shape will most
likely just blend in with other
elements like buttons or images.
of objects can also influence contrast.
Contrasting colors, sizes, and type styles can all be applied to type.
When using type in your designs, you never want to use the same typeface or font for the entire design. Titles, headings, quotes, and body copy should all utilize different styles to create a type hierarchy and clarify your message.
Just the mere physical relationship between objects will create emphasis. Every object has a gravitational pole to the other objects that are around it and the above methods all have influence in decreasing or increasing an objects gravity.
But like gravity, the position of elements can drastically change the weight of objects as well.
Eye Direction (Continuance)
Physical factors are:
simply means if an element is isolated from other elements or not. You could create emphasis by simply isolating an element on a page with no other elements surrounding it – or even present on the page.
Isolation works regardless of contrast or proportion. If you take ten of the same elements and group nine of them on one side of the site and isolate one on the other side, the lonely element by itself will always grab your attention.
When objects are touching or overlapping, the overlapping object will always get the attention. But contrast does play a big role in the proximity between objects. If objects are all really close to each other, the higher contrasting object will stand out even if objects overlap.
When objects are closer together they will tend to blend together, so contrast or overlapping objects will help to break the confusion.
Similarity doesn’t always mean that one object has to be different than all the others. What it really means is the focal power similar objects have with each other. When two or more objects look almost the same they will build a visual link with each other and depending on their proximity, they will combine forces and grab the user’s attention – kind of like a swarm of killer bees.
Using multiple objects together to move the user’s eye across the page is called
eye direction or continuance
. Continuance is a great way to guide the user through your page to exactly where you want them to go. You can hold the hand of the user by simply grabbing their attention with a high visibility object and then leading them to the next highest visibility object and then to the next until they make it to the end – where you want them to be.
Eye Direction or
To sum up,
is vital to web design and development because each web site has a
and it’s our job to get the users to complete that goal. These techniques are all versions of user mind control. You can blatantly grab and hold their attention with a big bright explosion or you can take them by the
hand and lead them down a
Which ever method
you choose just keep in mind
have a few
seconds to grab their attention,
so make it count.
Cox, P. (2017). Developing Emphasis in Web Design. [online] Codrops. Available at: https://tympanus.net/codrops/2011/09/30/developing-emphasis-in-web-design/ [Accessed 30 Sep. 2017].
Web design concept with drawings. (2017). [image] http://www.freepik.com/free-photo/web-design-concept-with-drawings_902906.htm#term=website&page=1&position=23 [Accessed 30 Sep. 2017]..
Vasile, C. (2017). Website Example for Single Visual Pattern. [image] Available at: https://1stwebdesigner.com/graphic-design-basics-elements/ [Accessed 1 Oct. 2017].
Vasile, C. (2017). Website example for Balance. [image] Available at: https://1stwebdesigner.com/graphic-design-basics-elements/ [Accessed 1 Oct. 2017].
Dearman, M. (2015). True Digital. [image] Available at: https://www.awwwards.com/sites/true-digital [Accessed 1 Oct. 2017].
Territory. (2017). [image] Available at: https://www.awwwards.com/sites/territory [Accessed 1 Oct. 2017].
Roll Studio. “Mix the City.” Awwwards.com, Awwwards, 14 Mar. 2015, www.awwwards.com/sites/mix-the-city. Accessed 1 Oct. 2017.
AQuest. “Apparecchiato.” Awwwards.com, Awwwards.com, 10 Feb. 2015, www.awwwards.com/sites/apparecchiato.
Joy Intermedia. “Joy Intermedia.” Wwwards.com, Wwwards.com, 30 Mar. 2015, www.awwwards.com/sites/joy-intermedia-1. Accessed 1 Oct. 2017.
Leibowitz Branding & Design. “Athena Art Finance.” Awwwards.com, Awwwards.com, 20 Oct. 2015, www.awwwards.com/sites/athena-art-finance-1. Accessed 1 Oct. 2017.
Sumner, J. (2016). TYPEKIT. [image] Available at: http://studentwebhosting.com/inspiration/10-great-examples-of-dynamic-web-design/ [Accessed 1 Oct.
Social Driver (2014). Lakeland Regional Medical Center. [image] Available at: https://socialdriver.com/2014/03/05/65-best-responsive-website-design-examples-2014/ [Accessed 1 Oct. 2017].
Birch, N. (2017). 1300 Just Dial. [image] Available at: https://onextrapixel.com/charming-website-designs-with-minimal-coloring-best-practice/ [Accessed 1 Oct. 2017].