Unit 6
MAD-LEARN 2021
Mobile App Development

Discovery
Purple  #9200fb

https://mad-learn.com/

PART 2: MAD-Learn Building the APP Shell & Customized App Shell​

STEP 7: Creating an app shell. Follow these steps. You will end up redoing almost all of this with your own customized information. So for now, just do exactly what Ms. Miller says in the video below. (10 minutes max)
STEP 8: Create a Logo
For the first time around, spend no more than 20 minutes.  You can always go back and play with the thousands of choices at a later time.    

Create Your Logo with  LogoMakr.com (link).  
Picture
https://logomakr.com/

Ms. Miller's 4 sample logos. I can always make more. The two with the image of the manatee might be too busy to show up well. I will have to try them and see how they look.

OOPS!!!!    All of my Logos are too small.  Here's a quick video tutorial on how to change the size of your logo resolution.

My second iteration of logos are the proper resolution 1280 x 270.
STEP 9a: Create your custom App Images 
(personal devices only - school devices and Chromebooks scroll down to 9b.)
Create app images (1 hour max.)
  1. Use PabloByBuffer to Create 4 app images of required sizes. Launching Pablo by Buffer is a bit tricky. 
  2. If the site says BLOCKED, skip to step 9b.
  3. Go to PabloByBuffer.  If a tutorial or tour comes up, click on the Pablo icon in the upper left. Type a search word to search for an image. You want an image that is either a square or landscape orientation. If your animal is not listed, consider, grass, savannah, landscape, ocean, river, etc. Delete the text. 
    1. Splash Screens -
      1. Select NONE for Filters to make image bright and eye catching 
      2. ​Add the logo you created. Insert Logo or Graphic. Resize it as you wish.
      3. Click Share & Download, then Download.
      4. Rename your File according to the table.
      5. You just created a Tablet image.
      6. Now change it to the Vertical. Resize as you see wish.
      7. Click Share & Download, then Download.
      8. Rename your File according to the table.
    2. Home Screens & Inner Screens - 
      1. ​These screens are the same images.
      2. Continuing in the Pablo by Buffer window, click on your logo and delete it.
      3. Go to Filter and choose "Light Contrast" 
      4. Click Share & Download, then Download.
      5. Rename your File according to the table.
      6. Now change it to the Horizontal. 
      7. Click Share & Download, then Download.
      8. Rename your File according to the table.
    3. App Icon - 1024 x 1024  App Icon.  Make your App Icon using the Square.  
  4. Insert each of your images into the MAD-learn App on the appropriate spot.  You have now replaced the template images with your own images and logo and side drawer.
  5. Congratulations!!!  You now have a customized App Shell and you are ready to move to Step 10 and start adding menus and content pages.  

Launching Pablo By Buffer (:45)

Picture
https://pablo.buffer.com/

STEP 9b: Create your  custom App Images (School devices only  and Chromebooks)

  1. Go to Sketchpad.io (LINK).  Because the District blocked Pablo by Buffer site, you are going to create background screens without images instead. You will use your color palette colors. You can use a gradient if you want, for a little variety.  
  2. In sketchpad.io, Click on the plus and choose:  New File--> Custom Size.  Watch the videos below in Step 10 before drawing anything, so you know what each screen actually does and should look like..  
    1. 1024 x 1024  App Icon.  Make your App Icon. This is the square icon that appears on the device for users to click and open your app. 
    2. Side Drawer
    3. Coolors.co
  3. Splash, Home, and Inner Screens - Android Vertical.  
    1. In sketchpad.io, Click on the plus and choose:  New File--> Custom Size 1280 x 1920.    
    2. Make your Vertical Android Splash Screen. The splash screen appears for a few seconds when your app is loading. It splashes across the screen. ​Splash screen  for the vertical Android devices.  Custom size for the vertical Android files are 1280 x 1920.  Once you save it as Download.PNG, rename it SplashVAndroid.png.  
    3. With that same image, now add a transparent filter over it using the square, black, and find a percentage that darkens your color.  You have just made a Home and an Inner Screen for the Android devices. Once you save it as Download.PNG, rename it HomeInnerVAndroid.png. 
  4. Splash, Home, and Inner Screens - iPhone Vertical.  
    1. In sketchpad.io, Click on the plus and choose:  New File--> Custom Size 1242 x 2208.    
    2. Make your Vertical iPhone Splash Screen. The splash screen appears for a few seconds when your app is loading. It splashes across the screen. ​Splash screen  for the vertical iPhone devices.  Custom size for the vertical iPhone files are 1242 x 2208.  Once you save it as Download.PNG, rename it SplashViPhone.png.  
    3. With that same image, now add a transparent filter over it using the square, black, and find a percentage that darkens your color.  You have just made a Home and an Inner Screen for the Android devices. Once you save it as Download.PNG, rename it HomeInnerViPhone.png.
  5. Tablet Horizontal Splash, Home, and Inner Screens are the same resolutions for both Android and iPhones.
    1. ​Splash screens  for the Tablet devices.... In sketchpad.io, Click on the plus and choose:  New File--> Custom Size Custom size for the Horizontal Tablet file is 2048 x 1536.  Once you save it as Download.PNG, rename it SplashTablet.png.  
    2. Home & Inner Screen for the Tablet Devices...In sketchpad.io, Click on the existing file you already have created.  With that same image, now add a transparent filter over it using the square, black, and find a percentage that darkens your color.  You have just made a Home and an Inner Screen for the Tablets  Once you save it as Download.PNG, rename it HomeInnerTablet.png.  
  6. Insert each of your images into the MAD-learn App on the appropriate spot.  You have now replaced the template images with your own images and logo and side drawer.
  7. Congratulations!!!  You now have a customized App Shell and you are ready to move to Step 10 and start adding menus and content pages.

STEP 10: What are all these images for? 

Design Phase Introduction video is required.   The second video, Using Pablo to Create Designs is optional for students who have their own devices.  
Now that you have a better understanding of what the Design Phase is, you may go back at any time and modify or create new images, logos, etc.  For now, go ahead and make sure your images match the dimensions of Step 11. 

STEP 11: Make your images as described in these two tables below. 

You are using SPEP 11 to double-check your images are the correct resolution (size) for the type of screen. You have already created these images in Step 9. Fix any errors and then move to STEP 12.
You only need one Logo, App Icon, and Side Drawer.
1.       Logo
2.       ​​App Icon
3.       ​​Side Drawer
Resolution
1280 x 270
​1024 x 1024
​800 x 1920
Created in the App called
LogoMakr
Pablo by Buffer
Coolors.co 
​and a screen shot
NAME THE FILE
logo
appicon
sidedrawer
All images in this table created in
Pablo by Buffer
Android phones
​VERTICAL
iPhones
​VERTICAL
iPads/Tablets
​HORIZONTAL
Splash Screens
No filters in Pablo.
​Insert your logo.
 4.       ​​Resolution 1280 x 1920
​created in Pablo by Buffer or Sketchpad
Name the File:  SplashVAndroid
​5.       ​​Resolution 1242 x 2208
​created in Pablo by Buffer or Sketchpad
This can be the same file as the Android. If you make a file with this resolution, Name the File:  SplashViPhone 
6.       ​​Resolution 2048 x 1536
created in Pablo by Buffer or Sketchpad
Name the File:  SplashTablet
Home Screens & Inner Screens
7.       ​​​Resolution 1280 x 1920
​created in Pablo by Buffer
Name the File:  HomeInnerVAndroid
​8.       ​​Resolution 1242 x 2208
​created in Pablo by Buffer
This can be the same file as the Android. ​If you make a file with this resolution, Name the File:  HomeInnerViPhone 
9.       ​​​Resolution 2048 x 1536
​created in Pablo by Buffer
Name the File:  HomeInnerTablet

Splash Screens are where your user will land when they click the app icon.

Replace the shell-placeholder images with your own images by clicking on the big blue circle that says Upload.

Home Screen and Inner Screen are the same, except the Home Screen has the Logo.

Replace the shell-placeholder images with your own images by clicking on the big blue circle that says Upload.

App Icon

The App Icon is the square image that appears on the mobile device. It usually has no words on it. The words would appear under it. The App Icon is quite small, so detail is not really helpful. Some App Icons have a letter or number or zoomed-in part of the other images.
STEP 12: Create Side Drawer. This is the easiest image to make of them all.
Method 1 -- Use a contrasting color from your color palette. Take a screenshot 10 x 10 of the color you want from Coolors.co (link). 
Method 2 --  Use Coolors.co to make a gradient. You’ll have to figure this out on your own, but it can look cool. Take a screenshot 10 wide by the entire gradient tall.


Replace the shell-placeholder LOGO, APP ICON, and SIDE DRAWER with your own by clicking on the big blue circle that says Upload.
Congratulations!
At this point, you have create images or colors for your 3 Splash Screens, 3 Home Screens, 3 Inner Screens, 1 App Icon, 1 Logo, and 1 Side Drawer - That's 12 images.  You have also uploaded all 12 as well. You have gotten most of the pre-work completed. Now you are ready to go to Part 3 - Step 13 which is to begin laying out your Menu and Inner Menus and a handful of your more simple pages. 
Proudly powered by Weebly