25 recursos para dominar el diseño web

Uno de los grandes aspectos abandonados en el desarrollo web ha sido el diseño y todas sus múltiples vertientes (tipografía, color, experiencia de usuario, etc.). Sin embargo, en los últimos años cada vez es más importante no sólo contar con abundante y compleja funcionalidad, sino con una plataforma llamativa, cómoda y que deslumbre e impresione al usuario. Por esta razón te presento 25 recursos que me han sido de gran utilidad para abordar el diseño web.

Elementos básicos del diseño web

En la siguiente sección están recogidos aquellos recursos relacionados con los elementos básicos del diseño web (color, tipografía e iconografía). Definir estos estos elementos es el punto de partida para plantear el aspecto de una web.

El color: el elemento principal del diseño

Desde mi punto de vista el color es el aspecto más relevante a la hora de plantear el diseño de una web. Esto es debido a que el mismo influirá en el público a la que está destinada y a la imagen de marca que posteriormente será creada. Para conocer más en profundidad cómo afecta la elección del color y distintas formas de elegirlos, me resultó de gran ayuda el siguiente recurso (en inglés): Teoría del Color.

Una vez conocido lo anterior, toca buscar inspiración, para ello últimamente estoy utilizando el siguiente recurso, el cual analiza las principales paletas de colores que presentan algunas de las webs más conocidas. Además de la web anterior, Colourlovers permite acceder a un gran conjunto de paletas de colores de gran calidad creadas por una extensa comunidad de diseñadores.

Otro de los recursos más utilizados en los últimos años ha sido el esquema de color propuesto dentro del lenguaje de diseño Material Design de Google. Este cuenta con un generador que te va a permitir elegir y probar cómo se comportan los colores seleccionados.

En el caso de que tu objetivo sea realizar interfaces compuestas principalmente por gráficos, te recomendaría probar la siguiente herramienta para la elección de los colores. Otra de las herramientas que considero imprescindible es Coolors, la cual permite configurar de manera rápida una paleta de colores. Una alternativa a la anterior es Color wheel, creada por Adobe, proporciona múltiples opciones para crear rápidamente paletas de colores.

La tipografía

Respecto a este elemento y sin entrar en mucha profundidad, suelo acudir a Google Fonts para encontrar tipografías gratuitas y de calidad. En un mundo donde el tiempo de carga cada vez es más importante, te aconsejo huir de la utilización de muchos tipos de fuentes tipográficas y apostar por un par de ellas. Este recurso también te permite conocer cómo va a afectar la tipografía seleccionada a tus tiempos de carga.

La iconografía

El aspecto más importante de la iconografía de tu web será tu logotipo ya que será la parte más reconocible de tu imagen de marca. Aunque en el mercado hay múltiples herramientas para la creación de logotipos, en mi caso prefiero contar con servicios como Logodust. Esta agencia de diseño pone a tu disposición varios logos de gran calidad y la posibilidad de contratarles.

Además de un logotipo, necesitarás un amplio conjunto de iconos para ilustrar los distintos apartados de tu proyecto. Esto te va a permitir atraer la atención de tus usuarios y conseguir que recuerden tu proyecto. Aunque hay múltiples alternativas en el mercado, Flaticon para mí destaca por encima de las otras debido a su amplio stock y sus posibilidades de uso gratuito.

Para finalizar este apartado es necesario hablar de Font Awesome, uno de los recursos más populares para añadir iconos a cualquier tipo de proyecto. Su gran popularidad viene dada por un gran número de iconos, un fácil modo de uso y un diseño basado en formatos vectoriales que permite escalarlos sin perder calidad.

Creando prototipos de tu diseño web

Una vez que tienes planteado el diseño de tu web, es hora de empezar a crear prototipos de la misma. Uno de los primeros pasos puede ser la realización de un mockup de alguna pantalla principal. Para ello en el siguiente blog cuentas con gran cantidad de recursos gráficos para generar un mockup de alta calidad. Esto te permitirá atraer la atención sobre tu nuevo lanzamiento, así como presentarlo en público, consiguiendo un buen impacto social.

Si en lugar de crear un mockup necesitas diseñar diversas pantallas y plantear las transiciones entre las mismas, seguramente tu mejor opción sea plantear un wireframe. Como en los casos anteriores, hay multitud de herramientas y servicios en el mercado que te van a permitir realizar estos útiles esquemas conceptuales. Hace poco tiempo he descubierto JustInMind y me ha parecido una propuesta muy útil para los comienzos en el diseño y desarrollo web.

Desde mi punto de vista, los prototipos son imprescindibles para cualquier proyecto de dimensiones medianas o grandes, ya que la inversión en desarrollo siempre es alta y el coste de realizar cambios puede disparar el tiempo y el presupuesto disponibles. En contraposición a lo anterior, realizar un cambio sobre el diseño es sencillo si se utilizan plantillas y programas como Photoshop, Adobe Illustrator o Sketch. Por este motivo, considero de gran utilizad las herramientas prestadas por el servicio Invision el cual te va a permitir crear prototipos y dotarles de interactividad.

Mejorando la experiencia de usuario de tu diseño web

Llegados al punto de tener preparado ya el diseño y creados algunos prototipos, es hora de enfocarte en la experiencia de usuario para redefinir lo anterior. El concepto de experiencia de usuario es muy amplio y podría ser definido como aquellos cambios en el diseño que permiten al usuario realizar sus tareas de manera más sencilla, rápida y con el menor número de errores posibles.

Este tema lleva siendo analizado durante varias décadas por multitud de expertos, tanto de manera académica como eminentemente práctica. Si quieres profundizar en el mismo te recomiendo la siguiente recopilación de artículos de interés.

Seguramente, tu interés en este tema sea más práctico que teórico, por lo que te recomiendo la siguiente check list con un conjunto de cuestiones que deberías analizar para medir y mejorar la experiencia de usuario de tu proyecto web.

Preparando tus diseños para redes sociales

Otra parte cada vez más fundamental en el mundo del diseño web, es preparar las imágenes que irán asociadas a las distintas redes sociales del proyecto. Este proceso que sobre el papel puede parecer muy sencillo, debido a la multitud de redes sociales y formatos de imágenes asociados a las mismas que pueblan el mercado, requiere de bastante tiempo. El siguiente recurso que te presento, te va a permitir conocer de manera siempre actualizada qué tipo de imágenes debes generar para cada una de las redes sociales que vayas a usar.

Respecto a las herramientas con las que generar todos estos recursos gráficos, puedes encontrar muchas en el mercado. Una de ellas es Canva la cual se está volviendo muy popular, por su carácter gratuito, sus plantillas predefinidas y su sencillo uso, que permiten conseguir buenos acabados sin necesidad de ser un profesional de este campo.

La implementación: ¿el paso más complejo?

Desde mi punto de vista, y quizás siendo poco objetivo debido a ser eminentemente desarrollador, la implementación de un diseño es el paso más complejo. Esto suele resumirse en la manida frase: “el papel lo aguanta todo”. En el proceso de implementación suelen aparecer multitud de problemas, principalmente en el comportamiento adaptativo, por esta razón es importante plantear un diseño que cubra varias resoluciones y dispositivos.

Comprobando que lo diseñado se puede utilizar

Una cuestión muy importante es conocer qué tipo de navegadores y dispositivos van a utilizar tus usuarios. Esto va a implicar que algunos elementos del diseño, o bien no puedan ser implementados, o bien deben ser replanteados. Algunos ejemplos de estos elementos son el uso de imágenes svg, variables de CSS o funciones de transformación o de cálculos avanzados. Conocer qué funciona y de qué manera en cada uno de los navegadores y versiones de los mismos, es una tarea titánica que puede ser resuelta de manera sencilla usando Can I Use.

Utilizando las últimas novedades de la tecnología

Realizar una implementación de un diseño complejo, exige un gran conocimiento de los principales lenguajes y tecnologías web (JavaScript, HTML y CSS) y mucha dedicación. Sin embargo, los tres elementos anteriores han ido evolucionando de manera exponencial, para facilitar la tarea y permitir mejores y más complejas implementaciones. Para conocer algunas de las nuevas características últimamente me han sido de gran utilidad las páginas CSS Reference y HTML Reference, sobre CSS y HTML, respectivamente. Si quieres aprender sobre ello puedes visitar el siguiente artículo.

Implementando los degradados de tu diseño

Una de las últimas tendencias de diseño web, es el uso de degradados, los cuales siempre han supuesto multitud de problemas a la hora de su implementación. Para solventar esto y conseguir unos degradados perfectos te recomiendo la siguiente herramienta.

Implementando un diseño en cuadrícula

Una de las últimas características de CSS es el soporte para el desarrollo en base a cuadrículas (grids). Esto permite abordar multitud de problemas como el del responsive, con un nuevo enfoque muy prometedor. El mayor problema, es que todavía hay pocas personas que saben sacarle partido y para ello te dejo la siguiente guía de aprendizaje de CSS Grid.

Probando el comportamiento del diseño

Realizar un proyecto y ponerlo disponible al público sin probarlo, puede suponer el hundimiento del mismo. Por eso siempre hay que intentar probar todo lo posible los proyectos. Respecto a las pruebas del diseño, hay multitud de ellas, desde pruebas automáticas hasta pruebas dirigidas o libres con usuarios. Como estas últimas son mucho más costosas, te propongo realizar las primeras utilizando Browser Sync.

Bonus

Como no podría ser de otra manera, el último recurso de este artículo recopilatorio es un proyecto que agrupa a otro conjunto muy amplio de recursos y herramientas. Pero tiene la característica de que el listado que propone está filtrado y supervisado por profesionales del diseño.

Espero que este artículo te sea de utilidad y me comentes aquellos recursos que consideras que deberían incluirse en esta recopilación.