13 Creative Website Layouts that Were Done Right - Unlimited Graphic Design Service

Small businesses

13 Creative Website Layouts that Were Done Right

July 17, 2020, by


laptop and designs


Ever notice that sometimes you see websites from different industries but have the same layout or structure? It’s because those layouts are tried and tested for readability and navigation. Some would customize their website with just their logos and photos, and that’s enough for them.

Meanwhile, Adobe finds that 73% of businesses will pay good money to have a good website design. That’s why you shouldn’t settle for the layout template provided by your website host.

In this article, get inspired by the 13 of the best creative website layouts. Learn from the best website UI designs and apply them to your website too.

Why Design Matters in a Website Layout

Since many website layouts copy a similar template or structure, it’s best if you incorporate design elements that will make for creative website layouts.

Well, for starters, you want to leave your visitors in awe. Sure, you might think they should immediately go to the product or service page and checkout. Sometimes, you’ll want people to explore further. 

Let them learn about you. 

That’s why it should also translate into your website layout. You might follow some trends here and there, but it’s good to add a bit of your company or self on the website layout. Spice it up with your branding. That’s how you can stand out.

Some design elements to take note of in a website layout:

  • Visual hierarchy
  • Color
  • Negative space

Don’t forget some graphic design trends that would come in handy:

  • Bright colors
  • Illustrations
  • Augmented reality

Also, don’t forget to make it a responsive website too. It’s a crucial part of a website. You can have compelling graphics, but if you can’t click on any buttons or the website loads slowly, you may lose some leads in the process.

1. Bored Solutions

web layout design example

Bored Solutions puts its twist on a grid layout. They included circles and oblongs inside the differently shaped grids. This layout will allow users to scroll further because you’re curious about what other things you can accomplish in a week or a month. The creator(s) of this website made this during the pandemic.

So, what are you planning on trying out for a month or week? As for me, I think I’d like to go to the theatre.

2. Input Mag

web layout design example

Once you load the Input Mag website, you’ll notice they combine hints of asymmetry and the z-shape flow. The use of colors are striking too, which makes your eyes stick to the page. As you scroll further down, you’ll see more stories and suggested products you might need.

The use of text for visual hierarchy purposes works because it makes you want to read the headline and even the whole article. They also utilize an endless scroll that lets users stay longer on the site so they can read more stories. It’s a common trend among media websites.

3. Brain Bakery

web layout design example

The Brain Bakery website leaves an impression because it doesn’t follow one structure on the website’s homepage. What’s consistent is the color because it pops. Even if the site doesn’t follow one layout, it makes you navigate easily on the page.

The modified cursor is a nice touch too! It helps when you want to interact with an object.

Plus, the menu bar looks skewed. It looks 3D in a way, which is a smarty take on the usual sticky menu bar.

4. The Wellesley 100

web layout design example

Instead of using a hero image, illustration, or any graphic design, the Wellesley 100 website uses a video, as is the trend. Just like some websites on this list, they utilize a combination of structures to make the site engaging and exciting.

Another interesting point to note is when you scroll a bit, click on the “surprise me” button, and learn something new about Wellesley. You’ll also notice that they stacked photos there, which is also indicative of asymmetry and visual hierarchy.

5. Vestre

web layout design example

Yellow is the theme of Vestre’s website. You immediately see it once you open the site. As per the layout, they feature not just one hero image, but three. The huge square on the left is imposing, and it’s a great way to capture people’s attention. 

Scrolling down, you’ll notice they adopted a zigzag layout while adding elements like a photo, video, and gifs to feature their products in different places.

6. Collagerie

web layout design example

What makes Collagerie one of the most creative website layouts is they put a spotlight on the products. There’s minimal copy, which allows the visitor to appreciate the products more. They applied visual hierarchy on the boxes, so visitors get an idea of which the most recommended products are.

They make excellent use of strips, which act as a visual cue for the visitor to appreciate the product further.

7. Gomma Gomma

web layout design example

Unlike other product websites that use templates, Gomma Gomma goes the extra mile with their website. 

What’s interesting about the products featured above the fold is you can interact with it. What’s great about it too is how your eyes dart to the product immediately. It stands out because it’s rendered in 3D and uses a background so you could put your attention on the product.

You’ll even see that the text moves as you move up or down the page, making the header text become either symmetrical or not. That gives the website its asymmetrical look.

8. Huys NYC

web layout design example

When you open the Huys NYC website for the first time, the menu bar pops out from the left side. From there, you want potential renters to check out the available spaces and perhaps learn more about the building and its history too.

If you minimize the menu bar, you’ll see a single column that’s conveniently placed in the middle. Their website layout adheres to a z pattern, letting the eyes dance as you scroll down their website.

9. Signes du Quotidien

web layout design example

Signes du Quotidien makes excellent use of white space in their website layout. When you load the site, they ask you to click on the circle inside the box. That’s the menu. 

Instead of using the bar, they animated the menu bar and placed them in the middle instead of putting them at the top or on the sides. To learn more about them, you can drag a circle onto the box. 

When a new page loads, they use two columns. You’ll also notice they make great use of white space since they limited the elements to the middle while still observing symmetrical spacing.

Signes du Quotidien is French for Signs of Everyday Life.

10. Work at Galapagos

web layout design example

The Work at Galapagos has one of the best creative website layouts.

At the start, they use an asymmetrical website layout, but as you scroll down, the right side of the image becomes the menu bar. They also added directional cues so you can read more about Galapagos and why they’re hiring people.

The animated text also helps in navigating the website and making it interactive for potential candidates on the site.

One of the best parts of their website is the use of audio instead of the usual video. An illustration of an employee serves as the visual. Plus, the visual hierarchy was well executed for that section too.

The bottom of the page ends with a split-screen where you can either click on their About page or Join the team. Not all websites utilize a split-screen at the bottom of the page. But it works for their site.

11. Woom

web layout design example

Woom uses a single page layout on their website. This allows visitors to do what they need to do on the site. You’ll notice the use of visual hierarchy on the text on the left side of the asymmetrical screen. The header text is bolded, while the following texts are either italicized or in its regular form.

When you click the next section from the homepage, you can browse their shop, contact them, or check out their events pages. The shop page is organized as a grid so visitors can view the products properly.

12. Any Cable

web layout design example

Any Cable uses a split-screen animation layout on their homepage. This allows users to learn about the process through animation and description. It’s also good they used different sizes for the text to indicate that it’s the next section. They add muted colors on the grids, but to emphasize data, they added colors to catch people’s attention.

Plus, they make great use of white space too. The minimalist website gets points for readability, and it’s easy on the eyes also. It’s one of the best creative website layouts because it integrates different elements that work.

13. Happy Egg

web layout design example

Instead of using a split-screen or a single image (or video), Happy Egg chose to customize above the fold, and they executed it well, making it one of the most creative website layouts on the list.

The edges take the form of uncooked egg out of its shell or like a sunny side up egg. Scrolling further down, you notice they use striking colors as well to match the colors of their products or packaging. They made the site interactive too, making it enjoyable to browse the sections of the site.

Key Takeaways

Your website should serve as a way for customers to transact several things like checkout or schedule an appointment. However, you should also spruce up your website to make it more appealing to your visitors. 

About the author

Katrina is a freelance content writer. She has experience writing about marketing. She also writes movie or TV reviews and her travels in secret. She is a graduate of International Studies in De La Salle University.

The all-in-one design team for your business

Get logos to websites and everything in between, Penji gives teams the designs they need to scale their business.

Find out more

Related articles

Small businesses

Custom Packaging for Small Businesses: Why You Need It (Free Ideas Inside)

Most small businesses settle for generic packaging due to affordability. But ordinary packaging doesn’t make your business stand out. Imagine covering your product in mundane packaging on a store’s shelf side by side with other products in beautiful packaging? More...

September 18, 2020, by

Startups

15 App Design Icon Examples that Are Pure Eye Candy

On average, Statista finds that there are 2.2 billion apps on both the App and Play stores. It can be challenging to compete with other apps of the same function. One way to do this is to create an app...

September 18, 2020, by

Advertisers

Most EFFECTIVE Online Ads for Small Businesses (with examples!)

Today's circumstances and advancements in technology have made consumers flock online. The year 2019 saw a 2.7% increase in mobile phone users around the world, according to We Are Social. Now, roughly 5.11 billion people are using mobile phones, and...

September 17, 2020, by

Try Penji today 100% risk-free

Thousands of marketers and agencies rely on Penji. See if we’re right for you.
15 days money-back guaranteed. Cancel anytime.

See pricing
Use custom design to create a beautiful and cohesive website
[Download a FREE 50 Icon Pack]
Get Now
close-image