When designing a website, try asking yourself these questions. Does your site have limited content? Are all the content related? Is your website aimed at selling a specific product or service? Are you familiar with Ajax, JavaScript or CSS3? If your answers are all “Yes”, it might be a good idea to go with the single page approach.
Single page website means that all the content lives on the home page, which allows the users to scroll the page or use the navigation to jump from one section to another. With the web technology development, we may see a steady increase in popularity of such one page website. It gives designers a big opportunity to show their talent and skill of working through an amazing website. From the visitors’ point of view, when navigating the content on a single page website, they can enjoy a quicker and more responsive user experience, for they don’t need to go to a new web page.
However, to create an effective single page website is not that easy. There are some tricks for you to consider, and which I’ve included below.
Be Straight to the Point with an Informative Header
As there is limited room for content, your single page website should be focused on a certain purpose. Always make your content to the point with the stuff that matters. To achieve this, an informative website header is crucial. We know that picture speaks louder than words. And informative header may immediately send the right message to the readers, convey the essence of your website and force visitors to continue their viewing of the rest of the site.
The site of Coucoushop just shows visitors its main service clearly in the header. The red bag with many stuff in it and the words right near the picture give visitors the message that this website is about the online shopping of bags; and this bag is made from durable fabrics and has enough space to keep your stuff under control. Then if visitors are interested in this product, he or she will scroll down to know more about it.
Given the first glance, the beautiful header of this site will let you know that it is about the business of bakery that includes fresh pastries and homemade cakes.
Easily Guide Visitors with Fixed Navigation
For most of the single page website that contains more content, it will require more of visitors’ scrolling. To avoid confusion, you may consider using a fixed navigation menu that always stays with the user. It will clearly inform visitors that they may be direct to another screen of external resources at any time while browsing through the website.
Visit the site of Hoynebrewing, you will see this technique being effectively put into practice. Wherever a visitor is on the website, the navigation is fixed on the top of it.
For the website of Hellokarb, no matter which part of the content you are reading, you will notice that the navigation is fixed on the right part of the layout clearly.
Create a Creative Layout with Parallax Scrolling
The layout is probably one of the most important aspects of a single page website.
Excellent design and creative layout will be much more memorable for readers. Apart from the common vertical or horizontal scrolling type, you may also apply a unique parallax scrolling technique. This interesting layout designed wisely can draw in the target audience, and bring visitors an engaging and ravishing browsing experience.
This site shows us a beautiful parallax scrolling effect. When scrolling down, the background images move slower than the foreground images, which create an illusion of depth.
WeBleedDesign is another single page website that uses the parallax scrolling technique. As you scroll down the page, the graphic of colored bars are smartly combined with other background elements to produce an innovative design.
Add a Sense of Life with Interesting Designs
As one page website should contain all the information in one page, designers need to take some tricks to avoid the boring visual experience. Here, a fun approach often creates an enjoyment and is also one of the ways to leave a lasting impression. Thus, you may add some funny pictures, animations, slideshows or transitions to make your site really stand out among others.
When loading this personal site, there is a funny guy jumping in the middle of the site. And then, you will see the whole website with the designer’s interesting show while you are scrolling down.
This is also a designer’s website, which is really vivid. You may see the animated head of the designer on the top of the website with different expressions.
Keep Neat By Clearly Setting Apart Each Section
The content in a clutter will serious do harm to the legibility. Just try to let your website content look neat and be arranged logically, and this is always the fundamental rule in web designing, especially for single page website. Therefore, first of all, you need to determine what content needs to be presented first and what will follow. And then make sure that all the content on your one page site is not too close together, and allow the visitors see the transitions from one section to another easily. To help with this, you may employ a header, an image, a line or even a white space to set areas apart from one another.
As a site for shooting photographing bottles, it uses products images to separate different contents and keep them in a clear layout. The horizontal scrolling technique also makes this site stunning.
Bullet PR is a boutique agency specializes in Public Relations for the arts, music, fashion, creative and travel sectors. Its website was created in a unique concept with a long color stripe to connect different parts in a logical manner. And it creatively uses the subheads of creative fonts with a distinctive actual line as the segregating element.
It’s Your Turn to Talk
So, if your site doesn’t call for a lot of content, a single page website design is a good choice for you. Hope these tips have inspired you to create your awesome one page site. And you may use the comment section below to share some good tricks or examples with us. Thanks.
