Cloud + Workspace Blog — Redesign.
Cloud + Workspace Blog — Redesign.
End‑to‑end visual design for the redesigned Google Cloud and Google Workspace blogs: an AI‑first editorial experience built from one shared system and themed for two brands across every breakpoint.
Diseño visual de principio a fin para los nuevos blogs de Google Cloud y Google Workspace: una experiencia editorial centrada en IA, construida sobre un mismo sistema y adaptada a dos marcas en todos los breakpoints.
Two blogs, two brands, one platform. Cloud and Workspace needed to feel distinct while sharing every template, component and line of code.
Dos blogs, dos marcas, una sola plataforma. Cloud y Workspace debían sentirse distintos compartiendo cada template, componente y línea de código.
On top of that, AI search had to feel native — not a widget bolted onto a news feed — and long technical articles had to stay readable with code, tables, quotes and video.
Además, la búsqueda con IA tenía que sentirse nativa —no un widget pegado a un feed de noticias— y los artículos técnicos largos debían seguir siendo legibles con código, tablas, citas y video.
- The visual proposal for the whole site. Together we designed the complete look and feel for both Google Cloud and Google Workspace blogs — 10 templates, from the homepage with AI search as the front door to a rich article template, search, collections, landings and 404.La propuesta gráfica de todo el sitio. Diseñamos en conjunto la propuesta visual completa de los blogs de Google Cloud y Google Workspace — 10 templates, desde el home con la búsqueda con IA como puerta de entrada hasta el artículo, búsqueda, colecciones, landings y 404.
- Two brands, one system: every template themed for Cloud and Workspace and specced at 375, 768, 1440 and 1920.Dos marcas, un sistema: cada template adaptado a Cloud y Workspace y especificado en 375, 768, 1440 y 1920.
- A component library: once the design was approved, we built a Figma library with every component of the site, so both brands share the same building blocks.Una librería de componentes: una vez aprobado el diseño, construimos una librería en Figma con todos los componentes del sitio, para que ambas marcas compartan las mismas piezas.
- Documentation for development and QA: each component documented for the dev and QA teams, plus a shared design checklist and every page marked ready before handoff.Documentación para desarrollo y QA: cada componente documentado para los equipos de desarrollo y QA, junto con un checklist de diseño compartido y cada página marcada como lista antes del handoff.
Homepage
Home
Article
Artículo
Landing pages
Landing pages
Search results
Resultados de búsqueda
Collections
Colecciones
All templates shipped to development as dev‑ready files, and the shared component library made the second brand almost “free”: a theme switch instead of a redesign.
Todos los templates se entregaron listos para desarrollo, y la librería compartida hizo que la segunda marca fuera casi “gratis”: un cambio de tema en lugar de un rediseño.