20 Awesome OnePage Websites - Creativity Unleashed

Blog | InspirationByLuigiJuly 12, 2016

The discussion has been had and the verdict is in. We have been trying to think of websites as books or brochures, where separate pages carried their own information, and menus to get to those pages had to be carefully worded so the visitor could link to the right page. It took mobile devices to get designers and developers to make the paradigm shift to onepage websites and, even more important, convince site owners that this was a good thing.

That said, designers and developers are still learning the nuances how to design onepage websites. Here are 20 of some of the best that will educate, inspire, and present some great design ideas.

This website offers a high-quality service . It creates great user experience by effective design.

Granted, a taxi cab website is not complex and would not have lots of single pages anyway, but to have a cute taxicab driving through the page is pretty engaging. And it’s interactive. There’s just the right amount of content, and viewers are unlikely to bounce.

Here is an example of a bit of a hybrid of a single-page site. First, Skittles does not have a typical website touting its product. Instead, it basically has a single page with blog posts – they are funny, whimsical and for all ages. They want their followers to submit their stories too. It is truly a customer-led site – viewers will have to tap on a post, but the titles are so engaging, it’s hard to resist.

One of the great things about OnePage websites is that visitors can scroll (or slide) or have the option to click to go to specific parts of that site. The menu bar on the left is an option. And look how Marcela’s story begins. She gets her point across quickly and presents one piece of her story with a portfolio item. The rest of her page tells more of her story and presents more of her portfolio – simple and effective.

seedlip
This is a site that offers non-alcoholic drink products for “high-end” customers. The product shots, a cocktail recipe slider, minimal color, showcases these “spirits” perfectly and the last section tells the story of the company’s founding.

This company (Bakken and Baeck) offers a conference once a year for designers, entrepreneurs, and other creatives on a small island.

Here’s an example of long-form journalism by the company, Behind the Hashtag. This one is a micro-site, one of many that are designed for weekly publication. This one loads with each picture sliding in along with names of victims and date of death. Great interactive effects.

This one has to be experienced to be appreciated. The circular threads move gracefully as the site opens, and there are stunning transitions from one section to the next. Very little color – one of the most impactful elements.

Here is a long-form informational site – great illustrations, humorous .Color gradient changes through the scroll. The content is offered as a downloadable infographic too.

This site has to be experienced to appreciate – a Canadian rock band has built this site using WordPress. Everything in black and white, background videos, and amazing lenticular effects.

Long scrolling “journey” through Yellowstone National Park – amazing photography. Created by “Hello Monday” – you can read the case study of its creation.

This is a small company that only sells and ships to it “members.” Simple design and option to join – that’s it. Classy and sleek.

Table

13. Frings (Restaurant)
Similar Posts

13. Frings (Restaurant)

Frings
A great example of a scribble-style pre-loader that engages immediately. Only one thing to do here – makes a reservation.

Here’s a site built around a single sports figure – racer Mick Schumacher. A long scroll features facts, sponsor, photos, upcoming races and more. The intro pre-loader has a great racing sound effect.

Great and subtle parallax effect. This app is designed to show moviegoers every movie now showing in their geographic location.

1961
Another long-scrolling page with stunning imagery. 1961 is a block of penthouses in Stockholm. Toward the bottom of the page is a listing of famous events that occurred in the year 1961 – nice, creative touch.

This is a parent/kid guide to cyberbullying. Johnny follows down through the scrolling in a neat way, as does a survey to vote if it has happened to your child or to you. At the end of the scroll are links to other resources and a plug for an annual “Safer Internet Day” event. A great example of information one-page site.

What starts out simple becomes stunningly more complex and fascinating. For a portfolio site with amazing animation, this one probably has it all. There are great ideas to be found on this one. Start with the pre-load cascade of numbers, to the 3D background pattern, to a hand icon that changes directions with scrolling, and funny taglines that randomly change – this one has everything.

This is a site for office space in Manchester. It highlights the current business tenants (all creatives) by likening each one to a zoo animal. The page features a tall office building and presents each tenant as the viewer scrolls the floors. Creative and just a bit zany.

This promotional one-pager for La Marzocco products (introduced at the end) has great illustrations and a dot navigation.

Onepage websites offer so many possibilities for the designer and his/her client. Done right, this design is suitable for so many
business/organizational venues – information, event, portfolios, single or limited products, services, and more. This platform is here to stay.

Post Tags: #OnePage Websites#Web Design#Website Design

20 Awesome OnePage Websites - Creativity Unleashed

13. Frings (Restaurant)

Similar Posts