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!


➡️ Justo en ese instante donde tu prospecto se ha tomado unos minutos de su valioso tiempo para revisar tu página web, la lectura debe ser precisa, es tu oportunidad para hablar con él sin estar presente. Los textos son una conversación, entre tu cliente y tu negocio, solo tu sabes que es lo que quiere escuchar.







➡️ Si quieres aprender mas acerca de copywriting te recomiendo a Maider Tomasena es una de las mejores y tiene su propia escuela.



Hack #3

Imágenes NÍTIDAS por favooooor


Todo lo que el usuario observa en una web se queda en su mente, entonces ¿prefieres que recuerde la página de tu negocio como una imagen borrosa y pixelada? o ¿como una imagen nítida y de calidad? Lo que le muestras a tu potencial cliente es lo que tu marca representa y eso forma parte de tu branding.


Si manejas productos, la fotografía es clave para poder vender, y es una oportunidad para mostrar su uso, su tamaño y los detalles que lo hacen especial. Siempre ten disponible la opción de lupa, para proporcionar la experiencia de ver la pieza como si el cliente la tuviese en sus manos.


Si tu web es informativa muestra fotos reales de tus clientes, de cómo se benefician con tus servicios, de tu equipo de trabajo, de tus oficinas, etc. Con el objetivo de generar confianza y mostrar que tu negocio es lo que justo tu prospecto estaba buscando.


⬇️Revisa estos ejemplos para evitar imágenes pixeladas⬇️



¡Que no se te olvide!

➡️ Si aún no sabes donde encontrar imágenes nítidas te recomiendo plataformas como Unpash y freepik, son totalmente gratuitas y con una gran calidad.



Hack #4

Coherencia y Color


Imagina la confusión de un usuario que se dispone a visitar la web de una marca que se identifica con el color rojo y que al entrar la página sea morada… lo primero que va a pensar es que se equivocó y está en la web que no es.


La paleta de colores es el primer indicativo visual de que estoy en la web correcta.


Los colores de tu web tienen que ser fieles a los colores de tu branding, ya que si el trabajo previo de investigación y creación se marca se hizo bien, estos colores fueron seleccionados por una razón.


⬇️Estas grandes marcas son fieles a sus paletas de colores⬇️



El color es ese elemento que habla sin decir una sola palabra, porque genera una sensacion, una emocionalidad al estar en contacto con el ojo humano, por eso es tan importante que la paleta de color que dispongas a usar, tenga el objetivo de que el usuario pueda permanecer en tu web sin saturarse visualmente.


¡Que no se te olvide!


➡️ Los colores también pueden ser tus aliados para resaltar elementos del texto, atreve usar colores vivos que trabajen en sinergia con la paleta de colores de tu marca.


➡️Si aun no tienes una paleta de colores te recomiendo estas paginas Material Palette y Adobe Color que son de gran ayuda iniciar la combinación cromática.








Hack #5

Conecta con testimonios


Una de las razones de éxito de páginas como amazon es el incluir los testimonios de clientes dentro de la estructura y diseño de la web. No importa si el negocio es de un producto o servicio, ambos dependen de un cliente feliz para lograr crecimiento.


Los testimonios reales consolidan la experiencia del negocio y ayudan a la decisión de compra del visitante.


Saber que opinan tus clientes de tu producto o servicio además de ser una referencia para otros es una escalera directa a su decisión de compra, y genera tal impacto que obliga a sus vendedores a dar lo mejor.


Tu decides en qué sección de la web y en qué formato los vas a compartir, pero recuerda contemplarlo en la estructura.


⬇️Cada una de estas marcas adaptan el valor del testimonio según sus necesidades⬇️


Amazon, Airbnb y shein son ejemplos que evidencian que el testimonio es indispensable para la decisión de compra.


Ejemplo Amazon

Ejemplo Airbnb

Ejemplo Shein




¡Que no se te olvide!


➡️ ¿Aún no tienes testimonios? Es hora de implementar el servicio al cliente enviándoles a tus compradores un formulario de servicio, donde hagas preguntas claves que permitan que ellos te evalúen y así puedas aprender de su experiencia.





➡️Formularios gratuitos como google formularios son una gran herramienta.


Hack #6

¿Cómo te contacto?


Tu página web tiene que tener TODAS tus formas de contacto y están tienen que estar siempre ACTUALIZADAS. Y si al darle clic tienen un link ligado a una acción mucho mejor.


⬇️Cada una de estas acciones te acerca a tu cliente potencial⬇️


👉🏽El número de teléfono de tu negocio debe estar linkeado a iniciar la llamada desde el teléfono del prospecto o cliente.


👉🏽El correo electrónico de tu negocio debe estar linkeado para abrir la app de email lista para que el prospecto o cliente pueda escribirte un correo.


👉🏽El número de whatsapp de tu negocio debe estar linkeado a iniciar una conversación en WhatsApp desde el teléfono del prospecto o cliente.


👉🏽Las redes sociales de tu negocio deben estar linkeados a abrir la app de forma automática para que el prospecto o cliente pueda seguirte.


¿Porque tiene que tener una acción? porque los clientes al tener un interés en nuestro producto o servicio quieren contactarnos de forma rápida, y eso nos beneficia, porque podemos hablar con el de forma inmediata y además sus datos de contacto quedan a nuestra disposición para darle seguimiento.





Si quieres ir más allá, es fundamental que integres un formulario de contacto bien estructurado que pueda ser llenado por tu potencial cliente de forma rápida y segura.





Un formulario de contacto te permite además de obtener la información básica de tu prospecto como: el nombre, el apellido, el teléfono, el email, etc. también te permite crear apartados personalizados para obtener información adicional.


Ejemplos:

¿Cómo supo de tu marca?

¿Rango de presupuesto disponible?

¿Cuales son las fechas de interés?

¿Opciones de lugares?

Habilitar una casilla de suscripción


Esta información extra puede ser de gran utilidad para medir comportamientos e implementarlo en las estrategias de marketing.


¡Que no se te olvide!


➡️ Deja siempre un apartado en tu formulario de contacto con disposición libre para que tu prospecto pueda escribir información adicional si lo necesita.


➡️El formulario debe ser corto y preciso, de llenado rápido. Recuerda que el tiempo es un factor importante y nadie quiere estar más de 10 minutos completando información.

Hack #7 BONUS

Diseño Responsive


Este hacks le da un propósito a todo lo demás, y por eso lo deje para el final. Es uno de los más importantes a tener en cuenta para potenciar el diseño web.


El diseño responsive es el encargado de que tu web se pueda apreciar correctamente en las pantallas de los dispositivos actuales (Laptop, PC, Teléfono, Tablets) No importa que tan bien hayas realizado los hacks anteriores si tu web no es responsive.




En el hacks #3 te platique que “todo lo que el usuario mira en una web se queda en su mente” imaginate lo que va a recordar de una marca si al entrar desde su smartphone la web no es responsive, si nada de adapta, si no logra conseguir la información que está buscando, inmediatamente dirá que la web es un desastre y no querrá volver a entrar, y de esta forma esa negocio quedará posicionado en su mente de forma negativa.


¡Que no se te olvide!


➡️ La página se tiene que adaptar al visitante para el cual fue hecha. Te lo resalto porque me he conseguido con paginas web que estan hechas como para astronautas, son estéticamente hermosas y me se sacan un ¡wow! pero su funcionamiento es tan complicado y fuera de los estereotipos que es MUY difícil navegar en ellas, lo que hace que yo, tu o cualquier usuario al final se desesperes y termines por cerrarla en segundos.





Espero estos hacks sean de valor para ti, recuerda que si tienes un hacks adicional házmelo saber para compartirlo


Gracias por leer 😎












  • Facebook Ruth
  • Instagram Ruth
  • Linkedin Ruth