Cómo abordar el diseño para desarrolladores

Aunque pueden estar trabajando en los mismos proyectos y productos, los desarrolladores y diseñadores a menudo trabajan separados en silos. Los desarrolladores suelen considerar el diseño como algo secundario, sin importancia en comparación con la funcionalidad de un producto.

Ese tipo de pensamiento puede ser perjudicial para la relación desarrollador-diseñador. No tener una comprensión básica del diseño puede retrasar a los desarrolladores en sus carreras o evitar que sigan proyectos solo porque no tienen un diseñador a bordo.

Por qué los desarrolladores deberían aprender a diseñar

Si bien el diseño y el desarrollo a menudo se consideran disciplinas separadas, hay personas que dominan ambas. Incluso si alguien solo está interesado en ser diseñador o desarrollador, no ambos, es valioso aprender al menos los conceptos básicos de la otra disciplina.

Hay un par de razones por las que los desarrolladores podrían querer aprender a diseñar, o al menos desarrollar una base básica de conocimientos de diseño.

En primer lugar, es posible que los equipos pequeños no tengan un diseñador dedicado. Además, hay desarrolladores que quieren abordar proyectos completamente solos, que no pueden permitirse contratar a un diseñador (o quieren gastar el dinero en otra parte). Aprender a diseñar sus propios productos, al menos lo suficientemente bien como para arreglárselas hasta que se pueda contratar a un diseñador, es un recurso invaluable.

La otra gran razón para que los desarrolladores aprendan a diseñar es para que puedan trabajar de manera más efectiva con los diseñadores. Es increíblemente frustrante para un diseñador entregar un archivo completamente diseñado para un sitio web o una aplicación que espera que tenga píxeles perfectos en el producto terminado, solo para descubrir que el desarrollador ha cambiado significativamente su diseño.

Si los desarrolladores no entienden los conceptos básicos del diseño, pueden pasar por alto pequeños detalles que hacen que una interfaz de usuario sea particularmente fácil de usar y sin querer sabotear la experiencia del usuario del proyecto. Cuando los diseñadores envían toneladas de correcciones, puede tensar la relación desarrollador-diseñador, sin mencionar la ralentización de la finalización de un proyecto.

Para mejorar las relaciones y el trabajo en equipo entre equipos interdisciplinarios, los desarrolladores se harían un favor aprendiendo a ver los diseños a través de los "ojos de un diseñador" en lugar de mirarlos únicamente desde una perspectiva de desarrollo; dominar esa habilidad mejorará enormemente sus proyectos.

Creando una mentalidad de diseño

Con demasiada frecuencia, los desarrolladores que aprenden a diseñar se centran demasiado en la estética de los diseños que les gustan y quieren emular, en lugar de los principios subyacentes que respaldan esos diseños. Ven cosas como el color y el tamaño de un botón, una fuente específica o la forma en que se usan los bordes sin comprender las razones detrás de esas elecciones.

Comienzan a rociar pintura en las paredes y a decorar el espacio sin entender el propósito de los espacios que están decorando (o incluso sin asegurarse de que se terminen las cosas como la plomería y la electricidad), por así decirlo.

Es importante entender y respetar los principios detrás de por qué los diseñadores toman las decisiones que toman. Cualquier persona nueva en el diseño necesita una comprensión firme de los principios y las teorías que conforman un buen diseño, cosas como los principios de la Gestalt y la jerarquía visual básica, antes de sumergirse y comenzar a rociar pintura por todas partes.

Dicho esto, también es común que los nuevos diseñadores, tengan experiencia en desarrollo o no, se atasquen en la teoría. Pasan tanto tiempo aprendiendo y pensando en cosas que nunca llegan a aplicar realmente lo que están aprendiendo.

Tanto los diseñadores como los desarrolladores tienden a ser perfeccionistas. Pero sacar diseños antes de que sean perfectos (ya que probablemente nunca lo serán) es importante para el proceso. Especialmente los nuevos diseñadores necesitan superar sus inseguridades, exponer su trabajo y aprender de los comentarios que reciben.

Una de las mejores formas de aprender realmente a diseñar es tratar de recrear los diseños de otros. Separar lo que funciona y lo que no, y descubrir por qué un diseño en particular es atractivo es una de las habilidades más valiosas que un nuevo diseñador o desarrollador puede aprender. Darle un giro único a un diseño existente es común en la industria (evidenciado por la función "Rebote" de Dribbble).

Diseñando en el Navegador

Muchos diseñadores se resisten a diseñar directamente en el navegador, ya que generalmente significa que deben sentirse cómodos escribiendo al menos código HTML y CSS básico. Esa es la razón exacta por la que a menudo es ideal para los desarrolladores que se inician en el diseño: ya se sienten cómodos escribiendo código.

Existen herramientas que pueden ayudar con el diseño en el navegador y pueden facilitar la vida tanto de los diseñadores como de los desarrolladores. Los complementos simples del navegador están disponibles para todo, desde seleccionar paletas de colores hasta explorar el código CSS y HTML de otro sitio.

También hay herramientas más complejas como Figma que actúan como una herramienta de diseño con todas las funciones directamente en el navegador. Figma permite a los diseñadores colaborar, enviar activos a las partes interesadas (e incluso permitirles realizar cambios en el contenido y copiar los diseños) y permite que los desarrolladores tengan acceso a los diseños reales en tiempo real. Es una excelente opción para los desarrolladores-diseñadores que desean crear diseños y sistemas de diseño que puedan escalar con el tiempo.

Webflow es otra opción para diseñar en el navegador que a los desarrolladores les puede encantar. Si bien la interfaz de diseño es visual, el código exportado es CSS y HTML limpio y semántico que los desarrolladores apreciarán (no todas las herramientas de diseño visual exportan código limpio). Webflow incluye herramientas para diseño y diseño, así como herramientas CMS y de comercio electrónico integradas, así como opciones de alojamiento.

Uso de color, tipografía y diseño

Antes de sumergirse en los principios visuales del color, la tipografía y el diseño, es importante hablar sobre la usabilidad básica. El diseño estéticamente más agradable del mundo es inútil si no es utilizable.

Uno de los principios de usabilidad más importantes es la idea de consistencia o previsibilidad. Los diseños deben ser lo suficientemente predecibles para que los usuarios puedan entender intuitivamente cómo usarlos. Por ejemplo, texto subrayado en azul para enlaces en los que se puede hacer clic, menús de navegación completos y bien etiquetados, etc. El espacio entre los elementos, la tipografía y el esquema de color también deben ser coherentes.

Otros principios de usabilidad que deben tenerse en cuenta en cada proyecto de diseño incluyen cosas como la prevención de errores (y mensajes de error informativos cuando ocurren errores), lenguaje familiar (use el lenguaje al que la gente está acostumbrada, en lugar de alternativas "bonitas" o creativas que pueden no ser claras). ), flexibilidad y eficiencia, y ayuda fácilmente disponible. Nielsen Norman Group tiene heurísticas de usabilidad adicionales que también deben tenerse en cuenta.

Se deben realizar evaluaciones de usabilidad a lo largo del proceso de diseño y desarrollo para asegurarse de que el producto funcione de la manera prevista por el equipo de diseño y desarrollo, y que los usuarios no se confundan. Las evaluaciones heurísticas implican comparar una lista de principios de diseño predefinidos que un producto debe seguir con el producto real para ver dónde ocurren las desviaciones (y luego corregir esas desviaciones).

Una vez que se ha entendido a fondo la usabilidad en relación con el producto en cuestión, los diseñadores-desarrolladores pueden pasar a los aspectos más visuales del diseño.

Teoría básica del color

La teoría del color es uno de los aspectos más complejos del diseño visual. Cambiar levemente los tonos puede cambiar por completo el impacto visual y el efecto emocional de un color. Es una de las razones por las que muchos diseñadores que han estado en la industria durante años todavía luchan con el color.

Si bien se han escrito muchos libros sobre la teoría del color, hay algunos principios muy básicos que los diseñadores y desarrolladores pueden aprender para comenzar. Combínelos con cualquiera de la multitud de herramientas de diseño de color disponibles, y se puede crear una paleta de colores agradable con bastante facilidad.

Primero, la diferencia entre colores cálidos, colores fríos y neutrales. Los colores cálidos incluyen rojo, naranja y amarillo. Los colores cálidos generalmente serán vibrantes y energizantes. Los colores fríos incluyen verde, azul y morado. Estos colores suelen ser más tranquilos y relajantes.

Los neutrales incluyen blanco, negro, gris, marrón y beige. Agregar blanco, negro o gris a colores cálidos o fríos altera su significado e impacto. El blanco aclarará los colores y, en general, hará que su efecto sea menos intenso o más positivo (por ejemplo, el púrpura se considera un color majestuoso y misterioso, mientras que el lila a menudo se asocia con la primavera y la felicidad). El gris silenciará los colores y puede disminuir su impacto. El negro oscurece los colores y puede hacerlos parecer más conservadores (considere el impacto diferente de un color como el azul brillante frente al azul marino).

Una vez que un diseñador tiene una comprensión básica de los significados de los colores, puede usar herramientas como Coolors, Design Seeds o Colormind para crear una paleta final coordinada para su diseño.

Uso de color HSL

Cuando un diseñador piensa en colores web, a menudo piensa en términos de valores hexadecimales. Si bien esto se ha convertido en el estándar de la industria en términos de colores web, los desarrolladores pueden encontrar que trabajar con valores de color HSL tiene más sentido.

Para la mayoría de las personas (incluidos los diseñadores), los valores hexadecimales aparentemente no tienen correlación entre sí. Dos colores que se ven muy similares pueden tener valores hexadecimales completamente diferentes. Por ejemplo, #68B4D4 y #92C8E0 son tonos de azul bastante similares (uno es simplemente un poco más brillante y claro que el otro) y, sin embargo, sus valores hexadecimales no tienen una correlación aparente.

Sin embargo, sus valores HSL muestran cuán estrechamente relacionados están: #68B4D4 se convierte en HSL (198, 58 %, 62 %) y #92C8E0 se convierte en HSL (198, 56 %, 73 %). El primer número de la secuencia (198 en este caso) indica el tono particular. El segundo número es el porcentaje de saturación (qué tan brillante o vibrante es el color). El tercer número es el porcentaje de claridad (o blanco agregado) del color.

Debido a que las correlaciones entre los valores de color se ven tan fácilmente con HSL frente a hexadecimal, los desarrolladores a menudo descubren que la manipulación de colores a través del código con HSL es significativamente más fácil.

Principios de tipografía

La tipografía es otra área que puede hacer tropezar incluso a los diseñadores experimentados. Pero al igual que la teoría del color, existen algunas herramientas excelentes que pueden ayudar.

La jerarquía tipográfica es una de las primeras cosas que debe aprender un diseñador-desarrollador. La relación entre los diferentes elementos tipográficos en un diseño es vital para que ese diseño sea más utilizable.

Como mínimo, un diseño debe tener tres niveles de jerarquía tipográfica: títulos, subtítulos y fuentes del cuerpo. El título debe ser el más destacado visualmente, los subtítulos vienen a continuación y luego la fuente del cuerpo, que debe ser muy legible.

Muchos diseñadores nuevos se enfocan demasiado en el tamaño de fuente al crear su jerarquía y no lo suficiente en el estilo de fuente. A veces, en lugar de hacer que un título sea significativamente más grande que un subtítulo, por ejemplo, un título podría ponerse en negrita o en mayúscula, mientras que el subtítulo se deja en mayúsculas y minúsculas y peso normal. El color también se puede utilizar para diferenciar entre subtítulos y títulos, y entre esos elementos y el texto del cuerpo.

La combinación de diferentes fuentes también puede confundir a muchos diseñadores y, sin embargo, es una forma común de crear una jerarquía visual. Incluyen elegir fuentes complementarias (los opuestos a menudo se atraen, pero hasta cierto punto, qué tan bien se combinan las fuentes debe determinarse en función de la intuición que se perfecciona con el tiempo), elegir fuentes apropiadas (no use Comic Sans en un documento legal, por ejemplo). ejemplo, o una fuente de visualización para el tipo de cuerpo que no será legible en tamaños más pequeños) y crear contraste entre los tipos de letra (no use dos que sean muy similares).

Otra forma sencilla de combinar fuentes es elegir fuentes de grandes familias de fuentes. Incluso hay familias que incluyen versiones display, serif y sans serif que funcionan bien juntas (como Mrs Eaves y Mr Eaves, Fedra o Museo y Museo Sans). Esta puede ser la forma más fácil de comenzar a experimentar realmente con la combinación de fuentes, ya que están diseñadas para verse bien juntas.

Cuando se trabaja con jerarquías tipográficas más grandes (como agregar H1, H2, H3, H4, etc.), es importante seguir algún tipo de razón en la escala tipográfica. La secuencia de Fibonacci es una escala posible para empezar, aunque existen otras escalas tipográficas establecidas.

Una escala común que se usa tanto en tipografía (y generalmente en diseños de diseño) consta de 4, 8, 16, 24, 36, 48, 72, 108, etc. Estas cifras se pueden combinar de varias maneras para crear un diseño con un aspecto visual agradable. proporciones (por ejemplo, una fuente de 24 píxeles combinada con una altura de línea de 36 píxeles).

Principios básicos de diseño

Desde el comienzo de la web, existen ciertos patrones de diseño que han surgido como "estándares". Los ejemplos incluyen la navegación principal en la barra lateral superior, izquierda o derecha con información adicional u opciones de navegación, y el contenido del cuerpo que ocupa el resto del espacio.

Si bien existen desviaciones definidas de este diseño básico (sin navegación superior, sin barra lateral, dos barras laterales, etc.), esta suele ser una apuesta bastante segura al crear un nuevo diseño. La desviación de este patrón básico solo debe hacerse con un propósito, especialmente por parte de diseñadores-desarrolladores nuevos e inexpertos.

Crear un diseño que sea predecible (esto generalmente significa consistente ) hace mucho por la usabilidad de un producto. Desviarse de lo que un usuario espera ver cuando usa un producto solo debe hacerse cuando las ganancias de usabilidad son mayores que las pérdidas.

Es mejor no usar títulos azules en negrita de 72 píxeles en una página y luego títulos rojos de 36 píxeles en otra para el mismo tipo de contenido, ya que la consistencia del diseño es clave. Del mismo modo, el espacio (relleno) entre el título y el cuerpo del texto que es de 36 píxeles en una sección y luego de 32 píxeles en otra creará una inconsistencia visual. Si bien es posible que una persona no entienda de inmediato por qué la diferencia es discordante, la sentirá.

Similar a la escala tipográfica mencionada anteriormente, los elementos de espaciado en una escala de 4, 8, 16, 24, 36, 48, 72 o 108 píxeles crearán un diseño visualmente agradable. Es una buena idea usar suficiente espacio entre los elementos, darles espacio para respirar; los diseñadores más nuevos a menudo evitan los espacios en blanco y pueden terminar con diseños que se ven desordenados y abrumadores.

Algunos pueden preguntarse por qué la escala está espaciada de la forma en que lo está. ¿Por qué solo hay una diferencia de 4 píxeles entre los dos primeros números, pero un salto de 36 píxeles entre los dos últimos? La razón es simple: a escalas pequeñas, un aumento de 4 píxeles es fácilmente identificable (8 píxeles es el doble de grande que 4, lo que se puede discernir fácilmente). Pero con números más grandes, la diferencia entre 72 y 76 píxeles no se ve fácilmente. Las diferencias más grandes son más fáciles de ver a medida que aumentan los tamaños.

El espaciado constante es una de las razones por las que los enfoques de diseño basados ​​en cuadrículas se han vuelto tan populares. Comenzar con una cuadrícula (generalmente de 12, 16 o 24 columnas) brinda a los diseñadores un marco en el que trabajar que mantendrá la coherencia en todo. Los canalones incorporados entre las columnas también ayudan a garantizar que los diferentes elementos de diseño y el contenido dentro de ellos tengan algo de espacio para respirar.

Conclusión

Tanto los diseñadores como los desarrolladores deben centrarse en ampliar su conjunto de habilidades para avanzar en sus carreras. El tiempo que los desarrolladores dedican a aprender los principios básicos del diseño ahorrará tiempo en el futuro cuando trabajen con diseñadores o creen sus propios productos.

Una comprensión de los principios básicos del diseño (principios de usabilidad, teoría del color, tipografía, diseño y UX) también hará que los desarrolladores sean mejores en el desarrollo . Cuando pueden ver por qué los diseñadores toman las decisiones que toman, los desarrolladores pueden trabajar mejor con los diseñadores para crear productos verdaderamente estelares.

Lectura adicional en el blog de diseño de Toptal:

• Los principios del diseño y su importancia
• ¿Cuánta codificación deben saber los diseñadores?
• Un espectro de posibilidades: la guía de colores de la interfaz de usuario Go-To
• Impulse su UX con estos principios de diseño de interacción exitosos
• Fundamentos de diseño: una guía para la jerarquía visual (con infografía)