UX & UI Design Summer Program Online

UI Fundamentals

How & when to use common UI patterns

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

Learn Figma, Adobe XD, & Sketch

Create Visual Designs & Clickable Prototypes

• Create clickable prototypes to show users for testing, or for clients to see your work.
• In the live course you’ll learn and use Figma. We’ll also provide self-study courses so you can learn Adobe XD and Sketch (Mac only). These apps do the same thing as Figma but are competing apps used by some companies. Once you learn how one app works, the others are much easier to learn because they work very similarly.

UX Design Concepts

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.

Case Studies

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.

Creative Briefs

Getting to Know a Project: Creative Briefs

• What is a Creative Brief?
• What to Include in a Creative Brief

Wireframing for UI Designers

Wireframing

• Why and How to Create Wireframes
• Issues to Solve
• Steps in Creating a Wireframe
• Designing on a Grid System (like Bootstrap)
• Get Critiques
• Incorporate Feedback & Improve Your Designs

Wireframe to Refined Design

• Iterate & Refine
• Understanding the Mobile Experience

UI or Visual Design Concepts

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

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

Workflow: Idea to Design

• Example Web & App Design Workflows