Happy Monday, creative family, and welcome to Logiaweb Weekly.
This week’s design intelligence briefing reveals:
🧪 What I'm Building: Behind the Scenes
🚨 Big News: Runway Gen-4.5 takes AI video to a new level
🤖 Design Inspiration: Premium AI-powered landing pages
🛠️ Tutorial of the Week: Photo to product page in sub-10 minutes with [Nano Banana Pro]
💡 Prompt of the Week: Lighting fast animated design with Jitter AI
WHAT I’M BUILDING
This week, the focus was on tightening our onboarding systems. With a serious flow of new clients coming in at the end of Q4, we need everything to run smoothly, from the first call to the final delivery. It’s not the glamorous part of building a studio, but it’s the part that makes growth sustainable.
We also released a new YouTube video where I walk through the entire workflow of building a web app using AI. Not just typing a prompt into Lovable, but defining user flows, building a design system, testing, debugging, and everything in between. It’s one of our most complete breakdowns so far.
And on Sunday, I was invited as a guest speaker inside a friend’s community to talk about content and AI. It was a great chance to share what we’re building with Klime, and to see how many people are excited about this new wave of AI-powered creativity.
BIG NEWS
Runway just launched Gen 4.5, and it's the first text to video model that actually feels client-ready from initial output.
What:
The visuals just look better. Better prompt following, more realistic motion, and physics that don't scream “I am AI generated nonsense”. It was always fast but now it's good too. Rare combo. If generating video for a hero section usually leaves you with something that looks like a fever dream, this will be a big deal.
Why:
Most landing pages still use stock footage or static images because custom video usually always meant hiring a video team or settling for obviously cheap motion assets. BUT, Gen 4.5 gives you a third option: high quality, on brand video loops that actually look clean. Meaning you don’t have to choose between expensive and mediocre.
How:
One cool feature is that you can now prototype hero sections with motion. Generate 10 to 15 second loops for SaaS pages, create ad creative variants without touching After Effects, or build explainer B roll that isn’t just placeholder. The workflow is simple: write what you want, generate, tweak if necessary, and you’re done. This could be the tool that finally makes motion rich websites realistic for us freelancers or small studios. If that sounds like you, Runway Gen 4.5 might just become your new unfair advantage.
DESIGN INSPIRATION
Premium Website Concepts
Tool Used: Nano Banana Pro
PROMPT: Create a dark, premium landing page for an AI writing assistant. Use a centered hero with a glossy purple and blue abstract 3D circular shape floating on a black background. Place the headline in large white text above it, with two rounded CTA buttons beneath, one filled purple and one outlined. Keep the layout vertically stacked with generous negative space. Directly below, include a wide “Trusted by 100+ businesses” row of grayscale logos in a single line. Follow with a two by two grid of feature cards on a black section, each card using subtle purple gradients, minimal line icons, and white labels. Add line charts and bar charts in the same purple palette. Use modern sans serif typography, high contrast, soft shadows, and smooth glow effects. Maintain a cinematic, futuristic visual tone throughout.Tool Used: Seedream 4.5
As expected, Figma’s own AI isn’t bad at this at all, and could spit out a very decent app quite quickly:
PROMPT: Design a sports community homepage with a clean, friendly tone. Use a full width hero showing two soccer players mid action on a green field, slightly blurred background, sharp foreground. Center a bold white headline “YOUR GAME YOUR WORLD” over the image, with two rounded CTA buttons underneath. Place a simple top navigation bar with logo left, menu center, and search icon on the right. Below the hero, add a two column section: the left column contains a short mission statement in black text, the right column shows a landscape soccer image. Follow with three image cards highlighting community, training, and culture. Include a testimonial style section with stats and diverse athlete photos. Use ample white space, soft rounded corners, neutral light gray backgrounds, and realistic photography. Keep typography approachable and legible, prioritizing clarity over decoration.Tool Used: Stitch (Formerly Galileo AI)
PROMPT: Create a modern SaaS CRM homepage with a bright, professional aesthetic. Use a clean white background and a centered hero section with a dark green gradient header that fades into white. Place a concise headline about managing customers and growing your business, with supporting subtext below, then a single prominent CTA button. Under the hero, show a horizontal three step onboarding row with minimal icons and short captions. Follow with a large two by two feature grid containing realistic dashboard screenshots in rounded white cards, each paired with brief descriptive text. Add a testimonial carousel section on white, then a pricing section with three vertical plans, each with green accent buttons and clear feature lists. Include a logo bar of trusted companies near the top or bottom. Maintain high contrast typography, subtle shadows, soft edges, and balanced vertical spacing throughout.TUTORIAL OF THE WEEK
Photo to premium product page in <10 minutes
Pray for the person out there spending hours building hero sections from scratch.
Someone should have told them about this workflow that’ll take you from iPhone photo to fully animated website faster than you can refresh your browser.
Step 1: Capture Your Product Shot
Take one clean photo of your product with good lighting and a decent angle.
Nothing fancy. Just solid light and a clear background.
Natural light works best. Avoid harsh shadows or cluttered backgrounds.
Step 2: Turn Your Photo Into Video
First generate a high quality product image with Nano Banana pro
Then head to Higgsfield and upload your image.
Choose 16:9 format with 4K quality for crisp output.
Click "Generate" and describe the scene you want in the prompt box.
Hit Generate again. Higgsfield will automatically create a video from your static photo.
Download the final render once it's ready.
Step 3: Import Everything Into Framer
Open Framer and upload your AI generated video to the hero section.
Build out the rest of your site. Add headlines, buttons, and spacing.
Keep it clean and intentional. Let the video do the heavy lifting.
Step 4: Add Subtle Animations
Use Framer's Appear effects on key elements.
Keep animations minimal. The video is already doing most of the talking.
Test the flow. Make sure nothing feels jarring or overdone.
Step 5: Publish
Your site is live. Premium product page, AI generated video, fully animated, ready to ship.
What used to require a designer, videographer, and developer now happens in one workflow. If you're tired of slow turnarounds and want to prototype like the future, this combo is it.
Try Higgsfield and Framer
PROMPT OF THE WEEK
Animated Designs with Jitter AI
PROMPT: Animate this red Uber JUMP scooter centered in full side profile on a flat bright red background. The large white “JUMP” text sits behind the scooter and the smaller white “Uber” sits below it on the right. Rotate both wheels in a continuous clockwise loop. Make the text appear from behind the scooter with a playful bounce: scale up quickly, overshoot slightly, then settle using soft easing. Add a lighter secondary bounce so it feels lively, not subtle. Keep the scooter perfectly static and crisp in front, preserving proportions, sharp edges, and contrast.That’s it for this week, but I want to make each edition even better.
👉 Got 30 seconds?
Fill out this quick survey and tell me what you'd love to see next. Your feedback directly shapes the next drop.
💌 Know a designer who should be using AI smarter?
Forward them this email. Or just send them to logiaweb.com/weekly to join.
See you next Monday,
— Adrien
Adrien Ninet
