If you had asked me four years ago, when I became a CS graduate, what kind of career path I saw myself following, I probably would have told you back-end Java development or something similar. I was never creative, in the paint meets canvas kind of way, so I didn’t really consider a career path involving front-end development and design.
As we all know, things change. Over the course of my career, I have become more and more interested in UI development and design. I have been lucky enough in my job to have gained exposure to front-end development and to have been allowed to invest time in improving the skills necessary to be a front-end developer.
Over the past 12 months, I have been striving to improve my understanding of UI/UX design, both because of personal interest and to allow me to be more effective when working with designers.
In this post, I would like to share the lessons I have learned, the resources I have gathered, and the mistakes I have made in the hopes that other developers will be able to learn from my journey.
Table of Contents
- It’s not just talent
- Look, think, steal
- Learn the theory
- Build something
- Don’t give up
- Resources
- Conclusion
It’s not just talent
This one seems obvious to me now, but there was a time when I thought that designers were wizards that were born with the ability to create amazing looking apps, and websites.
It turns out that they’re not. They have just worked hard to perfect their craft. In the same way that learning to code comes easier to some people, there are people who will have a natural talent for design, but talent doesn’t mean much without hard work.
Design is something that can be learned. Don’t make the mistake I did and write yourself off because you’re not creative in the traditional sense. Solving programming problems takes creativity; think about solving design challenges in the same way.
Look, think, steal
In the same way that reading good code will help you become a better developer, learning from what others have created will help you become a better designer.
The next time you visit a website or use an app, look at it and really think about why it looks and behaves the way it does. Why are the elements are placed where they are? Why is that button a particular color? Why do you have to perform actions in a certain order?
Take Medium’s applause button for example. Why didn’t they just use a “like” button like every other social media website? In my opinion, it was a clever design decision not to. Instead, they are able to reinforce the idea of community that drives the site by carefully designing an interaction. Giving an article or response fifty claps takes time for a user to do, but it helps them to really connect with the content they are viewing and the person who created it.
Sites like Awwwards and Dribbble have proven invaluable to me in the last year. Many of the designs I have created have taken liberal inspiration from the creations of other great designers.
Learn the theory
When I first started putting together designs of my own, I couldn’t figure out why they looked and behaved so poorly. The flows were awkward, the colors mismatched, and the layouts were inconsistent.
I thought I could just jump straight in and use my development knowledge along with my basic knowledge of how sites should work, as a user, and it would work out fine.
I was very, very wrong. I ended up creating designs from a developers point of view, instead of using design theory as a base.
Developers know how a site works, but designers know how a site behaves and feels. There is a big gap that you can only fill by gaining a foundation in design knowledge.
To gain a basic understanding of design theory, I mostly used Medium and Udemy. You can find links to the resources I used in the section below.
Build something
Any developer or CS professor will tell you that the best way to become a better programmer is to write code. The same principle applies to design.
It doesn’t matter what you design, as long as you learn from it. Treat it as a real project: Think about the users. Create wireframes, mockups, and prototypes. Iterate on the original design to improve it. You can use sites like Reddit to get feedback on what you create.
You can even pair it with improving your development skills. Most of my recent side projects have been motivated by a joint desire to improve both my web development and design skills. After you design your project, you can develop it and see both sides of the coin.
Here are some ideas to get you started:
- Design an interaction. Use Medium’s applause button for inspiration.
- Design an app for your favorite charity. Think about the different kinds of users: potential, infrequent, and regular patrons.
- Design your CV. Think about the colors you use and what the mean. Think about how your CV will be used. Will it just be viewed on a screen, or will it be printed out? How does that influence the design?
- Redesign an existing website. It could be your local transport provider or a global brand. Compare your design with the original and think about the differences from a user’s perspective.
- Design something physical, such as a new method of transport or maybe an alternative to something simple like a fork or chair. I have found thinking about the design of everyday things to be a really useful way of getting in the mindset to design something intuitive.
Don’t give up
When I look back on what I created a year ago, it’s hard not to wince. But everyone starts somewhere. Seeing the progression in what you create will be worth it. As long as you are learning from what you’re doing then your time is being well spent.
It might help to keep track of what you have learned at a regular interval. Every month I look back at some of the things I have worked on and try to take as much as I can from the experience. Even if it’s only to recognize some small piece of information you picked up from reading an article, it’s still progress.
Resources
Below is a small collection of my favorite tools, articles, and courses. You can find many more that I haven’t listed here, and here.
Tools
Figma — Design and prototyping with collaboration.
FramerX — Similar to Figma, but with added React, and discoverable components.
Coolors — Discover and generate color palletes.
WebAIM Contrast Checker — Make sure your colors are accessible.
Archetype — Typography system editor and generator.
Articles
7 Practical Tips for Cheating at Design
10 cheat codes for designing User Interfaces
10 Small Design Mistakes We Still Make
A Complete List Of UX Deliverables
The Psychology Principles Every UI/UX Designer Needs to Know
How to use colors in UI Design
16 Quotes You Need to Read as UX Designer
Product Design Principles in a Single Card
Courses
User Experience Design Fundamentals — Udemy
The Complete App Design Course — UX, UI and Design Thinking — Udemy
Conclusion
I hope you have been able to take something from my journey. If you have design tips or resources that have helped you learn, I would love to hear them in the responses.
Thanks for reading!