(:Summary:Contains the 'action' links (like Browse, Edit, History, etc.), placed at the top of the page, see site page actions:) (:comment This page can be somewhat complex to figure out the first time you see it. Its contents are documented at PmWiki.SitePageActions if you need help. :) * View * Edit * History * Print

(:nl:)!!MPICT Faculty Development Week


This hands-on workshop introduces participants to the core principles and foundations of interaction design, information design, and user experience design. We will interleave discussions of user interface design principles with hands-on design exercises crafted to clarify, illustrate, and elucidate the principles. We will explore how to apply the design principles for the web, tablets, smartphones, and other devices (e.g., watches, televisions, and kiosks). This seminar also introduces the basics of Responsive Web Design (RWD), an important technique for designing digital experiences that span all screens regardless of size. Participants will be able to utilize these design principles and exercises to create their own curricula and engage their students in active learning through hands-on, practical experience.


During the hands-on labs, participants will form project teams and collaborate as well as work independently to apply design principles to selected user interface and user design problems. Teams will collaborate to identify and define possible solutions, then individuals will design and describe their selected direction.


At the completion of this workshop participants will be able to:

* Understand the unique design challenges for web, mobile, touch, and other devices. * Identify, describe, and define user interface and workflow problems for the web and mobile devices. * Identify and apply design patterns or generate new designs to solve user interface and workflow problems. * Create design documents to illustrate the proposed solution. * Document and convey the interactivity, flow, and logic of the proposed solution. * Apply foundational design principles in the proposed solutions. * Present design solutions using a narrative method. * Explain the rationale behind interface design decisions. * Offer constructive criticism and feedback on design solutions proposed by team members. * Create task lists, scenarios, and simple prototypes to evaluate the efficacy or proposed design solutions.

'''Pre-Requisites and Materials Requirements'''

No prior web design experience is required. Familiarity will common digital design tools is preferred. Bring Pen and paper (for sketching), a USB drive (if you would like to take your project files with you), a smartphone and/or tablet device to view existing web sites or apps or to preview project design documents or prototypes.



'''Old Oakland Farmers' Market'''

The Old Oakland Farmers' Market (OOFM) wants to attract more customers, and recent customer surveys and interviews reveal their customers' primary needs are:

* Which vendors will be present? * What products will be available? * What is new and in-season this week?

Additionally, there were requests for:

* A market map of vendor locations * Featured vendor spotlight and interview * Recipes * Food, wine, and beer pairings * Social features: ** Vendor reviews ** Submit product requests ** Recommend vendors who should sell at the market (or apply to become a vendor) ** Share information (e.g., recipes, photos, stories) with vendors and customers



Interaction Design (IXD) and User Experience (UX) Design Foundations

PDF of the presentation slides

Mini-project: Oahu Parking Kiosk



Personas, Scenarios, Site Maps, and Flow Diagrams

Notes and Ideas from Today

Please label all files with your name (or create a folder for your name) in the MPICT folder in the shared Dropbox.



Wireframes (Web, Mobile, and Responsive) and Design Patterns

* UI Patterns * Pattern Tap * UI Cloud * Mobile Patterns * This Is Responsive (Design Patterns)

Sample Homepage Wireframe (Fireworks PNG)



Wireflows, Tasks & Scripts, and Prototypes

Notes and Ideas from Today

Designing Forms: * Web Application Form Design * Web Application Form Design Expanded * Previous and Next Actions in Web Forms * Label Placement in Forms * Label Alignment in Long Forms * Web Forms Best Practices (PDF)



Prototype Testing, Findings, and Review

Outline of In-Class Project Steps and Final Review Notes



->See the recommended IXD and UX books in this Amazon list.

->Feel free to link directly to this list of recommended books, because it is not personally branded or associated with a specific school or business. I update this list at the start of every Fall and Spring semester.

->You may use this link in your syllabi and/or online course materials: ->http://astore.amazon.com/idininanuxde-20


'''Online Resources'''

* A List Apart * Boxes and Arrows * UX Magazine * UX Matters * Smashing Magazine UX Design * UX Booth * A Better User Experience * UIE Brainsparks * InfoDesign * International Journal of Design


'''Design Tools'''

* Adobe Creative Cloud (student and teacher pricing available) * Balsamiq * iPlotz * Mockflow * Cacoo * Google Drawing * Mockingbird * HotGloo * Gliffy * Wireframe CC * Mockup Builder * Quirk Tools Wires * Proto.io * UX Pin * Moqups * Invision * Just Proto * Easel * Lumzy * Mocknow * Protoshare * Wirify (turns an existing web page into a wireframe) * Indigo Studio (installed software)(:nl:)

Design by N.Design Studio, adapted by solidGone.org and IDUX
Powered by pmwiki-2.2.86