Share
Si es como yo, estará de acuerdo en que la fase de diseño inicial de un proyecto puede llevar mucho tiempo, estar llena de frustración y rara vez cumple con las expectativas del cliente en la primera reunión de aprobación. ¿Y si hubiera una mejor manera de abordar las cosas? Con Style Tiles, el niño más nuevo en el bloque de metodología de diseño, hay.
Algunos dicen que los días de crear maquetas completas para proyectos de diseño web en Photoshop están muriendo, si no que están totalmente muertos. Otros dicen que el diseño en el navegador no es todo lo que se cree. ¿Pero nos estamos adelantando todos? Tal vez no sea la herramienta que deberíamos tener en cuenta, sino toda la forma en que diseñamos un nuevo sitio y administramos el proceso de aprobación del cliente..
En este tutorial, vamos a echar un vistazo de cerca a Style Tiles, una nueva forma de pensar acerca de las etapas iniciales del diseño, un enfoque de diseño acuñado y concebido por la inimitable Samantha Warren. Vamos a echar un vistazo a lo que son, por qué debería usarlos y guiarlo en el proceso de cómo crear e implementar un mosaico de estilos para su próximo proyecto..
[Style Tiles te permite] ... Presentar a los clientes opciones de interfaz sin hacer la inversión en múltiples maquetas de Photoshop. - Samantha Warren
¿Listo para aprender más? Empecemos.
En su forma más simple, un Azulejo de estilo es una colección de una sola página de elementos comunes que incluyen colores, tipografía, texturas, patrones y características de diseño. Cuando un diseñador de interiores puede presentar a su cliente un panel de estado de ánimo compuesto por trozos de pintura, telas y recortes de revistas, el diseñador web progresivo puede presentar a sus partes interesadas un conjunto de azulejos de estilo.
Lo importante que debe recordar acerca de Style Tiles es que no son una representación literal de cómo se verá el sitio; en su lugar, ayudan a definir el estado de ánimo, el tono y la "sensación" de un sitio en función de lo que ha aprendido del cliente en sus primeras reuniones iniciales.
Otra cosa a tener en cuenta es que el enfoque de Style Tile no es un marco, un proceso definido o incluso una herramienta. En cambio, los Style Tiles se basan en un conjunto de pautas, técnicas y enfoques que le permiten concentrarse en lo que es realmente importante en el diseño (al menos en las etapas iniciales de un nuevo proyecto). Comience por descargar una plantilla de psd para ayudarlo a comenzar, pero siéntase libre de moldear sus azulejos de estilo a su propio flujo de trabajo y estética creativa..
Veamos un par de ejemplos para mostrarle cómo se pueden presentar los azulejos de estilo. Diseñé en reversa dos sitios para mostrarte cuáles son sus azulejos de estilo podría Se han visto como en las fases iniciales de diseño:
Este mosaico de estilo se basa en el recientemente renovado sitio Tuts + Premium.
Como puede ver, la esencia del sitio Tuts + Premium ha sido bien capturada en este mosaico de estilo. Hemos definido con atención algunos de los elementos de diseño de la sección principal de presentación naranja del sitio, así como el aspecto y el aspecto de las publicaciones del blog (es decir, las listas de tutoriales).
Es importante destacar que debido a que el mosaico de estilo no se presenta para un tamaño de pantalla, una orientación o incluso nada distinto de "digital", es fácil imaginar cómo se vería el sitio en cualquier dispositivo, desde un escritorio a una tableta o un teléfono inteligente..
Para un poco de diversión, aquí está mi interpretación de cómo podría verse el sitio http://styletil.es en la etapa inicial del diseño:
Preste especial atención a la sección de adjetivos de este azulejo de estilo. Todos los colores, las selecciones de tipografía y las texturas de diseño hablan de alguna manera con estos adjetivos, asegurando que el estilo del mosaico sea coherente tanto en términos de diseño como de tono y mensaje de marca..
Echemos un vistazo a algunas de las similitudes compartidas de estos dos azulejos de estilo:
Como mencioné antes, los azulejos de estilo no siguen un formato fijo. De hecho, podría incluir casi cualquier cosa, siempre que sea de alguna manera fundamental para el concepto de diseño. Por ejemplo, puede optar por eliminar la sección de 'botones' y reemplazarla con un reproductor de video personalizado, un widget con alguna descripción o algunos elementos.
En resumen, capture la dirección general del sitio en su mosaico de estilos, pero siéntase libre de flexionar sus músculos creativos.
Los azulejos de estilo no son solo otro método de recogida de polvo en la parte inferior de su kit de herramientas de diseño web. Tienen una serie de beneficios bastante impresionantes tanto para usted como para el cliente cuando se implementan correctamente:
Más que nada, Style Tiles mantiene la fase de diseño inicial y el proceso de aprobación del cliente simples.
La presentación a los clientes con una composición de diseño con todas las funciones después de la primera reunión corre el riesgo de perder el bosque para los árboles. En lugar de que el cliente se cuelgue de las pequeñas características de diseño ("hmmm ... Creo que los botones sociales deben ser un poco más 'más populares'), los clientes pueden hablar con confianza sobre cómo la dirección general del diseño refleja sus objetivos (" Me gusta cómo estos colores dan una sensación de confianza, lo cual es perfecto para mi widget Acme ").
Recuerde, nuestros clientes generalmente no son diseñadores, pero a menudo saben lo que les gusta, aunque solo sea en términos generales. Las baldosas de estilo son una herramienta perfecta para permitir que los legos hablen sobre el diseño en su conjunto, sin acumular docenas de elementos de diseño individuales que pueden convertirse rápidamente en algo confuso y abrumador..
Las maquetas de píxeles perfectas toman tiempo. Tiempo real. Horas y horas de tiempo..
No solo tiene que tener en cuenta todo este costo en su factura final, si crea tres composiciones separadas, dos tercios de su tiempo irá directamente a la carpeta "Recursos no utilizados" de su disco duro, por no mencionar dos. las terceras partes del dinero del cliente para esa parte de la factura final también aumentan en humo.
Con Style Tiles, por otro lado, es un proceso muy rápido para iterar diferentes versiones, e igualmente rápido para hacer cambios sobre la marcha. El uso de Style Tiles significa que puede optimizar el proceso de diseño, mantener el impulso en las primeras etapas del proyecto y responder a las solicitudes de cambio en minutos en lugar de horas.
Para poner esto en perspectiva, los dos Azulejos de estilo de ejemplo anteriores me tomaron unos 20 minutos cada uno (y habrían tardado 15 minutos cada uno si hubiera sido mejor nombrar mis capas a medida que avanzaba).
Solo hablo por experiencia aquí: cada diseñador es diferente, pero si está creando tres simulaciones de Photoshop separadas, no es raro crear una que sea Perfecto, uno que es bastante bueno y uno que es bastante promedio, y lejos de tu mejor trabajo. Presenta los tres al cliente, tratando de venderlos en su diseño insignia, e invariablemente eligen el diseño que menos le gusta ... y ahora está atascado codificando un sitio del que no está orgulloso y tampoco lo está. t en el mejor interés del cliente, ya sea.
Incluso si creas tres composiciones perfectas de las que te enorgullecerías codificar, es fácil perderte de forma creativa. Las baldosas de estilo le permiten experimentar rápidamente con diferentes conceptos de diseño y ofrecer alternativas de diseño reales para el cliente en función de sus necesidades definidas.
De acuerdo, digamos que no usa Style Tiles y ha elegido presentarle al cliente un conjunto de comps de diseño completo..
¿Con qué los presentas? ¿Una versión de escritorio de 960px de ancho? ¿Qué pasa con una versión de iPad? No te olvides de una versión para iPhone, también. Ah, pero asegúrate de que también te dirijas a Kindles, Blackberrys y los más de 500 dispositivos móviles con Android que se han producido en los últimos años. ¿Y qué pasa cuando preguntan "cómo se verá este Palm Pilot favorito que he tenido desde que Bush fue presidente?"
Los azulejos de estilo no implican dimensiones ni dispositivo; Solo que el diseño será digital. - Samantha Warren
Hoy en día se accede a la web en cientos de formas, cada dispositivo con su propio conjunto de puntos de interrupción, peculiaridades y características.
Una mejor manera de abordar la fase de diseño inicial del proyecto es eliminar completamente el dispositivo de la ecuación. Lo bueno de Style Tiles es que son completamente independientes del dispositivo..
Por supuesto, deberá abordar cómo el sitio web responderá y / o se adaptará a diferentes dispositivos más adelante en el proyecto, pero en las fases iniciales, simplemente confunde las aguas para mezclar el establecimiento de una dirección de diseño general con la funcionalidad final del sitio web..
Ahora que ha aprendido qué son los Style Tiles y que se han vendido los beneficios de usarlos como alternativa a las composiciones de diseño completo, estoy seguro de que está listo para abrir Photoshop y comenzar a crear su primer Style Tile.
Whoa allí, vaquero. ¡Calma! Antes de comenzar a impulsar píxeles, debemos identificar las necesidades y los objetivos del cliente y traducirlos a conceptos que nos permitan tomar decisiones de diseño informadas..
El proceso de cuatro pasos para crear una baldosa de estilo es el siguiente:
¿Confuso? No se Echemos un vistazo a cada paso en detalle..
Ya sea que se siente en persona con su cliente, hable con ellos por Skype o confíe en el correo electrónico, siempre tendrá que invertir tiempo y esfuerzo para conocer su negocio y los objetivos de su sitio web. Si no lo hace, le enviará por un camino oscuro y aterrador de suposiciones y conjeturas que casi siempre garantizará un resultado final sin éxito y un cliente infeliz..
Este proceso de descubrimiento es mucho más que simplemente pedirles sus colores favoritos y qué otros sitios web les gustan en la red. Si bien podemos tener fácilmente un tutorial completo sobre el cuestionamiento efectivo de los clientes, aquí hay algunas estrategias de descubrimiento para comenzar:
A todos les encanta hablar de lo que es importante para ellos ...
Una vez que consigue que un cliente hable sobre su negocio, a menudo le resultará difícil hacer que se detengan. De hecho, en esta etapa, cuanto más hablen sobre su negocio, mejor será para el resultado final..
Aquí hay algunas preguntas iniciales para animar a su cliente a hablar sobre su negocio:
Una vez que haya eliminado algunas de las preguntas básicas y comprenda mejor su negocio, es hora de profundizar un poco más e identificar realmente las necesidades de su cliente y seleccionar algunos conceptos clave que lo ayudarán a crear Una dirección de diseño en el siguiente paso..
Si bien a las personas a menudo les resulta difícil traducir conceptos y sentimientos abstractos en declaraciones, a las personas les encanta hablar en metáforas, siempre que haga las preguntas correctas..
Aquí hay algunas preguntas que puede hacer para comenzar:
Una vez que haya llegado al núcleo del proyecto del cliente, es hora de establecer un tono de voz de referencia para el diseño general.
Hay diferentes maneras de hacer esto, pero un enfoque efectivo es hacer que el cliente complete una encuesta interactiva. Con un poco de HTML creativo, CSS y Javascript, puede crear un conjunto de controles deslizantes que permiten al cliente posicionar su marca entre un rango de dicotomías:
Mirando este ejemplo, ya estoy pensando en un diseño divertido, colorido y retro inspirado para nuestro cliente ficticio. ¿Qué conceptos de diseño saltan a la mente al ver esto??
Una vez que hemos cuestionado a nuestro cliente, es hora de extraer la esencia del proyecto, el producto y las necesidades del cliente para su sitio web. El propósito de esta parte del proceso es definir una selección de palabras descriptivas que llenarán la sección "Adjetivos" de nuestro mosaico de estilos..
Echemos un vistazo a un ejemplo. Aquí hay algunas declaraciones que nuestro cliente ficticio le dice durante la fase de descubrimiento:
A partir de estas afirmaciones, su trabajo es identificar un solo adjetivo que describa el mensaje clave de lo que le han dicho..
Aquí hay cuatro adjetivos que podríamos usar para resumir las declaraciones anteriores, llegando al corazón de lo que el cliente es De Verdad diciéndonos:
Ahora que hemos definido este conjunto de adjetivos, nos hemos movido a un punto en el que podemos comenzar a traducir palabras al diseño. Si bien puede que tenga una interpretación ligeramente diferente de los adjetivos anteriores a la mía, es muy probable que nuestros diseños compartan elementos comunes, o al menos, podríamos describirnos por qué tomamos las decisiones que tomamos..
¡Uf! Todo hablado? Buenas noticias: hemos hecho el trabajo duro, ahora podemos divertirnos un poco. Una vez que hayamos aumentado la fase de descubrimiento hasta los adjetivos de dinamita de cuatro a seis, es el momento de crear su primer mosaico de estilos..
Diríjase a http://styletil.es y descargue la plantilla de Photoshop (o cree la suya propia).
Los siguientes pasos son totalmente de usted. ¡Se creativo! Supongo que ya tiene un buen conocimiento de Photoshop, por lo que no lo guiaré en cada paso (la plantilla de Photoshop es muy fácil de personalizar), pero la idea principal es crear una gama de elementos de diseño. (colores, texturas, botones, tipografía, etc.) que hablan de los adjetivos a los que llegó en el paso anterior.
¿Desea profundizar en cómo crear una combinación de colores y elegir combinaciones de tipografía para su estilo de mosaico (y mucho más)? Aquí hay algunos artículos de Webdesigntuts + para que revises:
Una vez que haya creado su primer azulejo de estilo, es hora de limpiar la pizarra y iterar. No hay un número de versiones de piedra que deba crear, pero tres o cuatro Azulejos de estilo para cada proyecto es probablemente un buen equilibrio entre explorar suficientes conceptos de diseño independientes y no abrumar a sus clientes con demasiadas opciones.
Recuerde, sus adjetivos pueden ser los mismos para cada estilo de mosaico, pero también pueden ser diferentes, especialmente si ha encontrado dificultades para desglosar las necesidades de su cliente o le han presentado algunas alternativas diferentes para explorar como parte de etapa de cuestionamiento.
Por ejemplo, de nuestras preguntas de descubrimiento del paso dos, es posible que hayamos encontrado tres conjuntos separados de adjetivos que son todos similares, pero lo suficientemente diferentes como para adoptar diferentes enfoques del diseño para nuestro cliente ficticio:
Como puede ver, estos tres conjuntos de adjetivos podrían resultar en una dirección de diseño muy diferente. Aquí es donde los azulejos de estilo realmente entran en su cuenta. Con unos pocos cambios rápidos de color y tipografía, puede crear fácilmente tres iteraciones completamente diferentes en un espacio de tiempo muy pequeño.
Asegúrese de que su cliente sepa qué esperar
Ahora que ha creado su conjunto de azulejos de estilo, es el momento de presentarlos a su cliente. Al igual que con cada paso de este proceso, hay una serie de estrategias que implementar para garantizar que obtenga los mejores resultados y que su cliente esté seguro de continuar con los siguientes pasos del proyecto..
Su cliente no debe esperar que presente un borrador de diseño completo solo para que saque sus azulejos de estilo. Al finalizar la fase de preguntas, muestre a su cliente ejemplos de otros azulejos de estilo que haya creado y explique su valor para establecer la dirección de diseño del sitio.
Asegúrese de que su cliente sepa lo que le mostrará antes de la reunión de presentación!
Preparando la presentación en PhotoDune Deje que su cliente hable libremente sobre sus conceptos de diseño, pero asegúrese de que no los suelte con demasiada facilidad. Anime a sus clientes a ampliar sus declaraciones. Con un poco de preguntas efectivas, podemos convertir declaraciones vacías en declaraciones excepcionales:
Recuerde que mientras diseña sitios web todo el día, todos los días, es muy probable que esto sea algo con lo que su cliente no haya tenido mucha experiencia previa. Sea paciente, ayude a su cliente a aclarar sus declaraciones, guíelos a hacer declaraciones valiosas, pero nunca haga suposiciones basadas en las respuestas generales y directas de su cliente a su trabajo..
Las baldosas de estilo son una mejor alternativa a las composiciones de diseño completo en las primeras etapas del proyecto (es decir, durante el proceso de aprobación del cliente), pero dependiendo de cómo le guste trabajar, una maqueta completa puede ser el próximo paso para el proyecto, si ese es parte de su flujo de trabajo establecido.
Ahora que ha definido la dirección del diseño y que el cliente ha firmado una de sus versiones de Style Tile, puede estar seguro de que su comp estará mucho más cerca de cumplir con las expectativas de su cliente que si se lanzara directamente a abrir Photoshop después de la reunión inicial. No solo la maqueta estará mucho más cerca de aprobar el examen, tampoco es necesario crear múltiples iteraciones del diseño, ya que el trabajo ya se ha realizado con nuestros azulejos de estilo..
Dependiendo de cómo desee abordar el trabajo de su cliente, estos son ejemplos perfectamente viables de flujo de trabajo para el resto del proyecto:
Gracias por seguir conmigo y leer todo sobre qué, cómo y por qué de Style Tiles. Espero que hayan disfrutado aprendiendo sobre ellos tanto como yo disfruté escribiendo sobre presentárselos.!
Las baldosas de estilo son una forma revolucionaria de abordar el proceso de diseño y ayudan a que usted y su cliente formen una dirección clara para el sitio web, incluso desde el proyecto más complicado y complicado..
¿Cuáles son tus pensamientos? ¿Usarás Style Tiles en tu próximo proyecto? Nos encantaría escuchar tus pensamientos en los comentarios.!
Accentsconagua