Colors? Typography? Please no . . . Hahaha, sometimes when we hear these words while looking forward to creating a mockup for our product we might get intimidated right away. But no worries we will learn about a few tips and tricks we can use tackle this together and not die trying! 🙂

The agenda for our series of articles is as follows:

• Part 1: Defining our Workflow and Toolkit
• Part 2: Working with Color and Typography
• Part 3: Iconography and Magic Numbers [🍿coming soon…]
• Part 4: Elevations and Dark Theme [🍿coming soon…]
• Part 5: Guiding our Users and Managing App States [🍿coming soon…]

Let’s Get Started!

Don’t get me wrong Color and Typography can be as simple or complex as you want, depending on the amount of research you wish to do on it, in our case we will try and keep it simple and straight to what we need in most of our cases as Developers.

COLOR🎨

By making use of color we have a way of providing meaning to our UI and allows our project to have its own brand and style. The problem with color is that if you have no background on the topic you will get confused and feel like no color looks right when you try to pick one at random.

TIP’S AND TRICKS🔮🎩

We should always aim to have a harmonious UI/UX, that is accessible and easy to distinguish for our users, you can ensure this by following the guidelines provided by our chosen Visual Language Material Design:

• Choose 2 Colors for your Palette: select a primary and a secondary color to represent your brand.
• Choose 1 Accent Color: Having an accent color in our palette gives us the flexibility to highlight important parts of our UI easily, a common case for using our accent color is Button and Actionable components in our app.
• Ensure your colors have enough contrast
• Use Different Shades of the same colors
• Everything should have its color defined in our palette, don’t leave anything to luck, this helps you have a more clear picture of how your whole UI/UX changes in response to any variation you decide to do in your color palette, main categories to give color to:
  • Primary Text
  • General Text
  • App Bars
  • Background
  • Card Surfaces
  • Buttons and Action Items
  • Icons

Tools & Resources🛠

Identifying & Selecting Our Colors

Material design has some great resources we can leverage when we need to find the colors for our project, and they also provide some good guidelines on how to select them correctly we can use their color charts to make our job easier guiding our self by the following recommended shades:

Material Palettes

Recommended Color Variations

• Primary Color – 500
• Primary Dark Color – 700
• Accent Color – 200

Color Palettes

If we would like to find inspiration and different types of palettes already created by other color enthusiast and designers, we can leverage the following sites:

Colorsinspo: This is a great platform filled with great resources like Library of palettes, color picking tools, gradients gallery, tutorials on color theory, inspiration wall, and much more.

Coolors Trending Palettes: This great platform provides thousands of beautiful color palettes, with a wide range of variations in the amount of colors per palette.

Adobe Color: Provides great set of tools to extract, and generate colors and color palettes from Images and an interactive wheel that allows you to choose preset a color harmony rule and work inside of those limits.

Gradients

UiGradients: A handpicked collection of beautiful color gradients made for designers and developers, I love to browse through this collection and get inspiration for cool backgrounds I can create for my app backgrounds, blog post banners, etc.

TYPOGRAPHY✍️

With the use of Typography we can give personality to our App’s content, but just as color is confusing, typography could get us in the same boat with all the different options and types there are. How can we possible pick one and combine it with another? Is it really the correct one for my app?

Tip’s and Tricks🔮🎩

No worries, we can use again our handy Material design guidelines to learn how to pick the right Typography for our project and understand a bit more what makes them different.

• Minimum size 12sp
• Use different Font Weight to give importance to the text, avoid using bold
• Be generous with line-height and letter spacing when appropriate
• Use a type scale to provide a hierarchy in the text of your design
• Leverage the System Fonts on your device (Roboto, San Francisco)

Tools & Resources🛠

Google Fonts: Open source Font catalog that allows you to explore, sort, and test fonts for use in our projects. also providing great analytics about their usage and demographics.

DaFont: Open source Font catalog, you can find fonts by author, style, and popularity.

Ce finito! 🥳

Source Code to the GitTrends Project can be found in our GitHub Repo

GitTrends UI/UX Redesign Proposal – Behance project: https://www.behance.net/gallery/100887309/GitTrends-Mobile-App-UIUX-Redesign#comments

Live Session on Mobile App Redesign for Developers Colors & Typography – .NET Dominicana Community:

Download and Try out GitTrends on:

AppStore – https://apps.apple.com/app/gittrends-github-insights/id1500300399…

PlayStore – https://play.google.com/store/apps/details?id=com.minnick.gittrends…

Credits for artwork components:
Icons for the banner of the post made by UnDraw

Made with ❤ by Pujolsluis