Simple App Design: Picking Colors, Icons and Figma 1/3

SIMPLE APP DESIGN

Grab your MacBook and Polaroid camera because today we are going to use the material.io, material palette, and Figma before it gets trendy. We will create Simple App Design! Ready? Alright now.

Wait… are you kidding me? Do you want to read it at home? Do what you want but don’t blame me for this tutorial if you are not reading it at Starbucks!

This image is what we will create in 3 parts of this post. Holy shit!

Simple Main Activity

WHICH DESIGN TOOL?

There’s a lot of design software to download or use online but most are too complexed. Maybe we could learn them but do we need a lot of options? No. We need shape, text, fill, opacity and few more tools.

I’m not sponsored by them. Consider downloading the desktop app if you are using Windows or Mac. You can Open My Wins Final Figma Project to see how components look like. Give it a second to load. It’s a huge file with a lot of useful Frames.

CREATE USER INTERFACE

Create a new project and click F to insert new frame. My favorite frame is Google Pixel because it’s a cool smartphone that I can’t afford. 😀

Let’s rename it to MainActivity Bars.

Use R– the rectangle tool to create status bar and app bar. In my case height of the first one is 24px and second is 56px

Create app name text using T.Set height to 24px. Better don’t use custom font sizes because suggested are fine.

Select left and right horizontal constraints

Center that text using mouse or arrow keys

Fill both rectangles with fancy colors and realize that it looks like a crap

Simple Bars

FIND BETTER COLORS

If you are not a graphic designer and probably you’re not because you wouldn’t survive so many seconds on this site, it is better to use website that helps you in matching colors. My pick for main app colors is the material palette.

Pick 2 colors from the palette

Download their hash codes in XML and open this file

Set fill in the status bar to the value of primary_dark

Fill app bar with the primary color

Set app name color to white or primary_text

Group all items from your frame using ctrl+g

Set name of that group to for example “Bars”

Simple Material Colors

DON’T CREATE ICONS!

Now we need search and menu icons but we don’t have to create it. It wouldn’t be called Simple App Design if we wanted to reinvent the wheel!