Being primarily a web developer, I'm always looking for tools or guidelines that make it hard for me to mess up the user experience. I'm looking to create a 1-2-3 step guide. I'm thinking that it should be small boxes that are all visible at the same time, containing maybe a cropped picture and some text, but I'm open to suggestion or will take what you've got.

Is there any web tools out there that can help me create such a guide either some kind of generator or some free css templates that demonstrate it.

So what I'm looking for is some guidelines to how to present in a pretty and presentable way, at best exemplified by a reference, and possible also a reference to a website tool that will help me to generate a guide that looks good.

I'm talking about usable examples like: http://www.webdesignerdepot.com/2009/05/simplifying-website-usability-the-3-step-approach/

  • Could you add more detail about your situation/application? As currently written, I'm unsure what you're looking for... best practices for presenting a 1-2-3 step guide to your users? Or something else? Commented Sep 8, 2011 at 23:42
  • @Daniel Newman - I updated the question, I hope it makes more sense now?
    – Jakob
    Commented Sep 8, 2011 at 23:46

3 Answers 3



I agree with the comments made above - the question is too large to answer. You should start to build your wizard and then ask about more specifik details, for example "where should I place the 'next' button"...

  • Thank you for your answer - actually I wasn't thinking of creating it as a wizard, but maybe I should.
    – Jakob
    Commented Sep 11, 2011 at 13:38
  • I was just thinking that maybe someone had pointers as to where to put "3-step get started with benefitting from this website" and what designs are best (vetical/horizontal, bubble/square, overlapping/separated etc.)
    – Jakob
    Commented Sep 11, 2011 at 13:46

Not sure if there are any tools for this, but if you are familiar with html, css & a bit of js/jquery then this could help:



Your question is too broad. You can always look around the internet for great wizard/stepped UI workflows. There are countless collections of UI/UX patterns for this exact topic.

Keep in mind that there are always difference requirements and UX expectations based on device and intended use.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.