3 things to note when you design an App
Tags: ux, design, discuss, flutter
Published: 2021-11-05 14:30:29

We all are self taught developer. We all use different methods.. but for sure we practice by building what we learned. Let it be a simple web app or an mobile app. If you just put a little extra effort to make your design better with these tips, your app is going to standout.

### let me demonstrate...

![calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mazajrpt8hvmm3tckt8.jpg)

Yes! Both are simple calculator apps. It is one of the most basic apps in your phones. But If you were to download one which one are you gonna choose the first or second? and why?

As you can guess my point, I would and many other choose the second one, why did I chose that? its aesthetically pleasing. simply put, it looks good.

Now what about this one? (I know this was discussed by so many but still..)
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r5kwrvig2otstk8dqox.png">

Individually if you look the google app's logo, its great. It matches with the google logo. But when it is together in your screen, its so unpleasant. 

Meanwhile apple's simple and distinctive logos makes us easier to select an app. And if we talk about apple.. there is so much. Apple is very strong in terms of its UI / UX designs.
this article wont be enough to write about it and I am not even an I-phone or Mac user.. 

## So how can you improve your UI? 

While you always build your apps you must create a balance between UI and UX.

##Tip 1

Most of you already does this.. if not you should really!!

Before you start coding always develop a prototype design. design its UI components.
There are so many tools to help you workflow like Figma, Adobe Xd
I recommend [Figma](https://www.figma.com) cause its free and runs on your browser.
It's really easy to [learn figma](https://www.youtube.com/watch?v=lg7w3Ntfqy0)
![figma](https://www.sequoiacap.com/img/c/figma-gif.gif)
Basically before you build an app, build it UI cleanly with all the components and selecting proper colours, effects like blur, transparency etc.. This is going to save you lot of time because you have this as a reference while you code.

##Tip 2

### Fonts
Always try to stay consistent with your fonts. Maintain the same font size throughout the app.

Choose a headline size both contrasting with the body text and fitting on average 2–3 lines.
![font](https://miro.medium.com/max/2000/1*Mi5ylDkTglOfUK8apXqQyg.png)

##Tip 3

###Colours 

- The colors must ensure a clear visual Hierarchy of UI elements. The user should be able to tell which elements of your UI are interactive and how they relate to the other elements on the screen.

- Text and icons should be legible relative to the background they are placed on. Ensure that white text is not placed on a light background and vice versa, for example

- Strategically use the color you have picked for your brand to reinforce your brand visually without overdoing it.

![netflix](https://miro.medium.com/max/282/1*33kejA69um5oRyg9gKQO2A.png)

That's it with these simple tips you can make your app look good.

What about you? What all do you do when you design an app?
let me know... I would love to hear it...


## *carpe diem*✨<br><br>
<pre>
    ❤️ <a href="https://kiransbaliga.me">Portfolio</a>  |  📷<a href="https://www.instagram.com/kiransbaliga">Instagram </a>  |  💼<a href="https://www.linkedin.com/in/kiransbaliga">LinkedIn</a>   |  🐥<a href="https://twitter.com/kiransbaliga">Twitter</a>    
</pre>