Creative Layouts and Interactions in Web Design

You see them almost every day – websites that make you say “I wish I had thought of that!” Designers are doing a great job coming up with and putting together a variety of highly-designed websites that feel fresh and original while maintaining usability.

Odd shapes, color combinations and new navigation tools can make some of the most interesting and engaging websites.

They can also be quite difficult to imagine and execute.

But you never know what might start a new trend, generate a ton of clicks or just “work” in a way you could not imagine. For designers and developers, the most important thing to remember is that web design must be usable to be effective, no matter how great it looks. By combining creative thought in the design process and careful analysis of key features, great and new site concepts are going live every day.

Think Outside the Box

The first question is why?

Why do we always draw rectangular boxes when sketching out websites? Why is the type “always” a certain color or font? Why are photos of the same perfect 4×6 aspect ratio?

The next question is how can we do it differently?

More and more websites are answering that second question with interesting and creative layout choices, from using rounded shapes, to dramatic photography, to colors that might not seem obvious to new ways to navigate and scroll.

Basic Concepts

What’s key when developing new concepts that really break the mold is to remember the basics. No matter how cool a site looks it must be readable and usable. Otherwise people won’t move through the site and interact with content.

When designing, always remember to think about your audience and how they think … and use the web. If your audience is super-tech savvy, navigation or scroll features that work a little unconventionally may impress. But if your audience is made of computer novices, you should probably stick to common navigational tools.

Your visitors came to your site for a reason. That reason needs to be apparent when they get to the site. Make sure your design communicates what your site is supposed to be used for – information, fun, e-commerce, etc.

Don’t try to do too much. Pick an interesting concept and go with it, but don’t try too many things at once. Remember, users won’t stick around if there are too many things happening on your site. Find one fun and unique way to interact with them.

5 Sites Putting it All Together

So what makes it all work together? A great combination of creativity, readability and usability. We look at a few sites doing things that are new, unexpected and quite brilliant.

Lowdi does a great job creating visual interest with shapes that are outside of the norm. Not only does each box have some type of rounded corners (or inversely rounded corners) the colored frames resemble the shape of the product the company is selling. Even when you are not looking at the Lowdi box on the screen, you are reminded of it. With a scroll, the box (which is a speaker system) “talks” to you using a series of pop-up thought bubbles. The concept is fun, fresh and super-engaging.

Steve Vorass is taking advantage of the “hidden navigation” trend with a site that showcases a variety of his projects. The portfolio site uses a simple Work, Profile, Contact navigation at the top of the screen but the images are also nav tools. Each different type of image takes you to a different project. What’s more important is that each image tells you where a click will take you when you hover over it. The overall site design has a simple look and the unexpected animations mirror that as well.

Caava Design is both striking in image selection and with interesting shapes but what’s more creative is the scroll. The entire site is built in the form of a timeline. Each image “bubble” takes you to another level of information. What makes it special is you don’t even have to see the timeline to navigate and understand the site. It is perfectly organized and functional.

Joint labels itself as a creative design business. And its site exemplifies that. Each page give you clickable choices to navigate. The scheme is simple, using just grays and whites (except for the blogroll which includes color photos) but the hover effects and readability are fantastic. It makes you want to keep clicking as you choose how to look at the site.

Ballantyne uses a combination of great photography, interesting shapes and cool scroll effects to keep you engaged. The fashion retailer’s site showcases a great selection of products while providing interesting company facts and information. Each scroll works by moving the three photo panels up and down to show new images. The scroll lasts for quite a few screens and you can’t help keep looking at what comes next. Plus, the cool slanted-edge shapes make the flow even more seamless and interesting.

Conclusion

For years, I have heard designers say “there are no more original ideas.” That is just crazy. Every day, new technology and new devices are changing the way we think about web design and the design process. Brainstorm to get outside your comfort zone and then bring your concept back to reality by making sure it contains all the features that will make it usable.

And remember, some “crazy” concepts might fail. That’s OK too. Analyze, learn and move on to the next great idea.