Monday, September 7, 2009

5 Steps website layout design tutorial

“You can find part one of this article in the following link “Website Architecture Tutorial: 5 steps to design a website””



3. Define “How”

  • Now It´s time to propose how’d you like all the “Whats” defined in step 2 to function.
  • For this step is very important to let go your imagination and creativity. Don’t think of costs, development time or anything else that could restrain your creative power. Just brainstorm with your peers and come up with as many creative ideas as you can.
  • The only restriction here is that you can only brainstorm about the things you defined in step 2, otherwise you’d end up losing focus.

4. Prioritize

  • This is the part of the process where you have to decide what are actually going to implement, what are you going to leave for version 2.0 and what are you going to discard.
  • You have to revise one by one all the suggestions made in step three and evaluate each one of them.
  • At this point is very important to have some thecnical staff in the decision making process, because the most important criteria to go ahead or discard a suggestion is a basic “Cost/Benefit” Analysis. You might have a clear idea about the benefits but to have an accurate estimation about development time, software/hardware costs, maintenance, etc, you need the technical staff advice.
  • In this step and the one before, it’s very important to separate the creative process from the analytic one. Starting to analyze your options too early, restrains creativity and you could end up with less alternatives or alternatives with lower quality if you do both processes at the same time.
  • Always be focused and doublecheck if what you are actually approving, is directly related to solve the problems defined in step 1.

5. Design

  • Finally… after all these steps, you design.
  • The objective here is to translate everything you’ve stated and prioritized so far into a graphic interface. It will not be very difficult because you already know What you need to include (and what not) and have an idea of How you want it to function.
  • Everything you’ve put into your design comes from a specific objective and solves a specific problem. There will be no “useless” features here, no ”wasted” screen space and no time invested in programming code that will not be used
  • Iteration. Check if your first layout is what you really need and you haven’t leave anything important out of it. If that’s the case, repeat steps 2 - 4 one or two more times until you’re comfortable with the end result.
  • After you have your basic layout (in a piece of paper or basic HTML), maybe the two or three most important screenshots, you call your programmers and design team and start developing your website/application




No comments: