How to Effectively Use a Unique Website Layout

Last week I published a gallery of 20 Websites With Unique Layouts, which got a mixed response. The post did very well with social media and most of the comments were positive, but some readers didn’t like a few of the sites that were featured or they simply pointed out that particular sites were not user-friendly. I wasn’t at all surprised by this response, primarily because it is true. Several of the sites in that were included feature a unique layout, but some of the qualities that make the layout unique also make the site difficult to use.

As I mentioned in the comments of that post, the goal of the gallery was simply for inspiration. I’m glad that readers appreciate the need for usability and that they place that need above the importance of a design that will wow visitors. With that in mind, I thought it would be beneficial to take a look at the challenge of implementing a creative design while still maintaining a website that functions in a user-friendly manner.

Why Use A Unique Layout?

Most of the websites included in the gallery clearly set out to create something unique rather than simply use a fairly standard and safe design. I think anytime something unique is created there are going to be those that like it and those that don’t. I doubt the goal of most of these sites was to appeal to everyone that visited. In some cases, the unique layout and design is excellent for branding, and that is probably one of the main benefits of the design. Visitors arrive, see something different than every other website they’ve been on that day, and hopefully they’ll remember it.

Potential Problems of a Creative Design

1. Usability:

Although a unique website can help for branding purposes, it may also cause some problems for visitors. As Eric commented:

“I enjoy looking at sites that break away from the norm. They really work well for certain purposes. As a portfolio or gallery, they’re great. However, if you’re looking for a way to display information… simple is good. In my opinion, a website should showcase its design OR its information. Both is simply too distracting.”

Eric hit the nail on the head with this comment. Trying to create a standout design while still emphasizing content is nearly impossible. In this case the design will overpower the content and the visitor won’t be able to focus on the content, which is the main reason that 99% of blogs use a standard layout. This allows the content to control the readers’ attention, which is the goal of most blogs.


Other usability issues were brought up in this comment by LGR,

“I stopped looking at the sites when they started to resize my browser, use flash only and eventually crash my entire browser. Beside the fact that the sites “look cool” what criteria did you use to pick them? Certainly websites that are resizing browsers, using only flash and eventually crashing browsers are not very user friendly.”

While I was browsing these sites I didn’t experience any of these problems, but if I would have my reaction would have been the same, to leave the site. Obviously, the negative impact of these issues would be far stronger than any positive impacts that a unique design would create.

I’d like to take a look at two sites mentioned in the gallery that I find to be very usable. First, Digitalmash is the home of web designer Rob Morris. What makes Digitalmash’s appearance stand out is the background image of Rob. He’s holding a page that contains all of the information on the website, and his head is poking out from behind it. When I visited the site for the first time it stood out to me right away, and I’m sure that’s the effect that it has on most visitors.

Digitalmash Screenshot

The home page includes an “about” section that gives all of Rob’s biographical information, which is certainly something that potential clients will want to see. The primary navigation is at the top of the content and includes links to the homepage, a portfolio, and a contact page. The site is easy to navigate (partly because there are not a lot of pages) and users should have no difficulty finding what they are looking for.

In the case of Digitalmash, a background image is used to interact with the content of the site to create something interesting. By standing out in this way Rob is able to get the positive results of a unique website without the usability struggles.

The second site that I found to be particularly usable is Basil Gloo. Basil is a graphic designer and web developer that uses the left side of his site for personal information and the right side for business. Aside from the blog it is really a one-page website that provides links to his networks and companies that he has founded. Although the site uses a unique layout and design, there is nothing to create usability issues for visitors.

Looking at these two websites enforces the point that Eric made in his comment. Neither of these sites features a lot of content. Both primarily serve to provide some useful links and contact information. For a site like this, a unique layout can be more effective because it can still be easily used by visitors.

2. Navigation

One problem that I had with some of these sites is that I had to work too hard to find out where I was supposed to go. Navigation should not be difficult for visitors (and really it falls into the category of usability, but I thought it deserved a little more attention). If you hope to drive visitors to certain pages or sections of your website you should lead visitors to those pages by making links easy to find.

One potential pitfall of using a creative layout is that most visitors have probably become accustomed to finding navigation menus in certain locations. In this situation, visitors may be forced to work a little bit harder if your primary navigation is not obvious.

If you are aiming to stand out with your design, make an effort to allow visitors to easily distinguish your navigation. I feel that Popmatik (below) does a good job of this. The layout is unique, but the navigation stands out right away.

Popmatik screenshot

3. Page Load Speed and Page Errors

Many of the most creative sites out there use more elements that slow down load times than a typical website would use. Large background images were common in the gallery that I put together. Other sites use a good bit of Flash or JavaScript. For visitors that have slower internet connections this can be a major hindrance.

As LGR mentioned in the comment that was quoted earlier, some of the sites had major negative effects, even to the point that it caused problems with his browser. If you are requiring visitors to use a particular browser or to have something specific installed, it will obviously cause a real problem for some visitors.

4. The Design Overpowers the Content

By using too much creativity in a design you certainly run the risk of distracting visitors from your primary purpose. Any website that emphasizes content will not want to use a design that steals the attention of readers. If you want visitors to focus on content, use a design that complements and emphasizes the content, rather than a design that competes with it.

Keys to Consider for Using a Unique Design Effectively

- Never let a design take priority over effectively meeting the needs of the user. When building a website, serving the users and providing a pleasant experience on the site should come first. If a particular design or style will get in the way of meeting the needs of your visitors you will be better off using a different design.

- Always consider why the site exists. The process of designing a website can be exciting, but don’t lose focus of the goals and objectives of your website. Most likely your primary reasons for maintaining the site do not include having the coolest design around. Use a design that will help you to achieve your goals, not one that will hurt your chances of success. If a creative layout and design will help you to brand yourself and ultimately help you to achieve your goals, then go for it.

- Take into consideration what your visitors will expect from your website. There were a few websites in the gallery that are portfolios of photographers. Visitors of a photographer’s website may very well be interested in seeing creativity in the site. The uniqueness of the website may help them to appreciate the talents of the photographer in his/her work. Depending on what industry you are in, your visitors may have some preconceived ideas about what your website should be like.

- Will the site appeal to its target audience? While it may be tempting to design a site that you personally feel good about, what really matters is the opinion of those who you are targeting. If your target market will favor creativity and bells and whistles, you will probably want to make an effort to stand out with some of these elements. If your target market is more likely to appreciate a minimalistic design that features content and ease-of-use, that’s the direction that you should go.

- Don’t forget accessibility. A great-looking website does no good if it can’t be used. Accessibility can be an issue depending on how you aim to make your website standout. Achieving 100% accessibility may or may not be one of your goals. If it’s not, you’ll need to realize that you will be losing some visitors and willing to take that loss.

What’s Your Opinion?

Many of you provided great feedback on the original article and I want to thank you for that participation. Without that feedback this post would never have been written. What would you add to the points discussed here? Are there items that you disagree with? Feel free to share your personal experiences with your own website or as a visitor on other sites.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

21 Responses

Comments are now closed on this post.

  • Mark from MyTropicalEscape, January 10, 2008

    Hi Steve,

    I am in the middle of a complete site redesign and I would like to know how I can mix a very simplistic design/concept with a unique layout?

    Mark

  • Vandelay Design, January 10, 2008

    Hi Mark,
    If you are taking about a design for your blog, the first thing I would say is to make sure that whatever you do, the content is easily readable and gets enough attention. Blogs are pretty difficult to experiment with because you have the standard sidebar elements and it might not function very well without that. I think a lot of the designs that were in the gallery made great use of background images. That’s one option for making your site stand out more. As long as the image doesn’t interfere with the primary content you can still have both.

    I tend to design more simplistically than some designers, so I don’t have much experience with blending the two styles. I would advise you to browse through some website/CSS galleries (just do a google search and you’ll find plenty). Some of the designs you see may be good for inspiration.

    When thinking of a layout that you would like to use for your blog, take into consideration all of the elements that need to be present and think about what you may be able to eliminate, or at least move to somewhere that is not prominent on the page. Many of the common blog sidebar elements could be utilized in different ways than just strictly being in the sidebar. But you’ll want to make sure that any design you use will prominently feature the most important elements.

  • Mark from MyTropicalEscape, January 10, 2008

    Hi Steve,

    Indeed, I am talking about a new design for my blog!

    The other day when I published the article, “How Top Bloggers Divide Their Time For Maximum Exposure” I realized the RSS button was only on the index page and the links that I created were not formatting correctly…

    Hence – the need for a new design

  • Vandelay Design, January 10, 2008

    Mark,
    One thing you could probably do to give your blog a nice, distinct look is use a powerful header image. Since the blog is titled MyTropicalEscape I’m sure it would help for branding purposes if you had a nice tropical photograph. I’m thinking a larger, powerful image like the style that http://natewhitehill.com uses. I believe Nate offers header image design through Unique Blog Designs, or I’m sure you could find a good graphic designer somewhere else.

  • tyropearl, January 10, 2008

    I also found some of those designs were too overwhelming and I had no idea what to click, where to find what! navigation definitely has to be clear, too many colors also didn’t look appealing on some…. Digital Mash was definitely very enjoyable..

  • Vandelay Design, January 10, 2008

    Pearl,
    Thanks for your feedback. I agree about the colors, sometimes it can be overwhelming.

  • Wayne Liew, January 11, 2008

    One look at this post, usability seems to be the core of all web site designs and it should be.

    I would agree with you in all the points written. Anyway, there are still sites out there with great designs but for the wrong purpose. They somehow get links, always, for the great design they have but not (for example they are a informational blog) for the information they provide.

    This can be good in terms of link building but it didn’t serve the purpose of the site.

    I also thinks that site load is a major problem, especially in capturing first time readers for such sites if they are targeting worldwide users. New readers don’t wait for long for a site to load and they might not return again because they never knew there was a great design behind the long site load time.

  • Matthew Griffin, January 11, 2008

    Great article, Steven. I think you are taking a very well-balanced approach to the issue of usability. If it weren’t for creative pioneers such as the ones you mentioned, the web would be pretty boring. Let’s not forget that at one time, right-column navigation was frowned upon by the usability experts and now it’s one of the most common blog layouts. If someone is that annoyed by something that’s a little different, maybe they should avoid articles with titles like “20 Websites with Unique Layouts”.

  • sir jorge, January 11, 2008

    as a designer it definitely is not the easiest thing to get usability and unique design, but if you can connect the two into a solid package, you’re a master

  • MarketingDeviant, January 12, 2008

    I think being simple is easier for visitors. If I’m confused at something, I know others are as well!

  • Little Guy Network Review, January 14, 2008

    Some very interesting designs, i think most intuitive navigation for surfers gonna be best one, people always look first on top or left for menu and thats i tihnk where should be menu cause some people may be confused if its some unstandard position, not all people are so savvy

  • Dave Walker, January 14, 2008

    The use of the term ‘simplistic’ worries me a little in the first couple of posts. I’ve always equated ‘simplistic’ with a lazy or untalented designer trying to pull off a Dieter Rams design. I’ve had so many students try to describe their designs as ‘simple’ or ‘clean’, I banned the term in the classroom.

    To me, ‘simple’ and ‘simplistic’ are two very different terms. ‘Simple’ is phenominally hard to achieve, ‘simplistic’ is a crude imitation of ‘simple’ without the craftmanship or understanding of design. ‘Simple’ is seen as easy to do because the end result is so perfect. Imitators end up with ‘simplistic’.

    Things that are simple:
    Apple’s 1st gen iPod Shuffle – unbelievably tactile
    Paul Renner’s Futura typeface – many imitators, no competitors
    Anything designed by Dieter Rams

    Mark – shoot for simple.

    /rant

  • Vandelay Design, January 14, 2008

    Dave,
    Thanks for your feedback. I see your point, but I don’t really see a big difference in the terms simple and simplistic. I know what you mean, there is a big difference between a very well-designed minimalistic site and a site that just has nothing to it.

  • Dave Walker, January 15, 2008

    I will disagree without trying to sound too pedantic.

    Simplistic infers a lack of understanding of nuances and complexities of design: typography, colour, proportion, etc.

    Simple takes the complexities of design and uses them to present an idea in the clearest way possible – in a way that seems so obvious, so perfect it’s hard to present it any other way.

    I hate to do it, but here’s some definitions from dictionary.com:

    Simplistic (adj): The tendency to oversimplify an issue or a problem by ignoring complexities or complications; characterized by extreme simplism; oversimplified: a simplistic notion of good and bad

    Sorry – after 5 years of teaching design and hearing students describe their designs as “simple and clean” when it’s just Arial centered on a white background, I get a bit passionate about this.

    I think that simple is so hard to achieve, most designers give up at the simplistic stage and don’t continue to refine the design to make it simple. It’s easier to add ornamentation to cover up a bad idea than to distill the idea and make the communication simple.

  • Vandelay Design, January 15, 2008

    Dave,
    You’re free to state your thoughts and back them up, I appreciate the feedback. I agree with your points I’m just not really concerned with dictionary definitions. Like I said earlier, I know what you mean and I do see a big difference between the two types of design you’re talking about (one good, one not), I just don’t really get that concerned with how it’s worded. Obviously the distinction is something that you are passionate about, and that’s fine. If I taught students and went through the same experiences as you, maybe I would care more about the wording.

  • Heartburn Home Remedy, April 15, 2009

    This topic is quite hot in the net at the moment. What do you pay attention to when choosing what to write ?