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.
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.
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 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.
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.
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.