SIMPLE APP DESIGN
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!
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:
- painless and dummy-proof
- targetted at the interface design
- 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
- 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
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”
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!
- Open material palette and select icons tab
- Type “search” in the search box
- Download search icon in SVG. Don’t use Android type because it’s harder to set the color and resize
- Drag and drop downloaded icon to Figma
- 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
- Place it on the right. Don’t spend too much time looking for perfect position. Android Studio will do it for you
- Set icon color to the same color that you used in the app name
- Now do the same with “more_vert” icon
- Expand file tree and get icon vectors out of redundant folders that you can delete
- Clean up files, keep them in order, rename if you want. Add new icons to Bars group
Now it’s time to create Floating Action Bar that you can find on the material palette in icons.
- It’s called “add_circle”.
- Make sure to change the fill color of this icon to “accent” from XML color palette
- Set size to 56x56px. It’s default big FAB size
- Place it in right bottom corner
- If you want, add new 56×56 white circle and keep it behind add_circle (place it under add_circle in files). Now there’s white color instead of transparent “+” hole
- Group circle and add_circle, call it FAB
- 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
- Remember about cleaning files!