[Freebies, Learning Resources included] How frontend developers can get better at design?
A question everyone has in their mind… Should frontend developers be able to make great designs?
As a frontend developer, I thought its not my job. My job is to write application logic, handle login flow, make API requests and deliver overall fast experience to the user and this reflected in my side projects. And when I was working for companies we were using some bootstrap template.
But I was getting bored of making CRUD apps and the question was eating me up. Should I improve my design skills? Would I be judged on the basis of my design skills or my ability to write scalable CSS.
Some things which got clear pretty early on was in a small startup, front-end devs have to take care of the design. Most of the time startups don’t have full-time designers. Either they give the whole frontend to be built on contract or hire a frontend dev and ask them to build the design.
I didn’t know where I was gonna work so the most logical thing to increase my chances of getting hired was to get good at design.
I set out 4 milestones for myself-
- Get an eye for good design.
- Have a personal collection of design resources.
- Know how to implement unusual designs.
- Get hands-on experience with some UI design tool.
The first was the easiest to accomplish. I started to browse through Dribbble, Pinterest, UP and sometimes Instagram and curated the designs I found interesting.
On doing this, I started seeing some patterns and got an idea of the current design trends like colorful illustrations, rounded Call To Actions and popular fonts like Helvetica, Montserrat, Open Sans, Avenir Next.
One easy way to make your website stand-out is by having illustrations. Slack, Trello, GitHub all are doing it. The problem was I didn’t know Illustrator to make those but then I found these awesome freebies.
For fonts, I started using Google Fonts more and more and used Font Ninja chrome extension to identify fonts in websites. Now atleast I know some fonts which looks good. Before that I only knew about Roboto because it was the Material Design font.
Best Google Fonts here and here
With all the assets taken care of, what’s left was to actually design. But I was still not ready. Putting everything together was still not clear to me. I followed all the common tips and tricks but still no luck. My designs were still missing that flare. Then it hit me-
I’m thinking more about what would be easy to build rather than thinking how to make stunning design.
I wasn’t allowing myself to thinking outside the 3 column layout or the fixed navbar. To free myself from this mental roadblock I started converting the designs I saw on Dribbble to codepens with HTML and CSS.
After that, I started mixing and matching stuff. Change the font to something else and see if it looks better. Align things a little differently, tweaking colors, etc.
This greatly boosted my confidence and it made understand the meaning of this quote.
Good Designers Copy, Great Designers Steal
It developed my taste in design. In my mind I was able to see what would look good together and what not. Two resources which I highly highly recommend.
- Refactoring UI- Tiny nuggets to improve designs focused for devs.
- Learn UI Design blog- Highly opinionated advices which were actually useful.
From all the influx of new ideas it was getting harder to implement everything in HTML/CSS. So I decided to learn a UI design tool. I chose Figma because A) everything is CSS under the hood so what I design can be implemented. Same can’t be said about Photoshop. B) I can share designs with just a link.
Another thing I did was to design for mobile experience. Because of small screen size you’re limited to having only the most crucial elements in the viewport and so the number of things you have to design goes down. My point is its easier to design for phone then desktop. In the past, I used to add useless junk in website just to fill space or implemented a sidebar.
This was my path to self improvement. Below I’m adding the designs I have curated so far on Pinterest and Dribbble.