The document outlines 16 steps for using a design customizer tool:
1. Pick a theme and customize colors
2. Rearrange sections by dragging and dropping
3. Add branding like header images and background images
4. Customize buttons, icons, text colors and more
5. Preview changes in the customizer and save when finished
The design customizer allows building beautiful mobile apps by customizing themes, sections, images, colors and more.
How to customize your mobile app design with the Design Customizer
1. How To Use the
Design Customizer
Design Section: CMS
Monday, October 1, 12
2. Step 1
First step: Pick your theme.
PRO or Advanced Design customers have access to many pre-made themes. Find out more here.
Monday, October 1, 12
3. Step 2
Choose a color theme and view it in customizer at the right.
Monday, October 1, 12
4. Step 3
You can also tweak each individual color to fit your brand.
Monday, October 1, 12
5. Step 4
Drag and drop
To re-arrange the order of your sections, drag and drop
them into place.
Monday, October 1, 12
6. Step 5
The first step in adding some branding into your app is to
upload a Header Image.
Monday, October 1, 12
7. As you can see, a header image can add a lot of personality
to your app to make it feel custom.
Monday, October 1, 12
8. Step 6
View changes
Scroll down the page within Home Styles to adjust footer
color. Toggle it on or off, and click Save when finished.
Monday, October 1, 12
9. Step 7
Size:
640 x 960 pixels
Scroll down again to add in a background image. Upload the
image from your computer, and click Save.
Monday, October 1, 12
10. Step 8
Select from a variety of a stock buttons image, or upload
your own custom button image that you design.
Monday, October 1, 12
11. Browse our various button types, make selections, and
preview in the customizer.
Monday, October 1, 12
12. Step 9
Scroll down to customize the colors of your text, and tint the
background of your buttons.
Monday, October 1, 12
13. Step 10
Select a global icon set to sit overtop your buttons.
Monday, October 1, 12
14. Scroll through the many icon templates to choose from .
Monday, October 1, 12
15. Step 11
Upload a canvas to go behind your buttons, icons, and
background.
Monday, October 1, 12
16. Step 12
Scroll down and view each section that you want to edit
options for here. Click on the Edit icon to dive in.
Monday, October 1, 12
17. Step 13
Rename your section, upload a custom button, or select an
individual icon image in this section.
Monday, October 1, 12
19. Step 14
Select a font for your interior views.
Monday, October 1, 12
20. Step 15
Upload a custom header bar, or view a handful of stock
header images for your app.
Monday, October 1, 12
21. Scroll down to check out our pre-designed header bars.
Monday, October 1, 12
22. Step 16
Upload a section background and select where you’d like it
to go. Add different backgrounds to differentiate sections.
Monday, October 1, 12
23. Build beautiful mobile apps with our design customizer.
Upgrade to PRO to get all the advanced features.
Monday, October 1, 12
24. How To Use the
Design Customizer
Questions? email
support@mobileroadie.com
Monday, October 1, 12