Introduction
Are you an indie hacker, or a solopreneur? Or, a founding engineer in a startup? If yes, I'm sure your definition of a full stack developer does not just stop with frontend development, backend development and devops; it includes a good amount of UI design, sometimes you may do the complete design of your solution, is it not?
💡
Disclaimer: This post is not meant to be any sort of tutorial, this is just sharing my journey of building a product called "Wobu"
A bit of background
I'm developing a SaaS product called Wobu, and have been writing about it as a series. Check here for a quick brief about what Wobu is all about. For the past 1-2 months, I had to put it on hold due to other work commitments.
Restarting now in full throttle. I spent a few weeks learning UI design in a structured manner. In the past, it has always been some random stuff when it came to design, it was more of trial and error.
When you step out of something for a short while and come back, you see things from a different perspective. Have you experienced that? When I looked at the development made so far, I felt quite a few things can be modified and redesigned. One such thing was the User Interface. I felt I needed to give UI a complete facelift which is why I spent a quick two weeks to understand the fundamentals of UI/UX.
My resource to learn UI/UX Design
I did decent research on the internet and finally chose to learn UI/UX design from Gary Simon. He teaches so well and designs with such ease, that anyone will develop that bent of mind if they are willing to put the required amount of effort. I highly recommend his UI/UX course if you want to see the world through the eyes of a designer, it's truly fascinating.
My end objective was not to become a UI/UX designer but to design Wobu well, with all the aesthetics and technicalities that a professional designer would use.
Fundamentals of UI Design
A quick summary of the points that I made note of while following his videos. Below are the fundamentals of UI design, once we understand these rules, it's our creativity that then comes into play.
White Space
The blank space that surrounds any element on the screen is called white space. The key point when it comes to white space is that elements should be symmetric in all directions concerning white space.
Contrast
Colors used altogether should have the required amount of contrast between one another. For example, for a dark background, one cannot use dark or grey tones for text, it has to be something light so that it's easy on the eyes. Another aspect is the primary and secondary colors used in the design should have enough contrast. There are a lot of ways that Gary suggests to check that. One is the color wheel. It was good fun to play with it 🤩
Scale
Scale is the ratio between elements. For example, if I use font size 72 for the title, my sub-title cannot be in font 16. It has to be relative to one another. Likewise, if there are images and text on a screen, they should be of proportionate size.
Alignment
This is about the placement of elements in a frame. Elements need to be aligned uniformly. For example, if the text in a button is center aligned, it should be the same in every single button. Similarly, text should be aligned in such a way that there is neither too little nor too much whitespace.
Colors
Colors used in a design should be relatable to the business/product in the picture. The aspect of contrast between colors in elements is of utmost importance.
Typography
Fonts used, the size, and the weight are what typography represents. Choosing a font is not about whether a font is beautiful or not, it is about whether it creates the required impact for the business, and does it set the tone and mood. As in other basics, the whole aspect of being proportional is of utmost importance.
Visual Hierarchy
The last one is all about what should catch a user's eye when they look at a screen/frame. It also means there has to be some sort of proportion between one element and the other. This property reinforces the concept of scale as well.
These are the seven fundamentals of UI design. One needs to be super clear with these before venturing into any aspect of UI design.
Basic Components of UI Design
Once we get a good grasp of the fundamentals, we then move on to setting a foothold on the basic components of UI design.
If we take any website or a product, it will comprise all or most of the components mentioned below. Spending some time to learn how to approach designing these components is the next step. This is where our creativity comes into play.
Buttons
Feature Cards
Navigation/Header
Forms
Testimonials
Pricing
Image Galleries
Footer
There may be situations where we will have to stitch multiple components to design a flow. For example, let's assume in a product there is a 3-step process to complete the registration flow. One option can be to design a form and replicate it 3 times and stitch it together as multiple tabs or a process line with the numbers 1,2,3 to denote which step the user is in. Designing these is like building Lego blocks. There is no right or wrong as long as it adheres to the principles of UI design.
I spent quite some time trying out designs for each of these components. That helped me a lot when I started to design the screens and flow for Wobu. I consider it an investment ✅
Snapshot of UI design in Wobu
Since Wobu is all about journaling, I wanted to keep the tone more casual and something that resembles a handwritten diary. Journaling is more of reflecting on what happened in the past, it's more a mind-related thing, thus I went with warm pastel shades.
How did it help me?
Once I started to design different sections of the home page, sign in, sign up, forgot password and all the other pages, it started to help me in different dimensions. Although I designed the database tables and had a rough estimation of modules in terms of time and complexity even before I started to do a full-fledged UI design, once I completed the design it seemed like many things fell into place.
Database design
Designing the screens helped me revisit my models.py by adding a few fields that I overlooked in the first place. For example, when I designed the page for "Terms of Service", I added a checkbox for the user to accept. This in turn helped me add relevant columns to my User model. Likewise, there were many such changes that I made post UI design.
Usage of Third-party packages
There were a few screens that I designed as modals. While I designed that, I immediately looked out for ways to implement the same in Django. It helped me find a few third-party packages that I may have to use. I also looked for alternatives to implement a single screen.
Sharing a modal screen that I designed
Time estimation
When I designed the screens, it helped me to do a more practical estimation in terms of the time it may take to implement the same. To give an example, a normal add operation does not take a lot of time when we use Class-based views as it's pretty straightforward. When I used a modal window for the Add screen, I was able to come up with a time estimation that was much closer to reality.
Finetuning of requirements
An example will help to explain what I mean by the finetuning of requirements. While I was designing the search bar, I nailed down how exactly the search is going to return the results, and how is the user going to input search criteria.
Coming up with new features
Sometimes it kindles the right side of the brain so much, it helps to identify new and useful features 😂 that I originally didn't think of. For example, in one of the screens originally I thought of displaying a piece of content entered by the user. While I was designing the screen, I realized it would be very useful if they could export it as PDF.
Aids in writing more test cases
I'm sure most of us will accept this one. When we look at something visually, we tend to think of multiple scenarios that an end user will tend to perform. At least I added a lot more test cases than I usually do 😉.
Conclusion
If you work in a stable environment where there are dedicated UI/UX designers and follow a standard development cycle, the usefulness of software developers learning to design may not be that very relatable.
Whereas if you are developing a product solo, or you are someone who needs to wear multiple hats at work, then I'm sure you'll be able to appreciate the importance of developers learning to design.
In my personal opinion, irrespective of whether there is a need or not, understanding the basics of UI/UX design will help build more robust products, increase collaboration between team members, and be more practical in terms of time and complexity estimation.
If not anything, you can develop a good hobby 🎨
References
Gary Simon's Design Course
Illustrations from Storyset
