Simple App Design: Matching Colors, Figma Tips 2/3

      No Comments on Simple App Design: Matching Colors, Figma Tips 2/3

CREATING CONTENT

Alright, jcup, bars are nice but I'd like to add some crazy colors here.  I want to show you how to create a list of items that look good and is really easy to implement. Both in Figma and in Android Studio. It's also very popular and ready to use in most of the apps. 

We are going to add new colors, FAB, swag and some successes. I will show you my idea of replacing text with icons too!  

Main Activity Colors
Main Activity Colors

HOW IT WORKS

My Wins allow you to store your achievements so you can read them whenever you want to. I've got to tell you how this app should work and show...

Some facts:

  • Every item (success) contains title, category, importance, start date, end date, and description
  • Only the description can be empty and is not visible in Main Activity list
  • Categories and importance have different colors to be easier to recognize
  • Importances huge, big, medium are showed using circles
  • One circle = small, 4 circles = huge success and so on
  • Shit, it's getting boring but everything below is more interesting! ;D

CREATE ITEMS

Item container

Now it's time for serious stuff.

  1. Create a rectangle for a new item. I recommend height of 98px and width of 394px. It's our CardView.
  2. Center it horizontally and put below app bar leaving few px of space between them
  3. Set rectangle color to white (#FFFFFF)
  4. You can't see it because the background is white too. You have to create new rectangle that fills the white box and set its color to almost white (#F2F2F2)
  5. Change background position in files to be under FAB and CardView. It will make it stay back
  6. Add shadow effect and set it to (1, 0, 4, 12%)
CardView Colors
CardView Colors

Item content

Category and Title

  1. Add category icon 40 x 40px (it's default small FAB size, pick the icon from the material palette). Center it vertically. Leave 16px at left.
  2. Create category text centered 4px below icon and set its size to 14px
  3. Add item name and set its size to 24 ( Those size proposals in box that you can expand are based on material design rules. It is better to use them instead of creating custom like 19)
  4. Set text color to primary text (#212121) and center it vertically. Keep it 24px on the right of category icon
  5. Add item category name centered 4px under icon (font size 14px)
  6. Group category name and icon to Category
Category Title Colors
Category Title Colors

Importance and Date

  1. Add huge importance level ( create three 8 x 8px circles using eclipse tool. Keep distance between circles- 4px. Center it vertically. Group them and name it "Importance"
  2. Add date in right top corner 20px top, 24px right margins (14px font size, secondary_text color)

Duplicate and Order

  1. Create new groups. Group all item components to Item1 and duplicate it to fill the whole window. Leave 8px space between items (hold alt and drag n drop to duplicate)
  2. Keep Bars at the beginning, then FAB,  and your background at the end of frame in files
  3. You can group all items and call it "Items"
Date Importance Colors
Date Importance Colors

New Colors and Icons

I want to set colors for category and importance that will depend on value. For example categories:

  • video- red
  • business- green
  • adventure- orange

Importance would be like:

  • huge- red
  • big- orange
  • medium- green
  • small- gray

All icons that I used you can find on material palette icons. Edit all item variables that you want to change before setting colors. 

Main Activity Colors
Main Activity Colors

Let's find them!

So you've got the idea but now we have to pick best colors. Here come coolors. It's simple and easy to use. Just paste your primary color, lock it and click space to load other colors that match. If you spot great color just lock it and look for next one. When all rectangles are locked, copy hash values of picked colors to your XML file. Just add some new rows that we could use later in the android studio. Edit variables and icons of duplicated items. Now fill your category name, icon, and importance. What about a numbered list?

  1. Open coolors.co
  2. Paste primary color to first column and lock it
  3. Click space to load new colors and lock ones that you want to use
  4. Copy values to your palette XML. I recommend you notepad++
  5. There is no five.

PRO TIPS SUMMARY

  • Use coolors when you need colors that match
  • Keep small FAB size 40px
  • Sometimes icons are better than text

NOT DONE YET!

If you made everything, fill your category and importance objects in Figma. Let's finish simple design in third part of Simple App Design: New Activities, Popup 3/3

Leave a Reply

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