Web Design Techniques

Principles of Web Design One often cannot help but recognize a well-designed Web page. Its layout focuses your attention, its navigation is easy to use, and its visuals reinforce the message. In her book, The Non-Designers Design Book (2008), Robin Williams described four principles that appear to be present in well-designed materials. The first of these is…

Contrast The importance of using contrast in your website or training can’t be overstated. Contrast immediately grabs people’s attention and helps emphasize important information.   Contrast can be created by including images, changing fonts, colors, size, and so on to make sure it stands out. Contrast was established in this example by using large bright fonts on a dark background for the title; changing the background color for the navigation area; and using capital letters, a different font for the buttons, and a few more subtle techniques. Well-designed pages also use . . .

Alignment Pages that seem unnatural and unprofessional usually have an issue with alignment. Alignment helps the page look balanced and helps make the information flow more smoothly.   Vertical and horizontal alignment can be promoted by aligning text and images appropriately. If the viewer must read a significant amount of text, it is recommended that the text be left justified rather than right or center justified. Vertical and horizontal alignment was used appropriately by the Classroom Builder interface by centering the title on the page and making the images large enough to align with the center of the title. The navigation buttons align with one another and are centered within the image.

How Would You Improve this Module? Take a look at the following screenshot from a web-based training module for nurses. How might you apply the principles of contrast and alignment to improve the training?   View the next slide to see another designer’s changes and commentary.

Designer Commentary “The alignment of the folders and the balance of the site looks good, but the instructions for the activity were overlapping with what learners needed to do.   Because it was difficult for me to read the text and to determine what I was supposed to do from reading the instructions, I changed the transparency of the background and bolded and increased the font size of the main steps of the activity to improve the contrast and make this more apparent. This came at a cost, as I had to get rid of the image of the nurse. If the image of the nurse is required, then the layout of the information must be changed or the amount of text must be reduced.”

Repetition Repetition is a great way to reduce cognitive load and to improve the look and feel of your training. Repetition involves using the same layout, fonts, navigation, and so on when doing similar things.   Being consistent in where you place navigation, help resources, and instructions helps learners spend more time learning rather than looking for where to find information. In this example, the designers consistently inserted the title and resources at the top, information to be learned in the middle, and navigation at the bottom. They also maintained similar fonts and text sizes for distinct types of information presented. Did you notice the other principle they applied?

Proximity Proximity refers to the spatial distance between items. Things in close proximity to one another are often grouped together by your brain without the need for explanation.   Proximity can be used in a variety of ways to make associations among content more natural. In this example, the designer ensured all the items related to each experiment were grouped with one another to make it more intuitive for students to use the right tools for each experiment.

How Would You Improve this Module? Using the principles of repetition and proximity, how might you improve the design of this online module?   View the next slide to compare your ideas with another designer.

Designer Commentary “Proximity could be improved by placing the text closer to the graphics and putting the ‘Now you try it’ button directly beneath it to help participants realize that the activity and definition go together.   I could only see one issue with repetition, as the buttons participants click on have a distinct style and the ‘Now you try it’ button had a different style. Once this style is updated, everything should be consistent.”

Summary The principles of contrast, alignment, repetition, and proximity can be applied in an infinite variety of ways. Next time you experience great training or explore an interesting website, look for how the designers applied the principles. Try to think of ways you might improve on their materials. As you do so, you will find that your own designs will improve.   Reference Williams, R. (2008). The non-designer’s design book (3rd ed.). Berkeley, CA: Peachpit Press.