Many websites seem 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
Layout: full bleed hero flowing into staggered two-column sections with scroll-triggered background animations
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’s portfolio
Layout: three-column hero that transforms into the main navigation menu on scroll
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.
3. Soul Jazz Records
Layout: Grid-based reproduction of a brick-and-mortar record store experience.
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.
4. San Francisco Museum of Modern Art
Layout: Full-screen background video with minimal links to the most-important actions visitors can take.
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.
Layout: Two-column Z-pattern with a plethora of animated graphs.
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.
Layout: full-screen cover transitioning into two broken grid sections, then several more-rigid grids.
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.
Layout: a copy-dominated hero flows into a single-column list of projects.
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.
In a web filled with microinteractions and dazzling interactions, it’s refreshing to come across something so simple, straightforward, and focused. Presentation has a story to tell — so they tell it. It’s just that simple.
Layout: Full-bleed hero transitions into an alternately rigid and broken — and visually exposed — grid.
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.
9. Bike Time Bali Road Bike Camp
Layout: Full-bleed hero transitions into a fairly rigid grid that feels broken.
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.
10. Superimpose Studio
Layout: A cube pushes into our screens, with a revolving carousel of project thumbnails forming the border.
Superimpose Studio’s website jumps beyond merely “unique” to land firmly in experimental territory. It takes the traditional portfolio grid and stretches it into three dimensions, creating a rotating frame of project graphics around the the studio’s name that doubles as the site’s sole navigational element.
Click one of these rotating images and you’re taken to the project’s detail page, which rotates the homepage carousel so that the images scroll vertically, bending toward you as you scroll past them. It’s an artful, if somewhat disorienting and memory-intensive design.
We’re seeing more and more of these experimental, artistic portfolios from web designers and studios. This experimentation then becomes a unique way of framing the site’s content, making it clear to potential clients that this studio is looking to deliver innovative design work.
11. Lauren Wickware’s portfolio
Layout: Fullbleed hero transitions on scroll into split-screen project “cards.”
Another portfolio site that’s really caught my eye lately is book designer Lauren Wickware's. The multi-dimensional scrolling creates a surprisingly smooth and engaging experience that flirts with scrolljacking without ever feeling forced or restrictive.
The project detail pages take a more traditional approach, with a series of beautiful, nearly full-screen images and brief snippets of beautifully typeset text. It’s a look that’s not only beautiful, but also helps the visitor focus on her gorgeous editorial work.
12. Favorite Albums 2016
Layout: Full-bleed hero flows into two-column list.
Favorite Albums 2016, built in Webflow by designer Drew Roper, has a similar layout to Laura Wickware’s portfolio in that it focuses on one piece of content at a time. It’s a straightforward approach, but is elevated by pervasive but tasteful interactions and animations. But my favorite part is the hidden navigation: if you hover over the color swatches at the top of the screen, you realize that the rainbow animation in the initial page load has become the site’s navigation. And when you scroll, the background color of the section corresponds to the link’s color. It’s not the most functional or obvious nav design, but it’s definitely unique!
13. Dan Perrera
Layout: A simple blog post feed with just titles and dates transitions seamlessly into post detail views on click.
I find a lot of joy in unique, minimalist layouts and Dan Perrera’s blog offers a truly delightful example. The homepage consists of a simple feed of timestamped blog posts, with a sticky navigation bar on the left. I’ve been seeing unique uses of sidebar navs more and more this year.
To top it off, Dan created a nice about page that slides in from the right side of the screen when you click the information button, giving the homepage a slider-like feel. Bravo, Dan!
Find inspiration and push your own designs further
As designers, we know that clients often 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.