 Lesson 6: App Design

Objectives Introduce concepts such as splash screen, logo, marketing, and branding Understand how color is used to emote specific emotions in marketing Understand how decisions regarding appropriate color are important to considering a brand Create a custom logo, app design Essential Questions How do considerations of elements such as logo design and color help make a mobile app more appealing/marketable? What is the purpose of the splash screen? How are custom designs created?

 Making Your Mobile App Personal AND Popular Elements of Mobile App Design

What Are Marketing and Branding? Why Are They Important?  Marketing is the art of making your product (mobile app) appealing enough for people to download, or even buy, it  Target Audience is the group established as needing or wanting your product  Branding is the process of developing an simple, recognizable name, image, and slogan for your product  A logo is the simple image that represents your brand, like…

Determining Your “Target Audience”  What are you providing/selling, and why is it so unique?  Who do you want to download/buy your app?  Why should someone download/buy your app?  How can the group be narrowed down?

What is the “Splash Screen”? First screen seen by the mobile app user Think of it as the “cover of a book” Remains visible for just seconds, while content uploads Establishes your brand

Developing a Brand: Consider Color

Further Considerations Men’s Favorites: Women’s Favorites:

Even More Considerations Even more details at:“The Psychology of Color in Marketing and Branding”“The Psychology of Color in Marketing and Branding”

 Creating a Custom Mobile App Design Theme, Name, Colors and Logo

Steps: Quick Reference Steps for Selecting an Image Set Steps for creating custom logos using designmantic.com Steps for creating custom logos using coollogo.com Steps for editing five screens on pixlr.com Steps for adding new screens to “4.0-inch” folder Steps for adding new screens to “4.0-inch” folder Steps for creating and adding new zip folder to CMS Return to Quick Reference =

Step 1: Start with the Sample Image File From the CMS, open your app and select the “Design Settings” option under the cog wheel icon (upper right, see image below) On the insert window that appears, click the box for “Change/Edit Project Images” A set of options will appear. Under the iPhone options, select “Download Sample File.” A folder named “iPhoneSampleImageSet” will appear in your “Downloads” folder and/or at the bottom of your browser window. Unzip, then open the folder (it will automatically unzip), then open the “4.0-inch” sub-folder to reveal all of the files and sub-folders…

Step 2a: Create and Download Custom Logo and Backgrounds (using designmantic.com) OR Skip to steps for using the coollogo.com app generator (Step 2b) OR skip to steps for creating your own logo in pixlr Open Enter desired app title and click “Show my designs for free.” Select one of the many logos available to use for your app’s theme; right click the image and save it to your desktop (NOTE: do NOT click “Select” or “Variations”) Rename the image for your app

Options More…

Step 2b: Create and Download Custom Logo and Backgrounds (Using coollogo.com) OR Skip to steps for using the designmantic.com app generator (Step 2a) OR skip to steps for creating your own logo in pixlr Open Select a logo style from the center panel. Use the tools listed at the top of the page to customize your logo. When you are finished, click the “Done” button at the upper left. Then click the “Download” button in the window that appears. Find the image, drag it to your desktop, and rename it for your app.

Step 3: Add Custom Logo to Templates Go online to On the home screen, select“pixlr EDITOR” Select “Open image from computer”

Image Sets for a Variety of Devices Files used by CMS Simulator

Next, select the files below from the 4.0-inch folder you unzipped. Use the Command button to select all files at once, being careful to select these specific files: NOTE: Also open the two TableBG files, if they are provided.

Descriptive Guide to Template Files: capture.png = logo used for things like the “Click & Share” screen default.png = “Splash” screen design HomeBG.png = Specific background for the “Home” screen. NOTE: the logo will already be placed on this screen automatically (from logo.png file)! InnerPages_BG.png = the background used for all other content screens logo.png = logo that will be used for automatic screens, such as on the “Home” screen TableBG.png = Background for left screen table (keep it, and the HomeBG, simple!)

Visual Guide to Template Files: InnerPages_BG.png (not shown) default.png (splash screen) capture.png (logo)

Notes for each image file:  Your custom logo image should be used for both the capture.png and logo.png files  The default.png file should include both a background AND the custom logo you created to make the complete splash sceen  The HomeBG.png should be very simple, as it will be mostly covered by buttons  The InnerPages_BG.png will be used as background for a variety of screens  The tableBG.png should be just a color or gradient background  Consider also customizing the icon.png files with a simplified version of your logo

You can create simple logos and add images using the pixlr toolbar found at the left. Begin by using the eraser tool to remove the existing Crescerance logo from the first screen NOTE: Having opened the files, they will appear in the editor, like so… Now, import the selected files into the Pixlr editor

If you have created a custom logo, add it to your images: Select File Select “Open Image” Open image file by name from your desktop…

…like so (imported image labeled “mobile-devices”):

Now, click the logo screen to bring it to the front and either create a simple logo, using the Text tool (as shown), or by adding your custom logo (instructions to follow)… Text Tool

To add your custom logo you imported from your desktop, follow these steps: Click on the screen for the custom logo you imported Under “Edit” select “Select All…” Under “Edit” select “Copy” Click on the screen you want to add the logo to (see guide to template files)see guide to template files Under “Edit” select “Paste” If your image needs to be resized or moved, select “Free Transform” (under “Edit”) and manipulate the image, as needed When you are satisfied with the image, click on the window and select “yes” to apply the changes

When you have finished creating your new screen, click the X in the upper right. You will be given a series of prompts to help you replace the original file in your “4.0- inch” folder with this new screen. Repeat the process for the other four screens. NOTE: Be sure that the location to save the file is always set at “4.0-inch” AND that your file names are EXACTLY the same as the originals, INCLUDING the “.png” extensions.

Step 4: Creating and Adding New.zip Folder to CMS  Open the “4.0-inch” subfolder and confirm that the seven new screens have been updated and look correct; close the folder  “Compress” ALL FOUR SUB-FOLDERS in the original set (NOTE: You MUST highlight the four separate folders!); a new sub-folder, named “archive.zip” will appear  This “archive.zip” sub-folder will be what you use for your app design!

Step 4 (continued)  Return to the “Design” screen on the CMS and select “Add/Update Zip” on the iPhone icon  Select your newly created “archive.zip” sub-folder, wait for it to be fully uploaded

Scroll all the way down the window to find and click the “Update Design” button You now have a custom design for your app!