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?

Website usability and user experience : A Common practice

Usability and User Experience, two very common word in each and every sector in business products and services. In case of website design and development whatever or however the design or functionality it has if it do have lack of usability and User experience we just can argue “The site is a mess”. In my case as new blogger,while implementing this site I am still fighting to insure best UX and Usability functional within my ability. To get more information I was reading few blogs and advice from different writers. Lots of articles out there to get better idea abut Usability and User Experience awareness, but few of them are really helps me for my better understanding.

Source: stopanxietyinminutes
Source: stopanxietyinminutes

Usability of a website :

You can find lots of definition given by expertise. My simple point of view is “Giving less effort to find what I want from a website within my particular interest”. That means my percentage of hovering will be less, It will be easy to navigate, I will know where I can find my desired contents within a website. Moreover it should meet our goal. It might be contents, Available links, in Design pattern or may be just a video. As an example we are more comfortable driving on a wide straight high-way rather than zigzag roads upon hill! That means how comfortable you are while purchasing a product from a shopping mall.

Website User Experience :

It is common for your viewers, even for you as a browser. When we start browsing a website conscious mind start giving feedback right then, “What is my experience?” Am I feeling good? Is it comfortable for my sight view? Can I keep trust on what i am looking at? How about the services it is providing me? How satisfied I am? Yes lots of questions comes up in case of user experience analysis. An user experience is something which can keep your customer stick with you at all time. Simple example might be a shopping center who do have small product line but it do have lots of returning customer only because these customers do get good customer experience.

The battle :

Usability or Experience? Well definitely both. But we just need to balance it at best possible limit both side. Very usable thing might not cover better experience, on other hand a product with high functionality might be difficult for use to everyone. That is why developers and designers both consider to balance these two facts at the same time.

A publication by Semantic Studio, “User Experience Design“ written by Peter Morvilles (Email : many years of experiences in information architecture and UX design the writer developed a new model called “User experience Honeycomb“.


It was a extension to an infamous model named “Three circle of Information Architecture“. The new model just described 7 quality of an user experience, those are : Useful, usable, desirable, findable, accessible, credible and valuable. There are so many experts are there who are working with usability and UX, if you search thoroughly you might get more different techniques or mind map before practical integration. But the Map above is one of the basic content that you will find useful to fulfill your starting solution for usability and UX.

Please read the article by Peter here : User Experience Design

I have found some other posts in different popular blogs and you might be interested to have a look at those as well.

  1. 6 simple ways to increase the visual impact of your Web Page

    6 simple ways to increase the visual impact of your Web Page

  2. Simple usability problem to avoid

    ^ usability problem to avoid

  3. Brand = User Experience: The Interface of a Cheeseburger

    Interface of a cheese burger
  4. Call to Action Buttons: Examples and Best Practices
  5. 15 Common Mistakes in E-Commerce Design
  6. Minimizing Complexity In User Interfaces

    Minimizing Complexity In User Interfaces
  7. 10 Useful Usability Findings and Guidelines

    10 Useful Usability Findings and Guidelines
  8. 10 usability crimes you really shouldn’t commit

    10 usability crimes you really shouldn't commit
  9. Long-tail User Experience: how to cultivate (or dissolve) a community

    Long-tail User Experience

You may find some more resources and articles on-line, If You think I should include more link that you feel better please let me know. Let me know about your interest too.