# Designing a Creative Agency Website That Wins Clients > How the BASED creative studio website was designed to prove its taste in seconds: a headline that is the brand, the work first, a clear hierarchy and a journal that shows how the studio thinks. - **By**: [Mohamed Amin](https://aminuix.com) - **Published**: Oct 10, 2026 - **Category**: Design ![BASED creative studio website splash screen on a phone](https://aminuix.com/api/media/file/journal-designing-the-based-creative-agency-website-1600x941.webp) A creative agency website has an unfair job. Every other business uses its site to describe what it sells; an agency's site is what it sells. If the website looks ordinary, clients assume the work will be ordinary too. BASED is a creative studio in Saudi Arabia that builds brands for companies like the Saudi Investment Company, Nabtat and Mat Cookies. When I designed its website, the goal was to prove the studio's taste before a visitor read a single paragraph. Here is how the creative agency website was designed. The full project is in the [BASED case study](https://aminuix.com/case-study/based-creative-studio). ## You Have Seconds, Not Minutes Nielsen Norman Group's analysis of [how long users stay on web pages](https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/) found that people often leave within 10 to 20 seconds, and that pages with a clear value proposition hold attention far longer. So the BASED hero carries the whole brand in one line: "Designed beautifully. Shaped purposefully." Heavy type, a small image set inside the headline and a deep red motion photo below say what the studio does and how it does it before anyone scrolls. ## Put the Work First Clients hire agencies for their portfolio, not their adjectives. That is why "Selected Work" arrives right after the hero, as a numbered, asymmetric grid of real projects instead of a slider or a wall of identical thumbnails. The work page goes further: each project is a wide row with its name, the disciplines as small tags, such as Branding, Social Media and Animation, and a large image, so visitors looking for one kind of work can find it at a glance. ## Hierarchy Does the Talking With so much imagery, the layout has to tell people where to look. NN/g defines [visual hierarchy](https://www.nngroup.com/articles/visual-hierarchy-ux-definition/) as the arrangement of elements to show their order of importance, using size, color, contrast and spacing. BASED uses exactly three levels: big grotesque headlines, small monospaced labels like CREATIVE STUDIO and SAUDI ARABIA, and plain body text. One bold red against warm off-white and black marks what matters, so the page feels loud without being noisy. ## Show How You Think Beautiful work earns attention, and the [aesthetic-usability effect](https://www.nngroup.com/articles/aesthetic-usability-effect/) means people also find polished designs easier to use. But clients are buying a partner, not only pictures. NN/g's research on [About Us information](https://www.nngroup.com/articles/about-us-information-on-websites/) shows visitors want to know who is behind a company and what it stands for. BASED answers that twice. "What We Bring" explains its belief that great design begins with clarity and purpose, with five clear promises, from Competitive Edge to Lasting Impact. And the Journal publishes the studio's thinking, like "The Art of Minimalism", giving clients a reason to trust it and search engines a reason to return. ## Sources - [How Long Do Users Stay on Web Pages?](https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/), Nielsen Norman Group - [Visual Hierarchy in UX: Definition](https://www.nngroup.com/articles/visual-hierarchy-ux-definition/), Nielsen Norman Group - ["About Us" Information on Websites](https://www.nngroup.com/articles/about-us-information-on-websites/), Nielsen Norman Group - [The Aesthetic-Usability Effect](https://www.nngroup.com/articles/aesthetic-usability-effect/), Nielsen Norman Group ## other articles - [Designing a Luxury Concierge Website for Mykonos](https://aminuix.com/blog/designing-the-mykonos-concierge-website) (Oct 10, 2026, Design): How the Mykonos Hospitality Group website presents villas, yacht charters, private chefs and cars as one concierge: service cards, photos as the product, sliders guests control and one Book button. - [Designing Trust: The NAL Lawyers Law Firm Website](https://aminuix.com/blog/designing-the-nal-lawyers-website) (Oct 10, 2026, Design): How the NAL Lawyers website was designed for people under pressure: plain Arabic instead of legal jargon, proof before promises, real people, and one clear next step. - [Location Is the Story: Designing the DARAH Real Estate Website](https://aminuix.com/blog/designing-the-darah-real-estate-website) (Oct 9, 2026, Design): How the DARAH real estate website in Riyadh turns location into its strongest argument, and why its social media was designed with the same system as the site.