Website Designing Process - Beginner's Guide

Kunal Singh — Wed, 26 Feb 2020 13:20:21 +0000

If you are a beginner in web designing or development, and whenever you start to work on a new project, a question would have arisen in your mind about, how should I start?
Today I am going to help you on how you can manage your project from start to finish. If you find this article helpful please let me know in the comments.

Whenever you think of starting a new project, you can follow the steps I have specified below.

1. Purpose of Website

First of all, you have to decide what is the purpose of the website you are going to build because it will help you in creating an awesome and attractive website. This step will simplify all your remaining work and logic behind the use of this website. Let's say we are going to create a design for an online store who sells baby products, so it the purpose of our website.

2. Target Audience

Now, you will have to find out your target audience for your website. You have to find out which age group is going to be targeted through this website and what that age group loves to see and feel so that you can make this website more engaging to them. It is also necessary to determine whether you are designing this website for beginners, intermediates or experts so they can find your website's layout easily accessible and friendly. In our example, our target audience for Online Baby Products Store will be their parents, because babies don't buy stuff online, their parents do.

3. Design Planning

Decide what colours you are going to use and what type of structure and feel are going to create in this website project. You can find out about this according to the purpose of your project and the target audience. As in our example, we will try to use stress-free colours which are bright and light, you can use this online Color Generator tool. Also, we should keep in mind that our audience is not going to be experts every time, so we will keep our layout and informative so that we can educate our audience wherever possible.

4. Directory Structure

After deciding the basic points for our project, we have to decide how we are going to keep our website code and design files so that it does not look messy to other developers and designers who are going to collaborate, it will help you in the future to understand how you created this project if something has to be updated in the future on this website.

A sample directory structure:

images/
css/
js/
uploads/
includes/
fonts/
index.html

5. Coding Structure

You have to set a coding standard while building the project so that everyone could read the codes and understand what is the logic behind this code. First of all, create the HTML skeleton file using relative tags and try to keep it simple and clean. Use comments where it is possible to keep notes between codes.

6. Designing Website

Now we will give design to our skeleton website using CSS. Try to create user-friendly UI according to the target audience. Use rounded corners to give it a smooth and calm look. Use as much as white-space, use paddings and margins as much as possible. Some top Website Designing Gurgaon agencies use these principles to create beautiful websites. AS they say - "Less is more" & "KISS - Keep It Simple Stupid".

7. Optimizing Project

When you have finished your project work, make a new version of it which is "Production Version" buy compressing files wherever possible like minifying CSS and JS file and combining all CSS into one file and all JS files into one in this production version. Remove comments from HTML files and minify that too. You can use minify tools. This will compress your project files and run faster on the server.

8. Finalizing & Deployment

Now you are ready to deploy your website on the server. If you are using Linux server you can directly upload the files using an FTP client or creating a ZIP file of the project and upload it using server's file manager tool.

Thank You

If you find this article helpful, please do let me know or you can ask your doubts regarding this article. 🙂

DEV Community: Kunal Singh