Visual design is an opportunity to communicate more than just your good aesthetic sense to your users. Things like color scheme, font choice, and logo design allow you to show rather than tell what your organization is all about. It’s also an essential method of establishing your ethos (a fancy rhetorical term for credibility and authority) either as a business or an individual. For example: would you believe the content of a government site if it was written in comic sans? Would you go to a day spa that used military-style block letters to describe its services? What about a doctor’s office with testimonials written in red text on a plain black background? Visual design also gives you the opportunity to create a welcoming environment for your users -- one that is easy to navigate, comfortable to look at, and accessible. The warmer your environment is, the more likely users are to return to your site and view your content again. Below I’ve outlined some basic visual design components and principles, all of which can be applied to your HTML5 markup with CSS (we’ll talk more about these on the Coding page). Don’t forget to check the side panel for helpful tips and tricks!
Font
Font choice is one of the primary modes of establishing a visual presence for your website. It's always a good idea to choose a font that matches your content and/or the feeling of your brand. A fitting choice of font not only shows users that your site looks good, but reinforces your authority as a web author: if you make good aesthetic choies, it breeds trust with your users that you have their best interest at heart. There are several different syltes of font, called font-families, that you can imbed with CSS. Below you will find a list of some of these and their primary advantages and uses in web design.
- Serif
- Sans-Serif
- Blackletter
- Script
- Miscellaneous
Serifs are the small "feet" at the bottom of letters in this font family. Serif fonts are most often used in print, because large quantities of text in that mediumare easiest to read when they have the "natural baseline" of serifs. They can be used in web design to achieve a textual or old-timey feel to an element. If, for example, you're modeling your website off of a newspaper, then you'd want to include serif fonts like the one employed here, called Garamond.
Sans-serif fonts are exactly what they sound like -- fonts that don't have serifs. Sans-serif fonts have a sleek, modern feel and are the most common fonts used in web-design. Research shows that sans-serfic fonts are the easiest fonts to read on screens, regardless of the amount of text. The most common are Arial and Helvetica.
Blackletter fonts are decorative, dense fonts that are used to convey formality. These fonts are best used as headings and are most readable at larger font sizes. I recommend using this family sparingly.
Script fonts are meant to resemble handwriting. You often see these fonts on invitations, motivational posters, or in sections that are meant to mimic handwritten documents. These fonts are difficult to read on the screen and should only be used when appropriate, and even then, sparingly and in larger font sizes.
This category describes any fonts that do not fit comfortably into the other categories. Symbol fonts like Wingdings (which you should never use, unless you're trying to be purposefully infuriating) and custom-made combination fonts often fall into this category. These are usually graphically-driven fonts, meant to convey a specific atmospheric message.
Color Scheme
Color scheme is one of the most difficult elements to nail in web design. Too much contrast, and you create an uncomfortable viewing experience for your users, while not enough contrast leaves you with a boring, flat, directionless page. Authors use color scheme not only to reinforce their branding and presence, but also to draw attention to certain parts of their site. Providing contrast between different elements of your layout (which we will discuss next), both in color and in design, can help indicate to users information that you find important or that you think they will be interested in. When picking a color scheme, there are a few things to keep in mind:
- Color psychology
- Complement/Contrast
- Readability/Accessibility
believe it or not, different colors convey different tones, moods, and atmospheres. If you want to provide a relaxing experience for your users, consider using cool colors: purple, blue, soft greens, and pastels. If you want to provide a more energetic experience, warm colors are the way to go: red, orange, yellow, and neons. Most color schemes, however, use a mix of the two to allow for...
Most websites include three or four main colors in their color schemes. There are several principles governing how these are chosen (see the sidebar for resources and more information), but generally speaking, schemes have one accent color and two or three similar-family colors. The integration of an accent color allows designers to make elements "stick out." Often this accent color is applied to branding elements, such as the logo, navigation, headings, or border layout elements, though these are not the only applications.
Readability applies to both the text on your site and the site as a whole. When presenting text on top of a colored background, be sure that the text is readable -- use high contrast but complementing colors so that your content is accessible. Try to avoid using font/background colors that are too similar or too different: the former makes the content fade into the layout while the latter can be a jarring experience for the user.
Layout
Layout is one of the most versitile rhetorical devies you can employ in web design. The placement of elements can influence your users' choices, drive them to certain content, and remind them of your brand presence while they experience your environment. Many studies have been conducted on user psychology, many of which analyzed how users respond to certain kinds of layout designs. Below are a couple of concepts to keep in mind as you design the layout of your site.
- The F view pattern
- The rule of thirds
Research using eye-tracking equipment shows that users spend the most time looking at content that is arranged in the shape of an upper case F. For example: if you scroll to the top of this page, users will immediately be drawn to the horizontal header, the "Visual Design" title, and the first content in the sidebar. When placing important elements on your page (such as your navigation bar or your logo), it is important to remember which parts of web pages receive the most traffic. If you want your users to pay attention to something, put it in their immediate field of view.
The rule of thirds is a common concept in photography and cinematography. The basic principle here is that a site will be more dynamic if it places its most essential elements in such a way that it can be visually split into thirds. For example: the main article portion of this website takes up about 2/3 of the screen space, while the sidebar takes up one. This division is visually comfortable for users and can be manipulated to create a more dynamic sense of space.
