1. Build a mood board for your application.
Creating a UI mood board is the best way to identify and get an idea of the look and feel you want for your new project. It is an excellent tool that will allow you to transmit your purpose and vision of the product in a precise and effective method to your clients and your team. You can build it using your favorite design software or through online tools that offer this functionality.
A mood board consists of a collection of screenshots of existing products, fonts, styles, colors, and even links that convey the style you are looking to portrait... Here is an example:
2. Choose an appealing color palette, base yourself on the design trends of the year.
A well-defined color palette is vital from the start of the project. Colors transmit emotions and feelings and fulfill a primary psychological function to define behaviors and capture the user's attention. Besides, having a balanced color palette aligned with your branding will make your product consistent and give it significant amounts of personality, making it stand out. These examples will provide you with a better idea:
If you need a hand to choose a color palette, here we have a bunch of tools to generate fresh, elegant, and functional color palettes.
Coolors https://coolors.co/
Colorhunt https://colorhunt.co/
Adobe Color https://color.adobe.com/create
Muzli https://colors.muz.li/
3. Choose a single icon set for your entire user interface:
One of the main inconsistencies that often appear in user interfaces is the variety of icons and symbols. Using multiple styles and multiple icon galleries can be confusing for users, and it does not add visual unity; therefore, it makes the design inconsistent. Our recommendation is to select an icon library (or build your own) to cover all the communication needs that may arise.
We should also clarify that the icons must be simple, clean, and translate in communicating the message. They must not present very complex shapes since their sizes or location may present readability problems.
We agree that designing your own icons is the best option; however, there are many online libraries with fascinating icons that you can use to save time. We highly recommend using icons in SVG format, or open-source icon fonts available online, as this will allow developers to access these resources quickly and practically.
Here are our top 3 icon recommendations, which are also the ones we use the most in Venturit.
Feather Icons https://feathericons.com/
Jam Icons https://jam-icons.com/
Material Icons https://material.io/resources/icons/?style=baseline
4. Guide yourself with the design patterns that apply to the operating system in which your application will operate.
Not all operating systems are compatible with all design patterns and components. For example, on an iPhone, the most normal gesture to return Home is to press the central button of the device or swipe up. On Android, there is either a button with a circular icon on the navigation or a return button.
These differences between devices and operating systems directly affect the design of your interface. You must think that all the elements and components that you include in your design must be compatible and work harmoniously with the OS, and the device in which they are to operate. Here we show some of the most marked differences between Android and iOS patterns and components:
Notifications and Alerts:
Tabs vs. segmented controls:
Button actions:
5. Use a maximum of 2 typographic fonts, based on the design trends of the current year.
Typographic fonts are among the most critical items when designing an interface. They transmit personality and mood; they also have the power to complement the style you want for your product, making it consistent and unique. Choosing good sources is vital. We do not recommend using elaborate fonts that are difficult to read or with many curves and decorations, as they can cause accessibility and compatibility problems. Ideally, use san-serif fonts that are easy to read and contain ALL the special character sets for compatibility with multiple languages.
How do we do it at Venturit? We recommend using a font for titles and a different one for the body and other texts, which should differ markedly in their anatomy. How can you choose the correct combination? The truth is that there is no established rule; the important thing is to follow your brand's guidelines and the style you want to print on your product. One recommendation is to guide yourself with the leading trending UI sources of the current year, as we do in Venturit. Here are some examples of font combinations that we loved:
6. Use Illustrations:
Fun fact: 50% of the nerves in the brain are connected to the retina.
Most of the information that humans consume is visual; this means people consume images much faster than words.
Images being visually attractive and holding a significant personality to your product can transmit messages and explain from the simplest to the most complex concepts efficiently and convincing. They even have the power to capture people's attention and also awaken emotions in record time.
We hope you learned how to make your app look a little bit more visually appealing. Stay tuned for our next week's post, where we will continue talking about our top 10 advice for app design.
Sources:
typographic fonts
Illustrations: