available for new projects
UK College of Social Work
Project context
Cornett is an independent, female-owned, full-service advertising agency. As the agency launched a new brand, the website needed to reflect it clearly and confidently. The redesign focused on applying existing brand elements through thoughtful layout, motion, and interaction, bringing the brand to life on the web without overusing them. Built in Webflow, the work required close collaboration with development to ensure the final experience matched the design intent.
Impact
Launched Cornett’s new brand website on a fixed conference deadline
Improved clarity and accessibility through refined typography, contrast-safe gradients, and restrained motion
Increased engagement on key pages with intentional motion and interactive client previews
Shipped a high-quality, responsive Webflow site through close collaboration with an outsourced developer and hands-on QA
Design Goals
Apply the New Brand with Precision, Not Excess
01
Apply Cornett’s new brand system to the website using existing brand elements.
02
Use motion and interaction to support hierarchy, pacing, and storytelling.
03
Ensure the final Webflow build matched design intent through QA and collaboration.
Problem
The Brand Had Evolved, the Website Hadn’t
When I designed Cornett's 2022 site, all-caps headings and bold color blocking served the brand well. But as the identity matured, those decisions became limitations. Long case study titles broke the system. The visual weight fought readability. What once worked was now in the way.
The new branding wasn't a simple refresh. It required rethinking how we told stories. This wasn't about swapping fonts or updating colors. It demanded a shift in tone, pacing, and hierarchy. The site needed to support a more sophisticated narrative without losing the brand's energy.
Motion added another layer. Too much would compete with the work. Too little would feel flat. The challenge was finding the right tension, recalibrating the experience without overdesigning it.
01
New logo, fonts, colors, and gradients were not yet expressed on the site.
02
Visual hierarchy relies on color blocks, which make the design look blocky and compete with the button's focus.
03
Accessibility issues with buttons and copy when they were on top of light visuals.
04
Heavy use of all caps reduced readability and made longer titles harder to scan.
Problem Discovery
How the problem surfaced
01
Brand Alignment
Internal discussions clarified that the website needed to clearly reflect the new brand.
02
Experience Audit
Reviewing typography, layouts, and case studies revealed readability and hierarchy issues tied to the old system.
03
Competitive Context
Agency peers overlooked accessibility, prioritizing aesthetics. Some overused motion or avoided it entirely.
Design Decision 1
Typography as Structure and Emphasis
Typography played a central role in establishing hierarchy and tone across the site. We applied Fraunces (Serif) font to H1 and H2 headings and key quotes to bring warmth, character, and emphasis. Italics were used selectively within headlines and quotes to highlight specific words without relying on heavier visual treatments.
Rethink (Sans-serif) font was used for H3 headings, subheadings, and body copy. In certain moments, such as headings placed over block imagery. Rethink font appears in all caps or bold to anchor the layout and provide contrast. This pairing allowed long-form content, especially case study titles, to remain readable and scannable while still feeling expressive.
Limiting all caps to smaller, supporting moments helped reduce visual noise and avoided the “shouting” effect of the previous system, creating a calmer, more balanced reading experience.
01
02
03
04
Design Decision 2
Using Motion to Guide Attention, Not Distract
Motion was intentionally concentrated on the Home and About pages, where first impressions and engagement matter most. To clearly communicate motion intent, I designed both pages in Jitter, ensuring the Webflow developer understood timing, sequencing, and interaction behavior.
01
02
03
Design Decision 3
Dark Mode as the Foundation for Brand Expression
We decided early that the site would live in dark mode, using a black background with white text as the baseline. This created contrast, focus, and a strong canvas for the brand’s more playful elements.
Color and personality were introduced through brand-established gradients, illustrations, shapes, and rounded forms, rather than through excessive animation or color blocking.
Hero sections
featuring gradients and illustrations to set tone and energy
Cornett values cards
using expressive typography and gradient backgrounds
“We’re a full-service agency” graphic
that visualizes Cornett’s departments using existing brand shapes and line elements
Rounded corners and bordered states
for clickable elements like case studies and blog posts, reinforcing interactivity without relying on heavy UI chrome
Accessibility
Expressive, but Responsible
Accessibility was considered alongside brand expression from the start. Design decisions balanced clarity and contrast with Cornett’s new visual language, ensuring gradients, typography, and motion remained readable and comfortable across real content scenarios. When expressiveness risked legibility, we adjusted the system, not the brand.
Accessible gradients + white text
Cornett’s gradients were darkened and softened when used behind smaller text, improving contrast and focus while staying true to the brand.
Choosing readability over style
Fraunces was reserved for large editorial moments. On top of imagery, Rethink in bold was used instead to maintain clarity and scanability.
Motion that supports, not overwhelms
Motion timing and interaction states were tuned to feel intentional, reinforcing hierarchy without introducing visual fatigue.
Collaboration
Staying Close from Design Through Launch
I worked closely with the Art Director and Creative Director to make sure the site genuinely reflected Cornett’s new brand—not just visually, but in tone and behavior. Throughout the build, I partnered with an outsourced Webflow developer and ran multiple QA rounds, reviewing the experience across desktop, tablet, and a wide range of mobile sizes.
When needed, I stepped into Webflow myself to fine-tune spacing, typography, and responsiveness. We reviewed progress regularly with Cornett’s leadership and brand team, and I typically led the site walkthroughs—explaining design decisions, motion intent, and incorporating feedback to move the work forward.
Retrospective
Brand Expression, Done Right
Tight timelines and a limited budget required fast, focused decisions to meet a conference launch deadline. Key takeaways:
Constraints sharpened the work: Prioritizing hierarchy, typography, and motion delivered clarity without excess.
Early web involvement matters: Bringing digital in sooner would have reduced compression later.
Alignment drives speed: Shared understanding with leadership and the brand team unlocked momentum.
Staying close to the build raised quality: Hands-on Webflow work improved responsiveness and preserved design intent.
see also
