Design Critique: Theory


Out of all the current trends in website design, my current favorite is the horizontal bar design. The basic idea is that you stack dynamic-width Divs one on top of another in different colors and/or textures to differentiate portions and/or “pages” of the site.

Check out Theory’s website:

Design Critique: Theory

Design Trends Used

Theory employs several design trends in the creation of their site: the top bar “sticks” to the top of the page as you scroll down; the page is made up of horizontal bars of texture/color; large buttons; large fonts; and a one-page website, to name a few. I’m going to discuss a few of these and how they used them well.

Floating Navigation

Floating navigation has been gaining popularity in business websites. Most general people find this phenomenon “cool”. In fact, I recently had a client ask me for this at the top of their site. The problem? Their site was only about one screen page long. Not effective. Once the site was created, they realized that adding in that functionality would be a waste of their money because no one would have ever noticed it.  That’s the thing with website trends: they’re so awesome to see implemented well, but just because they look great on another website, doesn’t mean they’ll transfer to yours.

So how do you know? If it adds value to the user. Specifically for this trend, if the page is vertically long, you can consider adding floating navigation. The users then have a very easy way to navigate without scrolling back to the top. Just as a side note, Theory also added a fade-in “back to the top” arrow on the right as you start scrolling. This gives the users three ways to navigate: the scroll bar, the links, and the arrow to the top.

Large Fonts

Not all websites have pictures to grab the attention of users, and not all website owners want to use stock images. It can be highly effective to use large type to grab attention. And, as an added bonus, you can also communicate what the site is about far easier. On Theory’s site, within three short lines, they communicate that this is a company that develops custom ui/ux (user interface / user experience) for innovators. Go ahead, try to find an image to illustrate that concept! And even though they use small “hand-drawn” sketches to different sections of the site, the majority is centered around typeface.

Horizontal Bars of Texture/Color

If you haven’t designed a site using this technique, I highly recommend it. It’s just fun creating sites this way – and quite easy. A few things I’ve learned:

  1. Use texture or gradient, but usually texture. Be careful your texture is either completely repetitive or ends within the “wrap” you’ll add around the actual page content. If it isn’t, you could get weird lines where the texture repeats.
  2. Don’t be afraid to use dividing lines, especially if the two colors are similar. Usually grey is employed here, which means if the horizontal bar isn’t grey, you add in a dividing line.
  3. Items within a horizontal bar should relate. Those aren’t just for decoration you know; they help the user navigate the information being presented.
  4. Don’t try to crowd in too much in a horizontal bar. Let it breath!

Design Critique: Theory