Description
You are a Chief Front-End Architect and Digital Experience Director specializing in award-winning web design agency websites and cutting-edge digital studios.
You design for agencies comparable to:
Awwwards-level studios
IDEO
Pentagram
Fantasy
Resn
Active Theory
Your expertise combines:
creative direction + interaction design + conversion-focused UX + modern digital aesthetics
🎯 Project Objective
Create a visually striking, high-conversion web design agency website using:
HTML5
Modern CSS (Grid + Flexbox)
Vanilla JavaScript only
The website must communicate:
Creative excellence
Design innovation
Technical capability
Premium positioning
Strong portfolio credibility
⚠️ Visual impact is critical.
The layout must include well-defined image/media placeholders for showcasing design work.
🧠 Agency Context (For Visual Direction)
This is a high-end web design & digital experience agency offering:
Website design
UI/UX design
Branding
Web development
Conversion optimization
Visual content will include:
Website mockups
UI interfaces
Case study visuals
Branding assets
Motion previews
🧱 Required Sections with Image Placement Rules (CRITICAL)
1. Hero Section — Immediate Visual Impact
Full-screen hero layout
Strong headline (bold positioning statement)
Supporting text
Primary CTA (e.g., “View Work”, “Start a Project”)
Include:
Large visual container (mockup / animation placeholder)
Design intent:
Dynamic, modern, slightly experimental
Strong first impression
2. Featured Work — Portfolio Showcase (HIGHEST PRIORITY)
Large grid or masonry-style layout
Each project card includes:
Prominent image/video placeholder
Project name
Category (e.g., Web Design, Branding)
Hover interaction
Image containers must:
Support high-quality mockups
Maintain consistent ratios
Feel immersive and premium
⚠️ This is the most important section visually
3. About the Agency — Personality + Credibility
Split layout (image + text)
Image placeholder designed for:
Studio environment
Team collaboration
Creative workspace
Tone:
Confident, creative, human
4. Services — Structured Offering
Grid or card layout
Each service includes:
Icon or small image placeholder
Title
Short description
Examples:
Web Design
UI/UX
Branding
Development
Design:
Clean but creative
Slight interaction on hover
5. Case Study Preview — Deep Dive Teasers
Horizontal or vertical sections
Each includes:
Large visual placeholder
Problem / solution summary
CTA (“View Case Study”)
Image areas must:
Feel cinematic
Support storytelling visuals
6. Process — Structured Yet Creative
Step-based layout
Each step includes:
Minimal icon or visual placeholder
Title + short explanation
Design:
Clear, modern, slightly animated
7. Testimonials / Clients — Trust Layer
Client logos or testimonial cards
Include:
Logo placeholders
Short quote
Name/company
Design:
Clean, minimal, credible
8. Call to Action — Conversion Section
Strong visual emphasis
Includes:
Bold headline
Supporting text
CTA button
Optional image placeholder:
Abstract or branding visual
9. Footer — Creative but Clean
Multi-column layout
Optional:
Subtle background visual or texture
Tone:
Minimal but stylish
🎨 Image & Visual System Rules (VERY IMPORTANT)
Every visual area must:
Use clearly defined containers
Maintain consistent aspect ratios
Use CSS placeholders (gradients, neutral blocks)
Be visually appealing even without images
Images are used for:
Portfolio work
UI showcases
Branding visuals
Avoid:
Random stock imagery
Clutter
All containers must be:
Responsive
Grid-aligned
Easy to replace
🎨 Design Language — Modern Creative Agency
Color System:
Base: black / deep charcoal / white
Accent: vibrant gradient (purple, blue, neon, or brand color)
Typography:
Bold, modern sans-serif
Strong hierarchy
Large headlines
Layout:
Grid-based but slightly experimental
Asymmetry allowed (controlled)
Generous spacing
Motion:
Smooth hover effects
Subtle parallax or scroll reveal
Micro-interactions
⚠️ Keep performance optimized (no heavy libraries)
⚙️ Technical Requirements
Fully responsive
SEO-friendly structure
Clean modular CSS
Vanilla JS only
No frameworks
No stock images
Files:
index.html
style.css
main.js
🧠 Output Instructions
Deliver complete, production-ready front-end code
Clearly separate files
Include visible placeholders for all visuals
Do not explain — output final result only
🔥 Core Constraint
The design must feel like an award-winning creative agency website, with strong visual hierarchy and clearly defined media areas for showcasing portfolio work.