Watch me design a phone website landing from scratch
12.8K views · 2026-09-22
UI Design
Try Framer: https://framer.link/BONT Coupon code for 30% off a year of Framer Pro: ”BONT1”. ☻ Tired of making the same design decisions from zero on every new website? 15 years in, I was still doing it too, until Framer released something that made my web design workflow 10x faster. Watch me design a conceptual phone product page from a blank canvas, and find out what finally got the Framer AI agent designing the way I do.
CHAPTERS
0:00 Intro
3:08 Start with references
3:31 Building the skill
8:05 Designing the landing page
10:38 Go take a break
12:19 First pass
13:10 Populate with assets
14:50 Let the perfectionist take over
18:10 Unify the type styles
19:53 Unify the spacing system
20:38 Update the skill as you remember things
21:12 Going in detail on the hero
21:53 Unify the color palette
23:32 Working on the sticky module
26:19 Responsive navigation
27:40 Systematic animations
28:43 Conclusions
______
I prepared a free gift for you: the Golden Canon Grid, a mini course on composing layouts with an unconventional grid.
GOLDEN CANON GRID → https://go.bont.academy/golden-canon-grid-phone-scratch
______
BOOK A SCALE SESSION → https://go.bont.academy/design-phone-website-scratch-call
LEARN MORE ABOUT THE BONT CLUB → https://go.bont.academy/design-phone-website-scratch-site
DM me on social media:
• Instagram: https://www.instagram.com/hellobont/
• LinkedIn: https://www.linkedin.com/in/adriansomoza/
Check out my works:
• Behance: https://www.behance.net/adriansomoza/
• Dribbble: https://dribbble.com/adriansomoza/
YouTube Video URL: https://www.youtube.com/watch?v=4-Q7GyvEgmc
#BONT #FreelanceWebDesign #FramerAI
______
CREDITS
This is a concept website, built as a design exercise. It has no affiliation with Nothing, and none of it is for sale. Shoutout to Future Deluxe for the beautiful 3D assets, worth a look here: https://www.behance.net/gallery/254560887/Nothing-Phone-(4a)-Headphone-(a)-Headphone-(a)) And shoutout to Nothing for the phone itself and for the product imagery, official site here: https://intl.nothing.tech/products/phone-4a The Nothing name, the Phone (4a) design, the product imagery, the copy and the 3D assets all belong to their respective owners.
______
Built in Framer.
Framer is the AI website builder for designers and teams building professional, animated, responsive sites in 2026.
More than a design tool to help you publish to a fast static site with CMS, hosting and SEO built in.
In this video: **designing a responsive landing page website for a phone.
CHAPTERS
0:00 Intro
3:08 Start with references
3:31 Building the skill
8:05 Designing the landing page
10:38 Go take a break
12:19 First pass
13:10 Populate with assets
14:50 Let the perfectionist take over
18:10 Unify the type styles
19:53 Unify the spacing system
20:38 Update the skill as you remember things
21:12 Going in detail on the hero
21:53 Unify the color palette
23:32 Working on the sticky module
26:19 Responsive navigation
27:40 Systematic animations
28:43 Conclusions
______
I prepared a free gift for you: the Golden Canon Grid, a mini course on composing layouts with an unconventional grid.
GOLDEN CANON GRID → https://go.bont.academy/golden-canon-grid-phone-scratch
______
BOOK A SCALE SESSION → https://go.bont.academy/design-phone-website-scratch-call
LEARN MORE ABOUT THE BONT CLUB → https://go.bont.academy/design-phone-website-scratch-site
DM me on social media:
• Instagram: https://www.instagram.com/hellobont/
• LinkedIn: https://www.linkedin.com/in/adriansomoza/
Check out my works:
• Behance: https://www.behance.net/adriansomoza/
• Dribbble: https://dribbble.com/adriansomoza/
YouTube Video URL: https://www.youtube.com/watch?v=4-Q7GyvEgmc
#BONT #FreelanceWebDesign #FramerAI
______
CREDITS
This is a concept website, built as a design exercise. It has no affiliation with Nothing, and none of it is for sale. Shoutout to Future Deluxe for the beautiful 3D assets, worth a look here: https://www.behance.net/gallery/254560887/Nothing-Phone-(4a)-Headphone-(a)-Headphone-(a)) And shoutout to Nothing for the phone itself and for the product imagery, official site here: https://intl.nothing.tech/products/phone-4a The Nothing name, the Phone (4a) design, the product imagery, the copy and the 3D assets all belong to their respective owners.
______
Built in Framer.
Framer is the AI website builder for designers and teams building professional, animated, responsive sites in 2026.
More than a design tool to help you publish to a fast static site with CMS, hosting and SEO built in.
In this video: **designing a responsive landing page website for a phone.