These days it seems like the term “webpage” and “website” are thrown around loosely, often being used interchangeably. I can’t recall how many times I’ve been in a meeting with a client and had them tell me they’d like a webpage, which I interpret as a basic, single-page website that is basically a digital business card. Something that gives them a web presence without breaking the bank, but then what they begin to describe is a fairly complex, multi-page structure, or something that I would define as a “website.” Thanks to jQuery, Java, CSS, and some good ol’ fashioned HTML, there are quite a few tricks that allow a singular webpage to function like a multi-page website.
It’s clear from some of these examples that there is a blurred line between what constitutes as a single page, or a webpage and a website. A site may scroll left or right, giving the appearance that it’s a new page, but a quick look at the URL will show that the developer just used an anchor to take the viewer to a different section of the same page. As with developing any website, the most important thing is structure and navigation. If a viewer can’t figure out how to get around your site, or get the information they’re licking for quickly, they’re going to get frustrated and leave. Keep that in mind if you’re planning on developing a creative, single-page, horizontally scrolling page.
I really like single page websites because they are easily manageable, and you can really think outside the box when designing them. I have compiled 30 outstanding single page website designs for your inspiration. There is a whole array of creative designs, effects, etc. that make these websites great.
Silverback is a “guerilla” usability review application. This app empowers people who develop applications. They have a very interesting single page website, similar to MailChimp. They also used an animal mascot designed in the same style the MailChimp monkey is. This time is a gorilla!
Fish Marketing’s website is innovative and creative! The high-quality illustrations are the ones that make it so special. The large fish on the cutting board is a unique idea, along with a cleaver and several pieces of sliced lemon. The idea behind this single page design is evident from its call to action “Advertising stinks, but someone has to do it.”. Ever skinned a fish before cooking it? Well, the idea is the same here – it’s a tedious process, but this marketing company is willing to do it.
Henderson is a single page personal portfolio website, perfect for showcasing your personal information: your skills, education, experience, and hobbies. This is actually a pre-made one-page template, so you can easily use this for your own or client designs.
This is a modern, responsive, retina ready landing page for mobile apps. It is compatible with the latest WP version and has many great and useful features you can use.
Mari is a nice one-page WordPress theme with a clean design and a valid HTML5 markup. This theme has a responsive design that will fit perfectly any screen size. It can be used to present your online resume, portfolio or anything else you can think of, all in a neat design that fits on one page.
Citrus is a great one-page theme that comes with a powerful page builder. It is ideal for a photographer, web design agency, or product promotion websites. The theme comes with detailed documentation.
We Shoot Bottles’s website is unique and has a design you’ll remember. It’s simple and will stick into your mind. The large, bold typography looks great on the all-white background. Also, pink was a great choice! The design was a bit peculiar though, tato say the least, as it asks you to scroll sideways instead of scrolling down, which is what everyone is typically used to. However, once you figure out where to scroll, you’ll be able to get all the information you need from this single page website design.
This portfolio website is unique and creative. You’ll see some great textured elements and cool painted backgrounds. The one-page design is simple but presents all the information you may want to see. It also features a contact form at the very bottom. This is used a portfolio website for Brad, who presents all of his recent work on one page. This design also features social media buttons at the very bottom of the page, though I would personally make them stand out a bit more as their design is quite dark (although perhaps that was the idea – not to bring attention to social buttons and to bring attention to the contact form instead).
Nostalgia is a responsive WordPress Landing Page for personal or corporate use. It has a minimalist style and a contrasting color palette.
This simple graphic portfolio website has some really nice vector illustration and a unique design. It features an island along with some trees, placed in the middle of what seems to be nowhere. It also features a moose on a raft, seemingly coming towards the island. This designer has created a number of other illustrations on his one-page website, showing his illustration skills.
This is a super simple, yet very effective personal website. It has personal elements – a large photo of the designer himself – a visible contact form and a brief description. As you scroll down the page, a number of new elements pop up that showcase Basil’s design skills. A single page website design works really well for Basil. Once you scroll past all of the examples of Basil’s work, you will see a contact form so you can get in touch with the designer.
Medio Core has a modern one page design with some very interesting light effects. This website is used a single page portfolio website for David Arazim. The fun and cool illustration is a very eye-catching detail, though it’s hard to figure out what animal this illustration represents. The design is simple but very easy to figure out for anyone browsing this designer’s portfolio site.
Stage5 is the website of Danny Silva, a freelance designer who loves building websites for his clients. The design itself is extremely simple, without any extra bells and whistles that some other illustrators feature in their portfolio websites. The sample websites that the designer presents in his portfolio also showcase the same type of work – straight to the point, no thrills kind of design.
This is one great example of how a colorful, fun website design should look like. The black boxes are nice detail elements.
This simple, minimalist, full-screen single page portfolio website has a cool layout and a very nice background photo. Once you scroll lower on the page, you will get to the design examples sections which seems to be never-ending – this design team has done a ton of projects and they want to make sure you see as many as possible to become convinced of their quite impressive design skills.
Unsail is a modern and ready-to-use template. There are nine different sections and the theme is designed on the 960 Bootstrap Grid. All the objects in this theme are vector-based hence it allows to resize each element as per your will.
This is the website of a network of decentralized markets and communities, powered by Ethereum, Aragon, and IPFS. This website features a number of really awesome animations that make you want to stare at them. District0x’s single page design is quite impressive to say the least.
Mai 36 is an international contemporary art gallery and this is their presentation website which highlights the work of each artist, their story, and activities.
This is the website of a creative & fresh full-service design studio crafting beautiful experiences across all platforms.
This is a microsite that packs all the essential travel experience in one convenient place.
This business offers an all-in-one solution for your employee management. It combines all tools and services for employee management on a single-page, well-structured design.
This is an announcement website for a summer job where a student can try out as CEO of Adecco and get 100,000 kr in salary.
The single-page website layout is perfect for catching leads and landing pages. Here’s a great example of this book for digital nomads, created by digital nomads.
Organic & Original Tastes is a Coming Soon page for a new product launch. It’s always a great idea to put up a single page landing page before your actual website is ready. The reason is – search engines look at how long your website has had any sort of content on the web when determining the age of your website. Another reason to do that is to collect emails of potential customers / subscribers before your actual website is ready. So go with a single page “coming soon” page before making your website live.
This is the presentation website for a website builder. It takes advantage of the single-page layout masterfully using a profanity-filled call to action with the word bleeped out. Only it turns out the word was actually “foul” and not the other 4 letter “f” word. The one page design here is simple and features a box to collect visitor emails at the very bottom.
This is an unusual single page banking website design with an interactive layout and lots of cool animations. It features a floating credit card and a gift box that almost annoyingly always follows your mouse cursor. “Click to pop” is a call to action on the box and once you click it, it pops the “gift” open – the gift being the credit card itself. Once you scroll lower on this one page website you will see a “click to throw” button – this time it allows you to throw a gift box at the credit card.
This magazine website is your global guide to luxe travel, style and more., curated for international Platinum Card® members from American Express®.
This is the website of a Hanover, Germany based digital agency. It features an illustration of a floating island that’s done very skillfully. It also uses a number of animations and transitions as you go from one section of this one page website to the next.
Single page website design can be extremely rewarding when done properly. There are many types of websites that can and should present all their information from one page instead of many. Which of these one page sites or templates did you like the most, and why?