UI UX Design Course

How & when to use common UI patterns

• Menus
• Tabs
• Bottom tab bar
• Buttons (including “Call to action” or CTA)
• Forms etc.

Intersection of Design, Technology, & Business

• Through critical analysis understand how user experience as a field sits in the intersection of different areas of the product.
• What is the difference between User Experience Design and User Interface Design?
• Learn about heuristics and apply heuristic evaluation to websites.
• Competitive Research

Knowing Your User

• Learn how to structure and conduct user interviews to better identify the needs and current behaviors of the user.
• Understand how to engage the user to work through assumptions and preconceived notions that arise during the process.
• Write down assumptions for your class project.

User Research Through Interviews

• Refine user interview questions.
• Interview classmates for your project.

Refining User Research and Creating Personas

• Create user personas from the interviews to represent the goals and behaviors of the users within the system.
• Develop user scenarios to show when and how the user engages with the system.

Synthesis of User Research, Journey Maps, and User Flows

• Continue to synthesize results of user research to find patterns.
• Create a journey map for your project.
• Think through the different features of the system by building user flows.
• Take the written narrative to the next level through sketching and improvising using techniques such as storyboarding and bodystorming.

Wireframing, Sketching, Prototyping

• Practice a sketching session for an existing website or mobile application of your choice. Start with sketching on a whiteboard or your notebook.
• Sketch wireframes for your class project.
• Learn the power of prototyping and testing an idea. Understand different methods of prototyping and their levels of fidelity.
• Discuss the motivation behind the prototyping, such as newly discovered user goals, business needs and improved functionality.

Prototyping & User Testing

• User testing methods and strategies.
• Do’s and don’ts of user testing.
• Do a user test on your project with a classmate.
• Clearly list the assumptions and test your concepts. Work on multiple iterations of the prototype based on the test results.

Iterating the Prototype and Further User Testing

• Report conclusions based on user testing.
• User testing reports.
• Rework the prototype based on user testing conclusions

Building Case Studies

• Look at case study examples.
• Finish your clickable prototype.
• Using a compilation of user research, prototypes, photographs, and user research, build your case study.
• Present class projects as case studies on-screen

Learning from Existing Websites & Apps

What Works & What Does Not?

Color

• Color Harmonies
• Creating Contrast with Color
• Guidelines for Proper Color Usage

Typography & Fonts

• Display Text (Such as Headings) versus Body Text
• Legibility
• Type Trends
• Typeface Selection & Pairing
• Where to Get Web Fonts
• Ideal Line Height
• Column Width (Line Length)
• Hyphenation & Justification

Design Elements

• Proximity
• Similarity
• Continuity

Trends in Web & App Design

Analysis of Example Websites & Apps

Design Patterns

Example Design Patterns

Multiple Screen Sizes

• Mobile Considerations & Limitations
• Discoverability Challenges
• Mobile Navigation
• Phone vs Tablet App Design

Workflow: Idea to Design

Example Web & App Design Workflows