Kickstart Prompt for Web UX & UI Design

Project Brief: Senior Creative Director - Web Experience Design

As a senior creative director at a leading design studio known for crafting bold, opinion-driven web experiences, I am briefing you on a new project for our distinguished client.

Client Profile
Name: ${company_name}
Industry: ${industry}

Current Situation
[If applicable: The client currently has a website at ${url}. The site was launched in ${year} and has not been significantly updated since. It is perceived as outdated and needs a complete overhaul.]

Brand Positioning
The client wishes to be positioned as: "${positioning_statement}" [Example: "The most exclusive luxury hospitality group in Europe that caters to a discerning clientele seeking authentic and personalized experiences"]

Target Audience Analysis
Our primary target audience is:

• Demographic: ${demographic_details} [Example: Ultra-high-net-worth individuals aged 35-65]
• Motivations: ${motivations} [Example: Seeking authentic, immersive experiences; Value privacy and exclusivity; Appreciate bespoke service and attention to detail]
• Pain Points: ${pain_points} [Example: Frustrated with generic, cookie-cutter experiences; Time-poor and expect seamless, streamlined interactions]

Design Direction
The client prefers a design tone that is:

• ${adjective_1} [Example: Subtle]
• ${adjective_2} [Example: Sophisticated]
• ${adjective_3} [Example: Understated]
• ${adjective_4} [Example: Subtle]
• ${adjective_5} [Example: Refined]

Anti-Reference Guidelines
We must avoid:

• ${anti_reference_1} [Example: Generic stock photography of smiling people shaking hands]
• ${anti_reference_2} [Example: Excessive use of bright colors and bold gradients]
• ${anti_reference_3} [Example: Overly complex animations that distract from the content]

Reference Inspirations
We are inspired by:

1. ${reference_url_1} [Example: www.example.com] - We love the way they use whitespace and high-quality images to create a sense of luxury.
2. ${reference_url_2} [Example: www.another-example.com] - The way they use typography to create hierarchy is particularly effective.
3. ${reference_url_3} [Example: www.yet_another_example.com] - The subtle use of animation to enhance user interaction is a great example.

Key Pages to Design

• Homepage
• About
• Services
• Contact
• [If applicable: Special Offerings, Gallery, Blog, etc.]

Design Concept Task
Before writing any code, I would like you to propose a design concept for this project. Please provide:

1. A concise design concept in 2-3 sentences (the "big idea").

   • This should capture the unique proposition of the site and differentiate it from competitors.

2. A layout strategy per page:

   • Describe the overall scroll behavior (e.g., long-form storytelling, modular, card-based).
   • Explain the primary grid approach (e.g., fluid, responsive, fixed-width).

3. Typography and color direction:

   • Describe the primary typeface (font family) and any secondary typefaces you plan to use.
   • Define the color palette, including the primary accent color and any supporting colors.

4. One signature interaction:

   • Identify a key user interaction that will define the site's personality.
   • Describe the user experience and how it will make the site memorable.

5. Tech stack decisions:

   • Identify the primary technologies you plan to use (e.g., React, Vue, Gatsby).
   • Explain why you chose this stack and how it supports the design and functionality requirements.

Please do not code anything yet. The goal is to present a clear and compelling design concept for my review, which will serve as the foundation for the development phase.

I look forward to your creative vision for this project.