Web Design: Project 7 - Mobile Applications

In this project, students use Adobe Flash Professional CS6 to create a school information application for mobile devices. Students will design and develop the home page, news, campus map, and basic navigation elements of the application. The school guide should allow students and faculty to quickly gain access to campus resources and information and connect with other students and faculty by using their mobile phones and tablets.

The focus of this project is for students to learn how to create a mobile application with an easy-to-navigate interface. Users should be able to locate current academic news stories quickly through an RSS feed and a campus map powered by Google Maps. A sample project with assets is provided to demonstrate key steps in mobile developments. This is Project 7 in the Digital Design curriculum. Portions of this project map to the Adobe Certified Associate, Rich Media Communication with Adobe Flash CS6 objectives.

Student Product:  Mobile application

Adobe TV:  Creating for Mobile and Tablets (Show)

Hour of Code:  Build Your Mobile App (teacher notes)
Create your own mobile app. Learn the sequencing and systems thinking to create apps you and your friends can use. Design using chat Blox, quizzes, flashcards, calendars, maps, pictures and more into stories or interactive apps that work on any iOS or Android phone. Anyone and everyone can create a mobile app. Your content, Your customization, Your APP on Your Phone.

Student Guides

Electronic file:  darby_campus_guide_project.zip
Note:  The darby_campus_guide_project.zip file contains the Flash project file and all source files to
build the Darby University campus information application. The ActionScript code snippet text files
for the home page, RSS feed, and Google map integration will you in building these more advanced
ActionScript-based elements of the mobile application.

Analyze Mobile Applications:

  • Mobile Application Design & Development

Define a Mobile Application:

  • Creating User Scenarios
    User scenarios describe in detail what users do and why they do it. They often tell a short story about a person using a website or application, detailing their motivations and goals so a designer can understand users’ desires and needs

    Your campus guide mobile application should include the following features:
    - A home page with easy access to a collection of campus resources and a top-level navigation system for accessing all subpages
    - An easy-to-use navigation system with which users can move quickly back and forth between the home page and various campus information and resource pages
    - A news page that includes an RSS feed to current campus news stories
    - A campus map page powered by Google Maps
    - All pages (other than the home page) should include a Home button for returning to the home page
    - The news page should include two levels of content and a Read More button - the first level of content is a list of current news stories from which users can click the Read More button to view the full news story in a separate browser window on the mobile device

Design a Mobile Application:

  • Principles and Rules of Copyright
  • How to Create a Wireframe
    Reminder:  You will create the home page, news page, campus map, and basic navigation elements - you can also
    choose to include navigation elements to additional pages, even if you will not build them out in this project
  • How to Create a Design Comp

Develop a Mobile Application:

  • How to Maintain Consistency
    The design of the pages and navigation should be consistent and the content should be organized effectively
  • How to Organize Content
    Create a template for your pages and navigation based on your wireframes and design comps
    A Look Inside Mobile Design Patterns
  • Flash Review:
    How to Work with Text
    How to Draw and Create Shapes
    How to Optimize Flash Content
    How to Create a Button Symbol
    How to Apply Colors and Gradients
    How to Use Rulers and Guides
    How to Get Started with ActionScript
  • How to Set Up a Mobile Application
  • How to Resize Content for Multiple Screens
  • How to Create an RSS Feed
  • How to Add a Google Map

Review and Redesign:

  • How to Test a Flash Project
  • How to Design for Usability
  • Usability
  • Peer Review
  • Review and Design

Publish a Mobile Application:

  • How to Publish a Mobile Application
  • Media

You Tube Tutorials: