Marcus Hale
Marcus Hale is a concept agency website built to explore the intersection between editorial design and digital storytelling. The goal was to create a bold, minimal, and expressive website that highlights creativity through motion and typography.
Tool
Figma, Framer
Year
2025
Role
Product Designer, Framer Developer
Problem
Agency websites often struggle to balance visual sophistication with usability. Many look good but fail to communicate clarity of service, while others prioritize content at the expense of creativity.
The challenge here was to build a digital presence that:
Feels high-end and editorial, yet approachable and functional.
Balances visual rhythm with user experience consistency.
Fully integrates design and development, ensuring the final product matches the design vision pixel-perfectly.
Competitor Analysis
Studied popular creative agencies to define visual tone and motion rhythm:
UENO – for their balance of layout and motion.
Locomotive – for smooth transitions and typography hierarchy.
Obys Agency – for bold contrast and scroll storytelling.
Superlist – for minimalist visual flow.
Bureau Cool – for their subtle motion and elegance.
Moodboard
The visual direction was inspired by a combination of modern agency websites discovered on Lapa.Ninja.
It focused on:
Minimalism: black-and-white palette for timeless contrast.
Editorial Layouts: generous whitespace and asymmetric grids.
Typography Dominance: bold, expressive headlines.
Cinematic Motion: subtle fades, appear effects, and scroll reveals.
Design Iteration
Throughout the process, multiple layout and interaction tests were conducted to refine balance between content density and motion clarity.
Adjusted grid alignment for better rhythm and readability.
Refined scroll speed and transition timing to create smoother narrative flow.
Simplified certain sections to strengthen visual hierarchy.
Re-tested typography sizes for optimal viewing on large and small screens.
These iterations led to a cleaner, more immersive experience while preserving the editorial aesthetic.
Interactions
Subtle scroll animations across sections.
Page transitions with soft fade-in/out effects.
Hover states that stay minimal and responsive.
Appear effects for headers and text.
Design Kit & Delivery
Color Palette:
Primary: #000000 (Black)
Secondary: #FFFFFF (White)
Accent: Neutral Gray (for soft borders and text balance)
Typography:
Font Family: Inter Display
Headings: Inter Display Bold
Body Text: Inter Regular
UI Components:
Sharp buttons with minimal outline hover effect.
Subtle card shadow depth.
Clean grid with soft section dividers.
Dynamic section headers that appear with scroll transitions.
Outcome
A clean, editorial-style agency website that communicates creativity and confidence through layout, typography, and motion.
Built fully in Framer to ensure seamless performance and design consistency.
Final Delivery
The final delivery included:
A fully responsive Framer website ready for publishing.
Organized Figma design file with grid systems and components.
Documented animation guidelines and scroll behavior.
Exported brand assets and visual kit for easy updates.
The project demonstrates a balance between aesthetic design and smooth interactivity, ready to inspire future client-facing builds.
