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.

Sheerlink

Sheerlink

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

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.

WeShootBottles.com

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.

Brainflop

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.

Pyrismic

Pyrismic

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

Reneza

Reneza

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.

Share:
Subscribe & get a FREE Bundle of 30 files

I accept the privacy policy and would love to receive emails

Ad Banner for Tailor Brands an Automated logo design and branding company

Leave a Comment

Your email address will not be published.