Creative Days 75% off
NEW Special offer UX + Web Design Master Course: Strategy, Design + Development By Joe Natoli
Creative Days!
$50 $12.50
Buy
UX + Web Design Master Course: Strategy, Design + Development
English English, Spanish, French (+3) [Machine translation]
23 Hours Course

UX + Web Design Master Course: Strategy, Design + Development

Watch Trailer
Creative Days!     $50 $12.50
Buy course

My step-by-step guide to UX strategy, IA, Design + (Basic) 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 UX strategies to a site's content and design
  • Understand Information Architecture to enhance the content on your website
  • Know what 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 (UX) strategies that will make every site 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 (IA), which looks at the content on your website, how you should categorize it, what you should call it, and more.
  • You'll also tackle how to design your website depending upon who your visitors 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.
The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

16 sections • 187 lectures • 23 hours

  • Course Overview: What You'll Learn
    2 lectures 05:55 Mins
    • Welcome: Get Ready to Define, Design and Code!
      02:32 Mins
    • Introduction to UX
      03:23 Mins
  • Definition: Planning for Success
    8 lectures 40:05 Mins
    • Intro: if you fail to plan, you’re planning to fail
      03:43 Mins
    • Why Are We Doing This?
      05:53 Mins
    • Three Crucial Questions (You Must Ask)
      01:17 Mins
    • What's Worth Doing?
      04:25 Mins
    • What Are We Creating?
      07:16 Mins
    • What Value Does It Provide?
      05:46 Mins
    • SNACK BREAK: Who Are Your Users?
      01:18 Mins
    • Exercise: Determining Value & Strategic Opportunity
      10:27 Mins
  • Definition: Planning for Success Part II
    15 lectures 1 Hour 14 Mins
    • It's Not Just About Users: The UX Value Loop
      02:50 Mins
    • Business Stakeholder Research
      02:49 Mins
    • Identifying Business Goals
      13:30 Mins
    • SNACK BREAK: What Are Your (or Your Client's) Business Goals?
      01:01 Mins
    • User Research: Putting People First
      02:46 Mins
    • Identifying User Needs
      08:11 Mins
    • Decision Paths: Connecting User Needs with Strategy
      04:53 Mins
    • Exercise: Create a Decision Path
      04:28 Mins
    • Introduction to Requirements
      02:30 Mins
    • Generating Meaningful Requirements
      03:58 Mins
    • Three Kinds of Requirements
      06:27 Mins
    • Documenting Requirements
      04:47 Mins
    • Determining Project Scope
      02:57 Mins
    • Controlling Scope Creep
      06:38 Mins
    • Exercise: Smart Project Scoping
      06:41 Mins
  • Definition: Planning for Success Part III
    10 lectures 31:40 Mins
    • Planning for User Testing
      03:59 Mins
    • Creating a Test Plan: Who Are We Testing For?
      03:22 Mins
    • Prioritizing Device and Browser Support
      02:49 Mins
    • What to Test: Functionality
      05:48 Mins
    • What to Test: Usability
      04:41 Mins
    • What to Test: Errors and Exceptions
      01:57 Mins
    • What to Test: Compatibility
      02:18 Mins
    • What to Test: Performance
      01:30 Mins
    • What to Test: Security
      02:30 Mins
    • Definition Takeaways: Things to Remember
      03:46 Mins
  • Information Architecture: Creating a Solid Foundation
    11 lectures 1 Hour 11 Mins
    • Information Architecture: Organizing Content and Flow
      03:05 Mins
    • What IS Information Architecture (IA)?
      05:02 Mins
    • Content Strategy: Identifying, Organizing and Delivering
      05:52 Mins
    • Determining Content Requirements
      07:24 Mins
    • Exercise: Identifying Content Workflows
      09:42 Mins
    • My Tips for Successful Information IA Modeling
      12:50 Mins
    • Creating and Prioritizing IA
      03:30 Mins
    • Content Labeling
      07:40 Mins
    • File Naming
      07:08 Mins
    • Grouping and Classifying Content
      03:00 Mins
    • Exercise: Determining Information Priority
      05:50 Mins
  • Information Architecture: Creating a Solid Foundation Part II
    11 lectures 27:57 Mins
    • Exercise: Turning Information Priority into an IA Model
      04:01 Mins
    • IA Models: Which One's Right for My Site?
      02:36 Mins
    • Hierarchical Tree IA Model
      01:05 Mins
    • Nested List IA Model
      00:55 Mins
    • Hub and Spoke IA Model
      01:03 Mins
    • Bento Box IA Model
      01:51 Mins
    • Filtered View IA Model
      01:12 Mins
    • Combining IA Models
      01:46 Mins
    • Tools for Creating IA Models
      03:39 Mins
    • Socializing and Validating Your IA Model
      08:21 Mins
    • SNACK BREAK: Create an IA Model for Your Website
      01:28 Mins
  • Information Architecture: Creating a Solid Foundation Part III
    16 lectures 2 Hours 12 Mins
    • Navigation Design
      00:55 Mins
    • Primary and Secondary Navigation
      03:52 Mins
    • Global and Local Navigation
      04:15 Mins
    • Navigation for Different User Types
      04:34 Mins
    • Validating Your Navigation Scheme
      06:00 Mins
    • Introduction to Wireframing
      04:14 Mins
    • Exercise: Determining Key Navigation Paths
      10:12 Mins
    • Wireframing 101
      01:45 Mins
    • What a Wireframe ISN'T
      05:05 Mins
    • What a Wireframe IS
      06:33 Mins
    • My Tips for Creating Successful Wireframe Prototypes
      12:16 Mins
    • Creating Wireframes: Tools of the Trade
      09:41 Mins
    • SNACK BREAK: Try Creating a Basic Wireframe on Your Own
      01:27 Mins
    • Exercise: Creating a B2B Wireframe with Axure RP Pro
      52:00 Mins
    • Socializing and Validating Wireframes
      05:35 Mins
    • Information Architecture Takeaways: Things to Remember
      04:42 Mins
  • Design: Information, Interaction and Interface
    8 lectures 1 Hour 28 Mins
    • "What's It Gonna Look Like?" An Introduction to Design
      03:10 Mins
    • Defining Appropriate User Interface (UI) Design
      17:12 Mins
    • How Definition and IA Inform UI Design
      05:11 Mins
    • Timeless UI Design Principles, Part 01
      13:11 Mins
    • Timeless UI Design Principles, Part 02
      16:14 Mins
    • Timeless UI Design Principles, Part 03
      12:45 Mins
    • Timeless UI Design Principles, Part 04
      18:58 Mins
    • SNACK BREAK: Identify Design Principles in an Existing UI
      01:21 Mins
  • Design: Information, Interaction and Interface Part II
    14 lectures 5 Hours 33 Mins
    • My Tips for Solving Visual Problems
      16:23 Mins
    • Organizing Visual Information - Part 01
      17:20 Mins
    • Organizing Visual Information - Part 02
      22:47 Mins
    • Designing Appropriate Visual Hierarchy
      27:57 Mins
    • Designing for Audience Expectation
      14:50 Mins
    • Designing for Interaction
      28:49 Mins
    • Exercise: Create a UI Design for a B2B Website
      50:11 Mins
    • Exercise: Create a UI Design Layout for a WordPress Blog - Part 01
      13:21 Mins
    • Exercise: Create a UI Design Layout for a WordPress Blog - Part 02
      11:17 Mins
    • Exercise: Create a UI Design Layout for a WordPress Blog - Part 03
      15:29 Mins
    • Exercise: Create a UI Design Layout for a WordPress Blog - Part 04
      28:00 Mins
    • Exercise: Create a UI Design Layout for an Ecommerce Website
      1 Hour 18 Mins
    • SNACK BREAK: Evaluate Your UI Design
      01:37 Mins
    • Design Takeaways: Things to Remember
      07:15 Mins
  • Development - Building a B2B Website with HTML & CSS
    35 lectures 3 Hours 13 Mins
    • Development: Coding, Customizing and Configuring
      02:23 Mins
    • Dreaming in Code: You've Got the Power!
      03:10 Mins
    • Hosting & Domain Considerations
      03:53 Mins
    • File Structure and FTP: Organizing & Uploading
      07:33 Mins
    • Basic HTML Structure: Building a Solid Foundation
      03:50 Mins
    • Tags, Elements and Attributes: Describing HTML Content
      02:51 Mins
    • What's In a Name? Titles and Headings
      06:51 Mins
    • Formatting Paragraphs: Creating and Styling Text Content
      04:03 Mins
    • Organizing Your Code: Using Indentation and Comments
      03:43 Mins
    • Creating Your First Web Page: Applying What You've Learned
      04:35 Mins
    • Content Elements – Hyperlinks: Getting from Here to There
      03:04 Mins
    • Content Elements – Unordered and Ordered Lists: Creating and Formatting
      02:49 Mins
    • Content Elements – Images: Adding Images and Defining Attributes
      04:49 Mins
    • Content Elements – Audio and Video: Adding Media to Your Web Page
      07:16 Mins
    • Font Styling: Defining Style, Color and Size
      02:54 Mins
    • Exercise: Adding Images, Unordered Lists and Hyperlinks
      05:18 Mins
    • CSS – Content Styling: Adding Good Skin to Good Bones
      04:07 Mins
    • CSS – Inline, Internal or External? Getting Smart
      04:38 Mins
    • CSS – Inheritance: Sharing Attributes Efficiently
      03:16 Mins
    • CSS – Background Color and Image: Creating Background Effects
      03:49 Mins
    • CSS – Font Color and Weight: Giving Text Impact and Emphasis
      04:25 Mins
    • CSS – Classes and Spans: Getting Specific with Styling
      06:59 Mins
    • CSS – Working with Divs: Dividing and Conquering with Classes and IDs
      06:25 Mins
    • CSS – Link Styling: Using Text Decoration
      05:46 Mins
    • Exercise – Creating a Navigation Menu: Leveraging CSS for Wayfinding
      07:01 Mins
    • Basic Table Structure: Organizing Content
      07:39 Mins
    • Styling Tables with CSS: Enhancing Communication and Readability
      07:10 Mins
    • Margins and Padding: Establishing Purposeful Negative Space
      07:08 Mins
    • Display and Positioning: What, Where and How
      12:02 Mins
    • The Box Model: The Parts and the Whole
      04:43 Mins
    • Float and Clear: Controlling Visual Flow
      07:48 Mins
    • Nested Layouts: Using Divs for Precision and Flexibility
      08:39 Mins
    • Forms: Creating Good Input (and Output)
      15:05 Mins
    • Creating Forms: Grouping Form Data
      02:46 Mins
    • Styling Forms with CSS: Creating Consistency and Usability
      04:44 Mins
  • Exercises: Build A B2B Website with HTML & CSS
    5 lectures 51:13 Mins
    • Exercise: Create Your B2B Website Header
      15:08 Mins
    • Exercise: Create Your B2B Website Content
      17:46 Mins
    • Exercise: Create Your B2B Website Footer
      09:11 Mins
    • Exercise: Create Your B2B Web Page: Putting It All Together
      04:32 Mins
    • Browser Testing: Tips and Tools
      04:36 Mins
  • Development – WordPress Content Management System (CMS)
    23 lectures 2 Hours 16 Mins
    • Installing WordPress Automatically: Using Your Hosting Provider's CPanel
      02:56 Mins
    • Installing WordPress Manually: Using an FTP Client
      08:27 Mins
    • The WordPress Dashboard: A Quick Tour of Features and Functions
      05:56 Mins
    • Posts vs. Pages: Creating Content in WordPress
      05:27 Mins
    • Categories: Organizing WordPress Content
      05:25 Mins
    • Tags: Adding Context To Your Posts
      04:57 Mins
    • Comments: Connecting and Managing Conversations
      03:42 Mins
    • Formatting Text: Using the WordPress Text Editor
      05:50 Mins
    • Adding Hyperlinks: Creating and Managing Links in WordPress
      01:55 Mins
    • Adding Images: Inserting and Managing Images in WordPress
      05:32 Mins
    • Adding Video: Inserting and Managing Video in WordPress
      06:35 Mins
    • Working with Plugins: Extending WordPress Features and Functions
      08:19 Mins
    • Exercise: Adding a Contact Form Plugin
      12:14 Mins
    • Using Widgets: Enhancing Your WordPress Layout
      07:00 Mins
    • Exercise: Adding a Widget
      05:11 Mins
    • Choosing a WordPress Theme: Finding, Evaluating and Installing
      07:06 Mins
    • Choosing a WordPress Theme: Finding, Evaluating and Installing
      05:13 Mins
    • Creating Custom Menus: Replacing Theme Menus
      06:58 Mins
    • Using the Code Editor: Modifying Your WordPress Theme
      05:50 Mins
    • WordPress Settings: General, Reading, Writing and Permalinks
      09:38 Mins
    • Users and Roles: Assigning WordPress Access and Privileges
      04:48 Mins
    • WordPress Backup: Backing Up Your Blog and Database
      03:18 Mins
    • Updating WordPress: Automatic and Manual Updates
      04:36 Mins
  • Exercises: Build A Blog with WordPress
    4 lectures 46:41 Mins
    • Exercise: Customizing Your Theme Header, Part 01
      08:13 Mins
    • Exercise: Customizing Your Theme Header, Part 02
      08:49 Mins
    • Exercise: Customizing Your Page Content
      15:01 Mins
    • Exercise: Customizing Your Footer
      14:38 Mins
  • Development - Ecommerce Website with WooCommerce
    18 lectures 1 Hour 38 Mins
    • Installing WooCommerce
      04:25 Mins
    • Basic Settings: Getting Started with WooCommerce
      04:26 Mins
    • Product Settings: Configuring Products in WooCommerce
      09:45 Mins
    • Tax Settings: Configuring Sales Tax in WooCommerce
      07:05 Mins
    • Checkout Settings: Configuring Checkout Options in WooCommerce
      05:22 Mins
    • Shipping Settings: Configuring Shipping in WooCommerce
      11:25 Mins
    • Account Settings: Configuring Customer Accounts in WooCommerce
      02:00 Mins
    • Product Categories: Adding Product Categories in WooCommerce
      03:18 Mins
    • Adding Simple Products in WooCommerce
      08:10 Mins
    • Adding Variable Products in WooCommerce
      05:50 Mins
    • Adding Virtual and Downloadable Products in WooCommerce
      07:02 Mins
    • Adding Linked and Related Products in WooCommerce
      04:18 Mins
    • Creating Coupons: Configuring Special Offers in WooCommerce
      06:23 Mins
    • Customizing Email: Email Messaging Customization in WooCommerce
      04:55 Mins
    • Managing Orders with WooCommerce
      04:21 Mins
    • Managing Inventory with WooCommerce
      02:07 Mins
    • Reporting: Sales Reporting in WooCommerce
      04:21 Mins
    • Configuring Product Category Navigation in WooCommerce
      03:41 Mins
  • Exercises: Build An Ecommerce website with WooCommerce and WordPress
    5 lectures 51:34 Mins
    • Exercise: Creating Your Storefront Home Page, Part 01
      11:51 Mins
    • Exercise: Creating Your Storefront Home Page, Part 02
      12:58 Mins
    • Exercise: Creating Your Storefront Home Page, Part 03
      12:04 Mins
    • Exercise: Creating Your Storefront Home Page, Part 04
      06:45 Mins
    • Exercise: Creating Your Category Landing Page
      07:56 Mins
  • Launch and Beyond
    2 lectures 13:00 Mins
    • Prepare to Launch! Approval, Testing, Bugs and Beyond
      04:26 Mins
    • Pre-Launch Checklist: What to Do Before You Launch
      08:34 Mins
Course details

UX + Web Design Master Course: Strategy, Design + Development

UX + Web Design Master Course: Strategy, Design + Development

By Joe Natoli

$12.50 75% off $50

Creative Days

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Joe Natoli

    Joe Natoli

    UX consultant, author and speaker

    @joenatoli

    Joe Natoli is a UX consultant, author and speaker. Everything he does is born from nearly three decades of consulting with and training the product UX, design + development teams of some of the world’s largest organizations. He has taught over 200,000 students through his online courses and is a regular keynote speaker and lecturer at events across the globe. His courses, books, articles and free UX resources are available at givegoodux.com.

    givegoodux.com

Similar Courses