How to control the layout journey of a website like pros do
Try Framer: https://framer.link/BONT2 ☻ Coupon code BONT2 for 30% off one year of Framer Pro.
Most web design layouts quietly follow the same predictable path, and that is exactly why so much work ends up blending into the crowd. In this video I break down how controlling the layout journey lets you guide a visitor's eye on purpose, so your compositions feel editorial and unmistakably yours, without compromising performance. I also show you how I used Framer's AI agent to spin up fresh layout variations fast, all guided by my own criteria. If your website designs have ever felt a little too safe, this one will change how you approach every layout you build from here.
GOLDEN CANON GRID COURSE → https://go.bont.academy/golden-canon-grid
—
If your ultimate goal learning design skills is to scale your business to 6 figures, I recommend you watch this playlist instead:
https://www.youtube.com/watch?v=oQ8B6blxL_4&list=PLDJKnVzJ4VfNCGLjd8uLU0B7YtMeluqhe
6-FIGURE WEB DESIGN BUSINESS PLAN → https://go.bont.academy/6-figure-plan
—
LAYOUT EXPLORATION PROMPT
Take my existing design and create layout variants using exactly the same elements — same content, copy, images, video, buttons, logo, thumbnail carousel, rules, and footer meta. Don’t add, remove, or restyle anything.
Keep intact
All type styles and color styles exactly as they are — never change font, size, weight, or color.
The logo must always be present, always at its exact native proportion. Never stretch, squeeze, or otherwise distort it. It can be scaled dramatically (even huge) as a display element, but always proportionally, and keep it in the upper-left reading flow since on scroll it collapses into the top-left corner.
The main image is a video: always keep it at a 16:9 aspect ratio. Never crop or distort it.
Composition rules
Aim for editorial, Awwwards-caliber compositions. Avoid generic patterns like “text left, image right”.
Don’t stack all the text elements vertically down one column. Use the margins and white space to place elements in unexpected but readable ways.
Everything must be aligned to something, both horizontally and vertically. If an element is nearly aligned with another, snap it into alignment. Nothing should float arbitrarily.
Reuse the same column start lines throughout the composition, including for the footer meta row.
Any crop or partial bleed must read as intentional — e.g. an element occupying exactly half the screen — never accidental.
Never leave a headline or sentence on a single line. Constrain the width so text breaks across two or more lines.
Spacing
Use one consistent spacing scale with rounded values: 20 / 40 / 80 / 160.
Consistent outer margins, consistent gutters, consistent paddings, and consistent vertical rhythm across every variant.
Process
Produce each variant as a separate frame beside the original, leaving the original untouched.
Once I approve a variant, never modify it again.
—
BOOK A SCALE SESSION → https://go.bont.academy/control-layout-journey-website-call
LEARN MORE ABOUT THE BONT CLUB → https://go.bont.academy/control-layout-journey-website-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=tJm7nIdqeb4
#BONT #FreelanceWebDesign #WebDesignLayout
Most web design layouts quietly follow the same predictable path, and that is exactly why so much work ends up blending into the crowd. In this video I break down how controlling the layout journey lets you guide a visitor's eye on purpose, so your compositions feel editorial and unmistakably yours, without compromising performance. I also show you how I used Framer's AI agent to spin up fresh layout variations fast, all guided by my own criteria. If your website designs have ever felt a little too safe, this one will change how you approach every layout you build from here.
GOLDEN CANON GRID COURSE → https://go.bont.academy/golden-canon-grid
—
If your ultimate goal learning design skills is to scale your business to 6 figures, I recommend you watch this playlist instead:
https://www.youtube.com/watch?v=oQ8B6blxL_4&list=PLDJKnVzJ4VfNCGLjd8uLU0B7YtMeluqhe
6-FIGURE WEB DESIGN BUSINESS PLAN → https://go.bont.academy/6-figure-plan
—
LAYOUT EXPLORATION PROMPT
Take my existing design and create layout variants using exactly the same elements — same content, copy, images, video, buttons, logo, thumbnail carousel, rules, and footer meta. Don’t add, remove, or restyle anything.
Keep intact
All type styles and color styles exactly as they are — never change font, size, weight, or color.
The logo must always be present, always at its exact native proportion. Never stretch, squeeze, or otherwise distort it. It can be scaled dramatically (even huge) as a display element, but always proportionally, and keep it in the upper-left reading flow since on scroll it collapses into the top-left corner.
The main image is a video: always keep it at a 16:9 aspect ratio. Never crop or distort it.
Composition rules
Aim for editorial, Awwwards-caliber compositions. Avoid generic patterns like “text left, image right”.
Don’t stack all the text elements vertically down one column. Use the margins and white space to place elements in unexpected but readable ways.
Everything must be aligned to something, both horizontally and vertically. If an element is nearly aligned with another, snap it into alignment. Nothing should float arbitrarily.
Reuse the same column start lines throughout the composition, including for the footer meta row.
Any crop or partial bleed must read as intentional — e.g. an element occupying exactly half the screen — never accidental.
Never leave a headline or sentence on a single line. Constrain the width so text breaks across two or more lines.
Spacing
Use one consistent spacing scale with rounded values: 20 / 40 / 80 / 160.
Consistent outer margins, consistent gutters, consistent paddings, and consistent vertical rhythm across every variant.
Process
Produce each variant as a separate frame beside the original, leaving the original untouched.
Once I approve a variant, never modify it again.
—
BOOK A SCALE SESSION → https://go.bont.academy/control-layout-journey-website-call
LEARN MORE ABOUT THE BONT CLUB → https://go.bont.academy/control-layout-journey-website-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=tJm7nIdqeb4
#BONT #FreelanceWebDesign #WebDesignLayout