As a developer, you often have to deal with UI and UX. And it can be surprisingly complicated if you don’t have experience or a few principles in mind.
In this post, I am going to review some simple design guidelines that are the most important for me.
First of all, your design needs to be consistent.
You can’t use different fonts, font sizes, colors… on every screen!
Just pick a font, a font size, and colors for titles, choose another style for secondary text, pick a style for your text fields, for your buttons… and try to stick to it as much as you can!
The simplest way to do so is to create custom outlets for the ones you use everywhere.
By doing that, you avoid repeating yourself and you keep consistency in your app.
Another way to be consistent is to use two or three colors that fit perfectly together.
Just choose one color you like and go to Adobe color wheel to have complementary colors to the one you have chosen.
You can find great colors here:
Here is an example from dribbble.com:
From a developer's point of view, too much content on a screen means that you have to fetch this content. If it comes from an API, your screen will load for a long-time period and that’s not good for user experience.
Also, you will probably struggle to align everything and keep everything in the right place on every screen width.
I would choose a few well-placed pieces of information that get user attention rather than a lot of content.
The key thing to do so is to create a hierarchy on your content.
It can be large titles on top of a small and simple sentence to emphasize the title or a colorful button on a white background to call the user to action…
Here is an example of minimalism and hierarchy on content :
Here, you have the image, then an emphasize on the title and the subtitle and then you have the text and a big image.
Also, you may have noticed that the content is always separated with whitespace that has the same height everywhere.
Well, that’s another example of consistency but that’s also a way to hierarchize content. It additionally makes your content easier to read.
That’s a no-brainer but I think it’s important to talk about it.
The navigation should always be smooth which means that you can’t add too long animations on your screens.
That would make the user wait until the animation is over before continuing his actions.
The animations should be fast and simple to make your app smoother and don’t infer with user experience.
Also, add different navigation options. For example, when you have a navigation bar that has a left button to go back to the previous screen, make sure the user can also come back to the previous screen by swiping right.
This is something a lot of apps are doing including native iOS apps like the Mail app and if you change the user's navigation habits, you will degrade the experience…
Here is an example of simple animations:
Accessibility and UX
As a developer, you might sometimes forget that there are people with iPhone 5S or SE who have a small screen in which the apps don’t look so well…
Of course, it’s hard to make all your outlets fit in the screen width AND still look great.
But your app needs to look good on every screen.
Here is a simple trick to help your designs fit in all screens and still look good :
- adapt the width and height of your elements to the screen width and height. You can do so by not setting a width and height but only setting the spacing to the other elements.
- adapt font-sizes and the letter-spacing to the screen width. If you have a large title, you can make its size adapt to the user’s device
- try to avoid fixed sizes. 30px between two elements on an iPhone X looks good but put it on an iPhone 5 and the 2 elements take up almost the whole screen height.
Something that comes with accessibility is UX.
By looking only once to your screen, the user has to know :
- what he can do on the screen
- what clicking on a button does ( I know you have already clicked on a button only to see what it does )
Even if you are working with designers, you should keep these principles in mind and tell them if you disagree with them or if you think something is not the best option.
You will usually have an interesting discussion with your designers and that will for sure improve the project you are working on.
There are absolutely no risks!
Designers love to talk about what they do just as much as you like talking about programming.
Even if you end up wrong, you learned something!