We’ve likely all seen examples of websites that could hang in a museum, as visually appealing as they are. Such feats of graphic strength amaze both users and other webdesigners, who may wish to imitate or pay homage to what they see.
But, at least in my experience as a designer, it IS possible to go overboard with the “visual art” part of the design, and forget all about what those graphics are supposed to do–frame the website’s content. In a way, we webdesigners are creating usable art, with heavy emphasis on the “usable.”
Today’s post focuses primarily on designing around text, images, and social connectivity, as these are the three major types of content on the Web these days. Each type of content must be handled differently, as you’ll see below!
Designing for a Text-Heavy Site
For a site with lots of text (ahem, this blog and others like it), you want to make sure your header, footer, and sidebar are as unobtrusive as possible, while still making your site easy to navigate. Having a fairly thin header, possibly with across-the-top navigation included, and well-organized but uncrowded sidebar and footer is a good idea–it keeps the rest of the site simple while letting the text content shine.
This design on GeekyPosh does a great job of combining the header and navigation into one seamless whole, making the latest post visible without the user having to scroll down at all. The blue ribbon running across the page neatly divides “content” from navigation, without making it look blocky. Additionally, the background texture is also subtle enough to lie behind the text without any visual confusion.
While the header image on Jenn.nu is larger, the thin strip of navigation below the header makes up for it–combining not only navigation but social media links into one easy-to-read, accessible “bar” below the image. In this case, the large header image does not detract from the site’s purpose, as it’s still easy to scroll down a little and begin reading.
When designing for text-heavy sites, you also want to make sure your text and background colors contrast strongly (like white and black) so that your text is easy to read. (Nothing’s worse, for instance, than having to squint at the text or highlight it just because the designer thought taupe text on a tan background looked good.) Both GeekyPosh and Jenn.nu do a great job of making their text colors highly readable against their background colors.
Designing for an Image-Heavy Site
A site with mainly images as its content needs plenty of visual space around each image–maybe not a full page of space, but a good amount of space so that separate images don’t run together.
Hark! A Vagrant, with its emphasis on visual webcomics, uses both plenty of white space in its layout, and a few samples of the artist’s embellishment on its navigation links. The white space makes it easy to take in each individual comic; the navigation images give the site its own personal, memorable stamp.
Alternatively, image-heavy sites can make the sidebar and footer utterly unnecessary, and combine header and navigation into one bar, a la Pinterest. This kind of site also benefits most from neutral site colors that don’t take attention away from the images themselves–hence, Pinterest’s beige/gray/occasional pinkish-red color scheme.
Designing for Social Connections/Conversations
Since social connections and conversations are part of many sites these days, we all want to make it easy for our users to connect with us and our sites.
The best thing we can do? Make our comment forms, tagboards, social media links, guestbooks, etc. very easy to find. We need to feature any important conversation links or social media buttons at the top of the page or as close to the top as possible. (Alternatively, we can put such links on a scrolling sidebar/header bar that makes it clear how to connect and converse with the site owner and other users.)
Whimsical.nu’s comment form gets it very right–a big, easy-to-read form that doesn’t force all the text to be 8pt tall and squished together. (A personal pet peeve of mine is too-tiny text in a form space–you end up unable to read what you’ve typed in!) Plus, the visual space is used well, and the form is actually designed to blend in with the site instead of looking like a cookie-cutter afterthought.
Upon hovering over links on PopURLs, not only does a content preview show up, but you also get a little box out to the left or right of each link that reads “Share | Clip.” You can then choose either of those options easily with just a move of your mouse (or a tap of your finger). This makes it so much easier to spread the site’s content across the Web, and interact with other users who have shared or clipped the particular item of content as well.
Summary
Beautiful, visually attractive designs are wonderful–but what’s even more beautiful to the user is a well-designed and usable site. Taking into account readability, page organization, and convenience for the user is perhaps the most important part of designing a page; our designs should frame the content rather than overpower it.