Where to start designing a mobile application. Basics of UI design
All stages of creating a new mobile application project from scratch.
Now that we ve learned the basics of UI design from the free chapters in the Designing User Interfaces book, it s time to start moving the rectangles around!
This is the extraordinarily interesting part!
In case you missed the previous parts (1,2,3) and all the types of screens you will be designing for,
When you re just getting started with design, it s a good idea to create “project init” screens from scratch. This will give you the confidence you need at this stage. Over time, however, you can create your own starter templates to speed up the design process.
The first question you should ask:
What are you going to design?
If you re just starting out as a designer and / or building your portfolio, it s best to work on mobile apps first. Simply because the smaller canvas makes it easier and faster to come up with something good. Building a website – and especially a landing page – requires a lot of skill because the screen is larger, hence you need to figure out the complex structure of the ratio of content to white space (of which there are often more).
This can be tricky. So let s start with mobile apps, right?
Mobile app design
The first thing to do is to choose the device on which your design will live. Again, if you plan on creating a UI portfolio, then it s up to you if you use iPhone or Android as your reference.
If you want a truly unique and engaging showcase of your talent, then you shouldn t use too much Material Design or iOS components. They make the project universal, and in the rapidly changing modern world, people simply will not pay attention to your project.
If you re working on your portfolio, avoid using generic styles and try to keep the design interesting. Designed by Diana Malewicz
Although, as platforms, Android and iOS are very different, they are constantly getting closer to each other in terms of interface norms. There are some things that should probably remain platform-specific (like text boxes in forms), but most of the design can be made universal and platform-independent.
Choose your phone
If you use an Android smartphone every day, design for Android. Try choosing a phone with an aspect ratio of 16: 9 or higher. If you re an Apple supporter, feel free to start with a regular iPhone Pro (not Max).
Start with the basics
For this exercise, I ll use my iPhone. The first thing to do is add an artboard by pressing the “A” key on your keyboard. Find the device you want in the list and select it.
Status bar
The next thing to do is add a status bar – you can do this from the built-in iOS library in Sketch. Figma also has a similar option.
Then, create a guide at the bottom of the status bar and hide it. In portfolio designs, guides can create unnecessary visual clutter and are often hidden. But the guide is needed so you know which line you shouldn t cross.
The iOS navigation bar or the Android action bar is the title bar right below the status bar. It comes in a variety of heights and you can choose the appropriate value in the manuals for your chosen platform. Its values change from time to time, so below is a method that will help you instinctively choose the desired height.
Take your phone and look for an app that has a separate navigation bar and background. You just need to show the separation. Most of Apple s built-in apps will work here. I selected one of the settings screens. Then take a screenshot and send it to your computer.
Drag this screenshot onto the artboard, set another guide where the navigation bar ends, and then delete the screenshot. Now you know how high it should be based on a real visual product. This will make it easier to remember than memorizing a number that changes every few years. It also gives you a lot more context and understanding of how items are placed in the navigation bar than just typing numbers into a field.
Fields
Grids can be intimidating. It s not easy to choose the right mesh and then stick to it. So instead of spending a lot of time drawing grid lines, make a soft-grid, starting by setting the side margins. These are “lines you won t cross.” Most designers don t pay enough attention to them.
Often when I check the designs you send me, the left and right margins differ, sometimes by only 1-2 points. This optically shifts the entire design to one side and negatively affects readability. This is why I think you should start with the side margins.
But which value should you choose?
The two main soft meshes are 8x and 10x. I prefer the former, but you can use 10x if it makes the calculations easier. This means that 8 and 10, respectively, are the smallest possible fields in your content. Accordingly, one step higher would be 16 and 20, and 24 and 30 would be the next set of values.
The design needs to breathe, so for most mobile projects I set the margins to 24 or 32 points. For dense projects with a lot of data in columns, it is best to use a value of 24 points, and for simpler, less compressed screens, 32 points.
Then use that number and lower numbers to set up the correct hierarchy in your design.
What s next?
Once you have a rough idea of what you are trying to design, you can start by creating block frames. This is a useful technique for dealing with “bounding boxes” instead of content. Just make sure they are all aligned correctly.
For example, if you wanted to recreate a popular photo sharing app, it would look something like this:
Block frames are a good way to understand the hard and fast rules behind good design. This isn t just a random design, as some might think.
The height, width and position of each element in relation to other objects must be carefully calculated and planned. Don t leave anything to chance.
The rule of closeness is very important here. The closer objects are, the more they are perceived as a group belonging to each other. When designing a card layout, it is obvious that the content inside the card will be closer together than the cards themselves.
Once you have your blockframe ready, you can group it and lock it at a reduced opacity (10% is enough).
Then start adding real content, adapting it to these strict rules. Once you re done adding content, just hide the block frame group and you re ready to share your result with the world.
After a while, create your “init templates” including the nav / action bar rectangle and grid guides. But in the beginning it is better to do them by hand to understand how they work.
Articles from the series:
Part 1: Fills and Borders. Basics of UI design
Part 2: Everything you need to know about shapes and objects. Basics of UI design
Part 3: Shadows and Blurs. Basics of UI design
Part 4: Screens and Pixel Density. Basics of UI design
Part 5: How to start designing a mobile application. Basics of UI design
Part 6: 5 Tips to Improve Button Design Basics of UI design
Good luck!
This article is a quick overview of the chapters in the upcoming book updates ? “Designing User Interfaces»?, today you can download 50 pages completely free ? Learn ? Design Basics on Youtube!