# Google DeepMind

Google DeepMind's new landing page; showcasing cutting-edge technology and advancements in artificial intelligence to benefit humanity.

- Launched: 2023/11/09
- Client: [DeepMind](https://deepmind.com/)
- Studio: [Google Brand Studio](https://emea.brandstudio.goog/)
- Live: https://deepmind.google
- Stack: HTML, CSS, TypeScript, Python, Django, Jinja2
- Page: https://pim.dev/work/google-deepmind

## About the project

In April 2023, Google announced the merger of DeepMind and Google AI's Brain division into a single, focused unit called Google DeepMind. This represented a major consolidation of Google's AI research efforts. As part of this merger, the organisation's web presence needed to be unified under a new URL (deepmind.google) and a refreshed visual identity that reflected the combined entity's mission.

MultiAdaptor had partnered with DeepMind on its brand since 2018. For this rebrand, the collaboration expanded to include Google Brand Studio EMEA and Berlin-based someform Studio. The website launched on November 9, 2023, serving as the primary digital touchpoint for the newly formed organisation.

The new identity was designed to feel lightweight and minimal, but inherently positive, framing Google DeepMind's work and mission in an accessible and engaging way. Key design elements include:

- **Typography:** Two bespoke font families created with type foundry Colophon — DM Serif (representing rigour and integrity) and DM Sans (modern and accessible). Typography is clean and functional with the ability to express ideas through type-play.
- **Colour palette:** A recognisably Google colour palette that responds and adapts to content and context.
- **3D visual system:** Mathematically-inspired three-dimensional shapes created by someform Studio, representing the diversity of roles and disciplines at DeepMind. When shapes meet, imagery is revealed where they overlap, illustrating scientific breakthroughs from unexpected collaborations.
- **Icon library:** A scalable icon library to communicate the complex nature of DeepMind's work and guide users around the site.
- **Motion principles:** Robust but flexible motion principles derived from the brand principles, which could be adjusted to make expert content accessible to a broad audience.

The visual language uses three core component types: solid geometric shapes representing ML models, flexible "agent" forms, and connecting elements — together illustrating relationships between AI systems.

The website was rebuilt from scratch with a strong focus on performance and scalability. The development philosophy prioritised shipping code close to the metal:

- **HTML and CSS first:** Emphasis on HTML and CSS as the foundation, with JavaScript consciously treated as an "afterthought" — only used where truly necessary.
- **Native WebComponents:** Complex JavaScript-driven effects, animations, and logic were implemented using native WebComponents rather than heavy frameworks.
- **Python/Django backend:** The back-end was built with Python and Django, using Jinja2 templating.
- **CMS integration:** Python bindings were set up to connect with Google's internal CMS.
- **TypeScript:** Used for typed JavaScript functionality where needed.

The website was designed to thoughtfully organise a vast array of content, making it accessible to everyone from top scientists, to press, and the general public.

## Challenges

The primary technical challenge was organising and presenting a vast array of complex scientific content in a way that was accessible to diverse audiences — from AI researchers and scientists to journalists and the general public. The solution involved:

- A performance-first approach using semantic HTML and CSS
- Native WebComponents for interactive elements rather than heavy JavaScript frameworks
- Python/Django backend with Jinja2 templating for server-side rendering
- Integration with Google's internal CMS via custom Python bindings

## Results

The deepmind.google website became the primary web presence for one of the world's leading AI research organisations. The site served as the platform for major product announcements, including the Gemini 2.0 launch. According to SimilarWeb data, deepmind.google receives significant traffic as the hub for Google's AI research communications.

The Behance case study for the visual identity garnered 4,424 likes and 58,735 views, indicating strong interest from the design community.

## Credits

- Bradley Griffiths (Technical Lead)
- Craig Rogers (Front End Developer)
- Jenny Yeung (Producer)
- David Buxton (Back End Developer)
- [Ross West](https://rosswest.info/) (Designer)

## Said about the project

> Google DeepMind is live. Bringing this brand into motion was so rewarding. I defined robust but flexible motion principles derived from the brand principles — dialed up or down to make diverse and expert content accessible and relevant to the breadth of Google DeepMind's varied audience.
>
> — Charlie Clark, Motion Designer, MultiAdaptor ([source](https://www.linkedin.com/posts/charlieclarkdesign_google-deepmind-is-live-bringing-this-brand-activity-7152601368489312256-q99a))

## Press

- Stash Media: [Deep Inside the DeepMind Rebrand With someform Studio](https://www.stashmedia.tv/deep-inside-the-deepmind-rebrand-with-someform-studio/) — Coverage of the 3D brand toolkit created by someform Studio for DeepMind
- Motionographer: [A 3D design application for Google DeepMind](https://motionographer.com/news/a-3d-design-application-for-google-deepmind/) — Focus on the standalone 3D design application created for the DeepMind design team
- Visuelle: [Google DeepMind](https://visuelle.co.uk/google-deepmind/) — Feature on someform Studio's brand imagery system for Google DeepMind
- Medium: [How I Recreated the Google DeepMind Homepage with HTML and CSS](https://medium.com/@dev_k8/how-i-recreated-the-google-deepmind-homepage-with-html-and-css-a45016631b4f) — A developer's recreation of the DeepMind homepage, noting the sleek UI update
- MultiAdaptor: [DeepMind Brand Identity Case Study](https://www.multiadaptor.com/work/deepmind/) — Comprehensive case study of the brand identity redesign
- someform Studio: [DeepMind Branding — 3D Visual System](https://someform.studio/DeepMind-Branding) — 3D visual system and brand toolkit development
- Behance: [Google DeepMind Visual Identity](https://www.behance.net/gallery/175456361/Google-DeepMind) — Portfolio feature with 4,424 likes and 58,735 views
- Ross West Portfolio: [Google DeepMind — Design Lead](https://rsswst.cargo.site/google-deepmind) — Design Lead portfolio entry for the rebrand
- Known Studio: [DeepMind](https://knownstudio.co/work/deepmind) — Agency portfolio feature
- Lovers Magazine: [Interview with Ross West](https://spaces.is/loversmagazine/interviews/ross-west) — Interview about his design work at DeepMind
- Matthias Winckelmann: [Google DeepMind — Design Director](https://www.mwinckelmann.com/deepmind) — Design Director and Developer portfolio entry
- LinkedIn: [Google DeepMind is live — Charlie Clark](https://www.linkedin.com/posts/charlieclarkdesign_google-deepmind-is-live-bringing-this-brand-activity-7152601368489312256-q99a) — Motion designer at MultiAdaptor shares the brand launch

---

Index: https://agent.pim.dev/llms.txt