Website Advice from Rhianna Weilert (Design ’08)

website formats

Websites, Part One: Website Formats

Having a website has become a potentially frustrating standard for artists and designers in the 21st century.
Can I get by without one? Do I build one myself? How often does it need to be updated? Is it expensive? What the hell is CSS?

The necessity of a website is probably in the eye of the beholder, but in my opinion, it’s all but mandatory. Why? It’s a permanent gallery for people to find out more about you and hopefully see a curated collection of your work, be it visual or written.

So it seems reasonable to assume that step one of getting a professional website together is to figure out what format you want to publish in.

Most website formats, though constantly in flux, can be broken down into an organized list of designs probably stemming from current trends and technology capabilities.

Each website typically contains a logo, a navigation menu (either vertical or horizontal), and then the page content (consisting of images, text, and hyperlinks). But the grid that contains this content can vary greatly. Each format has benefits and downfalls. So what is best for small businesses, artists, photographers, writers, you?

center-column

The Center Column

This design provides a vertical frame with content centered in the middle of the browser. The navigation is typically horizontal across the top. It is best for a site with a limited amount of pages. Small businesses flourish in this grid because it lends itself to easy navigation with simple content that consists of images and text. It loads quickly with a pre-determined amount of content per page and works with all kinds of users, even those on a phone. It may not be best for a site that is primarily image-based, but overall, it’s a pretty traditional design that has stood the test of time.

Examples:
Column Five Media (http://www.columnfivemedia.com/)
Digital Podge (http://www.digitalpodge.co.uk/2009/)

sidebar
The Sidebar

In this case, the navigation becomes key because you’ve got one thin column down the side (usually the left) that holds the logo and navigation menu and the rest is open for page content. This format works well for computers rather than phones because the screens are almost always a horizontal format. It’s become a popular format for visual portfolios, perhaps because the wide open space is great for image-based content.

Examples:
The Hungry Workshop (http://www.thehungryworkshop.com.au/)
Brooke Vandever Photography (http://www.brookevandever.com/)

full-frame
The Full Frame

This layout has the wow-factor. It’s basically one giant image filling the entire screen with a menu tucked in somewhere along the edge. Navigation and written content play a minor role so it’s best for content that can be appreciated by wandering through a slideshow of images. It’s perfect for websites that are mostly image-based (ahem, artists) but make sure you’ve got flawless images.

Examples:
Oyyo (http://www.oyyo.se/)
Twenty8Twelve (http://www.twenty8twelve.com/)

blog

The Blog

Tumblr, Blogger, WordPress. The page is a basically list of “posts,” starting with the most recent at the top. It’s become quite common for nearly everyone to have a blog attached to their regular website.  This format works best when content is being added regularly (read: daily!) and the most important content to see is what is most recent. What really doesn’t work well in this format are images with little text unless your images really need to be organized by the date they were published. Beware: if you don’t have a significant amount of time to post regularly, your blog will look forgotten with a posts at the top that dates back to last year.

Examples:
Apartment Therapy (http://www.apartmenttherapy.com/)
Man Repeller (http://www.manrepeller.com/)

long-scroll
The Long Scroll

This format is a fairly new addition to the web world that came about with experimentation in HTML5 (but you certainly don’t need to use HTML5 to make this format work). Think of the categories of content as rows, stacked one on top of the other, all on one page. Users can either scroll down and discover the rows of content or often times the website will have what’s called “anchor links” that take you to the correlating spot on the page when you click the link. The major benefit is that all your content loads at once and you avoid users having to jump from one page to the next, which is perfect for phone users. It’s a nice way to abbreviate information but in-depth content feels overwhelming.

Examples:
Caava Design (http://www.caavadesign.com/)
Turner Classic Movies – Summer (http://www.tcm.com/summer/)

image-grid
The Image Grid

Popularized by the website Pinterest, this layout is a great way to cram in a lot of image-dominate content in a playful manner. I imagine the original inspiration for this grid was a physical pin board which lends itself to seeing a bunch of stuff all at once. The images either vary in size or are all the same height and width. It’s a great way for users to get a quick look at a lot of visual content that can be expanded by clicking a particular image if desired. Many online stores have this kind of layout. Watch out for consistent content. If there’s no unifying thread, the page might feel too chaotic.

Examples:
Swinton (http://www.swinton.co/)
Pinterest (http://www.pinterest.com/)

newspaper
The Newspaper

This format works well with a website that is constantly getting new content that needs to be featured or categorized, like news articles. Formats usually resemble ye olde newspapers of yesteryear: small photos with short descriptions or a brief title, prompting you to follow the thread to more in-depth content. This would be a nice website for a writer.

Examples:
USA Today (http://www.usatoday.com/)
New York Times (http://www.nytimes.com/)

Want more? Visit siteInspire (http://www.siteinspire.com/) for an endless amount of website ideas, beautifully organized.

Advertisements
Tagged , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: