App Design Checklist

Overview

This checklist is designed to help students create successful HTML5, iOS and Android multimedia apps using Adobe Animate.

Our Interactive Design courses are designed to provide students the technical and design fundamentals of the entire process from concept through development. They are some of the most complex courses in the program and require special attention to the methods listed in this checklist to achieve success.

Guide

Project Scope

App can be experienced in 1 minute or less (including download time). Defining a project scope that is difficult to complete in the time allotted is the most common factor leading to incomplete Projects. Most hiring entities will have only a minute to review any individual piece of media. Narrow the scope of the topic to something that can be covered in a handful of screens. For example:

• A simple informational app. Examples:
  • KCAD DM Program Plan
  • Salt
  • Color The Sky
  • IGX-133 Personal Cruiser
  • Green Life
  • Chord Basics
  • Run The Rapids
• An online-media advertising campaign. Examples:
  • Medtronic Paradigm
  • GR Beer
• A simple Game. Examples:
  • Frenzy
  • Bloomin'
  • Tip Up
  • Critter Style
• A comic or story
  • My name is Greg
• Define your project as a component of a larger entity. For instance, a store within a game or an example section for a larger app concept. Examples:
  • Road Less Taken
  • Mod Cloth
• Limit your project to the interactivity that is demonstrated in the Frameworks provided.

Intermediate Deadlines

Completion of materials for each step of the pipeline on time

Falling behind schedule and not meeting intermediate deadlines often leads to an incomplete project.

• Falling behind schedule robs you from the chance to iterate, that is, make incremental improvements to the design, suggested during reviews, at every step.
• The most technical and challenging parts of the Project come at the end when the project is constructed in the development environment, coded and tested. You will likely need the instructor to help walk you through this part and will not be able to catch up on your own outside of class.

UX Design

Common UX Design practices that potential employers will want to see evidence of.

• This is where the quantity and complexity of a project is determined and is when the Project Scope needs to be negotiated with the instructor.
• CREATE 1 - 2 SENTENCE LOG LINE that includes: genre, target audience, delivery system, objective, emotional connection.
  • Example log line: "In this Storybook Tablet App, three road construction toys, just children themselves, come to life and help each other work through typical emotional trials and tribulations. We aim to teach kids, ages 3-6, how to understand their emotions and move past feelings like frustration and anger to feelings of joy, laughter and purpose."
• BENCHMARKS: Minimum of 9: Use these as reference for function, brand and emotional effectiveness. Example
• CONTENT MAP: Example
• WIREFRAME LAYOUTS: for all targeted display screens (at correct pixel dimensions). Example
  • The pixel dimensions should be 980 x 520 (horiz) or 520 x 980 (vert). This will fit nicely on 99% of smart phone web browsers and fit neatly in tablet/desktop web browsers.

UI Design

Incorporate sound illustration and graphics design fundamentals

• Provide the user something to read while the project is loading. This Is a good place for a project intro. This text should remain on the first screen so the user can click past it into the app when they are finished reading. Example: Understanding Detroit.
• Layout your app in Adobe Animate or Illustrator. Create as many assets as possible in Animate or Illustrator as vector graphics to optimize file sizes.
• Let the navigation and content inform the visual hierarchy: See guide.

Images need to be as small as possible to insure short download times

• Scale images to their final layout size before they are imported into the development environment.
• Create all text and as many graphical assets as possible in Adobe Animate.
• Create as much imagery as possible in Adobe Animate or Illustrator (vectors).
• Create all animation in the Adobe Animate timeline.
• Pre-crop images prior to import to avoid excess invisible pixels.
• Compression...
  • For html 5 apps... use significant amounts of jpeg compression for images. Do not use PNGs unless transparency is required.
  • For IOS and Android apps, Importing PNGS is fine, but jpeg compression should be maximized in the publish settings and for individual images through the library.

Development

Pragmatism

• Start your app directly in one of the KCAD DM Frameworks OR
• Use one of the KCAD Frameworks as reference when constructing and coding your app.
• If your app requires code not demonstrated in the frameworks, you will need to finish the UI design early to provide time to receive extra instruction from the faculty.

Target File Sizes

• An HTML5 app should be no larger than 6 mb (calculate by adding all files sizes together)
• IOS and Android apps have a maximum published file size of 50 mb.

Testing

Testing your app on your laptop is only a partial test. Apps will perform very differently when viewed on a phone or tablet.

• HTML5 apps should be tested from a web server.
• Native apps are easiest to test by transferring the APK file to Android devices.
• Click every button on every page.
• Pay attention to how the button hit zones are working.
• Test on desktop browser, tablet, Phone.
• App should be able to be experienced in 1 minute or less, including preloading.