What is a Front-End Designer and Why Do You Need One?
I didn't start out as a front-end designer, but my story is quite simple. When I first started working with design, implementing things like rounded corners was a fairly complex task. Now, all of this can be done with just a single line of CSS. There were times when I asked my colleagues to implement something for me, and in response I got: "Why don't you try doing it yourself? Eventually I tried, and that's how I learned to code."
Now it seems to me that this was a natural step forward on my path as a web designer.
But who is a front-end designer? Why do you need one on your team? What skills should a good front-end designer have? Here are a few answers I've gathered based on my own experience.
Who is a front-end designer?
The term front-end designer is relatively new to the programming world. It arose from the need to name a specialist who is a graphic designer with an understanding of front-end development. Front-end designers combine key components of both professions and live between the world of pixels and engineering:
- they understand UX principles and best practices
- they have an aesthetic sense
- they can write JavaScript
- they understand the capabilities of front-end development.
Front-end design involves creating the HTML, CSS, and presentation JavaScript code that make up the user interface.
Front-End Designer Skills
As mentioned above, front-end designers combine the skills of a front-end developer and a designer. Most importantly, they need a solid understanding of:
CSS and HTML
The most basic building blocks of web coding. To create static websites, front-end designers master coding with HTML and CSS. HTML is used to create the structure of a web page, and CSS is used to create the layout, colors, fonts, and other styles.
JavaScript
It allows adding simple functions to websites as well as creating super advanced applications. Most front-end designers are familiar with JS frameworks like Ember or React, but that doesn't mean they develop advanced features based on them. Personally, I have worked with React, Ember, and Vue, but I am not a master of any of them — just enough to navigate and know what is possible within that technology. The same goes for backend, like Ruby on Rails, which I have been working with since 2012. That doesn't mean I am a backend or full-stack developer. The scope is too broad; it's impossible to keep up with everything.
Why Do You Need a Front-End Designer?
Why do you need a front-end designer when you have front-end developers and designers? A front-end designer will ensure that the design implementation process goes as smoothly as possible. If any changes occur between design and implementation, they are improvements, not oversights. Having a front-end designer also positively impacts:
Improved design. Designers are often guilty of adding 24 different font sizes, 30 shades of gray when people can only distinguish 5 of them, or adding spacing that doesn't follow any rules. Instead of font-size: 36px, you get 35, 36, or 37px depending on how the designer accidentally clicks. Designers sometimes live in a perfect bubble of their design and only cover ideal scenarios, while developers often don't care whether the margin is 10 or 20px. A good front-end designer merges these two worlds and creates an ideal design.
Implementation. Detractors argue that implementing your own ideas leads to worse designs because you know how much work is ahead. Personally, I would say that's a problem with the person's approach, not with being a front-end designer. It has happened to me too often; I would bend the design when creating it. I know what can be done with simple CSS or how to push it to the limit, and I know when I need JS support.
Sometimes it's much faster to do something in CSS and present the changes to a client than to recreate everything in Sketch or any other design tool.
Being the person who created the design, implementing it is much easier because you already know all the variables and can convert them into code much faster, without having to measure everything.
UX. UX is better because we pay attention to contrast, button and font sizes, element placement, and consistency. A front-end designer will certainly be able to perform a UX audit and ensure a top-notch appearance.
If you look at Dribbble, you'll notice that many projects there don't consider accessibility or usability. It's a great place for inspiration, but many of them wouldn't work in real life.
Conclusion
A front-end designer is someone who ensures a good user experience by using both excellent visual design and code. They act as a bridge between design and development, helping to keep the pieces in place.
Even though not every designer should know how to code, it's helpful to understand the basics of how code works in order to create better designs and communicate more effectively with developers. Knowing how HTML and CSS work will help you better understand the constraints of developing web applications.