Cree su biblioteca visual: sugerencias y desafíos de diseño

Publicado: 2020-12-17

Una de las grandes diferencias entre un diseñador experimentado y uno junior es la biblioteca visual que construye.

¿Qué es una biblioteca visual?

Esto es lo que tiene en la cabeza cuando se trata de elementos de la interfaz de usuario y prácticas de UX. Lo que ha construido y comprende cómo funciona. Cuanto más rica sea su biblioteca, más rápido podrá encontrar soluciones en el momento.

Pongamos un ejemplo: como diseñador, tienes la tarea de crear un nuevo sitio web.

¿Qué sitio web? Podrías preguntar. Bueno, esos son todos los requisitos que tienes. Un desafío de un compañero de trabajo. Oh, también tienes una hora para hacerlo. Este es un desafío que hicimos en DevriX y aquí está uno de los resultados después de 3600 segundos:

Diseño de Alex Dimitrov

No hubo mucho tiempo para considerar el tema, por lo que estaba directamente en el encabezado. ¿Qué componentes tiene un encabezado?

  • Un título seguro
  • Navegación
  • Barra de búsqueda
  • Algunos enlaces sociales
  • Algunos botones de llamada a la acción, principalmente para registrarse y / o crear una cuenta
  • Un poco de navegación para hacerlo interesante.

¿De dónde vino todo esto? Antes era una página en blanco. Para empezar, ni siquiera había un tema. Todo sucedió debido a la biblioteca visual que se había creado en la mente del diseñador a lo largo de los años de creación de sitios web, aplicaciones y todo lo que los rodeaba.

¿De cuántas formas se puede diseñar un encabezado? Cientos de formas. Hay muchos tipos de elementos, topografías, colores, superposiciones, botones, elementos y mucho más. Es un experimento interesante de hacer.

Cómo construir una biblioteca visual

Si bien la respuesta más simple es "hacer más diseños", no es muy satisfactoria simplemente porque hay mucho más. Lo más importante es la diversidad. Construyendo diferentes diseños. Una forma directa de abordar esto sería rediseñar los grandes sitios.

Aquí están algunos ejemplos:

Facebook:

Fuente de la imagen: Dribbble

Gmail:

Fuente de la imagen: Dribbble

Gorjeo:

Fuente de la imagen: Dribbble

Hay tantos ejemplos. Cuanto más complejo sea el diseño, más rápido progresará. Pero, ¿cómo funciona exactamente?

Echemos un vistazo a una lista como ejemplo. Una lista puede tener un encabezado que la nombre, puede tener íconos que pueden ser de color, de diseño similar o diferente. También puede tener un título y un subtítulo más grandes, tal vez una etiqueta con un número. Luego, puede agregar estados de desplazamiento, elementos que se pueden seleccionar o deshabilitar, etc. Con todas estas variaciones, puede hacer una amplia variedad de diseños de listas.

Fuente de la imagen: Dribbble

Poder crear tantas configuraciones y diseños es tener una buena biblioteca visual. Saber que puedes hacerlo de esa manera. Es como tener a alguien a tu lado que te dice “Dibuja un cuadro”, luego “Agrega un título” y lo haces sin pensar. Todas estas decisiones se toman porque lo ha hecho antes. De hecho, también sigue los fundamentos del diseño, pero no puede buscar sus notas o libros todo el tiempo. Es como entrenar a una IA: necesitas construir patrones usando un "orden de elementos exitoso".

Todos los artistas visuales necesitan crear bibliotecas

Un claro ejemplo de esto es Kim Jung Gi, un genio que puede hacer obras de arte realistas desde cualquier perspectiva.

Arte de Kim Jung Gi

En una entrevista cuenta cómo a lo largo de toda su vida ha estado mirando todos los objetos que le rodean, intentando comprender su forma y dibujarlos desde una perspectiva diferente. Con esta habilidad, ahora es capaz de dibujar todo lo que ves en la imagen de arriba simplemente a partir de una hoja de papel en blanco sin referencias.

O mejor dicho, sin referencias a las que pueda llegar porque sus referencias están en su mente, su biblioteca visual. Este es un ejemplo del trabajo de un maestro, que es un gran objetivo para luchar por un diseñador.

De la misma manera que los diseñadores web aprenden sobre botones, listas, tarjetas, campos de entrada, ventanas emergentes y mucho más, los artistas digitales aprenden sobre materiales, iluminación, siluetas, cómo funcionan los músculos, cómo la gravedad lo empuja hacia abajo y ejerce presión sobre su cuerpo y así sucesivamente.

Gráfico de Suzanne Helmigh

Este es un ejemplo de cómo los artistas digitales aprenden sobre varios materiales al tratar de aplicarlos a una esfera. Magma, madera, piel, vino, huevo, queso, todo vale. Aprenderlo, hacerlo con las manos, lo imprime poco a poco en tu cerebro. Y cuando llegue el momento de aplicar ese material a una pintura real, ahora comprenderá mejor cómo funciona realmente y cómo debería verse el resultado final de manera realista.

A continuación se muestra un ejemplo en el que se utilizan piel, cuero, metal y cabello para producir un producto final de muy buen aspecto. La falta de conocimiento fundamental de estos materiales podría hacer que el metal pareciera plástico, papel similar al cuero, etc.

Fuente de la imagen: Artstation

Desafíos de los componentes de diseño web

Ahora, echemos un vistazo nuevamente a algunos componentes comunes que usará con frecuencia en el diseño web y algunas prácticas a realizar:

1 - Botones

Uno de los componentes más fundamentales de un sitio web. Los botones vienen en todas las formas y tamaños. Puede establecer degradados, cambiar colores, agregar texto-sombra, agregar bordes (más de uno), agregar estilo brillante, delinearlos, cambiar su forma (cuadrado, esquinas redondeadas, círculo), algunos vienen con íconos, otros tienen íconos separados en área sub-clickable.

Fuente de la imagen: Dribbble

Tarea : Diseña un botón en 20 estilos diferentes. Cuanto mayor sea la diferencia entre ellos, mejor. Para cada uno, siga las mejores prácticas de diseño en términos de contraste, equilibrio, etc.

2 - Cartas

Las tarjetas o cajas son otro componente muy común. Puede contener cualquier tipo de contenido, aunque algunos elementos comunes podrían ser un encabezado / pie de página + contenido principal.

Fuente de la imagen: Dribbble

Tarea : Usando el contenido, forme las tarjetas de arriba, diseñe 10 variaciones, idealmente lo más diferentes posible. Cambie el estilo, agregue nuevos elementos, gírelos, use degradados, sombras, íconos e ilustraciones. Intenta enloquecer con eso.

3 - Comentarios

Casi todos los blogs tienen algún tipo de sistema de comentarios. Pero, ¿consideró que el componente de comentarios podría no contener realmente un comentario real, sino más bien un cambio de "estado"?

Fuente de la imagen: Dribbble

Tarea: el ejemplo anterior muestra precisamente eso. Ahora, intente encontrar algo relacionado con un componente de comentarios: comentarios de los usuarios, estados de actualización de tareas (que están en el área de comentarios), comentarios similares a los de un chat, cualquier cosa. Cualquier variación entre 7 y 10 sería un buen número. Nuevamente, intente que todos sean diferentes. Investigue más, encuentre ideas, explore sitios.

El objetivo de estos ejercicios es encontrar formas de hacer elementos comunes de formas nuevas que antes no conocías .

4 - Deslizadores

Los controles deslizantes son uno de los componentes que muchos desarrolladores de front-end odian debido a la gran cantidad de problemas que crean, así como al JavaScript pesado que podría estar ejecutándose en segundo plano. Pero eso no significa que no necesite hacer uno.

Fuente de la imagen: Dribbble

Tarea: Navegue por la web y varios diseños para obtener más información sobre los diferentes diseños y enfoques. Tal vez eche un vistazo a las bibliotecas JS donde hacen diapositivas para ver qué tienen. A partir de ahí, diseñe de 10 a 15 diseños diferentes para deslizadores. Nuevamente, intente hacer que cada diseño sea lo más diferente posible del anterior, no use solo pequeñas mejoras.

5 - Formularios de entrada

Los formularios de entrada son otra parte fundamental de casi cualquier sitio web. Lo interesante para ellos es que reciben información en lugar de generar una.

Fuente de la imagen: Dribbble

Tarea: Su trabajo aquí es encontrar el tipo de información más extraña que alguien pueda necesitar en un sitio web. Cargue un PDF o PSD (elija uno), la información de la tarjeta de crédito, agregue una receta para las cookies, calcule las proporciones de mezcla de pintura, cree un configurador de concesionario de automóviles. Cualquier cosa que se le ocurra, cuanto más única, mejor. Nuevamente, siga navegando por sitios web para ver soluciones reales. Diseñe al menos 10 formas únicas diferentes con diseños únicos.

Resumen

La creación de una biblioteca de diseño como diseñador es uno de los principales pasos para mejorar su flujo de trabajo, producir diseños rápidamente, resolver problemas para sus clientes y encontrar formas únicas y geniales de mejorar la experiencia del usuario. Cuando comienza a navegar y observar de cerca cada elemento en la web, comienza a considerar las acciones del usuario, lo que ven y cómo se podría mejorar.

Usar las tareas anteriores como basura te ayudará a completar tu portafolio. ¡No se limite a las 5 tareas mencionadas, salga, navegue por sitios web, haga rediseños, estúdielos y continúe desarrollando sus sentidos de diseño y construyendo su propia biblioteca visual!