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.
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.
13. Frings (Restaurant)
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.
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
Similar Posts
BlogBytdomf_80aa6July 20, 2010
I always love the abstract and surreal kind of photography. Today when I was thinking about the idea for this post then I thought that I should showcase the abstract and surreal photography so that our readers can see the beauty of this kind of photography. So here are some of the best abstract and…
Read More 45 Amazing Examples Of Abstract And Surreal PhotographyContinue
BlogBytdomf_80aa6April 17, 2010
NicEdit a website editor that allows the editing of web site content on the fly in the browser which is lightweight and NicEdit JavaScript is integrated into any site in no time to make any element/div editable or convert standard text areas by providing an effective means to express themselves in rich text to the…
Read More NicEdit – Simple and Fast Content Editor for WebsitesContinue
BlogByLuigiSeptember 28, 2009
Everybody loves the Apple logo, especially retro striped logo from 1977. In this tutorial I will show you how to create, a retro grunge Apple wallpaper, in Photoshop, just by following this 5 simple and easy steps. We will be combining Apple stripe logo with nice grunge texture and grunge brushes to create this beautiful…
Read More How To Create a Retro Grunge Apple Wallpaper in 5 Easy Steps in PhotoshopContinue
BlogBytdomf_80aa6December 21, 2009
Either if you play them online or against the AI, it is about this beautiful virtual world that steals you away from the real world. The interesting aspect for some people, like myself, is what makes you buy a certain game. It’s probably a good review from a magazine/site, a good trailer or the creative…
Read More 39 creative game coversContinue
BlogBytdomf_80aa6November 13, 2009
Typography is one of the hardest elements of design to master. These videos are prime examples of how Typography can be used to convey a message in a creative and powerful fashion.
Read More Powerful Use of Typography In Christian Motion GraphicsContinue
BlogBytdomf_80aa6January 14, 2010
Creating cool header is easier than you may think. It will take you one hour and a half to learn the procedure. This tutorial is worked out for the beginners, it gives you the detailed instructions and the professional tips.
Read More Creating the Cool Header – Tutorial for Beginners.Continue
This site uses Akismet to reduce spam. Learn how your comment data is processed.
