Hey notJust Developers,

The UI design is a crucial aspect of building a successful mobile app. Even though I believe that an app should first be functional and only then beautiful, it is not too difficult to build a functional app that looks good. For that, we have to stick to some basic design fundamental rules and have some systems in place and our app will already look much better.

In this issue, I want to share with you some important design principles that served me well in my career as a mobile developer.

This issue is sponsored by IBM StepZen​

Intimidated by GraphQL? 😱

With IBM StepZen you’ll be impressed how easy it is to build GraphQL APIs.

All you have to do is run a CLI command ($ stepzen import), and IBM StepZen does the rest. It connects with a wide range of data sources such as SQL databases, Rest APIs, and even other GraphQL APIs.

I’ve personally used it in multiple projects (Spotify, StackOverflow, LinkedIn) and it saved so much time.

Let IBM StepZen take care of the boring stuff so that you can focus on building impactful apps 🚀

Start with a sketch

When starting out a new project or feature, go ahead and sketch it with a pen and paper.

At this stage, focus on the big picture, and try to ignore details. Details come later. For the same reason, I wouldn’t recommend starting with high-fidelity designing software like Figma. If you do that, you will be forced to design everything to the smallest detail. Which is not your goal at this moment.

Start designing the smallest version of the feature that you can implement in a weekend. Don’t go overboard, and design things that you would like to have at some point - the “nice to have” things. Instead, start small and go ahead and implement it. After implementing the initial version, go back to the drawing board, and design the next version based on the learnings. This way, you will work in cycles, going from design → implementation over and over until you have the perfect feature.

Visual Hierarchy

Visual hierarchy refers to how important the elements in an interface appear to one another, and it’s the most effective tool you have for making something feel “designed”.

If everything on a screen is fighting for the user’s attention, then the application feels cluttered and the user becomes confused.

For every screen or feature, think about the priority of the elements. What is the most important information that the user will find on this page, and make sure that it is emphasized.

We can emphasize something using different strategies:

• making it bigger - this is the default solution most of us choose. If we overuse it, then we can fall into the trap where important info is too big, and less important info becomes small and unreadable.
• making it bold - works well for texts that should be emphasized, ex: username
• increase the contrast - a gray text over a white background will feel less emphasized, compared to black text of the same size.
• emphasize by de-emphasizing - a good strategy to make something pop, is to decrease the emphasis on the elements around it.

Colors

Colors are a very important part of your design. It’s quite hard to nail it, but it’s very easy to see when something is wrong.

Following a color system that you define initially will help you stay consistent. It will also help you avoid opening a color picker every time you need to style a new button.

There are 4 categories of colors you need in your system:

1. Primary color
2. Accent color
3. Neutral or grays - all apps need grays for texts, backgrounds, shadows, and borders.
4. Semantic colors - red for errors, yellow for warnings, and green for success states.

However, having only these shades of colors will limit you in your choices and the design will suffer. You will need more colors than you think.

That’s why, for every color, we have to define 5-10 shades of that color. A good rule of thumb is to start with 9 shades for each color.

Start with the base color, and then define 4 lighter and 4 darker colors. Let’s call our darkest color 900, the main color 500, and the lightest 100.

The darkest shade should be used for texts and the lightest shade for backgrounds.

In the end, your color system will look something like this:

Create this color system in your project in a separate file Colors.ts. Never hardcode a hex color in your code - always refer to a color from your system - ex: Colors.red500. This way, when you decide to change some colors, you can easily do that in one single file.

Buttons

First of all, I have to say it: keep your buttons consistent.

Nothing screams “bad design” louder than inconsistency. Define one style for your buttons, with some variations, and then stick to your system. Maintain similar sizes, colors, border radius, text style, capitalization, shadows, and effects. This can be done by creating a reusable button component, and using it instead of always redefining the style of buttons on every screen.

You need 3 variations of buttons, that define their priority in the hierarchy of a screen:

• Primary - usually for the main Call to Action - what do you want the user to do next
• Secondary - secondary actions
• Tertiary - least important buttons, that should not distract the user flow

Text and Typography

When working with text, it’s important to follow the previous rules - keeping everything consistent and defining a clear visual hierarchy using size, weight, and color. Moreover, when working with large bodies of text, it’s important to make it readable.

Use a high-quality font family. If you are not good at picking the right font family, I would recommend sticking with the default system’s font. Not only it will work in most cases, but it will also be a font that the user is familiar with.

Define a system for font sizes. You don’t want to spend energy choosing between 23px or 24px for a heading. A well-defined font system will save you time, and make your app consistent. For large sizes, make sure that the distance between the 2 sizes is quite large. For example, 40px and 42px will look almost the same.

Speaking about readability, when we have large bodies of text, make sure there is enough space between the lines, to make it easy to read. Smaller fonts need a larger line height - up to 1.75 the size of the font.

Spacing

One of the easiest ways to make a design feel less cluttered is to give every element a little more room to breathe. An example will be worth more than a thousand words.

Now it’s your time

It’s time to apply the learning in practice. Go ahead and redesign a feature in your app based on what you learned today.

• Define a clear visual hierarchy - emphasise what’s important, and de-emphasize the rest
• Follow a strict color system
• Create re-usable buttons with different variants
• Define and use a strict typography: sizes, font family, weights, line heights
• Add more spacing where things feel cluttered

Share the before and after of your redesign on social media, and tag me (@VadimNotJustDev). Would love to see your results and give you feedback.

🔴 Join me live

This Friday we will build an Apple wallet clone. It's going to be a tutorial packed with value, so set a reminder and don't miss it out 👇

​

​

​

🔁 In case you missed it

Building a MyFitnessPal Clone In this video, we will be building our own food-tracking app, just like MyFitnessPal, using React Native and IBM StepZen. Watch now

Building a STOCKS Price Tracker This tutorial helps create a Stocks Price Tracker App in React Native, covering UI design, API integration, and other features Watch now

🔥 Press worthy

📱 React Native Screens 3.3.0 introduces custom screen transitions for go-back gesture

🆕 Theo talked about The React Native New Architecture​

🎊 I will be at App.js Conf 22-24 May. Would love to meet you there. Use the code notjustdevs10 to get 10% off the conference ticket!
​

Did you learn something new today?

If you found this email valuable, forward it to one friend or coworker who can benefit from it as well. That would be much appreciated 🙏

Vadim Savin Helping you become a better developer together with the notJust.dev team