How to Start a Web Design Project

Web Designers sometimes face a lot of problems when creating a project. Such as:

1. How do I start designing this project?
2. What are the steps I need to follow?
3. How do I choose a layout to follow?
4. How do I choose what colours to use and where to use them?
5. What type of content do I need to add to my website?

If you keep worrying about the task ahead of you, the questions will keep piling on. In this article, we are going to try to define a structured method to tackle problems like these.

First, we have to decide on a workflow for creating a Web Design project.

Planning

There are two main things that you have to consider when planning a site.

1. Concept

What type of website do you want to create?

1. An E-commerce site [Amazon, Flipkart, Myntra]
2. A Community website [ Quora, Reddit]
3. A Social media website [Facebook, Twitter, Google+]

2. Target

* Age / * Gender / * Location, etc.

Based on the target audience, we will have to decide the colours, fonts and the content of our website.

Ex: You are creating a website for a toy shop. A toy shop can be visited by both genders but are specifically targeted to a young age group, so we need to select colours which suit both parameters. A good choice may be a mixture of softer colours like turquoise or purple. However, if we were only targeting a particular gender or a different age group, we might need to make different choices.

Wireframe

A wireframe is like a blueprint for your website, something that you can show to your client and confirm the layout.

Wireframes can be created in two ways.

1. Freestyle drawing.
2. Using a graphics software (Adobe Photoshop, Adobe Illustrator, Microsoft Paint, etc.

For a quick look on how wireframes can help your design process, click here. 

Design

The wireframe that was created in the previous step is filled with colours, images and content.You should now have a mock-up of the final product.

Slicing

A website consists of both – pictures and text, so we have to ‘slice’ (take a snapshot of) the parts which we want to use as an image in the website.

For example: slider images, banners, etc.

Coding

Finally, using the design we created as a template, we can code the site for users to visit.

1. HTML – to build the structure of the page
2. CSS – to style and format your website
3. JS – for dynamic activity

And finally, I’m going to leave you with a quote by Steve Jobs that always helps me find my way –

“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while. That’s because they were able to connect experiences they’ve had and synthesise new things.”

— Steve Jobs

Happy creating!