Mi proceso de diseño web: la visión de un freelancer

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.

Pasión vs Trabajo: Superando el Síndrome del Impostor

El blog de las cosas que se me ocurren

Tu pasión y tu trabajo: Superando el síndrome del impostor.

Soy músico.

Me di cuenta de esto hace poco tiempo, repasando en silencio la última década de mi vida. Llevo dedicándome profesionalmente al diseño desde que salí de la escuela, hace diez años, y aún así me sigue costando decir que «soy diseñador». Es mi trabajo, sin duda, aunque uno se pierde con la nueva nomenclatura: diseñador de producto, diseñador digital, UX, UI… De alguna manera u otra he tocado todos esos palos. 

Y, a pesar de ello, me sigo sintiendo un intruso. Sufro del famoso síndrome del impostor.

Si este blog fuera de música, os podría hablar sin parar del movimiento post-punk británico, de Hosono, Sakamoto y otros pioneros japoneses de la electrónica, de Moondog, de lo mejor de la discográfica ECM, del screamo francés e italiano de principios de este siglo, de free-jazz y de todo lo que se me pusiera por delante. 

Os hablaría de ello y además no me molestaría ni un segundo en fingir mi parcial desconocimiento de cada tema, pues sería mi opinión y mi opinión me basta. No pretendo ser un experto pero tampoco me importa: la música es mi pasión y hablo de ella con la boca llena y sin mirar atrás. Porque llevo haciendo música desde pequeño y llevo la música dentro.

Es probable que sepa tantas cosas sobre diseño como sobre música. O incluso más. Al fin y al cabo, mi mente vive diariamente en este sector. ¿Por qué me resulta entonces tan complicado hablar sobre ello? Al contrario que con la música, me da miedo equivocarme, temo que me juzguen, y que el veredicto sea: culpable, no tiene ni idea de lo que habla. Sin embargo, no soy un farsante. ¿Por qué debería dudar de mí mismo?

Sé que no soy el único. Cuando leo sobre lo importante que es crear contenidos en internet, de compartir lo que sabes, veo que no paran de surgir voces preocupadas. Voces que dudan de que tengan algo interesante que decir. Voces que titubean ante la gran pregunta: «¿De qué estoy capacitado para hablar?» Y sobre todo: «¿Por qué tendría que escucharme nadie? No soy un experto y hay miles de personas que saben más que yo de esto»… 

Son dudas legítimas, que muchos tenemos, pero que no conducen a nada. A menudo infravaloramos nuestra capacidad porque sólo nos fijamos en la poca gente que está por encima de nosotros. Ciertas cosas nos parecen obvias y damos por hecho que todos las conocen. Y así olvidamos la verdad: Tenemos mucho más conocimiento sobre nuestro trabajo que casi todos.

Tu trabajo no tiene por qué coincidir con tu pasión. Basta con que te guste lo suficiente como para querer aprender algo nuevo cada día. A veces te enfrascarás en proyectos tan estimulantes que te harán recordar por qué empezaste a hacer esto. A veces tendrás que arrastrarte por tareas tediosas pero necesarias para llegar a fin de mes. Y de todas se puede aprender algo. A mí me encanta mi trabajo y, aunque quizá no sea la pasión de mi vida, mejorar y ampliar mi conocimiento sobre él me apasiona.

Sucede algo curioso con el conocimiento: cuanto más tienes, más te parece que no tienes suficiente. La ignorancia es atrevida por esa razón. Se ignora a sí misma. Así que cuando dudes, cuando cuestiones tu sabiduría, cuando temas ser un impostor, quizá sea precisamente este el momento de darle la vuelta a la tortilla. Quizá sentirte de esta forma es la señal de que ya eres un experto. Quizá ya puedas considerarte diseñador. Aunque seas músico.

Publicado el 18 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.

Becoming Prince

¿Quién no conoce a Prince? La Prince Real Estate, por si acaso, se encarga de preservar su memoria y el puñado de sitios web que dedican a ello le hacen justicia con un diseño realmente cuidado.

(Bien podrían haber usado un poco de este buen gusto algunas portadas de sus discos. Ojito con esta.)

La web que abarca toda su discografía es interesante, pero la que realmente ha captado mi atención es la que habla sobre los primeros pasos de su vida y cómo se gestó el mito: Becoming Prince. Es todo un ejemplo de cómo se puede contar una historia de forma poco convencional pero que a la vez engancha.

Dividida en dos partes, historia y mapa, la web nos guía por la vida de Prince a través de una navegación inteligente y que nos anima a interactuar con todo lo que vamos aprendiendo. Podemos viajar por la ciudad de Minneapolis y escuchar parte del relato, aunque me parece un error reproducir el sonido sin preguntar.

Publicado el 7 de febrero de 2020 por Rodrigo Núñez
Images copyright to their respective owners

El diseño da mucha importancia a la tipografía, y la elección de una sans-serif con contraste (un tipo «poco popular», según su creador) como es Domaine Sans aporta un estilo que queda peculiar en web pero que es a la vez legible. El cursor animado tampoco parece una elección gratuita pues es informativo y nos invita a clicar e interactuar con cada elemento.

Publicado el 7 de febrero de 2020 por Rodrigo Núñez
Images copyright to their respective owners

Sea Harvest

Creo que no estamos aprovechando suficientemente los (ya antiguos) nuevos avances en CSS para crear layouts sorprendentes y creativos hasta hace unos años solo imaginables en el diseño offline. La web de Sea Harvest toma esta idea al pie de la letra, pues recrea la apariencia clásica de un periódico impreso. 

Incluso la animación de entrada a la home está inspirada en películas que nos trasladan a otra época. Son pequeños detalles que transmiten a la perfección los valores de esta pequeña pequeña empresa familiar ubicada en un mercado de Camberra, Australia desde hace más de 40 años. Las ilustraciones son perfectas también.

Publicado el 27 de enero de 2020 por Rodrigo Núñez
Images copyright to their respective owners

Otras cosas a destacar son un bonito formulario para pedir comida online (no disponible por vacaciones en el momento de publicación de este post) y hasta un crucigrama de lo más vintage. Un buen trabajo de ED que demuestra lo creativo que puedes llegar a ser actualmente maquetando una web.

Publicado el 27 de enero de 2020 por Rodrigo Núñez
Images copyright to their respective owners

Rimowa / Gucci

Con nuevas tecnologías como WebGL cada vez más ampliamente aceptadas por nuestros navegadores, proliferan los sitios web que hacen uso de ellas, abriendo un universo de posibilidades visuales. A veces no pasan del simple experimento interesante, pero con poco sentido desde el punto de vista de la UX.

No es el caso de Rimowa, donde la visualización en 3D de su producto tiene todo el sentido del mundo. La capacidad de verlo desde todos sus ángulos y customizarlo en tiempo real, añade un toque distinguido y divertido a la experiencia de usuario. El diseño es muy limpio y elegante, y es que todo cuenta para justificar el elevadísimo precio de la maleta en cuestión.

Publicado el 12 de diciembre de 2019 por Rodrigo Núñez
Images copyright to their respective owners

Muy barato tampoco parece ser el famoso bolso de Gucci. La presentación del producto sigue una línea similar: un bonito render 3D que responde a los movimientos del ratón a la vez que cuenta su historia. En una época en la que muchos se esfuerzan por asombrar al usuario con efectos de dudosa utilidad, se agradece un uso razonable de las infinitas posibilidades que se ofrece la nueva web que nos viene.

Publicado el 12 de diciembre de 2019 por Rodrigo Núñez
Images copyright to their respective owners

Daphné Launay

El portfolio online de la fotógrafa Daphné Launay es toda una delicia. Está diseñado por Célia Lopez y desarrollado por ​Anthelme Dumont. Os recomiendo a todos ver su trabajo porque es de alto nivel. La web de Daphné es tan bonita como fácil de usar, algo que es menos común de lo que debería.

La transición entre una sección y otra va como la seda; el tratamiento tipográfico y cromático es elegante y limpio, dando protagonismo a las fotografías sin perder un ápice de originalidad.

Publicado el 29 de noviembre de 2019 por Rodrigo Núñez
Images copyright to their respective owners

Podemos ver varios elementos de interacción muy de moda en la actualidad, pero utilizados de tal forma que no comprometen la usabilidad del sitio. Toda la web es un ejercicio de estilo, contenido y al mismo tiempo lleno de creatividad y minuciosa atención al detalle.

Publicado el 29 de noviembre de 2019 por Rodrigo Núñez
Images copyright to their respective owners

Ellison Foundation

Larry Ellison es uno de los millonarios más excéntricos del mundo, capaz de gastarse 300 millones de dólares en una isla de Hawaii y ganar dos veces la competición de vela más prestigiosa. La fundación filantrópica que lleva su nombre tiene un bonito sitio web que no hace pensar para nada en su fama de lobo feroz de los negocios.

A primera vista destaca la arriesgada propuesta cromática, basada en colores que no deberían funcionar juntos pero que, al contrario, resultan en un diseño agradablemente sorprendente. La elección de elegantísima GT Sectra para los títulos también es muy acertada.

Publicado el 15 de noviembre de 2019 por Rodrigo Núñez
Images copyright to their respective owners

Mi elemento favorito de la web son las sutiles superposiciones que se forman entre secciones al hacer scroll. Por lo visto Ellison es un gran admirador de la cultura japonesa, lo cual se ve reflejado sin duda en su estética y en la siempre presente ilustración de la garza (porque es una garza, ¿verdad?) 

Publicado el 15 de noviembre de 2019 por Rodrigo Núñez
Images copyright to their respective owners

Middle Child

Middle Child es una pequeña sandwichería en Philadelphia. Pero su modesto tamaño no es impedimento para tener una gran web, diseñada por Mike Wagz. Wagz es cofundador de estudio Self Aware, un estudio que dice buscar el lugar entre lo accesible y lo experimental, y vaya si lo encuentra.

La web está plagada de divertidas animaciones que trasladan la impresión de que en Middle Child no solo comeremos bien, sino que además lo pasaremos bien. Incluso a miles de kilómetros de Philadelphia.

Publicado el 23 de octubre de 2019 por Rodrigo Núñez
Images copyright to their respective owners

Wagz da en el clavo usando dos tipos muy amigables (y aún poco explotadas en la web) como son Walsheim de Grilli Type y Souvenir de American Type Founders. Además de un color verde que se repite en todas las páginas dándole a todo el conjunto un aspecto súper consistente.

Publicado el 23 de octubre de 2019 por Rodrigo Núñez
Images copyright to their respective owners