Basics of web design course free for beginners

 

 

Web design is a lucrative career option. It combines tech skills and creativity. Some people say that web design is a dying career. That AI will render web designers jobless. But this is as ludicrous as saying AI will replace painters or musicians. 

I start at this point with a confession: I have completely zero ideas about web design. But, I choose to learn it. I have not created a web design course free of cost because I am an expert web designer with decades of experience. Thank you for being with me on this journey. 

What do web designers do?

Web design is an umbrella term that covers many disciplines. Web designers may want to specialize in one or many of them. Let us take a quick look at these various roles.

 

User Experience (UX) design 

 

The purpose of UX design is to give a great experience to users. It makes them engage more with your site, app, etc. Even UX design is a broad discipline. It covers the following:

User Interface Design

 

It is all about how the interface looks. The color palette, the font, the style, the looks of your website. The buttons and options should be easy to find. The site should be easy to navigate, etc.

Usability

 

It means how simple the user finds it to interact with the website.

Accessibility

 

Different users use a website to solve different problems. Accessibility means all should find the interface easy to use.

Information architecture

 

A site has a lot of information. Information architecture means organizing all that information. Moreover, it is to make it easy to access this information.

Human Computer Interaction (HCI)

It is to make the interaction between human users and machines natural.

Languages for web designing

Web designers have to learn a variety of languages. Let us take a quick look at them.

HTML

 

It helps to give the structure of the website.

CSS

 

CSS determines the color, font, and the complete layout of the web page.

Java and Python

 

Java and Python help to design the server part of the website.

JavaScript

 

It helps the website to interact. Like when we play mobile games, we click on various parts of the screen. There are animations that serve as buttons. JavaScript is a popular choice for making them.

React

 

React is a JavaScript library. It helps to make interactive web interfaces.

Angular

 

It helps to design the front end of any website.

Scala

 

You can code for an entire web application using Scala.

Objective C

 

It is a popular object-oriented programming language.

This is a long list. I am not going through the tutorials of all these languages first. I will learn only as much I need to build my website from the scratch. 

Web designers have to create some documents. Let us go through the list. 

User research and testing report

 

When you design a website, your users should love it. That is the ultimate goal of web design. User research and testing reports help to know how your users respond to your website. With this data, you can improve your website.

 

When should we do UX research?

 

When we do this research in the initial stages, we know where to divide the budgets.

 

Suppose you are halfway through your web design process and have some doubts. If you conduct this research then you will know in which direction to proceed.

 

When you have completed the website, let your customers use it. Conducting this research will help to know what updates to make.

How to perform a user research and testing report?

 

The purpose of this research is to know what your users want. There are some points which you already know about the user. But, whenever you feel stuck about how you should design, ask the user.

 

But, conducting research is time-consuming and expensive. You have to use a research method that fits your deadlines and budgets. 

After you have gathered data about what the users want, verify it with your ideas about the users. You had some ideas about what the users want from your website. Does the research data agree with it? If not, change your ideas. 

Wireframes

You have some ideas about what your homepage or login page should look like. To make wireframes, you can use white paper and a pen. No need to worry about the color palette, font, style, etc. 

In a wireframe, you only sketch the buttons. You can determine where they should appear on your screen. Then include further design instructions. 

You may also use various free online wireframing tools.

UX sitemaps

On a website, there is a hierarchy to link the web pages. Some pages have higher priority than others. If your website is complex, then you can make a deep sitemap. If it is simpler, you can use a flat sitemap (less than 4 vertical levels).

Storyboards and user flow charts

What are UX storyboards?

 

 

Storyboards are tools that help to visualize UX when they use your website. It helps the web designer to step into the shoes of customers to produce good websites. Then it lets you get rid of excess frills. 

 

It gives a concrete direction to the design process. You don't have to be a great artist to be able to make storyboards. You don't even need complex and expensive software. Pen and paper are good storyboarding tools.

What are user flowcharts in UX?

 

Every user visits your site to complete some tasks. The sequence of steps that a user takes to complete the task is the user flowchart. You have to visualize the steps to make better judgments.

 

 

Some may enter your website from a google search. Then what course will they take to navigate your website, reach the priority pages, etc? 

Visual or graphic design

 

 

Graphic designers do not do any coding. They create graphics to use on the website. They create illustrations and graphics to enhance the website UX.

 

A web design involves creating interactive interfaces. There are buttons and animations. But, graphic design produces static objects.

Style tiles

Your brand has colors, font, etc. for identification of its unique identity. This is a method of visual communication of the essence of your brand. 

They communicate how you want to apply your design to the UI of computers and mobiles. It will give direction to your design process. 

Let us take a look at some other concepts of web design.

Front end vs Back end web design

 

The front end and back end are two different things. They are both necessary to develop a website.

Front end development

 

This is the client-side of the website. The user communicates and interacts with this part. Fonts, colors, contents, and all things that appear on the user screen form its components.

 

Programming languages for front-end development are HTML, CSS, and JavaScript.

Frontend frameworks and libraries: Front-end libraries and frameworks are codes written by others. They help to perform common and iterative tasks with ease.

Some common examples are AngularJS, React.js, jQuery, SASS, Flutter, etc.

Backend development

 

This is that part of the website that the users cannot and need not see. It is server-side. It stores and organizes all the data. The backend is the reason why the frontend can work.

 

The backend takes care of everything that the user does in the frontend. API, library, and coding are parts of the backend.

Languages to develop backend: PHP, C++, Java, Python, JavaScript, Node.js, etc. 

Backend frameworks and libraries: Express, Django, Rails, Laravel, Spring, etc.

Conclusion

 

This was to get an overview of all the things we are going to do further in this course. In the next article, we will learn how the internet works. We will go to the depths of web browsers, IPs, etc. 

 

Then get the basics of how to develop the coolest website.

 

Love what you read? Go to my homepage. Also, to check out cool science stuff, click here.

 

See you in my next blog.