We shouldn’t judge a book by its cover, but we do. We also judge websites by their layout, tools, media, and creative design, and unlike books, we should judge a website by its appearance. A poorly designed website suggests that the owner does not put careful thought into constructing the content.
Educators want the best sites to share with students, so here’s five great examples with excellent design followed by five design fails:
Five Great Examples of Good Design:
The National Gallery of Art’s Kids Art Zone is visually appealing and offers many enticing, interactive activities for students. Below the banner, the NGAkids Art Zone lists its resources, each with an eye-catching picture; short, descriptive title; and summery.
The homepage of the Poetry Foundation’s strength is its organization. Featured prominently is a poet’s portrait with a link to an interview, and below are links to articles, their blog, audio resources, and poems from the print magazine. The right side bar invites students to browse, and the drop-down tool bar at the top provides easy navigation.
Strong contrasting colors and the geometric format make Graphing Stories a great example of an instructional website that does one thing very well: offer visual “word problems” for teachers and students. A tool bar at the top allows users to locate resources, and the top left sticky note square tells students and teachers exactly how to use the website.
Make Belief Comix homepage uses animation to appeal to students. Characters pop up inside their comic strip and welcome users to the site. A floating bird-man offers a visual demo. The best part is that it also welcomes users in Spanish.
Wonderopolis already lures browsers to explore the website because the central message is wonder. A picture accompanying the day’s wonder-based question dominates the home screen, but contrasting arrows offer the previous days wonders, too. The left side bar provides easy navigation.
These are great websites to emulate when building an online course or website, but it is also important to see some design fails.
Five examples of websites with design errors:
Fun Brain may offer useful tools, but the chart’s appearance actually causes some confusion. It’s a neat idea to try to incorporate buttons that link to the games beneath each appropriate grade level, but it doesn’t quite work. The fact that each green “Go” button is also labeled by grade proves this.
Design Tip: If you need to label images inside your chart, your chart isn’t effectively displaying information, so choose another strategy.
This is another example that might have valuable resources, but the purple background makes it nearly impossible to read the hyperlink to the game. Also, it is unclear whether “Play on iPad/iPhone” refers to the game above or below.
Design Tip: Consider how links will appear on backgrounds. Choose contrasting colors.
This is a good list of resources, and it is well organized unlike the previous two examples; however, it needs to be more visually appealing. This website http://www.ixl.com/ela/ manages to perform the same function. The colors and font make it more visually appealing, even without screenshots. Also, the tabs on the left resemble binder tabs, which reinforces the message that this site is an index of tools.
Design Tip: If you aren’t going to include screenshots of content, then use color and fonts to make your website visually appealing. Consider a unifying motif, too.
Although this site uses animation, friendly pictures, and contrasting colors, it looks like it was made in the 90s, which makes me wonder if the content is updated at all.
Design Tip: Stay in touch with how most websites appear on the web, and copy some of the same designs you like.
This site’s design flaw is sending a mixed message. The chess board suggests that the site primarily offers intellectually stimulating games and strategic thinking, but the games listed seem to target a much younger audience. The mistake is that the site’s creator doesn’t seem to know his/her target audience.
Design Tip: Make the visuals match and reinforce the message.