Designing an App continued!

LESSON 4 (PART 2...Keep going!)

April 19 :: Asynchronous ::

If you need extra help... please send a private chat via TEAMS!


Keep going!


  • If you haven't completed your LAYOUT of your app please continue and move on...(click here)

  • If you haven't DOWNLOADed your images for your app please continue and move on...(see below)

  • If you haven't started BUILDing the GUI of you app on please continue! (see below)

REMEMBER! Building an App takes time. We will continue to build our apps all this week! (coding will happen in a few weeks!)


  • Draw 3 rectangles (like a phone screen)

  • Choose something you would like to make your app about!

  • Layout out the three (3) screens

  • Include arrows that indicate it clicked the screen would change to what?

REMEMBER! You will use this layout for the remainder of the Quarter!

(PS. Don't use the example to the left...please make your App your OWN!)

ASSIGNMENT: Designing an App...Part 2

Downloading images and start designing! Make sure you have your development guide handy!!


Now SEARCH online (Google or Bing) to find images to use for your app!

Once you find an image, right click on it and SAVE IMAGE AS to the APP DESIGN folder on your desktop or on One Drive!

(Hint: you created this folder in Lesson 2...when we found an image of a Cat)


  • Remember to be specific! Finding what you want takes time.

  • Look for clear/clean images.

  • File types... .jpg or .gif or .png work best!

  • Remember that they MUST be relevant to your app!

  • Find at least ONE different image per screen (minimum 3 screens)

  • Note: The Home Screen will probably have more images!

.JPG (JPEG: Joint Photographic Experts Group)

JPEG is the most common format used by digital cameras and images living on the World Wide Web. This file format is based on lossy compression, meaning that it keeps information that is visible to the viewer and gets rid of data that the human eye can’t perceive. The popularity of the JPEG file stems from the fact that it is lightweight, while still being good enough quality for digital use. Due to its size, it will not only load faster, but it can be uploaded to any platform regardless of size limitations. This format can also be viewed on any device without the need to download a special image viewer. However, it’s important to be aware that every time you save a file as a JPEG, hence compressing it over and over again, it causes the image to lose quality and possibly become pixelated or grainy.

.PNG (Portable Network Graphics)

PNG is a high-quality file format used for images. This file type is based on the lossless compression, which means that it supports high-quality images for online use while retaining the original image colors and sharpness. Unlike JPEG files, PNGs also support images with transparent backgrounds. So, if you want to have an image without a background, like a logo or product, you can save it as a PNG file and use it with different backgrounds. However, this file is not as lightweight as a JPEG. Therefore, it’s not recommended to upload hundreds of large PNG’s to your website or portfolio as it will take up a lot of storage and ultimately increase the loading time of your site. And nobody has time for that.

.GIF (Graphics Interchange Format)

You’ve probably heard of this file type based on its most popular feature that’s taken the Internet by storm: animation! The GIF file is a form of bitmap images, meaning the graphic is composed of many tiny parts called pixels, just like the JPEG and PNG file formats. This file type is based on LZW (Lempel-Ziv-Welch), a special form of the lossless data compression algorithm. A GIF is most suitable for storing graphics with a few colors, such as simple diagrams, shapes, and logos, rather than gradients. For example, your business’ icons that contain three colors or less look great in this file format – plus, the small file size will be suitable to use anywhere. However, a beautiful sunset picture would not only be too heavy of a file size but also will look distorted because of the color limitations. One benefit of this file type is that it supports a transparent background, like a PNG file.

Lesson 4: Designing an App Part 2

Sign in to! Make sure you have your development guide handy!!

Go to

Select SIGN IN on the top right corner

Enter your email and password

Or Click Continue with MicroSoft on the Right

If you are not directed to Lesson 4 click MY DASHBOARD on the top left

Once on your DASHBOARD...

Scroll down to find MY COURSES

Click the Current Unit: CSP Unit 3 - Intro to App Design ('20-'21)

Click LESSON 4

Click 1 (in the oval)

Make sure you have your development guide handy


Do This:

Take a look at the prototype below for the Bird Quiz App.

Run the app in, and think about how the prototype helped in the development of this app.

Do This:

  • Look at the user interface design in your planning guide

  • Recreate the screens your drew out here

  • Add Images and Labels etc from the Design Toolbox

  • Remember to give meaningful names as IDs

  • You can upload images to your app by clicking "Choose..." next to the "image" category in Design Mode.

Use the "Design Guide we have been creating to guide you!

Note: You are not doing any programming yet on your app. You will start that in a later lesson.

Things you MUST have:

  • Minimum of 3 screens...but you CAN HAVE MORE!!!

  • At least ONE different image per screen

  • Remember a title and instructions for your app (Home screen)

  • Includes images, audio and text on each screen

  • A clear and easy to navigate user interface (the user of your app will know what to do easily)

  • Clearly communicates information about YOUR topic

REMEMBER...Lesson 4 will AUTO SAVE and you will continue to build you app in the upcoming weeks!


Once you are done, please give a thumbs up in the chat!