Skip to main content
EULE InstituteEULE Institute

EULE Institute

UI & Visual Design Course – Updated Edition

A course to help you use and understand all the techniques and methodologies to become a UI & Visual Designer in the field of User Experience.

12 modules102 lessons3h 18min of video10 free previews€647.00

Curriculum

  1. 1. Visual Design Course1 lesson
  2. 2. Visual Design4 lessons · 8min
  3. 3. Visual Hierarchy9 lessons
    • Hierarchy in Design
    • Gestalt Principles in Design
    • Scanning Pattern
    • F Pattern vs Z Pattern
    • Apply the Golden Ratio
    • Practice (Optional): How to Draw the Golden Ratio
    • Practice: Visual Hierarchy
    • Reflections on Visual Hierarchy / To be deleted
    • How to organize content / to be removed
  4. 4. Design for Accessibility12 lessons
    • Accessibility: Designing accessible websites and apps
    • Accessibility: Color and Contrast
    • Accessibility: Text and Typography
    • Accessibility: Images and Visual Content
    • Accessibility: Focus Indicator
    • Accessibility: Touch Target & Hit Area
    • Accessibility: Consistent Visual States
    • Accessibility: Cognitive Accessibility
    • Contrast for Accessibility
    • Focus Indicator: A Crucial Element for Accessibility
    • Image Accessibility
    • Support keyboard navigation
  5. 5. UI Fundamentals33 lessons
    • Basic Principles of UI DesignPreview
    • Principles: Typography 1
    • Principles: Typography 2
    • Principles: Typography 3
    • Principles: Typography 4
    • Tips & Tricks: Typographic Scales
    • Tips & Tricks: How to Improve Text Readability
    • Tips & Tricks: Uppercase
    • Principles: Color 1
    • Principles: Color 2
    • Tips & tricks: 60-30-10 the color rule
    • Tips & tricks: Gradients
    • Principles: Balancing
    • Principles: Alignment
    • Principles: Whitespace
    • Principles: Proximity
    • Principles: Symmetries in UX&UI
    • Principles: Patterns
    • Interfaces: Elements
    • Interfaces: Grids and Layouts
    • Interfaces: Icon
    • Interfaces: Buttons
    • Tips & Tricks: Thumb zone
    • Tips & Tricks: Touch Target
    • Tips & Tricks: Links or Buttons
    • Interfaces: Forms
    • Interfaces: Dropdowns
    • Tips & Tricks: Input Fields
    • Interfaces: Navigation
    • Interfaces: Search
    • Interfaces: Modals
    • Interfaces: Hero Sections
    • Interfaces: Cards
  6. 6. Designing Wireframes10 lessons · 34min
    • Overview of Wireframes
    • Wireframe: low and high fidelity
    • Introduction to Responsive Design
    • Mobile-First Approach
    • Leverage grids in layoutPreview
    • 8px Grid DesignPreview
    • Bootstrap Grids
    • Practice (optional): Paper and pencil wireframe
    • Wireframing Kit
    • Practice: High-Fidelity Wireframe
  7. 7. Style Guide and Moodboard9 lessons · 16min
    • Introduction to the style guide
    • Moodboard: definition and usePreview
    • Moodboard: What are they?
    • Practice: Create a moodboard
    • Style Tiles vs Moodboards
    • Style Tiles vs Style Guide
    • Practice: Create a style guide
    • Types of moodboards
    • Style tiles: key visual elements
  8. 8. Practical Prototyping Session1 lesson
    • Practice: Add Colors and Typography to the Wireframe
  9. 9. The UI Kit6 lessons · 7min
    • Design States: how to manage them
    • Guidelines for Naming ElementsPreview
    • Create an effective UI Kit
    • Practice: UI Kit
    • Introduction to Design System
    • Design tokens: the bridge between design system and code
  10. 10. Design and Collaboration5 lessons
    • Collaborate with other designers
    • How to create documentation for developers
    • Export and create assets
    • The professional handoff: what to deliver to developers
    • Practice (Optional): Prepare the handoff of a screen
  11. 11. UI Animations9 lessons · 1h 56min
    • The Importance of Animations in UX
    • Types of Animations to Improve User Experience
    • Framer: create your first animationPreview
    • Framer: second animation (medium difficulty)
    • Framer: 3 advanced animations
    • Principle: create your first animation
    • Principle: create the second animation
    • Principle: 2 advanced animations
    • Figma: Animation using GIFs
  12. 12. Create Your Portfolio3 lessons · 15min

About the instructor

EULE Institute

Online courses by EULE Institute