Learning Path 05

Web & Design

Evaluate, design, and build websites that convert.

Lessons 7
Estimated Time 6-8 Hours
Level Beginner to Advanced
Instructors David & April Hall
Curriculum

7 Lessons. Zero Filler.

01
The 15-Dimension Website Evaluation
Complete scoring framework: usability, visual design, performance, accessibility, SEO, CRO, trust, mobile, IA, error handling, interaction, emotional design, privacy, content, internationalization.
60 min

What You Will Learn

How to evaluate any website across 15 dimensions with a repeatable scoring framework. From usability and visual design to privacy compliance and internationalization -- every aspect that determines whether a site converts or bounces.

Dimensions Covered

Usability Visual Design Performance Accessibility SEO CRO Trust Mobile

Key Resource

15-Dimension Website Scorecard -- a weighted evaluation framework with scoring criteria for each dimension.

Action Step

Run a full 15-dimension evaluation on your primary website and create a prioritized improvement roadmap.

02
Visual Design Principles
Color theory, typography hierarchy, spacing systems, visual weight, brand consistency across every touchpoint.
60 min

What You Will Learn

The visual design principles that separate professional sites from amateur ones. Color theory, typography hierarchy, spacing systems, visual weight, and how to maintain brand consistency across every touchpoint.

Tools Covered

Figma Canva Coolors

Key Resource

Visual Design System Template -- color palettes, type scales, spacing tokens, and component examples ready to customize.

Action Step

Create a design system for your brand with defined color palette, typography scale, and spacing system.

03
Conversion Rate Optimization
CTA placement, social proof, urgency, pricing psychology, form optimization, A/B testing methodology.
60 min

What You Will Learn

How to systematically improve conversion rates on any page. CTA placement science, social proof implementation, urgency mechanics, pricing psychology, form optimization, and A/B testing methodology that produces statistically significant results.

Tools Covered

Hotjar Google Optimize VWO

Key Resource

CRO Audit Checklist -- a page-by-page optimization guide with conversion benchmarks by industry.

Action Step

Run a CRO audit on your top landing page, implement 3 improvements, and set up an A/B test to measure impact.

04
Accessibility and Compliance
WCAG standards, alt text, keyboard navigation, color contrast, screen reader testing. Legal requirements (ADA, PIPEDA).
45 min

What You Will Learn

How to build websites that work for everyone. WCAG 2.1 AA standards, alt text best practices, keyboard navigation, color contrast ratios, screen reader testing, and the legal requirements under ADA and PIPEDA.

Tools Covered

axe DevTools WAVE Lighthouse NVDA

Key Resource

Accessibility Compliance Checklist -- WCAG 2.1 AA requirements mapped to specific implementation steps with testing procedures.

Action Step

Run an accessibility audit on your site using axe DevTools, fix all critical issues, and verify with a screen reader test.

05
Performance Optimization
Core Web Vitals, image optimization, lazy loading, code splitting, CDN configuration.
45 min

What You Will Learn

How to build fast websites that score green on every Core Web Vital. Image optimization strategies, lazy loading implementation, code splitting, CDN configuration, and the performance audit workflow.

Tools Covered

PageSpeed Insights Lighthouse WebPageTest Cloudflare

Key Resource

Performance Optimization Playbook -- a step-by-step guide from audit to green scores with before/after benchmarks.

Action Step

Run PageSpeed Insights on your top 5 pages, fix all red metrics, and achieve a score of 90+ on mobile.

06
Brand Identity Systems
Logo usage, color palettes, typography rules, brand voice, visual consistency across touchpoints.
45 min

What You Will Learn

How to build a brand identity system that ensures consistency everywhere your brand shows up. Logo usage rules, color palette definition, typography standards, brand voice guidelines, and visual consistency across all touchpoints.

Tools Covered

Figma Canva Brand Kit Notion

Key Resource

Brand Identity System Template -- a complete brand guide template with logo specs, color codes, typography rules, and voice guidelines.

Action Step

Create your brand identity document with logo usage rules, full color palette with hex codes, and typography hierarchy.

07
Building a Website Spec
From requirements to developer handoff. Information architecture, wireframes, technical requirements, content planning.
60 min

What You Will Learn

How to write a website specification that gets built correctly the first time. From requirements gathering to developer handoff -- information architecture, wireframes, technical requirements, and content planning.

Tools Covered

Figma Notion Whimsical

Key Resource

Website Spec Template -- a complete specification document template from sitemap to technical requirements to content matrix.

Action Step

Write a complete website spec for your next project including sitemap, wireframes for 3 key pages, and a technical requirements document.

Continue Learning

Ready for the Next Path?

Take everything you have learned and apply it to building a real business from the ground up.