UX + WEB DESIGN MASTER COURSE
My step-by-step guide to UX strategy, IA, Design + Basic HTML + WordPress Development for websites.
Learn how to create and develop UX strategy, Information Architecture and UI design for web sites and apps — and learn basic code to build a basic HTML site, a WordPress site and a basic eCommerce store.
This course will teach you the nuts and bolts of real-world UX project work, including design, content, and coding. And you'll learn from the ground up, so it doesn't matter how much experience you have when you start.
You'll be exposed to principles and strategies, but, more importantly, you'll learn how to actually apply these abstract concepts by coding three different websites for three very different audiences.
Improve web sites and systems with UX strategies
- Apply strategies for better UX to a site's content and design.
- Understand Information Architecture (IA) to make content relevant, useful and findable.
- Understand the user needs, business goals and visual design principles that dictates how your website should look.
- Design and code a B2B website, a B2C blog, and an eCommerce site.
This course will help you stand out as a web designer, teaching you how to apply User Experience strategies that will make every site or app you build useful, usable, and valuable.
Reinforce what you're learning using the bonus 30-page downloadable UX Guidebook.
Filled with exercises and activities, the UX Guidebook is a great tool to reference as you progress through the course, or while developing your own custom sites.
You'll also get hands-on experience designing and coding three different types of sites.
This will give you the confidence to pursue similar projects if you're already a web designer, if you want to get into UX or UI design, or just want to enhance your own current site.
What You'll Learn
Even if you're a complete beginner, this course will show you how to make a website functional, attractive and successful. It will walk you through all of the steps required to enhance the User Experience on any site, right down to the code, content, and design.
- You'll begin by defining who your website users are and what they expect from the website.
- You'll also learn how and why business goals — yours or your client's — have to be uncovered and addressed for site success.
- You'll learn what questions to ask both groups, and you'll use the answers to inform your content and design decisions.
- Next, you'll dig into Information Architecture, which looks at the content on your website and how it should be organized, categorized, prioritized and labeled.
- You'll also tackle how to design your website depending upon who your users are, whether your website is B2B (business-to-business), B2C (business-to-consumer), or an eCommerce site for selling products online.
- Different audiences have different needs, so learning what your target user expects from your site means you'll be able to design and build a site that meets those expectations and leads to greater conversions.
- In addition to knowing what you need to put into your website to make it stand out from the crowd, you'll also learn how to identify and remove UX- and UI-related obstacles.
- The ability to see and solve these problems will ensure every website you build moving forward will be useful, usable and valuable to the people who use it.
- Most importantly, you'll then learn how to actually build and code these types of sites using HTML, CSS, WordPress, and more.
By the end of this course, you'll have an in-depth understanding of UX and web design, as well as the tools to develop a variety of sites with the right code.
You'll know why UX is so important to both users and businesses, what content is needed on a site, what UI design is appropriate, and how to transform your vision into a fully functional website using the most effective tools available.
188 Lessons
Already Joined? Login
Course Overview: What You'll Learn
Welcome: Get Ready to Define, Design and Code!
Download the BONUS 30-page Course Guidebook
Introduction to UX
Definition: Planning for Success
Why Are We Doing This?
Three Crucial Questions (You Must Ask)
What's Worth Doing?
What Are We Creating?
What Value Does It Provide?
SNACK BREAK: Who Are Your Users?
Exercise: Determining Value & Strategic Opportunity
Definition: Planning for Success Part II
It's Not Just About Users: The UX Value Loop
Business Stakeholder Research
Identifying Business Goals
SNACK BREAK: What Are Your (or Your Client's) Business Goals?
User Research: Putting People First
Identifying User Needs
Decision Paths: Connecting User Needs with Strategy
Exercise: Create a Decision Path
Introduction to Requirements
Generating Meaningful Requirements
Three Kinds of Requirements
Documenting Requirements
Determining Project Scope
Controlling Scope Creep
Exercise: Smart Project Scoping
Definition: Planning for Success Part III
Planning for User Testing
Creating a Test Plan: Who Are We Testing For?
Prioritizing Device and Browser Support
What to Test: Functionality
What to Test: Usability
What to Test: Errors and Exceptions
What to Test: Compatibility
What to Test: Performance
What to Test: Security
Definition Takeaways: Things to Remember
Information Architecture: Creating a Solid Foundation
Information Architecture: Organizing Content and Flow
What IS Information Architecture (IA)?
Content Strategy: Identifying, Organizing and Delivering
Determining Content Requirements
Exercise: Identifying Content Workflows
My Tips for Successful Information IA Modeling
Creating and Prioritizing IA
Content Labeling
File Naming
Grouping and Classifying Content
Exercise: Determining Information Priority
Information Architecture: Creating a Solid Foundation Part II
Exercise: Turning Information Priority into an IA Model
IA Models: Which One's Right for My Site?
Hierarchical Tree IA Model
Nested List IA Model
Hub and Spoke IA Model
Bento Box IA Model
Filtered View IA Model
Combining IA Models
Tools for Creating IA Models
Socializing and Validating Your IA Model
SNACK BREAK: Create an IA Model for Your Website
Information Architecture: Creating a Solid Foundation Part III
Navigation Design
Primary and Secondary Navigation
Global and Local Navigation
Navigation for Different User Types
Validating Your Navigation Scheme
Exercise: Determining Key Navigation Paths
Wireframing 101
What a Wireframe ISN'T
What a Wireframe IS
My Tips for Creating Successful Wireframe Prototypes
Creating Wireframes: Tools of the Trade
SNACK BREAK: Try Creating a Basic Wireframe on Your Own
Exercise: Creating a B2B Wireframe with Axure RP Pro
Socializing and Validating Wireframes
Information Architecture Takeaways: Things to Remember
Design: Information, Interaction and Interface
"What's It Gonna Look Like?" An Introduction to Design
Defining Appropriate User Interface (UI) Design
Timeless UI Design Principles, Part 01
Timeless UI Design Principles, Part 02
Timeless UI Design Principles, Part 03
Timeless UI Design Principles, Part 04
SNACK BREAK: Identify Design Principles in an Existing UI
Design: Information, Interaction and Interface Part II
My Tips for Solving Visual Problems
Organizing Visual Information - Part 01
Organizing Visual Information - Part 02
Designing Appropriate Visual Hierarchy
Designing for Audience Expectation
Designing for Interaction
Exercise: Create a UI Design for a B2B Website
Exercise: Create a UI Design Layout for a WordPress Blog - Part 01
Exercise: Create a UI Design Layout for a WordPress Blog - Part 02
Exercise: Create a UI Design Layout for a WordPress Blog - Part 03
Exercise: Create a UI Design Layout for a WordPress Blog - Part 04
Exercise: Create a UI Design Layout for an Ecommerce Website
SNACK BREAK: Evaluate Your UI Design
Design Takeaways: Things to Remember
Development - Building a B2B Website with HTML & CSS
Development: Coding, Customizing and Configuring
Dreaming in Code: You've Got the Power!
Hosting & Domain Considerations
File Structure and FTP: Organizing & Uploading
Basic HTML Structure: Building a Solid Foundation
Tags, Elements and Attributes: Describing HTML Content
What's In a Name? Titles and Headings
Formatting Paragraphs: Creating and Styling Text Content
Organizing Your Code: Using Indentation and Comments
Creating Your First Web Page: Applying What You've Learned
Creating Your First Web Page: Applying What You've Learned
Content Elements – Hyperlinks: Getting from Here to There
Content Elements – Unordered and Ordered Lists: Creating and Formatting
Content Elements – Images: Adding Images and Defining Attributes
Content Elements – Audio and Video: Adding Media to Your Web Page
Font Styling: Defining Style, Color and Size
Exercise: Adding Images, Unordered Lists and Hyperlinks
Exercise: Adding Images, Unordered Lists and Hyperlinks
CSS – Content Styling: Adding Good Skin to Good Bones
CSS – Inline, Internal or External? Getting Smart
CSS – Inheritance: Sharing Attributes Efficiently
CSS – Background Color and Image: Creating Background Effects
CSS – Font Color and Weight: Giving Text Impact and Emphasis
CSS – Classes and Spans: Getting Specific with Styling
CSS – Working with Divs: Dividing and Conquering with Classes and IDs
CSS – Link Styling: Using Text Decoration
Exercise – Creating a Navigation Menu: Leveraging CSS for Wayfinding
Basic Table Structure: Organizing Content
Styling Tables with CSS: Enhancing Communication and Readability
Margins and Padding: Establishing Purposeful Negative Space
Display and Positioning: What, Where and How
The Box Model: The Parts and the Whole
Float and Clear: Controlling Visual Flow
Nested Layouts: Using Divs for Precision and Flexibility
Forms: Creating Good Input (and Output)
Creating Forms: Grouping Form Data
Styling Forms with CSS: Creating Consistency and Usability
Exercises: Build A B2B Website with HTML & CSS
Exercise: Create Your B2B Website Header
Exercise: Create Your B2B Website Content
Exercise: Create Your B2B Website Footer
Exercise: Create Your B2B Web Page: Putting It All Together
Browser Testing: Tips and Tools
Development – WordPress Content Management System (CMS)
Installing WordPress Automatically: Using Your Hosting Provider's CPanel
Installing WordPress Manually: Using an FTP Client
The WordPress Dashboard: A Quick Tour of Features and Functions
Posts vs. Pages: Creating Content in WordPress
Categories: Organizing WordPress Content
Tags: Adding Context To Your Posts
Comments: Connecting and Managing Conversations
Formatting Text: Using the WordPress Text Editor
Adding Hyperlinks: Creating and Managing Links in WordPress
Adding Images: Inserting and Managing Images in WordPress
Adding Video: Inserting and Managing Video in WordPress
Working with Plugins: Extending WordPress Features and Functions
Exercise: Adding a Contact Form Plugin
Using Widgets: Enhancing Your WordPress Layout
Exercise: Adding a Widget
Choosing a WordPress Theme: Finding, Evaluating and Installing
Customizing Your Theme: Structure, Content and Appearance
Creating Custom Menus: Replacing Theme Menus
Using the Code Editor: Modifying Your WordPress Theme
WordPress Settings: General, Reading, Writing and Permalinks
Users and Roles: Assigning WordPress Access and Privileges
WordPress Backup: Backing Up Your Blog and Database
Updating WordPress: Automatic and Manual Updates
Exercises: Build A Blog with WordPress
Exercise: Customizing Your Theme Header, Part 01
Exercise: Customizing Your Theme Header, Part 02
Exercise: Customizing Your Page Content
Exercise: Customizing Your Footer
Development - Ecommerce Website with WooCommerce
Installing WooCommerce
Basic Settings: Getting Started with WooCommerce
Product Settings: Configuring Products in WooCommerce
Tax Settings: Configuring Sales Tax in WooCommerce
Checkout Settings: Configuring Checkout Options in WooCommerce
Shipping Settings: Configuring Shipping in WooCommerce
Account Settings: Configuring Customer Accounts in WooCommerce
Product Categories: Adding Product Categories in WooCommerce
Adding Simple Products in WooCommerce
Adding Variable Products in WooCommerce
Adding Virtual and Downloadable Products in WooCommerce
Adding Linked and Related Products in WooCommerce
Creating Coupons: Configuring Special Offers in WooCommerce
Customizing Email: Email Messaging Customization in WooCommerce
Managing Orders with WooCommerce
Managing Inventory with WooCommerce
Reporting: Sales Reporting in WooCommerce
Configuring Product Category Navigation in WooCommerce
Exercises: Build An Ecommerce website with WooCommerce and WordPress
Exercise: Creating Your Storefront Home Page, Part 01
Exercise: Creating Your Storefront Home Page, Part 02
Exercise: Creating Your Storefront Home Page, Part 03
Exercise: Creating Your Storefront Home Page, Part 04
Exercise: Creating Your Category Landing Page
Launch and Beyond
Prepare to Launch! Approval, Testing, Bugs and Beyond