El blog de las cosas que hago

Mi proceso de diseño web (Febrero 2020)

Como diseñador web freelance, no tengo a mi disposición ni los recursos humanos ni los económicos que tiene una agencia entera. Al recibir el encargo de realizar un sitio web, una gran agencia pone en marcha equipos dedicados a cada aspecto del proyecto. Mientras unos se encargan de definir una estrategia de marketing, otros se ocupan del diseño de experiencia de usuario (UX). El equipo de diseño de interacción de usuario (UI) no suele ocuparse del SEO, y mucho menos del desarrollo posterior.

Una empresa importante normalmente optará por una organización de este tamaño porque a sus ojos garantizará un mejor resultado. Al tener a gente especializada en cada paso del proceso, quieren asegurarse de que el producto final es lo más óptimo posible. Yo no soy una agencia. Por desgracia, me encargo yo de todo.

¿Por desgracia?
[bodymovin anim_id="1341" loop="true" autoplay_viewport="true" align="left"]

Una web es como un coche: en teoría todos te llevan de A a B. Pero hay gente que prefiere tener un Porsche Carrera, porque se puede permitir el lujo. Otra gente preferirá invertir en la seguridad de un Audi A4. Y muchos se contentarán con un simple Renault Clio. Si queremos ser competitivos, los que fabricamos ese “coche” debemos asegurar la mayor calidad posible dentro del presupuesto disponible.

Creo que un solo freelancer puede ofrecer un servicio casi comparable con el de una agencia, por un precio mucho menor. Pero para ello hay que formarse continuamente y aprender a hacer varias tareas distintas al nivel de un especialista. Difícil pero no imposible.

En el rango más bajo de precio están los freelancers que por 500€ o menos te instalan WordPress y configuran una plantilla prediseñada, a ésta le cambian textos e imágenes, le activan los plugins necesarios y a volar. Cuando hace una década empecé a diseñar y era un ingenuo novato, esto es lo que se esperaba de mí y nunca llegué a comprender del todo mi trabajo.

[bodymovin anim_id="1344" loop="true" autoplay_viewport="true" align="left"]

Así es, no comprendía el valor real de mi trabajo.

¿Cómo puede satisfacer este tipo de proceso las necesidades de un negocio? Si no aportas un servicio digital adaptado a las características del cliente que te lo pide, ¿De qué le sirve este servicio? La realidad es que para muchas pequeñas empresas y particulares que no tienen presupuesto suficiente o no valoran lo que supone tener presencia en internet, esta forma de trabajar puede parecer idónea. Cualquier persona tiene la posibilidad de crear su propio sitio web gratis gracias a plataformas como Wix. ¿Por qué iban a gastar miles de euros en lo mismo?

La respuesta se encuentra en la pregunta: No es lo mismo. Con el paso del tiempo comprendí que no podía adaptar las necesidades de mi cliente a un proceso fijo. Al contrario, debía adaptar mi proceso a las necesidades del cliente. Si quería aportar valor, tenía que encontrar una manera de personalizar mi servicio a cada cliente, y que este servicio estuviese lo suficientemente automatizado para que fuese rentable para todos. Al fin y al cabo, soy un modesto freelancer, no una agencia.

Estoy convencido de que en el futuro leeré este post con otros ojos, y tendré una opinión distinta sobre este tema. Mi forma de trabajar vive una evolución constante, afinando el mecanismo en cada proyecto, sacando lecciones de cada error. Lo que sí puedo decir es que, a día de hoy, este es mi proceso de diseño web:

Mi proceso de diseño web

Antes de nada, hay que conocer a tu cliente. Si entendemos a un diseñador como un “solucionador” de problemas, debemos entender bien de qué se trata ese problema para poder encontrar la solución. Es importante hacer muchas preguntas, y asegurarse de que den en la diana: La calidad de la pregunta determina la utilidad de la respuesta. Con buenas respuestas podremos afrontar con éxito la fase de ideación.

Si no tenemos idea del producto que necesitamos crear, estamos perdidos. Definir bien los conceptos al principio nos permitirá tener un mapa que nos guíe por todo el proceso de creación. Muchos saltan desde este primer paso directamente al prototipo final, yo mismo lo he hecho, pero aún queda mucho camino por recorrer. El objetivo es aportar el valor de una agencia, ¿recordáis?

Teniendo los conceptos claros y bien definidos, nos adentramos en la siguiente fase. Aquí se podría bifurcar el camino en dos áreas diferenciadas: una que hace referencia a la arquitectura de la web, y otra a su estética.

Creo que es recomendable abordar el aspecto “arquitectónico” del producto antes que el “estético”. Lo ideal es primero estructurar el contenido y después darle forma visual, pero a veces esto no es posible. Un motivo común es no disponer de todo el contenido pronto y que el cliente te exija ver cosas ya. Otras veces una muestra demasiado esquemática no es lo suficientemente expresiva y necesitamos pistas visuales más concretas para explicar una idea.

Debemos emplear el tiempo que haga falta en estas primeras fases, sin caer en la tentación de mostrar cuanto antes un prototipo avanzado para aplacar la posible impaciencia del cliente. Sí, parece que caminamos lentamente, pero hay que intentar dejar claro la importancia de hacer bien el trabajo desde el principio. Y para hacer bien las cosas necesitamos tiempo.

pinterest es un sitio ideal para hacer moodboards

Pinterest es un sitio ideal para crear moodboards

Si por un lado tenemos que ocuparnos de la estructura, por el otro podemos ir definiendo la línea visual a seguir elaborando un moodboard de ideas. Podemos extraer referencias de todo tipo y no de solo diseño digital: diseño editorial, ilustración de posters, fotografía, cine, interiorismo, escultura… Dejemos volar la imaginación, ya habrá tiempo de concretar. Estando de acuerdo sobre un moodboard con el cliente nos aseguramos de que ambas expectativas, las suyas y las nuestras, están alineadas desde el primer momento.

La estructura que a modo muy esquemático establecimos de acuerdo a los contenidos y las necesidades de la web debe desarrollarse ahora. Es el momento de mostrar el esqueleto mediante bocetos más visuales que vayan dejando clara la funcionalidad del sitio y la experiencia de usuario: Los wireframes. Estos son diseños muy básicos, lo cual nos permite hacer las variaciones necesarias sin perder demasiado tiempo.

web wireframes
Mir primeros wireframes, allá por el 2014
(ahora me salen mejor)
Por el lado “estético”, tenemos que elaborar mejor esas primeras ideas que seleccionamos en el moodboard y crear los llamados stylescapes (O, por seguir con el festival de anglicismos, “Look & Feel”) ¿Qué es un stylescape? Es una guía de estilo para fijar el lenguaje visual del producto, a un paso entre el moodboard y el diseño final. Tendremos que pensar en qué paleta de color aplicar, qué tipografía, fotografía, ilustraciones… Es una buena idea construir al menos dos. En uno, por ejemplo, usaremos un estilo más arriesgado y en otro más conservador. Dependiendo de la elección del cliente tomaremos un camino u otro. En este punto hemos recogido tanta información de valor que se hace mucho más fácil abordar el momento de la verdad: diseñar el prototipo. Además, habiendo verificado cada paso con el cliente, nos aseguramos de que no haya sorpresas de última hora. ¿Qué hubiera pasado si nos hubiésemos tirado a diseñar de cabeza? La probabilidad de que al cliente no aceptase nuestra propuesta sería mucho más alta, y los cambios a realizar mucho más costosos para nuestro tiempo y para su bolsillo

Del esmero que hayamos puesto en cada fase del proceso dependerá la obtención de un buen diseño, un cliente feliz y una base sólida para afrontar futuros proyectos. Sin embargo, aún queda lo más complejo. Cuando hayamos terminado el diseño toca meternos en la fase de desarrollo, pero eso es un tema demasiado extenso para este post.

 

En definitiva, a día de hoy este es el procedimiento que sigo, desde la primera conversación hasta el diseño final. ¿Necesitas una página web?

Publicado el 24 de febrero de 2020

Hola, me llamo Rodrigo y trabajo como diseñador y desarrollador web freelance. Si quieres conocerme mejor puedes darte una vuelta por mi web. Si quieres seguir leyéndome, este es mi blog.

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad