Free course preview

Design That Doesn't Look AI-Made

Build websites and apps that look hand-crafted, not AI-generated.

Start here

Pick your project and capture the before

Task · 30 min · Free preview

Everything in this course gets applied to one real project. Pick it now and save how it looks today, so you can see your progress later.

Steps

  1. 1Choose one project you built or control: your portfolio site, a client landing page you are allowed to show, a side project, or an app screen. A live website is best, but a Figma file or local project is fine.
  2. 2If it is a client project, ask permission to use it for a before-and-after. If you cannot get it, pick your own project instead.
  3. 3Take full-page screenshots on desktop. In Chrome, open DevTools, press Ctrl+Shift+P (Cmd+Shift+P on Mac), type "screenshot" and choose "Capture full size screenshot".
  4. 4Take full-page screenshots at phone width. In DevTools, turn on the device toolbar, set the width to 390 pixels, and capture again.
  5. 5Create a Google Drive folder named "Design course - Your Name" with a subfolder called "Before". Put all screenshots there.
  6. 6Write three sentences in a Google Doc: who the page is for, what you want them to do, and what bothers you about it now.

Do not fix anything yet

It is tempting to start tweaking. Wait. Next week you will audit it properly, and fixes made before the audit usually miss the real problems.

Done when: you have desktop and 390 pixel screenshots of your project in a "Before" folder, plus a short doc describing who it is for and what bothers you.

Full curriculum

Free lessons open right here. The other 25 open when you enroll.

Modules
5
Lessons
27
Hands-on tasks
7
Assignments
4
Learning time
15.9 h
01Start here4 lessons · 52 min

Why so many sites look the same, how the four weeks work, and the project you will redesign.

02Week 1: Spot the AI look5 lessons · 2.3 h

Learn the visual and copy tells that make a site look generated, then audit your own project.

  • The AI tells, one by oneVideo · 16 min
  • The AI-tells checklistReading · 8 min
  • Audit your homepage against the AI-tells checklistTask · 45 min
  • Why the tells happen, and why clients noticeReading · 7 min
  • Submit your AI-tells auditAssignment · 60 min
03Week 2: Foundations6 lessons · 3.2 h

Type scale, line length, a 4/8 px spacing system, a restrained palette, contrast and alignment.

  • Type does most of the workVideo · 15 min
  • Spacing on a 4/8 px systemReading · 8 min
  • A restrained palette with one accentReading · 8 min
  • Contrast and accessibility basicsReading · 9 min
  • Align your page to a gridTask · 60 min
  • Submit your foundations sheetAssignment · 90 min
04Week 3: Real content and components6 lessons · 3.5 h

Specific UI copy, real screenshots, solid cards, buttons, forms and empty states, mobile-first layouts and design tokens.

  • Write UI copy like a personVideo · 14 min
  • Real screenshots and good referencesReading · 9 min
  • Components that hold up: cards, buttons, forms and empty statesReading · 11 min
  • Design tokens in Tailwind or Figma variablesReading · 9 min
  • Rebuild one section mobile-firstTask · 75 min
  • Submit your rebuilt section and copyAssignment · 90 min
05Week 4: Redesign project6 lessons · 6.1 h

Audit a full page, fix it in the right order, polish the details and present a before-and-after.

  • How to run a redesign without starting overVideo · 13 min
  • Audit the full page and write a fix listTask · 45 min
  • Fix it layer by layerTask · 90 min
  • Polish the details: favicon, share image, loading states and 404Task · 60 min
  • Getting useful feedback on your redesignReading · 7 min
  • Final redesign: before and afterAssignment · 150 min

Modern Design

₱2,999 one-time

Enroll