Mobile app with ON AIR App builder is done creating. And it works exactly how you want, but something’s still missing. It doesn’t look nice as you had imagined it. In this article we won’t discuss the technical reasons for this. As you are not a pro coder or UI-UX designer instead, let’s go over some basic visual design principles to help your app come to life.
Before going over the design principles let’s take at what exactly is going wrong with your design.
Why doesn’t you app design is not working?
There are many articles that talks about visual design being subjective, but there are some common principles that can be the building blocks of any effective visual design.
- Hierarchy
- Consistency + Cleanliness
- White space
- Brand tone
Establish a Hierarchy
Visual hierarchy tells the user in what order they should look at the elements on a page. This can be accomplished by how components are laid out on a screen, visual weight, relative size, and contrasting colors. A successful layout balances these properties and can visually showcase to a user what to look at first.
- Location: In some countries, we read from left to right and top to bottom. This trick can help you organize your items in a layout by placing the most important items near the top left and the least important or last items on the bottom. When designing the UX of an app, you can also keep this trick in mind when adding buttons to go forward and backwards.
- Size: The larger the better right? Not Always. While a large item can indicate a more important object, it can also take over the items on a page when clashing with other parts of your visual design.
- Weight: Instead of making components bigger to indicate importance, think of changing its weight instead. Weight can be created by making a font bolder or darker. The opposite is also true, lessen the visual weight of a subtitle by lightning the font color. Or even use a thinner font. Not all fonts need to be black – use tones to create visual weight.
- Color: The brightness and saturation of a particular color can draw a lot of attention to an object on your page. Red will often indicate danger, yellow as a warning, and green as a success. With this in mind, try to design your page without color first to see if your hierarchy works. hen add in color later to enhance its visual appeal.
Consistency & Cleanliness
Lack of app hierarchy can make an app feel confusing; similarly the lack of cleanliness and consistency can make your app feel messy. Poor alignment, too many styles, and low –resolution images are the top 3 things that contribute to messy app look.
Poor alignment: Have you ever looked at those photos of items laid together in a grid? They feel super satisfying, don’t they? This is because the human eye craves orders and patterns. When we see object aligned, they feel whole; however, the minute we see things out of order, it calls out to us – drawing attention to the chaos. We use alignment in design to create structure on a page.
Too many styles: Think about style like creating a matching outfit. When there are too many clashing patterns and colors, and outfit can look messy. That’s not to say contrasting patterns can’t be pulled off. What this means in the world of interface design is to think about component attributes and how we might stick to them. When you’ve picked a style, try to make all your buttons feel the same.
Low resolution images: In the days where monitors were less sharp, we could get away with low-resolution images – this is because nearly everything on the web at 72 ppi didn’t look very sharp. However, as screens and monitors start to improve, so too do our images. The apple retina display can display 226ppi and the new super retina display can display 458ppi.
White Space
Is there too much space between two objects and the room feels empty? All these feelings we get in physical spaces translate very well to digital ones as well. it sets a system where all the spaces between is a multiple of 8 — small items are 8 px apart, medium items can be 16 px or 32px, larger gutters and margins can be 64px etc. It is good to follow this system because as mentioned above as consistency is the key to a clean UI.
Brand Tone
In order to keep the brand tone simple, let’s not get into the nuances of developing a brand and instead keep the focus on making the app consistent and clean. Best thumb rule to do this:
- Define a small set of greys to use
- Define 1 primary color
If you follow all the above mentioned you app will not look too shabby. We’re not winning any awards, but it’s clear, clean and much more usable than how you started!
4 Keys to Designing a Great Mobile App
To get started designing your perfect app, check out ON AIR App Builder! We are the no code development platform that makes it easy and fun to build native mobile apps. Start Now!
