Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start 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

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Hierarchy & Alignment

This is my class Hierarchy and Alignment Presentation we use in class.
by

Allison Longcrier

on 13 October 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Hierarchy & Alignment

Visual hierarchy is the difference between a site that strategically influences user flow and decisions, and a site that just “looks nice.”

Have you ever visited a website and said to yourself “
Whoa, where do I start?
” If you have, then you are looking at a page that lacks a little something known as hierarchy.
What is Hierarchy?
So...
Hierarchy is simply defined as any system of things ranked one above another.
is a system that helps us define order and organization without having to think about it too hard.
Hierarchy
Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance.
What is Visual hierarchy?
So...
A list is a good example of an element that has the potential to communicate hierarchy, as demonstrated in the image here:

A properly structured website brings attention to the
most important information first and makes sure that the
reader understands what to read next.
Your page’s hierarchy is critical to capturing the reader’s attention and hold their hand as they are guided through your website.
Hierarchy gives a focal point to a design.
Now... Does any of this sound familiar?
It should - this is perfect opportunity to utilize
Emphasis
on your webpage.
We will use
Emphasis
to create our
Hierarchy
.
The varying degrees of emphasis in a design is...
Hierarchy
!
Hierarchy is conveyed by the way in which elements are grouped and sub-grouped.
Why is hierarchy important?
Knowing these principles and being aware of how to use hierarchy to your advantage can make a large difference in your audience's user experience and how they navigate your site.
When used properly, hierarchy can greatly benefit your website and make you appear to be a true professional.
How Do You Make Your Hierarchy Better?
In the next few sections, we will cover ideas on how to organize your site as to better lead them on a journey through your site. Use only one as a means to bring uniformity to your site or multiple tactics in conjunction for a more layered and structured concept.

Whichever way you choose to create your hierarchy make sure, you do so throughout your entire website. Once you have “trained” the user to use your website successfully, they become very frustrated when you change it up on them in the middle of the website.
Imagine if you went to Instagram and it was different every time you used it. That would definitely annoy you having to relearn how to use it every time you wanted to post a picture.
Size
Size is an effective tool for guiding a viewer’s eye to a specific element of a design because larger objects attract the eye more than smaller objects.

Our minds automatically associate size with importance, so the largest elements of a design should be the most important, and the smallest elements should be the least important.
Large Images
Using a large image on a page is a great way to grab the user’s attention and keep them focused on one your message for a few seconds. The eye will tend to lead to a caption next then to the adjacent words. Use this as an opportunity to hook them in with copy that pertains to your image and carries them to the next point.

Using large text on a page is another great way to grab the user’s attention and keep them interested in what else your website has to say. The eye will gravitate towards the bigger text wondering what it says.
Large Text
Some thoughts on how shapes in web design can be used for attention-grabbing purpose and for an interesting or even comforting user experience.

It’s a pretty simple design principle: people recognize the outline of a shape quicker than they recognize the content within it. Which means that differing shapes used in design can quickly add interest, separate content and break the scan path so that while people scan they are visually forced to stop at some point and become interested.

While sometimes you want to use a differing shape to grab attention, you may also want to use repeating shapes with large amount of content so that your user can scan faster and hold their attention.
Large Shapes
Color, like size, is another visual organization tool that is used to draw attention to a certain element of a design. Our eyes are immediately drawn to bold, contrasting pops of color. Making sure you have a good color scheme that works and using it to your advantage is key to creating a solid design. We will get into color theory soon.
Color
Alignment
Proper alignment of elements and text on your website greatly impact the overall design.
Order between design elements is often created through alignment; it guides a viewer’s eye around a page by allowing them to subconscious follow lines. This is often used in web design through columns and grids.
Meticulous alignment of elements, such as images and text blocks, adds an extra level of professionalism to your site and is visually appealing and calming. Choosing the proper alignment for text within each block can also add a sense of order and contributes to readability and overall design.
Text alignment
There are several places alignment comes into play with text – for your banner, navigational tools, sidebars and main body text. Each of these elements could include text that is aligned in different ways, but you likely want to develop a consistent style within each text element type.
Text can be aligned in four distinct ways – left, right, center and justified. When selecting a default alignment for body type on your site, first think of the language type will be displayed in. Does it read from left to right, or right to left?
Left Alignment
Left aligned text is the default setting in most computer software and for building websites when no other text direction is set. Each line of text aligns with the left margin and is ragged along the right margin. Left justified text is the standard for main body text on most websites because it is easy to navigate, design and read. In web design, word spacing is most consistent with left alignment.
Jagged edge
on right side.
Notice how all groups of text are left aligned, including the navigation above the image.
Right aligned text is the default setting for languages that read from right to left. Text aligns with the right margin and is jagged along the left side. Right justification appears most frequently in navigational elements or break out text blocks that are used more like art elements, such as big quotes.
Right Alignment
Notice how all the text lines up to the right side of the screen, including the search box and navigation.
Jagged edge
on left side.
Centered text is centered within the box it resides. Lines of type are typically jagged on both the right and left sides. Centering is most commonly used for text blocks containing
few
words.
Center Alignment
Justified Alignment
Justified text stretches the entire width of a frame. While justified text is commonly used in print materials, it is uncommon in web design. The look of justified text can be somewhat hard to predict in different browser sizes. Further, because of the lack of defined hyphenation, text can squeeze and stretch somewhat more unpredictably, making readability an issue online.


Content Alignment
Sometimes it can be hard to choose how to align all items on the page. Think about your audience as you select how to align elements, especially type, and keep readability in mind as a key concern. When working with other elements consider how they will be used as you develop an outline for your site. Later we will go into the different alignments for web pages more in depth.
Proximity
Proximity is used to separate and group elements of a design; it’s the quickest way to relate similar content or distinguish one group of content from another. Objects that are close in proximity are often associated with each other.
A website that uses proximity in its architecture and design does not overwhelm the user with information.
So, although it is relatively easy to implement the principles of proximity on websites that are light on content, proximity is much more important on content-rich websites.
News websites are good case studies of this principle. Next we will go through a comparison of news sites.
The text links above the logo are neatly arranged, with plenty of space between the two sections. Left alignment of the content in the header also contributes to the clean look.
Overall, the LA Times website has a pleasing design mainly because of color choice and typography. But it also has a clean and uncluttered look, especially in the header section.
The logo is big and stands out, contributing effectively to the website’s branding. The object nearest to the logo is the horizontal navigation bar below. Because the navigation bar is dark, it contrasts with the logo.
Every bit of information in the LA Times header is grouped with related items, except for the logo, which stands alone. Nothing in the header confuses you or makes you wonder where it belongs.
Three dotted vertical lines attempt to separate the area into four sections, but the first separator does not make any sense. In fact, that section would probably look more inviting if those dotted separators were removed.
The Globe and Mail website has a complex header section that fails to implement the principle of proximity.
The only significant amount of white space is in the center, beside the logo, which accomplishes nothing. Two ads appear in the header, contributing to the clutter. The ads may be necessary for financial reasons, so the problems are understandable.
The biggest problem is the messy section above the large banner ad. There is no clear distinction between elements in that section.
In Summary:
While you may not consider
yourself a designer, you are
fully capable of learning and
using tricks of the trade to
effectively communicate the
right message to your audience.

Becoming more aware of hierarchy and its role in guiding a viewer around a page on a website or a page in a magazine can only benefit the items that you design in the future. Knowing these principles and being aware of how to use hierarchy to your advantage can make a large difference in your audience's user experience and how they navigate your site.
Large Images
Large Text
Large Shapes
Color

Cao, J. (2015). The 5 Building Blocks of Visual Hierarchy in Web Design. [online] The Next Web. Available at: https://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/#.tnw_rLCG2yDp [Accessed 4 Oct. 2017].
Porter, D. and Porter, D. (2013). Hierarchy & Web Site Design - Wood Street, Inc.. [online] Wood Street, Inc. Available at: https://www.woodst.com/web-design-development/hierarchy-web-site-design/ [Accessed 4 Oct. 2017].
Clauser, D. (2012). Hierarchy – 6 Simple Ways To Structure Your Website. [Blog] Media Contor. Available at: https://mediacontour.com/the-importance-of-hierarchy-on-your-website-6-simple-roi-increasing-ways-to-structure-your-website/ [Accessed 6 Oct. 2017].
Hooker, L. (2015). The Basics of Visual Hierarchy (And Why It's Important For Your Website!). [Blog] Elle & Co.. Available at: http://www.elleandcompanydesign.com/blog/2015/1/21/the-basics-of-visual-hierarchy-and-why-its-important-for-your-website [Accessed 6 Oct. 2017].
Kumar, Siva (2011). Aruns Folio. [image] Available at: https://onextrapixel.com/45-creative-examples-of-large-typography-in-web-design/ [Accessed 6 Oct. 2017].
Kumar, Siva (2011). Bear Grylls Live. [image] Available at: https://onextrapixel.com/45-creative-examples-of-large-typography-in-web-design/ [Accessed 6 Oct. 2017].
Kumar, Siva (2011). Design Zoom. [image] Available at: https://onextrapixel.com/45-creative-examples-of-large-typography-in-web-design/ [Accessed 6 Oct. 2017].
Kumar, Siva (2011). Forefathers Group. [image] Available at: https://onextrapixel.com/45-creative-examples-of-large-typography-in-web-design/ [Accessed 6 Oct. 2017].
Kumar, Siva (2011). Julie Hemery. [image] Available at: https://onextrapixel.com/45-creative-examples-of-large-typography-in-web-design/ [Accessed 6 Oct. 2017].
Kumar, Siva (2011). Just Dot. [image] Available at: https://onextrapixel.com/45-creative-examples-of-large-typography-in-web-design/ [Accessed 6 Oct. 2017].
Kumar, Siva (2011). Netbluez. [image] Available at: https://onextrapixel.com/45-creative-examples-of-large-typography-in-web-design/ [Accessed 6 Oct. 2017].
graphicdesignjunction.com (2017). Pi’s Epic Journey: Creating the Unforgettable. [image] Available at: http://graphicdesignjunction.com/2013/04/website-designs-with-large-photo-background/ [Accessed 6 Oct. 2017].
graphicdesignjunction.com (2017). Creative People. [image] Available at: http://graphicdesignjunction.com/2013/04/website-designs-with-large-photo-background/ [Accessed 6 Oct. 2017].
graphicdesignjunction.com (2017). Food Inc. Movie. [image] Available at: http://graphicdesignjunction.com/2013/04/website-designs-with-large-photo-background/ [Accessed 6 Oct. 2017].
graphicdesignjunction.com (2017). Satorisan. [image] Available at: http://graphicdesignjunction.com/2013/04/website-designs-with-large-photo-background/ [Accessed 6 Oct. 2017].
graphicdesignjunction.com (2017). Julliana Barros. [image] Available at: http://graphicdesignjunction.com/2013/04/website-designs-with-large-photo-background/ [Accessed 6 Oct. 2017].
graphicdesignjunction.com (2017). USAY. [image] Available at: http://graphicdesignjunction.com/2013/04/website-designs-with-large-photo-background/ [Accessed 6 Oct. 2017].
graphicdesignjunction.com (2017). MacAllan Ridge. [image] Available at: http://graphicdesignjunction.com/2013/04/website-designs-with-large-photo-background/ [Accessed 6 Oct. 2017].
Cao, J. (2017). Similarity. [image] Available at: https://thenextweb.com/dd/2015/03/17/how-to-apply-optical-illusions-to-web-ui-design/#.tnw_Z6iDu20d [Accessed 6 Oct. 2017].
Cox, P. (2012). Abstract Shape. [image] Available at: https://tympanus.net/codrops/2012/12/05/grabbing-attention-and-building-a-moving-experience-with-shape/ [Accessed 6 Oct. 2017].
Well Optimised (2017). Living Sound + Vision. [image] Available at: http://welloptimised.com.au/portfolio-item/living-sound-vision/ [Accessed 6 Oct. 2017].
Meet Isaac Wooten – The UI/UX Designer behind the beautiful Visage landing page. (2014). [image] Available at: http://base38.co.uk/meet-isaac-wooten-the-uiux-designer-behind-the-beautiful-visage-landing-page/ [Accessed 6 Oct. 2017].
Cousins, C. (2017). Xdoria. [image] Available at: https://tympanus.net/codrops/2012/06/19/line-that-up-proper-alignment-in-web-design/ [Accessed 6 Oct. 2017].
Cousins, C. (2017). vool. [image] Available at: https://tympanus.net/codrops/2012/06/19/line-that-up-proper-alignment-in-web-design/ [Accessed 6 Oct. 2017].
Cousins, C. (2017). A la une. [image] Available at: https://tympanus.net/codrops/2012/06/19/line-that-up-proper-alignment-in-web-design/ [Accessed 6 Oct. 2017].
Cousins, C. (2017). Big Noise. [image] Available at: https://tympanus.net/codrops/2012/06/19/line-that-up-proper-alignment-in-web-design/ [Accessed 6 Oct. 2017].
Webdesigner Depot. (2010). The Principle of Proximity in Web Design | Webdesigner Depot. [online] Available at: https://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design/ [Accessed 9 Oct. 2017].
Nunez, R. (2015). Graphic and Web Design Principles. [online] Slideshare.net. Available at: https://www.slideshare.net/wilsjen/graphic-and-web-design-principles-50858482 [Accessed 10 Oct. 2017].
Moumtzidou, A. (2017). Web Stats. [image] Available at: http://www.business2community.com/online-marketing/good-web-design-never-half-baked-0737948#ebY7okHvz5z28K6r.97 [Accessed 10 Oct. 2017].
Bibliography:
Full transcript