By Farzad Kafaei, Founder of Dokmeh Agency
Rebuilding a creative agency website is more than changing its appearance. The site has to show, within moments, what we make, how we think, and what working with us might feel like. For Dokmeh’s new website, we began with a question: how could we turn the studio’s identity into a living browser experience while keeping the content clear, usable, and discoverable? This is the story of the route we chose, the design decisions behind it, and the lessons we learned along the way.
Why rebuild an agency website?
For a web design and development agency, its own site is a piece of its portfolio. Before someone contacts us, they see how we handle loading, typography, navigation, motion, and the presentation of our work. Our aim was not to make every screen move for its own sake. We wanted Dokmeh’s character to come through in the details while making it easy to understand our services and explore the projects.
One design question became central: what if the Dokmeh mark were more than a logo in a corner? What if it accompanied the visitor throughout the story? From that idea came a journey through the introduction, the people behind the studio, selected work, the services we offer, and a clear invitation to talk. Every section needed a reason to be there.
Turning the brand story into a page structure
The homepage follows a deliberate sequence: the opening, the founder, the brands we have worked with, selected cases, moving imagery, services, recognition, and a closing scene. This structure takes a visitor from “Who is Dokmeh?” to “What can they make?” and finally to “How do I start a conversation?” It gives the motion a narrative purpose.
The sequence also shapes the writing. Each section can answer a real question. The studio page introduces the team and our perspective. The projects show the outcomes. The journal gives us room to explain the decisions and lessons behind them. These internal links make the site easier to navigate and clarify how its topics relate to each other.
The logo as a character, not decoration
At the center of the experience is a three-dimensional version of the Dokmeh mark. It is not confined to an opening animation or a static hero image. As the visitor moves between sections, the mark changes position and behavior. Sometimes it sits quietly within the composition; sometimes it helps carry the transition. The goal is to make the site feel like one continuous identity rather than a collection of unrelated screens that happen to share a color.
This idea brings a difficult constraint. Motion should support the words and the work. If the 3D scene overwhelms the headings or every scroll becomes a separate spectacle, the visitor loses the thread. We adjusted the relationship between mark, text, and space section by section. The visual system has to serve the narrative.
Designing motion as a rhythm
Motion on the Dokmeh website has several layers. Smooth scrolling, text transitions, and section entrances need to feel part of the same rhythm. GSAP handles timed movements, while Three.js draws the 3D scene. Together, they make it possible to give each chapter of the page a distinct mood without losing continuity.
The real difficulty is coordination. One section may need more scroll distance because of its animation. The next must still begin at the right moment. A font that loads late can change text measurements and the start of a transition. A visitor may arrive halfway down a page or scroll backward. The experience has to remain understandable in those ordinary situations. For us, motion design meant maintaining continuity under real use, not simply producing an impressive demo.
What happens behind the scenes?
The interface is built with Next.js and TypeScript. Content and page structure work alongside a separate interactive 3D layer. That separation matters: headings, copy, and primary routes need to remain available to people and search crawlers while the visual experience is still loading.
Three.js powers the scene, and the scroll system coordinates its behavior with the rest of the page. The visual language changes in areas such as selected work, services, and the closing section. What feels like one experience is the result of careful coordination between HTML content, images, video, timing, and different device behaviors.
We have deliberately kept implementation details at a high level here. Readers can understand the design and technical choices without exposing production configuration, access details, or code that is irrelevant to the story.
From desktop to mobile: one idea, different behavior
An interactive website has to work beyond the designer’s screen. Viewport size, processing power, touch input, and changing browser chrome all affect the result. The relationship between content and the 3D scene therefore has to adapt. Positions, scale, and spacing are responsive, and the main content journey does not depend on one fixed screen size.
Responsive design is not simply shrinking a desktop composition. A smaller screen demands clearer priorities: legible headings, scannable paragraphs, an obvious way to reach projects, and an uncomplicated path to contact. The visual effects succeed when they reinforce those priorities.
A bilingual journal and the SEO questions it creates
Dokmeh speaks to Persian and English readers, so the site and journal provide two language paths. Translating the article body is only part of the job. Each version needs its own title, meta description, URL, page language, and an accurate link to its equivalent. When those relationships are wrong, readers can land in the wrong language and search engines may misunderstand the pairing.
Editorial content is managed in WordPress and displayed within the main site. This lets the team edit articles without changing the interface code. It also makes publication checks essential: the full text must appear on the public page, the final URL must be correct, the canonical should point to that page, and the English and Persian versions must be connected.
Performance, accessibility, and quality checks
Visual websites often carry larger assets. The answer is not to remove their character, but to decide what is needed immediately and what can load later. The loading stage, scene readiness, and entry of the content are part of the design. Meanwhile, text and links should make sense before every effect has finished.
Quality assurance here is broader than one automated score. We have to inspect downward and upward scrolling, the initial load, direct visits to interior pages, mobile readability, menu behavior, the mark’s position, and the two languages. Automated tools reveal valuable issues, but they cannot replace watching the actual experience.
Three decisions that shaped the result
1. Show the work instead of stacking claims
Agencies naturally want to explain every service on the first screen. For a visitor, a real project often says more than a long list of terms. That is why selected work sits in the main journey, with the project pages offering room for more detail. It gave the writing a useful discipline too: a claim should lead to something people can see.
2. Give video a clear role
Video can carry atmosphere and energy, but it should not be the only way to understand a page. The video section sits beside a textual and visual journey. If someone watches without sound, or the media has not yet loaded, the narrative should still make sense. A large asset becomes a complement rather than a single point of failure.
3. Treat the ending as part of the story
On many sites, the footer is merely a repeated list of links. We saw it as a chance to close the experience. After work and services, the pace settles and the ways to get in touch become clear. A good ending needs both a visual signature and a useful next step.
Publishing is part of the product
An agency site does not end on launch day. New projects should fit into the existing experience, and new articles should reach readers in the right language. That is why the journal, sitemap, metadata, and internal links are part of the product rather than tasks left until after design is complete.
For a substantial article, the page title should make the topic clear, the meta description should explain why to read, and the URL should be short and stable. Section headings help readers find their way through a long piece. If we use a featured image, it and its alternative text should support the actual story. None of this guarantees a Google ranking. It is the foundation of sound, understandable publication.
What this project taught us
The main lesson for me is that an agency website becomes memorable when its central idea appears in the small decisions as well as the large ones. A 3D logo alone cannot create identity. The order of the story, the quality of the writing, the feel of the motion, navigation, loading, and the invitation to contact all matter just as much. A section built solely to show technical skill may be striking without being useful.
A second lesson is that creativity and maintainability can work together. When content is separate from the interface, pages have a clear structure, and each section’s behavior can be managed, an ambitious experience can continue to grow with the team. I see the Dokmeh website as a living product: a place for future projects, stories, and ideas.
Explore the journey
Start at the Dokmeh homepage, explore our projects, and meet the team on the studio page. If you are planning a new website or rethinking an existing one, and want its story, design, and technology to work together, let’s talk.
Farzad Kafaei is the founder and CEO of Dokmeh Agency.