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.
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:
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.
Quick tips on applying grid principles to your layout:
Negative Space/White Space
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
Quick tips on adding white space to your layout:
Examples of excellent use of white space:
The University of Chicago
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:
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:
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:
UA Brand Continuity
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.
UA Brand Checklist:
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.
Helps direct the eye
Gives a sense of movement
Draws attention to and from certain elements
Create a palette
Use the right color process (rgb vs. cmyk)
Consider Color Theory
Ties elements together
Crucial for brand unity
5. Negative Space
Is the space between elements
Important for logos
Creates sense of calm
Pleasing to the human eye
Supports element interaction
Can be used to create movement
Best when used intentionally
Best when used intentionally and sparingly
Lends depth and tactility to the design
Consider the visual weight and importance of each element
Balance your composition accordingly
Signals importance of each element
Use the design principles to achieve good hierarchy
Designer uses principles to control the experience
Light vs. dark, thick vs. thin
Can be aesthetic or compositional, but best when intentional
Can allow for cropping
Mathematical division of space
Supports clarity and proper alignment
Intentional rule breaking
Asymmetry and clutter, when used deliberately can be effective design tools
Use of hierarchy to direct the user's eye
Brings life to content
Active compositions indicate movement
Dimensionality in 2D objects
utilize texture, shadow and horizon lines to indicate
Use wisely and carefully
Purposeful arrangement of elements
Use scale, depth and hierarchy