Guía del diseñador para trabajar con guías de estilo y azulejos de estilo
Creando un identidad de marca no es tarea facil Requiere mucho esfuerzo, pero también es una de las tareas creativas más gratificantes. Proyectos web a menudo mezcla de marca con diseño de interfaz. Esto puede ser confuso porque hay mucho que hacer en ambas áreas. Guias de estilo y azulejos de estilo son excelentes recursos para los diseñadores web, y aunque suenan similares, logran dos tareas diferentes.
En este post, me gustaría profundizar en ambos y cubrir los beneficios que puede obtener de estos activos creativos. No todos necesitarán (o gustarán) crear guías de estilo o mosaicos de estilo. Pero todos los diseñadores deben al menos comprender qué son y cómo funcionan..
Guías de estilo para la web
He leído diferentes opiniones sobre guías de estilo. Algunos dicen que estos son modelos digitales, mientras que otros dicen que las guías de estilo basadas en código son las más útiles..
De cualquier manera, el objetivo de una guía de estilo es el mismo para la web que para cualquier otro proyecto. Se define Patrones consistentes, módulos UI y preferencias creativas Utilizado en el proceso de diseño. Puede obtener medidas muy específicas y precisas de píxeles para ciertos elementos, o puede mantenerse suelto y ofrecer pautas con ejemplos visuales..
No hay una sola manera correcta de hacer una guía de estilo. La única manera incorrecta es crear un recurso que simplemente no puede ser entendido por otros.
El objetivo es crear un activo que resistir el paso del tiempo. Debería ser abierto para ediciones Si se crean nuevos recursos. También debe ser accesible para cualquier persona que se una al equipo para sumergirse en la guía con facilidad..
Una guía de estilo debe ser Tan detallado como sea necesario para el proyecto.. Por lo general incluye activos reutilizables, como tipografía, botones, muestras de color, texturas y elementos de página comunes.
Hemos cubierto recientemente herramientas de guía de estilo de vida Eso puede ayudarte a construir guías de estilo de vida desde cero. Estas guías de vida son más para los desarrolladores frontend, pero pueden ser tan útiles para los diseñadores. Puedes leer más sobre este tema en esta publicación de Smashing Magazine..
Mi recurso favorito absoluto es StyleGuides.io. Cubre la Fundamentos de las guías de estilo para la web., incluso ejemplos vivos y estudios de caso.
La biblioteca de patrones de MailChimp es uno de los mejores ejemplos que puede encontrar en StyleGuides.io. Es una guía de estilo en vivo en línea que define la cuadrícula, tipografía y elementos de la página de MailChimp.
Cuando diseñas una guía de estilo para una empresa web, es común poner todo en línea, pero también puedes crear guias internas, y manténgalos en una intranet local o hospédelos en privado detrás de una página de inicio de sesión de usuario. La forma en que acceda a una guía de estilo realmente no importa. Todos tienen el mismo propósito de transmitir colores, patrones y elementos visuales específicos que coincide con el tema de un proyecto web.
Para obtener más información sobre el tema, consulte estas otras publicaciones sobre guías de estilo:
- Guías de estilo front-end (24ways.org)
- Crear una guía de estilo de sitio web (creativebloq.com)
- Cómo hacer la guía de estilo de diseño web perfecto (dtelepathy.com)
Ramificación en azulejos de estilo
Azulejos de estilo Son una bestia completamente diferente. Estos azulejos son Activos creativos utilizados en la fase inicial de diseño. Al tratar de concretar una estética específica..
El sitio web de Style Tiles fue creado por Samantha Warren, y tiene todo lo que posiblemente necesite saber. Ahi esta sin plantilla específica Para diseñar un azulejo de estilo. Pero los ejemplos de Samantha usan Encabezados y tipos de párrafos, enlaces, patrones, y posibles opciones de color junto con un logotipo de marca.
Cuando trabajas con azulejos de estilo, tu objetivo es finalmente Presenta 2-3 fichas de diferentes estilos. Al cliente o director creativo. Estos azulejos son más detallado que un tablero de humor, todavía mucho menos detallado que una maqueta completa.
Los azulejos deben ser lo suficientemente detallados para dar una idea de la Identidad y estado de ánimo del sitio web.. Samantha anima usando adjetivos para describir cada pieza en detalle.
Los clientes pueden mira a través de los diferentes azulejos, y selecciona sus piezas favoritas. Esta te ahorra tiempo al diseñar porque el cliente ya ha visto los activos que les gustan, por lo que hay menos posibilidades de revisiones importantes.
Aquí hay una gran cita del sitio web de Style Tiles:
La comparación de azulejos de estilo con el kit de herramientas de un diseñador de interiores es una analogía bastante acertada. No desea verter esfuerzo en una maqueta de píxeles perfectos solo para que el cliente se dé cuenta de que odia la mayoría de los colores y fuentes..
En su lugar, usa azulejos de estilo para encontrar un tema común o lenguaje visual para ser utilizado en todo el sitio. Esto puede incluir marca / identidad pero también podría incluir Características de la interfaz de usuario, tales como menús desplegables o botones de CTA.
Deberías usar estos como bienes entregables Al principio del proceso. Una vez que completa una maqueta completa, ya no es necesario que haga referencia al mosaico de estilo. Sin embargo, al principio, los azulejos de estilo pueden ser cruciales para el proceso creativo por ahorrando tiempo al diseñador y Dando al cliente muchas opciones para elegir.
Si quieres profundizar más en azulejos de estilo Revisa estas publicaciones relacionadas.
- Azulejos de estilo y cómo funcionan
- Azulejos de estilo: una alternativa a los diseños completos
- Creación de azulejos de estilo: un enfoque fácil para una dirección de diseño
Guías de estilo vs. azulejos de estilo
La diferencia entre las guías de estilo y los azulejos de estilo es vaga pero definida. UNA guía de estilo es mucho más detallado y debe ser utilizado como guía de referencia continua para el equipo creativo. UNA azulejo de estilo puede ser utilizado como un moodboard a trazar ideas visualmente para usted o para el cliente. A menudo se utilizan para explorar ideas, y una vez que el proyecto está terminado, no sirven para nada.
Los azulejos de estilo son a menudo mucho más ásperos alrededor de los bordes, y se usan únicamente en el proceso creativo temprano. Una guía de estilo está destinada a ser utilizada durante todo el proceso de diseño y incluso después para futuras referencias para otros diseñadores que puedan trabajar en el sitio.
Ambos tienen sus ventajas e inconvenientes. Azulejos de estilo son rápido y divertido, pero efímero en naturaleza. Las guías de estilo son completo y comportarse como documentación visual, pero ellos tambien requiere mucho trabajo.
Entonces, ¿cuál debería usar? En definitiva depende del proyecto.
Proyectos más pequeños tales como para sitios web de pequeñas empresas funcionan mejor con azulejos de estilo. La construcción de una guía de estilo completa para un sitio de pequeñas empresas requeriría demasiado trabajo y horas facturables. Esto probablemente no vale la pena el costo para la mayoría de los clientes.
Sin embargo un proyecto grande como rediseñar el NY Times se beneficiaría de los mosaicos de estilo y las guías de estilo.
Encontrar un lenguaje y estado de ánimo. Para un nuevo proyecto siempre es un proceso valioso. Esto es lo que hace que los azulejos de estilo. perfecto para casi todos los escenarios.
También puedes arreglártelas sin crear ninguno de estos activos. Algunos diseñadores van desde los alambrados a maquetas detalladas. Y algunos clientes ni siquiera quieren una guía de estilo porque no se utilizará.
Trabaja por proyecto y decide qué es lo mejor para cada uno.
Ejemplos en vivo
Vamos a terminar esto cubriendo ejemplos Tanto de guías de estilo como de azulejos de estilo. Encontré estos diseños mientras exploraba Dribbble y creo que ejemplifican la calidad que desearías en tus propias guías de estilo o azulejos de estilo..
Guías de estilo
Esta increíble guía de estilo Airbnb fue creada por Derek Bradley. Es muy simple pero ilustra claramente el Principales patrones, colores y elementos de la página. para ser encontrado en el diseño.
Aquí hay una guía de estilo digital mucho más grande creada por el diseñador Naoshad Alam. Este ejemplo es mucho más organizado con secciones para colores, tipografía, formas, elementos de interfaz y otras características de la interfaz de usuario.
Guías de estilo más detalladas pondrían todos estos elementos de diseño en la web, y incluir fragmentos de código para cada uno.
El diseñador Cupi Wong hizo esta guía para AfterShip. La tipografía, los botones, las opciones de color y los elementos de página comunes están cuidadosamente elaborados, y organizados juntos en secciones.
Esto también podría ser portado a la web, y construido mucho más grande como documentación de referencia en línea..
El diseñador de IU Greg Dlubacz compartió su propia guía de estilo de UI para un proyecto web. Esta cosa es seriamente enorme. La vista previa a pantalla completa abarca 21,000 píxeles de alto!
Absolutamente una de las mejores guías de estilo digital que he visto. Esto también podría ser portado a una página de documentación en línea para que los miembros del equipo hagan referencia..
Azulejos de estilo
El diseñador de UI / UX, Abdus Salam, creó este mosaico de estilo para el sitio web de una tienda de alimentos orgánicos. Es muy básico con elementos de diseño plano, algunas características menores de la interfaz de usuario, y un paleta de color.
El diseñador Adrian Cantelmi realmente fue detallado con sus azulejos de estilo de desinversión. Tiene colores y tipografía pero también incluye. ilustraciones vectoriales.
Estos vectores ayudan a definir la marca, el estado de ánimo y el esquema de color general del sitio web.
El rediseño de los Asesores de la Copa Mundial tiene su propio estilo de azulejos con características muy básicas. Algunos iconos, algunas opciones de color, junto con un par de diseños de botones. Sencillez es el nombre del juego.
Si puede tener una idea de cómo se verá el sitio de un vistazo entonces lo estás haciendo bien.
Este es un ejemplo divertido de un mosaico de estilo rechazado utilizado para un proyecto de viaje. El diseñador Brennan Gleason solo proporciona una pequeña muestra de la baldosa, pero todavía puede tener una idea del ambiente del sitio web.
Ultimas palabras
Si busca en la web, encontrará muchos más ejemplos, consejos y recursos para Guías de estilo de construcción y azulejos de estilo.. Pero espero que este artículo sea una introducción a ambos y le permita comprender y crear estos recursos de diseño con fluidez..
