Design for Mobile – Student Outcomes

Projects must be country specific, and students spend a great deal of time researching the target country to ensure that the mobile app they are designing is relevant to the indended audience.

Depending on course composition, mobile design may be weighted to design, Ux, or development. Here is a sample submited from a more design-centric student:

littlebook_campion_print_edit-design-mobile

A Customer Journey from another project, in this case a job app aimed at Croatian job-seekers:

design-for-mobile-customer-journey

A completed group project, this time an app that allows visitors to Thailand locate medical services quickly and easily:

NOTE: a large file, may take some time to load!

design-for-mobile

 


Design for Mobile – Sample Assignment

Week 03 – Homework – Interaction Design Flowchart 

For this Homework, you will begin developing a Interaction Design Flowchart for presentation in week 05.

Study Examples

Study Features of Process Flowcharts

Study Features of Ux User Flow Diagrams

Download Additional Examples

  • Download from “Week 03 Homework – Interaction Flowchart Examples” under Doc Sharing

Create a Interaction Flowchart

  • Use the material from your Personas
  • Create Your Storyboard first
  • Create your Customer Journey
  • Your Interaction Design Flowchart should match the “scenes” in your Storyboard
  • Add callouts on your screens to explain
    • Design elements
    • Interaction elements
    • Where the user interacts (often with a little hand icon)

Be Prepared to Share

  • You will share your Interaction Design Flowcharts in Week 04

Design for Mobile – Competencies

Course Description:

Students will learn to create custom solutions for content delivery on mobile devices by developing web application and device application user interface tools optimized for delivery on mobile devices. Students will work in class with mobile devices to learn needs, restrictions of designing for mobile devices as well as test student-designed interfaces.

 

Course Focus:

In this course, students will learn about the unique features of the mobile audience for the web, and how to design and develop for this audience. Topics include mobile history, “mobile first” design patterns, CSS media queries, responsive design, and progressive enhancement strategies For their final students will develop a “mobile first” site with responsive breakpoints, and additional features (CSS3) leading to greater mobile usability and universal access.

 

Course Competencies:

Upon successful completion of this course, the student should be able to:

Conduct necessary research for projects
  • Become familiar with mobile technology terminology
  • Examine the history and impact of mobile computing on society

Identify properties of various delivery platforms

  • Identify different types of mobile devices and their uses
  • Design to the needs and limitations of mobile devices

 Design for specific delivery platforms

  • Design device UI for application delivery

Create user-centered navigation experience 

  • Develop web-based interface for mobile devices

Produce and deliver presentations

  • Exhibit solutions in a finished manner suitable for client presentation
  • Evaluate and organize researched information for effective presentation

 

Course Prerequisite(s):  GWDA 202 Interface Design


Information Architecture – Outcomes

Early on in the course, students conduct content inventories on existing websites:

After choosing a project, they do user testing (card-sorting methodology) to generate a folksonomy, here shown as a mindmap:

Further development includes wireframes:

toprint_1

All the results are organized into a final presentation:

camopion_homekeeping_presentation

Information Architecture – Competencies

Course Description:

An examination of content structures, navigation paths, and asset organization.

 

Course Focus: This course introduces key concepts in information design – design in the abstract, used to break blocks of information into categories that can be understood by the user. Organization, nativation, information taxonomies, folksonomies, and other aspect of information design will be applied to the construction of a complex interactive website.

 

Learning Outcomes:

Upon successful completion of this course, the student should be able to:

Describe the relationship between different stages and components of information architecture

    • Identify terms used by information architects in the industry
    • Define information architecture documentation

Define client, project, and user requirements

    • Identify behaviors and needs of a target user population
    • Apply research methods
    • Conduct competitive analysis
    • Create user personas

Develop the components for effective information architecture

    • Design flow charts
    • Produce site maps and navigation structures
    • Create information ontologies and labeling systems
    • Develop Wireframes

Solve content organization problems

    • Assess information architecture requirements for a design project
    • Produce information architecture documentation

 

Course Focus Competencies:

  • Explore “folk” information design as seen in dynamic social networks
  • Study the relational between navigational information layout and visual layout
  • Explore “web ecosystems”
  • Understand the relation of information design for usability, accessibility, sustainability

 

Course Prerequisite(s): GWDA101 Applications and Industry


Web Standards – Sample Assignment

Week 03 – Lab – Standards-Based Markup & CSS

In this Lab, you will apply more advanced markup, including:

  • Meta-data

You will also set up your CSS files, including:

  • Base CSS
  • CSS Reset
  • CSS Normalizing styles
  • Responsive Design breakpoints

Create Touch Icons


Create Splash Screens


Create the Site

Make Additional Pages

  • Make other pages on the wrapper site
    • 404.html
    • contact.html
    • about.html

Add ARIA Accessibility Tags

Add Microdata

CSS Files You’ll Need

  • CSS Reset or CSS Normalizer
  • WebFonts File
  • Your CSS styles file

CSS Reset
@link http://meyerweb.com/eric/tools/css/reset/

CSS Normalize
@link http://necolas.github.io/normalize.css/

CSS Responsive Breakpoints

@link http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/


Web Standards – Competencies

Course Description: 

An investigation into the importance of adhering to web standards and following accessibility guidelines. Students gain an understanding of how these best practices enable inclusive designs that address diverse user needs, contribute to improved Search Engine Optimization, and meet legal requirements such as Section 508. Students code and test sites for cross-browser compatibility, valid markup, and compliance with accessibility guidelines.

Define Web Standards

  • Identify components of web standards and best practices
  • Distinguish between non-standard and standard script

Evaluate the role of contemporary standards (XHTML 1, CSS 2.1, etc.)

  • Write standards-based script
  • Review and edit script for compliance

Prepare for upcoming standards (HTML 5, CSS 3, etc.)

  • Recognize the challenge of designing for multiple devices
  • Implement a design solution that degrades for older standards

Employ Web Standards to solve design and technical problems

  • Apply web standards through technical solutions

Discuss the social implications of accessible design

  • Identify accessible design obstacles

Intermediate Web Design – Outcomes

During this course, students need to work in a codeschool to improve their scores.

For the Final, students have to present a coded HTML5/CSS3 website. The image below is a screen capture. The actual site uses CSS3 animation to highly the cards in the grid:


Intermediate Web Design – Sample Assignment

Week 06 – Lab – Final Project DeReConstruct

In this Lab you will study what is needed to complete the Final Project in this course.

This is NOT a graded assignment, but you will need to complete this project by Week 11

Site Selection

  • You should have reviewed sites between Week 05 and Week 06

The Role of Your Process Book

You are expected to keep a Process Book during your site DeConstruct and ReConstruct

  • Formats
    • Written notebook
    • Online blog/discussion area/website (WordPress is good)
  • Check weekly with the Instructor
  • Turn in in Week 11

What to include in your Process Book this week

  • What you’re looking for in a site
  • The top ~5 sites which appeal to you
  • Why you chose your Final Project Site

Download Final Project Descriptions

  • Download from “Week 06 Lab – Final Project Timeline” under Doc Sharing
  • Download “Week 06 Homework – Strategy for Site De-ReConstruction” from Doc Sharing

Site DeConstruction is…

  • Things you don’t (yet) understand in the HTML, CSS, JS
  • Interesting CSS selectors
  • A description of the strategy for how the site layout was created
  • Quality of the site code

Site DeConstruction…

  • Site should be “ripped” apart to its basics
  • A wireframe should be generated, listing code features and Interaction Patterns

Site ReConstruction

  • What you changed in the site
  • Elements left out or added

Intermediate Web Design – Competencies

Course Description:

Students expand their prior knowledge of HTML and CSS by learning additional methods for structuring and styling web page content. The ability to style multi-column layouts and various interface components is explored. Students participate in visual design critiques, evaluate the designs and code of existing websites, and use CSS to visually design the presentation of HTML content.

 

Course Focus: This course introduces advanced CSS-based layouts for web pages, including multiple columns. The goal is to create web frameworks using fluid, “jelly” and responsive design patterns from starting wireframes and page templates. In addition, the aesthetics of “beautiful web design” will be investigated.

 

Learning Objectives:

Upon successful completion of this course, the student should be able to:

Define terms and methods for styling web pages

  • Articulate the concept for a web page design
  • Identify issues of accessibility that need to be addressed when styling web pages for various devices
  • Discuss the benefits of separating structure and presentation during web site production

Apply various methods for styling web pages

  • Use CSS to visually design the presentation of web page content
  • Implement various page layout methods such as fixed and liquid layouts
  • Design a web site that works on different screen resolutions and devices

Solve information architecture and communication problems with effective web site styling

  • Identify ways to use on-line resources for problem solving
  • Implement solutions for common information architecture principles through web page styling

 

Course Focus Competencies:

  • Apply responsive design techniques to create pages that work equally well on desktop and mobile platforms

 

Course Prerequisite(s): GWDA113 Fundamentals of Web Page Programming