Learning Website Design is a fun and rewarding venture! Many freelancers and professionals alike, aspire to learn Website Designing to expand their skillsets and resume. While learning Website Design is not a particularly difficult endeavour, it takes plenty of time and practice to be proficient.
Being a versatile Website Designer requires knowledge in several areas, particularly in coding. There are several routes one can take to learn Web Design. Fortunately, vast amount of articles and videos are available online for those who prefers self learning.
However, online learning can be unstructured and confusing. Especially for people with no prior IT Knowledge. In writing this article, we hope to help aspiring Web Designers and Coders alike on the journey to learn Web Design.
Web Design Languages
We begin by introducing to you on the various Web technologies and languages that are pre-requisite for every web professional. It does not matter which specialization in Web Design and Development you finally choose. You will need a basic understanding of these technologies.
HTML
HTML is an abbreviation of “Hypertext Markup Language”. In essence, it is the code that represents the structure and contents in all web pages. Basically, the web browser decodes HTML code into a visual representation for the viewer. And it is absolutely the first thing you should learn. Here are some examples of what HTML code does.
- Add hyperlinks to connect different pages and websites
- Add tables and forms
- Embed rich media such as Videos
- Display graphical elements such as Scalable Vector Graphics (SVG)
You can learn Basic HTML from W3schools, a free online coding resource website.
CSS
While HTML takes care of the structure and content, Cascading Style Sheets (CSS) are responsible for the layout and the look and feel of the website. Before CSS came along, HTML was used for layouts and the presentation of the layout as well. Which ultimately resulted in messy and incoherent codes. The idea for CSS is to separate the code for Design and styling into a separate file. Imagine, with CSS, one could change a font type for the whole website by editing just one line of code!
It is basically CSS technology that is responsible for Responsive Websites that we see today. CSS allows for different layouts based on different browser sizes.
Another unique feature in CSS is the “Cascade“. It allows overwriting and applying rules based on a level of importance. This comes in very useful, when editing a website. For instance, a Web Designer does not need to find a line out thousands of lines code to edit. But instead, declare a new style rule to supersede the older style.
CSS3
Now at version 3 specification. CSS can do a whole lot more that just defining width, height, fonts and colors of HTML objects. CSS3 is able to react user interaction to create rich user experiences (UX) with 2D and 3D animated effects. Of course, there are limitations to it’s capabilities. That brings us to the next must-know technology.
CSS usage examples:
- Defining a global font type for a Website
- Transforms and animates HTML objects
- Hiding and showing HTML objects according to device size.
JavaScript
Ah trusty old JavaScript. JavaScript is a front-end language that runs on the browser giving enabling a website to be more interactive (by transforming HTML DOM objects and properties) and functional (retrieving and pages and information asynchronously) .
JavaScript has been around since the early days of browser technology. In the past, it is used mainly for validating user input for online forms and creating annoying popup windows. Today, with the popularity of JavaScript frameworks and Node.js, JavaScript programming has become one of the most sought after skill set.
For a person with no IT background, JavaScript is easily the most difficult language to master. However, mastery in JavaScript is not necessary to be a Web Designer. Being able to use, customize and debug existing JavaScript libraries is sufficient for a Web Designer. But if you wish to specialize as a Developer, you may need in-depth knowledge in JavaScript.
UX/UI
In large development teams, a traditional Web Designer’s role may be replaced as UX/UI Designer. UX is an acronym for User Experience and UI means User Interface. These roles are generally taken up by the same Designer. A UX/UI Designer has to be Design oriented as well as be able to optimize users’ journey around a website or application. Although the requisite technical knowledge is largely the same as a web designer, a UX/UI designer is more focused in making use of data metrics and research to produce detailed wire frames and prototypes. Most web designers can easily transition into this role. More information here.
Back-end Programming Languages
If a Web Designer is familiar with back end languages, it can be extremely helpful. Although, in larger teams, this should technically be handled by developers, it would be an added advantage for Web Designers to be able to make modifications or write simple scripts. For example, a simple Web based contact form.
Conclusion
Well, there you go! While this guide is not super comprehensive guide to must-know web technologies, we hope that it gives you an overview on the pre-requisites on learning Web Design. From time to time, we’ll update this post to reflect the most recent technologies and software. And of course, should you are looking for some awesome Web Designs, check Our Works!
