Durante los últimos años he estado impartiendo un taller sobre conceptos básicos de diseño visual dirigido a desarrolladores. Como ocurre con la mayoría de las cosas en la web, he encontrado un nivel diverso de conocimiento e interés en diseño tanto de los estudiantes que tomaron mi taller como de los desarrolladores con los que he trabajado.
Esta lista pretende ser una breve lista de los conceptos que me gustaría que los desarrolladores con los que trabajo entiendan sobre diseño. Su objetivo es guiar a los desarrolladores en la dirección correcta como una introducción al pensamiento y la comunicación sobre el diseño.
01. El diseño no es solo visual
El diseño no es sólo la fachada; es la personalidad que hay debajo. Por alguna razón, el diseño tiene el estigma de ser únicamente la parte visual del sitio web. Esto no podría ser más falso o incomprendido. El diseño es la experiencia completa desde el momento en que los usuarios ingresan a su sitio hasta mucho después de que lo abandonan.
El diseño es el “cómo” y el “por qué” la gente quiere utilizar el sitio; la velocidad a la que se carga el sitio; la interacción entre pasar el cursor, hacer clic y tocar; y el ritmo al que ofrece nuevas funciones y contenidos. Todos estos conceptos comprenden el diseño.
Debido a que el diseño es más que aspectos visuales y afecta toda la experiencia, cada persona en un proyecto es un diseñador. Cualquier miembro del equipo que se proponga descubrir cómo interactúa el usuario con el sitio es un diseñador. El frontend, el backend y la gestión de proyectos deberían pensar en el diseño.
02. Esté centrado en el usuario
Los usuarios son primordiales y siempre deben estar a la vanguardia de cada decisión sobre su sitio o aplicación. Los diseños deben permitir a sus usuarios alcanzar sus objetivos con rapidez, eficacia y, lo más importante, placer.
En mi taller, pido a los estudiantes que creen un resumen de diseño inicial después de haber elegido un proyecto en el que trabajar. Aunque les doy pautas simples a seguir, en su mayor parte, se centran en el usuario: quiénes son, qué están haciendo en su sitio y cuál es la sensación que desea que tengan cuando lo visitan y también cuando lo visitan. ¿se fueron?
Aunque esto funciona bien para los proyectos pequeños del taller, cuando se trata de proyectos más grandes, deberías pensar en esta base a mayor escala. Los diseñadores utilizan personajes, narraciones y más para indicar quiénes son los usuarios del sitio y qué quieren hacer en el sitio. Profundice en estas pautas en cualquier forma que adopten en su proyecto y utilícelas para influir en todas sus decisiones de diseño.
El diseñador no debería tener que asumir toda la experiencia del usuario; los diseñadores deberían simplemente liderarlo. En cambio, la experiencia debe ser compartida por todo el equipo (si existe). Hay muchos casos en los que he confiado en los desarrolladores para que me ayuden a descubrir la mejor manera de crear la mejor experiencia de usuario. No sólo conocen mejor sus límites, sino que también tienen una idea más clara de todas las posibilidades.
03. El diseño está en detalle.
Los detalles son capaces de hacer “grande” un “buen” diseño. La atención al detalle en la experiencia de un usuario puede marcar la diferencia entre un usuario satisfecho y uno molesto. Tener el tono correcto de azul o envolver el enlace alrededor de un texto en particular es realmente importante. El problema con los detalles es que es fácil quedar atrapado en ellos. Centrarse en los detalles demasiado pronto es innecesario y puede ralentizar el proceso. Es importante saber cuándo centrarse en detalles específicos o cuándo es beneficioso visualizar el panorama completo y más amplio.
04. Al diseñar, dibuja con frecuencia.
Los beneficios de dibujar experiencias de usuario están bien documentados. Dibujar te ayuda a pensar en el contenido, la jerarquía y el flujo, entre otros aspectos. Los bocetos son baratos, fáciles de hacer y muy rápidos. Debería poder crear una idea nueva cada treinta segundos. Dibujar es también una de las mejores formas de comunicar ideas sobre el diseño, la experiencia del usuario y el flujo de usuarios de un sitio.
Los bocetos le permiten repetir ideas rápidamente y ahorrar mucho tiempo experimentando con maquetas o código.
Mi primer profesor universitario me inculcó esto cuando era estudiante. No nos dejó usar la computadora hasta que vio páginas y páginas de bocetos. Los diseñadores jóvenes tienden a escatimar en los bocetos o a omitirlos por completo. Todavía veo que muchos diseñadores pasan demasiado pronto de los bocetos a un diseño de mayor fidelidad sin explorar primero todas las soluciones posibles.
La mejor parte de dibujar es que cualquiera puede hacerlo. Todo el mundo sabe dibujar cuadros, líneas garabateadas y flechas. Estas son las herramientas fundamentales que necesita para comenzar a diseñar; realmente es así de simple. No buscamos obras de arte de valor incalculable y ciertamente no necesitas un título en arte sofisticado. Sólo necesitas poder comunicar claramente tus bocetos y el proceso de pensamiento detrás de ellos.
05. Usa espacios en blanco
Parece ser el concepto más difícil de entender para los desarrolladores: el mayor beneficio de tener la cantidad adecuada de espacio en blanco es darle un descanso al usuario. Los descansos son importantes para procesar información, especialmente cuando hay una buena cantidad que procesar. Es por eso que tenemos párrafos y oraciones en lugar de un solo bloque largo de texto continuo.
La clave es garantizar que el espacio en blanco tenga una relación con otros objetos de la página, incluido el otro espacio. Si tiene una sola columna de espacio en blanco, asegúrese de que haya otra columna de espacio en blanco alrededor para equilibrarla.
Para el espacio vertical, utilice fracciones del tamaño de fuente del cuerpo. Tiendo a mantener las cosas simples y usar una escala de .25, pero hay varias otras escalas que puedes usar. Por ejemplo, si el tamaño de fuente del cuerpo es 16px(1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Esto permite elegir tamaños de fuente simplemente moviéndose hacia arriba y hacia abajo en la escala a medida que lo hago. Quiere un tipo más grande o más pequeño.
Apple utiliza muy bien los espacios en blanco para resaltar y mostrar sus productos
06. Las cuadrículas no son solo marcos CSS
Loco, ¿verdad? Las cuadrículas encontraron prominencia en el diseño por primera vez en lo que ahora se llama estilo tipográfico internacional.
Se debe utilizar una cuadrícula para:
Crear relaciones entre objetos Proporcionar un sistema base para la alineación visual Ayudar a crear un ritmo horizontal y vertical Ayudar a crear un equilibrio óptico
Todos estos conceptos funcionan juntos para permitirle crear un mejor sistema visual para sus usuarios. La cuadrícula que elijas afecta la unidad del diseño; Elegir una cuadrícula según cuál sea más fácil de implementar no será necesariamente la mejor opción de diseño para su contenido y sus usuarios. Al final, sigue siendo sólo una herramienta y sólo será tan buena como la persona que la empuña.
No piense simplemente en una cuadrícula como un marco CSS. Es una herramienta de diseño que debe usarse con un propósito.
07. Cuando todo tiene énfasis, nada lo tiene
Es como tener una conversación con un grupo de personas que te gritan simultáneamente que hagas cosas diferentes. Sólo un elemento debe tener énfasis en la página: el más importante. Dar énfasis a un solo elemento y tener una jerarquía clara proporciona fluidez a los lectores y debería orientarlos en la dirección deseada.
08. Mantenga una carpeta de inspiración
Mantén una galería de todas las cosas que te inspiran visualmente. Pueden ser fotografías, vídeos, carteles, camisetas y sitios web; cualquier cosa que pueda generar ideas para una solución al problema de diseño particular al que se enfrenta.
Esto no sólo actúa como punto de referencia, sino que también te obliga a buscar y evaluar el diseño constantemente. El simple proceso de seleccionar piezas de diseño y guardarlas en una carpeta lo obliga a utilizar esos músculos del análisis de diseño.
Mantenga una galería de inspiración. Desde fotografías hasta camisetas, poder hacer referencia a fotografías, diseños o cualquier otra cosa podría ayudarte a generar una idea para tus propios diseños.
09. El diseño tiene que ver con la resolución de problemas.
Debe abordar el diseño como un conjunto de problemas que requieren solución. Todo lo que hay en la página debe tener una razón de estar ahí y estar resolviendo un problema específico para el usuario o el diseño. Tengo la tendencia a eliminar funciones del conjunto de funciones hasta que el problema que estoy resolviendo se vuelve muy evidente.
A veces nos resulta difícil plantear los problemas en lugar de buscar una solución. Trabajar al revés realmente ayuda con esto. Al decidir si algo debería ser rojo, por ejemplo, deténgase y piense en las razones por las que lo quiso rojo en primer lugar. Pregúntate: ¿qué intento conseguir poniéndolo rojo? ¿Cuál fue mi proceso de pensamiento? Es posible que termine donde comenzó, pero comprenderá mejor por qué y qué está haciendo.
10. Saber hablar y criticar el diseño.
Una forma segura de molestar a un diseñador es decirle que un bloque rojo debe ser azul, que se debe mover un fragmento de texto o agrandar el logotipo. Creo que entiendes la idea.
La mejor manera de brindar comentarios constructivos es llamar la atención sobre los problemas del diseño. Tenga evidencia basada en los usuarios, el flujo del sitio, los objetivos de diseño y los principios visuales para respaldar los problemas que ve con el diseño. Esto respalda su opinión sobre lo que debería cambiar y proporciona una base sólida sobre lo que significa el éxito tanto para el usuario como para el diseño.
Luego, con suerte, el diseñador trabajará con usted para encontrar una solución al problema. Esta es su oportunidad de sugerir una resolución; Simplemente no solicites agrandar el logo.
Recursos y taller
Si esto le ha parecido interesante, no dude en consultar mis recursos de diseño para desarrolladores y rutas de aprendizaje de diseño. También me encantaría verte en la versión online o en la versión presencial del taller.
Palabras: Kyle Fiedler
Kyle Fiedler es diseñador en thinkbot y ayuda a crear aplicaciones Rails e iOS. Ha estado diseñando y desarrollando, de alguna forma, desde el auge (y caída) de las puntocom y no ha parado desde entonces.
Este artículo apareció originalmente en el número 244 de la revista Net.
¿Me gusto esto? ¡Lee esto!
¿Tienes un gran consejo de diseño? Compártelo en los comentarios!
