The Top 20 One Pagers from 2014.
2014 was a phenomenal year for the One Page website. Did you know we reviewed 725 unique One Page websites in 2014! Here are more stats from last year if you are interested.
Below are our Top 20 picks out of the 73 One Pagers we awarded “Most Loved” last year. It was difficult cutting this down and there is no ranking order but each is given a reason why we think it was worthy of a Top 20 placement.
Factors that influenced our decisions are mainly the quality of the One Page website but there are one or two we have thrown in here due to the massive amount of social sharing they received – an obvious indication of reader appreciation. Hope you enjoy!
1. JSConf
Incredible One Pager promoting the now sold-out 'JSConf' event to be held next week in Buenos Aires. The One Page website features an impressive intro animation followed by the event Agenda arranged in a speaker timeline. Notable features include an interactive game in the header, an off-canvas JS terminal where you can change elements in the page and a countdown timer until the event. There is a spectacular attention to detail throughout the page. Contender for One Pager of the year for sure.
2. BrightMedia
The most gorgeous load transitions in this stunning One Pager for independent digital studio, BrightMedia. We don't normally list sites with background music but this subtle backing score just fits perfectly with the beautiful design. Lovely stuff.
3. Visage
Beautifully designed responsive One Pager for Visage - a service that creates slick branded reports, also currently building a self-service application. You can see of the obvious Squarespace influence but really loving the color scheme and crisp font choice. Nice touch with the horizontal slider showcasing the app dashboard that really fills a large screen well. Top job! *update* Read our interview with Visage designer Isaac Wooten.
4. The Costa Experience
Costa Coffee take us on an interactive tour of the journey from bean to cup. There is so much love that went into this One Pager I don't know where to begin. The illustrations are beautiful and each chapter is packed with color, subtle animations and loads of interesting facts. Lovely touch with the chapter preloaders around the directional arrows and the wooden frame around the site on bigger monitors. Stellar job Graphite Digital!
Enjoying the round-up? Get these round-ups in our Inspiration Newsletter 💌
5. Vinyl Day 2014
Superb colorful illustrations throughout this One Pager for 'Vinyl Day 2014' - an upcoming concert to celebrate vinyl and music featuring 12 live bands. The responsive adaption is solid too and I can't imagine how long it took to create illustrations for each band member for 12 bands. Stellar One Pager.
6. World of SWISS
'World of SWISS' is an incredible interactive One Pager that takes a traveler behind the scenes to experience a day with the Swiss Airlines crew. The site features a masterful level of parallax scrolling with a unique sense of depth (through the clouds) to the various sections of content. I can't begin to explain how well the videos are done and they have interactive "hot spots" within the videos to get more info on certain items. Last but not least that interactive flight path infographic at the end - actually links to booking those exact flights on the Swiss Air main site. Mind blown.
Update: unfortunately the site is no longer online but captured on video here.
7. Visionare
My word, now this is a beautiful One Page website. 'Visionare' is an upcoming application that claims to help you achieve your goals by drawing from the experience of people who have already achieved them. I seriously love this blend of flat design and texture. What a great intro animation as well - slick, vibrant and sums up all the categories in one image. Brilliant work by madeo from the Czech Republic.
8. World Food Clock
'World Food Clock' is a brilliant interactive One Pager bringing global food production vs waste to our attention. The infographics are exceptional with lovely CSS load transitions and fill your screen well, even on large resolutions. What really hits home is the timer that starts when you arrive clocking up x amount of food wastage since you arrived. Then the final uppercut is when you get to the bottom of the website it loops again - except the timer has increased reflecting your minutes on the site and even more food wasted. Exceptional One Page website.
9. Resanova
Responsive One Pager for 'Resanova' that features gorgeous SVG animations that come to life as you scroll the sections. Such a nice infographic load transition when you click on the hotspots on the intro illustration. From what I can make out the (French) One Pager is promoting a packaged solution for hotels - including a custom website, SEO, booking system and integrated a CMS. Beautiful work this by Studio Meta from France.
10. For Better Coffee
Freese Coffee Company bring us this beautiful One Pager illustrating the five essential rules for making better coffee. The One Page website comes to life with the use of Greensock and ScrollMagic creating vibrant animations as you scroll down. Lovely stuff. *update* Petr Tichy has deconstructed this build so we can learn how the magic happens.
11. Smartphones… Dumb Users
'Smartphones... Dumb Users' is a fun One Pager that takes a look at the typical smartphone users that we see everyday. The One Page website features several awesome colorful character illustrations and you can share each one on your social networks. This microsite is brought to us by Mobiles.co.uk - who of course offer Mobiles. Nice experimental marketing this that I'm sure will pay off.
12. Support Kyoto Protocol
Our first "Most Loved" One Pager of the year is a colorful, illustration rich campaign bringing awareness to climate change. The One Pager animates as you scroll down illustrating examples of day-to-day carbon emissions and ends off promoting the users to sign a petition. Incredible effort and well executed - I really hope their campaign goes viral. *update* Read our interview with creative director, Marjoe Bacus.
13. Degordian Academy
Gorgeous One Pager for 'Degordian Academy' - a Croatia-based lecture program on various digital marketing subjects. I honestly love everything about this event site but in particular the beautiful blend of typography, the lovely grey/white/red color scheme and the slick custom booking form. Extra points for a great adaption to huge screens and of course it looks great on mobile too. Stellar job.
14. CUPS Annual Report
Illustration filled colorful One Pager presenting the annual report of 'CUPS' - a non-profit organization dedicated to helping individuals and families overcome poverty. Such a cool Easter Egg where the fish gets chomped by a bigger fish when you scroll back up the page. Lots of love went into this page and I loved what they said in the build notes below.
15. WMNVM
Unique keyboard browsing and horizontal scrolling One Page portfolio for French Digital Designer, Lionel Durimel. We've featured Lionel's work before and his new portfolio is nothing less than his regular high standards. Lovely touch with the "glitch" effect you'll notice randomly while browsing. Also a nice touch with the progress bar at the bottom of your browser indicating how far you are within the horizontal scrolling portfolio item. The keyboard browsing is optional and works really well, give it a spin. Tons of effort and polish in this AJAX loading One Pager, excellent job.
16. Garden Estúdio
Gorgeous parallax scrolling One Pager for 'Garden Estúdio' featuring a lovely illustration filled design in a red/purple scheme. Love how the thin line illustrations "complete" as you scroll down. Also enjoying this trend of project screenshots animating and basically demonstrating the site UI along with the UX. A final shout out to one of the best website Footers I've seen, the forest parallax is just right and creates "depth" in the design. Beautiful.
17. Diamonds in the Sky
Beautiful idea in this interactive One Pager titled 'Diamonds in the Sky' where the user can create a star in a digital universe, then share the location after. Warning, there is sound but it is subtle and does add to the experience. Great job.
18. ELEKS Quality Assurance and Testing Reimagined
Illustration-filled One Pager showcasing the testing routine and quality assurance for ELEKS products. To be picky the sections start to feel a bit repetitive but there is so much added love in this site - a custom preloader, the contact form design is consistent with the illustration line style, the "hamburger icon" for the off-canvas navigation menu has such a cool click transformation into a close icon, the initial "power up load transition" in the first section is excellent and to add a cherry on top... the One Pager can turn into an interactive game. A great reference to really adding life and actually some fun to a brochure.
19. I Remember
What an incredible concept! 'I Remember' is a One Pager dedicated to bringing awareness to Alzheimer's disease. But in relation to the illness and memories, the website content gradually fades away and it's up to the users to keep adding memories to keep the site alive. If that isn't enough to blow you away, give the search a try. Incredible build this and you can't help but get emotional browsing the user-submitted memories.
20. Five Minutes
'Five Minutes' is an extraordinary interactive HTML5 experience that is presented as a game within a One Page website. Players have to stop the main character from turning into a zombie by keeping him focused on his memories, which raises the stakes of the game, involving the user directly into the story. Nice touch as well with the .gs domain extension. There is not much more to say other than this is possibly the best 5 minutes you will spend online today. Do it.
What an inspiration overload! Hope you enjoyed the hand-picked collection from 2014... before you put that scrolling finger on ice, why not help spread the love:)
Need more inspiration? Here is the website of the year archive:
2018, 2016, 2015, 2014, 2013, 2012 🔥
Hope you found a few good refs in there. Remember I’m always looking to add more quality examples for our community so hit me up on the twitters or email if you stumble upon solid ones.
Much love,
Rob
Twitter: @robhope
Email: [email protected]
