Determining a Quality Website
When you’re browsing the web, visiting various websites, pages, and links, most of us can generally tell which websites are better than most. However, have you ever really thought about what makes a website good? Have you considered all that goes into making this site from a designer’s perspective? A lot of hard work must be done to the site just so it can stick out from dozens of other sites.
Typically, font, color, navigation, layout, and images are the main considerations for making a high quality website. Each one is important for the usability of the website, as well as its accessibility for a wide audience.
Font
Font concerns the all the type elements we see on a website/page. Though it’s been debated over and over, most would agree that sans serif fonts are more readable on the web format, and are indeed recommended. Typically, font should stand out, be well contrasted against the elements in its proximity, and large enough to read.
Navigation
A website should be reasonably navigable. The user should always be able to find their way around the site, especially if they want to go back to the home page. Oftentimes, “bread crumbs” are used on a site to show a user exactly what path of clicks/links they took to get somewhere on a site.
Layout
Layout is what makes a website, well, make sense. Websites should typically follow an “F” or “Z” pattern, meaning that the path that the user’s eye takes from element forms one of these letters, in a descending path. The most important elements are to be at the top, while secondary info/content is lower.
Images
Finally, use of images is always important when making a website. Designers always should use the highest quality images they can, as sharp, clear pictures can really catch the user’s attention and lead them to the main content of the site.
So, now that you understand a little bit about what elements must be considered for web design, we’ll take a look at two websites and compare and contrast their use of these elements.
Commonhealth.va.gov.
The website for promoting health in the workplace in the state of Virginia is underwhelming, to the say the least. At first glance, the site looks dated, imagery is clunky and misplaced, and design elements in general just don’t impress. Primarily, the font lacks contrast against the top header (light blue in color), and could be challenging for some to read. The main links are also in a small size font. Now, the font isn’t the only area where the colors of the website are weak. Throughout the site, as you navigate to other pages, the colors tend to stay the same. This would be good for consistency, but some pages could use brighter colors or graphical elements to say “hey, look at me!”
I will say that the navigation for this site is okay. The top headings and dropdown menus follow a good, definitive pattern, so users can always locate the most crucial content. Moreover, the masthead of the site is bold and always takes you back to the home page. The area where navigation suffers is at the bottom of the home page, where you have things like “Fitness Discounts” and “Wellness Champs” in ugly blue boxes. This information is made very large on the site, perhaps to indicate its importance, yet you have to scroll down to the bottom in order to find it. This should be clarified or changed. The layout for this website isn’t bad either, as it follows your typical “F” pattern of information hierarchy. It sort of ties into that same problem of navigation, though, where it seems some important info is in a place where it should not be, at the bottom.
Lastly, images were the weakest part of this website. Even on the home page, the main attention grabber, the images look like they were pulled from ClipArt or from the very first Google image source. They aren’t interesting at all and certainly don’t excite the user for other parts of the site. The icons used for some webpages were a good idea, but don’t follow a great pattern. For example, in the communications page, there are icons at the bottom. One is a series of photographs taken in real life, the others are two very minimalist icons. I believe that if they followed a pattern, it would better draw attention to this page.
In summary, the commonhealth.gov website could use a lot of work. For a really great initiative, the website lacks the same power of the message they are trying to send. The elements of good web design were not well utilized here.
ChooseMyPlate.gov
The second website I examined was the United State’s Department of Agriculture’s website, for “Choose My Plate”, a website that aims to teach people to think about what they are eating and looking closer at their nutritional habits. I must admit, at the very first glance, the website is very pleasing and colorful. The contrast of the top heading (in white font) against a darker blue color background makes it easy to read. All the font is done in a sans serif font, and bold enough to be readable without overwhelming. The body text under various content headings is a little too small for all audiences to read, but it does also provide an appropriate amount of contrast.
The colors of the website stick to a pretty consistent scheme, which here, works. I know I mentioned this same characteristic for the other site, but in this one, the scheme works because the colors pop. Rather than a consistent gray/white/black scheme, Choose My Plate uses a bright blue, gold, and white-ish/gray scheme that looks much better. Occasionally there are other colors that work on other pages, but the main colors are utilized well.
Navigability and layout are successful as well for this website. The only issue I have with layout is on the home page, where the main links on the top of the website are a little too close to each other. Other than that, the layout is smart, simple, and follows the right pattern for the level of importance of information. Lastly, the images for this website are a great example of what web images are supposed to be like. Most images are high quality, large photographs that bring a human element to the website. You tell me which is better, a picture of produce on a nutrition website, or a bunch of clip art drawings. The placement of images is practical and does not clutter the pages either.
So, when you can weigh each of these elements against each other, it’s easy to see why the Choose My Plate website takes the cake here. There’s a reason designers work so hard to utilize these elements to the best of their ability, it’s to satisfy the needs of their users and convey meaning in a meaningful and pleasing way.
Understanding Web Literacy 