UI/UX Design

GRAPHIC DESIGN‍

Introduction to Graphic Design

• What is Graphic Design
• Step by Step process of graphic design (Road map)

‍

Graphic Design theory

• Anatomy of typography
• Layout & Composition
• Font pairing basics
• Color Theory : Color wheel basics & color harmony
• The psychology of color
• Layout & blocking in design
• Layout theory : Introduction to grids in design
• Color profiles , sizes & bleed

‍

Adobe Photoshop Basics

• Adobe photoshop introduction & basic setup
• Adobe photoshop basic worksheet
• Working with images
• Basic of brush tool

‍

Photoshop intermediate tools

• Duotones & Gradient Map
• Cutting out & isolating objects
• Content aware tool
• Healing brush tool
• Layering masks

Photo editing & manipulation

• hanging object color
• Photo manipulation tools  - liquify 
• Non - Destructive editing

‍

Photoshop Mockups

• What is mockup
• Basic mockup design
• Mockup practice

‍

Adobe illustrator

• Basic introduction & basic setup
• Vector tracing worksheet using tools
• Shape builder tool
• Offset path

‍

Icon Design & Logo Design

• Icon design layout
• Golden Ratio for logo design
• Type of logo designs
• Logo presentation for client

‍

Custom brand presentation mockup

• Business card
• Marketing banner
• Bi fold brochure
• Tri fold brochure
• Flyer, pamphlet
• ID card
• Letter Head
• Branding Mockups

‍

UI‍

Introduction

• What is UI?
• UI tools

‍

Sketching

• Introduction To Sketching
• Sketching process
• Sketching user flows

‍

Spacing & Grid System

• What Is A Grid?
• Grid Basics
• Figma Check In — Fixed and Fluid Grids
• Figma Check In — Grid Style
• Project — Mobile Layout Grid
• Project — Desktop Layout Grids

‍

Wireframing

• What Is A Wireframe?
• How To Create A Wireframe
• How to Use Our Wireframe Components
• Low  fidelity wireframe
• High fidelity wireframe

‍

Prototyping

• Prototyping in Figma
• Flows and Starting Points
• Connections (Trigger)
• Interactions
• Animations
• Prototyping Presentation

‍

Figma Basics

• Figma UI — Structure
• Figma UI — Files
• Figma UI — Toolbar
• Figma UI — Left Sidebar
• Figma UI — Right Sidebar
• Shapes and Tools — Frames
• Shapes and Tools — Basic Shapes and Boolean Operations
• Designing in Figma — Images
• Designing in Figma — Getting Started with Text
• Designing in Figma — Using Auto Layout
• Designing in Figma — Auto Layout Properties
• Resources and Collaboration — Community Plugins
• Resources and Collaboration — Community Files
• Project — Auto Layout Buttons
• Project — Creating a Responsive Navigation
• Project — Responsive Text
• Project — Imagery and Gradients
• Project — Layout and Responsiveness

‍

Typography

• Serifs
• Sans Serifs
• Picking Typefaces
• Figma Check In — Text Properties
• Exercise — Elevating a Brand
• Exercise — Typeface Scenarios
• Exercise — Google Fonts
• Project — Typeface Exploration
• Project — Pairing Font Families
• Project — Headings, Body and Labels
• Project — Typeface System
• Figma Check In — Text Styles

‍

Color

• Color Schemes
• Creating Color Palettes
• Figma Check In — Paints
• Exercise — Expanding Upon a Strict Color Palette
• Exercise — Creating a Color Palette
• Figma Check In — Color Styles
• Exercise — Using Color Styles
• Project — Primary and Neutrals

UX

• UX Principles
• 10 Usability Heuristics
• Information Foraging
• Information Scent
• Stakeholder Map
• Empathy Map
• What is an Empathy ?
• Customer Journey Map
• Touchpoints
• Pre - Purchase touchpoints
• Purchase touchpoints
• Post Purchase
• Experience Design for All Touch Points of a Brand
• Creating Personas for User Experience Research
• Affinity Map
• What are the Five Whys?
• Service Blueprint
• UX Research
• Market Research and UX Research
• Diary Study
• Cultural Probes
• Analogous Inspiration and UX Design
• Ethnography
• Card Sorting
• Tree Testing
• Contextual Study
• UX Sitemap
• Information Architecture
• Principles of Information Architecture
• User Flow
• Wireframing
• Prototyping
• How Senior Designers Wireframe
• UX Writing
• Atomic Design
• Gamification
• Summative vs Formative Usability Evaluation
• Difference Between Usability and Accessibility
• Usability Testing vs Accessibility Testing
• Heuristic Evaluation
• UX Testing
• First Click Testing
• Hallway Usability Testing
• Summative vs Formative Usability Evaluation(repeat)
• What is A/B Testing in Design & User Experience Research?
• UX Audit
• Clickstream Analysis

‍

‍ENTERPRISE UX

‍

INTRODUCTION

• What is enterprise UX?
• Why enterprise UX?
• When is enterprise UX used?

‍

RESEARCH

• Primary research
• Secondary research
• Problem solving

‍

LOW FIDELITY

• Designing low fidelity in Google sheets
• Turn low fidelity into a working model

‍

HIGH FIDELITY

• Converting low fidelity to high fidelity using XD

‍

INTERACTIONS & PROTOTYPING

• Drop downs and Components

‍

INTERACTION DESIGN

• Introducing Protopie
• Importing your graphics into protopie
• Importing your graphics into protopie
• Creating interactions
• Scrolling and paging
• Navigation 
• Motion design
• Conditions and Variables
• Using hardware features
• Introducing Formulas
• Introducing Components

‍

INTERACTION DESIGN

• Introducing Protopie
• Importing your graphics into protopie
• Importing your graphics into protopie
• Creating interactions
• Scrolling and paging
• Navigation 
• Motion design
• Conditions and Variables
• Using hardware features
• Introducing Formulas
• Introducing Components

‍

‍