It’s no small secret that when it comes to UI layout in web design, a lot of people become stumped in one of several ways. Often, people will try too hard to be original and unique, resulting in excessive overdesign and unnecessary elaboration. Another problem is that people will try too hard to mimic the design trends around them, and miss the points that best need duplicated, and accidentally clone too much company or thematic identity from others, which isn’t the target asset to duplicate.
Consulting a professional web designer who will work with your picky and often uncertain UI layout desires will be pricey, and your own design team may not be too excited about working with an outsider with this. Well, since this is a problem, why not talk about a few popular and common UI conventions that people tend to use most? We’re looking at basic layout, not aesthetic or theme here, so don’t expect too much of an artistic take on this. It is better this way, trust me. Now, before we continue, you will note that a common theme below with these is the desire and necessity to keep it simple while retaining functionality.
#1 – The Three Boxes
This is probably the most popular trope for blogs, galleries and other content output templates. It’s used on Joomla, Squidoo, Tumblr, WordPress and a lot of proprietary shopping and service sites. It can be implemented in a number of ways, though the most common sees basic navigation and titles on the left and right header space, and a large double wide box above two evenly-split boxes below. It’s often implemented with the larger box being primary content or features, and the smaller being utilitarian or following listings. This layout can be implemented in a number of variations, with a large left or right frame and a smaller split frame opposite, or with the classic layout reversed, the larger box to the bottom. This one is easy to implement, but you may have a hard time deciding what to do with this largely-divided a space, depending on your needs.
#2 – 3D Screenshots
Looking for a little more flair and futurism with your design? 3D screenshot systems are a popular trend, though they’re obviously a bit more involved to implement and work with. Unlike the three box grid, this one involves a lot of AJAX or Flash design, but there exist a significant number of boxed kits available, many for free, that make setting this up a lot easier. This is mainly useful for sites with a lot of either listings with thumbnails, or a lot of visual data to present. That means almost everyone these days, though. The only caveat with this is that mobile devices are less capable with this than PCs at the moment, so be wary of that.
#3 – Advanced Grid
Finally, we have a more sophisticated take on the three boxes. This uses the similar navigational and header section above the large double wide box for featured content. Below this, though, is an ongoing, repeated grid (often with infinite scrolling or a gallery segmentation system). This grid is usually preceded by a header, and involves a left or right hand column of slightly larger boxes, and before or after it, two smaller boxes. This is another popular one for frequent output sites like blogs, social networks and software providers, but can work for anyone who has frequent, dynamic web content to put out. It’s popular on WordPress and Tumblr, and I see it used increasingly often on video sites as well.
These are only three of the popular UI layout concepts out there, and there’s an infinite number of options to choose from or build upon. I may talk about more, and get into specific fields and example implementations of UI layouts in the future, if you, the noble reader, enjoys and finds this useful.