5 Design Must-Haves for a One Page Website

Are you planning to create a website that has just a handful of pages or sections? Then a One Page website or a Single Page website design is an excellent choice. A traditional website will have multiple pages and a clickable menu that can used to navigate to individual pages. But a typical one page website has only a single page, split into multiple sections referred to as Screens. Navigation controls may be present to help scroll down or up to a specific screen.

Why go for a One Page Web Design?

One Page websites are intuitive to use. The only thing the website viewer need to know to navigate a typical one page website is scroll. If designed and developed properly, one page websites can be easy to maintain and consume less bandwidth.

One of the most common use of a one page website is as a pre-launch website. If your company website is under construction, a one page overview about your company can be an ideal pre-launch website. If you are planning to start a blog website, then you can create a one page pre-launch website with a sneak peek and a newsletter sign-up form. I have also seen a lot of one page websites that act as single product e-commerce websites.

While searching for a good one-page website to show as an example, I found Sector, which is a one-page website template, on ThemeForest. Let me walk through some of the design must-haves for a one page website, using Sector – Demo 2 as an example.

Must-Have #1 – Visually Appealing Hero Header

Sector’s one pager starts off with a Hero Header. A hero header is an oversized display with a visual, text and/or navigation elements usually placed at the top of a webpage. The visual must be appealing and relevant to the content of the website. Judging the book by its cover is more common than one would like to admit. So choose the right “cover”, as it can make or break a hero header.

A visual on a hero header can be a single image, a video, a slider or an animation. In the Sector example, the hero header is an image slider. Clicking on the white arrows on the left or right of the image will horizontally scroll the header to display other images and content.

The big bold title seeks the viewers’ attention. The image acts as a beautiful and relevant background without distracting the visitors from the title.

Must-Have #2 – Sticky Navigation

A strategically positioned Sticky Navigation makes the user navigation intuitive. When sticky navigation is used, the navigation controls are stagnant while the content moves. This helps with any orientation issues from long scrolling on a one page website.

On Sector, the navigation remains at the top right even if the viewer scrolls down the website. On the right bottom corner there is a blue arrow that allows viewers to head back to the top of the webpage, irrespective of which screen they are in. Clicking on the navigation links (e.g. About or Contact) will take the visitor down/up to the relevant section. But as shown in the screen shots below, the navigation controls are still visible.

Must-Have #3 – Responsive Design

Responsive web design makes a webpage look good on devices (desktops, tablets, and phones) irrespective of its screen size. This is achieved by using fluid proportion-based grids and flexible images that can be resized, hidden or moved to fit any screen using HTML and CSS. Given below are screenshots of Sector from a mobile device. In order utilise the screen real estate to the maximum, the menu is “shrunk” to a Hamburger Button on the top right corner. Clicking on this will pop up the navigation links.

Must-Have #4 – Varying Backgrounds

If the entire background of a one page website is monochromatic, it makes the website monotonous. Colour blocking can be incorporated to demarcate screens and acts as a visual cue to the visitors to literally see where each section begins and ends.

Must-Have #5 – Parallax Scroll

Parallax scrolling has been around for over half a decade now. And one of the best places to use parallax scrolling is on a one page website. Parallax backgrounds is an excellent tool to engage visitors and improve the overall experience that a website provides.

The below video snippet shows both the varying backgrounds as well as the parallax scroll implemented on Sector.