Lessons

Topics we typically cover in class together.

  1. Design Process

    In this course, we’ll take an iterative approach to design. No one “process” fits all projects. However, we’ll find it useful to alternate between divergent (exploratory) and convergent (decisive) thinking, and to find ways to test ideas efficiently to gain confidence in our decisions.

  2. Usability Testing

    In order to build better products, it’s useful to test prototypes with potential users to identify opportunities to improve our designs before investing in full production.

  3. User Interviews

    When planning new design work, interviewing potential users helps us understand behaviors and contexts to narrow down the problem(s) we should address.

  4. Paper Prototyping

    Prototyping is often best done in cheap and fast ways, so that we can work out the kinks in design concepts quickly and deliver a better final product.

  5. Designing in Sketch

    Visual design aims to improve the user experience through the use of layouts, colors, typography and other visual elements. It’s important to start thinking about how to approach this process and the tools we can use. In this class, we will use Sketch as our primary tool for visual design.

  6. Surveys

    Surveys can also help us form a better picture of our users, their behaviors, and preferences.

  7. Personas

    Personas are a deliverable which helps us summarize and communicate findings from user research, embodying those findings in a representative user which other stakeholders can empathize with as well.

  8. Research Synthesis

    Affinity diagramming will help us look for patterns in our raw data, and we will distill our findings into problem statements.

  9. Design Reports

    Writing about your design work is a good practice in general, to document your process and results. For us, these will serve double duty as early drafts of our eventual portfolios.

  10. HTML Basics

    HTML is the essential building block of web pages. It provides structure to content, and gives browsers meaningful information which supports built-in accessibility and discoverability features.

  11. Realism in Interfaces

    Use subtle lighting effects to enhance the affordances in your interfaces.

  12. Reusable Components

    Make flexible and reusable components to speed up your design process, and make it easier to translate your designs into a component-based design system.

  13. Evaluative Research

    We’ll extend our evaluative research toolbox to include heuristic analysis.

  14. User Flows

    Is important to understand the path users have to follow in order to meet their goals and sometimes we need to communicate this paths in a time efficient way.

  15. Motion for Interaction

    Motion should be used to add clarity to a user interface, and then sparingly and with nuance. A little bit goes a long way.

  16. Layouts with CSS

    Use CSS grid and flexbox to create flexible and responsive interface layous.

  17. Visual Design

    Visual design makes our work, aesthetic, clear, and usable. We’ll start exploring some principles of typography and layout in this class. Keep in mind that theory will only take your design work so far. You have to produce work, look at it, and try again in order to actually improve.

  18. Competitive Analysis

    We’ll cover how to conduct competitive research.

  19. Human Interface Guidelines

    We’ll focus on Apple’s Human Interface Guidelines for iOS (phones and tablets) for now, with an emphasis on the navigation models in iOS.

  20. Material Design

    We’ll focus on how Google’s Material Design system works on Android devices (primarily phones) and explore the primary navigation model.

  21. Color Systems

    Exploration is key to creating beautiful user interfaces. We don’t see design in our mind, we perceive it with our eyes, and interact with it with our hands. Until a possibility is down on paper or screen, it’s not a possibility you’ve considered. Give yourself as many possibilities to choose from as you can.

  22. Inspiration and Aspiration

    In this lesson, we will explore a few different topics in order to stretch your UI skills.

  23. Content Strategy

    Assess, organize, and plan for content needs.

  24. Desirability Testing

    We’ll try out a couple of card sorting techniques to help us more objectively gauge the desirability and aesthetic appeal of our designs.

  25. Observational Research

    The best way to gather information about users' behaviors is to actually observe them doing things in their natural context.

  26. IA Methods

    We’ll briefly discuss task analysis and scenarios as optional information architecture topics which may be helpful for your projects.

  27. Web App Design

    We’ll look at some examples of dashboards and discuss some best practices for organizing content within a desktop web app.

  28. Working with Clients and Stakeholders

    We’ll discuss as a class some strategies for setting expectations and effective communication with clients.

  29. Lightning Presentations

    Give a brief presentation on a topic to share new learning with your peers.

  30. User Stories

    User Stories will help us define smaller chunks of features, which we can then prioritize for our products.

  31. Writing for Interfaces

    Write copy for interfaces, content, and documentation to improve clarity, consistency, and voice.

  32. Portfolio Workshop

    Where do I begin?

  33. Interface Controls

    Design interfaces with appropriate and familiar controls.

  34. CSS Animations

    Use CSS to apply interactive animations to an interface.

  35. Adaptive Interfaces

    Make your designs flexible to adapt to different user needs and abilities.

  36. Coding review

    A chance to review together everything we’ve learned so far about HTML & CSS and how to apply it to our current project.