UI/UX

How & when to use common UI patterns

• Menus
• Tabs
• Bottom tab bar
• Buttons(including 'Call to action')
• Forms etc.

Create Visual Designs & Clickable Prototypes

• Learn how to use Figma to create clickable prototypes to show users for testing, or for clients to see your work.
• Design the UI (user interface of websites, apps, etc) in Figma.

Intersection of Design, Technology, & Business:

• Understanding how UX sits at this intersection involves considering how design choices impact technology implementation and business objectives, ensuring a seamless user experience that meets both user needs and business goals.

User Experience Design vs. User Interface Design:

• UX design focuses on the overall experience of using a product, including research, strategy, and interaction design, while UI design specifically deals with the visual and interactive elements users engage with.

Heuristic Evaluation:

• Heuristics are usability principles used to evaluate the effectiveness of interfaces. Conducting a heuristic evaluation involves applying these principles to websites to identify usability issues and improve the overall user experience.

User Interviews:

• Structuring and conducting user interviews involves asking open-ended questions to gather insights into user needs, behaviors, and preferences. It's important to engage users effectively to uncover underlying assumptions and biases.

User Personas and Scenarios:

• Creating user personas helps represent different user types and their goals within a system, while user scenarios illustrate how users interact with the system in various situations.

Journey Mapping and User Flows:

• Journey maps visualize the user's experience over time, highlighting touchpoints and pain points, while user flows outline the steps users take to accomplish tasks within the system.

Wireframing, Sketching, Prototyping:

• Wireframes and sketches are low-fidelity representations of interfaces, while prototyping involves creating interactive mockups to test ideas and gather feedback.

User Testing:

• User testing methods involve observing users interact with prototypes to identify usability issues and validate design decisions. It's important to iterate based on test results to improve the user experience.

Iterating Prototypes:

• Iterating prototypes based on user testing conclusions involves refining designs to address user feedback and improve overall usability.

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