There are so many websites that seem to follow the same old basic website layout that has been seen numerous times and that’s exhausting, quite frankly. Have a hero image with a CTA in the middle and three columns underneath. It’s as if we’re stuck in a loop of headers, content, sidebars, and footers. These designs aren’t bad, they’re just so predictable.
Website layout design doesn’t need to consist solely of your typical grid structured layout. Sometimes the best option is to disregard convention and break the occasional usability rule. Then the sky would be the limit when it comes to what we could create.
You won’t stand out if you just follow the newest trends. Website design layouts that are trend-based and formulaic might bring you paychecks, but don’t expect to win any awards for design. The scariest thought is that you might be compromising your creative side just to become more like a typical manufacturer..
This feeling is something that almost every designer goes through at some point or another, therefore there are plenty of ways to sort this out. One way is to draw inspiration from the most out-of-the-box and unique website design available.
Sadly, there’s no set of rules for designing unique websites. The easier option for boosting traffic is turning to something like Search Optimization (SEO). However, the most effective way to drastically increase traffic is to have a unique website that stands out so much that it gets plenty of media and word-to-mouth attention because of it.
Keep on reading this article to discover a few tips on how to achieve this kind of out-of-the-box thinking and experimentation.
Grid systems are a fantastic way to display web content, not just due to their easy setup and the fact that they boost efficiency in maintaining and expanding web projects, but also due to them improving the consistency and usability of website layouts. However, if you’re a designer trying to think outside the box, you might find this kind of layout too restricting. Wouldn’t it be great if page size and website layout were unimportant factors?
In order for this to be achieved, your first step should be planning out your design’s objectives:
The next step is building on these answers. If you’re looking for a particular photo to stand out, be careful in deciding where to place it. Try to place your main feature in the top left area as that’s where most visitor’s eyes tend to go first. After deciding where your main feature should go, be that an image, navigation, logo, or content, build the remaining design around it.
Creatively using colors can truly help create unique websites, even if this is the only unique thing about the website. Colors are a powerful way to create playful looks, evoke emotions, add class etc.
An effective way to make your design stand out is by using high contrast colors. Colors can also be used in a non-typical way, for example, by breaking colors up unto blocks. The DoneDone website breaks up retro colors into geometric blocks. You should also check out the image slideshow from Mike Kus’ designer portfolio which uses some brilliant colors.
Whether we’re aware of it or not, we all have our own collection of personal techniques. Set aside time to think over and evaluate all the design habits and techniques that you’ve collected throughout the years.
Think about the following things when determining your own techniques:
Write down all the answers to these questions. Your next step is creating a list under each answer to determine what improvements your techniques need or how they should be defined to personalize them more.
Sometimes you just need to use some unique buttons or icons to turn a boring website into a brilliant one. You just need to make sure that they’re all of a similar style so that your design doesn’t look too messy or overwhelming.
Unique icons are used throughout The Design Council’s website, turning what would have been a simple website layout into a unique website layout.
A retro/vintage style was used by awesome’s design team for design elements such as icons, buttons, and typography.Using design to save the world is their creative pitch, and this theme is cleverly stuck to throughout the website.
The next thing to write down is why your favorite website sucks, and you need to list 10 reasons. You’ve spent so much time admiring it, but now you need to think about what’s bad about your favorite site. This can be anything from personal preferences to larger concerns such as usability.
Your list should consist of issues regarding the following:
After contemplating these reasons, write down, in detail, all the actions that would improve it. You should then apply similar enough techniques to your own web design.
We wanted to provide you with several more examples of good website layouts whose different approaches will inspire you to create unique websites without letting down your users.
Layout: a three-column hero that upon scrolling becomes the main navigation menu.
NeluCebotari’s online portfolio perfectly captures his designer skills and personality without falling into the trap of being cliche.
Yellow is often a harsh color, but the muted shades chosen for his background work perfectly with the shapes throughout it. The black text really pops thanks to this color choice.
The navigation is another unique aspect of this design, placed smack down in the middle in the form of the following calls to action: work, contact, and about. If you hover over each of them, a box will slide up from the bottom.
Each box contains some text motivating you to find out more or contact them. When you combine all of this with the website’s simple outline, you get an effortless experience.
Your mind is the starting point of hunting for the perfect house. starts in your mind. This cool and eclectic website is both interactive and has unique navigation, aiming to guide you through all the steps of finding your dream home. To begin this journey, you just need to start scrolling!
Layout: a full-screen cover that transforms into two broken-grid sections, and then a few more-rigid grids.
Their year in review is not just pleasant to look at thanks to its stylized heading treatments and subtle pastels, but it also tells the story of “How we create experiences has changed.”
Peerspace is also great at letting their users do the storytelling. Videos, writing, and images are used to demonstrate how Peerspace was of help to them.
However, it should be noted that they go overboard with using images to deliver content. It makes you wonder why they chose this approach since it hinders the page’s accessibility and CEO.
Layout: The experience of a brick-and-mortar record store is reproduced through a grid layout.
Sounds of the Universe is eclectic record label Soul Jazz’s digital offshoot. The numerous types of genres released on this record label are represented well through the website. Each artist has a plethora of background information available along with sound samples to give you an idea of their sound.
Standing out from the competition is just as important for smaller organizations as it is for larger ones. What differs between the two is that unique websites backfiring is a bigger risk for larger organizations.
Us designers are well aware of the fact that users prefer solutions that they know will work. It’s not difficult for us to give them what they want. Adhering to formality is fine, but as designers, we’re given so much room to experiment.
If we think outside the box, we can come up with the most creative and the most unique websites that won’t be forgotten in a hurry, especially in this sea of consistency.
Unusual websites generally aim for a unique, positive user experience.
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.