Designs a conversion-focused hero section for your SaaS product, with a bold benefit-led headline, short supporting copy, primary and secondary CTAs, a dashboard preview and discreet trust signals, in your brand style with plenty of white space.
hero sectionsaaslanding pageweb design
Design a website hero section for a SaaS product named "[product name]", built to convert. The product helps [audience] reach [result].
Include:
- a bold headline that leads with the benefit
- short supporting copy
- a primary CTA and a secondary CTA
- a preview of the product dashboard
- discreet trust signals
Style: [brand style], with a clear hierarchy and generous negative space.
Priority: a visitor should grasp what the product does without scrolling.
More in UI & Mockups
Canva Design Workflow: Create, Fix, Polish and Multiply in 7 Phases7 phasesNewUI & MockupsGuides a Canva design from idea to series in seven phases: full layout and copy, three quick fixes for an amateur look, a premium upgrade, 10 reusable variants, a brand color palette, font pairs for the free plan and a blunt scored critique.
Phase 1 — Layout and copy from an idea
Role: you are a senior designer who works in Canva.
What I need: [design, e.g. an Instagram carousel about 3 ChatGPT prompts]
Audience: [audience, e.g. beginners on their phone]
Vibe: [vibe, e.g. minimal, bold, clean]
Give me:
1. The exact Canva size
2. The background color as a hex code
3. A font pair (one for headings, one for body)
4. A layout for every page: which text goes where, where to place icons or emojis, and the spacing
5. The finished copy, ready for me to paste in as it is
Phase 2 — Fix an amateur-looking design
My Canva design looks amateur. Here it is: [describe it or paste its text, e.g. "white background, 4 different fonts, too much text"].
Tell me the 3 things that make it look cheap and how to correct each one in Canva in about 2 minutes:
1. Font fix
2. Color fix
3. Spacing fix
For each, give me the hex codes and font names before and after. Keep it simple and avoid design jargon.
Phase 3 — Premium look upgrade
My Canva design: [product, e.g. a planner cover]
Question: how do I make it look like something that sells for $27 instead of $2?
Give me:
1. Three hex codes forming a premium palette
2. Two font combinations with an expensive feel
3. One Canva element I should look up (e.g. "soft shadow" or "paper texture")
4. A margin and padding rule that gives the design room to breathe
Do not add any extra graphics.
Phase 4 — One design into 10 variants
Starting design: [design, e.g. an Instagram post about prompts]
Without redesigning it, derive 10 versions from it, using these levers:
- resize it for Story, Reel cover, Pinterest and Facebook
- switch the niche (same layout, new topic)
- switch the colors (3 palettes)
List the 10 variants, each with: its new use, its size and one text change. The aim is to design once and publish 10 times.
Phase 5 — Brand color palette
Role: you are a color psychologist.
My audience: [who]
My brand vibe: [vibe, e.g. calm, productive, for busy moms]
Give me:
1. Hex codes that sell: 1 main color, 2 accent colors and 1 background color
2. What each color communicates
3. Where to use each one in Canva (heading, CTA, background)
4. Two palettes I should AVOID, since they come across as cheap or AI-made
Phase 6 — Font pairs for Canva's free plan
My design topic: [topic]
Give me 3 font pairs available in the free version of Canva:
1. Bold + Minimal, for posts meant to go viral
2. Soft + Clean, suited to planners
3. Professional + Friendly, suited to ebooks
For every pair: the heading font name, the body font name, and when to use bold and which size.
Then tell me what NOT to do, with one rule for font size and one for line spacing.
Phase 7 — Blunt design critique
Role: you are my brutally honest art director, and you have watched 10,000 Canva designs fail.
My design: [describe it, e.g. "a red square icon in the top-left corner, black text centered, a yellow sparkle at the bottom right, too much empty white space"]
1. Score it from 1 to 10 on: clarity, hierarchy, color, readability on a phone.
2. Give me 3 precise fixes I can make in Canva in 5 minutes.
No compliments like "great job!". Be honest.
Creative Agency Website Hero with One Signature VisualNewUI & MockupsCreates a premium hero section for an agency's website that states its specialty and the result it delivers, using bold type, one signature visual, minimal navigation, a clear CTA and a premium contemporary composition.
Design the hero section of a high-end website for "[agency]", a creative agency.
Message: it specializes in [service] and delivers [benefit].
Include:
- bold typography
- one signature visual element
- minimal navigation
- a clear CTA
Composition: premium and contemporary, giving the agency a stronger visual identity.
Mobile App Screen Mockup With Realistic ContentNewUI & MockupsDesigns one screen of your mobile app (home, dashboard, profile, checkout or onboarding) with the primary action within thumb reach, a clear hierarchy, the structure and style you pick, and realistic placeholder content instead of lorem ipsum.
Design the interface of a mobile app.
App
- Name: [app name]
- What it helps users do: [main function]
- Screen to design: [home / dashboard / profile / checkout / onboarding]
Actions
- Primary user action: [main action]
- Secondary actions:
- [action 2]
- [action 3]
- [action 4]
Design
- Interface style: [minimal / professional / playful / premium]
- Screen size: [device / dimensions]
- Put the primary action where the thumb reaches it comfortably on a real phone.
- Clear hierarchy among the navigation, the page title, the main and secondary content, and the action buttons.
- Structure: [card / list / grid / dashboard]
- Fill the screen with believable placeholder content that matches what the app is really for, not meaningless lorem ipsum.
Avoid: too many cards, gradients that are not needed, overly rounded corners, decorative icons, and any UI element without a clear purpose.
Personal Brand Homepage Hero with a Premium PortraitNewUI & MockupsDesigns a modern homepage hero for a named professional, with a premium portrait, a strong positioning statement, one short supporting line, a primary CTA and subtle credibility cues, in your colors with clean type and an editorial layout.
Design a modern hero section for the homepage of [name], who works as a [profession].
Include:
- a premium portrait
- a strong positioning statement
- one short supporting sentence
- a primary CTA
- subtle credibility elements
Style: [colors], clean typography, a refined editorial layout.
Goal: the visitor understands this person's positioning immediately.
Premium SaaS-Style Landing Page as a UI Case StudyNewUI & MockupsGenerates a Behance-quality UI case study of a premium landing page for your business, from hero to footer, shown on desktop, tablet and mobile in realistic browser frames, in the style of top SaaS sites such as Stripe, Linear and Apple.
Subject: the landing page of [BUSINESS NAME], a company working in [INDUSTRY]. Premium and modern.
Page content, as a complete website experience:
- navigation bar and hero section
- call-to-action buttons designed to convert
- services section and a grid of features
- statistics section
- pricing cards
- customer testimonials
- team showcase
- FAQ and footer
- previews on desktop, tablet and mobile (mobile-responsive)
Reference: the best SaaS websites in the world. Draw inspiration from Apple, Stripe, Notion, Linear and Framer.
Style: minimal luxury, elegant typography, soft gradients, subtle glassmorphism where it fits, generous whitespace, premium iconography, photorealistic product mockups.
Presentation: a UI case study of Behance quality. Show the pages inside realistic browser frames, with refined shadows and pixel-perfect alignment, for a finish that feels ultra-premium.