Web Design MUST Haves for One Page Sites
November 8, 2014
CONSUME CREATIVELY
This content is available in:
This content is available in:
TEXT
Parallax websites?! What’s THAT? Parallax sites are those one page websites that require you to scroll vertically, or horizontally, through the site’s sections instead of using a main navigation to travel from page to page. The entire website exists on a single, continuous web page rather than on multiple, shorter pages.
When it comes to creating this type of website there are four important design techniques to keep in mind to ensure the site offers a splendid user experience.
1. Sticky Navigation
A website’s navigation bar is typically located across the top of the page. It contains the titles and links to the various pages, allowing visitors to easily find the information they’re looking for.
At first you may be wondering why a parallax website would even need a navigation bar since all the information is on one page. Interestingly enough, it’s because the information is all on one long page that a navigation bar makes sense. A visitor could click on the “Contact” tab in the navigation bar and quickly be transferred to the bottom of the page instead of having to scroll through all the other content. Think of the tabs as labels for each section of the one page site rather than links to separate pages.
A sticky navigation can be designed in a plethora of ways; Smart Phood uses a simple series of unobtrusive dots to illustrate the different sections within the one page layout. The dots remain permanently down the right side of the page, regardless of where a visitor is within the vertical layout. Clicking a dot takes the visitor to it’s respective “section”; the circle dot represents the current “section” you’re viewing. One suggestion: label your navigation so your visitor knows which section the “dot” will take them to.
Not only is it important to have a navigation bar, it’s crucial to include a sticky navigation with a one page site. Sticky means that the bar stays fixed in your viewing window regardless of how far a visitor scrolls through the site. Make sure the navigation bar is visible to visitors at all times so they can quickly jump from one section to another. Using sticky navigation will make the page more user-friendly.
This series of images illustrates the motion and color blocking incorporated into the Smart Phood parallax website. Visit the site for the full experience.
2. Changing Background Colors
Whether you envision a one page website that flows horizontally or vertically it’s very important to incorporate color blocking into the design. If the entire background is a single color it’s hard for visitors to determine when the content switches to a different topic or section.
Color changes are great visual cues that allow visitors to literally see where each section begins and ends. The changing background colors also keep visitors stimulated and hooked into your content while they scroll.
3. Motion Effects and Engaging Elements
Most parallax scrolling websites are designed to be visually exciting with new elements appearing and others disappearing as you scroll through the site. The constant motion works to keep visitors intrigued as they travel through the site, wondering what surprise they’ll encounter next. Without those engaging elements and unique effects, navigating through the site becomes monotonous and visitors may leave out of boredom.
4. A Wicked Awesome Loading Page
By nature of the site design, a one page site takes a bit longer to load than a multi-page website because the entire website has to load at once, not just the home page. With that in mind, if visitors to your site have to wait this extra time for the site to load, you’ll want to give them something interesting to look at in the meantime to persuade them not to leave. One way to keep your visitor’s attention is by incorporating an awesome loading page into the design of the site. Depending on what your site is for you can get pretty creative with this. The design doesn’t have to be super complicated, but movement usually helps. For instance, the loading page on the Smart Phood website is a spinning donut with “Loading” written in the middle of it. The text expands and decreases in size as the donut spins.
Keep these four design tips in mind if you’re interested in building a one page website. If you already have a parallax website, consider altering your current design to accommodate these one page web design must haves.
Who Manifested This Madness?
This fabulous human, that's who.
Monica Maye Pitts
Monica is the creative force and founder of MayeCreate. She has a Bachelor of Science in Agriculture with an emphasis in Economics, Education and Plant Science from the University of Missouri. Monica possesses a rare combination of design savvy and technological know-how. Her clients know this quite well. Her passion for making friends and helping businesses grow gives her the skills she needs to make sure that each client, or friend, gets the attention and service he or she deserves.
