Back to Courses

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

By Joe Natoli
  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Duration: 23 Hours
Now
50$

My step-by-step guide to UX strategy, IA, Design + (Basic) Development for Websites

Category Course format Language Duration Level
Product Design, UX Design Online English with Subt. 23 Hours Beginner & Intermediate

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.

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    Course Overview: What You'll Learn
    • Welcome: Get Ready to Define, Design and Code!
    • Introduction to UX
  • Lesson 2
    Definition: Planning for Success
    • Intro: if you fail to plan, you’re planning to fail
    • 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
  • Lesson 3
    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
  • Lesson 4
    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
  • Lesson 5
    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
  • Lesson 6
    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
  • Lesson 7
    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
    • Introduction to Wireframing
    • 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
  • Lesson 8
    Design: Information, Interaction and Interface
    • "What's It Gonna Look Like?" An Introduction to Design
    • Defining Appropriate User Interface (UI) Design
    • How Definition and IA Inform 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
  • Lesson 9
    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
  • Lesson 10
    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
    • 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
    • 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
  • Lesson 11
    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
  • Lesson 12
    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
    • Choosing a WordPress Theme: Finding, Evaluating and Installing
    • 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
  • Lesson 13
    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
  • Lesson 14
    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
  • Lesson 15
    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
  • Lesson 16
    Launch and Beyond
    • Prepare to Launch! Approval, Testing, Bugs and Beyond
    • Pre-Launch Checklist: What to Do Before You Launch

Meet the teacher

Joe Natoli

UX consultant, author and speaker

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.

Now
50$

Course Content

My step-by-step guide to UX strategy, IA, Design + (Basic) Development for Websites

Features

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Buy Course $50
Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses
Awards
Inspiration
Academy
Directory
w.
Market
academy academy
Course
Buy - $50