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.
Many websites same to follow the same tired, old template. Here’s a hero image with a centered call to action and here’s my three columns below it. It’s not a bad design, because it works. The problem is that it’s predictable. So we wanted to give you some examples of websites that take a different approach so you can create pages that break the mold, without shattering user expectations.

1. Heco Partners

Heco Partners agency website homepage
‍Heco Partners draws you into their website with its flowing movement.

We just can't get enough of this website! When you land on Heco Partners, a Chicago-based design agency’s website, you encounter the words, “We turn information into experiences that people care about” hovering above an undulating wave.

These two elements combine to symbolize their promise of transforming ideas into action. Without even scrolling, we get a strong sense of who they are and what they do. As a whole, this site provides a gorgeous example of the right way to combine a portfolio with more detailed background information, as exemplified by each of their project. We get to see how they’ve helped their clients succeed and learn all about how their approach to their work.

The absence of navigation and an arrow prompt you to scroll down to get the whole Heco Partners story, but you can also diverge into their project-based case studies. Navigation finally emerges here, in the projects section, where you can flip through projects using slider-like arrows at the bottom right of the screen.

It’s a bit of a drawback not to being able to bounce from one section of your choosing to the next. But the beauty of the fading transitions between each section, as well as various other animations, makes the site a true pleasure to scroll through.

2. Nelu Cebotari Portfolio

Nelu Cebotari's design portfolio website
‍A portfolio should show off your abilities as a designer. Nelu Cebotari’s does just that.

A design portfolio offers you the opportunity to not only show off the great projects you've worked on, but also to demonstrate your design skills with the page itself. Nelu Cebotari has created an online portfolio that captures his personality and skills as a designer, while skillfully avoiding the pitfalls of cliche.

Yellow can be a bit harsh, but he chose just the right muted shades for his background and the shapes that are placed throughout it. This color choice makes the black text really stand out.

Another unique part of this design is navigation, placed front and center as the calls to action about, work and contact. Hovering over each of these reveals a box that slides up from the bottom. Each of these squares has a bit of text prompting you to learn more or to get in touch. This, combined with simple outline icons makes for an experience that feels effortless.

This stripped-down, spartan approach feels surprising for a designer — at least at first. But when you hover over the teasers for his portfolio pieces, example designs come to vivid life, enticing you to dive deeper into the project.

The contact form is also delightfully simple to use do to its conversational design approach. All you need to do is replace a few placeholders, click Submit, and your request is on its way. Distilling the form’s design down to just the necessary information makes this a more efficient way to communicate.

Conversational form on Nelu Cebotari's website
‍Contact forms don’t have to be complicated. This simple approach makes getting in touch easy.

3. DFink Design

DFink Design portfolio website
The well-executed DIY aesthetic sets DFink Design apart.

We like minimalism — but it’s not the right approach for everyone. After all, for some, minimalist design can feel cold and sterile rather than zen. DFink moves away from minimalism with a grungy, handmade, vintage aesthetic for his portfolio website.

The DFink Design’s logo has a handdrawn look that’s beautiful in its imperfections. Throughout the page we see other handmade embellishments, like the border separating one section from the next, which looks like a rough ink roller job, as well as the wood-type-like section headings. The font choices, which range from the typewriter-style Special Elite to the gothic Franchise, might seem a little too diverse (and numerous) at first, but they’re again united by that vintage feel.

His portfolio pieces appear below the intro, abruptly introducing a more modern feel to the site. The portfolio detail pages could probably benefit from more textual content, and vital project details like results, but there’s no doubt they’re beautiful.

4. Never Summer Snowboards

Never Summer ecommerce website
Never Summer concentrates on their products without losing their sense of fun.

It’s easy for action sports companies such as snowboard manufacturers to coast on the charisma and abilities of their riders. Whoever spins more or goes bigger can sell almost any snowboard to his or her adoring fans. Never Summer, which has a solid team roster, lets these riders be a part of their story, but the real focus here is on their high-quality products.

There are plenty of technical specs, but they’re backed up by the reasons they’ll help you out on the slopes. Instead of using smoke-and-mirrors jargon, they let you know (in fairly clear language) how all of these materials and construction techniques make their boards better.

With technical specs and a focus on board construction this page could have been information overload. They’re able to avoid this by injecting plenty of personality. The Bob Ross parody video has enough goofy charm combined with great footage of people riding that it’s a joy to watch. All this takes what could be a faceless manufacturer and shows that they also have a lighthearted side.

5. Soul Jazz Records

Soul Jazz Records website
‍Sounds of the Universe brings the real world experience of going to the record store to you digitally.

Sounds of the Universe is the digital offshoot of the the eclectic record label Soul Jazz. From reissuing obscure funk, jazz, and punk, to putting out new releases, they make sure that music that may not get much attention gets heard.

Their website provides a good representation of the many genres that they put out. There’s plenty of background information about the artists as well as sound samples to get an idea of what they sound like.

Being a music aficionado myself, I’ve spent plenty of time flipping through albums at record stores. What I like about this design is that is captures the feel of being in a record store. You’re able to flip through various releases in a gallery. If any artwork catches your eye, you can click the cover for a closer look. It’s like flipping through a stack of wax and grabbing what immediately grabs you and taking it out for further inspection. By translating the physical act of browsing through records into a digital experience, Sounds of the Universe sets itself apart from other music retailers who lack this sort of familiar interactivity.

Sounds of the Universe brings the fun of flipping through music at the record store to your computer screen with a simple hover interaction.

6. San Francisco Museum of Modern Art

SFMoMA's website homepage
‍SFMOMA has created a masterpiece of a website focused on artistry and usability.

Museums contain art that inspires and captivates our imaginations. Their websites should do just the same.

Most museum websites do a decent job of showing off featured works, publicizing current exhibitions, and providing vital visitor info like hours and ticketing information. SFMOMA does all of that too — but in a more beautiful way.

Instead of still images of some of their more noteworthy works, we get to see videos of visitors standing in front of them, all are shot from a perspective that makes you feel like you’re there yourself. These clips offer small glimpses of what you’ll experience yourself when you visit. This is an effective use of a hero video that communicates so much of their museum experience.

Intuitive navigation, tasteful fonts, and a strong focus on composition all make SFMOMA’s website a reflection of the great art within their walls.

7. R2D3

R2D3 website offers a visual introduction to machine learning
‍Websites are a tool that can also teach. R2D3 utilizes the power of the web to explain machine learning.

It seems like the majority of websites we visit are related to some sort of commerce. But we should never websites’ tremendous potential to also educate.

R2D3 does just that with their “Visual Introduction to Machine Learning.” Through a series of animations, they’re able to communicate this complex concept in a relatively simple way. It makes learning an engaging experience that’s way more interesting than staring at words and figures in a textbook.

In this module, they use data sets about attributes of homes in San Francisco and New York to show how computers utilize statistical learning in problem solving. For a non-mathematical person like myself, this tutorial kept my interest and I left feeling that I had a deeper understanding of the concept.

An animated visualization of machine learning
R2D3 uses eye-catching animations to show us how machine learning works.

8. TechHire

TechHire website homepage
‍TechHire’s aesthetic connects directly with its tech-minded audience.

TechHire’s mission is to create new opportunities for people in the tech industry, as well as helping businesses find new talent. Their website subtly embraces elements of tech with the code-like formatting of the <TECH/HIRE> logo and the calls to action with a flashing cursor.

This page is nice to look at with its simple choice of colors, but what really sets it apart is the organization of the content. Everything flows well, and there’s even a mini-call to action that pops up on the bottom right of the screen as you scroll from one section to the next. Questions like “Want to start a tech career?” directly address the visitor — and help them answer what’s most likely their first question. TechHire combines well-written content with a clean design to create an effective website.

Infographic showing IT jobs, average tech salary, and US median wage
‍Each section has its own secondary call to action.

9. Peerspace

Peerspace year-in-review website
‍Peerspace is changing the way that people utilize and find spaces for their creative and business pursuits.

Peerspace aims to connect creatives and other entrepreneurs to short-term spaces. Whether it’s for a pop-up shop or a location for a video shoot, Peerspace wants to make the process of securing a location an easy one.

Their year in review not only looks cool, with its subtle pastels and its stylized heading treatments, but it also creates a narrative on the theme of “How we create experiences has changed.” From online retailers who have created pop up shops to connect with their customers, to alternative physical activities outside of the gym, these are all areas where Peerspace provides a solution in finding a location. While there appears to be little rhyme or reason to the placement of these elements, that randomness adds a sense of quirky personality that seems to be at the heart of the brand.

Peerspace also does a great job letting their clients tell their story. Through photos, videos, and writing we get to learn just how Peerspace has helped them.

However, it’s worth noting that an unfortunate amount of this content is delivered via images. That significantly damages both the page’s SEO and its accessibility, so we have to wonder why they went this route.

10. Crea International

Crea International homepage
Crea International avoids website mediocrity with a fresh take on design.

Crea International is in the business of creating unique, modern company spaces. Their website reflects their commitment to not following the norm and finding solutions that are far from cookie cutter.

Yes, there’s some scroll-jacking going on with the dot navigation, but it doesn’t seem like it was done just for the sake of being different. Rather, this approach seems to fit right in with their commitment to taking a different approach.

Each section slides up from the bottom of the screen and a box containing the details slides into place from left to right. It’s visually very cool and only happens for the the first time one navigates to that section. This is a great effect which would lose its novelty if it happened every time you had to scroll through it it. This page breaks free from many of the trends plaguing modern designs and shows a mindful, fresh approach. It’s the type of design that inspires us to experiment and find new ways to create.

11. Sketch Labs

Sketch Labs homepage
‍Sketch Labs proves that they are creative recruiters who actually know what they are talking about through their design and content.

If you’re a recruiting agency for designers, you need to understand what designers do. Sketch Labs’ website (and its jobs portal) shows that they know what good design is. This should instill confidence in any designer that they’ll be able to find a job that’s right for them.

Their content shares the story of how the company came to be, as well as those of designers they’ve been able to help. The downfall of many recruiters is not understanding what designers do or how they can help out their clients. Sketch Labs leaves no doubt that they know the business and can be trusted as recruiters.

12. Tour Loch Ness

Tour Loch Ness website
The Loch Ness monster may be hard to spot, but you won’t miss any important details in this thoughtfully designed page.

We’re sure that Loch Ness has many gorgeous features and vistas. But we all know it’s truly famous for the one thing you probably won’t see: the shy creature that allegedly inhabits its icy waters.

This one-page design quickly and beautifully communicates what Travel Scotland’s informational tours are all about. Placed throughout the information are a number of Request Price calls to action (which as of this writing don’t seem to work, suggesting this may be a concept site). It’s a nice layout where your eyes easily follow the trajectory of images and blocks of text.

Chances are you won’t see old Nessie cavorting in the waters of the Loch Ness, but this website gives you many good reasons to visit.

13. Presentation

Presentation design agency website
Presentation mixes order and experimentation to create a design that’s interesting and engaging.

Presentation is a web design and art direction agency based in Perth, Australia. It’s always tempting for agencies to cram their websites with every gimmick in order to dazzle all who visit with their creative brilliance. Presentation is able to take a few simple elements and arrange them in a way that shows their design smarts without overdoing it.

They use cool transitions as well as asymmetric backgrounds over which their content is laid out in an orderly manner. It’s this great balance between artistry and content organization that makes it stand out from many other designs.

14. Intensive

Intensive design education website
Through a non-traditional layout, this page creates a unique user experience.

Coming up with a new variation on a common design theme, or straying completely away from it, is what will differentiate you as a web designer. If you want to show how your design course will help people create websites in Webflow that go beyond the mundane, you need to create a page that packs a punch. Intensive shows the power of good design and wants to teach you to harness that power for yourself.

This design features a hero video that shows various web pages being clicked through. There’s a call to action, but instead of sitting dead center, it’s aligned to the left. A trio of 3D-transformed pages slide into place. It’s easy for a design to fall flat due to the constraints of their two-dimensional nature but these angled web pages break the rules to create something visually interesting. Each section is separated by an angled block followed by text laid out in a traditional manner.

This design inspires us to bring new dimensions to our work — and should inspire aspiring designers to want to learn how.

15. Bike Time Bali Road Bike Camp

Bike Time Bali bike tour website
‍Bike Time’s design relies on gorgeous imagery and careful use of extreme variation in font sizing.

With a mix of gorgeous photos, minimal graphs, and brief paragraphs, Bike Time immerses you in all the cool experiences and terrain you’ll get to ride through if you attend this road bike camp. The Bali logo echoes the movement of the road on the image beneath. This is a design element that could have been distracting but plays nicely off the winding mountain road.

The design is heavy on the photographs, which show off the stunning beauty of the area. There are also a number of graphs whose lines mirror that of the terrain.

Along with the great photos is text of various sizes, some drastically large and others much smaller. It creates contrast on the page and is symbolic of the peaks and valleys one will be pedalling through.

Find inspiration and push your own designs

As designers, we know that, sometimes, clients just want tried and true solutions. And it’s easy for us to serve up exactly what they ask for. It’s okay to stick to conventions, but there’s so much room in design to try something different. By taking an unorthodox approach, we can come up with website designs that are memorable and won’t be lost in the seas of uniformity.

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.
Jeff Cardello

Writer, improviser, and reformed music snob. Check me out @JCardello.

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
Design process
Mar 16, 2017
Optimize your web design process with rapid prototyping and project management in Webflow
Find out how web design agency SWEOR uses Webflow's prototyping and project management capabilities to make the design process faster and easier for all.
Design process
Mar 13, 2017
The web design process in 7 simple steps
Find out how following a structured web design process can help you deliver more successful websites faster and more efficiently.
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.
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.