Steps to follow on pre web design process

web design process

What sort of design process do you follow? Modern design process involves so many different structures, work-flows to make things more usable both for clients and designers. Which one is your best fit?

Prototyping, wireframing is not a new concept, we are used to work on UML (Unified Markup Language) before. Hence the conception was vastly used for mid level projects by most of the stablished software development companies that follows international standards. For web developers on small projects most of them really dont bother to adopt the rules of design flow, as it is time consuming. Here we miss the main part.

You should be following few steps before jumping on design implementation. It reduces your overlapping,  tweaking time and alternation; moreover you can easily adopt any future changes if required. That means you are saving your time and saving your clients money.

Lets go through some of the steps:

Get detailed Requirement

While getting requirements from your clients try to get as much details as you can for you next web design project. Sperate them in to different appropriate sections. Point out the key functionalities. Get inner view of information structure, review additional steps necessary for the design. Flag them according to the dependencies and complexity.

Work on Wireframes

Wireframing is the key process that we usually follow to show our clients the basic structure of the website. It dosent include any color or styling just the basic structure to show clients how their website will look like. In this process you will also dig ou the usability issues as well as the user visibility ratio.

There are so many different tools out there. You can do the wireframe on paper or use online tools like Cacoo or Printable wireframing tools.

After you done with the wireframing and information architecture show it to your clients. The followup with your requirements, discuss with the elements usability factors with them. If they are satisfied go with it or if they re not then work on the wireframing again.

Jump on core design Implementation

After you get green signal from your client on wireframed structure, you know how information will be placed within a browser. Now it is time to start on design implementation. Which means styling, giving color effects. Most of the designers use Photoshop or  Fireworks. There are so many different tools on internet to implement a nice, elegant website frame.


You will find out benefits if you follow this process. Some of the key points given below:

  • Less time
  • Gather more confidence from clients
  • Alter when necessary without giving much effort
  • Quick updates
  • Easy to followup
  • Reducing cost on both end.
  • Re-Usable
  • Ensuring usability and UX

I personally follow this process. Still there are so many different terms and technical steps to be followed but to insure the very basic you can start with these steps. It works for me, let me know what you think what steps do you follow?