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

      No Comments on 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 FAB Collapsed
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 use Figma because it's:

  • free
  • painless and dummy-proof
  • targetted at the interface design
  • cross-platform
  • easy to sync between devices
  • great to live-share with others

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

  1. 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. 😀
  2. Let's rename it to MainActivity Bars.
  3. 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
  4. Create app name text using T. Set height to 24px. Better don't use custom font sizes because suggested are fine.
  5. Select left and right horizontal constraints
  6. Center that text using mouse or arrow keys
  7. Fill both rectangles with fancy colors and realize that it looks like a crap
Simple Bars
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.

  1. Pick 2 colors from the palette
  2. Download their hash codes in XML and open this file
  3. Set fill in the status bar to the value of primary_dark
  4. Fill app bar with the primary color
  5. Set app name color to white or primary_text
  6. Group all items from your frame using ctrl+g
  7. Set name of that group to for example "Bars"
Simple Material Colors
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!

  1. Open material palette and select icons tab
  2. Type "search" in the search box
  3. Download search icon in SVG. Don't use Android type because it's harder to set the color and resize
  4. Drag and drop downloaded icon to Figma
  5. Hold shift when resizing icon to 24px if you want to keep the width-height ratio. Holding alt allows you to resize it in every direction. You can use both at the same time
  6. Place it on the right. Don't spend too much time looking for perfect position. Android Studio will do it for you
  7. Set icon color to the same color that you used in the app name
  8. Now do the same with "more_vert" icon
  9. Expand file tree and get icon vectors out of redundant folders that you can delete
  10. Clean up files, keep them in order, rename if you want. Add new icons to Bars group
Simple Material Icons
Simple Material Icons

ADD FAB

Now it's time to create Floating Action Bar that you can find on the material palette in icons.

  1. It's called "add_circle".
  2. Make sure to change the fill color of this icon to "accent" from XML color palette
  3. Set size to 56x56px. It's default big FAB size
  4. Place it in right bottom corner
  5. If you want, add new 56x56 white circle and keep it behind add_circle (place it under add_circle in files). Now there's white color instead of transparent "+" hole
  6. Group circle and add_circle, call it FAB
  7. Add shadow effect to this group. Drop shadow using: blur=4, x=0, y=4, opacity=25%. Click on the sun icon to add shadow variables
  8. Remember about cleaning files!
Simple FAB Collapsed
Simple FAB Collapsed

PRO TIPS SUMMARY

  • Consider Figma for UI design
  • You can find icons and colors on the material palette
  • Big FAB size is 56px, smaller is 40px
  • Typical icon size is 24px
  • SVG won't drop quality when resizing

DON'T STOP!

Our template is done and files are cleaned up but there is a lot to add so let's move to next Simple App Design tutorial: Matching Colors, Figma Tips 2/3!

Leave a Reply

Your email address will not be published. Required fields are marked *