The Top 20 One Pagers from 2016.
Below are my Top 20 picks out of the 485 One Pagers I reviewed last year. There is no ranking order but each is given a reason why I think it was worthy of a Top 20 placement.
Deciding factors were of course the quality of the One Page website but a few are included due to the huge amount of social sharing they received.
Hope you get your inspiration topped up to create something beautiful in 2017:)
1. A Bear’s-Eye View of Yellowstone
Incredible long scrolling One Pager that takes us on a journey with 4 bears as they navigate the heart of Yellowstone, as seen from the bears’ own point of view. Yes, there is a footer site navigation that we don't normally allow (as this makes the website technically multiple-page). But what an excellent reference to a Long-form Journalism website - a big trend in digital publications that we're seeing much more of. Make sure you read the case-study by Hello Monday that dives deep in the build. Stellar work by them.
2. Keep Portland Weird
Wonderfully fun One Pager having a laugh at the items we'll need to "keep Portland weird" if there ever was an earthquake. One of those sites debatable if it's a true One Pager but the transitions are just gorgeous and absolutely seamless. Excellent work by the Oblio team.
Enjoying the round-up? Get these round-ups in our Inspiration Newsletter 💌
3. Seedlip
Absolute jaw-dropping design in this One Pager promoting 'Seedlip' - the world's first non-alcoholic spirits. The Singe Page website is built into the Shopify framework with a slick off-canvas shopping cart integration. There is so much to love in this site; the whitespace, the stunning product shots (not to mention that branding), the cocktail recipe slider with downloadable PDF and this complementary typography blend of 'Brown' and 'Baskersville' fonts. Possibly the most gorgeously designed One Pager we've featured this year. Top work this by Rotate° from London!
4. Navigating Responsibly
Incredible parallax scrolling One Pager providing information on what Danish Shipowners are doing to help with environmental and climate challenges. So much to love in this Singe Page site but highlights are definitely that mobile navigation load animation, the stunning big typography and that seriously gorgeous load transition of the off-canvas case studies. Top work this by Danish digital agency, Spring/Summer. Easy contender for One Pager of the year.
5. Resn
Phenomenal One Page website for New Zealand based digital agency, Resn. The Singe Page website starts with 6 unique sections where you hold your cursor down to load the interactive animations. Each incredibly impressive. Clicking top-right reveals the menu where you navigation swiftly to their work. The transitions are gorgeous and overall execution just top drawer. Easy contender for One Pager of the year.
6. Rogie
Dazzling One Page portfolio literally bursting with color for designer/dev, Rogie. The Singe Page website has so much flavor including an intro confetti animation, a colorful background wavy gradient (that moves!) and a beautifully slick portfolio arrangement that slides projects into a central device. Easy contender for One Pager of the year. Final little shout-out to this awesome use of an .ie domain:)
7. Cybeer Bar
Oh man, just when you thought you'd seen it all. Digital agency Leavingstone have created this fun interactive One Pager that digitally pours a beer - using your phone. Yup, you have to see it to believe it. If you're reading this on your mobile, here is a video demo. Looking forward to the fun future when we'll be interacting more with websites like this.
8. Structure
Beautiful minimal design in this unique One Pager for an upcoming exhibition in Milan called 'Structure'. Love big typography (and font choice) and what a fun feature where you can drag around most the content within the page.
9. 24 Lever Street
What a gorgeous colorful One Pager filled with fun character animations representing '24 Lever Street'. The long scrolling Singe Page website features a tall illustrated building showcasing which tenants occupy each floor of '24 Lever Street' along with the vacancies. Lovely collaborative work this by Nine Sixty & True North digital agencies from UK.
10. 56
Great vibe portrayed in this long scrolling One Page portfolio for Toronto-based design studio, 56. Couple really nice touches in this site; the initial load transitions with the 3D hover sensitive background pattern, the hand icon that changes direction as you scroll up and down, the whole site color scheme adaption to align with the current project you're browsing, the funny tagline that randomly changes and the META title tag that keeps changing it's algorithm but always equals to 56:)
11. 2016 makemepulse
Incredible interactive One Pager by digital agency, makemepulse, wishing you a successful 2016. The effects are mind blowing and an excellent reference to how far we've gone since Flash died.
12. Plane—Site
Gorgeous 3D shape animations and unique transitions in this colorful One Pager for Berlin based digital agency, Plane—Site. The Singe Page website features lots of info but still feels uncluttered through it's minimal design approach. Excellent work this by Ben Roth and Owen Hoskins.
13. Sonikpass
Slick One Pager with gorgeous transitions promoting 'Sonikpass' - a new "passwordless" security solution. This Landing Page actually links out to a TypeForm that gathers info about your business before you begin.
14. 100 Years of National Parks
Centrally-divided layout in this excellent One Pager taking a look back at 100 years of the National Parks Service. Such a lovely touch with the SVG "contour" load animations within the big numbers. Also choosing the Geogrotesque font for an outdoor-themed website is a perfect example of adding x-factor. Great job Dallas and cheers for the build notes.
15. Skylark
Stunning One Pager for 'Skylark' - a series of concept homes designed for the 'Blue Ridge Mountains'. There are lovely little touches throughout this Singe Page website like the background contour load transition in the Residencies section. Also make sure you check out the Landscape image slider, gorgeous stuff. [book-feature]
16. 7 Tests for Gaucher Disease Management
Gorgeously designed informational One Pager (built with WordPress) to educate patients and physicians about Gaucher Disease management best practices. Awesome addition providing a PDF checklist for users to download, as well as email sign up functionality for annual reminders. Respect.
17. 10×16
Exceptional One Page website for 10x16 - a fun collaborative project where you could follow as 19 designers countdown their top 10 albums of 2016, each with reimagined cover art. The transitions are beautiful and the minimalist artwork redesigns are just gorgeous. A lovely touch how the website background color changes to correlate with the current artwork you're browsing. The site was built by Joey Maese - who was also behind A Bear’s-Eye View of Yellowstone we featured earlier this year.
18. Best Friends Forever
Gorgeous big imagery in this parallax scrolling One Pager for Melbourne-based design studio, Best Friends Forever. The awesome SVG illustrations and animations (by Sean Morris) bring so much character to the portfolio. Also a great references to a quality team section - especially the additional founder section further down that animates. We forget how important building trust is for when potential clients browse our portfolios.
19. The Wedding of Jessica and Brennan
Beautiful long scrolling One Pager announcing the wedding of Jessica and Brennan - both designers of course. The Singe Page website features a parallax scrolling rose-overlay that's perfectly subtle with no parallax on text. There is also good whitespace, lovely typography and last little shoutout to that navigation "roll out" animation, awesome stuff.
20. THIS
Lovely parallax scrolling with big beautiful typography in this One Pager for German digital agency, THIS. The Singe Page website intro features an impressive hover-sensitive parallax effect with the array of devices. Other features include a unique fixed right navigation, a very slick client logo (vertical) scroller and ends with a big footer with subtle map background and a looping video of the office space.
What an inspiration overload! Hope you enjoyed the hand-picked collection from 2016... 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]
