UI/UX DESIGN COURSE

UI/UX DESIGN COURSE

UI/UX Design Course

Comprehensive UI/UX Design with Prototyping and Front-End Basics

Course Description: This intensive course provides a comprehensive introduction to UI/UX design principles and practices. Students will gain hands-on experience with industry-standard design tools like Figma, and Adobe XD, and learn the fundamentals of front-end web development using HTML, CSS, JavaScript, and Bootstrap. The course focuses on the complete design lifecycle, from user research and wireframing to high-fidelity prototyping and basic web implementation.

Prerequisites: Basic computer literacy. No prior design or coding experience is required.

Course Objectives: Upon successful completion of this course, students will be able to:

  • Understand core UI/UX design principles and methodologies.
  • Conduct user research and create user personas.
  • Develop information architecture, sitemaps, and user flows.
  • Create wireframes and low-fidelity prototypes.
  • Design high-fidelity mockups and interactive prototypes using Figma, and Adobe XD
  • Understand the fundamentals of HTML structure.
  • Style web pages using CSS.
  • Add basic interactivity to web pages using JavaScript.
  • Utilize Bootstrap to build responsive layouts.
  • Collaborate effectively in a design environment.
  • Prepare and present design solutions.

Course Outline:

The course is divided into 6 main modules.

Module 1: Introduction to UI/UX Design (Days 1-3)

  • Focus: Core concepts of User Experience (UX) and User Interface (UI) design. Understanding the UX design process, user-centered design, user needs, and pain points. Principles of good UI design, including visual hierarchy, consistency, and elements like color, typography, and layout. Introduction to user research methods, target audiences, creating user personas, and empathy mapping.
  • Activities: Analyzing existing products, critiquing UI designs, developing user personas.

Module 2: Figma (Days 4-11)

  • Figma Fundamentals & Design Basics: Introduction to the Figma interface, core features (frames, shapes, layers, groups). Working with text, colors, images, alignment, and distribution tools. Introduction to components, variants, Auto Layout, and constraints.
    • Activities: Recreating UI elements, designing simple mobile app screens, building UI components.
  • Prototyping, Collaboration & Handoff in Figma: Creating basic and advanced interactions, linking frames, understanding triggers, actions, overlays, and Smart Animate. Real-time collaboration, commenting, version history, and preparing designs for developer handoff (specs, assets).
    • Activities: Prototyping multi-screen app flows, adding advanced interactions, simulating team collaboration and design handoff.
  • Figma Project: Applying learned Figma skills to a design project. Developing wireframes, progressing to high-fidelity mockups, and creating an interactive prototype.
    • Activities: Working on and presenting a comprehensive Figma project.

Module 3: Adobe XD (Days 12-17)

  • Adobe XD Introduction & Design Features: Overview of the Adobe XD interface, artboards, basic tools, assets panel. Utilizing Repeat Grids, components and states, working with images, masks, and Responsive Resize.
    • Activities: Exploring XD interface, recreating UI elements, designing responsive landing page sections.
  •  Prototyping & Advanced Features in Adobe XD: Prototyping mode, creating interactions and animations (Time, Tap, Drag, Voice triggers), Auto-Animate. Working with Stacks, Padding, coediting, cloud documents, exploring plugins, and Design Specs for handoff.
    • Activities: Building interactive mobile app prototypes, exploring plugins, preparing designs for handoff.
  • Adobe XD Project: Undertaking a project to design a feature or new concept using Adobe XD, from wireframing and information architecture to high-fidelity design and prototyping.
    • Activities: Working on and presenting an Adobe XD project.

Module 4: HTML (HyperText Markup Language) (Days 18-21)

  • HTML Fundamentals, Structure & Forms: Introduction to web development concepts and HTML syntax. Basic document structure, common tags (headings, paragraphs, links, images). Semantic HTML5 elements, lists, tables. Creating forms and various input elements.
    • Activities: Creating simple webpages, structuring content semantically, building forms.
  • HTML Media, Embedding & Best Practices: Embedding images, audio, and video. Using iframes. Accessibility considerations. Organizing HTML, code commenting, validation, and project setup.
    • Activities: Creating webpages with multimedia, reviewing best practices, planning a static website structure.

Module 5: CSS (Cascading Style Sheets) (Days 22-24)

  • CSS Introduction, Box Model & Selectors: CSS purpose, syntax, linking to HTML. Selectors (Type, Class, ID). Basic CSS properties. Understanding the Box Model (padding, border, margin), width, height, and display properties. Positioning. Advanced selectors, pseudo-classes, pseudo-elements, and typography styling.
    • Activities: Styling HTML pages, experimenting with box model and layout, styling navigation and text.
  • CSS Flexbox & Grid: Mastering 1D layout with Flexbox (container and item properties). Introduction to 2D layout with CSS Grid (container properties, placing items).
    • Activities: Building responsive navigation and card layouts with Flexbox, creating complex page layouts with CSS Grid.
  • Responsive Design & Advanced CSS: Concept of Responsive Web Design (RWD), viewport meta tag, Media Queries. Mobile-first vs. Desktop-first. CSS Transitions, basic Animations. CSS organization (BEM overview) and introduction to preprocessors (conceptual).
    • Activities: Making layouts responsive, adding simple transitions/animations, reviewing CSS best practices.

Module 6: JavaScript & Bootstrap (Days 25-29)

  • JavaScript Fundamentals & DOM Manipulation: Introduction to JavaScript, basic syntax, variables, data types, operators. DOM manipulation: selecting and modifying HTML elements, and event handling. Writing functions and using control flow (conditionals, loops).
    • Activities: Writing basic JavaScript, interacting with the browser console, creating simple interactive elements, writing functions.
  • Bootstrap Framework: Introduction to Bootstrap, setup, grid system for responsive layouts. Overview and usage of common Bootstrap components (Navbar, Buttons, Cards, Forms). Customizing Bootstrap and using its JavaScript components.
    • Activities: Rebuilding layouts with Bootstrap grid, building responsive webpages with Bootstrap components.
  • Mini Project: Integrating Design & Front-End: Applying knowledge from design tools (Figma/XD) and front-end technologies (HTML, CSS, JS, Bootstrap) to implement a static version of a simple UI design.
    • Activity: Work on the integrated mini-project.

Day 30: Final Project Presentations & Course Wrap-up

  • Focus: Students present their mini-projects or a chosen portfolio piece. Peer and instructor feedback. Review of key course concepts. Discussion on next steps for continued learning and Q&A.
  • Activity: Final project showcase and course review.

Total Fees : 120,000/=
Total Duration : 60 Hrs (2 Hours X 30 Days, Individual training, Your own timetable)

Live Online Classes  or Face to Face Direct Classes with our expert trainers.
Call +94 (0) 722000999 / +94 (0) 755123111 www.iss.lk. Medium : සිංහල / தமிழ் / English