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

Pre-Launch Checklist: What to Do Before You Launch

Bonus: Convincing Clients/Stakeholders to Include UX in Requirements Work