parallax background

One page website design: How to make your site look amazing

How to get a WordPress mega menu
February 6, 2019
Website layout examples that make websites stand out of the crowd
February 8, 2019
 

Creating a website is quite difficult if you don’t know where to start. Designers came up with a new trend that seems to gather more and more popularity – the one page website. This trend seems to be effective and good-looking at the same time, which is exactly what people want from a website. This is a short guide that will describe how to obtain this one-page design easily.

No information will be hidden from the user, which will give visitors a more professional feeling. Moreover, it makes navigation extremely easy to handle, as visitors can find they are looking for rapidly. Everyone has something to gain if the one page website principle is applied.

Defining a one page website

CV
 
 

The one-page trend refers to creating a single page website in HTML that displays all the information at one. Scrolling and clicking are the only actions required to find information on such a page design.

To make it even easier to use, you can include Call-To-Action buttons, responsive navigation menus, interactive visual elements and so on. One page websites must be intuitive and very user-friendly, to increase the experience.

The benefit of a one page website in comparison with a multi-page one is that they are easier to understand by all types of users. Also, another considerable benefit is that one page websites load faster than multi-page ones and are easier to optimize.

Applicable tips for one page website design

Keep everything simple

When a visitor accesses your website, he should find exactly what he is interested about in a matter of seconds. Visitors who need to struggle to find what they are looking for will leave the website quickly. Make sure to place your contact information somewhere visible and remove information that is not relevant for a person who visits the website. When including information, make sure it answers the basic questions who, what, why, when and where.

Your business website might require something else

disco
 
 

A personal website page is different from a business one. Depending on what type of company you own, you need to choose what’s the best fit: one page or classic. If the features of your business allow you to use a one page website, then go for it. If there’s too much information to handle, you might want to opt for a multi-page one.

Anyway, weighing your options carefully is the first step in deciding what it’s best for your business website. One page websites are more appropriate for businesses that require including a lot of images and small chunks of text, such as an architecture company. Do your research and see what works best for your situation.

Putting together the layout

Owltastic
 

The layout of your website will be the one that defines the user experience. Thebest one page websites use a linear layout that keeps users away from getting lost in information. The layout of a one page website is also easy to adapt for mobile versions. Moreover, it needs fewer resources from the browser compared to a website that has multiple pages. It is a great format for businesses that need responsive, simple websites.

Plan your content wisely

Once you decided that a one page website is the most suitable choice, you can start putting it together. The content has to be included on the page strategically, meaning that you need to think what you want your visitors to see first. The order of the site is pretty basic since it’s based on scrolling mostly. You need to understand content hierarchies and perceive the website through the eyes of a visitor in order to plan the content the right way.

Choose a template

media
 
 

There are several things that your one page website must include no matter what. Most landing page templates you can find online include these elements, such as an appropriate menu, columns, a social bar, and a footer. In one page website, design is important to stick with some basic rules to make the experience enjoyable.

You can find one page website templates to gather your inspiration from online. You can choose a customizable one or you can build one from scratch, depending on your business type. There are multiple possibilities to choose from, but the purpose remains the same – making visitors return to your website and enjoy their experience with it.

Don’t leave multimedia aside

salmon
 
 

As mentioned before, one page websites are more appropriate for businesses that need to include more multimedia content than written content on their website. Because of this, you need to carefully select the visual content you include on the website. The text bits must be enriched with the help of images, videos,and slideshows. The purpose is to give readers a quick overview of your company, without making them read large pieces of information.

Use optimized images

First of all, start including optimized images on the website. Non-optimized images will make the website a lot slower and this will damage the overall user experience. Make sure that the images are high-quality, and the first impression is already built.

Include video on your website

barman
 
 

Videos governate today’s websites because they are the easiest and fastest method to transmit a message. Visitors definitely prefer getting their information from a video rather than by reading large chunks of text.

Users enjoy slideshows

Finally, slideshows are a great way to display multiple images at once, which is basically the purpose of a onepage website. Slideshows are easy to use and visitors seem to enjoy their presence on a website.

Deal with scrolling options

Bavette-La-Boucherie
 

Once page websites have one issue – scrolling. Users may have to scroll and scroll until they reach what they want and clicking on something might ruin all the scrolling. In order to get rid of that problem and ensure users that they will have a great experience, you need to add different buttons that allow them to go back to the upper side of the webpage or at the end of the webpage. It will be much easier to navigate it this way.

Parallax effects can’t miss

Untitled-1
 
 

Parallax scrolling is another trend that has been very popular lately and it refers to a 3D illusion that moves the layers of your website in the background as the user scrolls down. This effect offers one page websites the extra touch it needs to catch the attention of the visitors. Make sure to check if these animations slow down your website or not.

Examples of one page websites

Anime.js v3

Animejs-v3
 

Stunning One Pager announcing v3 of the Anime.js library by Julian Garnier. The Landing Page does an excellent job showcasing the power of the library with several impressive animations throughout the page.

BePet

pet
 
 

Rohit & Anita – Save The Date

Rohit
 

What a wonderful "Save The Date" One Pager for the upcoming wedding of Rohit & Anita. As you scroll, you are taken through a colorful forest revealing subtle rainfall, a beautifully illustrated hornbill and of course the date to diarize.

Epicurrence No.8

Epicurrence
 

Another year, another cracking One Pager promoting Dann Petty's Epicurrence event, this time snowboarding in Breckenridge, Colorado. Dann put together quite the dream team for this one and the result is extraordinary. Features include vertical and horizontal parallax scrolling, unique interactive dissolve effects, an intro image that changes according to your time of day and if I'm not mistaken that's a snowball custom cursor? Epic!

Fusion Lite

Fusion-Lite
 

‘Fusion Lite’ is the free version of the Fusion Bootstrap 4 multipurpose HTML template by UIdeck. Features include a fixed header navigation (that smooth scrolls to sections), services overview, product feature section, pricing tables, testimonial slider, team, Google Maps and a contact form.

BeDrone

drone
 
 

Free PR Book

Free-PR-Book
 

The Free PR book One Pager is an excellent reference to a quality Landing Page for a book launch. The long-scrolling site (built on the Shopify platform) features a mint intro cover shot (with a shine effect to emphasize the emboss type), clear typography, a testimonial slider, chapter preview download and well-presented author bios.

ARK by Cregital

ARK-by-Cregital
 

Such a beautiful design in this One Pager for ARK, an initiative by Cregital Agency to help charitable causes in Nigeria. Lovely touch with the friendly animated characters, the floating team members, the unique contact form design and of course the dark mode. My only real crit is there needs to be a ballpark USD comparison to the Nigerian Dollar amount for gift context.

Polaroider

Polaroider
 

Slick One Pager for Polaroider – a neat web app to create polaroid-style images to print. You simply upload your images, add handwritten-style captions and generate a printable PDF.

BeHairdresser

hairdresser
 
 

Nizo

Nizo
 

Clean One Pager for the Nizo filmmaking iPhone app featuring filmmaker profiles and possibly the most minimal newsletter sign up form (including social accounts) I’ve seen.

LimePay

limepay
 

Neat "Marketing Permissions" option under the newsletter sign up in this Launching Soon page for Cryto startup LimePay.

BeBirthday

birthday
 
 

Atmosfer

atmosfer
 

Neat integration of their product roadmap in this Landing Page for Atmosfer, an app to monitor the security of your mobile ecosystem.

Magnet Finge.rs

Magnet-Finge
 

Fun use of the .rs domain extension in this One Pager by Charlotte Dann explaining why she has magnets in her fingers. Neat touch (excuse the pun) reusing the intro magnet design element as the expand button in the FAQ accordion and the use of the Fleisch Wurst typeface – that translates to Flesh Sausages if I’m not mistaken. Bravo!

BeGSMservice

gsm-service
 
 

Denys Mishunov

Denys-Mishunov
 

Colorful One Pager with loads of personality for developer and speaker, Denys Mishunov. Note the neat adaption to vertical stripes on mobile. Cheers for the build notes!

Pyrismic

Pyrismic
 

Lovely blue color scheme in this launching soon page (built using Webflow) for upcoming freelance productivity app, Pyrismic.

BeWatchmaker

watchmaker
 
 

Sneaky Santa

sneaky
 

Fun, interactive One Page Christmas eCard from the gang over at 14islands featuring a (sneaky gift-stealing) Santa you shake to retrieve your presents. Neat touch with the initial “snatch” preloader, the falling snow and the mitten custom cursor:)

Post Haste

Post-Haste
 

To celebrate the beta release for MailChimp‘s new postcards, they made this awesome video game One Pager called Post Haste. After you’re briefed you control Freddie (their mascot) to deliver mail while dodging fun obstacles. What a good time and a quality homage to the classic Paperboy game!

BeMerryChristmas

xmas
 
 

Grand

grand
 

‘Grand’ is a free Event or Conference Landing Page HTML template by UIdeck built on the Bootstrap Framework. Features include intro slideshow with big image background, a countdown timer, a fixed header navigation that smooth scrolls to sections, event schedule carousal, speaker list, past event gallery, FAQs, Sponsors, Ticket pricing table, newsletter signup block, Google Maps location and ends with an enquiry form.

Laracon VII

Untitled-1
 

So much awesome attention-to-detail in this pixel-themed One Pager for the upcoming Laracon VII event. Features include unscrambling text section headers, wicked Kirokaze artwork/animations and subtle easter eggs throughout.

Conclusion

Once you learn some things about page design, it’s easier to put your website together. The tips you found in this article should help you achieve exactly the result you want and offer users the best navigation experience.

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 157,000+ customers.

Comments are closed.

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.