¡Compártelo!
Share on facebook
Share on google
Share on twitter
Share on linkedin

5 Tips de diseño para desarrolladores

Durante mi trabajo, he visto a desarrolladores que se adentran en el complicado mundo del diseño UI/UX. Las razones son muchas y diversas: el cliente no ha querido contratar el servicio de un diseñador, la empresa ha tenido que recortar en diseño para poder vender el proyecto, el número de desarrolladores es mucho mayor y solo hay un diseñador disponible…
Sea el caso que sea, muchas veces un grupo de desarrolladores se encuentra en la posición de tener que diseñar ellos mismos el flujo de navegación y los elementos de una aplicación o web, así que, si eres programador y estás en esta situación, te presentamos cinco tips de diseño para desarrolladores que te ayudarán a tener una buena base desde la que empezar.

Tips de diseño:

Espaciados

No hay nada que haga que una aplicación o web sea más estéticamente agradable y fácil de leer que el buen uso de los espaciados.
Los espaciados funcionan creando secciones libres de contenido con las que el usuario interacciona de manera que en su cabeza se crean separaciones visuales de las que nosotros como diseñadores tenemos el control. Por ejemplo, podemos guiar al usuario para que sea capaz de diferenciar varias secciones de una misma página o elemento.
diseño para desarrolladores
No solo hace que la interfaz se vea bien, si no que ofrece una mejor navegación, una mayor legibilidad, una ordenación de contenido más significativa y hace que sea más fácil resaltar las secciones que más nos interesan.
Recordad, es mejor pecar de mucho espaciado que quedarse cortos.

Colores

Los colores son de los recursos más significativos en una aplicación o web. Transmiten emociones, identifican un servicio o empresa, nos ayudan a llamar la atención del usuario… Aunque también hay que andarse con ojo, el mal uso de los colores puede llevar a confusiones.
La elección de los colores va casi siempre ligada con la empresa del cliente para la que se está desarrollando un proyecto, muchas veces nos vienen dados por guías de estilos y se nos permite muy poco jugar con esos colores, pero casi siempre hay lugar para trabajarlo de la mejor manera posible.
El mejor consejo que podría dar aquí es aprender cómo usar los colores y cómo interactúan entre ellos. Los colores nos pueden ayudar a jerarquizar contenido (hablaremos más adelante de esta parte), a dar volumen, o a destacar información o secciones.
diseño para desarrolladores
Existe una herramienta gratuita muy útil, Adobe Color que nos permite introducir un color principal y podemos elegir distintas combinaciones de él, como los distintos tonos, los colores complementarios y compuestos. También, podemos guardar una combinación que nos guste, o buscar “temas” que han creado otras personas para inspirarnos.

Tipografías

La tipografía es quizás, junto a los colores, el elemento con el que primero entra en contacto el usuario y por ello hay que seleccionarlas muy bien.
Existen dos tipos de tipografías, las serif (con serifa) y las sans serif (sin serifa). La serifa son los pequeños remates y adornos que tienen algunas tipografías, como la Times New Roman. Podría decirse que las tipografías serif tienden a verse más con un aspecto clásico, antiguo o formal, mientras que las sans serif son más modernas y cercanas.
diseño para desarrolladores
Hoy en día un gran número de aplicaciones y webs usan tipografías sans serif, para dar ese aspecto más moderno y cercano al usuario, aunque puede darse el caso del uso intencionado de tipografías serif para transmitir algo más profundo y sofisticado.
Normalmente se usa una pareja o “pairing” de tipografías, una para los títulos y encabezados (h1,h2…), y otra distinta para los textos en párrafo y otras áreas de texto.
Aquí podemos encontrar otra herramienta gratuita que nos puede ayudar en esta tarea, Google Fonts. Al entrar nos encontramos una lista enorme de familias tipográficas totalmente gratuitas y listas para usar. Podemos hacer búsquedas y filtrar por tipos, podemos hacer pruebas con el texto que queramos para ver como quedaría escrito, nos da directamente los links necesarios para usar las tipografías en html y css, nos deja descargarlas para instalarlas en nuestro ordenador, y tiene una opción muy interesante en la que cuando elegimos una, nos propone “pairings” populares con otras tipografías.

Iconos

Los iconos podrían considerarse prácticamente una extensión de las tipografías. Tener una buena familia de iconos en nuestro proyecto ayuda a crear cohesión visual y nos da elementos con los que apoyar información importante.
Lo importante aquí es entender que los iconos están, como ya hemos dicho, para apoyar visualmente cierta información, no deben convertirse en los protagonistas. Hay que vigilar que el tamaño no sea demasiado grande para que estos no eclipsen a la información en sí. Aún así, tenemos la opción de utilizar iconos delineados en vez de sólidos, para esos casos en que hay que usarlos con un tamaño mayor, ya que al estar delineados no generan tanta carga visual.
diseño para desarrolladores
Aquí tenemos infinidad de familias de iconos, pero voy a recomendaros dos páginas que son bastante completas y gratuitas. La primera es Font Awesome. Pone a disposición más de 1500 iconos gratuitos que podemos descargarnos o usarlos a través de links si nos instalamos su librería en nuestro proyecto. La segunda es Ionicons, una familia que viene con el framework Ionic pero que también podemos usar libremente y de manera gratuita al ser Open Source.

Jerarquía visual

Todos los puntos explicados anteriormente ayudan a construir una jerarquía visual, un orden en el que podemos controlar que queremos que sea lo primero que vean los usuarios, o, al menos, lo primero en que queremos que se fijen para después pasar a detalles, más información y contenido secundario.
La jerarquía se construye con todo: espaciados entre secciones y titulares, colores de fondo respecto a colores de tipografía, tamaños y pesos de tipografías…
diseño para desarrolladores
Por ejemplo, en la imagen anterior vemos cómo simplemente cambiando sutilmente el color del texto de descripción, y el peso del titular, conseguimos que lo primero que resalte sea este último sobre la descripción, que se espera que el usuario lea después. Igualmente, con un correcto espaciado, conseguimos separar visualmente cada artículo en dos secciones, una con el título y la descripción, y otra con la información relevante a la hora de decidir comprarlo como el precio, las reviews…
Espero que con estos sencillos trucos, la tarea de los desarrolladores que empiezan a meter el pié en la piscina del diseño UI/UX se vuelva más fácil.

Artículos relacionados

Cómo ejecutar una aplicación Spring Boot como un servicio Linux

Cómo ejecutar una aplicación Spring Boot como un servicio Linux

En este post veremos cómo ejecutar una aplicación Spring Boot como un servicio Linux configurado desde un bash con configuración externa. Empaquetado, configuración y construcción del proyecto En primer lugar, explicaremos las opciones de empaquetado, la configuración del proyecto y la construcción de este. Empaquetado

Configurar Verdaccio para tener un registro privado de paquetes npm

Configurar Verdaccio: registro privado de paquetes npm

En este post veremos cómo configurar Verdaccio con una configuración básica de permisos para disponer de un registro privado de paquetes npm. ¿Que es Verdaccio? Verdaccio es una herramienta ligera y de código abierto para disponer de un registro privado de paquetes npm. Siendo compatible

Comparativa codigo de barras vs codigo qr

Código de barras vs. Código QR: diferencias para saber cuál elegir

Un código de barras y un código QR son dos opciones muy interesantes para codificar la información de tus productos o servicios. En este post, te explicamos qué son, para qué sirven y sus principales ventajas, desventajas y diferencias, para que sepas cuál utilizar según