Designers and Developers Come Here

The Web design process that works for Small and Medium Websites

Hello all,

I’m writing this article to share with you my design process for any small and medium website.

The Web design process that works for Small and Medium Websites

The Web design process that works for Small and Medium Websites

Let’s imagine the scenario a client (X) is coming to you and he wants you to design his website. What approach you will take to finish successfully this project without wasting a moment or losing your time and money?

The best approach would be following these steps:

  1. Gathering Information and Requirements.

    Client meeting Gathering Information & Requirements

    Client meeting Gathering Information & Requirements

    That would be your first meeting with your client where you will introduce yourself and you will be asked about your previous work and be prepared with a nice portfolio that you can show when they ask you about your previous work. (have in mind to add a collection of your best graphic work, Flash / Silverlight and simple websites)

    After this step if they like you they will start asking you about their project and what they will have in mind and this is your moments don’t screw it when you are gathering information about the project. I would advice creating a set of question that will help you gathering this information.
    Example: Website Creation Strategy Template (MS Word) and many others can be found if you Google it.

    Ending your first meeting. Your client will ask you is how much and when? How much this will cost them and how long it will take to finish the complete project? Sometimes we could have a figure about the cost and time but make sure you take your time there is nothing worse than giving a wrong time estimate or price quote that doesn’t work!

  2. Wireframe / paper prototyping.

    Wireframe sample

    Wireframe / paper prototyping

    wireframes or paper prototyping is a very critical stage in all the process because it will help you and your client identifies the best way to move on in this project.

    It will also help you to get in a boring experience where you don’t understand what the needs of your clients are. This could result creating tons of PSD files that will make you lose your time and money in this project

    There are a lot of nice tools that can help you building Rapid prototypes I use Axure and Microsoft Visio there are also awesome online tools that can help you creating amazing and fast prototypes such as iPlotz , Flair builder, Hot Gloo, Napkee etc…

  3. Design the Graphic User Interface.

    after approving the prototype/wireframe now you can move on to the next step which is Design the Graphic user Interface.

    I assume that you manage well your first meeting and you have around 3 website you clients like (colors, typography or flash) and it will also be good if you had a small list of his competitors.

    This will help you finish the Graphic user interface successfully and I will talk more about how to start your Graphic user Interface step.

  4. Start the HTML/CSS nasty work.

    if everything went fine you will need to finish your HTML/CSS work and this is the easiest step in finalizing your project.

    The HTML/CSS step. you will need to figure out the best approach it finish it alone because there a lot of ways you can work in this step.

    There are people who prefer to use CSS Grid and some are not (I’m one of them) and some prefer to use Reset CSS file (Eric Meyer, YUI Reset). I personally use YUI but I modified it to my needs and add some shortcut classes I will share them with you now.

.floatleft{float:left} /*give any div a float left by just giving it the class floatleft in your HTML markup*/
.floatright{float:right} /*give any div a float right by giving it the class floatright in your HTML markup*/
.clearfix{clear:both;} /* clearfix to be used after floating div(s) or any element in your markup*/
.alignleft{text-align:left} /*the align classes set i use them mostly if i want to align any paragraph in my HTML*/
.noborder{border:0px black none;} /*mainly i use this if i'm making any image a link by default the browser will add a blue border around it*/

I hope you liked the article and looking forward for your comments and feedbacks. Important don’t forget to share it if you like it.

Mohammed Alaa
User Interface Designer


No comments for “The Web design process that works for Small and Medium Websites”

Post a comment

You must be logged in to post a comment.


Latest Comments