← Previous4 / 7Next →

DataPulse Welcome Screen

DataPulseSimple, fun & lightweight web analytics solution

Design with AI

Create a new design inspired by DataPulse Welcome Screen, with your own content.

1Content

2Fidelity to the reference

Keeps its visual language, rearranges freely around your content.

3Your brand Optional

Use the reference style

Brand nameColorsFontsGuidelines

4Output

Prompt 1,081 words

# Design from Reference: DataPulse Welcome Screen

Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.

## Reference

- **Product:** DataPulse
- **Category:** Welcome Screen
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/fa9bd2cca02aac140130-1600.webp)

Analyze the attached screenshot first. If no image is attached, open the screenshot link; if neither is accessible, ask for it rather than guessing.

## Visual Design Context

### Overall aesthetic

- **Style:** Minimal analytics empty state with a white navigation rail and pale-gray main canvas.
- **Character:** Compact monochrome icons, muted setup guidance, one small code area, and restrained blue assistance links.
- **Focus:** A centered waiting-for-data message replaces charts and metrics.

### Page composition

- **Capture and scale:** 2880 × 1642 image px. CSS estimates assume a 2× capture, approximately 1440 × 821 CSS px; scale is unverified.
- **Sidebar:** Approximately 352px wide with workspace identity top, five navigation destinations, and account switcher bottom.
- **Top utilities:** Timeframe label, Last 30 days selector, a small monitor-icon button, and Send Feedback sit near the upper-right.
- **Main state:** Clock-like symbol, waiting heading, explanatory line, and support paragraph centered in the main area.
- **Setup block:** Approximately 488px wide beneath the message, with tracking-code label/copy affordance, white code textarea, and helper sentence.
- **Empty canvas:** Broad surrounding space keeps attention on installation and the missing first pageview.

### Information hierarchy

- **Primary state:** Waiting for first pageview is the dominant message.
- **Explanation:** Muted sentence connects data arrival to tracking-code installation.
- **Assistance:** Blue support link is embedded in a quieter two-line paragraph.
- **Setup action:** Code block and copy affordance provide the practical next step.
- **Navigation state:** Dashboard is dark; Behaviour, Audience, and Acquisition are muted with orange soon badges.

### Typography

- **Family:** Neutral proportional sans serif; exact family is unverified.
- **State heading:** Approximately 22px medium with 28px line-height.
- **Supporting text:** Approximately 14–16px with 22px line-height.
- **Navigation:** Approximately 16px regular.
- **Small labels:** Approximately 10–12px uppercase with slightly open tracking.
- **Code:** Compact approximately 13px text; exact code-font family cannot be verified from the image.
- **Precision:** Sizes, weights, and CSS scale are visual estimates.

### Colors & surfaces

- **Main canvas:** Sampled #F7F7F7.
- **Sidebar / code area:** Sampled #FFFFFF.
- **Muted text:** Sampled #969696.
- **Dark text:** Sampled #1C1C1C and #000000.
- **Feedback surface:** Sampled #E0EBF9.
- **Rules:** Sampled #E8E8E8.
- **Soon badges:** Sampled #FFF2E6 with orange label treatment.
- **Blue accents:** Support and feedback controls use saturated blue; exact semantic blue is not independently sampled here.

### Components

- **Workspace block:** Pale rounded icon tile, small uppercase label, workspace name, and downward chevron.
- **Navigation rows:** Large icon gutter and text, with compact pale-orange soon badges beside three muted destinations.
- **Timeframe selector:** White compact dropdown with thin pale border and small radius.
- **Feedback button:** Pale blue rounded rectangle with blue heart icon and text.
- **Waiting icon:** Gray clock symbol inside a partial pale circular outline.
- **Code area:** White rounded textarea about 488 × 110px with fine gray outline and resize grip; some content is blurred in the source.
- **Copy affordance:** Small uppercase copy label and icon above the field at right.
- **Helper text:** Small gray line below, describing placement in the document head.
- **State limits:** No pageview data, copied-state confirmation, or installation success is visible; blurred code is not reconstructed.

### Visual rhythm

- **Centering:** Waiting message and setup block share the main pane’s center.
- **Vertical sequence:** Icon, heading, explanation, support, then code form distinct groups with generous gaps.
- **Sidebar rhythm:** Approximately 52px navigation pitch; bottom account block is separated by a large empty area.
- **Toolbar contrast:** Small top controls remain peripheral to the large central state.

### Responsive

- **Observed state:** Desktop only; mobile behavior is unverified.
- **Navigation recommendation:** Collapse the sidebar while keeping workspace/account access available.
- **Setup recommendation:** Make the code area fluid with horizontal scrolling for long lines.
- **Toolbar recommendation:** Wrap timeframe and feedback controls on narrow screens.
- **Accessibility recommendation:** Give copy and icon-only controls clear labels and visible focus.

### Adaptation guidance

- **Preserve:** Clear waiting state, concise installation guidance, quiet navigation, and a directly usable code area.
- **Starting geometry:** Approximately 352px sidebar, 488px setup block, 22px state title, and 14–16px support copy under the unverified 2× assumption.
- **Data fidelity:** Supply tracking code from the real product configuration; never reconstruct blurred identifiers.
- **State modeling:** Replace the waiting view only when actual data arrives, with explicit copy/install feedback where appropriate.
- **Implementation recommendation:** Keep technical guidance concise and provide an accessible support route; static pixels do not establish tracking functionality.

## Content

**Instructions:**

Generate realistic example content that fits the selected design reference.

Create appropriate headlines, descriptions, labels, buttons, and supporting copy based on the type of interface being designed.

If a product or business description is provided, use it to guide the content.

Otherwise, invent a plausible fictional SaaS product appropriate for the reference.

Keep the content concise, coherent, and visually balanced.

Do not present fictional statistics, customer names, or testimonials as verified facts.

## Design Direction

**Instructions:**

Use the reference screenshot as the main source of visual inspiration rather than a strict layout template.

Preserve its most distinctive design characteristics, such as typography, visual rhythm, color relationships, component treatments, and overall aesthetic.

Feel free to modify section arrangements, proportions, spacing, and individual components to better suit my content.

Introduce original design decisions where they improve usability, composition, or brand consistency.

The result should clearly reflect the reference's visual language without looking like a direct reproduction.

Follow the visual identity of the reference design.

Use its typography, color palette, component styling, and overall aesthetic as the primary design direction.

Do not introduce an unrelated visual identity.

## Output

**Instructions:**

Generate a high-fidelity visual mockup of the requested interface.

Present the design as a polished, realistic website or product UI screenshot.

Prioritize visual composition, typography, spacing, colors, alignment, and component details.

Use the available image-generation or visual-design capabilities.

Do not replace the mockup with source code, a written design specification, or a textual description.

If direct visual generation is unavailable, clearly explain the limitation.

## Constraints

- Use the actual screenshot as the primary visual reference.
- Preserve essential messaging and factual accuracy.
- Prioritize visual quality and consistency.
- Do not invent unsupported product claims.
- Adapt structure and copy length for visual balance.

Reference imageAttach it to your message: assistants can’t open image links.

Build it in

Opening a tool copies the screenshot so you can paste it with your prompt.