Search Over 25 Million Graphics

 by Shutterstock

15 Stunning Examples of What a Cool One-Page Website Should Look Like

Once you’ve had one or more multi-page website designs under your belt, putting a one-pager in place should be a piece of cake – right?

It doesn’t work that way. When you’re trying to get everything you feel is important on a single page and do it in a way that won’t send visitors scurrying toward the exits, you’ll either discover building a one-pager isn’t so easy after all, or you’ll go and publish only to wonder later on why you’re getting so few conversions.

Designing a one-pager takes a significant amount of planning, which is the purpose behind the following guide that addresses 5 critical elements that can make or break a design.

Take them to heart and you’ll find yourself on solid ground.

5 Critical Elements that Can Make or Break Your Design

#1 Identify the GOAL and Work Toward It

It simply doesn’t make sense to start designing a one-page website if you haven’t nailed down what you expect it to achieve. Set a goal first, and then start planning a design structure that will achieve that goal.

A typical one-page website is designed with a single goal in mind with:

  • the purpose of selling something.
  • the purpose of announcing an event.
  • the purpose of presenting a portfolio, etc.

Now that you have a goal in mind, you can start concentrating on how to go about achieving it and not do dumb design things that might chase visitors away.

Like slow load speed for example.

To avoid creating a page that takes forever to load, where “forever” may be anything more than 5 or 10 seconds to some, be careful with special effects like parallax, that can slow things down.

Bistro Agency

Bistro Agency

This website features a nice interactive effect that’s above the fold and doesn’t drag down its load speed.

Be Moving 3

Be Moving

This BeTheme pre-built one-pager avoids slow load speed by tricking you. Its features include a static image that appears to be dynamic.

Think Pixel Lab

Think Pixel Lab

Tiny animated items have been added to liven up this page’s illustration, but they do not slow anything down.

Be Product 2

Be Products

Sometimes a page’s fresh look is all you need to make a selling point.



This page is an excellent example of how engaging and effective large images and sliding panels can be.

Be App 4

Be App

A long, drawn-out technical dissertation isn’t necessary to successfully promote an app. A genuinely cool presentation like this one does the trick.

#2 TEXT: Keep Text to the Minimum & Make Sure It’s Easy to Read

Avoid clunky blocks of text by all means. Users aren’t looking to read a novel. Keep text to a bare minimum by going with bold headlines, concise paragraphs, and bullet lists. Make an extra effort to integrate text with images in a meaningful way.

Dangerous Robot

Dangerous Robot

This website is so entertaining that you might want to go through every section a second time.

Be Tea 3

Be Tea

Neat organization, just like a page’s fresh look, can be enough to make the sale.

Hello Alfred

Hello Alfred

The key information is above the fold, and bullet lists save space by keeping the message concise.

Be Cakes

Be Cakes

Another example of why large attractive images accompanied by appropriately placed paragraphs of text can be so effective.


Mercedes Benz

When you’re advertising a vehicle that has the stature of a Mercedes you can focus more on high quality imagery and less on text.

#3 VISUALS: Identify the Right Patterns & Use Negative Space Wisely

It’s well known that people tend to scan an image in a Z pattern and follow text in an F pattern. Keep this in mind when mixing elements to ensure a smooth flow.

You always want to be attracting attention to the critical stuff and avoiding things of secondary importance.

Chris Connolly

Chris Connolly

This website provides an excellent example of how the proper use of white space gives a sense of order.

We Shoot Bottles

This website uses white space – as a canvas for wildly creative content.

Be Dietician 2

Be Dietician

This pre-built one-page website shows how white space can be used to maintain a sense of order and make the various sections appear to pop out.

Dribble’s Year in Review

Dribbbles Review for 2018

Here’s how you can use a mix of different design principles to create an amazing visual splash. Not easy, but definitely possible.

Nasal Drops

Nasal Drops

Have you been commissioned to produce a page promoting nasal drops that will excite? Fear not. This one breaks the mold with its ingenious use of slides, animations, and white space.

#4 NAVIGATION: Making It Easy to Navigate and Entertaining to Scroll

You have to be careful when choosing navigation functionality for a one pager as it can be the one thing that keeps visitors engaged and looking for more or simply chases them off the page.

Alternative navigation is the key. It makes it much easier for people to jump from section to section with a single click – as opposed to a search-by-scrolling approach. Make good use of sticky menus, sidebar menus, and auto-scrolling nav links – as shown in the following examples:

Sergio Pedercini

Sergio Pedercini

This website puts 3 different auto-scrolling links to good use.

Be Game

Be Game

You might find Be Game’s navigation experience highly entertaining.

Be Landing 2

Be Landing

Be Landing 2 illustrates how you can scan a page with 3 mouse scrolls.


Brain Flop

A menu on the top and one on the left is one way to help visitors navigate a site.

#5 CALL TO ACTION: Identify the Type or Style of CTA You Want and Don’t Hesitate to Use It

Critical element #1 addressed the need for a goal. #5 addresses the final step toward achieving that goal. Don’t hesitate to use CTA buttons, place them above the fold, and make sure they stand out.

It’s not all that difficult since the aim of most one pager sites is to direct people toward a single action. For multiple products you may need more than a single CTA button, and you may want to use Learn More buttons in addition to the usual Buy Now buttons.

Be Hairdresser

Be Hairdresser

In Be Hairdresser the CTA button is placed above the fold. There is also one in the menu.

The Art of Texture

The Art Texture

Two CTA buttons placed above the fold give users a choice.



This site uses a simple opt-in form with a CTA button that stands out.



Reneza uses CTA buttons freely but judiciously and with a proper choice of colors and text sizes.

Wrapping It Up

It’s one thing to know and be able to recite these 5 critical elements of one-page website design. It’s quite another thing to practice them and apply them religiously.

They may seem straightforward, and they are, but when you start mixing them it can be tough; in which case you might find this shortcut appealing:

Use prebuild websites that have already incorporated these critical elements.

Be Theme is a good resource with its huge library of 400+ pre-built websites including more than 60 one-pagers; each of which can be customized to fit your needs.

Sample news website on tablet computer
Blog authors writing articles. Freelance writers with laptops creating internet content. Vector illustration for online education, people of creative job, seo marketing concept
Set of outline icons related to  content creation, media. Linear icon collection. Editable stroke. Vector illustration
Blog Website Article Lifestyle Online Word
Online Shopping Website on Laptop. Easy E-commerce Website Shop by Smartphone, iPhone, iPad and Laptop. Close up Hands Using Smartphone Shopping Cart read Online Article, Blog. Digital Payment gateway
Reading news on mobile phone. Hand holding smartphone with newspaper, news website. Modern flat design graphic elements, thin line icons set for web banner, web site, infographics. Vector illustration
Corporate website links abstract concept vector illustration set. Follow us, blog articles, events, social media, subscribe for newsletter, publications, company page, notification abstract metaphor.
Landing page wireframe design for business. One page website layout template. Modern responsive design. Ux ui website: features, product, articles, statiscics, testimonials.
AI Rewriting, writing articles, SEO content generation using artificial intelligent and ai neural network models. AI generates new text by processing input using language model trained on vast corpus
Simple Set of Copywriting Related Vector Line Icons. 
Editable Stroke. 48x48 Pixel Perfect.
Articles, modern flat icon
Latest Article Webpage Advertising Announcement Concept
The concept of an isometric illustration of the development team is compiling a website and blogger article
Big infographics in flat style. Vector illustrations about digital projects, management, clients brief, design and communication. Use in website, corporate report, presentation, advertising, marketing
Abstract seamless pattern with chaotic layering of newspaper text, illustrations, headlines in a grunge style. Black and white vector background. Suitable for wallpaper, wrapping paper, fabric design
3D Isometric Flat Vector Conceptual Illustration of Digital Marketing.
Copywriter concept. Writing creative article in blog. Social media promotion. Freelance work. Flat vector illustration
Colorful pencil with wings vector illustration. Design for creative writing and creation, storytelling, blogging, education, book cover, article and website content writing, copywriting
Authors pen and typewriter to write articles, magnet to attract blog followers and feedback, new ideas for text thin black and red outline symbols, vector illustration. Copyright line icons set.
Creative article writing, content creation and marketing or text editing service website concept. Tiny cartoon people around paper scroll on computer, vector illustration
Concept News update. News webpage, information about events, activities, company information and announcements for web page. 3D Web Vector Illustrations.
3D Isometric Flat Vector Conceptual Illustration of Blog Content Creating, Effective Content Marketing Strategy for Business Blogging
Line icons set with flat design of website main elements and page features, web site mobile version, navigation pin, contact form and internet analytics. Modern vector pictogram collection concept.
Line icons with flat design elements of graphic design and web product development, UI and UX website making, A/B testing usability project. Modern infographic vector logo pictogram collection concept

Leave a Comment

Your email address will not be published. Required fields are marked *

Unlimited Access

68% Off