Buscar

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)


⏬⏬⏬


Paso 4

El prospecto entiende la experiencia de alma vip center en los tratamientos que ofrece (sección de información sobre alma)


⏬⏬⏬


Paso 5

Se consolida la opinión del prospecto con las opiniones reales personas que han utilizado los servicios de la alma vip center (testimonios)


⏬⏬⏬


Paso 6

El prospecto entiende que puede contactar a la marca por diferentes medios.



Toda la información que se organiza antes de diseñar la página web la provee en este caso el cliente de forma directa, mediante una reunión previa donde se establecieron todas las solicitudes que necesitaba la marca en su página web.



¡Que no se te olvide!

➡️ No importa si lo haces en un papel, en tu pc o en una servilleta, lo importante es que tengas claro cómo vas a colocar todos los elementos dentro de la web con un orden de prioridad: el logo, el banner de bienvenida, un banner de ofertas, los botones, etc. Esto te permitirá visualizar mejor el diseño en relación con el funcionamiento.


➡️ Como todo en la vida la organización y la estructura puede ir cambiando a lo largo del desarrollo, porque es un proceso creativo y pueden surgir nuevas ideas, así que no pasa nada si desechas ideas viejas para implementar nuevas ocurrencias creativas.


➡️ Todo lo que está en la estructura tiene que tener un porqué, de lo contrario no es necesario, y debes desecharlo.


➡️ Recuerda hacer la navegación lo más fácil que puedas a tu visitante, páginas muy rebuscadas confunden y el usuario termina cerrando la ventana (x), hay que evitar esto a toda costa porque influye en nuestra tasa de rebote.

 

Hack #2

Textos que capten la atención


Aquí el Copywriting va a ser tu mejor aliado, porque esta técnica es indispensable para transmitir el mensaje correcto cuando un potencial cliente esté navegando en tu web.


La idea es contarle a tu visitante a través de tus textos que TU tienes lo que él necesita y el cómo elegirte lo va a beneficiar. Usa palabras claves, combina diferentes tipografías para resaltar títulos, párrafos y descripciones.


Si tienes una tienda en línea, las descripciones de tu producto o servicios serán la cereza del helado, si tu visitante llegó hasta allí es porque quiere comprarlo y esta a segundos de decidirlo, logra un SÍ definitivo resaltando los beneficios de eso que tanto anhela comprar y de cómo le va aportar valor en su vida.


⬇️Mira estos ejemplos reales⬇️


Apple te dice que podrás llevar una vida mas saludable con su reloj inteligente, el beneficio es parte de su estrategia publicitaria y lo logra con textos persuasivos que conectan con lo que su cliente esta buscando. Claramente su cliente es alguien que ya tiene un estilo de vida saludable o esta a punto de dar el salto, y el Apple Watch se muestra como una herramienta que te va a ayudar a lograrlo.



¿Eres de los que disfruta ver series y películas? Netflix te da el beneficio de que las puedas ver de forma ilimitada y donde quiera que estes. Un beneficio difícil de resistir 😜 (debo confesar que yo no pude)


Uber Eats hace la pregunta correcta en el momento correcto, si entras a Uber Eats es por ya tienes hambre...su botón de "Entregar Ahora" es su beneficio principal, su objetivo es entregarte alimentos en el menor tiempo posible.



¡Que no se te olvide!