Skip to main content

Me gustaría que el logo sea mucho más grande y que este en el medio. Y el menu, ¿ se puede hacer más llamativo y debajo de la sección principal?
Mañana estoy libre, ¿podriamos hacer otra meet?

Cliente Promedio2 horas antes de finalizar el proyecto

Nosotros debemos guiar al cliente.

No al revés.

El Proceso Web: ¿Por qué es importante?

Es normal que al empezar no tengamos un proceso claro. Sin este, el cliente nos llevara por caminos interminables en busqueda de algo que ni siquiera conoce.

El proceso web nos permite guiar al cliente con confianza, saber hacia donde nos dirigimos y que desafios encontraremos en cada etapa.

Tener un proceso nos ayuda a:

  • Saber donde estamos y a donde debemos llegar.
  • Evitar meternos en un laberinto infinito.
  • Poder guiar al cliente fácilmente y llegar al objetivo más rápido.
  • Lograr un mejor resultado.

Puede verlo así. Eres tu propio empleado, y cada hora te esta costando dinero.

Image by vwalakte on Freepik

1. La Reunión

Para empezar podemos coordinar una reunión, fisica o por videollamada, para conocer el proyecto y al cliente. Con este tiempo vamos a buscar obtener toda la información que podamos del proyecto y de nuestro cliente. Debemos escuchar más que hablar.

Algunas preguntas que nos serviran son:

  1. Por qué quieren una web?
  2. Que queremos lograr con el sitio web?
  3. Que debe contener el sitio, que debemos encontrar en el?
  4. Cuales son los productos y/o servicios más importantes?
  5. Qué los diferencia?
  6. Quienes son sus competidores?
  7. Tienen webs de referencias?
  8. Que estilo visual buscamos? Tienen hecho el branding? Logo? Colores?
  9. Cómo funciona su empresa/proyecto?
  10. Como surgió la empresa?

Para esto es fundamental tener un formulario de diseño web que podamos usar como guía a traves de la reunión. En el formulario web debemos agregar toda la información que necesitemos recopilar para realizar la web usando las preguntas de arriba.

2. La Propuesta

En esta etapa es donde analizo toda la información y realizo la propuesta a traves de un pdf que contiene el plazo, el proyecto y el precio.

Puedes buscar ejemplos de propuestas de diseño web en internet. Encuentra una que especifique en cuanto tiempo se realizará el proyecto, las etapas, y el precio. Pronto diseñare alguna que sirva para usar de ejemplo.

Solo pasaremos al siguiente paso si el cliente acepta y realiza el primer pago.

¿Cuanto tiempo dedicar antes de que nos acepten el proyecto?

Lo minimo posible.

Gastar mucho tiempo investigando y diseñando antes de cobrar el deposito es un error común al comenzar en este trabajo. He llegado a hacer todo un mock up del sitio sin tener aceptado el proyecto. Error. Lo mejor es no pasar más de 30 minutos / 1 hora, analizando el proyecto y haciendo la propuesta.

Y la reunión?

A mi personalmente me funcionaba muchisimo hacer la reunión. Pasaba un tiempo conociendo el cliente y el proyecto y le mostraba mis trabajos. Esto me llevaba 30 minutos aproximadamente pero tenia una efectividad altisima y casi siempre se concretaba el proyecto.

Ejemplo Práctico

Nos contacta una Peluquería. Realizamos la reunión y llego a mi oficina a diseñar la propuesta.

  • Analizo webs de peluquerias. (5 minutos)
  • Armo la estructura del sitio. Home page, Galleria, Nosotros, Contacto, Reservas.
  • Diseño la propuesta en pdf. (Tendremos una de base que solo deberiamos modificar.)
  • Envío la propuesta por email.

3. Estrategia, Sitemap y Wireframes

Estrategia

A esta altura me meto de lleno en la estrategia, ya cobramos el deposito y debemos ponernos a trabajar para llegar al objetivo con el mejor resultado en el tiempo establecido.

Analicemos webs de la competencia, webs del mismo nicho en otros países, busquemos los referentes del sector. Con esto vamos a saber rápidamente que funciona y que no.

Sitemap

Luego de analizar la competencia, referencias del cliente y otros sitios armamos el Sitemap. Esto es básicamente la estructura del sitio. Por ej: para una peluqueria el sitemap podria ser, Home, Equipo, Servicios, Galeria, Book Now, Precios, Contacto.

Para mi es mejor coordinar una reunión de 15 minutos para que nos confirmen el sitemap. Le explicaremos al cliente las páginas que pensamos para el sitio con el objetivo de cada una.

Wireframes

Ya confirmamos las páginas que va a tener el sitio, osea el sitemap. Ahora, hagamos el wireframe.

El wireframe es el esqueleto sin imagenes, ni texto, ni colores del sitio. Para esto lo que más me funciona a mi es usar lapiz y papel y realizarlo solo para la Home Page.

Lo Más Importante

Imaginemos que debemos construir una casa.

Gastar tiempo viendo que color va a llevar la casa si no sabemos cuantas habitaciones tendra, o cuantos ambientes no es eficiente.

Podemos pasar días viendo que imagen queda bien o si logramos una funcion increible que vimos en tal sitio. En el diseño web, finalizar detalles puede llevar mucho tiempo, por esto es mejor asegurarnos que estamos pintando o amoblado una casa ya construida.

Es mejor no empezar a diseñar el sitio online sin la estructura clara.

4. Hosting, WordPress y Modo Construcción

Hosting

Recién en este momento buscamos el hosting, instalamos WordPress a traves de Cpanel y ponemos el sitio en modo construcción.

Como hosting yo uso Veerotech. De todos los que probe (Y fueron demasiados), fue el mejor en precio/calidad. Solo es necesario saber inglés para aprovechar su increible soporte al cliente que tienen.

Otros servicios de hosting que utilice:

  • Bluehost: Bueno pero un poco costoso para lo que ofrecen.
  • InMotion Hosting: Ha sido mi empresa de hosting por mucho tiempo. Termine cambiando por la velocidad que ofrecian en el servicio base no era suficiente.
  • DonWeb: Es el más conocido en Argentina. Es accesible pero la velocidad era mala y por esto los sitios tardaban en cargar.
  • Hostinger: Regular. No tuve una experiencia increible usando el servicio.

Instalar WordPress

Para instalar wordpress, uso Softaculous en Cpanel. Lo importante en este caso es usar contraseñas fuertes y de 12 caracteres como mínimo.

Modo Construcción

Hay muchos plugins para poner el sitio en construcción. Para hacerlo rápido, suelo usar un plugin que bloquea el sitio con contraseña. Luego, cuando tengas tiempo puedes buscar alguno que te permita diseñar una página de “En construcción”. Todo a su tiempo.

5. Elegimos el Tema de WordPress

Al principio entraba a Themeforest y buscaba temas que me gusten para el nicho especifico. Luego, cuando encontre la herramienta con la que me sentia mas a gusto no necesite un tema diferente para cada proyecto.

Estos son los temas y constructores visuales más conocidos:

Elementor: El más popular por su versión gratuita. Aunque lleve tiempo aprender a usarlo y acostumbrarse es relativamente fácil. No creo que sea el mejor pero es útil saber usarlo.

Divi: Es el primero que utilice y me ayudo a comenzar a trabajar en esto. Es muy intuitivo y completo. Vale la pena conocerlo.

Temas específicos:  En themeforest podes encontrar miles de temas con las plantillas ya creadas. Instalas el tema, haces uso del one-click install y listo. Solo debes ajustar imagenes, textos y colores.

Important

No hay caminos fáciles, rodeados de paisajes hermosos, y sonidos de pajaritos de fondo ( Bueno. Para esto podes usar una playlist de spotify, pero te aseguro que vas a terminaras odiando esos pajaros).

6. Mostramos la Homepage al Cliente.

Si el cliente nos confirma el diseño de la homepage tenemos el 80% del proyecto listo.

7. Diseñamos el Resto del sitio.

Busca una estrategia para obtener el texto, imagenes, y todo lo que te haga falta. Lo mejor para esto suele ser crear un drive donde el cliente cargue todo lo que tenga.

Vamos a necesitar:

  • Branding: Debemos tener el manual de marca, logo, tipografías, etc.
  • Imagenes: Usamos pexels.com y fotos que tenga el cliente.
  • Textos: Si el cliente lo pasa genial, si no tiene uso chatgpt y luego le pido aprobación. Si quiere cambiarlo enviará un email con el correcto y solo debemos cambiarlo. Si tarda 2 meses en hacer eso, ya no será tu problema.

8. Testeamos, testeamos y ajustamos.

  • Haz click en todo, cada botón debe funcionar y linkear a donde deba.
  • Analizamos el texto buscando coherencia.
  • Configuramos los formularios y nos aseguramos que funcionen. El cliente debe confirmar que reciben los emails.
  • Testeamos la version Mobile y responsive. Debe verse bien en celulares, en laptops y en desktops.
  • Busca opinión de otros diseñadores. Escribeme a santiago@livingofit.com si puedo ayudarte en esto.

9. Ronda de Cambios

Al enviarle el sitio al cliente, nos pedirá cambios. No te enojes, es lo normal, y casi siempre necesario para mejorar el resultado.

No deberian pedir cambios estructurales, ya se acepto la estructura en etapas anteriores. Explicale que ya habian acordado en esa estructura y guialo explicando porque es la mejor. Se pueden cambiar algunas cosas como colores o ubicación de secciones, lo cual no tendrian que llevarte más que unas horas.

Es fundamental saber negociar y comunicarse. Hay muchas probabilidades de que el cliente este inseguro y quiera cambiar todo. Muestrale que te capacitaste para saber que es lo mejor para su empresa y el objetivo planteado.

10. Entrega y Review

Llego la hora de sacar el plugin de Modo Construcción y abrir las puertas del negocio.

Logra que el cliente este feliz con el resultado, que quiera mostrarle al mundo su nueva web, que la ame y te ame a ti por ella. Esto te traera nuevos clientes y buenas reviews.

Review

Pidele que te deje una reseña en Google, Linkedin, o donde sea. Esto es lo que te conseguira el proximo cliente. Seguramente ya tengas un perfil de Google Mi Negocio, crea un link de reseñas y enviaselo.

Este post sigué en construcción y lo seguira por mucho tiempo.

Si necesitas ayuda o tienes alguna duda escribeme en el formulario debajo o a santiago@livingofit.com

Santiago Tonelli

Web Designer/Developer.
I'm here to help you overcome challenges and find success on your digital journey. Feel free to contact me at santiago@livingofit.com for any assistance you may need.