Inspiration
|
May 29, 2015

Examples of unique website layouts

And how to design them to your advantage
It seems like there’s one basic layout used for 90% of the websites out there. You know the one I’m talking about.

The site begins with a photo occupying the entire viewport (bonus points if it’s an overhead shot of a designer’s desk). It’s overlaid with a headline, some teaser copy, and a giant call-to-action button. That’s followed by three text blurbs with Font Awesome icons sitting above the copy. You know the rest of this story.

It’s easy to go with the scroll

Maybe it’s the popularity of web design trend posts. Maybe it’s the constraints of starting with pre-built templates. Maybe it’s designers working under tighter deadlines and smaller budgets.

A lot of it has to do with the fact that vertical scrolling is such a common, intuitive behavior that it's the natural default for website navigation. Sites that follow this formula are seemingly easier to sell to clients and users since they’re comfortable and familiar. If it’s popular, it must work, right?

But every now and then–when the right project comes along–we should think outside the predefined box and start looking at layout concepts from entirely new angles. Doing this consists of re-evaluating your core ideas about the relationship between your content and the viewport.

You’re doing yourself and your clients a huge disservice if you jump straight to the same old formula every time. As designers continue producing variations on the same theme, there’s a huge opportunity to stand out by simply doing something different. But how do you create a unique layout that doesn't frustrate and confuse your readers? That’s the key question.

We're going to examine three sites that gracefully executed on a beautiful, unique layout. These are sites that not only delivered something new, but also made sure their content was accessible and responsive.The huge amount of exposure the designers of these sites generated as a result of this outside-the-box thinking demonstrates that novelty can be a successful means of making your design portfolio stand out. So, if you’re looking to start taking on more and higher-paying design clients, you have one more reason to read this article.

Layout #1: Image-heavy content

Before we explore our first layout example, take a look at IMDB’s current site, which will act as a starting point we’ll reference.

Actual IMDB.com home page

IMDB uses a layout that’s very popular among content-heavy, database-driven sites. Stories with a higher importance get bigger thumbnails, larger headlines, and more detailed excerpts. Further, a sidebar houses content that is of lower priority but still needs to be immediately accessible.

big picture approach

Purely on spec, JP Teixeira created a stunning re-design of IMDB’s homepage. With no client to answer to (and no constraints), JP was able to ask, “What if?”, and let his imagination run wild. Self-assigned projects are truly a great way to learn: They let you pretend you’re back in design school! Some of your work might turn into gorgeous client sites, some might be proof-of-concept pieces for a future experimentation, and some will definitely wind up in the trash ;)

But that’s okay—knowing what doesn’t work is as important as knowing what does. Let’s take a look at JP’s layout (which was built entirely in Webflow—meaning this site was designed without any coding. Awesome, right?)

Varying box sizes, colors, type treatments, and other cues help organize and prioritize content on the homepage.Why it works

This re-imagining is an excellent example of a designer creating more than just a design—he’s created a system for design that can be applied to any site featuring continually updated content. That’s the key; this isn’t just novelty in aesthetics, this is also novelty in accessible content.

By taking a step back and looking at the big picture, he realized that the main challenge facing IMDB was the huge amount of movie news and media that would be updated on a daily basis. JP uses scale to highlight featured articles with large, visually impactful images. The contrast between these rich images and the ample white space of the Tweet box allow both to equally stand out. These elements don’t blend into one another; each type of content has a unique visual style that is designed to make it instantly recognizable in the home page’s content stream. Yes, there’s a lot going on, but the purpose of every element is immediately clear.

Asymmetric balance is another effective design technique at use here: If this layout was box after box of equally-sized images, you’d quickly get tired of scrolling through all that sameness trying to find the next bit of visual excitement. By changing the width, scale, and color of each piece of content and displaying it in a non-symmetrical yet still balanced manner, the designer ushers the reader to stay visually engaged—something new and exciting might be right around the corner!

TAKEAWAYS

Asymmetry can have engagement value, but it can be confusing. Be sure that it doesn’t jeopardize accessibility.

When many elements are tightly positioned together, leverage white space to call attention to important tertiary parts of the page. 

With more complex layouts, it becomes increasingly important to reduce clutter on the page. You must aggressively reduce confusion and visual noise.

Layout #2: Long-form editorial content

More and more sites are designing complex stories supported by rich photography, thought-provoking pull-quotes, compelling video, and complex data visualizations. It’s no surprise that even this relatively “new” form of screen-based storytelling has already developed a standard layout formula! Even new ideas can go stale quickly.

A standard “magazine-style” layout used for long-form storytelling sites.

A novel approach

Geospace takes the concept of “magazine-style layout” to a brand new level. Both the site’s navigation and its editorial content borrow liberally from techniques used in book and magazine design. By leveragingWebflow’s Interactions and advanced typography styling, the designer of this layout was able to recreate the look of a tactile, glossy publication (with the added benefit of an interactive experience, of course).

Instead of treating the site as a single, vertical page, the designer made the decision to treat the horizontal viewport the way you would a two-page magazine spread.

Geospace presents an elegant solution not only because its uniquely beautiful, but also because it’sintimately familiar. It’s non-threatening. It’s natural. (I'm starting to sound like Jony Ive, aren’t I?) Even though the layout doesn’t work the way the user might instantly and instinctively expect, the site works the way itfeels like it should work—the hallmark of any excellent user experience. Because of this, it very quickly becomes fully usable.

The navigation takes center stage, featuring compelling photos that draw readers into the story before a single word is read.

Only selected navigation panel stays in place—the others slide off-screen, revealing the content.

Although it features a unique layout, functionality like scrolling works just the way you’d expect.

Additional influences from publishing can be seen in the complex type system the designer crafted here: Large, heavyweight headlines contrast with the slender serifs in the body copy. There’s a clear visual hierarchy of information. Lead paragraphs are set in a larger type while consistent margins and ample white space allow the eye to “breathe” between elements. The result is a story that’s not just readable—it’s a pleasure to read. It’s whitespace done right.

TAKEAWAYS

If you break with tradition in one form, ensure you at least copy tradition in another; not everything can be completely unique. Users must be left clues as to how to painlessly use your interface.

Motion design can help provide affordance—subtle indications of intended behavior—to reaffirm UI behavior.

No matter how creative you get, please remember that content is king. The primary purpose of the site remains having easily digestible editorial content—don't let the design reduce legibility.

Layout #3: Making navigation a form of art

Our final layout, Species in Pieces, allowed its designer to do three things: experiment with CSS animation, explore unusual UI patterns, and raise awareness for endangered species.

As a personal project, the designer had the latitude to provide an immersive experience rather than an productized and immediate calls-to-action. It’s a nice luxury to have, and it’s the rare circumstance where you can truly break from layout tradition because you’re creating an experience meant to inspire and change minds, not sell a product. 

However, going down this path means putting users at risk of getting frustrated and lost. It’s a creative decision you cannot make lightly.

The simple approach

What’s unique about the above layout is its calming simplicity. All content is contained in a static, horizontal viewport. The hypnotic, motion-reinforced transition from one species to the next is the focus of every screen interaction. Secondary information is therefore hidden behind navigation options. (You can be certain that this decision was very deliberate.) The illustrations are what are truly on display.

The total experience draws a user in with simplicity then encourages them to explore further levels of complexity.

Why it works

An effective navigation pattern employed by this designer came about from a recognition that users instinctively scroll to navigate a web page: When a user scrolls up, the previous transitional animation is triggered; when a user scrolls down, the ensuing animation is triggered. In other words, basic website navigation expectations are kept intact – they’re not made second-class citizens. Yes, this design is unique, but that doesn't mean it's going to complain when you try to interact with it in ways you're already used to. In short, common behavioral patterns are rewarded with a unique result.

TAKEAWAYS

The less you’re beholden to selling a product or service, the more experimental you can be. Consider creating a concept or art site to push boundaries and gain notoriety.

Providing breadcrumbs is important when a navigation system doesn’t follow tradition. So, make it obvious where the user is at all times so that they don’t get lost. 

No matter how experimental you are, you always have to balance the traditional—you’re creating a website, not a game or an app.

Let’s recap: Five tips for creating your own unique layout

Include navigational cues

If you’re going to experiment with a unique website layout, your user interface needs to make it clear how to interact with it. These little “Hey, is this what you’re looking for?” animations provide visual cues that guide users through unfamiliar experiences. With a simple rotate or fade animation, you can increase user confidence by adding clarity.

Transformicons uses simple animations to show the state of a menu icon.

Never jeopardize responsiveness

A unique design isn’t successful unless you can experience it everywhere. As more users view websites from their mobile devices first, consider how a unique website layout will look on everything from a wide screen desktop to an iPhone. (You also don’t want to be penalized for creating something cool that isn’t responsive.)

Unique layouts start with unique inspiration

We all get design inspiration from the web. It’s where we live for 8 hours or more every day. The Webflow Discover Section and Awwwards are my personal favorites. But if you want to be truly unique, you have to also seek inspiration in places that are your own. Be inspired by the roller derby, vintage seed packets, or the art of Barbara Kruger. Seriously. Nobody else has the same influences and experiences as you, so draw on them.

Fail often

When you look at a great designer’s portfolio, it’s easy to get discouraged. You just see the final, elegant UI animation. You don’t see the “To File” folder on their desktop filled with unused inspiration, amazing ideas killed by the client, and the dozens of half-completed experiments. That’s why we call it a design process. Personally, my first idea is rarely my best one. Sometimes my fifth one isn’t either. However, each one is another step along the road to a novel solution.

And I can tell you this with all sincerity: Some of the ideas I’ve stumbled across in my journeys down seemingly dead-end roads have, in hindsight, helped define my career.

Don’t confuse people

Uniqueness is key when making a design that truly impresses, but remember that – for the most part – you aren’t creating a piece of contemporary art. You’re creating a website. The goal is not to confuse or challenge users, but to provide them content in an interesting way.

What’s the craziest site you’ve ever seen?

We’d love to see your favorite layouts. Tell us why you love them, and show off your own layouts in the comments below.

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Chris Ford

Author. Designer. Creator.

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Announcements
Feb 17, 2017
New feature: Global swatches
Change a color in one place, watch it update across your whole site. Now possible in Webflow with global swatches.
Tutorials
Jan 20, 2017
Webflow Bit #2: Sidebar navigation
See how quick and easy it is to build sidebar navigation in Webflow.
Inspiration
Jan 13, 2017
15 unique website layouts
We’ve sifted through many of the mundane to find examples of creative layouts that let their content shine.
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.