Si alguna vez te has preguntado cómo los diseñadores de Apple definieron cada pequeño elemento en iOS mientras lo creaban, entonces estás en el lugar correcto.
A medida que la tecnología evoluciona constantemente, el diseño web continúa formalizándose. Los diseñadores y desarrolladores web necesitan crear un código que se pueda traducir sin problemas desde la PC a los dispositivos móviles, hacer que la navegación del sitio sea fácil de entender e innovar otras capacidades del sitio: todos estos son elementos que las empresas estandarizan en guías de estilo digitales.
Las guías de estilo digitales se han vuelto más útiles para la imagen general y la memorabilidad de una marca en la web porque establecen las expectativas y los estándares para la visualización web de la empresa. Son especialmente importantes para sitios web y productos que necesitan producir experiencias de usuario de primer nivel.
En esta publicación, profundizaremos en qué son las guías de estilo digitales y le mostraremos algunos ejemplos impresionantes de compañías famosas que las han hecho bien.
¿Qué es una guía de estilo de diseño web?
Una guía de estilo de diseño web, también conocida como guía de estilo digital, es un recurso donde una marca recopila y almacena todos los elementos y reglas de diseño para su sitio web. Se compone de elementos gráficos, tipografía, combinación de colores y formato general para que los desarrolladores hagan referencia y sigan para una composición coherente del sitio web.
Este tipo de guía de estilo debe tratarse como un manual que establece estándares de diseño para la presencia digital de una empresa. Su objetivo principal es crear un estilo de diseño universal para la marca y garantizar la coherencia en todos los canales y medios, donde establece su logotipo, paleta de colores, tipografía, pautas de imágenes, etc.
A diferencia de las guías de estilo de marca que encapsulan el logotipo de una empresa, la declaración de misión, las personas compradoras y el tono de voz, las guías de estilo de diseño web se centran en la presentación digital como UX/UI.
Pero, como diseñador de UX, siempre he tenido curiosidad, ¿qué puedes encontrar en las guías de estilo digital de compañías influyentes como Apple, Google y Starbucks?
Lo crea o no, muchas empresas ponen esta información a disposición del público, simplemente no hacen que sea muy fácil de encontrar. Entonces, cada vez que me tropiezo con uno, lo agrego a favoritos. Estos son algunos de los mejores que he encontrado hasta ahora.
Ejemplos de impresionantes guías de estilo digital
1. iOS de Apple
La guía de estilo de Apple es especialmente interesante porque detalla cómo diseñar un sistema operativo completo. Monterey, una de las últimas versiones de OS X de Apple, tiene una interfaz de usuario más simplificada que su predecesora, Yosemite. Apple demuestra esta distinción sutil pero palpable con comparaciones gráficas realmente agradables y luego continúa hablando sobre la lógica detrás de cada aspecto del diseño del sistema operativo. Te da una ventana a la mente de los diseñadores.
2. Google: diseño de materiales
Google fue pionero en un estilo de diseño llamado Material Design, que existe como un híbrido entre Skeuomorphic Design (gradientes, texturas, elementos ligeros) y Flat Design (simple, colorido, geométrico). Al hacerlo, combinaron los beneficios asociados con cada estilo de diseño, evitando los inconvenientes.
Debido a que Google ha estado practicando Material Design durante algunos años, probablemente ya haya interactuado con él a diario: la aplicación Google Calendar, ¿alguien? Esta guía de estilo detalla exactamente qué es Material Design y cómo lo usa Google. Y tengo que decir que es, con diferencia, una de las mejores guías de estilo que he conocido.
3. Starbucks
Esta es una de las guías de estilo más minimalistas que he visto y, sin embargo, alberga una tonelada de información útil. Pone un gran énfasis en el código y se nota que fue construido por desarrolladores, para desarrolladores. Carece de elementos relacionados con la marca, por lo que recorre la línea entre una guía de estilo de un sitio web y una biblioteca de códigos.
4. Atlassian
El conjunto de productos para los que diseña Atlassian es gigantesco, por lo que, naturalmente, tienen una guía de estilo gigantesca. Desde los elementos fundamentales (como la paleta de colores y la tipografía) hasta los componentes (como las tablas y la información sobre herramientas) y una biblioteca de patrones completa, esta guía tiene casi todo lo que esperaría de un producto de este tamaño.
Quizás lo mejor de todo es que la razón de ser de toda la guía de estilo se resume en tres términos engañosamente simples en la página de inicio.
5.Mozilla
Esta guía de estilo digital se ocupa principalmente de la marca y las comunicaciones. Pero con Mozilla adoptando un enfoque de «privacidad y web abierta» últimamente, es genial ver cómo reflejan esto en su diseño.
La página de inicio de Mozilla también hace un gran trabajo al describir cómo se supone que su UX/UI debe ser accesible para las personas con discapacidades visuales o discapacidades, algo inclusivo y necesario a medida que la tecnología se vuelve más innovadora.
6. Amortiguador
La guía de estilo de Buffer es pequeña y concisa, y va desde la cuadrícula hasta los modales, todo en un solo lugar. Es un recordatorio amistoso de que su guía de estilo digital no tiene que ser llamativa si comunica todos los puntos correctos. Las empresas que buscan un lugar para comenzar pueden tomar notas de los componentes de la guía de estilo simplista de Buffer y crear los suyos propios a partir de ahí.
7. Aullido
Si está buscando un ejemplo sólido de una guía de estilo de sitio web, Yelp lo tiene cubierto. No solo es completo, sino que explica su sistema de diseño atómico como un libro de cocina y divide los elementos del sitio como ingredientes que contribuyen a un plato.
Esta cosa lo tiene todo: tipografía, diseño, formularios, contenedores, navegación y fragmentos de código para cada pieza. Hacen un gran trabajo al explicar qué es cada elemento, dónde debe usarse y cómo debe implementarse.
8. GOV.UK
El sitio web de servicios del gobierno de Inglaterra ha sido ampliamente anunciado como un excelente ejemplo de UX de alta calidad. ¿Por qué? Porque cuenta con un diseño simple y fácil de usar que acomoda cantidades excesivas de información.
Si está interesado en lo que constituye un diseño verdaderamente limpio y efectivo (pista: generalmente comienza con un fuerte uso de color, tipografía y espaciado), entonces vale la pena echarle un vistazo a la guía de estilo de GOV.UK. Al igual que el sitio, es muy simple pero muy informativo.
9. Deviant Art
La nueva guía de estilo de DeviantArt es única porque es más que una guía: es una experiencia. Cuenta una historia y aprovecha imágenes llamativas de ancho completo para sumergir al usuario en la experiencia emocional de la marca DeviantArt. Dicho esto, es estrictamente una guía de estilo de marca, por lo que solo se cubren elementos como el color y la tipografía.
10. Disco
Color, íconos, tipografía y logotipo… Disqus lo mantiene breve y sencillo con esta guía. Pero todo está presentado de una manera muy agradable y organizada. Esta guía podría usarse como un gran ejemplo de «por dónde empezar» al crear una guía de estilo propia, ya que aborda todos los aspectos fundamentales.
¿Te sientes inspirado para hacer tu propia guía?
Ahora es tu turno. Al aprovechar una guía de estilo digital en su empresa, puede comunicar el lenguaje de diseño de su marca a diseñadores internos, agencias, socios publicitarios e incluso clientes.
Comience con los elementos fundamentales básicos (color, tipografía, logotipo, imágenes), agregue algunas pautas de uso («hacer y no hacer») e incluso incorporar algunos componentes web si es necesario (módulos, plantillas, fragmentos de código). Use ejemplos de otras empresas para aprender de los mejores. Su equipo producirá diseños consistentes en muy poco tiempo.
