Today's Focus: Visual Planning without Coding
Today I focused entirely on planning the visual layout for my landing page, specifically how to use images and videos effectively based on the Z-pattern layout principle.
More Images or Fewer?
I brainstormed two possible directions for the visual structure:
- A rich version filled with many photographs
- A minimalist version using only the essential visuals
Considering the nature of the LP and the desired message, I decided to move forward with the leaner option, prioritizing clarity and load speed over visual density.
Assets Ready to Use
I already have some photos and videos on hand, so I need to prepare just a few materials. That made the brainstorming process faster and more grounded in what’s realistically available.
No Page Editing Today, On Purpose
Interestingly, I didn’t even open the actual page today.
Why? Because I know myself: once I open the browser, I get tempted to tweak the CSS… and then lose hours.
Instead, I focused on conceptual planning, and I think that was the right call. Moving forward, I’ll try to assign time limits to each task, rather than letting the day disappear into small unplanned edits.
Hero Section Video Plan
For the hero section, I plan to use a short video to capture the viewer's attention and communicate the freshness and appeal of the product — asparagus.
Product-Focused, Appetite-Driven Concept
Headline (centered)
"Try it raw! Our Asparagus sweeter than fruit!"
Storyboard Breakdown (Approx. 30 sec total)
| Time | Visual |
|---|---|
| 0–3 sec | Asparagus shoots emerging from soil (time-lapse) |
| 4–8 sec | Mature asparagus swaying in the wind |
| 9–12 sec | Close-up of freshly harvested asparagus with glistening water droplets |
| 13–18 sec | The producer biting into raw asparagus |
| 19–25 sec | Brief cooking shot (e.g., boiling) |
| 26–30 sec | Smiling couple enjoying the dish |
Balancing Beauty and Usability
I’m still unsure about the ideal length for the hero video. While I want it to tell a complete story, I’m also aware that long videos can slow down page loads, especially on mobile devices. This is something I’ll continue to experiment with.
Next Steps
- Prepare all necessary image and video assets
- Avoid touching the CSS or layout until everything is ready
- Once assets are final, begin placing them according to the Z-pattern structure
- Most importantly: stick to the plan and avoid tweaking before thinking
Let me know if you've faced the same dilemma of too many visuals vs. just enough, or if you have tips for optimizing video use in LPs!
Date: June 20, 2025
tags: webdev, design, css, productivity, portfolio
Top comments (0)