Introduction to Web Design
Tags: beginners, web, design
Published: 2020-01-08 10:37:39

---
title: Introduction to Web Design
published: true
description: A brief introduction to web design
tags: beginners, web, design
series: FrontEnd Development Zero to Hero
---
The word "Web Design" is an _amalgamation_ of two words namely __Web__ and __Design__. Web is short for __World Wide Web__ which in turn is abbreviated as __WWW__. Design on the other hand is a broad field more than worthy of a book, a quick search on the internet will yield thousands if not millions of results depending on your search string but, it boils down to two things:

* User Interface Design (UI Design)
* User Experience Design (UX Design)

UI Design is a field of design concerned with designing _user interfaces_ of applications, simple or complex.

UX Design is mainly concerned with designing applications __for the user__.

We'll discuss both topics later in the series.

The UI and UX design of an application will be useful if they are implemented using _code_. In the context of the web, the following technologies come to mind:

* Hypertext Markup Language (HTML)
* Cascading Style Sheets (CSS)
* JavaScript (JS)

These technologies are the three musketeers of web design and development with the recent addition of [WebAssembly](https://dev.to/captainsafia/why-the-heck-is-everyone-talking-about-webassembly-455a). HTML is used for __structure__, CSS is for __presentation__ and JavaScript for __behavior__. We've discussed all three in this series, if you need a quick a refresher you can check out the following links:

* [Introduction to HTML](https://dev.to/ziizium/introduction-to-html-3ik4)
* [Introduction to CSS](https://dev.to/ziizium/introduction-to-css-1fm)
* [Introduction to JavaScript](https://dev.to/ziizium/introduction-to-javascript-ajh)

HTML, CSS and JS combined can give us a functional web site but, we should take the following into consideration:

* Accessibility
* Usability
* Performance

Web accessibility is a broad topic and we've had books and blog post published on the topic. The theme of web accessibility is one  &rarr; _designing for everyone_ irrespective of device, network connection or web browser. We'll get into details later in the series. As an heads up you can check out the following resources:

* [Understanding web accessibility](http://www.uiaccess.com/understanding.html)
* [What is web accessibility?](https://www.nomensa.com/blog/2018/what-web-accessibility)
* [The Same, But Different: Breaking Down Accessibility, Universality, and Inclusion in Design](https://theblog.adobe.com/different-breaking-accessibility-universality-inclusion-design/)

Usability, the name should tell you what this is all about &rarr; _making your web site usable_. It has a really close relationship with _accessibility_ because if your site is not accessible it reduces the chances of its usability.

Performance, don't get me started on the topic. Every developer has a personal preference for making their site fast. __We won't cover performance in this series__ but, if you'd like to research the topic kindly check the following resources:

* [Improving UX Through Front-End Performance &mdash; A List Apart](https://alistapart.com/article/improving-ux-through-front-end-performance/)
* [What is web performance? &mdash; MDN](https://developer.mozilla.org/en-US/docs/Learn/Performance/What_is_web_performance)

<hr>

That's it for the introduction. Next, some _history lesson_.