Introduction

Before jumping directly to the website development, it is recommended to have a basic idea of the UX design or website layout. This can be achieved via many ways, in this article we explore different aspects of UX Design.

What will your website look like?

This is the most important question every developer must ask to self. To answer this, you need to answer following:

• What exactly your website is all about?
• What are the functionalities you want from your website?
• What are the content you want to display on your website?
• How your website will look?

I will take a scenario to answer all the above questions. These answers will vary person-to-person and according to the requirement. I will also discuss tools to use, that will help you in all above cases.

Scenario

Registration form for Social Networking site (e.g. Gmail)

What exactly your website is all about?
It is a mailing website which needs a registration form to be filled.

What are the functionalities you want from your website?
Give input boxes to take inputs and a button to show a popup with successful message.

What are the content you want to display on your website?
I want to display my website name in bold letters, an image, instructions for username and password.

How your website will look?
For this either I will draw my layout on paper or use an online tool like Balsamiq.

UX design using Pen-Paper

It means, I will draw my exact UI design for all the pages. For given scenario, we can draw something like this:

UX design using any online tool

Online tools provide drag and drop option to create a UI design. For given scenario, we can draw something like this using an online tool e.g. Balsamiq:

From above planning, we will understand what and where exactly we have to write our code. Here, I will use HTML to create all the UI design, CSS to provide colour and style to it and JavaScript to perform pop up operation on button click.