I. IntroductionII. PrinciplesBeautyIII. PracticesDesign BlogsDesign GuidesFile FormatsColor UseUser Interface Design KitsCopyrightFree & Open ResourcesIV. ProjectsUX EvaluationIcon LibraryBook CoverCharacter DrawingInfographicDashboardWebsiteMobile Application

Mobile Application

What makes a good mobile app, and how can I create my own?

mobile app example

Mobile applications are quickly replacing websites as a common way that learning designers now reach their learners. Mobile apps benefit from the same opportunities provided by websites but also allow the learning designer to utilize various smartphone capabilities that are not standard on desktop and laptop computers, such as location services, gyroscopes, cameras, facial recognition, augmented reality, and so forth. This means that learning designers can approach apps similar to how they approach websites, but also that apps may have many potential opportunities that are not available with websites alone.

mobile apps should value appeal, then retention, then comprehensionIn terms of ARC, a mobile application's emphasis will vary greatly by its purpose, but at a basic level, apps may be thought of as being similar to websites in that their primary function is to appeal to the learner and to get them to stay on the app to learn. This means that apps should strive to be clear, sleek, and inviting and should also make it clear to the learner where they are and where they need to go to keep learning

For this project, you will create a visual mockup for an iOS/Android app of your choice for a smartphone or tablet. You are encouraged to use existing User Interface Design Kits (e.g., iOS Design Kit, Google Material Design, Bootstrap, jQuery UI Mobile, Publica) along with Adobe Illustrator to complete this project.

Task

Create a mockup of your own, original mobile application using Adobe Illustrator or another program.

Requirements

Guidelines

Tutorial Videos

Apps Design Tutorial

Image preview of a YouTube video
Watch on YouTube https://edtechbooks.org/-iUZ

UI Design in Adobe Illustrator Tutorial

Image preview of a YouTube video
Watch on YouTube https://edtechbooks.org/-kzHp

How to Design an iOS App in Adobe Illustrator UI/UX Tutorial

Image preview of a YouTube video
Watch on YouTube https://edtechbooks.org/-yzDL

Evaluation Criteria

  Unsatisfactory Basic Competent Professional
Layout The layout is either cluttered or sparse. The layout gives sufficient space to all elements, …  … organizing them in an aesthetic manner … … that fosters readability and instant recognition.
Color Color is not used or is distracting, disharmonious, or confusing. Color is used in a non-distracting manner … … that enhances visibility … … and enhances meaning and aesthetics.
Graphics Graphics are not used or are poorly constructed, not discernible, or distracting. Original graphics are used (e.g., illustrations, graphs, icons) … … that are clearly discernible …  … and improve aesthetics or enhance meaning in a professional-looking manner.
Font Fonts are not used or are inappropriate, inconsistent, or frequently changing. Appropriate fonts and text sizes are used … … in a consistent manner … … that only changes to enhance meaning.
Navigation Navigation elements are not used or are poorly constructed. Necessary navigation elements are clearly discernible, … … logical, intuitive, … … and complete.
User Pathways User pathways are ill-conceived, incomplete, or non-intuitive. User pathways clearly exist … … that are intuitive … … and efficient.
Scope The mockup contains fewer than six pages of content. The mockup includes six or more pages of content but does not include one or more of the required pages listed above. - The mockup includes six or more pages of content, including the pages described in the requirements above.
Presentation The mockup is not presented in a manner that allows for user navigation. The mockup is uploaded and shared in a manner that allows for user navigation … - … and all of the links work to allow the user to make their way through the mockup in a fully functional manner.

End-of-Chapter Survey

: How would you rate the overall quality of this chapter?
  1. Very Low Quality
  2. Low Quality
  3. Moderate Quality
  4. High Quality
  5. Very High Quality
Comments will be automatically submitted when you navigate away from the page.