Visual Hierarchy

When designing a website, information needs to be conveyed quickly and clearly. Deciding what you want your users to pay attention to and in what order is what we call visual hierarchy. Learning about visual hierarchy can help your site feel more organized, let your users find information faster and promote the content you feel is most important.

Reading Patterns

Recent studies show that readers first scan a page to get a sense of its content before committing to reading the content fully. Using this, most web designers have established two scanning patterns that work well on the web.

F-Patterns

F-Patterns work best on traditional, text-heavy pages like news articles and blog posts.  Readers will scan the page, looking for bold subheaders or topic sentences that relate to the content they are looking for. Anyone that has used Google has interacted with an f-pattern. You scan the bold linked headings only stopping to read the text underneath if you think that one of the results is the content you are looking for.

Z-Patterns

Z-patterns are employed when the information is not presented in block paragraphs. In this pattern, a reader’s eye first scans the top of the page, where the most important information is likely to be found then shoots down to the opposite corner at a diagonal and does the same thing across the lower page.

Place the most important information in the corners and orient other important information along the top and bottom bars and connection diagonally.

facebook-zpattern

Facebook’s login page is an example of a z-pattern

Size

People will often read larger content first. Large differences in content sizing will typically override reading patterns and order. In the below example, most users will read the title “Mr.Simon Collison” first, even though there is text above it. This is a great example of using size to highlight important information. But use size sparingly. If everything on your page starts off large, it’s hard to use size to emphasize. As a rule, keep your body copy to a 12pt-14pt scale.

efba3b07898b97723883c0cdf1980980

Space 

Spacing is an important but often ignored part of creating a balanced visual hierarchy.  It’s the idea of leaving white or blank space around an element. Failing to allow some amount of blank space can leave your site looking overcrowded and confusing, drowning your users in too much information. Using white space allows your users’ eye a place to rest and a path to travel through the design. Leaving space allows you separate and organize elements on your site. Good spacing allows you to group elements together and isolate focal points. In the example below, the designer leaves plenty of space between and around each section, creating a clean and balanced design.

spacing-visual-hierarchy

Color

People love color. Our eye is drawn to certain colors ensuring the content is hard to miss. Clever use of color on your site can help highlight important information and be a visually interesting way to differentiate between elements on a page. Your brain naturally enjoys things that contrast, so your eyes will focus on objects that stand out due to their difference in color from the surrounding objects.

 

Highlighting-in-UI-Design

 

Fonts

Typographic hierarchy is its own discipline. The way you handle your copy has a big impact on the overall design of your site.  Different aspects of the fonts can really make or break the design such as the category used, decorative, script, sans-serif, serif or script or even the use of uppercase, lowercase, bold or italic, the width of the strokes, etc. In the example below, the designer uses different font weights and italicization to draw the eye to the words “the perfect teas to keep you warm.” This combined with good word placement creates a more dynamic reading experience.  
teafactory

When designing a website, an understanding of visual hierarchy will not only allow you to create a visually appealing design, it will also help you determine how to group information, determine what is important and overall improve the flow and usability of your site. 

 

 

 

Typography On The Web

When it comes to creating a good web design, communication is key. You want your users to be able to understand and navigate your site as quickly as possible. One of the key factors in creating great communication on the web is typography. Typography is the study of text, with the goal of making it as readable as possible. By optimizing your text by using typography, you also optimize the readability, accessibility, and usability of your site.

Keep the Number of Fonts to a Minimum.

Having too many fonts on a site can create a messy and unprofessional feel. A good rule of thumb is to just have two fonts, three max. When you add a bunch of different fonts, they start to compete for attention, ruining the readability of your site. Choose a body font and a header font and use those consistently throughout your site. There is no good reason why your homepage should have a different font from your checkout page. Keeping your font consistent will help the flow and UI of your site.

Example of competing fonts

Example of how too many fonts start to compete for attention.

Line Length 

By controlling the number of characters on a line, you can increase the readability of your website. The layout of your site should not decide on the length of your text, it should be a matter of legibility. By following this simple rule of thumb, you can insure the readability of your site.

You should have around 60 characters per line for a legible experience. Having the right amount of characters can help create a neat, sorted look. This is the rule for desktops, for mobile devices you should limit characters to 30-40 per line.

ideal-font-length

Ideal character length for the web.

 

Use a Typeface that Works at Various Sizes. 

Your users are going to be accessing your site from different screen sizes and resolutions, so it’s important to choose a font that works well at different sizes and weights. It helps to maintain readability. Some fonts look fine at larger sizes but are unreadable at smaller sizes.

Example of fonts at smaller scale

Avoid all Caps 

All Caps are fine when you are using it in a limited context. For example, logos and headings. But if your text is around four or five sentences, don’t capitalize it. It greatly slows down reading compared to lower-case type.

Be aware of the space between lines.

In typography, this is referred to as leading. By increasing the leading, you are adding to the white-space between your lines of text. Using proper leading you can increase comprehension up to 20%. As a rule, leading should be about 30% more than the character height for good readability.

Make Sure to Have Sufficient Color Contrast

Make sure your text color contrasts with your background color. If the colors are too similar, it lowers the users’ ability to scan and read your copy.  The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Once you choose your color, be sure to test it. 

Conclusion

Good typography can help your website feel crisp and polished. Bad typography can make your site confusing and cluttered. By following these rules and making good typography choices you can maximize legibility, understanding, and readability of your website.

Want more graphic design tips? Check out our Graphic Design Tips for Making A Website.

post

Graphic Design Tips For Making a Website.

Designing a website is a daunting task. Even in today’s web landscape of pre-made themes and so-called “foul-proof” design tools, a basic understanding of graphic design can help push a site to greatness, while a lack of understanding can ruin a perfectly good theme. Here are some tips and terms to keep your site looking polished and modern.

Layout

The layout is the arrangement of elements on a page, usually referring to the specific placement of text, images, and style. Layouts can make or break your site. A good layout can help make the site user-friendly, highlight specific content, and push traffic in the right direction. Bad layouts will confuse your users, causing your message to be lost.

Layouts in web design need to be flexible and adaptable. Remember that users will be accessing your site from different devices or browsers. A layout that looks great on a large 1920×1440 screen may end up looking cramped and busy on someone’s iPhone. Even different browsers can have an effect on your layout, as they use different resolutions and process code differently. Web layouts cannot be one size fits all. 

Responsive Design

The number of mobile users across the globe is now estimated at over 3.7 billion and growing. The United States is the third-largest mobile market. According to Pew Research, virtually all Americans (over 95%) currently own a cell phone. Having a website that functions and looks good on mobile is essential. This is known as having a responsive design. This means that a responsive site layout will flex and/or grow depending on the user’s screen size. Good responsive sites will pay special attention to making sure images have specialized sizes for different devices and content resizes in a way that is pleasing without losing functionality. 

Website responsiveness can also affect your Google ranking. Google tests to see how responsive your site is. They may rank your site lower if it is not optimized for mobile users. Your site may even disappear completely if a user is searching for it on a mobile device.  

Hierarchy

Hierarchy is the design process of ordering web elements by importance. Where this differs from the layout, but there is an important difference. Say you have your layout done and you stand back and notice that nothing really jumps out at you. None of your content “pops”. It might not be a problem with the layout or content, but with your visual hierarchy.

Good visual hierarchy will help break up your content into more readable chunks. It helps the user identify what is most important by arranging the content clearly. There are many different ways to do this. The most obvious is to use scale. “Can you make it bigger?” is one of the most common phrases a designer hears. But there are other ways to improve your hierarchy; such as color, space/texture and finally, an understanding of typography.

Typography

Typography is a discipline that has evolved out of the printing press era but today is an important part of web design. Good graphic designers pay special attention to things like font pairing, kerning, line length, line space, and contrast. This all contributes to better readability on your site.

Typography isn’t just choosing the right font. Typography is, in essence, the art and technique of arranging type. It’s central to the skills of a designer and is about much more than choosing a font.  Many great sites have been let down by a poor understanding of typography. A few simple rules to follow when starting out are:

  • Do not use more than two font families on a site
  • Make sure the same font is used across the entire site
  • When emphasizing something in a paragraph, just bold it. Don’t underline,  Make it bigger or  MAKE IT ALL CAPS.  It throws off the hierarchy. 
  • Keep it simple. A clean san-serif font like Arial is always a safe bet. 

Want to learn more about typography? Check out our Typography on the Web guide.

Color Palette

Color. Simple to understand, hard to master. When it comes to web design color must be used carefully. An understanding of color theory can help you choose what colors will work best on your site. Tons of research has been done on the feeling certain colors evoke in people. There is a reason restaurants use red and financial institutes’ logos are blue. Red makes people feel hungry, while blue evokes a sense of trust and stability.

That being said, choosing a beautiful palette is not all there is to color. You must keep in mind things like contrast, complementary colors and the cultural context around each color. The last one is particularly important when it comes to web design. For example, making the cancel button green and the confirmation button red will just confuse your users and lead to frustration.

UI

UI can be one of those terms that people use but don’t understand. UI stands for User Interface. UI is the design of the interface of your product with the focus on maximizing usability and user experience. It basically encompasses all the topics discussed above and all these disciplines are used to serve the UI. But unlike say, good typography and color; good UI will go unnoticed. The goal of user interface design is to make the user’s interaction as simple and efficient as possible. To have the user achieve their goal easily without mistakes. 

So if good UI is unnoticeable, how do you check if you achieved it? When critiquing your UI –or anyone’s for that matter — ask the following questions

  • Can the user complete their tasks with little difficulty?
  • Does the interface allow the user to complete tasks in a timely manner?
  • After leaving a website, how likely will the user be able to remember how to use it the next time they visit?
  • What steps does the interface take to lessen the chance of user error, and how do they let the users correct an error?
  • Does the user enjoy interacting with the design?

User testing is also a very useful tool in UI design.  The more people interact with your interface, the better. Proper usage analytics can reveal differences in how users navigate your website. By monitoring these analytics you’ll see if there is a step in the process users get stuck on or if they are spending a lot of time looking for specific information or pages.  Once you have this data, you can go back and find a better solution. 

UX 

User experience refers to the singular and accumulated experiences that occur for users as a consequence of them interacting with an object in a given context. User experience is a design philosophy where all design decisions are made to enhance the user’s satisfaction and create a certain feeling when using your product. 

Due to their similarities, UX and UI are commonly confused with one another. It helps to think of UI as the discipline that reacts to an established product and as trying to create a visual language for said product. UX, on the other hand, is a discipline that creates the context in which the product will be formed. UX designers are looking at factors, such as how users expect established design language, what their competitors are doing and how the website will navigate from page to page.

UI is visual, while UX is data driven. UX is less concerned with the look and feel of a site and more concerned with how it functions; especially in regards to how users will interact with it. UX design starts at the very beginning of the design process and asks the question of how should this website work, unlike UI which is more concerned with how it looks

For example, say that a travel site needs a page for users to book a ticket online. UX designers are responsible for deciding what information needs to be on the page, how users are going to find it, and if it needs links to other pages or if other pages need to link to it. They will also research how other ticket bookers work on other sites and possible structural approaches.  With the UX design done, it then passes to the UI phase. Using the data from UX, UI designers will create something visually using all the disciplines discussed before. Now that has been established, how can you create good UX?        

To create a good UX, you must know your users and what kind of experience you want them to have. Ask the following questions when designing: 

  • Who are my users? 
  • Why would they be coming to this site? 
  • What are they trying to do on the site?
  • What information are they trying to find?
  • How am I making sure that they can find it? 
  • How do I want them to feel when visiting the page?
  • In what context are they interacting with my site? 
  • What is the problem or need we are aiming to solve or improve? 
  • What does the site need to do? 

The answers to these questions should inform any design decision you make. Great UX is the foundation of any great design. When applying any of the design lessons from above, make sure to keep these answers in the back of your mind. All the other terms and disciplines discussed are just tools that you can use to improve your UX.