Application Visualization - Express Your Site Through Diagrams

After the feature development phase, you will want to translate the user stories into diagrams of how your site will look like. You do not need to use Photoshop to make appealing mock-ups of the site. The focus should be at how the features will layout (user experience).

For example, in the edit profile page, aside from the navigation, header, and footer, there will be a table with username, address, first name, last name,  email, etc. After you draw out the scratch, you will want to review it with your researches and user stories again; and then revise the diagrams.  

The goal here is not the visual appearance. It is more about the business decisions of what to put and what not to put.  Storing unnecessary information can use up more space in your database, for instance.

Here are some guidelines of how to design the diagrams:

• draw the sequences of the pages (how a user can navigate through the site)
• think if the data/item is really necessary in the page (ex. if you do not need to store the home address, do not put it in the profile page)
• minimize the number of steps/pages that the user needs to navigate in order to use your feature
• do not put anything anywhere on any pages if it doesn't make any sense or the presentation is awkward; study how other sites do it (use your reference sites from the research phase)
• label each page (editprofile.html, register.html, homepage.html)

Check the page diagrams at this page for some examples

http://www.symfony-project.org/jobeet/1_4/Doctrine/en/02 

You will want to read this. It has a good example on how to write user stories and draw diagrams. Start reading from "The Project Pitch".

Lastly, although blurry, here is an example of how the layout may look like: