Designedย by
No items found.
Subject
Category
Patterns
No items found.
Tech Stack
Added on
March 16, 2023

Wistia Impact Page Structure

Overall Style and Aesthetic

Wistiaโ€™s Diversity, Equity & Inclusion page radiates a modern, accessible warmth, blending playful creativity with polished professionalism. The design strikes a balance between a welcoming, human-centric vibe and clean, SaaS-focused minimalism, inviting all visitors to engage with the content comfortably.

Layout and Structure

The page features a thoughtfully-scaffolded layout, opening with a bold hero statement that instantly frames the pageโ€™s purpose. Content sections unfold sequentially, using ample white space and consistent section breaks to guide the reader. Carefully segmented content (such as commitments, progress, and resources) makes the page easy to scan without overwhelming the visitor.

Visual Elements

Hand-drawn style illustrations add a personal, genuine touch, supporting the DEI message without distracting from the content. Subtle animated accents and rounded iconography create visual energy, while photos of real team members foster an authentic connection. The absence of stock photos enhances trust and relatability.

Color Palette and Typography

A lively yet balanced palette weaves together Wistiaโ€™s brand purples, pinks, and deep blues with energetic accent colors. Large, confident headers in a modern sans-serif font dominate a clear hierarchy, ensuring effortless legibility and focus. Subtle background shades segment sections and support content flow.

User Experience Patterns

Sticky and intuitive navigation empowers users to explore in any order. Calls to action are understated but consistent, guiding users toward additional resources without pressure. Smooth scroll effects and anchored section links maintain orientation, while contact options are easily accessible.

Unique or Notable Design Choices

The playful illustration style makes heavy topics feel approachable, while statistics and transparent reporting indicate accountability. A compelling visual rhythmโ€”alternating text, imagery, and dataโ€”keeps visitors engaged throughout, cementing Wistiaโ€™s commitment to an honest, people-first SaaS culture.
Similar screens

Upgrade to SaaSFrame Pro now to see similar examples.

Monthly

$18 /month

Billed $18 monthly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Quarterly

$16 /month

Billed $48 quarterly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Yearly

$15 /month

Billed $180 yearly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now
Generate a new design based on this screen using your own content.
Content source
Webpage URL
Your content
Design fidelity
Output format
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: Wistia Impact Page Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Wistia - **Category:** Impact Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6de90e8221f130836594_6acb6bcebf2e69a0c03bb20f_cms-3c7d00ebbc437a1f4b8a382d.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.