Single Page Website

Single Page Website

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.

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.

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.
  • 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.
  • 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.

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.

For example the Interface Agency site has three small dot navigation buttons. Click those to scroll through the page fast.

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.

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.

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.

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.