UI UX Design Course Syllabus

Creating user interfaces (UI) and their interactions is called UX design. UI UX designers want to make software and websites more straightforward by designing intuitive and usable designs.

Today, a company’s marketing strategy must include UX design. According to Forrester Research, companies spend more than $1 trillion annually on customer interactions. This suggests they want to guarantee their customers a positive experience working with them.

To create a seamless user experience, UX designers frequently collaborate with professionals from various fields, including graphic designers, interaction designers, information architects, developers, etc. Additionally, they collaborate closely with stakeholders to collect client needs and convert them into functional specifications.

Graphics Design Fundamentals

The “Graphics Design Fundamentals” module explores the essence of design, distinguishing between 2D and 3D design. You’ll delve into visual design elements like contrast, colour, balance, hierarchy, alignment, proportion, typography, and rhythm principles. Topics include visual hierarchy, dominance, and colour schemes, focusing on techniques like symmetrical and asymmetrical balance, perspective, and framing. At FITA Academy, the UI UX Design Course syllabus is thoroughly covered.

• What is Design?
• What is the difference between 2D and 3D Design?
• Visual design elements and principles
• Contrast
• Color
• Balance
• Hierarchy
• Alignment
• Shape
• Texture
• Proportion
• Typography
• Rhythm
• Pattern
• Visual hierarchy
• Similarity
• Dominance
• Color scheme
• Framing
• Asymmetrical balance
• Symmetrical balance
• Perspective

Photoshop 

In this module, you’ll learn to create an Adobe account, explore various account types, understand workspace navigation, start new projects, and master essential tools like Focus Area and Smudge Tool, enhancing your design skills.

• Creating account in Adobe
• Various types of accounts
• Benefits of Accounts in Adobe
• Getting familiar with Workspace
• Creating a New Project
• Getting familiar with all the important Navigations
• Understanding Focus area, Smudge Tool, etc

Layers 

In this module, you’ll learn the Introduction to Layers, how to work with layers efficiently and explore various Layer Styles to enhance your design.

• Introduction to Layers
• Working with Layers
• Layers Styles

Text, Colors & Images

You’ll master essential skills, including adding and editing text, understanding color models (RGB vs CMYK), and manipulating colors and gradients. You’ll also learn to enhance images, correct color and tone, fix blurriness, and apply watermarks, ensuring professional-quality visuals.

• 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

In the module, you’ll dive into working with diverse shapes in Photoshop, experimenting with their creation and manipulation. You’ll also learn to create and apply various filters, enhancing your design projects with creative effects. This module equips you with essential skills for impactful visual design.

• Working with various shapes in Photoshop
• Creating and playing with various shapes in Photoshop
• Creating & Applying various filters

Retouching & Shadows 

This section covers essential techniques for refining visuals, including the importance of retouching, using the Patch tool, and removing unwanted elements. You’ll master retouching eyes and skin, adding realistic shadows, and applying effects in Photoshop while exploring Artboards, Brushes, and exporting images for various media.

• 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

In this module, you’ll delve into the UI UX Design Syllabus, covering the Fundamentals of UX and UI Design, distinguishing Good from Poor Design, and the key differences between UX and UI design. You’ll also learn about the evolution and importance of UX/UI, elements of good design, and relevant job roles.

• 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

In the UI UX Syllabus module, you’ll delve into Usability Heuristics and Guidelines, Design Consistency, Heuristic Principles, Gestalt Principles, and Cognitive Bias. This comprehensive exploration ensures a solid foundation in crafting intuitive and compelling user experiences at FITA Academy.

• Usability Heuristics and Guidelines
• Design Consistency
• Heuristic Principle
• Gestalt Principle
• Cognitive Bias

User Experience (UX) Design

In our UI UX Course Syllabus, you will explore essential frameworks such as Design Frameworks and types of frameworks and gain insights into the Double Diamond and Lean UX methodologies.

• Frameworks
• Design Frameworks
• Types of Frameworks
• Double Diamond overview
• Lean UX overview

Agile Methodology 

The Agile Methodology module in the UI UX Designer Course Syllabus at FITA Academy covers essential concepts like Sprints, Owners, Scrum, Solving Problems, Learning Loops, Iterations, and Retrospectives. Learn how to efficiently manage and deliver UI UX projects using agile practices for continuous improvement and adaptability.

• Sprint
• Owners
• Scrum
• Solving Problem
• Learning Loop
• Iterations
• Retrospections

Design thinking 

In this lesson, you will learn about the linear process using design thinking in a structured, systematic way and the non-linear process using iterative, non-sequential methods. To improve your design problem-solving abilities, FITA Academy provides the UI UX Designer Syllabus with valuable insights into these strategies.

• Design Thinking – Linear Process
• Design Thinking – Nonlinear Process

Researching the Project

In the module of the Syllabus of UI UX Design, FITA Academy offers comprehensive insights into understanding empathy, user research methods, field studies, interviews, surveys, and stakeholder interviews. The module covers the 5 Whys concept and focus groups and provides a holistic view of research techniques.

• 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 

With our UI UX Syllabus, you’ll master essential skills such as analysing research data, understanding user personas, and conducting competitor analysis. These techniques are essential for creating user-centred designs and improving your project’s effectiveness.

• Analysing Research Data
• Understanding User Persona
• Competitor Analysis

Defining the Project 

This section of the UI UX Design Course Syllabus will teach you how to create user personas, affinity maps, and experience maps, among other crucial skills. Hold productive brainstorming sessions to produce creative ideas that will serve as a solid basis for user-centred design.

• Creating Affinity Mapping
• Creating User Personas
• Creating Experience Maps
• Brainstorming Ideas

User Flows & Information Architecture

The UI UX Design Syllabus module covers fundamental concepts such as Card Sorting, User Flow, Task Flow, and its variations; it also covers imagination, observation, analysis, heuristic evaluation, and the development of solid 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
• Creating Affinity Mapping
• Creating User Personas
• Creating Experience Maps
• Brainstorming Ideas

Usability Testing and Evaluation

This module of the UI UX Design Course Syllabus will teach you how to efficiently refine user experience by creating wireframes and low-fidelity designs, identifying pain areas, gathering feedback, validating design decisions, and conducting A/B testing. Mastering this module helps answer UI UX Designer Interview Questions and Answers, especially those regarding wireframing, feedback, and A/B testing.

• Wireframing and low-fidelity
• Pain Points
• Gather feedback
• ValWhidate design decisions
• A/B testing

Wireframing and low-fidelity

The prototyping concepts module in the UI UX Design Syllabus addresses the differences between low-fidelity and high-fidelity prototypes and interactive wireframes for user testing and feedback.

• Prototyping Concepts and Tools
• Low-Fidelity vs. High-Fidelity Prototypes
• Interactive Wireframes and Mockups
• Using Prototypes for User Testing and Feedback

Tools Used

This portion of the UI UX Course Syllabus will teach you to use fundamental tools such as FigJam for brainstorming, Figma for design, Invision for prototyping, Draw.IO for diagramming, and MS Word or Google Docs for documentation. These tools are essential for efficient project management and UI UX design.

• MS Word or Google Docs
• FigJam
• Figma
• Invision
• Draw.IO

UI Design – Figma

In this module, you’ll learn how to start with Figma, use the Frame vs. Slice Tool, draw vector shapes with the Pen Tool, create and manage Figma Components, apply Figma Constraints, understand grid systems, and add effects to enhance your UI designs.

• Getting started
• Frame Vs Slice Tool
• Draw Vector Shapes & Pen Tool
• Figma Components
• Figma Constraints
• Understanding Grid System
• Effects

Color, Icons & Typography

You will learn how to create high-fidelity wireframes and become familiar with Figma’s tools for type, fonts, shapes, and colors in the “Color, Icons & Typography” module. Learning to employ frames, groups, and tools like Scale vs. Selection to ensure unified and aesthetically pleasing designs. You can also find plugins and resources for free icons.

• 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

In this UI UX Design Syllabus subject, you will learn Material Design, design for multiple platforms, and build your first mobile app and website. Along with understanding Human-Centered Design (HCD) and using Figma Mirror to facilitate a smooth design process, you’ll also learn how to convert low-fidelity wireframes into high-fidelity ones.

• 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

This session will teach you how to create website and mobile app prototypes using Figma. Using Figma Mirror, you will learn how to test your prototypes on your phone, create interactive animations, and apply softening techniques. You improve your design talents through this practical experience, which adds dynamic quality to your work.

• 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 Mirror

Portfolio

The UI UX Design Syllabus module teaches you how to make an account on Dribbble, Medium, and Behance, build a professional portfolio, organise and put together case studies, and post them on Behance and Medium. This module ensures prospective employers or clients can compellingly see your work.

• Create an account in Behance, Dribble, Medium
• Creating a Portfolio
• Case Study Structure
• Case Study compilation
• Publishing case study on Medium
• Publishing case study on Behance

Tools

In this session, you’ll gain hands-on experience with essential design tools like Photoshop and Figma. You’ll learn to create stunning visuals, design user interfaces, and craft user experiences that are both functional and visually appealing. Master these tools to bring your design ideas to life. Master these tools to bring your design ideas to life and boost your career prospects, with insights into UI/UX Developer Salary For Freshers to help you understand the value of your newly acquired skills in the job market.

Introduction to Web pages and Websites

This module will teach you the fundamentals of HTML, how to generate and view HTML documents, how to use various web browsers, what a webpage and a website are, and how to understand different UI elements and responsive layouts. This thorough UI/UX Syllabus is available from FITA Academy.

• 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 

In this session, you will learn the foundations of HTML, including tags, editors, and building essential documents. Get familiar with managing pictures and tables, adding attributes, and styling text. Learn color, alignment, and picture formatting while experimenting with HTML layouts and forms. These fundamental HTML skills are covered in-depth training provided by FITA Academy.

• 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
• Working with HTML Forms

Introduction HTML 5

This module covers HTML vs. HTML 5 and new elements and features like Canvas, SVG, new form elements, and managing graphics, audio, and video. FITA Academy provides thorough explanations of these critical HTML 5 subjects.

• HTML Vs HTML 5
• New Elements in HTML 5
• Canvas
• Handling SVG
• New Form Elements in HTML 5
• Handling Audio & Video
• Handling Graphics
• Handling Events

Introducing CSS and CSS 3

You will learn about style sheets in the FITA Academy session, including cascading effects and kinds like inline and external CSS. Discover CSS selectors, layout methods, fixed, relative, and absolute positioning, advanced CSS transformations, and media query-based responsive layouts.

• What is a Style Sheet
• Cascading Effect of a Style Sheet
• Inline and External CSS
• CSS Selectors – IDs and Classes
• Understanding Layouts
• Absolute, Relative and Fixed Positioning
• Advanced CSS
• Transformations
• Responsive Layouts and Media Queries

Java Script 

In the Syllabus of UI UX Design at FITA Academy, you’ll dive into JavaScript essentials, including its structure, variables, control structures, and DOM manipulation. Learn to handle events, animate UI elements, and grasp object-oriented concepts. This module covers everything from arrays to AJAX, ensuring a comprehensive JavaScript foundation.

• Introduction to JavaScript
• Necessity for JavaScript
• JavaScript Structure and Elements
• Variables, Data types & Operators
• Understanding Block level and Global scope
• Using Arrays
• Mastering Functions
• Control Structures
• Loops in JavaScript
• Understanding Iterator
• Understanding the Document Object Model (DOM)
• Handling DOM using JavaScript
• JavaScript Events and Event Handling
• JavaScript Forms
• Animating UI Elements
• Object Oriented concepts in JavaScript
• Classes and Objects
• Minimising Redundancy using Inheritance
• Browser Compatibility
• JavaScript Cookies and AJAX