Learning UI design as a developer
At the end of 2017, I made a goal for myself. Learn how to do UI design. As a full stack developer, I am able to code any required functionality for an application. However, users today have come to expect a certain level of polish from the apps they use daily. Creating these good user experiences was not something I was able to do on my own. In any personal projects I worked on in the past, I had to either pay a designer to do the work, or find a designer that was willing to collaborate, for free, on the project. As a generally awkward person, networking and finding new designers who are interested in collaborating on projects was mostly out of the picture (👋 if you’re interested). As a person with a finite amount of money, hiring designers for projects that I wasn’t expecting to generate money was not a financially sound decision either. This dilemma led me to do some serious thinking.
“Maybe I can learn to design and become a one
man team.”
I started by trying to find some courses or guides online, I realized that, while it is possible for me to learn some things online, it would be better to start with a solid foundation. The hope was that, with the guidance of an experienced designer, I would be able to pick up the basic. With that in mind I registered for a 3 month design course at a boot camp school. This, I have to say, bore mixed results. The classes were not at the level that I was expecting and had left almost all hands-on work as homework. Some things were covered well: Sketch, where to find good resources, what good design looks like. Other things, I felt, were merely skimmed over: the grid, or how to effectively choose colour. These gaps thankfully, were covered using a combination of the Internet, and a very helpful friend (🙏 forever grateful). In retrospect, would I take a course again? Yes, I would. The weekly classes prevented me from procrastinating and forced a structure to my studying. I am sure we have at least 1 udemy course that we purchased but never gotten around to finishing, or, *gasp*, even starting! If I were to take the course again I would probably do more research to find a course that was cheaper.
Tip 1: Find a nice friend or coworker who is willing to spend a couple minutes answering questions. Maybe bribe them with cookies.
Tip 2: Learn the grid.
Tip 3: Do your due diligence before dropping a grand or more on a bootcamp course.
After finishing the course, I begin to do some practice on my own. I started by copying pre-existing UI elements I found on the internet. For example, I would recreate fields and labels in Sketch. This helped increase my level of comfort with the tool. Trying to design something that looks good from scratch and struggling to use the tool at the same time was too discouraging. Learning the tool first allowed me to focus on designing, without the frustration of using a new tool getting in the way. Much like I learned how to use Xcode or Visual Studio to code, test, debug, and deploy, I learned how to use Sketch to design, layout, and create UI elements. I also started to gather as many free resources as possible:
* Unsplash for images
* Noun Project for icons
* iconmonstr for more icons
* Squirrel fonts for fonts
* Google Fonts for more fonts
* Material design for some guidance on colous
* Color Hunt for some more colour inspiration
* Sketch App Resources for free Sketch resources
Tip 4: Choose one tool and stick with it. I chose Sketch. I like Sketch. Maybe you like Adobe XD. Choose one and stick with it. You do not want to waste time learning two tools instead of learning how to design.
Tip 5: Use a tool like [Nudg.it](https://nudg.it) to set the nudge in Sketch to something other than 10.
Tip 6: Try to use hotkeys as much as possible, it will save you a great deal of time in the long run.
Throughout the year, I tried to hone my ability to identify good design. What makes designing hard for me as a developer is that I am used to structure and rules. There are the rules you have to follow to satisfy the compiler. There are generally agreed upon principles like SOLID, and KISS. There are predefined data structures and algorithms like heaps, graphs, merge sort, and quick sort. With all of these rules and guidelines, generally, you are able to tell pretty easily if you are either following them or not following them. With design, at least in my experience as an engineer, it is much harder to tell if you are following the rules or not. Is there enough white space? Do these colours go well together? Did I choose font sizes that are large enough? I started to get into the habit of was spending a few minutes each day browsing sites like [Dribbble — Discover the World’s Top Designers & Creative Professionals](https://dribbble.com), [Flat Design Gallery & Showcase • An inspirational resource for designers • Flat Inspire](http://flatinspire.com), and [One Page Love](https://onepagelove.com). This way, I slowly trained my brain to identify what looks good. I am slowly gaining the skills needed to identify issues and to determine how to fix them.
Tip 7: Dribbble is very visual heavy, use it as a way to see what looks good visually, but ask yourself if the design would lead to a good user experience. Did the designer account for an empty state? Did they account for an error state? Will it look good on something other than an iPhone X?
With these puny skills in hand, I started to work on an iOS project that I have been wanting to do for a while. The first part of the process, creating wires, was mostly simple. I was able to create something that was not hideous. That fact that it was all in grey and not finalized made it easy for me to work without the stress of having to get it to look perfect. When it was time to move to mocks, however, I was completely stumped. I was so afraid of how the design will turn out, that I simply kept procrastinating. Whenever I would open Sketch to work on the mocks, I would stare at my screen for a while, then, I would open my IDE and do some backend coding instead. After months of putting it off, I finally forced myself to sit down, and start creating the mocks. I set my expectations very low. It was perfectly acceptable for the design to just be okay. It did not need to look amazing. I started with the easiest elements: labels and text fields. Completing these simpler elements helped me build my confidence so that I could tackle more complex elements. It is also important to get feedback at this stage from designers and not lay people as they are able to give advice on how to improve the design. Being told only that things do not look good is very demotiviating.
Tip 1,000,000: Just design. It’s okay for it to be okay. With time, it will get better.
So far, I have completed only 30% of the design work for this project, but, I feel that I have gotten over the biggest hurdle. Overall, I think the journey was worthwhile. Starting something new that I am not good at was definitely uncomfortable, especially since I had gotten used to being (relatively) good at what I do. My next step is to finish designing and to start work on putting together a kickstarter. I feel a kickstarter will help me validate the idea and to gauge interest. Designs and visuals will be the most important tools in selling the idea, things I would not have been able to create with my engineering skills alone.
If you are also an engineer that has tried learning to design or a designer with some tips on getting started, I would love to hear from you.
Note: I got the iPhone X layout used in the cover photo from here and the mocks utilize the avataaars Sketch library.
