Tuesday, November 17, 2015

Simple Fundamentals of One-Page Site Design

If the 2000's were all about the classic 'three column layout', you could argue that the last five years have been about 'the rise and rise of the one page site'.

Squarespace drives the point home by their Cover Pages option that allows site builders to put together a one page site for whatever they need. They're not the only ones as One Page Love dedicates their site on showcasing the very best in the one page world.

So, what's the secret sauce that has brought the one-pager to fame?

Today I'd like to share some fundamentals that should help you create simple yet killer designs for your next one-page project.

The Good Bits

The advantages of a one-page website design are certainly significant, and some projects will benefit from those factors more than others:

  • Focused content friendly
  • Mobile friendly
  • Lower bandwidth usage
  • Higher conversion rates
  • No re-direction
  • Able to produce unique designs

The Not-so-good Bits

Yes, like most things, there are some drawbacks that you need to consider before you decide to scale down your site:

  • Typically not SEO friendly
  • Scroll, scroll, scroll
  • Not suited for every niche
  • Difficulties in sharing content
  • Harder to discern user behavior and intentions
  • You have to focus on one central point

The Fundamentals

When it comes to one-page website design it is best to stick to the basics and branch out from there. In fact, it's a formula that should be applied to any website project you happen to be delving in. Keep in mind this is truly the bare bones and it is up to you to take that extra step to knock your design out of the park.

Simple Means Success

Keep it simple

It goes without saying that any website needs to cherish the simpler things, and the one-page design wouldn't are no exception. The great thing about the one-page design is reducing the page count almost automatically limits the project scope, so there is no better time to make sure you are following the KISS method.

[author_more]

[/author_more]

Because you are working in such a confined space, you need to make sure all your content counts. The art of effective minimalism comes to mind when designing for such a trend. Remember that with one-pagers you are almost always focusing on conveying one idea and one idea alone. There is no reason to introduce a bathroom into the middle of your kitchen (I hope you wouldn't), so don't lose sight of your core goal when implementing a one-page design either.

The best way to keep your design simple is to know what you're designing for first.

  • Are you communicating a new idea? (i.e. Kickstarter)
  • Are you building a brand?
  • Are you marketing a product/service?

Do your homework and know what you want to say before you design. After that, you can get yourself a wireframe and map out what you want and see if it works long before you actually start working on your site.

Minimize the Mass

Manage the Mass

[caption id="attachment_119258" align="alignright" width="238"]Illuminated manuscript Illuminated manuscript used every millimeter[/caption]

Back the middle ages paper was expensive to produce, so it's easy to see why artisans would crowd so much content onto each page. In a similar way, when you only have one page, it is tempting to crowd that page like an illuminated manuscript. This is why you need to know how to carefully manage your content – and sometimes make hard calls on what content makes the grade.

White space is always your friend in the designing process to save you from creating a cluster of words and images. Using large breaks, images, colored panels and even visual separators i.e. lines, will keep your visitors from being overwhelmed. Everyone needs a break.

Plan out your content while you're creating your wireframe. The best practice when it comes to micromanaging is to first create separate "visual pages" and then line each "page" under each other, one after another. This will allow you to break your content up into small chunks and see how your content will flow overall.

Continue reading %Simple Fundamentals of One-Page Site Design%


by Gabrielle Gosha via SitePoint

No comments:

Post a Comment