Build a solid grasp of design principles, colour theory, balance, and typography essential for the UI UX Course in Chennai.
Learn key UX principles, including usability heuristics and cognitive biases, to create effective user-centred designs.
Discover Design Thinking tools, including empathy mapping and user studies, to a broader approach to design.
Learn how to successfully decompose data gathered through research, design user personas and experience, also affinity maps for better design decisions.
Learn how to successfully decompose data gathered through research, design user personas and experience, also affinity maps for better design decisions.
UI/UX course Syllabus
Graphics Design Fundamentals
What is Design ?
Difference between 2D and 3D Design?
Visual design elements and principles
Contrast
Contrast
Balance
Hierarchy
Alignment
Shape
Texture
Proportion
Typography
Rhythm
Pattern
Visual hierarchy
Similarity
Dominance
Color scheme
Framing
Asymmetrical balance
Symmetrical balance
Perspective
PhotoShop
Creating account in Adobe
Various types of accou
Benefits of Accounts in Adob
Getting familiar with Workspace
Creating a New project
Getting familiar with all the important Navigations
Understanding Focus area, Smudge Tool etc
Layers
Introduction to Layers
Working with Layers
Layers Styles
Text, Colors & Images
Adding Text
Playing with features in Text
Colors RGB vs CMYK
Adding colors
Changing colors
Enhancing colors
Changing Gradient
Adjusting images without Distortion
Fixing Blurry Images
Color and Tone Correction of Images
Adding Watermark / Logo
Changing an image to black & white
Other Important Image Enhancement techniques
Shapes & Filters
Working with various shapes in Photoshops
Creating and playing with various shapes in Photoshop
Creating & Applying various filters
Retouching & Shadows
Importance of Retouching
How to use Patch tool for Retouching
Removing unwanted things from background
Retouching Eyes & Skin
Adding Realistic Shadows
Adding Effects in Photoshop
Using Artboards in Photoshop
Using Brushes in Photoshop
Exporting the images for Print,
Web & Social Media
Introduction to UX Design
Fundamentals of UX & UI Design
Good and Poor Design
Difference between UX vs UI design
Evolution and Importance of UX/UI
Elements of Good UX/UI Design
job roles
UX Design Principles
Usability Heuristics and Guidelines
Design Consistency
Heuristic Principle
Gestalt Principle
Cognitive Bias
User Experience (UX) Design
Frameworks
Design Frameworks
Types of Frameworks
Double Diamond overview
Lean UX overview
Agile Methodology
Sprint
Owners
Scrum
Solving Problem
Learning Loop
Iterations
Retrospections
Design Thinking
Design Thinking - Linear Process
Design Thinking - Nonlinear Process
Researching the Project
Understanding Empathy
Methods and Techniques for Empathy
Conducting User Research
Conducting Field Study
Conducting User interview
Conducting User survey
Stakeholder interview
5 why concept
Focus group
Holistic View
Analysing the Project
Analysing Research Data
Understanding User Persona
Competitor Analysis
Defining the Project
Creating Affinity Mapping
Creating User Personas
Creating Experience Maps
Brainstorming Ideas
User Flows & Information Architecture
Card Shorting
Understanding User Flow
Understanding Task flow
Difference between User and task flow
Ideating
Observing and Analyzing
Heuristic evaluation
Creating Information Architecture
Usability Testing and Evaluation
Wireframing and low-fidelity
Pain Points
Gather feedback
ValWhidate design decisions
A/B testing
Wireframing and low-fidelity
Prototyping Concepts and Toolsdback
Low-Fidelity vs. High-Fidelity Prototype
Interactive Wireframes and Mockup
Using Prototypes for User Testing and Feedback
Tools Used
MS Word or Google Docs
FigJam
Figma
Invision
Draw.IO
UI Design - Figma
Getting started
Frame Vs Slice Tool
Draw Vector Shapes & Pen Tool
Figma Components
Figma Constraints
Understanding Grid System
Effects
Color, Icons & Typography
High fidelity wireframes
The basics of type & fonts in Figma
Rectangles Circles Buttons Rounded corners in Figma
How to use color in Figma
Strokes plus updating color defaults in Figma
Object editing and how to escape in Figma
Scale vs Selection Tool in Figma
Frames vs Groups in Figma
Where to get Free icons for Figma
Matching the stroke of our icons
Plugins in Figma for icons
High Fidelity Wireframes
Understanding Material design
Design across various platforms
Create the First website
Create the First Mobile app
Understanding Material design
Create a complete app from wireframe LF to HF
Understanding HCD
Figma Mirror
Prototype
Design a Prototype for your website and mobile App
How to prototype in Figma
Prototype animation and easing in Figma
Testing on your phone with Figma Mirro
Portfolio
Create an account in Behance, Dribble, Mediume
Creating a Portfolio
Case Study Structure
Case Study compilation
Publishing case study on Medium
Publishing case study on Behance
Tools
Photoshop
Figma
Introduction to Web pages and Websites
Introduction to HTML
Creating a simple HTML Document
Viewing HTML Document with Browsers
Introduction to different Web Browsers – IE, Chrome,
Mozilla, Safari, UC Browser
Webpage Vs Website
Various User Interface Elements and Layouts
Understanding Responsive websites
Working with HTML
Elements of a HTML Document
Understanding HTML Tags
HTML Editors
Creating a Simple HTML Document
Adding Attributes to Tags
Handling Texts in HTML
HTML Styles
Controlling Fonts and Size
Alignment
Applying Colors
Foreground and background colors
Adding and Formatting an Image
Handling Size of an Image
Aligning Images
Adding Animated Images
Background Images
Working with HTML Tables
Handling Images
Understanding the HTML Layouts and its limitations