GD202 Interactive Design I
An Introduction to User Interface and User Experience Design
Introduction to interactive mediums and the fundamentals of the interactive experience. With a focus on information architecture, interface design, and usability students will explore digital screens for web sites, mobile applications, and data-driven information systems.
Upon successful completion of this course, students will be able to:
- Recognize effective user interfaces for web sites, mobile applications, and data driven information systems.
- Define User Centered Design (UCD) principles in various media platforms.
- Organize a body of information based on User Experience (UX), User Interface (UI) design, and Information Architecture (IA).
- Identify the principles of usability and human factors in interactive communications based on field research and usability testing.
- Prepare layout design, presentation graphics and integrate web typography for responsive interactive screens.
- Organize a body of information to an information design.
- Prepare layout and presentation requirements for information design.
Introduction to Interactive Design
- Defining interactive design.
- Terminology: the difference between UX and UI.
- Design skills and design tools.
- The work of a designer.
- Critiquing interface design.
- User interface design basics: interacting with users, behaviors and action, simplicity, learnability
- Exercise 1: Website User Interface Design Research. Due January 15.
The Importance of User Personas
- Research user personas to your advantage. Assimilate target market and niches for your digital target audience. Evaluate user persona demographic, psychographic and thought processes.
- Exercise 2: User Persona Mind Map
- Plan a features list for an app. Learn about the implementation of information architecture and the planning process of data for an interactive web application.
- Explore different methods on how to organize navigation, and layout of an app using sitemaps, sketch prototype, and flow charts.
The Importance of the Iteration Process
- Review the design process: Features List, Sitemap, and Prototypes (sketches and wireframes), Mockups
- User Goals in interface design.
- Due: Exercise 1: Website User Interface Design Research.
- Due: Exercise 2: User Persona Mind Map.
- Assign Project 1: Features List. Due March 12.
- Design Kit, A human-centred approach to design: Inspiration, Ideation and Implementation.
- Brainwriting as a way to generate ideas. Leveling the field for introverts and extroverts.
- Information Architecture (AI), wayfinding, and digital placemaking.
- Assign Project 2: Sitemap. Due March 12.
Prototypes: Sketches and Wireframes
- Prototypes to quickly conceptualize and test ideas.
- Assign Project 3: Sketch Prototype. Due March 12.
- Assign Project 4: Wireframe Prototype. Due March 12.
Styles and Mockups
- Design patterns, systems, and frameworks.
- Design critique: test and refine prototype concepts.
- Lab Time.
- Refine Project 3: Sketch Prototype.
- Refine Project 4: Wireframe Prototype.
Prototyping and Wireframing with UX Design Tools
- Discuss available tools and approaches to prototyping and wireframing.
- Tools: Layouts, mockups, symbols, groups, images, icons.
- Use a UX design tool to create interactions for presentation.
- Lab Time.
Publishing with Medium, Markdown and GitHub
- Site publishing platforms, open source and the democratization of the web.
- Learning to publish with text editors, markdown, Medium, and GitHub.
- User Testing on Multiple Screens.
- Conduct user testing methods on the wireframe process for good interactivity.
- Assign Project 5: User Testing & Iteration. Due March 12.
Visual Design for Web Applications
- Learn how to create a style tile.
- Explore color theory, visual design, composition, for web applications. Digital Typography.
- Explore font pairings for the web in Google fonts, legibility on screens, typography rules for web applications.
- Assign Project 6: Style Tile Variations. Due March 26.
Responsive Web Design
- Intro to Grid Layouts in Web Design.
- Tools for Website Design.
- Tools & Skills: guides, grids, shape masks, layer groups, buttons, textures
- Defining layout sizes for the interactive platform. Exploring image optimization for the web. Planning web design in Photoshop, Illustrator & XD.
- Assign Project 7: Responsive Website Design Mockup. Due April 17.
- Lab time.
- Due: Project 1: Features List.
- Due: Project 2: Sitemap.
- Due: Project 3: Sketch Prototype.
- Due: Project 4: Wireframe Prototype.
- Due: Project 5: User Testing & Iteration.
Introduction to HTML
- Understanding web semantics and learn basic HTML tag structure.
- Discussion and design critiques.
- Lab time.
Introduction to CSS: Web Typography & Google Fonts
- Applying google fonts in CSS, line height, font styles, and tracking.
- Lab time.
- Due: Project 6: Style Tile Variations.
- Easter Monday
- No class.
- Continue to work on projects.
- Lab time.
- Project 7: Custom Responsive Website Design Project.
Due at 1:00 pm, Tuesday, April 17, 2018.
Textbooks, References, Materials
- UFV Library Abbotsford
- Additional resources and support material will be distributed in class.
- Lynda.com: Online UX Design Tutorials