SlideShare uma empresa Scribd logo
1 de 24
Baixar para ler offline
How To Use the
             Design Customizer


                        Design Section: CMS
Monday, October 1, 12
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
Step 2




   Choose a color theme and view it in customizer at the right.
Monday, October 1, 12
Step 3




      You can also tweak each individual color to fit your brand.
Monday, October 1, 12
Step 4




                             Drag and drop




           To re-arrange the order of your sections, drag and drop
                              them into place.

Monday, October 1, 12
Step 5




        The first step in adding some branding into your app is to
                           upload a Header Image.
Monday, October 1, 12
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
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
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
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
Browse our various button types, make selections, and
                        preview in the customizer.
Monday, October 1, 12
Step 9




  Scroll down to customize the colors of your text, and tint the
                  background of your buttons.
Monday, October 1, 12
Step 10




               Select a global icon set to sit overtop your buttons.
Monday, October 1, 12
Scroll through the many icon templates to choose from .
Monday, October 1, 12
Step 11




          Upload a canvas to go behind your buttons, icons, and
                              background.
Monday, October 1, 12
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
Step 13




    Rename your section, upload a custom button, or select an
             individual icon image in this section.
Monday, October 1, 12
Browse through individual icons to add some variety to your
                        global icon set.
Monday, October 1, 12
Step 14




                        Select a font for your interior views.
Monday, October 1, 12
Step 15




          Upload a custom header bar, or view a handful of stock
                       header images for your app.
Monday, October 1, 12
Scroll down to check out our pre-designed header bars.
Monday, October 1, 12
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
Build beautiful mobile apps with our design customizer.
           Upgrade to PRO to get all the advanced features.

Monday, October 1, 12
How To Use the
             Design Customizer

                            Questions? email
                        support@mobileroadie.com
Monday, October 1, 12

Mais conteúdo relacionado

Mais procurados

How to use PowerPoint
How to use PowerPointHow to use PowerPoint
How to use PowerPointkate80284
 
Devour sales & marketing funnel 11 power point slides and ppt diagram templates
Devour sales & marketing funnel 11 power point slides and ppt diagram templates Devour sales & marketing funnel 11 power point slides and ppt diagram templates
Devour sales & marketing funnel 11 power point slides and ppt diagram templates SlideTeam.net
 
Customer conversion funnel power point slides and ppt diagram templates
Customer conversion funnel power point slides and ppt diagram templates Customer conversion funnel power point slides and ppt diagram templates
Customer conversion funnel power point slides and ppt diagram templates SlideTeam.net
 
PowerPoint - Quick Reminders
PowerPoint - Quick RemindersPowerPoint - Quick Reminders
PowerPoint - Quick Reminderscm_scholz
 
Debt sales & marketing funnel 11 power point slides and ppt diagram templates
Debt sales & marketing funnel 11 power point slides and ppt diagram templates Debt sales & marketing funnel 11 power point slides and ppt diagram templates
Debt sales & marketing funnel 11 power point slides and ppt diagram templates SlideTeam.net
 
Chess pieces with cubes power point slides and ppt diagram templates
Chess pieces with cubes power point slides and ppt diagram templatesChess pieces with cubes power point slides and ppt diagram templates
Chess pieces with cubes power point slides and ppt diagram templatesSlideTeam.net
 
Clipart web icons magnifier mail paint paste cut key power point slides
Clipart web icons magnifier mail paint paste cut key power point slides Clipart web icons magnifier mail paint paste cut key power point slides
Clipart web icons magnifier mail paint paste cut key power point slides SlideTeam.net
 
Compressing PowerPoint Slides
Compressing PowerPoint SlidesCompressing PowerPoint Slides
Compressing PowerPoint SlidesRachel Hayes
 
Beautifully designed nuclear power warning signs circles power point slides a...
Beautifully designed nuclear power warning signs circles power point slides a...Beautifully designed nuclear power warning signs circles power point slides a...
Beautifully designed nuclear power warning signs circles power point slides a...SlideTeam.net
 
Danger nuclear power warning signs circles power point slides and ppt diagram...
Danger nuclear power warning signs circles power point slides and ppt diagram...Danger nuclear power warning signs circles power point slides and ppt diagram...
Danger nuclear power warning signs circles power point slides and ppt diagram...SlideTeam.net
 
Business power point templates design of an emoticon upset thinking face sale...
Business power point templates design of an emoticon upset thinking face sale...Business power point templates design of an emoticon upset thinking face sale...
Business power point templates design of an emoticon upset thinking face sale...SlideTeam.net
 
Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...
Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...
Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...SlideTeam.net
 
5391 final lesson glogster
5391 final lesson glogster5391 final lesson glogster
5391 final lesson glogsterChristina Ibarra
 

Mais procurados (14)

How to use PowerPoint
How to use PowerPointHow to use PowerPoint
How to use PowerPoint
 
Devour sales & marketing funnel 11 power point slides and ppt diagram templates
Devour sales & marketing funnel 11 power point slides and ppt diagram templates Devour sales & marketing funnel 11 power point slides and ppt diagram templates
Devour sales & marketing funnel 11 power point slides and ppt diagram templates
 
Customer conversion funnel power point slides and ppt diagram templates
Customer conversion funnel power point slides and ppt diagram templates Customer conversion funnel power point slides and ppt diagram templates
Customer conversion funnel power point slides and ppt diagram templates
 
PowerPoint - Quick Reminders
PowerPoint - Quick RemindersPowerPoint - Quick Reminders
PowerPoint - Quick Reminders
 
Rock that Power Point
Rock that Power PointRock that Power Point
Rock that Power Point
 
Debt sales & marketing funnel 11 power point slides and ppt diagram templates
Debt sales & marketing funnel 11 power point slides and ppt diagram templates Debt sales & marketing funnel 11 power point slides and ppt diagram templates
Debt sales & marketing funnel 11 power point slides and ppt diagram templates
 
Chess pieces with cubes power point slides and ppt diagram templates
Chess pieces with cubes power point slides and ppt diagram templatesChess pieces with cubes power point slides and ppt diagram templates
Chess pieces with cubes power point slides and ppt diagram templates
 
Clipart web icons magnifier mail paint paste cut key power point slides
Clipart web icons magnifier mail paint paste cut key power point slides Clipart web icons magnifier mail paint paste cut key power point slides
Clipart web icons magnifier mail paint paste cut key power point slides
 
Compressing PowerPoint Slides
Compressing PowerPoint SlidesCompressing PowerPoint Slides
Compressing PowerPoint Slides
 
Beautifully designed nuclear power warning signs circles power point slides a...
Beautifully designed nuclear power warning signs circles power point slides a...Beautifully designed nuclear power warning signs circles power point slides a...
Beautifully designed nuclear power warning signs circles power point slides a...
 
Danger nuclear power warning signs circles power point slides and ppt diagram...
Danger nuclear power warning signs circles power point slides and ppt diagram...Danger nuclear power warning signs circles power point slides and ppt diagram...
Danger nuclear power warning signs circles power point slides and ppt diagram...
 
Business power point templates design of an emoticon upset thinking face sale...
Business power point templates design of an emoticon upset thinking face sale...Business power point templates design of an emoticon upset thinking face sale...
Business power point templates design of an emoticon upset thinking face sale...
 
Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...
Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...
Circular puzzle pie chart 2 and 3 pieces power point slides and ppt diagram t...
 
5391 final lesson glogster
5391 final lesson glogster5391 final lesson glogster
5391 final lesson glogster
 

Semelhante a How to customize your mobile app design with the Design Customizer

NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceDee Sadler
 
Captivate and Creative Cloud Handout
Captivate and Creative Cloud HandoutCaptivate and Creative Cloud Handout
Captivate and Creative Cloud HandoutKirsten Rourke
 
Optimizing images for the web
Optimizing images for the webOptimizing images for the web
Optimizing images for the webKatharine Holmes
 
Spread3D Pro 1.3
Spread3D Pro 1.3Spread3D Pro 1.3
Spread3D Pro 1.3spread3d
 
Presentacion licencia Creative Commonrs
Presentacion licencia Creative Commonrs Presentacion licencia Creative Commonrs
Presentacion licencia Creative Commonrs Mari Luz Grande
 
Using Images in Word 2010
Using Images in Word 2010Using Images in Word 2010
Using Images in Word 2010Rob Neilly
 
iOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsiOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsKyle Oba
 
Basic Web Design In Dreamweaver
Basic Web Design In DreamweaverBasic Web Design In Dreamweaver
Basic Web Design In Dreamweaverjcharnin
 
Documentation.pdf
Documentation.pdfDocumentation.pdf
Documentation.pdfAgus Sans
 
Hands-On Lab Data Transformation Services - SQL Server
Hands-On Lab Data Transformation Services - SQL ServerHands-On Lab Data Transformation Services - SQL Server
Hands-On Lab Data Transformation Services - SQL ServerSerra Laercio
 
Power point tutorial
Power point tutorialPower point tutorial
Power point tutorialdmakk767
 
Power Point 2007 Discover The Power Of Custom Layouts
Power Point 2007    Discover The Power Of Custom LayoutsPower Point 2007    Discover The Power Of Custom Layouts
Power Point 2007 Discover The Power Of Custom LayoutsOklahoma Dept. Mental Health
 
How To Get Your Designer To Love Expression Blend
How To Get Your Designer To Love Expression BlendHow To Get Your Designer To Love Expression Blend
How To Get Your Designer To Love Expression BlendKarsten Januszewski
 
2013 December - Blogging with Wordpress for #Digidisciple
2013 December - Blogging with Wordpress for #Digidisciple2013 December - Blogging with Wordpress for #Digidisciple
2013 December - Blogging with Wordpress for #DigidiscipleBex Lewis
 
Mv process log form 2019 (2)
Mv process log form 2019 (2)Mv process log form 2019 (2)
Mv process log form 2019 (2)EllieJones40
 
Photoshop_CS_Tutorial
Photoshop_CS_TutorialPhotoshop_CS_Tutorial
Photoshop_CS_Tutorialtutorialsruby
 

Semelhante a How to customize your mobile app design with the Design Customizer (20)

NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experience
 
Captivate and Creative Cloud Handout
Captivate and Creative Cloud HandoutCaptivate and Creative Cloud Handout
Captivate and Creative Cloud Handout
 
Optimizing images for the web
Optimizing images for the webOptimizing images for the web
Optimizing images for the web
 
Spread3D Pro 1.3
Spread3D Pro 1.3Spread3D Pro 1.3
Spread3D Pro 1.3
 
Slideshare
SlideshareSlideshare
Slideshare
 
Introduction flash
Introduction flashIntroduction flash
Introduction flash
 
Presentacion licencia Creative Commonrs
Presentacion licencia Creative Commonrs Presentacion licencia Creative Commonrs
Presentacion licencia Creative Commonrs
 
Using Images in Word 2010
Using Images in Word 2010Using Images in Word 2010
Using Images in Word 2010
 
iOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsiOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode Storyboards
 
Basic Web Design In Dreamweaver
Basic Web Design In DreamweaverBasic Web Design In Dreamweaver
Basic Web Design In Dreamweaver
 
Using SoundSlides
Using SoundSlidesUsing SoundSlides
Using SoundSlides
 
Documentation.pdf
Documentation.pdfDocumentation.pdf
Documentation.pdf
 
Hands-On Lab Data Transformation Services - SQL Server
Hands-On Lab Data Transformation Services - SQL ServerHands-On Lab Data Transformation Services - SQL Server
Hands-On Lab Data Transformation Services - SQL Server
 
Deploying w7
Deploying w7Deploying w7
Deploying w7
 
Power point tutorial
Power point tutorialPower point tutorial
Power point tutorial
 
Power Point 2007 Discover The Power Of Custom Layouts
Power Point 2007    Discover The Power Of Custom LayoutsPower Point 2007    Discover The Power Of Custom Layouts
Power Point 2007 Discover The Power Of Custom Layouts
 
How To Get Your Designer To Love Expression Blend
How To Get Your Designer To Love Expression BlendHow To Get Your Designer To Love Expression Blend
How To Get Your Designer To Love Expression Blend
 
2013 December - Blogging with Wordpress for #Digidisciple
2013 December - Blogging with Wordpress for #Digidisciple2013 December - Blogging with Wordpress for #Digidisciple
2013 December - Blogging with Wordpress for #Digidisciple
 
Mv process log form 2019 (2)
Mv process log form 2019 (2)Mv process log form 2019 (2)
Mv process log form 2019 (2)
 
Photoshop_CS_Tutorial
Photoshop_CS_TutorialPhotoshop_CS_Tutorial
Photoshop_CS_Tutorial
 

Último

(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)oannq
 
Inspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxInspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxShubham Rawat
 
E J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptxE J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptxJackieSparrow3
 
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...JeylaisaManabat1
 
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan
 
南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证kbdhl05e
 

Último (6)

(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)
 
Inspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxInspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptx
 
E J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptxE J Waggoner against Kellogg's Pantheism 8.pptx
E J Waggoner against Kellogg's Pantheism 8.pptx
 
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
 
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
 
南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证
 

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
  • 18. Browse through individual icons to add some variety to your global icon set. 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