We, The creator

Sabareesh c
Sep 8, 2018 · 6 min read

Each of us want to create something new, But what stops us from creating?

“HESITATION”

We just hesitate to do because we are unsure of what should be done.This blog will give you a clear idea of how to create your own website. From designing User Interface to make your site live you will know everything from this blog.

Before going deeper about this, Lets first know what a user interface exactly is!

User Interface (UI)

It is a way through which the user interacts with an application or a website. UI should be in such a way that it attracts the user. Interaction with UI creates an experience for the visitor. As a web designer, it’s your job to ensure that the experience is as good as it can possibly be.

To create a great UI, stick on to the following points

Know your users

First of all before creating a User Interface you should identify your users. Analysis should be made on who is going to use your website and their needs are to be understood.

Only if the users needs are known UI can be designed according to it.

Always know what your user wants. Dig deeper and find out what they require. The insights you will uncover from analyzing data and speaking with the users will inform every decision you make, From how people use your interface to the type of the contents that will be displayed.

Define how people use your interface

Before designing an interface you should define how the user should use the interface.

Users will interact with the website in two ways either directly or indirectly.

With the increased usage of touch based device direct interactions can be like tapping the screen, Pinching the screen to zoom, etc.

Indirect interaction can be done by using mouse or by using keyboard shortcuts.

Based on your users you will decide if you should deploy direct interaction or indirect interaction.

If suppose your users are gamers you need to keep direct interaction. If your users are developers who does most of the work with keyboard then you will go for indirect interaction.

Set expectation

Make sure that your users are aware of what will happen if a button is clicked on your website.

They should be cautious about what they are doing in prior.

Anticipate mistakes

“To err is human”

As humans each of us will commit an error.

There are two ways to solve the error that is done by the user,

*Identify the error before it happens.

*Solve the error.

Possible errors that could be made are clicking on SUBMIT to click on NEXT. These kind of errors should be anticipated.

Make your interface easy to learn

Interface should be designed in such a way that even a common man can operate it with ease.

Your interface should be easy to understand and it should be easy to adapt.

For example, Interface of OLA and UBER is easy to learn which makes even a common man use the application.

Think carefully about element placement and size

While you are thinking about element placing and size, Always have an image of `your interaction model in mind. Based on your interaction model decide the size and the place to display things on your website.


UI and UX

Is UI and UX same? Many of you will have this doubt.

No, They are not. UX refers to User Experience. UX is improving the user satisfaction by improving Usability, Accessibility and Pleasure during the interaction with the site.

UI concentrates on Design, Layout and the color combinations that should be applied. While UX focuses on Interaction Design, Architecture Information and Research made on the users.

Difference between UI & UX

Okay, So with this we are done with the basics of User Interface.


Let’s get deeper now! Interesting right?

Okay, In the current era creating a website with the available resources is very easy.

You can use IDE’s(Integrated Development Environment) like Notepad++, Sublime, Atom, Bracket etc. to develop a website.

To create a basic and a static website you need to know HTML.

HTML is abbreviated as Hyper Text Mark up Language. HTML elements are represented by tags.

A HTML tag is used in this way

<Opentag> Content </closetag>

The name of open and close tags should be the same.

Let’s see a sample HTML code.

<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>

HTML code begins and ends with a <HTML> and </HTML> tag.

Inside <HTML> tag the other tags are included.

<title> tag is used to give title to the HTML page.

<p> tag is used to specify paragraph.

<h1> tag is used to define the size of the font.

Font size can be assigned from <h1> to <h10> where <h10> is the smallest size and <h1> is the highest size.

Image insertion

Image can be inserted into the website using <img> tag.

Syntax of image tag is,

<img src=”apple.jpg” width=”104" height=”142">

The source from where the image is obtained is specified in image source, Width and height of the image that is to be inserted is specified.

To move to other page

To specify a link

<ahref> tag is used to display a link in the website.

Syntax of it is as follows,

<a href=”https://www.smazee.com">This is a link</a>

This tag redirects you to the link given.

Button

To define a button in the webpage

<Button> tag is used

<button> click me </button>

This creates a button named CLICK ME.

HTML tags are case insensitive.


CSS

CSS stands for Cascading Style Sheet

CSS is a language that describes the style of HTML. Using CSS we can define the color and texture of your web page.

Adding CSS in your code you can make your site more attractive and reduce your work time.

CSS consist of a selector and a declaration block. There can be any number of declaration, Each declaration is separated by a semicolon, and Each declaration consist of CSS property name and a value, CSS property name and value is separated by colon.

Let’s see a sample CSS code for better understanding,

p {

color: red;

text-allign : center;

}

Here, p is the selector. The text inside the curly braces are declarations separated by semicolon. Color and text-allign are property name, red and center are their values respectively.

In this all the elements under <p> tag will be aligned center and with the color red.

So we have seen the basics of designing UI and creating a basic site using HTML tags.


What should be done after creating a site? How to host it?

This is an obvious question each of us will have.

Site Hosting

All you have to do to host your site is,

Choose your hosting server either linux server or windows server.

Select your web hosting plan. And buy your domain.

After you have purchased your web hosting, you will get Name Servers (also known as Domain Name Servers or DNS) — which is the Internet’s equivalent of a phone book that contains IP Addresses.

You have to change the name of the servers of your domain as given in hosting.

Add your files through FTP.

And done, your website will be live. Index.html will be the default homepage.


In this blog you have learnt the basics of UI, The difference between UI and UX,

Basics of creating a static website using HTML tags, you would have got an idea about what CSS is.

You would have also got an idea of how to host your website.

Now you are a beginner in creating a website.

Hope it was useful.

Stay tuned to learn more.


Written by,

Sabareesh C.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade