Definitive guide

How to create a mind-blowing one page website with/without a web designer

Best One Page Websites of 2022 | 41  Examples + Templates

Professional Website Example

Here's how to get started.

Are you looking for the best one page website designs? Or are you looking for some inspiring templates?
Perhaps you already have a design in mind, and you’re just looking for a one page website builder. In any case...
You came to the right place. See, many people who need a one page website invest a lot of money to get one. They hire extremely expensive web designers who often build low-quality websites. Although I'm not blaming anybody, I have a better idea for you.

Build it yourself. On this page you'll find clear instructions to do it – even if you don't have any experience. I'll recommend you a couple of tools that I trust. If you decide to purchase a tool I recommend, I get a small commission at no extra cost to you.

Do you prefer to have a professional web designer do it for you? I got your back. Scroll down to check out my recommended web designer.

They're great at building one page websites!
Ralph de Groot
Let's make building your one page website as easy as possible. Welcome to my guide!
After years of trial and error I can confidentially recommend you the following when it comes to building a one page website.

My name is Ralph de Groot. I'm the founder and author at My Codeless Website. Wake me up for a great web design. I love writing about website examples, too!

PS: This is my #1 site builder and this is my #1 hosting.

The best one page websites of 2022.

1. Banorama

https://banorama.banenor.no/

The animated background of the profile is just stunning. The sky scheme combo of the theme flatters the view of the website. The animations and the design flourishes are absolutely amazing and fit the website so well!

Things we love about this web design

  • Love the navigation!
  • The theme and design fit together so well
  • Very clear for the user, despite the busy look

2. Noodz

https://www.wearenoodz.com/

Look at this creatively designed website! The combo of green and pink and a little bit of yellow gives a lustrous appearance. There are some really fun animations and jokes here too which make this one a must-see!

Things we love about this web design

  • Attractive typeface
  • Bold colors
  • Clear call to action 

3. Thomas Vegetables

https://www.thomasvegetables.com/

Thomas excels at its website design with natural vegetables. With some very clean animations and images of vegetables Thomas definitely scores!

Things we love about this web design

  • Some nice 3d and parallax effects
  • Images are supersaturated to make the vegetables look even better
  • Nice menu’s

4. Ebow Agency

https://ebow.ie/

If you are starting a digital agency and want a stunning one page website example, go look at this website! It starts weird and wonderful. Quick color changes are the first thing you might notice but below the fold, it is actually a very clean website.

Things we love about this web design

  • Cool logo animation
  • A lot of animations but not overwhelming
  • Great navigation

5. Drifttime

https://kits.driftime.media/

“Step on your game, keep clients smiling and increase your value” makes websites more valuable to attract viewers. The video on the website makes everything clear. You can also meet the developers by visiting the Driftime website.

Things we love about this web design

  • Creative style
  • Super clear call to action that stays on top of the page when you scroll down
  • Slick design

6. Sakari Sake

https://sakarisake.com/#

Looking for a super clean one page website? Check out this example! This sake company with its pale color scheme and popping products is of outstanding quality. Wonderful!

Things we love about this web design

  • Nice animations
  • Product focused
  • Simple and pure theme clearly visible on the entire website

7. Teapot

https://www.teapot-creation.com/#/page/home

I like how to website instantly captures the attention of the visitor with the geometric shapes, teapots, and animation. On this website are some super creative details to be found. I love that this teapot website is actually a 3D art studio.

Things we love about this web design

  • Love the navigation bar on the right
  • Cool way to show of projects
  • Something different

8. Sawdust festival

https://visitsawdustartfestival.com/woodworking/

This festival website has a very cool design. I love the image at the top combining three images in one. Below the fold is a very clean website with a warm color scheme matching the theme. 

Things we love about this web design

  • Great personal images
  • Use of a copper color to make some elements stand out
  • Small animations 

9. Johan Belin

https://johanbelin.com/

Welcome to the site of Johan and scroll down to know about him! A wonderful combination of black, gray and white gives a lustrous look. The portfolio is amazing to check out multiple times, there is a lot to discover. Scrolling pictures look like just water flowing.

Things we love about this web design

  • Very creative
  • A one pager in the truest sense of the word
  • Great social proof

10. Codeless Fitness Coach

https://mycodelesswebsite.com/coach-website-example-template/

The first coach website example was made by our team. I absolutely love the scrolling animations and the clean web design. Definetely inspiring!

What you can learn from this great coach website example

  • Awesome scrolling objects
  • Very clean design
  • Great images

11. Kohost

URL: https://kohost.io/

I love this website. First of all, their tagline is clean and simple. The 2 calls to action buttons below it are nicely designed and match perfectly well with the background color.

As you scroll down you’re face with multiple scrolling animations which make the website feel ‘alive’.

What you can learn from this great startup website example

  • Very powerful color scheme

  • Nice call to action buttons above the fold
  • Epic scrolling animations

12. VC Swipe

URL: https://www.vcswipe.com/

Yes. You definitely want to take a look at this one. Admitted, this one is a bit harder to build without graphic experience. Their background animations are from another level. Great design!

What you can learn from this great startup website example

  • Amazing animations

  • Clean web design
  • Very unique website concept
Ethos Startup Website Example

13. Hy

URL: https://okhy.tech/

A minimalistic style website with hints of teal gives Hy a look that stands out from the rest. A few of the titles are animated which adds an extra flair. Plus, Hy has created a video that packs all the relevant information you need about the product.

What you can learn from this great startup website example

  • Subtle animations
  • Elegant design
  • Incredible use of visuals

14. Flying Pinata

URL: http://flyingpinata.co/

Okay okay. This one is a bit different. I’m not saying this is the website which you should aim for – but at least have a look at it. They did a great job at showcasing their (epic) product in a fun way!

What you can learn from this great startup website example

  • The animation above the fold is funny and explains the concept within a second
  • The commercial video is funny and powerful
  • Great color palette which gives the website a great look and feel

15. Peppa Sauce

URL: https://www.peppasauce.love/

As soon as the website loads, you’d know exactly what this website is all about! And that is the “blazing Blasian Mama Joyce Peppa sauce”! Who wouldn’t catch that? It’s everywhere on the website. 

What you can learn from this great startup website example

  • Lots of text and design details on the page
  • The website looks “alive” because of the amazing animations
  • 3D product animation is highlighted

16. KIMI Aviation

URL: https://www.kimiaviation.com/

Take a trip to the clouds with KIMI Aviation! Viewers are welcomed with a video of an amazing above-the-clouds view and a sleek text design of the company name itself. Cool!

What you can learn from this great startup website example

  • Futuristic font style of the company name
  • Efficient and sleek web design
  • Subtle scrolling animations and videos

17. Perturbatior

URL: https://perturbator.com/

A black background never fails especially with websites that have a ‘dark’ concept. On that note, Perturbator is a great example! Watch this amazing website leverage a classic black and white color scheme and witness new colors pop out of the screen.

What you can learn from this great startup website example

  • Big texts are emphasized
  • Introduction of new colors make the website even more interesting
  • Innovative design of the ‘Discography’ page

18. Vivid+Co

URL: https://vividand.co/

You’ll know exactly where to look from the very start of the page because of this website’s wonderful execution of graphic movement. Especially with the 3D animation placed at the center of the screen. Awesome!

What you can learn from this great startup website example

  • Prism of colors grabs the attention of the viewers
  • Creative 3D animation upon scrolling
  • Subtle Tetris-like animations

19. Kalso

URL: https://www.kalso.com/

Ready yourself to travel back in time! Kalso will impress you with its great storytelling flow. Wonderful photos, cute illustrations, comprehensive timeline run-through of the company, awesome concept – what more could you ask for?

What you can learn from this great startup website example

  • Long-scroll homepage generates more website traffic
  • Awesome storytelling
  • Vintage-style images and illustrations

20 Burn Book

URL: https://burnbadpolicy.com/

The glitching effect of the words “BURN BOOK” is so cool! And the awe doesn’t end there because when you scroll further, you’ll see more well-thought-out visual media and powerful copywriting!

What you can learn from this great startup website example

  • Bold and striking color scheme
  • Meaningful visual representations
  • Comprehensive write-ups

21. FigmaWP

URL: https://figmatowordpress.com/

If you’re looking for a one-pager website that has a professional design, featuring simple and sleek graphic designs, skillful copywriting, and a new-user-friendly interface that does the website a favor, have a look at this website!

What you can learn from this great startup website example

  • Clean web design
  • Easy navigation
  • Simple yet well-thought-out illustrations

22. Cook Collective

URL: https://cookcollectivekitchen.com/

Love the graphic layouts on this website! Especially the one above the fold, the screen is split in half with an image on the one side and a popping red-colored text on the other. This layout certainly hooks viewers to explore the website further!

What you can learn from this great startup website example

  • Vibrant and emphasized texts and call-to-action buttons
  • Clean images of food and ingredients on a plain background
  • Lots and lots of white space

23. Home Societe

URL: https://homesociete.ca/

Home Societe has some of the smoothest scrolling animations on the list! Not to mention, aesthetics are very much highlighted! And of course, one of the main features of this website – horizontal scrolling!

What you can learn from this great startup website example

  • Aesthetic color scheme and typography
  • Modish and modern web design
  • Magazine-like graphic layouts

24. SWWIM

URL: https://www.weswwim.com/

Okay okay. This one is a bit different. I’m not saying this is the website which you should aim for – but at least have a look at it. They did a great job at showcasing their (epic) product in a fun way!

What you can learn from this great startup website example

  • Muted blue and peach look lovely on this website
  • Subtle animations and text crawlers
  • Playful yet calming illustrations

25. Hypnax

URL: https://hypnax.co/

Clean and straightforward – these are the words that best describe Hypnax. This website features a crisp and clear full-page image above the fold, which I must say is a very interesting one! I bet viewers would take that long scroll to explore the website further.

What you can learn from this great startup website example

  • Blue accent color stands out
  • Intriguing image above the fold
  • Brief and straightforward web design

26. Formation

URL: http://www.formationstone.com/

Wow! I love the concept behind this website’s tagline. It’s very catchy and it identifies with the company. Now, that is great copywriting!

What you can learn from this great startup website example

  • Earth-toned color scheme
  • High-quality images
  • Insightful ‘The Story Behind the Stone’ page section

27. Agigen

URL: http://agigen.se/

Talk about vibrant colors because this website got you covered! The highly-tinted image with an overlying text above the fold is a fascinating sight to see. It’s unique, it’s full of life, and it has that powerful vibe behind the design.

What you can learn from this great startup website example

  • Featured famous clients such as Google, Sony, Lego, Volvo, and McDonalds
  • Sleek moving graphics
  • Simple and modern web design

28. We Ain’t Plastic

URL: https://weaintplastic.com/

You’ll know where to place your eyes on the screen! The matte-black gem placed at the center attracts the eyes from the very moment this website opens. And it’s mind-blowing how a simple graphic can do so much!

What you can learn from this great startup website example

  • Monotonous yet attractive color scheme
  • Comprehensive ‘Work’ portfolio
  • Seamless user experience

29. Brightwood

URL: https://brightwoodlp.com/

The first thing you’d notice about this website is that it has a loading screen where the company logo zooms in before the image above the fold fades in the background. This feature sticks around the page which makes this website memorable!

What you can learn from this great startup website example

  • Lovely ‘loading’ screen with a zoom-in effect
  • Color scheme looks very professional
  • Modern web design

30. Verzemnieks

URL: https://verzemnieks.design/

Janis Verzemnieks is living two parallel yet interconnected professional lives in the Latvian & global branding markets. This story is visually represented through a sleek graphic design featuring two contrasting images – both in color and texture. Cool!

What you can learn from this great startup website example

  • Carefully-planned-and-designed content above the fold
  • Unique text crawlers at the bottom part of the page
  • Engaging ‘real talk’ bio

31. Mozom Studio

URL: https://www.mozom-1.com/

Who wouldn’t love a website with a dark mode feature? Not to mention the limitless potential of this website’s design. Elegant, creative, and engaging!

What you can learn from this great startup website example

  • Aesthetic font style
  • Minimalistic designs – making use of big texts for emphasis
  • Unique arrangement of texts and images above the fold

32. TF card

URL: https://mytfcard.com/

Well, what do we have here? A comprehensive explainer animation, that’s what! Go check out this website and learn a thing or two from TF Card.

What you can learn from this great startup website example

  • Easy-to-understand explainer animation
  • Smooth scrolling
  • Straightforward and engaging copywriting

33. Sage

URL: https://sage.gg/

Well, wake me up for a sleek gaming website! Sage is a one-pager website that provides you with just the right information at the right place with the right design!

What you can learn from this great startup website example

  • Simple and cool web design
  • Attractive sneak-peek graphic design of a smartphone
  • Clear call-to-action buttons above the fold

34. Eginstill

URL: https://www.eginstill.com/

Eginstill serves you stunning interior design visuals and magazine-like layouts. This website is just the right balance between functionality and aesthetics – which prove to go hand in hand.

What you can learn from this great startup website example

  • Subtle fade-in animations
  • Unique arrangements of visual media
  • Sleek menu structure on the left side of the screen

35. Lyst

URL: https://www.lyst.com/denim-report/

Lyst is an interactive platform that visualizes the change in denim trends over the last 10 years as well as global insight. Visitors will definitely enjoy scrolling through this website as it offers lots and lots of amazing web design elements.

What you can learn from this great startup website example

  • Playful and colorful web design
  • Awesome scrolling animations
  • Heaps of dynamic graphic layouts

36. Banila Studio

URL: https://www.banila.studio/

We love a visually-satisfying effect from the very start of the website, right? And all the cool stuff doesn’t end there because this website has so much in store for you. Have a look!

What you can learn from this great startup website example

  • Highly-tinted images identify with the brand
  • Horizontal scrolling orientation with smooth animations
  • Lots of fade-in texts and crawlers

37. Gus

URL: https://gus.biz/

Gus lets its creative animations do all the talking. This website welcomes with a green grid and little text just right above the fold. With that comes a vibrant red graphic design that moves around the screen just like the classic DVD logo screensaver 

What you can learn from this great startup website example

  • Contrasting colors grab the attention of the viewers
  • Scrolling activates animations
  • Original web design

38. Grand+Nash

URL: https://grandandnash.com/

Interactive graphics, fade-in animations, catchy tagline – that’s it, this website has my full attention. Definitely check out this website!

What you can learn from this great startup website example

  • Soft and warm-toned images
  • Attractive geometric patterns
  • Floating 3D animations

39. Piston Nerd

URL: https://pistonnerd.com/

This is a cool one! Love the 3D animation of ‘the all-new M5’ itself. Very sleek, smooth, and top-notch quality. Another notable feature on this website is the vintage-style gallery. Awesome stuff!

What you can learn from this great startup website example

  • Black background really works well with the website’s concept
  • Clean and innovative web design
  • Great ‘specifications’ table

Inspiring one page website templates,

These are my favourites.

BONUS – Here is my favorite template

Job Recruiter Website Template

One page Template

URL: https://mycodelesswebsite.com/try-theme/job-recruiter

Why this is such a great template:

  • Clean design, great to turn visitors into customers
  • WordPress compatible, easy to customize
  • Free download if you’re a Divi member

Get started in 2 steps

1 ► Download your theme, click on the button above

2 ► Get a free domain with a one click Wordpress installation

BONUS: Elegant Themes

URL: https://elegantthemes.com/

Although this one officially shouldn't be in this list - I couldn't keep this one from you. Elegant themes has amazing website themes and leads by example. Their own homepage looks stunning.

What you can learn from this great  website

  • Playful design
  • Clear call to actions
  • Great user experience
Now you've found some cool one page examples,

here are your next steps.

Ralph de Groot

1

Find a web designer, or do it yourself.

The team at My Codeless Website offers high-quality websites for fair prices. We partnered up with a professional web design agency to deliver jaw-dropping websites that are not just good-looking, but conversion-focused.

Proven track record of over 300 websites built
Organized, easy-to-follow process from start to finish
Experts guide you through the architecture of your website

2

Website hosting that I recommend.

Where should I host my one page website? After trying many hosting services we found 2 which stand out.

Great for hosting a single website
Cheap
Great support

Great for hosting multiple websites
Free migrations

Ralph de Groot
Recommended Page Builder

3

Selecting the right page builder.

Analyze the best examples on this page and select a page builder that is powerful and isn't buggy.

Here is the one I recommend.

Get a professional logo.

I recommend you to hire a professional designer to create a logo. Prices starting at $5!

4

Grab my install guide.

Analyze the best examples on this page and select a page builder that is powerful and isn't buggy.

Here is the one I recommend.

Recommended Page Builder
Recommended Page Builder

5

Best Practices (BONUS).

Claim the right domain before it's gone

Spend your money wisely.

We recommend Divi, it's great for beginners and allows you to customize everything.

one page website building
You can use these amazing one page websites as inspiration for your own website. Of course you shouldn't copy these websites. Simply pick your favourite ones and blend them into your perfect design.
one page website design
I hope you enjoyed these one page website examples. If you need help to design a website, make sure to request a free quote. I'm sure we'll be able to help you out!
one page website builders
Are you looking for a one page website builder? I'm a big fan of Divi. Honestly, I've been using it for 5+ years now. It's such a powerful tool, yet easy to use. I can't recommend it enough!

About the author

Ralph de Groot loves great web design. In fact, you can wake him up at night if you found an inspiring website. Besides writing at My Codeless Website he also loves to read and to travel.

Growth hacking: 3 powerful strategies to promote your one page website

1. Go viral with a viral give-away

Imagine.

You send your website to 5 friends. Who each send it to 5 friends.

Now these friends also send it to 5 friends.  Oeh la la! Continue this loop for a while, and your website is actually going viral.

Viral Loops is a referral marketing tool that helps you to explode your website with new visitors.

We’ve used Viral loops to create virality with multiple websites. It allows you to build a sustainable referral scheme that helps you to grow your website rapidly.

2. Use local SEO

SEO is a great way to attract local clients. SEO stands for Search Engine Optimization and helps you to get free website traffic through search engines.

Check out these articles about local SEO if you want to learn more about this:

3. Do a press release

Yaiks! A press release? That’s not for one page websites, right?

Well. It is actually. Journalists LOVE small businesses and the entrepreneurs behind them. It makes sense – if you’re at a birthday party, friends are probably always asking how your business is doing.

Everybody loves entrepreneurs.

Write a press release about a milestone your company achieved. It doesn’t really matter what it is your company did, just make it juicy and interesting.

Create a list of journalists and reach out to them. The key in this process is the follow-up. If you’re just sending them just one email you’re probably not going to have a lot of success. Remind them at least once within a period of 7 days.

Being featured by local news outlets actually is good for your SEO. The more websites mentioning you on their website, the higher you’ll rank in the search engine.

Checklist: 5 ways to make your one page website beautiful and highly converting

1. Don’t break the 5 second rule

The moment a visitor lands on your website you only have 5 seconds to make a good impression.

That’s 5 short seconds to convince your visitor to stay on your website – and don’t hit the ‘back’ button.

Make sure the text on your website is appealing and gets your visitor excited. Don’t waste the first 5 seconds of somebody’s visit with unnecessary fluff.

2. Don’t confuse your visitor with too many call to actions

Great call to actions draw the attention of your visitors.

That said, you don’t want your call to action buttons fighting for the attention of your visitor. Pick the most important call to action for that page, and go with it.

In case you want to show multiple call to actions anyway, make sure to give them a different design, with your primary call to action being the most notable one.

3. Design mobile first

Last year over 52% of all the website traffic worldwide came from mobile devices.

More than half of the website visits are on a mobile device.

This percentage will only increase in the coming years, therefore the mobile design of your website is crucial for the success of your one page website.

When designing your website, think about the mobile design before you build your desktop website.

4. Watch people using your website without telling them what to do

Once your website is ready it’s time to launch. Well, almost.

Invite some friends or colleagues and put them in front of a computer. Ask them to pretend to be a potential customer and have them visit your website.

Now sit next to them, and don’t say anything (this will be harder than you think).

Do this with at least 5 people and learn from their behavior:

  • Did they follow the steps you expected them to?
  • Did your website load fast enough?
  • Was everything clear to them?

5. Collect real testimonials from real members

By now you probably realized social proof is extremely important when it comes to building a great website. Take it to the next level, and add testimonials from your members.

Don’t write them yourself, don’t ask your friends to write them. Everybody will feel something is off.

Want to go for the perfect score? Include video testimonials. Trust me, this will turn your website into a conversion machine.

FAQ

What makes a good one page website?

A one page website design should have a clean design, be easy to navigate and include a lot of social proof. Have a look at this page for great example websites.

How to create a one page website?

  1. Analyze the best examples on this page
  2. Make notes of what you like – and what you don’t like
  3. Design your own site with this a drag & drop website builder 
  4. Publish your website with our recommended hosting platform.

How much does a one page website cost?

A web designer will charge anywhere between $1800 and $4800 for a decent website. However, this article will teach you to do it yourself for less than $100.

What information is needed on a one page website?

Your website will need at least the following pages: ‘Home, About us, Contact, Timetable. To create trust with your visitor it’s important to show lots of pictures and videos of your classes.

 

You're now ready to get your one page website up and running!