Single Page Web Design: Trends, Tips & UX Advice
Friday, January 3, 2020
Some websites just work better with single page designs. These projects are typically portfolio pages, product sites, landing pages, and sometimes company pages too.
You always want a site with little content but a strong branding & clean navigation. That’s a given.
But what other trends go into a strong single page layout? And how can you design one that’ll offer the best user experience?
My goal with this post is to cover every great trend related to single page design. You’ll find design trends from live websites, plenty of helpful UX tips, and even some modern web designs to get the inspiration flowing.
There is no absolute “best” way to craft a single page site. But if you follow these suggestions you’ll certainly be on the right track.
This is where you click a link and it’ll automatically scroll to that section of the page. It works just like a regular navigation menu except for the custom animation scroll effect which offers a really fancy user experience.
Check out the website Hashtago for one example.
This is a very simple design with a navigation bar featuring 4 different links.
The scrolling feature works whether you click those or if you scroll down with your mouse wheel. It’s a really simple design but the animation might feel far too slow to some people.
That’s the risk you face when forcing a custom animation into the navigation.
Instead you might do something like Retainer Club which auto-loads different pages and scrolls down into new sections on the same page.
You’ll notice the load times are appreciably faster with a much smoother transition.
If you’re going for a solid user experience then you want a smooth animation speed. It’s not easy to achieve but the more you design the more you’ll get an eye for what makes “good” animation work.
Now DangerousRobot is probably my favorite example of this single-page auto scroll feature.
The page sections load into view very quickly and the navigation is also easy to read. That’s what you should be going for when you design a sleek auto-scrolling nav effect.
This might look something like this design on Playground’s website.
Notice how the links on the right-hand side follow you along the page. They still work just like a typical navbar, except they’re a bit out of the way and more accessible in that space.
I do not think this technique works well for all websites. It’s not the perfect choice if you have a lot of text or need to support smaller screens with the same vertical menu.
Instead you can try switching to a more mobile-friendly accessible menu with responsive techniques.
Many websites also use dot navigation links. These aren’t great because they don’t tell you which section of the page you’re currently viewing.
But they do save a lot of room and look pretty darn sleek.
For example the Interface Agency site has three small dot navigation buttons. Click those to scroll through the page fast.
There’s also a small plus icon in the top corner offering more pages to look into.
I’ve seen a few companies like Ritual that auto-animate through different sections.
This is certainly okay but in my opinion, it’s not the best choice for a page with lots of content.
This is better for adding flashy graphics into custom-styled layouts.
Vertical navs work well if you can fit them into your layout. It’s all about testing and seeing what you can make work, but not forcing your ideas where they may not look right.
Well, really you just need to showcase your work.
But a great portfolio also has a dash of you mixed into the content. This can all be easier to consume if it’s on one page.
I don’t think every portfolio should be just a single page. However I do think it can work well in a minimalist design sense.
For example Pranesh Ravi doesn’t even have a clear navigation on this page. It’s just a bunch of sections listed together.
If you hover the logo in the top-right corner you’ll catch a few links that fly out into view. This is a fun effect, but I don’t know if it’s great for usability’s sake.
Have a look at the website for Dice Sales to get another idea for single page portfolio design.
This layout uses a fixed navigation in the lower-right corner of the screen. It’s perfect for moving between page sections without links getting in the way.
Only downside is that those links get hidden on mobile so it’s not the most accessible choice out there.
Rogie King is one of my favorite designers and his portfolio is a testament to the quality of single page design.
It’s clean and simple yet very fun to look at. And there isn’t a navigation bar in sight.
Find a style that works for your portfolio and you’ll be golden.
This is especially true if you’re designing a landing page where it’s the only page someone might see. Like in a single page design.
For example Hero Icons just has a couple CTAs above the fold with no other navigation.
Clean text, simple icons, really smooth design. But nothing in the way of getting people elsewhere on the site.
And that’s fine!
Because your goal with this type of page is to encourage conversions. You may count a “conversion” as a signup, a purchase, an email submit, or anything like that. Doesn’t really matter too much.
If you’re meeting your goals then you know you’re on the right track.
The homepage for the Sketch Confetti plugin has another example of a very clean CTA button.
This uses a bright pink background to grab attention directly underneath an embedded demo video.
My only complaint here is the button’s position. When you’re designing for action you want that action above the fold. Especially for single-page layouts.
Do some research on CTA design trends and see what you can learn.
With great CTAs you’ll notice that font choice, size, position, and color all play a huge role.
For example Midnight Sketch is another Sketch plugin with a beautiful single page layout. The CTAs are bright and right in your face.
Those are bound to get people to click at first glance.
You can easily add page elements that animate themselves throughout the page while scrolling. Note it’s easier to understand this if you look at a live example so check out this page.
Toggl has its own time tracking app and their landing page is fantastic.
As you scroll down you’ll notice the different page elements animate into view. They’re pretty easy to watch so they don’t move too fast or too slow, but there is clear movement.
The idea is to grab people’s attention while they’re moving to add some dynamic features into your content.
It works best with graphics and different page sections, specifically alternating page sections which I’ll cover more in the next part of this article.
The Yarn App homepage also uses on-scroll animations lower on their page.
This effect does not radically alter the page’s behavior or intent. This is mostly an aesthetic trend that just makes everything easier to look at.
Is it great for every website? Certainly not.
Mostly this works with pages that have smaller amounts of content that animate into view as you move through the page.
One Big Tweet is the perfect example of this.
Each part of the page uses different animations but there isn’t any massive paragraph blocks or super detailed write-ups.
In the top-left you’ll find a navigation with the auto scrolling feature I mentioned earlier. Certainly putting that trend to good use.
That is probably one of the best examples of a single page design placing user experience above anything else.
Always design for users first. Worry about aesthetics later. That’s one of the biggest keys to a great single page layout.
When you design a single page layout you want to segment your content. Break it up into sections using different background colors, header styles, icons, dividers, whatever.
This helps users consume content faster and easier without any problems.
The sections on this page for an iOS 11 UI kit are subtle but noticeable.
They all have different headers and alternating image sizes to create a visual hierarchy.
Lower on the page you’ll notice a section with some different background colors and patterns. Nothing too huge but it does draw the eye.
Typically I’m more keen on alternating background colors like this page.
It features tips on how to use Photoshop for people who, well, don’t know Photoshop.
The backgrounds switch between dark and light with alternating colors in between. Great for contrast and clearly a solid design style for anyone unsure of how to divide page sections.
But you can be a little more colorful with brighter hues, different patterns, or even larger graphics.
Take for example this landing page created by BARREL.
It also divides the page into sections but it uses a totally different technique for doing so. This includes backgrounds, colors, icons, and lots of photos.
You can try this out with pretty much any page and see great results.
It’s all about matching color choices along with page details. Seems tricky at first glance but you’ll get the hang of it the more you design custom mockups.
These are all too common these days all over the web and many websites often go a bit too far. That’s why I don’t always recommend parallax techniques for single page layouts.
However if you are going to add parallax into your site, a single page design is the place to do it.
Have a look at DrawingArt for one very simple example.
You scroll down the page and as you move you’ll see the backgrounds scroll with you. Pretty cool!
This effect can be replicated using any free parallax plugins you find online. The goal is to create an illusion of movement in the page with some fixed elements, moving pictures, and page microinteractions to mouse movements.
That last option is tough to build on your own. But the end result is superb.
You might also try doing a fixed background design like this page from Winter Workweek.
It doesn’t use a single page design exclusively since there are other pages on the website.
However the animated parallax feature is mixed with a fixed background creating a really weird motion effect as you move through the content.
This means you’ll find a lot of variety in creatives, images, content, headers… all attached to the same overall page design. Pretty awesome effect if it can blend with your project.
Keep an open mind and be willing to experiment with different trends.
No two websites are exactly the same and there’s a lot of room for experimentation. Study other single-page designs that have similar things you like and merge those together to create a totally new piece of awesome design work.
https://www.vandelaydesign.com/single-page-design-trends/
You always want a site with little content but a strong branding & clean navigation. That’s a given.
But what other trends go into a strong single page layout? And how can you design one that’ll offer the best user experience?
My goal with this post is to cover every great trend related to single page design. You’ll find design trends from live websites, plenty of helpful UX tips, and even some modern web designs to get the inspiration flowing.
There is no absolute “best” way to craft a single page site. But if you follow these suggestions you’ll certainly be on the right track.
Auto-Scrolling Nav Links
A very common feature you’ll find on single page designs is the automatic scrolling navbar.This is where you click a link and it’ll automatically scroll to that section of the page. It works just like a regular navigation menu except for the custom animation scroll effect which offers a really fancy user experience.
Check out the website Hashtago for one example.
This is a very simple design with a navigation bar featuring 4 different links.
The scrolling feature works whether you click those or if you scroll down with your mouse wheel. It’s a really simple design but the animation might feel far too slow to some people.
That’s the risk you face when forcing a custom animation into the navigation.
Instead you might do something like Retainer Club which auto-loads different pages and scrolls down into new sections on the same page.
You’ll notice the load times are appreciably faster with a much smoother transition.
If you’re going for a solid user experience then you want a smooth animation speed. It’s not easy to achieve but the more you design the more you’ll get an eye for what makes “good” animation work.
Now DangerousRobot is probably my favorite example of this single-page auto scroll feature.
The page sections load into view very quickly and the navigation is also easy to read. That’s what you should be going for when you design a sleek auto-scrolling nav effect.
Side Navigation Labels
If you don’t want the navigation fixed to the top of the page you can always design a vertical navigation.This might look something like this design on Playground’s website.
Notice how the links on the right-hand side follow you along the page. They still work just like a typical navbar, except they’re a bit out of the way and more accessible in that space.
I do not think this technique works well for all websites. It’s not the perfect choice if you have a lot of text or need to support smaller screens with the same vertical menu.
Instead you can try switching to a more mobile-friendly accessible menu with responsive techniques.
Many websites also use dot navigation links. These aren’t great because they don’t tell you which section of the page you’re currently viewing.
But they do save a lot of room and look pretty darn sleek.
For example the Interface Agency site has three small dot navigation buttons. Click those to scroll through the page fast.
There’s also a small plus icon in the top corner offering more pages to look into.
I’ve seen a few companies like Ritual that auto-animate through different sections.
This is certainly okay but in my opinion, it’s not the best choice for a page with lots of content.
This is better for adding flashy graphics into custom-styled layouts.
Vertical navs work well if you can fit them into your layout. It’s all about testing and seeing what you can make work, but not forcing your ideas where they may not look right.
Portfolio Layout Ideas
If you’re designing a portfolio site then there’s a lot to keep in mind.Well, really you just need to showcase your work.
But a great portfolio also has a dash of you mixed into the content. This can all be easier to consume if it’s on one page.
I don’t think every portfolio should be just a single page. However I do think it can work well in a minimalist design sense.
For example Pranesh Ravi doesn’t even have a clear navigation on this page. It’s just a bunch of sections listed together.
If you hover the logo in the top-right corner you’ll catch a few links that fly out into view. This is a fun effect, but I don’t know if it’s great for usability’s sake.
Have a look at the website for Dice Sales to get another idea for single page portfolio design.
This layout uses a fixed navigation in the lower-right corner of the screen. It’s perfect for moving between page sections without links getting in the way.
Only downside is that those links get hidden on mobile so it’s not the most accessible choice out there.
Rogie King is one of my favorite designers and his portfolio is a testament to the quality of single page design.
It’s clean and simple yet very fun to look at. And there isn’t a navigation bar in sight.
Find a style that works for your portfolio and you’ll be golden.
Add CTAs For Sales Pages
If you’re selling a product or digital course then it’s always smart to include a CTA somewhere in your page.This is especially true if you’re designing a landing page where it’s the only page someone might see. Like in a single page design.
For example Hero Icons just has a couple CTAs above the fold with no other navigation.
Clean text, simple icons, really smooth design. But nothing in the way of getting people elsewhere on the site.
And that’s fine!
Because your goal with this type of page is to encourage conversions. You may count a “conversion” as a signup, a purchase, an email submit, or anything like that. Doesn’t really matter too much.
If you’re meeting your goals then you know you’re on the right track.
The homepage for the Sketch Confetti plugin has another example of a very clean CTA button.
This uses a bright pink background to grab attention directly underneath an embedded demo video.
My only complaint here is the button’s position. When you’re designing for action you want that action above the fold. Especially for single-page layouts.
Do some research on CTA design trends and see what you can learn.
With great CTAs you’ll notice that font choice, size, position, and color all play a huge role.
For example Midnight Sketch is another Sketch plugin with a beautiful single page layout. The CTAs are bright and right in your face.
Those are bound to get people to click at first glance.
On-Scroll Page Animations
Based on the title of “on-scroll animations” you might think this is the same as nav animations. But it’s really its own category and it’s definitely a nice effect.You can easily add page elements that animate themselves throughout the page while scrolling. Note it’s easier to understand this if you look at a live example so check out this page.
Toggl has its own time tracking app and their landing page is fantastic.
As you scroll down you’ll notice the different page elements animate into view. They’re pretty easy to watch so they don’t move too fast or too slow, but there is clear movement.
The idea is to grab people’s attention while they’re moving to add some dynamic features into your content.
It works best with graphics and different page sections, specifically alternating page sections which I’ll cover more in the next part of this article.
The Yarn App homepage also uses on-scroll animations lower on their page.
This effect does not radically alter the page’s behavior or intent. This is mostly an aesthetic trend that just makes everything easier to look at.
Is it great for every website? Certainly not.
Mostly this works with pages that have smaller amounts of content that animate into view as you move through the page.
One Big Tweet is the perfect example of this.
Each part of the page uses different animations but there isn’t any massive paragraph blocks or super detailed write-ups.
In the top-left you’ll find a navigation with the auto scrolling feature I mentioned earlier. Certainly putting that trend to good use.
That is probably one of the best examples of a single page design placing user experience above anything else.
Always design for users first. Worry about aesthetics later. That’s one of the biggest keys to a great single page layout.
Split The Page Into Sections
I mentioned this earlier when discussing the single page scrolling navigation feature. But it’s something that should be covered in more detail.When you design a single page layout you want to segment your content. Break it up into sections using different background colors, header styles, icons, dividers, whatever.
This helps users consume content faster and easier without any problems.
The sections on this page for an iOS 11 UI kit are subtle but noticeable.
They all have different headers and alternating image sizes to create a visual hierarchy.
Lower on the page you’ll notice a section with some different background colors and patterns. Nothing too huge but it does draw the eye.
Typically I’m more keen on alternating background colors like this page.
It features tips on how to use Photoshop for people who, well, don’t know Photoshop.
The backgrounds switch between dark and light with alternating colors in between. Great for contrast and clearly a solid design style for anyone unsure of how to divide page sections.
But you can be a little more colorful with brighter hues, different patterns, or even larger graphics.
Take for example this landing page created by BARREL.
It also divides the page into sections but it uses a totally different technique for doing so. This includes backgrounds, colors, icons, and lots of photos.
You can try this out with pretty much any page and see great results.
It’s all about matching color choices along with page details. Seems tricky at first glance but you’ll get the hang of it the more you design custom mockups.
Parallax Single-Page Trends
I’m sure you know about parallax scrolling and the many parallax techniques used in web design.These are all too common these days all over the web and many websites often go a bit too far. That’s why I don’t always recommend parallax techniques for single page layouts.
However if you are going to add parallax into your site, a single page design is the place to do it.
Have a look at DrawingArt for one very simple example.
You scroll down the page and as you move you’ll see the backgrounds scroll with you. Pretty cool!
This effect can be replicated using any free parallax plugins you find online. The goal is to create an illusion of movement in the page with some fixed elements, moving pictures, and page microinteractions to mouse movements.
That last option is tough to build on your own. But the end result is superb.
You might also try doing a fixed background design like this page from Winter Workweek.
It doesn’t use a single page design exclusively since there are other pages on the website.
However the animated parallax feature is mixed with a fixed background creating a really weird motion effect as you move through the content.
This means you’ll find a lot of variety in creatives, images, content, headers… all attached to the same overall page design. Pretty awesome effect if it can blend with your project.
Moving Forward
These are only some of the techniques I often see attached to single page layouts. But don’t take this as a holy grail for designing single page websites.Keep an open mind and be willing to experiment with different trends.
No two websites are exactly the same and there’s a lot of room for experimentation. Study other single-page designs that have similar things you like and merge those together to create a totally new piece of awesome design work.
https://www.vandelaydesign.com/single-page-design-trends/