10 conceptos de diseño que todo desarrollador web debe conocer

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 de diseño tanto de los estudiantes que han tomado mi taller como de los desarrolladores con los que he trabajado.

Esta lista pretende ser una lista corta de los conceptos que me gustaría que los desarrolladores con los que trabajo entendieran sobre diseño. Está destinado a 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 solo la fachada; es la personalidad 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 malinterpretado. El diseño es la experiencia completa desde el momento en que los usuarios ingresan a su sitio hasta mucho después de que se van.



El diseño es el 'cómo' y el 'por qué' la gente quiere usar el sitio; la velocidad a la que se carga el sitio; la interacción entre desplazarse, hacer clic y tocar; y el ritmo al que ofrece nuevas funciones y contenido. Todos estos conceptos comprenden el diseño.

Debido a que el diseño es más que un aspecto visual 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. Centrarse en el usuario

Los usuarios son primordiales y siempre deben estar a la vanguardia de todas las decisiones 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, hago que los estudiantes 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, están enfocadas 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 visitan y cuándo. ¿se fueron?

Aunque esto funciona bien para los proyectos pequeños del taller, cuando se trata de proyectos más grandes, debe pensar en esta base a mayor escala. Los diseñadores usan personas, 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 solo conocen mejor sus límites, también tienen una idea más clara de todas las posibilidades.

03. El diseño es en detalle

Los detalles son capaces de hacer que un 'buen' diseño sea 'grandioso'. La atención al detalle en la experiencia de un usuario puede ser 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 realmente importa. 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 concentrarse en detalles específicos o cuándo es beneficioso visualizar la imagen completa y más amplia.

04. Al diseñar, esboce a menudo

Los beneficios de bosquejar experiencias de usuario son bien documentada . 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 nueva idea cada treinta segundos. Hacer bocetos 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 iterar ideas rápidamente y ahorrar mucho tiempo experimentando con maquetas o código

Los bocetos le permiten iterar 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 u omitirlos por completo. Todavía veo a muchos diseñadores pasar demasiado pronto de bocetos a un diseño de mayor fidelidad sin antes explorar todas las soluciones posibles.

La mejor parte de dibujar es que cualquiera puede hacerlo. Todo el mundo sabe dibujar cuadros, líneas onduladas y flechas. Estas son las herramientas fundamentales que necesita para comenzar a diseñar, realmente es así de simple. No estamos buscando obras de arte de valor incalculable, y ciertamente no necesitas un título de arte elegante. Solo necesita poder comunicar claramente sus bocetos y el proceso de pensamiento detrás de ellos.

05. Usa espacios en blanco

Parece ser el concepto más difícil de comprender para los desarrolladores: el mayor beneficio de tener la cantidad adecuada de espacio en blanco es darle un descanso al usuario. Las pausas son importantes para procesar información, especialmente cuando hay una cantidad considerable para procesar. Es por eso que tenemos párrafos y oraciones en lugar de un solo bloque largo de texto continuo.

La clave es asegurarse de 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 sola columna de espacio en blanco alrededor para equilibrarla.

Para el espacio vertical, solo use 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 puede utilizar . Por ejemplo, si el tamaño de la 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 como yo quiere un tipo más grande o más pequeño.

Apple usa muy bien los espacios en blanco para resaltar y exhibir sus productos

Apple usa muy bien los espacios en blanco para resaltar y exhibir 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:

  • Crea relaciones entre objetos
  • Proporcionar un sistema básico para la alineación visual.
  • Ayuda a crear un ritmo horizontal y vertical.
  • Ayuda a crear un equilibrio óptico

Todos estos conceptos funcionan en conjunto para permitirle crear un mejor sistema visual para sus usuarios. La cuadrícula que elija afecta la unidad del diseño; elegir una cuadrícula según la que sea más fácil de implementar no será necesariamente la mejor opción de diseño para su contenido y usuarios. Al final, sigue siendo solo una herramienta y solo será tan buena como la persona que la maneje.

Don

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 hace

Es como tener una conversación con un grupo de personas que te están gritando simultáneamente para que hagas cosas diferentes. Solo 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 un flujo para los lectores y debe orientarlos en la dirección deseada.

08. Mantenga una carpeta de inspiración

Mantenga una galería de todas las cosas que lo inspiran visualmente. Estos pueden ser fotos, videos, 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 solo actúa como un punto de referencia, sino que también lo obliga a buscar y evaluar constantemente el diseño. El simple proceso de seleccionar piezas de diseño y guardarlas en una carpeta le obliga a utilizar esos músculos de análisis de diseño.

Mantenga una galería de inspiración. Desde fotos hasta camisetas, poder hacer referencia a fotos, diseños o cualquier otra cosa podría ayudar a generar una idea para sus propios diseños.

Mantenga una galería de inspiración. Desde fotos hasta camisetas, poder hacer referencia a fotos, diseños o cualquier otra cosa podría ayudar a generar una idea para sus 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 soluciones. Todo en la página debe tener una razón para estar ahí y estar resolviendo un problema específico para el usuario o el diseño. Tengo la tendencia a eliminar características del conjunto de características hasta que el problema que estoy resolviendo se vuelve muy evidente.

A veces es difícil para nosotros exponer los problemas en lugar de saltar a una solución. Trabajar al revés realmente ayuda con esto. Al decidir si algo debe ser rojo, por ejemplo, deténgase y piense en las razones por las que lo quería en rojo en primer lugar. Pregúntese: ¿qué estoy tratando de lograr al hacerlo rojo? ¿Cuál fue mi proceso de pensamiento? Puede terminar donde empezó, 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 un fragmento de texto debe moverse o agrandar el logo. Creo que entiendes la idea.

La mejor manera de dar una retroalimentación constructiva es llamar la atención sobre los problemas con el 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 luego respalda su opinión sobre lo que debería cambiar y proporciona una base sólida para lo que es 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 para sugerir una resolución; simplemente no pida agrandar el logo.

Recursos y taller

Si ha encontrado esto interesante, no dude en consultar mi diseño para recursos de desarrolladores y diseñar rutas de aprendizaje . También me encantaría verte en el versión en línea o en el versión presencial del taller.

Palabras: Kyle Fiedler

Kyle Fiedler es un diseñador de thinkbot, que ayuda a crear aplicaciones Rails y 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 revista net número 244.

¿Me gusto esto? ¡Lee esto!

¿Tienes un buen consejo de diseño? Compártelo en los comentarios!