Creative Layouts and Interactions in Web Design

Creative design that differ from the usual layouts can be quite difficult to imagine and execute but when done well, they can make some of the most interesting and engaging websites.

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

abm

merc

kikk

goatee

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

lowdi2

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

steve2

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

caava2

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

joint2

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

ballantyne2

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.

Tagged with:

Carrie Cousins

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 13

Comments are closed.
  1. “there are no more original ideas.” – you’d have to be an incredible cynic and non-creative “designer” to find yourself saying that.

    Good read.

  2. You’re absolutely right! It’s very common hearing people saying that we can’t create anything new. I guess you could argue that an old idea “recycled” by new technology is still old/new (regarding which side you are on). Rules and standards are great to help people create good designs. But sticking to it in any case and refusing new ideas “because it’s not common in the industry” is the downside of it. I wish more companies were innovative…

    Great article! I’m thinking about asking my team to read it before wireframing sessions.

  3. Some really interesting examples. The Ballantyne site fails its mission in my eyes. “Normal” visitors will probably think that it looks cool, but they will not be able to take in the information because they are overwhelmed.

  4. Great article! I’m thinking about asking my team to read it before wireframing sessions.