UI/UX Professional Designer Bundle

Course Outline

• Become a Professional Graphic Designer
  • Introduction to Graphic Design
  • Hello And Welcome
  • What Is Graphic Design?
  • Can Only Skilled Artists Be Good Graphic Designers?
  • Areas Of Graphic Design To Explore
  • Visual Communication Fundamentals
  • What Makes A Design Visually Pleasing
  • Organizing Information In Your Layouts
  • Using Alignment To Your Advantage
  • Setting The Design's Rhythm
  • Letting A Design Breathe With Whitespace
  • Creating Visual Interest With Contrast
  • Designs That Work And Don't Work
  • Building Successful Layouts
  • Determining The Design's Message
  • The Terminology Of Type
  • Typeface Styles & Resources
  • Choosing A Typeface Hierarchy
  • Understanding Colour's Psychological Impact
  • Building Your Design's Colour Palette
  • Understanding Colour Spaces
  • Sourcing Imagery For Your Layouts
  • Raster vs Vector Graphics
  • The Tools To Put It All Together
  • An Overview Of The Tools Of The Trade
  • Alternatives To Standard Industry Tools
  • Web Design Tools & Software
  • HTML & CSS: Is It Really Rocket Science?
  • Starting A Career As a Graphic Designer
  • Getting A Job As A Graphic Designer vs Going Freelance
  • Getting Started And How To Land Work
  • Joining The Design Community
  • Finding Continued Inspiration
  • Becoming a Graphic Designer | Conclusion
  • Wrapping Up
• Introduction to Web Design
  • Module 1 - Introduction to the Course
  • Introduction to the Course (2:33)
  • Module 2 - Basics of Web Design
  • What is CSS and HTML? (8:12)
  • Your First HTML File (7:03)
  • Introduction to Document Layout (6:52)
  • Linking In A Stylesheet (7:39)
  • Styling Your First Element (16:15)
  • Module 3 - Web Design Fundamentals
  • The Box Model (14:20)
  • Introduction to Developer Tools (14:22)
  • Understanding Display Types (9:58)
  • Project: Create a CSS Button (21:15)
  • Using CSS Selectors (23:09)
  • Using Floats (15:20)
  • Styling Links (4:49)
  • Using Clearfix (5:40)
  • Working With Images (14:50)
  • Validating HTML and CSS (8:55)
  • Module 4 - Webfonts
  • Understanding Webfonts (16:42)
  • Webfonts, Google Fonts and API (7:49)
  • Cascading Style Sheets
  • Understanding Cascading Style Sheets (7:46)
  • Vendor Prefixes (9:56)
  • Project: Create a Color Changing Profile Image (13:00)
  • Module 5 - Introduction to Grid Structures
  • Basic Website Layout (12:58)
  • Choosing a Grid Framework (9:10)
  • Grids and Responsive Design (23:16)
  • Module 6 - Forms and Icons
  • Working with Forms (27:59)
  • Using Font Icons (13:56)
  • Understanding Sprite Sheets (19:11)
  • Module 7 - Project: Create a Comment List
  • Project: Create a Comment List (15:00)
  • Module 8 - Positioning and Resources
  • Positioning (18:52)
  • CSS Resources (5:36)
  • Module 9 - Final Project: Design a Real Website
  • Project Introduction (4:58)
  • Adding Our Graphics (8:32)
  • Building Our Site (43:27)
  • Validating Our Site (3:55)
• Develop Responsive Websites with Bootstrap 3
  • Module 1 - Introduction to the Course
  • Introduction to Bootstrap 3 (7:09)
  • Getting Started with Bootstrap 3 (6:39)
  • The Big Picture (14:51)
  • Module 2 - Create a Marketing Website with Bootstrap 3
  • Overview of the Website (6:25)
  • The Home Page (9:25)
  • The Home Page Part 2 (12:03)
  • Debugging (7:00)
  • The Products Page (19:00)
  • The Details Page (12:38)
  • Customizations (16:38)
  • Responsive Design (12:35)
  • Production Notes (4:29)
  • Module 3 - Developing Web Apps with Bootstrap 3
  • Web App UI Overview (2:51)
  • Web App Navs (9:04)
  • Web App Details (11:43)
  • Module 4 - Theme Customization
  • Customization and Advanced Topics (2:45)
  • Creating a Custom Theme (19:57)
  • Dynamic Bootstrap Part 1 (19:26)
  • Dynamic Bootstrap Part 2 (12:49)
  • Module 5 - Conclusion
  • Review and Closing (4:34)
• Website Wireframing with HTML5 & CSS3
  • Module 1 - Introduction
  • Welcome! Understanding Layout Wireframing (4:02)
  • Why Using Photoshop May Not Be The Best Choice (3:07)
  • Using HTML & CSS For Fast Wireframe Compositing (2:53)
  • A Look At What We'll Build In This Course (1:23)
  • Bonus Lesson_How To Turn Any Web Page Into A Wireframe (1:24)
  • Module 2 - Getting Started
  • Setting Up The Rough Page Structure (4:45)
  • Building The Structural CSS Rules, Part 1 (7:43)
  • Building The Structural CSS Rules, Part 2 (2:52)
  • Connecting Up The HTML To The CSS (5:20)
  • Centering Layout Elements (5:36)
  • Setting Up Inner Layout Containers (7:19)
  • Inserting Additional Inner Containers (3:35)
  • Spacing Apart The Layout (9:15)
  • Module 3 - Wireframing The Header in Greater Detail
  • First Thing's First_Getting Organized (4:37)
  • Building The Logo Container (3:55)
  • Setting Up The Main Navigation Menu (5:53)
  • Creating A Call-To-Action Button (5:59)
  • Module 4 - Building the Rest of the Layout
  • Inserting The Hero Image (4:41)
  • Getting Started With The Hero Content (4:02)
  • Finishing Up The Hero Section (5:36)
  • Inserting The Feature Headers (3:34)
  • Building The Feature Boxes (5:58)
  • Wireframing The Organize Section (5:41)
  • Speeding Things Up For The Share Section (4:26)
  • Finishing Up The Wireframing (6:23)
  • Module 5 - Finishing Touches
  • Inserting A Placeholder Image (3:48)
  • Adding A Logo Placeholder With Text (3:50)
  • Inserting The Remaining Image Placeholders (3:23)
  • Inserting A Background Placeholder (5:09)
  • Adding Subtle Interactivity (6:01)
  • Adding Button Interactivity (11:42)
  • Finishing Touches (4:57)
  • Sharing The Wireframe For Review (6:04)
  • Module 6 - Wrapping Up
  • Where To Go From Here (0:20)
• Build a Responsive Website with a Modern Flat Design
  • Introduction and What You Will Learn
  • Introduction and What You Will Learn (6:48)
  • Working with the Design Elements
  • Looking at the Design (10:20)
  • Foundation Front-End Framework (13:55)
  • Headers (3:21)
  • Custom Stylsheets (4:00)
  • Containers (5:46)
  • Logo and Navigation (15:41)
  • Buttons (4:04)
  • Completing Our Website
  • Top Feature Section (12:21)
  • Features Section (13:23)
  • Recent Works Section (19:52)
  • Fancy Lists (10:06)
  • Secondary Buttons and Finishing Up (4:12)
• Building Responsive Websites with HTML 5 & CSS3
  • Introduction
  • Welcome (0:48)
  • A Look At What We'll Build (1:35)
  • Responsive Design Fundamentals
  • Key Aspects Of Responsive Design (2:43)
  • Determining Device Resolutions To Target (4:20)
  • Wireframing Responsive Layouts (4:58)
  • The Basics: Multiple Style Sheets & Media Queries
  • The Concept Of Using Multiple CSS Files (10:49)
  • Media Queries & Multiple Style Sheets (8:57)
  • Building Media Queries Into A Single CSS File (7:38)
  • Using Media Query Expressions (5:04)
• CSS Flexbox : Build Modern Web Layouts With Flexbox
  • Introduction to the course
  • Course Introduction (2:24)
  • Introduction To CSS Flexbox
  • Section Introduction (0:27)
  • Understanding Flexbox Improved Web Layouts (7:37)
  • Flexbox Terminology (5:02)
  • Current Browser Support For Flexbox (9:20)
  • Tools We'll Need (2:18)
  • Section Summary (0:32)
  • Quiz 1
  • Getting Started With Flexbox
  • Section Introduction (0:29)
  • Creating Our First Flex Container (10:21)
  • Understanding Flexbox Flow Axis Directions (3:41)
  • Setting Flow Directions (5:28)
  • Understanding Flex Widths (11:37)
  • Controlling How Child Flex Items Wrap (7:16)
  • Shorthand For Faster Coding (4:13)
  • Section Summary (0:31)
  • Quiz 2
• Mobile UI and UX Design
  • What is UX Design?
  • Introduction to the Course
  • What Is UI UX Design
  • The User-Centered Design Philosophy
  • Example of Strong UX UI Design
  • Exercise - Testing an App for UI UX Quality
  • Working with New Experiences for Users
  • Practice Exercise
  • Mobile UX Design Trends
  • Mobile UX Design Trends
  • Performance-Centric Design
  • Live Updating and Cloud Collaboration
  • Geolocation
  • Leveraged Services and API Employment
  • Approaches to Interactions and Content
  • Utilizing Recent Trends
  • Practice Exercise (0:11)
  • UX Discovery, Assessment & Planning
  • Establishing Customer Requirements
  • Identifying the Technical Requirements
  • The User Research Process
  • Introduction to Creating a Requirements Documents
  • The Requirements Document In-Depth
  • Competitor Research and Differentiators
  • Usability Testing Methods (3:11)