El proceso de diseño web que sigo en mis proyectos con clientes
Cuando alguien nuevo entra al mundo del diseño web, habitualmente lo hace a ciegas o siguiendo tutoriales, pero rara vez ocurre que lo haga con una completa claridad con respecto al proceso de diseño web en su totalidad. Es por eso que en este artículo quiero compartir contigo el detalle del procedimiento que yo sigo al crear sitios web para mis clientes.
Este proceso detalla los pasos que sigo al trabajar en proyectos en los cuales mi rol es el de líder y ejecutor, es decir, realizo las labores de consultor, diseñador y desarrollador web. Cuando estoy en modalidad freelance, o sea, ofreciendo mis servicios para otras agencias, el proceso es muy diferente y, en la mayoría de los casos, está basado en sus requerimientos.
Probablemente, las partes técnicas las cubra con algo de superficialidad, porque en este caso, me interesa entregarte una visión global. Si lo que te quieres es ver tutoriales detallados, hay una completa sección de este sitio dedicado a ello.
Vamos directo al grano:
1. Definición de objetivos y estrategia
La primera etapa del proceso está orientada a definir (o entender) los resultados que el cliente busca conseguir con su sitio web. Si no los tiene muy claros, le ayudo a definirlos de manera directa, concreta y medible.
Una vez con los objetivos establecidos, pongo sobre la mesa las diferentes opciones que, según mi experiencia, podrían ayudarnos a conseguirlos. En conjunto con el cliente discutimos su viabilidad y decidimos cuál es el camino que tomaremos con el sitio.
De estas conversaciones surgen las estrategias que definirán si, por ejemplo, la web será un blog o un sitio tipo brochure, si contempla la intención de generar una lista de suscriptores vía email o si se potenciará el formulario de contacto o solicitud de cotizaciones, etc.
2. Desarrollo de contenidos
Ya con la estrategia del sitio web definida, llega el momento de definir, junto con el cliente, cuál será el contenido.
Habitualmente, presento un listado de las páginas que yo creo que sería relevante tener en el sitio y, en conjunto, discutimos si es lo correcto o si hay alguna que falte o sobre. Para cada página anotamos un pequeño listado de las cosas que debería incluir.
Luego de que el mapa de contenidos está definido, es el turno del cliente para redactar los textos o, en el mejor de los casos, contratar a un profesional para ello.
A medida que los textos están listos, yo los reviso y hago sugerencias al cliente toda vez que estimo que algo se puede mejorar.
3. Propuesta de diseño
Con el contenido listo, ya es momento de comenzar a diseñar.
Si bien, por lo general disfruto con cada parte de mi trabajo, este es el momento en el que en mi cabeza se escucha “¡¡¡Yeah baby. A diseñar!!!!” con voz de Barry White.
Aquí lo que hago, en primer lugar, es bocetear en mi libreta la estructura general que quiero dar a cada plantilla del sitio, para luego guiarme en ella al momento de diseñar la versión final. Aquí hay un ejemplo:
De allí, me paso a Sketch3 a diseñar directamente. Con el tiempo me he acostumbrado mucho a usar este software, tanto así, que hace meses que no abro un diseño en Photoshop. Éste último se ha vuelto para mí, únicamente una herramienta (la mejor) de edición de imágenes.
Si no conoces de Sketch3, anteriormente he realizado dos tutoriales que puedes revisar aquí y aquí.
Dependiendo del tipo de sitio web, la propuesta que le entrego al cliente puede ir desde mostrarle la página de inicio y una página interna, hasta presentarle unas 6, a 8 plantillas de página diferente.
La aplicación que uso para presentar mis diseños es Invision. A través de ella, puedo crear un tour por cada pantalla, explicando el porqué de cada elemento e incluso el cliente tiene la posibilidad de dejar comentarios encima del diseño toda vez que algo le genere dudas.
Cuando comencé en esto, presentaba al cliente tres propuestas de diseño, para que él eligiera, pero hoy en día, entrego una sola. ¿Por qué? Porque el trabajo que realizo con el cliente en las etapas anteriores me da la seguridad de saber exactamente lo que el proyecto necesita. Así, el diseño deja de ser una cosa que depende del gusto del cliente, en donde “el que más le guste” es el que se usa, y se convierte en el resultado de un proceso profesional.
Si puedes leer en inglés te recomiendo dar un vistazo a este artículo. Si no, también (puedes aplicar Google Translate).
En conjunto con el cliente trabajamos en refinar los detalles. No hay una cantidad de correcciones máximas establecidas, pero en general, no son más de 2 o 3 instancias de revisión.
No me gusta incluir una clausula específica de cuantas instancias de corrección hay disponibles, ya que la experiencia me ha demostrado que si dices que hay hasta cinco instancias, el cliente hará lo posible por usarlas todas y, por el contrario, cuando no hay límite, con una o dos correcciones es suficiente. Lo que hago es poner plazos por etapa de tal modo que tiene, por ejemplo, una semana para hacer cambios, si no, seguimos adelante con el proyecto.
Tampoco suelo entregar propuestas de diseño responsive a modo de imagen, por lo general, los clientes confían en mi criterio, y saben que haré un buen trabajo al ajustar el diseño para dispositivos móviles.
4. Desarrollo (maquetación y WordPress)
La lógica con la que casi siempre se enseña el desarrollo de sitios sobre WordPress, es la de crear una maquetación en HTML/CSS y luego integrarla con el CMS.
Éste método es el adecuado para quienes están comenzando con una o con otra de estas tecnologías, sin embargo, no es lo que yo hago. En mi caso trabajo todo de una sola vez.
Por lo general comienzo con un tema base o starter theme (por como le llaman en inglés) que creé yo mismo y que posee las características base necesarias para desarrollar un tema completo. Sobre este tema voy aplicando el diseño y añadiendo las plantillas de página y opciones que fuera necesario.
No te vayas a confundir, un tema base no es lo mismo que un tema padre o un framework. Lo que yo uso es partir con la versión más básica posible de un tema, y modificarlo para que se adapte a las necesidades del proyecto. Si se tratara de un tema padre (como divi*) o un framework (como genesis) tendría que crear un tema hijo, lo cual no es mi procedimiento preferido, ya que, en mayor o menor medida, mi libertad de diseño se ve algo limitada.
A medida que voy maquetando cada parte del sitio, voy integrándolo de inmediato, es decir, si estoy maquetando el header, hago que el logo cargue dinámicamente, que el menú sea el definitivo, y así sucesivamente.
No estoy queriendo decir que es lo óptimo, sino lo que a mí me resulta más directo, cómodo y rápido, porque ya tengo bastante experiencia, tanto con HTML y CSS como con WordPress.
El CSS lo suelo trabajar en LESS y luego procesarlo a través de SimpLess para obtener un único archivo comprimido. Ya escribí un tutorial sobre eso anteriormente.
Cada sitio requiere desarrollos en particular: Algunos necesitan integrar formularios de mailchimp, otros necesitan WooCommerce y otros, desarrollos personalizados. Una vez que la estética general del sitio ya está lista, es el momento de realizarlo.
A propósito, si aún no manejas bien el desarrollo de temas de WordPress, tengo un curso muy completo que lo cubre en profundidad. El curso se llama Creación de Temas WordPress Profesionales.
5. Revisión y capacitación.
El sitio de muestra suelo montarlo en mi propio servidor para que el cliente pueda acceder y revisarlo.
Mientras yo avanzo en el desarrollo, le doy al cliente acceso a mi curso Dominando WordPress, para que se familiarice con la herramienta y, una vez llegado el momento, pueda administrar su sitio con facilidad.
Cuando ya tengo un avance considerable, le doy acceso al sitio web y para que pueda corregir lo que sea necesario a nivel de contenido, y para que me pueda decir si ve algún error.
Una vez que el sitio ya está listo, lo revisamos en conjunto, sección por sección, para asegurarnos de que todo esté correcto.
6. Publicación
Cuando todo está revisado y aprobado, es momento de sacar el sitio de su servidor de pruebas y llevarlo al dominio y servidor del cliente.
Hace tiempo publiqué un tutorial acerca de cómo trasladar un sitio desde el servidor local al servidor definitivo que es precisamente lo que hago en esta etapa.
Con el sitio publicado, me olvido de todo y no le hablo nunca más al cliente… nah mentira. Aún faltan algunas cosas.
Integro en el sitio los plugin SEO y Analytics by Yoast, el primero de ellos para gestionar la optimización para motores de búsqueda y el segundo para hacer un seguimiento de las visitas.
También entrego al cliente un video personalizado explicando los detalles específicos de su sitio con respecto a la administración y le doy un mes de plazo para que me avise si encuentra algún error en el sitio que requiera mi intervención o para preguntarme cualquier cosa sobre la administración. Luego de ese plazo, podría cobrarle por cada asesoría.
Y ese es, mi querido(a) lector(a), el proceso que éste humilde servidor lleva a cabo para la creación de sitios web para sus clientes.
Como podrás darte cuenta es un proceso que va bien mano a mano con el cliente, en dónde éste tiene muchas tareas que realizar y, por supuesto, no es un proceso que se pueda aplicar con todo tipo de clientes, sino más bien con clientes que son personas individuales o de empresas pequeñas o medianas.
Para empresas más grandes o instituciones de mayor nivel, se requiere de otros procedimientos, más del ámbito de agencia, en donde se contemplan reuniones con directivos, presentaciones en comité y cosas de ese tipo. Lo he hecho, pero no es mi especialidad.
Espero que te haya servido si es que estás comenzando o que te haya hecho reflexionar un poco si eres alguien con más experiencia.
¿Cómo luce tu proceso de diseño web? Cuéntamelo en los comentarios.
Un abrazo,
@FranciscoAMK
*El enlace a divi, de Elegant themes es un link afiliado, si compras el tema después de clickear mi enlace, me regalan un par de dólares 🙂