Planning your WEB UI and Navigation

Question

I know many on SO do not like subjective questions and I tend to be that way as well but am really curious about what others do when planning their websites' UI and navigation.

I have been searching the web for useful flow charting/diagramming tools and did find a few but started thinking maybe other people have a better approach for this.

The question is, when starting a new project, what steps and/or tools do you use to help plan out the web UI and navigation? How do you decide what to include on which page? I know it is an iterative task that you will continue to improve on over the life of the project but how do you get started. I tend to suffer major mental blocks when starting out and am a little unsure how to easily get past the blocks and back to developing.

Answer 1

I browse, browse, browse the internet and make notes of UI that I like and what I like about it. Basically I'll do nothing more than sketch in a notepad, BASIC outlines of the UI. I have yet to find any computer tool (haven't tried a wacom tablet) that is as quick or as versatile as a sketchbook and a pencil.

Once I've sketched something out, I may go from there to html or perhaps even photoshop if I want to play around with coloring.

I've discovered that after reading SO and some other things on the internet, someone once said, "user input is sacred". That being said, I've learned to dislike modal popups and other such disruptive design. I really strive to make sure that my flow makes sense. For instance, if you're entering a new database object, does it make sense to drop the user back into the new database object entry screen, or back to the main menu? Sometimes only user testing will flesh that out.

Other than that, I'm not sure I answered your question.

Answer 2

If you want just to plan your design you might want to play with http://www.balsamiq.com/. They have really nice flash based app for creating UI mock ups.