Designer's Toolbox

Font Tips

One of the first things a visitor notices when viewing a website is the font. If a webpage displays a pleasing font, the visitor continues to explore the page. If the font is too small, confusing, or unprofessional, they are likely to look for information, products, and services elsewhere.

Choosing a Font Size

Select a font size that is easy to view, especially if the target audience is middle-aged or older. Keep in mind that many people may be visiting the website late at night or may not be wearing their reading glasses. Standard font size is 12 point.

A website that displays a font that is too small may be skipped for a more visually appealing site. Choose too large a font, and the professionalism and continuity of the text are lost. A moderate sized font is easy on the eyes and ensures a visitor continues reading until the end.

Selecting a Font Style

Professional websites require standard fonts. Readers prefer these fonts and research shows they are visually attractive to visitors. Standard fonts fall into two categories; sans (non-structural details on lettering) and sans serif (plain lettering). Arial, Comic Sans MS, Georgia, Helvetica, Tahoma, Times, Times New Roman, and Verdana. The most popular fonts are Arial, Times New Roman, and Verdana. Sans fonts (Times New Roman) and sans serif fonts (Arial) should not be mixed. Straying from these basic fonts results in text incompatibility with some browsers. It is best to stick with basic fonts rather than risk a jumbled display.

Use one or two font styles when designing fonts for a business website. Mixing several fonts creates a confusing and chaotic pattern. Changing the fonts too often projects an unprofessional image for the business.

Select a Theme

Font designs should complement each other. Select a theme and choose a few variations such as bold text headlines, italicized key points, or similar font styles. The text should flow from beginning to end without interruption.

Choose a Font Color

Continue with a single font color for increased continuity. Select standard blue for link text to notify visitors of the presence of an active link. Dark colored text on a lighter background is easier to read than light text on a dark canvas.

Utilize Space

A solid block of text is difficult to read. Use sub-headings, bullet points, and paragraphing to provide white space. Arrange the text to enable the visitor to view the entire page without scrolling horizontally and insert graphics to break up exceptionally large portions of text.

Professional font designs are easy to read, highlight key points, and draw the reader into the text; willing them to continue to the end of the content.

Color Tips

When choosing colors for your composition there is multiple things to remember. (This doesn’t refer to the colors inside of a full color image, Refer to photos) Firstly it can be very distracting if you use more than 3 colors, remember less is more. When choosing your colors first try to pick two that will contrast with one another and not conflict. Such as dark blue and light blue, a bad example would be bright blue and a bright red, these colors are both intense and with fight with one another and make it hard for the viewer to get your message. Things that create contrast are a) change in value (light and dark) b) complimentary colors (these are the colors opposite from each other on the color wheel. Now be careful, I wouldn’t recommend using and intense blue with an intense orange. this is where the change in value plays a huge part. If you choose a color in the orange family your second choice could be a light blue, or a light color in the blue -green family. Your third color is most likely going to be the color of your text. If the text is going on top of a dark color, think about using white and on a light color think about using black. If you want to use a color for your text some rules apply contrast rules apply. See the color scheme chart.

Tips for Heirarchy of Information in Your Designs

This tip refers to the way you organize the information in your composition.(This also applies to photos and images, see images.) Before choosing your fonts or placement of text, arrange your information by what is most important on down to the less important (supporting) information. This will help tell you how large or where to place each piece of info as well as what type of font to choose. When this is utilized correctly your viewer's mind will see and remember the important things first and be more likely to walk away with the message you are sending. Example: if you are trying to driver viewers to your website make the web address relatively large and easy to read. If most important contact is a phone number make it large and clear. Refer back to fonts.

Tips for Using Depth in Your Designs

By creating depth your composition becomes more interesting and eye catching. One way to do this is to overlap pieces of the composition. For example, try having a block of color with text on it over lap the corner or edge of an image. This simple thing automatically creates depth in the viewer’s eye. Now remember not to over do it and block out things. Another simple way is to have an important element such as text overlap two other subordinates elements. A change in value also creates depth, see color.

Tips for Using Images in Your Designs

If you are using images or photos in your composition the first thing to remember is dominance or emphasis. Choose one to be the dominate image and make the rest noticeably smaller. This emphasis tells your viewer’s eye where to go first and second and so on. Remember, you have to control the viewer’s eye as it moves through your composition, this movement is essential. A good way to test your composition is to show it to someone else and after a minute ask them if it was clear what to look at first and so on. If their eye didn’t know where to go or if they were confused about the ultimate message within the first few seconds this is a red flag! Keep working. Make sure that the theme or content of the images are not conflicting. Create contrast only with the size difference and color and value changes. Images are one aspect that should be very harmonious.

Tips for Placement in Your Designs

Knowing where to place information and images is essential for having an effective composition as well as an interesting one. Two areas to stay away from are the center and the corners. This is predictable and uninteresting and it can also make it hard to create movement when things are right in the middle or locked in a corner. Also try not to place text close to any edge of the composition, not only does this look bad but it runs the risk of having some important info cropped off in the printing and cutting process. Remember, there is always a proper time to break the rules such as if putting text or a headline bleeding off the edge is a design choice and benefits the composition because of style, but again it could accidentally get cropped more than expected so be careful.