micromuseum.cc: graphic materials list
When building a mobile app you should make a list of all graphics materials needed.
Few notes * Graphic designers will work much better if you provide them a complete overview of your app, the XD mockup for example and a list of materials you ask for. Of course if you have the money to hire one (not my case). * You can pull the required elements from the XD design (or export actual placeholder files from the different screens as images) * Try to write down specs for sizes and formats, this will help get the materials in your app in no time and avoid converting files over and over again.
A typical app will need the following, as starter:
- A color theme. It’s nice to define the main colours and repurpose them for all elements in your design. Material design usually has a Primary color, a couple of color variants for it (same shade but varying opacity / saturation, for example) and a Secondary color. See https://material.io/design/color/the-color-system.html
- Icon(s) in several formats for Android and IOS. You can easily make them with tools like Sketch or online wizards starting from an high definition version in vector format. See http://iconhandbook.co.uk/reference/chart/ for all the sizes you need to provide for each platform.
- A splash screen: Think of it as a static screen (you need to provide one to both iOS and Android) that can be animated once the app is loaded or provides the same look of your first screen.
While the above are the minimum basic requirements, you will often need the following:
- A product tour: These can be a handful of vector illustrations, explaining the purpose and major use cases of your app
- A help system: as simple as a couple of mobile optimised webpages describing in detail how to use the app
- Customised UI Kit: some apps sport a totally custom UI kit, making theme unique. For most of the apps, at least on Android, it’s much faster to customise and enhance native widgets. I think this makes sense for Flutter as well as for Material-ui and other material design-inspired ui frameworks.
Color theme
Built using https://material.io/tools/color/#!/?view.left=0&view.right=0
- Primary color: ＃efebeb, light variant ＃ffffff, dark #bdb9b9
- Secondary color: #bcaaa4
- Text on primary: #000000
- Text on secondary: #000000
Icon
Generating a basic but nice icon is very easy using online tools.
For example I made the icon using https://android-material-icon-generator.bitdroid.de/.
This tool allows to customise an icon starting from a normal svg. I got mine at FlatIcon, distributed with a CC attribution license. You can tweek every aspect and the overall finished icon looks really great. When you are done, you can download a Zip file containing all the necessary files for your mobile app. Genius.
Unfortunately this awesome tool only makes Android icons. Never mind, there are a ton of other sites for generating icons! See the splash screen section below for the final results.
Final icon package (for Android)
Source file should be an SVG.
Got this searching for “miniature” on https://flaticon.com
Icon by https://www.freepik.com licensed under Creative Commons BY 3.0
Splash screen
The splash screen is not really an issue. In your favourite image editor create a new image 4096x4096. Fill the background with your color, in my case I picked the secondary ＃bcaaa4.
You can use the awesome https://apetools.webprofusion.com/app/#/tools/imagegorilla to generate both splash screen and icons for IOS and Android.
I went this way and uploaded the highest res png produced by the material icon builder for the app icon and the splash screen png just made.
Ape Tools produced a zip file with all the images grouped in folder and named accordingly to the iOS and Android specs.
Product tour
Ideally the product tour should go through the main use cases for the application. In our case this would be:
- pairing with the base station
- uploading audio files
- discovering and associating tags to audio files
My idea is to rely on text and make a very minimal illustration for each screen. I don’t want to do the animation in XD, so I’ll just extend the existing mockup to include real texts and export the placeholder images for further graphics work
| title | subtitle | filename | size |
|---|---|---|---|
| micromuseum.cc | This app allows you to program and update your base station. It’s very easy! | welcome-01@2x.png | 550x650px |
| Find your station | STEP ONE Connect to the station’s WIFI network |
welcome-02@2x.png | 550x650px |
| Upload audio | STEP TWO Upload audio files from to the Station |
welcome-03@2x.png | 550x650px |
| Connect Tags | STEP THREE Read tags and associate them to audio files |
welcome-04@2x.png | 550x650px |
Help system
I put the Help system in this topic because most of the time help pages will need diagrams, illustrations and good copy.
The help system, like this blog, will be based on the Mkdocs site generator with the Mkdocs-material theme. This is a very flexible solution to produce a modern, responsive site, and will come handy for task-based guides.
Help topics:
Discovering a Base station
- Connect to the Micromuseum network
- Connect to another station
Setting up a Base station
- Uploading an Audio file
- Deleting an Audio file
- Updating firware
- Discovering tags
- Associating tags
- Forgetting tags
UI Kit
No custom UI Kit is foreseen.
For the moment we rely mostly on Flutter Material widgets.
iOS Port
We will need to update the app in a second phase to use cupertino widgets when necessary.