Si eres diseñadora o diseñador, hoy, no me lo tengas en cuenta y abrázate fuerte a quien tengas al lado.

Al final de estas líneas quizás quieras ayudarme. O escupirme.

Si al igual que yo eres un juntacolores, siente también mi abrazo a través de estas próximas líneas.

 

 

¿Qué hace un mono con platillos en la sala de control de una central nuclear?

Lo mismo que yo pintando monas: Liarla.

 

Hasta ahora esa realidad se quedaba ahí, pero han llegado para «ayudarnos» multitud de herramientas que nos lanzan por los caminos más correctos del mundo del diseño.

Lo único es que hay que saber utilizarlas y sacar provecho. No es poca cosa.

Hablaré al final de algunas de ellas.

 

Si te gusta lo que lees aquí, compártelo en twitter con tus colegas. ¡Gracias!

 

¡Quiero un diseño minimalista!

La intención inicial era buena: crear una imagen gráfica nueva y refrescante para danielprimo.io y webreactiva.com

Como podrás comprobar si entras me he quedado en el camino. Sigo tirando de una plantilla premium HTML (no es WordPress) llamada Canva con 43 librerías de JavaScript como baúl de dependencias.

 

Mis deseos eran (y son) los siguientes:

  1. Diseño minimalista basado en los colores actuales.
  2. Ampliable y flexible.
  3. Que siga de cerca ciertas reglas estéticas.

 

Caí rápido bajo el influjo de los cantos de sirena de themeforest. No entres, ¡no lo hagas! Te sumergirás en una vorágine de pulsar botones de «view demo».

Soy de gatillo fácil y rápido compré una plantilla premium que tenía como extra un «UI Kit» para construir lo que yo quisiera.

Pronto descubrí que, aunque muy bonita, era otra artimaña para conseguir mi tarjeta.

 

Sistema de diseño o guía de estilo o plantilla o…

Existe una gran confusión entre plantilla, ui kit, sistema de diseño, guía de estilo, librería de patrones…

La empresa de sacarte de la duda se me hace grande.

En este artículo lo explican bien: El sistema de diseño engloba a la librería de patrones que a su vez rodea a la guía de estilo.

Lo más importante es entender que un system design es una librería de diseño basado en componentes. Su principal objetivo es que sea reutilizable y que sirva para construir elementos complejos en base a otros más sencillos.

 

En este texto aparece, una vez más, la frase «A Single Source of Truth».

Una única fuente de verdad.

Eso es realmente lo que me hace falta. No pretendo un diseño de galería del coleccionista de webs. Lo que me gustaría es poseer un lugar donde mirar y sentir paz.

(Otro paralelismo con el flujo de programación, ¿casualidad?)

 

Las buenas prácticas, antes de las herramientas

Quizás recuerdes el «T-shape developer». Esa historia que te conté sobre tener conocimientos profundos sobre un tema (el palo largo de la T) y más superficiales sobre temáticas relacionadas (los brazos de la T).

Este es un buen caso.

Al mono con platillos hay que darle una misión sola: estáte quieto.

Con esto pasa igual: simplificar.

 

Tras leer artículos, pensar e incluso preguntar he llegado a estas conclusiones:

  • Monta una inspiración visual de lo que quieres: moodboard. Es como tener las ideas apuntadas con imágenes en una libreta.
  • Define una paleta de colores para empezar. Ayúdate para conseguir colores que peguen, no que te peguen patadas.
  • Si tienes variantes de esos colores, mejor, siempre hacen falta.
  • Define los tipos de letra. Al menos dos que tengan sentido.
  • Monta los primeros componentes (título con párrafo con imagen, por ejemplo). Fija tamaños y espacios.
  • Cíñete luego a lo que has definido.

 

Son pocas cosas, pero complicadas. Estoy en ello.

Como en programación podrás mejorarlo más adelante.

Pero si no tienes un patrón que te permita crecer.

Tanto es así que si no te ves con fuerzas o te lloran los ojos por la fealdad conseguida será algo con lo que pueda trabajar un profesional del diseño de verdad.

Probablemente ese último sea mi camino, al mono con platillos hay que jubilarlo pronto.

 

En reddit hay muchos foros donde puedes preguntar tus dudas sobre programación y desarrollo profesional.

No puedo prometer que tu karma reste -100 y salgas trasquilado y triste porque tu pregunta no guste a tus «colegas» de foro.

 

Ahora hay otra opción.

En el podcast Web Reactiva conseguir respuestas es ahora más fácil que nunca. La sección Federica Dame Feedback vuelve con fuerza y voz propia.

Es la quinta temporada y queremos contar contigo más que nunca.

|> Envía tu pregunta

Es gratis, como en reddit, pero sin trols 😉

 

El penúltimo renglón

Aquí van hoy las herramientas de las que te he hablado más arriba:

Coolors generate.

La que más uso. Paletas de colores aleatorias o en galería. Las matemáticas al servicio de conservación de nuestra vista.

Colors & Fonts.

Variantes de colores y sus combinaciones pero, lo más interesante, emparejado de tipos de letra. Combinaciones hechas por inteligencia artificial, en designs.ai.

Shaper, generador de interfaces.

Una combinación de los anteriores y además opensource. Aquí entenderás el valor del espaciado y tamaño así como otros conceptos que verás en sistemas de diseño.

Superoposition.

Una app multiplataforma para extraer los tokens de diseño de una web y generar un sistema de diseño. Para mi fue la galería de los horrores viendo el descontrol gráfico que tienen mis webs.

Cómo hacer un moodboard.

Incluso con pinterest lo puedes montar. Dedícale una tarde, no más, porque es infinito.

Colección de sistemas de diseño.

Inspírate viendo el trabajo de pequeñas y grandes marcas para lograr que su presencia sea agradable a la vista y funcional para seguir creándola.

PatternFly.

Un sistema de diseño open source. Si no lo usas por lo menos te servirá de guía para entender mejor de qué va todo esto.

 

Y tres más para rematar:

  • Comprime las imágenes en base a su contenido con JS Image Carver. Espectacular.
  • View Source te muestra el código fuente de cualquier web. Ideal para móviles.
  • Cada vez más simbiosis entre NodeJs y Rust. Me gusta. Napi.rs sirve para compilar aplicaciones Node para Rust.

 

¡Nos leemos el próximo domingo!

PD: ¡Pregunta!

#lsn184

Comparte este newsletter en twitter
#LaSelectaNewsletter quiere ser un newsletter típico «de toda la vida» escrito por Dani.
Lee y sigue las mejores newsletters desde la app de Lettermind
Sigue y lee todas las newsletters desde la app de Lettermind

Para poder crear una alerta y no perderte ninguna newsletter con tus intereses, tienes que iniciar sesión.
INICIA SESIÓN PARA CREAR TU ALERTA

Para poder crear una alerta y no perderte ninguna newsletter con tus intereses, tienes que iniciar sesión.
INICIA SESIÓN PARA CREAR TU ALERTA

Iniciar sesión

Registrar

Recordar contraseña

Buscador de Newsletters

Compartir