Every year I see frontend developer roadmap videos released, which are filled with tons of latest tools, frameworks and libraries to cover in order to become a successful frontend developer. It's important to learn them but there is one thing which I see missing in a lot of these articles. This little thing is UI design and let me tell you why with this 3 simple reasons:
1. A Better understanding of the thought process behind UIs
Our main task as front-end developers is mainly to take designs from UI designers and transform them into a website using HTML, CSS and Javascript. But if we don't have the slightest idea about why a particular colour scheme was chosen or why the blocks which are in UI are positioned in a particular manner then chances we won't be able to give proper justice to the design.
Also understanding things from UI designer's perspective helps us in giving constructive feedback when we need updates from the team in particular feature designs.
2. A new perspective on minute little things like fonts and spacing
As a developer, whenever I saw a font-family I would usually search for a font, add it in CSS and be done with it. Now I realise that fonts do play a crucial role in the overall looks of a website. Also, designers always lay emphasis on using a single font-family wherever possible so as to not have to download additional font files while the page is loading.
The second important thing I realised was an emphasis on having a proper spacing between elements and colour contrast. I had no idea prior to this, that a lot of thought process goes into the spacing between different elements as well as how much white space a page should typically have.
3. The design grid system
I was aware of 12 column grid system which we typically use in CSS styling but for the first time came to know that website designers also use a similar grid system to build designs for a website. This is actually going to help a lot in future when I would be able to relate the design UI grid to website grid.
The point I am trying to make here is we don't have to master UI design but at least know the basics of this field in order to become a better frontend developer.
If you liked this article, then share it with your people who can learn from it and connect with me on Twitter with your views.
Top comments (0)