Web Design: What to Learn First

Over the years the all encompassing term ‘web designer’ is replaced by number of more specific-sounding names; User Interface (UI) Designer, User Experience (UX) Designer, Front-End Designer, or Interaction Designer to name a few. Depending on where you work, some of these terms may actually be tied to a specific role unique from one another. But in general, they are used interchangeably. Apart from the fact that these may be more period correct titles, they are all part of the archaic umbrella ‘web design’.

In addition to the change in what we call these professions, the expectations of their reach has changed as well. It’s no longer enough just knowing how to mockup a design in Photoshop. It’s been well established that you really can’t design unless you have some understanding of the underlying code. Using modern techniques, almost all graphical elements can be created with code. Bitmap elements are no longer used to construct the UI. It is quite possible to bypass the entire photoshop stages and not use any bitmaps in the creation of modern websites. Therefore, the market demands that designers not only able to think visually but also articulate their vision with code. The ability to code and to be able to do it properly is no longer preferred, it’s required.
So what should you learn first?

HTML and CSS

There is no way around this one. You need to live, think, and dream in HTML and CSS. HTML is the backbone of everything web. Almost all programming languages you may encounter in web development ultimately generates HTML markup as output. Know what it is, why it is, and what it does. HTML is to web as a dough is to pizza. No dough, no pizza.

Most dismiss the depth and seriousness of CSS because it is so easy to learn. It’s also the reason why it is so easy to write bad CSS. It may only take hours to learn CSS but to master all of the intricacies, nuances, and implications related to CSS requires serious commitment, time and effort. It’s no different than learning how to play chess. Easy to learn, but if you’re not serious, you’ll suck at it for the rest of your life.

Javascript

Javascript is no longer an optional skill set for web designers. Without it, you’ll most likely not get very far in your career. Some may disagree and claim you can go right to jQuery be done with it. But I strongly disagree. It’s easy to skim the surface of jQuery and be happy with what it does. But without the fundamental understanding and principles of object oriented programming, it’s impossible to exploit the full potential of any Javascript library. Although it’s not necessary that you master the full spectrum of Javascript but you need to at least get your head around the concept of objects, prototypes, inheritance, and constructors.

Javascript, on the surface may seem straight forward and easy. But a shallow knowledge of Javascript is a dangerous thing. You need to be seasoned enough not to write bad code. Javascript can add magic and life to the web. But it can also destroy it very quickly. Having in-depth knowledge will give you the power to straighten things out when things go wrong.

jQuery

Rarely anyone questions the value of jQuery. It is a Javascript helper tool written in Javascript. It has proven hugely popular among web designers and developers because it sheds huge burden of writing Javascript manually off of our shoulders. So learn it and embrace it. jQuery isn’t going anywhere anytime soon. Yet, jQuery isn’t meant to replace raw Javascript entirely. Some may say you do not need to know lick of Javascript to use jQuery. But the fact that you are using jQuery by definition means you are writing in Javascript. You will be enlightened once you discover why the syntax looks like it does and what goes behind the scenes. jQuery can be even more powerful tool once you become comfortable using it in conjunction with raw javascript and the foundational understanding of the language.

Sass, Less, Stylus

These are extensions of CSS also known as CSS preprocessors. If you are still writing CSS manually without aid of preprocessors, you will become a web design dinosaur very quickly, if not already. CSS by nature is not dynamic. It’s not quite smart enough for today’s large complex web applications. CSS can grow massive and out of control over time. Large CSS is a nightmare to maintain. CSS preprocessor adds a bit of intelligence to CSS by having concept of variables, functions and operations much like the behavior of many modern programming languages.

CSS preprocessors ultimately generate chunk of CSS for browsers to use. But you’ll mostly work in your authoring file which can be organized and written logically making it easy to maintain and manipulate.
Sass or Less? Seems like most designers feel less intimidated by Less (ah, potential pun, although not intended) because of its Javascript origin. However, I feel Sass is bit more robust. Feel free to disagree after you’ve become exposed to both. No need to fear Ruby dependencies of Sass. You only need it to install Sass and to compile css. Just knowing few lines of command line will suffice to get started. In any case, working with CSS preprocessors is lightyears more advanced than writing CSS manually. Stylus is also gaining momentum. Might want to check that out as well.

Angular JS

AngularJS is a Javascript based structural framework that lets you build rich, dynamic web applications. Angular makes your HTML page dynamic by adding interactivity, data-binding, routing, and state management. Angular is relatively lightweight for what it is and what it can do. This type of framework is known as Single Page Application (SPA). Although the SPA method is totally suitable for creating a single page applications or websites as its name implies, the term ‘single page’ is meant to describe the way Angular interacts with a given HTML (or View) template where the template can be part of a much larger project. Angular is widely used as part of large enterprise applications. Angular is built on the concept of Model-View-Controller (MVC), something you’ll come across when working with developers and software architects. MVC is a concept even designers should be familiar with going forward as its implications span multiple areas of web development.

Github

If you are involved in any type of web development, chances are, you likely have come across Git. Git is simply a version control repository that uses algorithm that makes it really fast and efficient. It also has many unique features that allows contributions and community building. In some ways, you can think of Git as social media for geeks. If you are not yet familiar with Git, start now. Designers should get familiar with it because you will use it quite a bit as collaboration with developers tightens.

PHP/MySQL

PHP is the most popular, most used web language in the world. Because of its relatively low learning curve at the start and ease of implementation, PHP is sometimes referred to as the duct tape of the internet. But that shouldn’t undermine the importance and the power of PHP. Many big names on the web are based on PHP. It’s easy to get in the door of the server-side web development with PHP. It’s tight integration with mySQL database also means you’ll be exposed to database integration and SQL which is a big plus. More importantly, for many, PHP serves as a perfect transition phase or bridge to other server-side web technologies. Knowing one web technology makes it easier to get your foot in the door of another.

Grids

There are myriads of grid systems to choose from as it seems one is introduced each week. Feel free to experiment with as many or just stick with the most popular. In any case, I’m sure each one of those has some justification for its existence. Managing layout and responsive breakpoints becomes trivial and mindless with a well designed grid system. It’s an easy way to quickly build prototypes and POC as well as a foundation for the entire application. Most grid systems are designed around generic scenarios in hopes to accommodate wide range of uses with minimal tinkering. It’s relatively easy to experiment with various grid systems with a small websites or applications. But choose your grid system wisely as it may not fit your specific needs and it will become extremely cumbersome to switch to a different grid system as the project grows larger.

React JS

If you feel adventurous try to explore React. It is a very interesting concept based on what they refer to as Vitual DOM. Bunch of Javascript and JSX is used to generate the HTML/DOM. Some use React to generate inline styles. You create and manage the HTML with Javascript/JSX and possibly the styles as well. It is quite possible to build an entire app with React without use of any external stylesheets. It throws the conventional wisdom built around HTML markup out the window. However weird, React is gaining momentum. It’s yet too early to dismiss React. Who knows it may be the way of the future. Learn to embrace or at least acknowledge the things that question our old ways of doing things. Because lot of good things result from it.

And Other Stuff

There are many helper tools available to front-end developers. As designers become more serious with code, many of their toolsets will overlap with that of the developers. There are tools that automate minifications, managing dependencies and libraries, and many other repetitive tasks one may come across during web development.

It’s worthwhile to look into some of these tools at least to understand why they exist. You may not be interested in any of these tools at the moment. You may or may not need them for your job or projects at the moment. But do look into them and at least know what they are. It will broaden your knowledge spectrum as far as web development is concerned. Know what goes on not only in web design but in web development world as well. Be aware of the trends. Design and development is converging. Designers are no longer working in isolation from developers. Become resourceful, broaden your knowledge base, span across various disciplines within web development. Become a valuable asset anywhere you go.

Leave a Reply

Your email address will not be published. Required fields are marked *

The Human Factor * Time limit is exhausted. Please reload CAPTCHA.