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

S$205.00
Take This Course
UX & Web Design Master Course: Strategy, Design, Development

Course Description
This course will teach you everything you need to know about UX, 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 Your Website with UX Strategies

Apply UX strategies to a site’s content & 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
Understand UX and Learn How to Develop Winning Websites

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 website designer, if you want to get into web design, or if you want to enhance your current business site.

Contents and Overview

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 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.

This will lay the foundation on which you can further build out your website to make users flock to it, stay on it, and hopefully make purchases.

Plus, you’ll 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.

You’ll not only know how to effectively design B2B, B2C, and ecommerce sites, but you’ll also know exactly how to develop these sites, from start to finish.

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.

What are the requirements?
Need a willingness to learn!
Adobe Photoshop Free Trial version
Axure RP Free Trial version
What am I going to get from this course?
A clear understanding of the principles and benefits of good UX and how to apply it to your website
A strategy for making sure you know what people need from your website, and what you or your client needs from it in order to succeed
The confidence to know what information should be included in your website, and how to design it to increase conversions
The ability to code a variety of websites with HTML, CSS, WordPress, and other tools
What is the target audience?
New or established business owners who want to gain more from their online presence
Beginners who want to learn UX, web design and/or development
Website designers who want to enhance their skills
Print designers who want to move into web design

Curriculum

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

Instructor Biography
Joe Natoli, 25 year UX & UI Industry Veteran, Apps Sites & Software
What I can promise you

I am never anything less than completely honored when someone registers for one of my classes or workshops. I know your time is valuable, so I absolutely guarantee you will get proven methods and actionable advice that you can implement as soon as you get back to your desk.

No bullshit, no magic, no dog and pony show. Just things that provide measurable value when done right.

How I can help

It’s the first question everybody asks: What can you do for me, Joe?

Well, essentially I can help you create differentiation and spur growth, by making sure your designs and products deliver the right experience. Whether it’s a site or an app or an enterprise system, I can teach you how to find and remove UX-related obstacles to success with training programs born from 25+ years of industry experience. And by the time I’m done you’ll be positioned to deliver memorable user experiences that create loyal customers and increase user adoption.

What I do

I teach designers and developers to integrate best practices in User Experience (UX), Customer Experience (CX) and Human Factors Engineering (HFE) into the things they’re already doing. I’m not interested in formal processes and procedures — I’m interested in helping you get results.

My time working with Fortune 100 companies to small startups has taught me that all the miles of formal UX processes strung together do not in and of themselves make anything any more useful, usable or valuable.

There is no perfect scenario. Book knowledge often fails where the rubber hits the road. And if you’ve been doing this for longer than ten minutes, you know that already.

So instead, I’m looking to leverage the things you’re already doing, make minute adjustments that don’t force you into unfamiliar territory. It’s more about the mindset you have than the actions you take. So in almost all cases, the tactical stuff stays the same. What you think about before you act, however, changes.

And when that happens, the things you create and build and sell deliver more value to the people who use them – and therefore more value back to you or your clients.

Who I’ve done it for

I’ve been privileged to serve a number of clients who have realized substantial business benefits from this strategic approach to user experience design. With industry leaders like Broadridge, Chamberlain, Conde Nast, Johns Hopkins, Lucent, PHH Arval, SC Johnson and many more, I’ve been fortunate to see measurable success come from tried-and-true best practices in UX and design.

I’ve also worked with several government clients, from state and local governments in VA and MD to federal agencies such as NIH, NSF and the Department of Homeland Security.

Course Features

  • Lectures
    Fatal error: Uncaught Error: Call to undefined method LP_Course::get_lessons() in /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/inc/learnpress-v2-functions.php:624 Stack trace: #0 /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/learnpress-v2/single-course/content-landing.php(64): thim_course_info() #1 /home2/waf6oo0adwwo/public_html/wp-content/plugins/learnpress/inc/lp-template-functions.php(2492): include('/home2/waf6oo0a...') #2 /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/learnpress-v2/content-single-course.php(65): learn_press_get_template('single-course/c...', Array) #3 /home2/waf6oo0adwwo/public_html/wp-content/plugins/learnpress/inc/lp-template-functions.php(2492): include('/home2/waf6oo0a...') #4 /home2/waf6oo0adwwo/public_html/wp-content/plugins/learnpress/inc/lp-template-functions.php(1563): learn_press_get_template('content-single-...') #5 /home2/waf6oo0adwwo/public_html/wp-includes/class-wp-hook.php(286): learn_press_content_single_course('') #6 /home2/waf6oo0adwwo/public_html/wp-i in /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/inc/learnpress-v2-functions.php on line 624