Diseño, Reflexión | 10 de junio de 2015

El proceso de diseño web que sigo en mis proyectos con clientes

También puedes escuchar este artículo
Abrir en otra ventana

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:

Current status

A post shared by Francisco Aguilera G. (@franciscoamk) on

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 🙂

También te podría interesar:

El camino de la creatividad (Mi vida con Trastorno Creativo Compulsivo)

En esta charla compartiré contigo parte de mi historia como creativo y las ventajas y problemas que me he encontrado en el camino. Espero que te parezca interesante y si quieres agregar algo, déjame un comentario. Hasta la próxima Un abrazo @FranciscoAMK

Seguir leyendo...

Un pequeño experimento para reducir las reuniones innecesarias

No me gustan las reuniones, por lo menos las presenciales. La mayor parte del tiempo creo que son una pérdida de tiempo, que lo mismo que se expresa en una reunión puede igualmente ser compartido mediante correo electrónico, una conversación por chat o a través de una video llamada por Skype o Hangout. Pero vivo […]

Seguir leyendo...

WordPress no es la panacea

La semana pasada te conté acerca de tres proyectos poco convencionales que he creado con WordPress. Con ese antecedente cualquiera podría pensar que WordPress es tan genial que sirve para cualquier cosa, pero no es así… o tal vez sí. Según explicó Matt Mullenweg, en su revisión anual del 2015, WordPress nació como una plataforma […]

Seguir leyendo...

Hay 21 opiniones

  1. Francisco,

    Me gusto mucho que coloques el desarrollo de contenidos por parte del cliente antes que la presentación del diseño, justamente lo estaba haciendo al revés y lo que terminando pasando es que la mayoría de las veces el cliente demora mucho en entregar el contenido. Asimismo el paso donde haces todo de una en css, html y wp puede tomar más tiempo pero lo que siempre pasa es que decides cambiar algo cuando ya vas en el wordpress, entonces me hace sentido.

    Sería genial si pudieras añadir una guía (PDF) con la lista de los pasos a seguir.

  2. Hola Francisco,
    También trabajo freelance y mi proceso es muy similar. Interesante el tema que revises los contenidos (textos), en general propongo y sugiero como deberían ser, pero no me centro mucho en eso, espero que el cliente me los entregué listos.

    En mi proceso sólo cambia en el tema de wireframes, me di cuenta que para mi es más ágil hacer wireframes responsive (tamaño grande, mediano y pequeño de pantalla) esto lo reviso con el cliente y si esta todo ok, sigo adelante con el diseño. Me sirve sobre todo para el tema de la programación, así ya tengo determinado como cambian las columnas o elementos puntuales, como será el menú para móvil que se usará, como cambia el header, y sólo me dedico a programar con las decisiones ya tomadas, aunque esto es flexible y voy haciendo ajustes cuando veo una solución mejor. Saludos!

  3. Hola Francisco!

    Yo también estaba haciendo el proceso al revés, y con esto que acabas de revelar me has abierto los ojos, ciertamente cuando trabajas primero diseñando el cliente demora muchísimo en entregar el contenido y el diseño se ve afectado posteriormente pues la entrega que presentaste al principio ya no concuerda mucho con el contenido del cliente.

    Como complemento me gustaría saber si ese video que proporcionas a tus clientes lo manejas para todo tipo de clientes o lo manejas con costo extra?

    Muchas gracias por tu ayuda y guía en estos procesos me ha quedado súper claro todo!

  4. Hola Francisco!
    Me ha resultado muy útil la información, lo que no me queda claro es qué hacer una vez que tengo realizada la maquetación en Sketch, es decir, cómo traslado eso a un código HTML o a una página web funcional. Podrías hacer un pequeño tutorial al respecto?

  5. Hermano, me gusto tu post, me ayudo a entender mejor el proceso. Cometo muchos errores como no definir cuanto tiempo le voy a dar soporte gratis, tengo un cliente que después de medio año sigue dando lata y como le mueve a qui como le mueve haya y me hace perder mi tiempo pero nunca llegamos a un acuerdo sobre el soprote y nada de eso.
    Y en cuento a Génesis créeme no te limita nada en cuanto al diseño, puedes hacer lo que quieras yo sigo tu curso de temas para WordPress y sigo muchas de las cosas que he aprendido en tu curso en mis temas hijos de génesis.
    Un saludo.

    • Hola Jorge, no está entre mis planes cercanos vender un tema en Themeforest u otro marketplace de ese tipo, básicamente porque lo que a mí me gusta es diseñar y desarrollar temas, y cuando comienza a hacerlo dentro de ese negocio, la mayor parte del tiempo te la pasas dando soporte a los clientes que te compraron el tema, en lugar de seguir diseñando y desarrollando. Por eso me gusta más trabajar con clientes directos.

  6. Hola Francisco, me ha encantado que muestres tu proceso de diseño, a mi me sirvio mucho ya que estoy en el proceso del salto al diseño web.
    Tengo una pregunta, cuando desarrollas un nuevo tema para wordpress, ¿el código html de cada página, lo realizas con el editor de wordpress o lo haces en ficheros .html?
    Muchas gracias.
    Saludos.

  7. Hola Francisco muy buen articulo.
    Ayer viaje por el día a mi ciudad de origen a resolver unos temas, resulta que allá me encontré con mi ex jefe y amigo minutos antes de tomar mi vuelo. La cosa es que le propuse crear el sitio web para su empresa, que por cierto esta muy grande (yo fui su primer trabajador) y el me dijo ok envíame una cotización. Todo esto fue muy rápido y no tuve tiempo de realizar un análisis de lo que necesitaba.

    Ya explicado esto que me recomiendas:
    1. Enviarle una propuesta a secas con los valores del hosting, dominio y un sitio web en wp?.
    2. Agendar una reunión con él?.
    Yo creo que la segunda es la mas obvia, pero tengo esa leve impresión de que no querrá perder su tiempo, ademas es primera vez que intento vender un servicio de diseño web.

    Espero me puedas orientar.
    Saludos.

    • Si ya sabes lo que necesitas para crear el sitio dale un presupuesto, si no, es necesario que tengas otra reunión, pero no lo plantees como una reunión de cotización sino como una reunión de trabajo para entender sus necesidades y proponer ideas, eso no es una pérdida de tiempo 😉

  8. Buen día Francisco,
    Tu artículo es de gran ayuda para los que vamos iniciando en el diseño y desarrollo de sitios web.
    Lo que no me quedo muy claro es en el paso 3 Propuesta de diseño.
    ¿El boceto lo preparas en Sketch3 y para presentárselo al cliente todo ese diseño lo exportas a la aplicacion Invision? o en Inivision tienes que realizar nuevamente el diseño.

  9. Estoy de acuerdo con el post pero en mi caso en esta nueva empresa en la que estoy trabajando los cliente (los dueños de la empresa también) esto no lo entienden ellos quieren todo, suscriptores, brochure, todo…menos blog porque ahí ya tienen que generar contenido y no quieren perder tiempo en eso, ni pagar para que alguien lo haga.
    Es bastante desesperante

  10. Excelente artículo!

    En mi caso, no soy diseñadora web sino diseñadora de procesos. Tu contenido me ha ayudado a comprender de forma general como debe desarrollarse éste para que fluya de manera optima; y por lo que entiendo en la retroalimentación de los comentarios, este es un paso paso muy acertado.

    Gracias por la información, seguiré estudiando las mejores prácticas!
    Saludos.

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 7.817 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.