Written by Simon Geraghty.
6 one page website designs
A one page website design is a great way to tell your story as they are designed to present one main idea. One page sites provide a linear journey for the user and work particularly well for devices where scrolling is the main form of navigation. They also provide a great framework to showcase a range of highly visual and interactive elements on your site, including:
- Full screen photography and galleries
- Video clips
- Text and narrative
- Animated elements and gizmos!
Here we look at six of our favourite sites that are variations on the single page, or one page website designs, including our own work for soolnua.com.
1. Snowfall: the story that started an avalanche
The online news sector has been faced with a blizzard of challenges and the need to innovate over the past decade. Add to this recent leaked data showing that the homepage is dead as a gateway to content for newspaper websites. As a result the sector has sought to deliver new ways to engage readers who now access material through a wide range of devices and sources (facebook, twitter, reddit, etc.)
The New York Times’ blend of innovation, technology and the need to refresh and revitalise news publishing brought us ‘Snowfall’. The presentation format for the article is also cited as kick starting the trend towards one page website design in 2012.
Snowfall’s layout features clean blocks of text interrupted and interspersed with video clips, full screen photographs and animation.
The story also makes use of parallax scrolling. This is an animation technique where the foreground and background images appear to move at different speeds, creating an illusion of depth and an immersion into a 2D site design.
Snowfall can be read in a linear fashion, where you get a sense of all the material, or the reader can dip in and out via the chapter headings. What we find works well is multiple ways to interact with the content and explore a story.
This design format has subsequently snowballed creating a web design avalanche…
2. Kennedy, Lee Harvey and the Clock-tower
Next up the folks at National Geographic, another stalwart of the printed world who have tackled innovation head on. The site takes us back to a seismic event in US history, the JFK assassination. This website was developed to promote the movie ‘Killing Kennedy’ based on the book by Bill O’Reilly and Martin Dugard.
We love the way this incredibly content rich website seamlessly integrates:
- Photography, and the colour treatments applied to images
- Maps and other original documents
- Split screen animation to tell us about the two key protagonists (Kennedy and Oswald)
- Simple use of block quotes of text
- All the buttons and icons are all beautifully designed
- Here parallax scrolling is used more subtly to give depth to the narrative.
The site performs really well on both mobile phone and tablet. This time capsule is an incredibly engaging treasure trove for anyone interested in this event, however, it is not one that you are likely to explore in a single sitting.
3. Enter the Tiger: Life of Pi
Another book brought to the movie screen is our next example of a well executed one page web design. The Booker prize winning novel, and Academy award winning film Life of Pi, deserved, and got, an award winning website. The film business doesn’t do anything by half and the site created for Ang Lee’s adaptation of the Life of Pi is as breath taking as the fantasy adventure movie itself.
In keeping with the other examples of this format above, scrolling is the principle method to explore and navigate the website. The site also uses:
- Large bold images and stills from the movie
- Simple use of quotes and short text
- Some really nice animated facts and behind the scenes footage
- Other animation includes story board art transitioning into finished scenes
As you’d imagine there is also lots of video throughout. (Did you know they built the largest wave pool in film history using nearly 1.9m gallons of water?)
Like many of the journalistic pieces above the site is chapterised. The only downside? It doesn’t work on a mobile. But be patient, let it load and this is a site you will come back to and explore again and again.
4. Doing the business: Wolff Olins Game Changers
Here we return to New York and a site produced by Wolff Olins, who are the agency that came up with the look and feel of Microsoft’s Windows 8 product (the flat design and tiling or masonry effect).
Flat designs are focused on minimalist use of flat colours, simple elements and typography. Flat designs create an interface that is responsive to changes in browser size across different devices.
This single page website for the Game Changers research report, boldly combines:
- Clean headlines and body text
- Imagery, that’s given a pointillistic or pop art treatment
- Colour and flat design
We really like how the design accommodates the mix of imagery, text and animation. Other elements we admire is the integration of the Google Trends API and the use of Vines (short form videos) within the site.
As is common in this format, the site navigation uses scrolling navigation, but there is also a drop-down menu at the top. The site is a great report in itself for anyone interested in market research and trend spotting and gives you plenty to explore and return to on subsequent visits.
5. Time to Get Serious Studio
Over in the Philippines, creative communications agency Serious Studio’s website also uses a minimalist flat design. There always seems to be something happening on the site but this is balanced with simple design and lots of white space.
The navigation and menu is simple and clear, and the entire site can also be explored by scrolling down the page. The site uses parallax scrolling sparingly in keeping with the overall clean design.
This site quickly showcases their work, services, and clients. In the business world, long form descriptive site content is becoming less common, and this site uses short simple paragraphs to describe what they do.
We like their animated video, the benefits of which we’ve discussed previously, and it nicely showcases their illustration skills. Formerly Moving Things this recently launched site from the team is a responsive design, that is still undergoing some finishing touches when viewed on a mobile phone.
6. Suil eile for Sool Nua
When we started this project with long term collaborators and supporters of Dot Dash, Patrick Delaney and Padraic Gilligan, we wanted to distill some of the ideas and good practice from one page designs.
The lads approached us as they set about launching their new business venture, Sool Nua. This was a really enjoyable collaborative project, we wanted a site that was playful and interactive. We pitched the idea of a single page website early on to them and we all ran with it!
Some scraps from our project mood-board:
- Convey a sense of place, and global nature of their expertise.
- Incorporate video and motion
- Keep the copy short and tight.
- Use infographic style as a means of presenting information about their achievements (which are many!)
We also threw interactivity and playfulness reflecting the founder’s personalities into the melting pot. Some of the interactive elements below were developed in brain storming meetings with the client. Sketched on scraps of paper and brilliantly brought to life by our developer Billy.
We worked with the client to produce short and visual content. We also kept the menu simple and focused. They also commissioned some amazing shots by Sean and Yvette Photography, the pair behind South Studios, which aided our designs enormously.
Our aim for the new site was to present teaser content, encourage visitor exploration and a desire to connect and meet with Pat & Padraic.
We used parallax scrolling, scrolling navigation and animation to encourage further interaction.
If you want to discuss a one page website design for your business or any other ideas you have for your website why not email us today [email protected]?
Some hat tips to other great one page website designs:
http://proposify.biz/ (which looks like a great product)