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
- 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.
- 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.
- 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".
- 4Take full-page screenshots at phone width. In DevTools, turn on the device toolbar, set the width to 390 pixels, and capture again.
- 5Create a Google Drive folder named "Design course - Your Name" with a subfolder called "Before". Put all screenshots there.
- 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.