Home / Image & Visual / UI & Mockups

Blog Analytics Dashboard Showing Lasting Reader Interest

Builds a tidy modular desktop dashboard with a trend line, a table of top posts, a traffic-source donut, a list of recent posts and one annotated insight card, in a sober data-journalism style.

analyticsdashboardbloggingdata journalism
Purpose: a desktop analytics dashboard for a blogger checking which [content type] posts keep readers' attention over time.
Layout: a tidy modular grid with a trend line, a table of the best posts, a donut chart of traffic sources, a list of recent publications and one insight card with an annotation.
Style: sober data-journalism look, panels in off-white, sparing blue accents, crisp labels on the charts.
Text: only "Sources", "Traffic", "Insight", "Top Posts" and "Recent". No other text.
More in UI & Mockups
Accessibility Settings Screen with Live PreviewNewUI & MockupsDesigns a calm single-column settings panel with large controls for text size, contrast, reduced motion, captions and keyboard shortcuts, plus a strip that previews each change straight away.
Purpose: an account settings screen where a reader tailors a digital service to their accessibility needs.
Layout: one column of large controls (captions, text size, keyboard shortcuts, contrast, motion reduction) with a preview strip that updates immediately.
Style: calm high-contrast interface, soft neutral surfaces, precise spacing.
Text: only "Captions", "Text Size", "Shortcuts", "Contrast" and "Reduce Motion". No other text.
Open page
Accessible One-Page Mobile Checkout WireframeNewUI & MockupsGenerates a low-fidelity grayscale wireframe of a vertical mobile screen with cart summary, delivery and payment fields and one large order button, spaced generously with high-contrast outlines.
Purpose: a rough, low-fidelity wireframe of a phone checkout for a small e-shop that wants an accessible purchase flow on a single page.
Layout: one vertical screen, top to bottom: cart summary, delivery fields, payment fields, then one large confirmation button.
Style: clean UX design, grayscale interface blocks, generous spacing, high-contrast outlines.
Text: the only interface text is "Cart", "Delivery", "Payment" and "Place order", each in its own section. Nothing else.
Details: clear hierarchy; form controls aligned accurately.
Open page
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.
  1. 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
  2. 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.
  3. 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.
  4. 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.
  5. 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
  6. 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.
  7. 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.
Open page
Cinematic Website Hero for a Photographer's PortfolioNewUI & MockupsCreates a responsive portfolio hero with a full-bleed image placeholder, a small name area, the photographer's name as headline and a single contact button set over a darkened edge, in a cinematic editorial look.
Purpose: the hero section of a responsive website for a [photography specialty] photographer who wants client inquiries.
Layout: a full-bleed placeholder for an original scene, marked "[HERO IMAGE]". Over one edge, carefully darkened to keep it readable, place a small area for the name, the brief headline "[PHOTOGRAPHER NAME]" and a single button to get in touch.
Style: cinematic editorial web design, natural golden-hour light in the image, refined grain, clear hierarchy.
Avoid: any other text, and logos.
Open page
Class Reunion Registration Page MockupNewUI & MockupsMocks up a clean desktop registration page for a class reunion: a school-reunion heading, date and venue placeholders, Name, Email and Guest Name fields, a Register button and an alumni-photo placeholder.
Use: a clean interface mockup for someone organizing the reunion of the class of [year].
Page (desktop), in clear hierarchy:
- heading "[School] Reunion"
- placeholders for the event date and venue
- form fields labeled "Name", "Email" and "Guest Name"
- a primary button labeled "Register"
- a simple placeholder for an alumni photo
Style: accessible contrast, realistic modern UI spacing, accurate labels.
Avoid: extra text, fake logos.
Open page