people.ua.edu
  • About
    • FAQs
  • Getting Started
    • Themes
    • Workshops
    • Site Request
  • Learn
    • Accessibility Guidelines
    • Online Training Guide
  • Showcase
  • Our Blog
  • Log In
grid icon

MAXIMIZE USABILITY  
​WITH DESIGN


design usability pyramid
It may feel intimidating to approach the initial build of your site. Rest assured that good design is simple, and that's now a scientifically proven fact. Harness the power of time-tested design principles to guide you through the complex decision-making process of structuring and developing your site. 

Functionality and reliability are the foundation of good design. ​​Much like Maslow's Hierarchy of needs, there is a generally agreed upon design hierarchy of needs. Develop your custom system of design guidelines to apply to your content with these priorities in mind. The consistent application (and purposeful breaking) of your design rules will generate the predictability and functionality that a successful website requires. There are many benefits to applying design principles to your site-building process. For example, good organization and thoughtful structure aids is often accessible and accessible designs are more inclusive. 

Below are tips and fundamentals compiled from different corners of the internet. 

Overview

  • Hierarchy
  • Grid
  • White Space
  • Color
  • Typography
  • Choosing Imagery​
  • UA Brand Continuity
  • Elements of Design
Link to a PDF version of the design basics page.

Design Fundamentals


Hierarchy

Hierarchy grid illustration
​Good hierarchy in design exists when the most important element is seen first, the second most important, second, etc. You can use contrast through size, color, layout, and white space to create hierarchy.
Quick tips to confirm appropriate visual hierarchy: 
  1. Make a list of the key content on your page.
  2. Order this list according to each element's importance to the average user.
  3. Review your design and assess the order of your content according to the visual importance you gave it.
  4. Compare the two lists. Do the lists match? If so, you have created appropriate, logical hierarchy.

Learn More:
  • Understanding Visual Hierarchy in Web Design, Tuts+
  • Contrast and Meaning, A List Apart
  • Visual Hierarchy: Organizing Content to follow natural eye movement patterns, Interaction Design Foundation
  • How eye scanning impacts visual hierarchy in UX design, Web Designer Depot
Top of page

Grid

Grid sample
​Grid systems enforce order and clarity in the layout of your content. Luckily, with people.ua.edu and Weebly, most of that guess work is taken out of the design equation. However, it's important to be aware of proper spacing and alignment in support of consistency, balance and hierarchy.
  • You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.
    Anne Van Wagener
Quick tips on applying grid principles to your layout:
  • ​​​Create guides if possible to promote alignment.
  • Work within constraints and restrictions.
  • Pay careful attention to spacing. Be consistent. Provide enough space for the user to digest your content. Tight margins hinder reading comprehension by confusing the eye.
  • Use the Rule of Thirds.
Learn More:
  • The Infinite Grid, A List Apart
  • A Designer's Guide to Grid Theory, Creative Bloq
Top of page

Negative Space/White Space

White space to content ratio example
​White space is the emptiness that surrounds the elements that make up your site's content. White space, or negative space, can draw attention to, accentuate, and provide context for design elements on your site. The white space around your content is a vital contributor to its' readability. White space helps to reinforce hierarchy, is key in organizing your content and can let you create and control emphasis. 

​There is no one-size-fits-all for managing balance through white space. Create your content-specific white space guidelines and apply them throughout your site, consistently. Inconsistency with these important details makes your user work harder than they should have to. Don't give your user a reason to leave your page. And remember, if you're unsure of whether you have adequate white space, enlist a handful of friends or colleagues to give you feedback. 
White space between paragraphs and in the left and
right margins has been proven to increase
​comprehension up to 20%.

- Dmitry Fadeyev, creator of 
Usaura
Quick tips on adding white space to your layout:
  • ​Increase the margins around the copy and between columns
  • Confirm that your alignment is consistent. All of the text in a section should have one straight edge and one jagged edge (a rag).
  • Rag right, or left aligned text, is the easiest to read. Develop sound reasoning for diverging from the norm or risk slowing reading comprehension. 
  • Avoid the Weebly setting "align full" (the last option in the drop down menu). This setting will create unsightly and confusing spaces and gaps in your text.
  • Decrease visual noise by reducing contrast. You can do this through color, size and spacing of the text or element. 
  • Avoid designing an impenetrable wall of text. Create new paragraphs generously. 

​Examples of excellent use of white space:
The University of Chicago


​
Learn More:
  • Whitespace, A List Apart
  • What to do with Whitespace, Awwwards
  • Why White Space is Crucial to UX Design, Smashing Magazine
  • Myth #28: White Space is Wasted Space, UX Myths
Top of page

Color

Color and emotion wheel
Text should always be readable. Distracting or illegible colors will undermine and obscure your message. Be aware of the emotional connotations of the colors you are choosing, and be consistent and deliberate with your choices.
Quick tips on using color:
  • UA crimson is Web color #990000.
  • UA "warm gray" is Web color #eeeeee or #cccccc.
Free Resources:
  • Adobe Kuhler
Learn More:
  • A Simple Web Developer's Guide to Color, Smashing Magazine
  • Introduction to Color Theory for Web Developers, Tuts+
  • Why Facebook is Blue: The Science of Colors and Marketing, Buffer Social
Top of page

Typography

serif and sans-serif examples
​When considering a theme or layout for your site, be sure you're able to justify your decisions. This approach will ensure that your design will support your content. A distracting typeface or style undermines your message. Your priorities in choosing type and determining layout should begin with readability, followed by content-appropriateness, and lastly, aesthetics. 
Quick tips on typography:​
  • Consider your alignment. Left, right or center, but be sure it supports a readable and intuitive design.
  • Consider the aesthetics of the typeface: does it support your content or distract from it?
  • Choose typefaces with conventional letterforms.
  • Choose typefaces with generous spacing.
  • Ensure your type has adequate contrast for maximum readability. You can control that by adjusting size, weight, color and the space around it. 
  • Be aware of the effects you apply to your type. If it is distracting or if the effects create issues in areas of contrast or readability, it's not worth it.
Learn More:
  • Eight Important Factors of Good Web Typography, Tuts+
  • How to choose Type, Smashing Magazine
  • A Non-Designer's guide to Typefaces and Layout, Lifehacker​
Top of page

Choosing Imagery

rule of thirds example
​Quality imagery lends credibility and sophistication to your content. The opposite also sends a message. It's important to take the time to acquire the highest quality imagery available to you.

Choosing the appropriate imagery for your site begins with understanding your group's goals for the site as well as your content. Form should always follows function and imagery should never be used solely as decoration. You risk distracting or confusing the user when you include irrelevant imagery. You can evaluate the effectiveness of an image by determining whether it illustrates something new. If you find your content can live without the image, it's usually best to find an alternative.
Quick tips on choosing imagery:​
  • Try to select photos with people in them, when possible. 
  • Promote diversity.
  • Keep it real. Feature real people doing real things in real environments and keep the digital alterations at a minimum.
  • Avoid cliches.
  • Eliminate unnecessary or irrelevant imagery.
Quick technical tips: 
  • Be sensitive to resolution requirements. If the 'perfect' photo is pixelated, it's not the perfect photo. Accept that it is unusable and find an alternative.
  • When cropping images, use the Rule of Thirds, and check that you haven't inadvertently decapitated any of your human or animal subjects. 
  • Avoid warping or stretching photos. This is the quickest route to an unprofessional looking website.
Free photography resources:
  • Little Visuals
  • Gratisography
  • Unsplash
Learn more:
  • The Web Designers' Guide to Photo Selection, Tuts+
  • Photos as Web Content, Nielsen Norman Group
  • How and When to use Different File types, HubSpot
  • RBG vs. CMYK: When to use which and why, Crux Creative
  • The Ultimate Guide to Image Resolution,  CreativeBloq
Top of page

UA Brand Continuity

UA graphic standards cover image
​It's important to ensure that your website is complying with all UA branding application guidelines, where applicable. ​Let's do our part to foster brand continuity for all UA groups. With your help, anyone that interacts with the UA brand, can do so in a predictabl

Brand continuity is the consistent and uniform application of a branding system. Strong brand continuity connotes credibility and builds trust. You can buy into that trust by applying the UA logos, color palettes according to the guidelines laid out in UA's Graphic Standards Manual.  
Promoting consistency for the University brand has a dual purpose: It unifies the UA family, setting us all on a shared path of helping the Capstone achieve excellence, and ensures people everywhere associate the Alabama name with strength and distinction. 
- The UA Graphic Standards Guide, 2015-2016
UA Brand Checklist:
  • Are you using the appropriate version? The Crimson A logo version is meant to be less formal. It is also meant to be used in combination with the Alabama Official Nameplate.
  • Does the logo feature ®? If not, it might not be the most current version. 
  • Are the logos stretched, warped or unintentionally cropped?
  • If using Crimson, check that it is #990000. 
Here is a list of things not to do with the UA Logo, brought to you by UA's Strategic Communications Team:
  • Don't type it in a different font.
  • Don't space it out.
  • Don't place a drop shadow behind it.
  • Don't stretch it.
  • Don't put it on a distracting background.
  • Don't use a low-resolution version or web version on print (pixelated).
  • Don't put anything around it.
  • Don't make any of the words or letters larger or smaller than the rest of the word mark.
  • Don't tilt it.
  • Don't use it with another symbol incorporated.
Learn more:
  • ​Official UA Logos
  • UA Web Guidelines
Top of page


​Elements of Design

​The building block elements of design are listed below. These terms and concepts will help you make informed decisions about the design of your site.

1. Line
Helps direct the eye
Creates emphasis
Gives a sense of movement

2. Scale
Draws attention to and from certain elements
Creates emphasis

3. Color
Create a palette
Use the right color process (rgb vs. cmyk)
Consider Color Theory

4. Repetition
Ties elements together
Crucial for brand unity

5. Negative Space
Is the space between elements
Important for logos

6. Symmetry
Creates sense of calm
Pleasing to the human eye

7. Transparency
Supports element interaction
Can be used to create movement
Best when used intentionally
8. Texture
Best when used intentionally and sparingly
Lends depth and tactility to the design

9. Balance
Consider the visual weight and importance of each element 
Balance your composition accordingly

10. Hierarchy
Signals importance of each element
Use the design principles to achieve good hierarchy
Designer uses principles to control the experience

​11. Contrast
Creates emphasis
Light vs. dark, thick vs. thin

12. Framing
Highlights elements
Can be aesthetic or compositional, but best when intentional
Can allow for cropping

13. Grid
Mathematical division of space
Supports clarity and proper alignment
​14. Randomness
Intentional rule breaking
Asymmetry and clutter, when used deliberately can be effective design tools

15. Direction
Use of hierarchy to direct the user's eye

16. Movement
Brings life to content
Active compositions indicate movement

17. Depth
Dimensionality in 2D objects
utilize texture, shadow and horizon lines to indicate 

18. Typography
Use wisely and carefully

19. Composition
Purposeful arrangement of elements
​Use scale, depth and hierarchy
Top of page
(205) 348-3532
Accessibility | Equal Opportunity | UA Disclaimer | Site Disclaimer | Privacy
 Copyright © 2021 | The University of Alabama | Tuscaloosa, AL 35487 | (205) 348-6010
Website provided by the Center for Instructional Technology, Office of Information Technology
  • About
    • FAQs
  • Getting Started
    • Themes
    • Workshops
    • Site Request
  • Learn
    • Accessibility Guidelines
    • Online Training Guide
  • Showcase
  • Our Blog
  • Log In