6 hacks para potencia tu web gráficamente
Sin mucho preámbulo te comparto estos hacks que desde mi experiencia han sido los puntos que hacen la diferencia en el diseño web.
Hack #1
Organización y Estructura
El diseño y funcionamiento exitoso de una página web depende de estas dos palabras, porque ellas son las bases y las guías para colocar los elementos gráficos visuales que la hacen real: banners, los botones, el menú, el pie de página, etc.
¿Cómo Organizar?
Aquí la idea es darle un orden prioritario a la información que se va a mostrar en la página web, para ello responderemos preguntas como: ¿qué es lo primero que queremos que vean los visitantes cuando entren a la web? ¿qué es lo segundo que queremos mostrar? ¿qué es lo tercero? y así sucesivamente hasta llegar al final y preguntarnos ¿Cuál es la información con la que quiero cerrar?
¿Cómo estructurar?
Una vez que ya tenemos el orden de la información, es hora de colocarla en la página web de forma organizada y representada con elementos visuales, para esto usa cualquier herramienta que esté a tu alcance para definir donde va cada cosa a nivel gráfico, (yo lo hago a lápiz y papel, mas adelante te muestro un ejemplo de estructura)
Para que comprendas mejor este hack te coloco un ejemplo real de la pagina web www.almavipcenter.com
Todo lo que te voy a explicar a continuación se repetirá en cada pagina interna de tu web.
En el caso de Alma te voy a poner como ejemplo la pagina principal (Home) para que puedas visualizar la forma en la que organice la información por prioridad:
A la izquierda podrás encontrar la organización y la estructura inicial sin haber aun diseñado las piezas finales que puedes ver del lado derecho. La organización la priorizo por numeros y la estructura son los bloques esquemáticos grises y blancos que me indican donde voy a colocar la información
1. Encabezado
Lo primero es establecer el encabezado, ya que en esta área se coloca el menú de navegación de la web, donde el visitante puede ver inmediatamente el orden de las páginas internas del sitio web: Home - Alma - Citas - Tratamientos - Contacto - Redes Sociales
Luego de visualizar el menú, establecí como siguiente prioridad colocar un banner (banner principal) que ademas de dar la bienvenida visual a la web, le informa al visitante de que trata esta marca, y agregue unos botones para que pueda obtener información mas detallada.
2. Banner Formulario Cita
Una de las solicitudes del cliente fue crear un espacio dedicado a para reservar citas en línea para los tratamientos que la marca ofrece, por eso en la estructura de la pagina se ubica como una prioridad y lo incluyo posterior al encabezado.
3. Tratamientos
Posteriormente tenemos un breve resumen de los servicios faciales y odontológicos de la marca, con liga directa a la página de tratamientos para una información más detallada.
4. Información sobre Alma Vip Center
Una vez expuestos los tratamientos, seguimos con el apartado que platica sobre la experiencia de la marca en el rubro estético y odontologico.
5. Testimonios
Finalizando el recorrido de Home, se crea un espacio de testimonios para consolidar la experiencia de la marca con los comentarios reales de sus clientes. Este es un elemento de pre-cierre, ya que en este punto el cliente potencial tiene en un 80% decidido si va a realizar o no la compra.
6. Contacto
Finalizamos el recorrido informativo y visual de la sección de Home con la ficha de contacto
En una visita rápida a Home en la página de Alma Vip Center el prospecto (posible cliente) tiene toda la información necesaria en 6 pasos.
Paso 1
El prospecto entiende lo que hace la marca (encabezado)
⏬⏬⏬
Paso 2
El prospecto entiende que puede hacer su cita en línea (formulario de cita)
⏬⏬⏬
Paso 3
El prospecto entiende los tratamientos que ofrece alma vip center y de que trata cada uno de ellos (sección de tratamientos)