Style Tiles proporciona una forma fresca y productiva de abordar el proceso de diseño. Le permiten concentrarse específicamente en la personalidad y el estado de ánimo de un proyecto sin preocuparse por las decisiones de diseño específicas.
Hoy le mostraremos exactamente qué son los Style Tiles, por qué debería usarlos y cómo incorporarlos en su proceso de diseño. Sigue adelante y puedes cambiar la forma en que diseñas para siempre.
¿Qué son los azulejos de estilo?
Style Tiles es una forma de desarrollar la identidad visual de un sitio independiente de la complicada logística que entra en juego cuando en realidad se trata de desarrollar una maqueta completa. La idea viene de Samantha Warren, una diseñadora y bloguera extremadamente talentosa de Badass Ideas.
En lugar de andar por las ramas, vamos directamente al aspecto que tiene un azulejo de estilo. Es difícil de describir, así que aquí hay un ejemplo del sitio web de Style Tiles.
Si te guía el diseño visual, deberías poder ver de inmediato la utilidad de esta herramienta. Es muy simple e increíblemente útil. Aquí se han tomado muchas decisiones importantes sobre tipografía, color, estilo de botones y más. Si estuviéramos construyendo un sitio web basado en este foro, tendríamos una idea sólida de la dirección visual que seguiríamos.
El otro lado de los wireframes
El sitio web de Style Tiles los describe como un elemento intermedio entre un panel de estado de ánimo, que es demasiado vago, y una maqueta completa, que es demasiado precisa. Personalmente pienso en ellos de manera un poco diferente: como la otra cara de los esquemas de alambre.
Piénsalo, tu objetivo con wireframes es enfocarte en un diseño sin estilo. Simplemente estás pensando en cómo se estructurará una página, cuáles serán las proporciones de tamaño entre los elementos, etc. El uso de una estructura alámbrica simplificada te permite desarrollar rápidamente muchas ideas porque no te distraes con cosas como los colores, las sombras, Patrones, fuentes e imágenes.
Una baldosa de estilo es lo opuesto a esto, lo que significa que proporciona un complemento perfecto para este proceso. Aquí puede abandonar las nociones de diseño y concentrarse completamente en lo que podría considerarse la "sensación de marca". Esas decisiones de diseño específicas que dan al sitio una identidad única.
Tres razones para usar azulejos de estilo
Ahora que ya conoce bien qué son los Style Tiles, repasemos algunas de las razones principales por las que debería pensar en incorporarlas a su flujo de trabajo.
Desarrollo visual veloz de ideas
La primera razón por la que los azulejos de estilo son geniales es que deberías poder sacar varios de ellos en un período de tiempo relativamente corto. Las maquetas completas pueden tardar horas o incluso días en producirse, pero estas tablas son simplemente gustos pequeños del diseño más amplio y solo deberían llevarle una fracción del tiempo.
Esto significa que puede crear fácilmente de tres a cinco ideas únicas para la personalidad de su sitio, luego elegir la que mejor funcione o mezclar y combinar elementos de cada una.
La retroalimentación del cliente es más fácil de integrar
Cuando pasas una semana desarrollando el primer vistazo de un proyecto a un cliente y te envían de vuelta al tablero de dibujo, puede ser una experiencia desalentadora. Todo el tiempo y el esfuerzo que invirtió en el proyecto se eliminó en una sola reunión y se queda atrás en la plaza uno.
Con Style Tiles, puede incluir a su cliente en el proceso de diseño en una etapa temprana. Muestre unas cuantas fichas diferentes e inmediatamente se darán una idea de lo que está sucediendo y es probable que les guste la oportunidad de saltar y proporcionar comentarios.
En esta etapa, es increíblemente fácil realizar pequeños ajustes o incluso cambios globales a gran escala sin sentir que ha perdido la mitad de su tiempo y presupuesto.
Perfecto para un flujo de trabajo sensible
A medida que el diseño web sensible se vuelve más y más popular, los diseñadores se ven obligados a repensar sus flujos de trabajo. El desarrollo de comps estáticas para un diseño que se adapta continuamente es una empresa difícil e incluso infructuosa.
Como alternativa, los azulejos de estilo le permiten definir el aspecto de sus elementos sin preocuparse por las dimensiones específicas del dispositivo o los puntos de interrupción. Una vez que tenga esto resuelto, puede conectarlos a una cuadrícula receptiva.
Hagamos uno
Hablar es barato, veamos si podemos usar este proceso para encontrar algo valioso. Si quieres empezar desde cero, genial. Pero si está buscando un buen punto de partida, asegúrese de descargar la plantilla gratuita del sitio web de Style Tiles. Esto es lo que parece:
Como puede ver, hay varios elementos en su lugar para ayudarlo a tener una idea general del diseño, así como los tipos de elementos en los que debería estar pensando en esta fase del proceso de diseño. Tenga en cuenta que hay un consejo muy importante en la esquina inferior derecha de esta plantilla: "Sé creativo, no solo uses esta plantilla como está!"
Es tentador correr solo con lo que se te ha dado aquí, pero no permitas que esta herramienta afecte tu creatividad, en realidad está destinada a mejorarla.
Como proyecto de ejemplo, vamos a crear un mosaico de estilos para mi lugar favorito de burrito: Chipotle. Fingiremos que o no tienen un sitio o dependen de nosotros para crear una apariencia revisada.
Logo
El primer paso que daremos es incluir un logotipo. Desde el principio nos encontramos con la necesidad de cambiar la plantilla para nuestros propios fines. El contenedor del logotipo de arriba es rectangular y el logotipo de Chipotle es redondo. Afortunadamente, la plantilla de PSD está muy bien organizada, por lo que me resulta fácil apagar todos los elementos del encabezado y soltar nuestro logotipo redondo.
Fondo
No hay un orden establecido que seguir para actualizar los elementos, solo salte de una pieza a otra a medida que las ideas le lleguen. Un siguiente paso lógico para mí fue el fondo. Como Chipotle es un restaurante al estilo del sudoeste, le di al fondo una especie de sensación del viejo mundo.
Estamos a solo dos pasos y ya hemos tenido un impacto dramático en la plantilla. Podemos ver claramente cómo la guía de estilo toma forma a medida que emerge una personalidad de marca.
Colores
Ahora que tenemos un logotipo y un fondo en su lugar, podemos comenzar a ver un poco de una identidad de color. Aprovecharé el área de color existente para expandir esto en una paleta completa.
Tipografía
Después de los colores, sigo saltando y aterrizo sobre la tipografía. Me gusta mucho que la plantilla no solo te dé un lugar para mostrar algún tipo de ejemplo, sino que también tenga pequeñas etiquetas para que puedas tomar nota de las fuentes que estás usando.
El producto terminado
Empujando hacia delante, seguí iterando y ajustando hasta que aterricé en algo que podía considerar como una ficha terminada. En el camino puse los consejos sobre cómo cambiar la plantilla a un buen uso y reformateé completamente el diseño manteniendo las secciones que me parecieron útiles. Esto es lo que se me ocurrió:
Como puede ver, está muy lejos de la plantilla original. Utilicé el PSD proporcionado como punto de partida para mis ideas, no como una muleta. Ahora tengo una base sólida desde la cual comenzar cuando empiezo a fusionar el diseño y el estilo en un producto terminado.
Conclusión: Un soplo de aire fresco
Últimamente, he estado bastante atrapado con nuevas palabras brillantes como CSS3, HTML5 y diseño responsivo. Como resultado, en realidad no me he metido en el diseño puro por un tiempo y explorar la utilidad de Style Tiles fue solo el recordatorio de que necesitaba que aquí es donde reside mi verdadera pasión.
Me encantó tener la libertad de desarrollar un estilo visual sin preocuparme por si la página de inicio debe tener un diseño de tres o cuatro columnas. Es muy refrescante poder concentrarse en partes específicas del proceso de diseño sin ser intimidado o distraído por el mayor alcance de todo el proyecto.
Un gran agradecimiento a Samantha Warren por compartir su proceso y la plantilla de inicio. Creo que Style Tiles va a ser una parte muy importante de mi proceso de ahora en adelante.
Deja un comentario abajo y déjanos saber lo que piensas. ¿Utiliza paneles de humor, estructuras de alambre o cualquier otra herramienta similar en su proceso de diseño? ¿La introducción de Style Tiles mejoraría la forma en que trabajas? ¡Queremos saber!
Imagen alámbrica cortesía de Joe Crawford.