10 ilustraciones de guías de estilo y diseño digital de empresas populares como Apple, Google y Starbucks

Si alguna vez te has preguntado cómo los diseñadores de Apple definieron todos y cada uno de los aspectos menores de iOS a medida que terminaron construyéndolo, entonces podrías estar en el lugar apropiado.

A medida que la innovación tecnológica está en constante evolución, el diseño web continúa para formalizarse más. Los diseñadores y desarrolladores de Internet necesitan crear un código que se pueda traducir sin problemas de la computadora portátil a los productos móviles, hacer que la navegación del sitio sea fácil de entender e innovar otras capacidades del sitio web: todos estos son factores que las empresas estandarizan en las guías de diseño digital.

Las guías de diseño electrónico se han vuelto más prácticas para la imagen general y la memorabilidad de una marca en Internet porque establecieron las expectativas y los puntos de referencia para la pantalla web de la empresa. Son especialmente importantes para los sitios web y los productos que deben ofrecer experiencias de usuario de primer nivel.

En esta publicación, nos sumergiremos en qué son las guías de tipo digital en detalle y le mostraremos algunas ilustraciones impresionantes de empresas conocidas que las han completado correctamente.

Este estilo de información de moda hay que cuidarlo como un manual que marca criterios de estilo y diseño para la existencia digital de una empresa. Su objetivo principal es crear un tipo de estilo universal para el nombre de la marca y garantizar cierta regularidad en todos los canales y medios, donde construye su marca, paleta de colores, tipografía, sugerencias de imágenes, etc.

A diferencia de las guías de moda de los fabricantes que encapsulan el logotipo de una empresa, la afirmación de la misión, las personas del comprador y el tono de voz, las guías de diseño y estilo del diseño web se centran en la presentación digital como UX/UI.

Pero, como diseñador de UX, generalmente he tenido curiosidad, ¿qué puedes encontrar en las guías de moda digital de proveedores influyentes como Apple, Google y Starbucks?

Lo sientas o no, muchos proveedores hacen que esta información esté disponible públicamente, simplemente no hacen que sea bastante fácil de encontrar. Entonces, cada vez que encuentro uno solo, lo agrego a favoritos. Éstos son algunos de los mejores que he encontrado tan significativamente.

Ejemplos de guías de estilo digitales brillantes

1. iOS de Apple

La guía de diseño y estilo de Apple es particularmente interesante porque explica cómo diseñar un sistema de funcionamiento completo. Monterey, una de las versiones más actualizadas 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 buenas y luego continúa discutiendo sobre la lógica que impulsa cada aspecto solitario del diseño del sistema en ejecución. Te da una ventana a la mente de los diseñadores.

2. Google: diseño de materiales

Google fue pionera en un estilo de diseño y estilo conocido como estructura de producto, que existe como un híbrido entre diseño y estilo Skeuomorphic (gradientes, texturas, elementos suaves) y estilo plano (simple, colorido, geométrico). Al hacerlo, combinaron lo positivo aspectos relacionados con todos y cada uno de los diseños y estilos de diseño, aunque evitando los aspectos negativos.

Debido a que Google ha estado trabajando en Product Style durante algunas décadas, es probable que ya haya interactuado con él todos los días: la aplicación Google Calendar, ¿alguien? Este manual de diseño y estilo detalla exactamente qué es Materials Design y cómo lo utiliza Google. Y tengo que decir que es, considerablemente, una de las mejores guías de tipo que he encontrado.

3. Starbucks

Esta es solo una de las guías de diseño y estilo más minimalistas que he visto, y sin embargo, alberga una tonelada de datos prácticos. Pone un énfasis significativo en el código y se puede explicar que fue construido por desarrolladores, para desarrolladores. Carece de elementos vinculados al nombre de la marca, por lo que recorre la línea entre un manual de diseño de un sitio web y una biblioteca de códigos.

4. Atlassian

El conjunto de productos para los que modela Atlassian es gigantesco, por lo que, por medios naturales, tienen una guía de moda gigantesca. Desde elementos básicos (como paleta de colores y tipografía) hasta componentes (como tablas e información sobre herramientas) y una biblioteca de patrones completa, esta guía tiene casi todas las cosas con las que esperaría de un producto de este tamaño.

Quizás lo mejor de todo es que la lógica que impulsa el manual de tipo completo se resume en tres condiciones engañosamente sencillas en la página web de la casa.

5.Mozilla

Este tutorial de diseño electrónico se ocupa principalmente de la marca y las comunicaciones. Pero con Mozilla adoptando últimamente una táctica de "privacidad y red mundial abierta", es sorprendente ver cómo replican esto en su diseño.

La página de inicio de Mozilla también hace una gran carrera al describir cómo se supone que su UX / UI debe ser accesible para personas con discapacidades visuales o discapacidades, algo inclusivo e importante, ya que la tecnología se volverá mucho más revolucionaria.

6. Amortiguador

La guía de tipo de Buffer es pequeña y concisa, probablemente desde la cuadrícula a través de modales, todo en una sola posición. Es un agradable recordatorio de que su tutorial de moda electrónica no tiene que ser llamativo si comunica todos los puntos ideales. Las empresas que buscan un lugar para comenzar pueden considerar las notas de los factores de las pautas de diseño simplista de Buffer y construir su propia base a partir de ahí.

7. Aullido

Si está buscando un ejemplo confiable de una guía de estilo y diseño de sitios web, Yelp tiene eso incluido. No solo es completo, sino que explica su procedimiento de diseño atómico como un libro de cocina y divide los componentes del sitio web como sustancias que contribuyen a un plato.

Este detalle lo tiene todo: tipografía, diseño, variedades, contenedores, navegación y fragmentos de código para cada pieza. Hacen un gran trabajo al explicar qué es cada elemento, dónde se debe utilizar y cómo se debe ejecutar.

8. GOV.Islas británicas

El sitio web de soluciones del gobierno de Inglaterra se ha anunciado comúnmente como una instancia principal de UX de calidad superior. ¿Por qué? Debido a que presenta un estilo y un diseño sencillos y rápidos de usar que se adaptan a demasiadas cantidades de información y hechos.

Si está interesado en lo que puede hacer un diseño verdaderamente limpio y poderoso (pista: generalmente comienza con el uso de colores sólidos, la tipografía y el espaciado), entonces vale la pena echarle un vistazo al manual de tipo de GOV.UK. Considerablemente como el sitio de Internet, es muy, muy simple pero muy esclarecedor.

9. Deviant Art

La nueva información de estilo de DeviantArt es exclusiva simplemente porque realmente es más que una información: es un conocimiento. Cuenta una historia y aprovecha imágenes atrevidas de ancho completo para sumergir al usuario en la experiencia emocional de la marca DeviantArt. Dicho esto, es estrictamente una guía de modelo de marca, por lo que solo se cubren productos como el color y la tipografía.

10. Disco

Color, íconos, tipografía y logo… Disqus lo mantiene más corto y dulce con esta información. Pero todo se puede ofrecer de una manera bastante agradable y organizada. Esta guía se puede utilizar como un gran ejemplo de "el lugar para comenzar" al crear una guía de estilo de su propiedad, ya que aborda todos los aspectos básicos.

¿Experiencia influenciada para hacer su propio manual?

Ahora puede ser tu interruptor. Al aprovechar un tutorial de tipo electrónico en su empresa, puede comunicar el lenguaje de diseño de su marca a diseñadores internos, organizaciones, compañeros de marketing e incluso clientes.

Comience con los factores básicos estándar (sombra, tipografía, logotipo, imágenes), incorpore algunas recomendaciones de uso ("haga y no debe") e incluso incorpore algunas partes netas si es necesario (módulos, plantillas, fragmentos de código. Use ejemplos de otros proveedores para aprender de los mejores. Su fuerza de trabajo generará patrones regulares en muy poco tiempo.