How to Design a Website from Scratch in 2026
1.3K views · 2026-07-09
UI Design
Your website has 3 seconds to make an impression, here’s how to design one that actually works.
In this step-by-step web design tutorial, I show you how to design a website from scratch — from planning layout and visual hierarchy, to choosing the right colors and fonts, and designing with UX in mind so users instantly know where to go and what to click. Plus the small details that make a big difference, spacing, consistency, and strong calls to action.
00:00 – Intro
00:29 – What Makes a Good Website Design?
01:05 – How to Design a Website Layout
02:15 – How to Choose a Color Scheme
03:19 – Website Typography
04:25 – Designing for UX
05:30 – Web Design Finishing Touches
06:33 – Outro
Wix: https://www.wix.com/
📩 Business:
griffin@griffinwooldridge.com
🌐 Connect with me!
https://www.x.com/GriffinWDesigns
https://www.instagram.com/griffinwooldridge1
https://www.tiktok.com/@griffin.wooldridge1
https://www.facebook.com/griffinwooldridge1
https://www.linkedin.com/in/griffinwooldridge/
https://www.griffinwooldridge.com/
🔥 My top tools (some are affiliate links – thank you!):
Base44 – https://base44.pxf.io/c/6539388/2477538/25619?sharedid=griffin&trafcat=hp
Mobbin – https://mobbin.com/griffin
Anything – https://anything.link/griffin-wooldridge
Framer – https://framer.link/griffin-wooldridge
Granola – https://go.granola.ai/griffin-wooldridge
#aidesign #webdesign #aitools #vibecoding
In this step-by-step web design tutorial, I show you how to design a website from scratch — from planning layout and visual hierarchy, to choosing the right colors and fonts, and designing with UX in mind so users instantly know where to go and what to click. Plus the small details that make a big difference, spacing, consistency, and strong calls to action.
00:00 – Intro
00:29 – What Makes a Good Website Design?
01:05 – How to Design a Website Layout
02:15 – How to Choose a Color Scheme
03:19 – Website Typography
04:25 – Designing for UX
05:30 – Web Design Finishing Touches
06:33 – Outro
Wix: https://www.wix.com/
📩 Business:
griffin@griffinwooldridge.com
🌐 Connect with me!
https://www.x.com/GriffinWDesigns
https://www.instagram.com/griffinwooldridge1
https://www.tiktok.com/@griffin.wooldridge1
https://www.facebook.com/griffinwooldridge1
https://www.linkedin.com/in/griffinwooldridge/
https://www.griffinwooldridge.com/
🔥 My top tools (some are affiliate links – thank you!):
Base44 – https://base44.pxf.io/c/6539388/2477538/25619?sharedid=griffin&trafcat=hp
Mobbin – https://mobbin.com/griffin
Anything – https://anything.link/griffin-wooldridge
Framer – https://framer.link/griffin-wooldridge
Granola – https://go.granola.ai/griffin-wooldridge
#aidesign #webdesign #aitools #vibecoding