For the past few days, I've been building quite a lot of applications and every time I start a new one, the thought that I need to style it and make it more presentable daunted me as the process took nearly half or even more the time it took to build the functionality.
But the pain is all worth it when you see the finished product come together. In the process of figuring this out, I came across amazing resources that are high quality and absolutely free but capable of turning around your project's look by a complete 360°.
So in no particular order here are the things I felt played a major role in the look of the application alongside the resources that make it look even better.
Background
A simple quality background sets the theme of the application and trust me it makes the whole app look a lot better in a jiffy.
Tip : Make sure to use svg backgrounds, as their resolution remains intact no matter how the website is scaled.
Resource: Haikei App - Provides customizable background options of all sorts.
Font
Fonts set the tone of the context that you are trying to communicate to the user via your application. The right choice of font also makes it easy to consume the application.
Resource: Google Fonts - A plethora of options available with different font weights, styles and much more.
Icons
Icons are a fun way to introduce some character to your application alongside the choice of font. Using the same size and type of icons make the process of aligning it way easier and also ensures there is continuity.
Tip : If you are looking to customize the color of your icons, download a svg format icon and change the color in the fill property and voila you just made your own color customized icon !
Resources: Google Icons, Flaticon
Color Palette
Sticking to a color palette maintains uniformity and makes it easier for the user to understand the content flow. Pick three colors - a primary one accounting for at least 70% of the app, a secondary color accounting for around 25% - 27% and a tertiary color that can be used for highlighting.
Resource: Coolors - Makes the work easier by providing the color options alongside their hex codes.
These may seem to be the tiniest of details, but trust me they go a long way !
If you have made it till here, thank you for taking the time to read this and I hope you found it useful.
Until next time 😄👋🏽
Oldest comments (0)