10 things we recommend you keep in mind to make your app look visually amazing

8 min readJul 2, 2020

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.

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:

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.

7. Build a UI Kit for your application before you start designing the interfaces:

If you are a UI designer, you have most likely heard the term UI kit, design inventory, pattern library, etc. on several occasions. It can be called many names from time to time, depending on where you learned about it, but in the end, they are all the same concept. A UI Kit is a collection of all the elements that make up the user interface of a product. An example of this is the set of buttons, controls, checkboxes, forms, galleries, and other slightly more complex components that a UI needs. (If you are not so familiar with these concepts, we recommend reading our post on atomic design and design systems. It will help you understand better, and in less than 5 minutes, you will learn about this methodology).

Ok, back to the topic of the UI kit, at Venturit, we use this a lot since having the collection of elements of your interface, your work will significantly facilitate your process. Most importantly, your application will look consistent, uniform, with style, and defined personality because all its components will belong to the same kit.

Here are some examples of UI kit (you can download them, they are free 😉)

8. Always keep track of current design trends:

Just as seasons change so does the fashion industry, every year the design trends change as well, this depends on what the major league brands and companies claim as relevant and renew in their interfaces. The most recognized brands will always be eye-catching to the users; for that reason, as designers, we must always try to make our apps look just as fresh, modern, and professional. (but never copy)You might be wondering where these design trends are published, where you find them, and who informs you.

The truth is that there is no official site or repository where you can find this centralized information. So, our recommendation is to read a lot, take a daily refer at sites like Dribbble or Behance, and consult rankings of design trends. To end off, here is a video we found interesting this summarizes 10 super marked design trends in 2020 (this will give you a better idea).

9. Design using mirroring apps:

One of our most important recommendations. It is about using a tool that will help you visualize your UI design in real-time on the devices it will use. This will help you validate the size of the fonts, their readability, color contrasts, image resolution, icon size, placeholders, and sensitive areas. Having everything verified and checked, you will be sure that your interface will be usable, it will adapt perfectly on mobile devices and visually super successful.

These apps can be paid or free, at Venturit we use:

Sketch Mirror: A free app that you can download from the app store directly on your Apple devices.

Download from App Store

Adobe XD Preview: If you design using XD here this completely free adobe app that you can download from the app store.

Download from App Store

Download from Google Play

10. Always remember that less is more:

It is ubiquitous that sometimes, to make our designs look visually attractive and capture the attention of users, we can get excited and add unnecessary elements to our design. Colors that do not apply, unnecessary illustrations, or complex interactions that in the end, will saturate our product and result in having a negative effect on your users. Choose well what is necessary to include and what is not so important. What is vital and what can be omitted, and you will surely find the perfect balance.

So please always remember to design with this word on your mind: