I did not start as a front-end designer, but my story is rather simple. When I was first working with design, implementing something like rounded corners was a pretty big deal. Right now, we can do all that with just one line of CSS. There were times when I asked my colleagues to implement something for me and the feedback I got was usually: why don’t you try to do it yourself? I finally gave it a shot and this is how I learned how to code.
Now it feels like it was a natural step forward on my web designer path.
But who is a front-end designer? Why do you need one in your team? What are the skills of a good front-end designer? Here are some answers I gathered based on my own experience.
Table of Contents
Front-end designer who?
The term front-end designer is quite new to the programming world. It emerged from the need to name a specialist as a graphic designer who understands front-end development. Front-end designers combine the key components of both jobs and live between the world of pixels and engineering:
- they understand the UX principles and best practices
- they have an eye for aesthetics
- they can write some JavaScript
- they understand the possibilities of frontend development
Front-end design involves creating HTML, CSS and presentational JavaScript code that make up a user interface.
Skills of a front-end designer
As mentioned above, front-end designers combine the skills of a front-end developer and a designer. Most importantly, we need to have a solid understanding of:
CSS & HTML
The most basic building blocks of web coding. Front-end designers master coding with HTML and CSS in order to build static websites. HTML is used for creating the foundation of a webpage and CSS is used to create the layout, colours, fonts and other styles.
JavaScript
Lets you add both simple functionalities to the websites and create super-advanced applications. Most of the front-end designers are familiar with JS frameworks like Ember or React, but it does not mean that they code advanced features with it. Personally, I worked with React, Ember and Vue, but am not a master in any - just enough to get around and know what is possible within this technology. Same goes for the backend, like Ruby on Rails I have been working with since 2012. This does not mean that I am a backend or full-stack developer by any means. The area to cover is too wide, there is no way to be good and up-to-date with everything.
Why do you need a front-end designer?
So why do you need a front-end designer if you have front-end developers and designers available? Well, a front end-designer will make sure that the design implementation process is as smooth as possible. If there are any changes between the design and implementation, it is an improvement, not laziness/oversight. Having a front-end designer will also have a positive impact on:
- Better design. Designers are often guilty of adding 24 different font sizes, 30 shades of grey when people are able to distinguish between only 5 of them or adding spacing that does not follow any rules. Instead of font-size: 36px it is 35, 36, 37px depending on how the designer randomly clicked it. Designers sometimes live in the perfect bubble of their design, and only cover the perfect scenarios, while developers often do not care if the margin is 10 or 20px. A good front-end designer merges those two worlds together and creates a perfect design.
Implementation. Naysayers say that implementing your own ideas makes you create worse designs since you know how much work is ahead of you. Personally, I would say it is a problem with a person’s approach, not with being a front-end designer. It happened to me way too often, I was bending over backwards around the designs I created. I know what is possible with plain CSS or how to push it to its limits and I know when I need some JS support.
Sometimes it is much quicker to do something in CSS and present the change to a client, rather than recreate the whole thing in Sketch or any other design tool.
Being the person that created the design, implementation is much easier as you already know all the variables and are able to convert them to code much faster, without the need to measure everything.
UX. UX is better as we pay attention to contrast, button and font sizing, placement of the elements or consistency. A front-end designer will definitely be able to perform a UX audit and ensure a top-notch look.
When you look on dribble, a lot of the designs there have no respect for accessibility or usability. This is a great place to inspire yourself, but many of these would not work in real life.
Conclusions
A front-end designer is somebody who ensures a good user experience executing both a great visual design and code. They act as a bridge between the design and development worlds helping to hold the bricks in place.
Even though not every designer should be able to code it is good to understand the basics of how the code works in order to create better designs and communicate with developers more effectively. Knowing how HTML and CSS work will help to better understand the limitations of designing for web applications.
If you want to work with experienced front-end designers, look no more. In Selleo, every designer knows at least the bare minimum of front-end development, which allows us to create impeccable designs that work well on every device and browser. Want to find out more? Contact us!
