DEV Community

Cover image for 3 things to note when you design an App
Kiran S Baliga
Kiran S Baliga

Posted on

19 6

3 things to note when you design an App

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

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..)

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 cause its free and runs on your browser.
It's really easy to learn figma
figma
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

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

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✨

    ❀️ Portfolio  |  πŸ“·Instagram   |  πŸ’ΌLinkedIn   |  πŸ₯Twitter    

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay