Diseño, Tutoriales | 1 de agosto de 2018

5 Tips para diseñar la primera impresión de un sitio web

Cuando hablo de la primera impresión me refiero a aquello que el visitante de tu sitio web ve inmediatamente al cargarlo, sin la necesidad de desplazarse hacia abajo.

En ingles se le suele llamar a esto Above The Fold o Antes Del Pliegue.

¿Y por qué este nombre? Te preguntarás.

Esto viene desde mucho antes de la internet y se originó en el diseño de periódicos. Los diarios habitualmente se ponían en una pila y se doblaban a la mitad por una cuestión de espacio. De este modo los diseñadores y periodistas tenían la misión de capturar la atención de los lectores y convencerles de comprar el periódico solo con la información de la mitad superior de la portada. La información que estaba sobre el pliegue.

En nuestro caso, como diseñadores web, el pliegue se ha transformado en scroll, por lo tanto el trabajo está en diseñar el homepage de nuestros sitios web, de tal modo que lo que se ve antes del desplazamiento, sea suficiente para permitir al visitante:

  1. Saber si está en el sitio correcto
  2. Decidir si seguirá navegando en el sitio o retirarse de él

En el fondo lo que queremos es que las personas correctas se queden en el sitio y aquellas que no son parte del publico objetivo se retiren.

Para conseguir esto lo que debemos evitar es presentar una imagen poco clara o confusa sobre el sitio web, ya que eso dejará a los visitantes dudosos y probablemente decidan no quedarse.

Entonces la pregunta es ¿Qué podemos hacer desde el punto de vista del diseño para proyectar una buena impresión tan pronto como cargue el sitio?

Aquí tienes 5 tips que te pueden servir:

1. Presenta una propuesta de valor

Básicamente debes decirle al visitante de forma directa y concisa qué es lo que el sitio web tiene para ofrecerle.

Si miramos el sitio de invision, una plataforma que permite a diseñadores crear prototipos y compartirlos, veremos que dice ”Diseña mejor, más rápido y en conjunto”.

Este es un excelente ejemplo de cómo, en pocas palabras puedes decirle a tu visitante “estamos aquí para ayudarte a conseguir X objetivo”.

2. Identifica a la persona a quien te diriges

Lo ideal es que cuando un visitante llegue al sitio pueda discernir de inmediato si este sitio es para él o ella o no.

Si miramos el sitio de slack veremos que dice “Donde tu trabajo fluye.”. Es un poco vago, pero suficientemente potente para captar tu atención y decirte que ofrecen ayudarte a que tu trabajo sea más fluido.

Si lo sumamos al párrafo que sigue a ese título y la imagen destacada veremos que explican muy claramente a qué tipo de profesionales apuntan y que su principal factor diferenciador es la confianza.

Entonces si trabajas en equipo, necesitas comunicarte y das valor a la confianza, estás en el sitio correcto, si no eres libre de retirarte.

3. Muestra el estilo de la marca sin miedo

Hay marcas transgresoras, marcas conservadoras, marcas elegantes, etcétera, etcétera.

Por lo general el estilo y personalidad de una marca no se expresan de modo verbal, sino más bien a través del lenguaje del diseño y las imágenes.

Usa el diseño que rodea y complementa el mensaje principal para expresar el estilo de la marca.

Si miramos el sitio de Wom, una empresa de telefonía móvil, veremos que en términos de contenido básicamente dicen que tienen planes convenientes, pero por los colores y el diseño, entendemos que nos hablan de un modo amigable y juvenil.

Mientras que si miramos a Entel, veremos que el contenido es más o menos similar, pero el diseño nos dice que es una marca un poco más tradicional, formal y no tan emocional.

4. Jerarquiza y enfócate en una sola idea

No quieras poner toda la página antes del scroll, vas a terminar dando la impresión de estar desesperado y querer decir todo al mismo tiempo.

Has conocido a esas personas que hablan super rápido, no hacen pausas, te dicen cinco cosas a la vez y te hace sentir incómodo por no poder llevarle el ritmo, así se siente cuando quieres que todo el diseño esté antes del scroll.

Escoge un producto, una idea, una propuesta de valor y enfócate en ella. Ya tendrás tiempo para cambiarla en el futuro si no te funciona bien.

Sony, con todos sus productos, elige destacar solo uno.

5. Define un paso siguiente

Supongamos que la persona ideal llegó al sitio, vio tu propuesta de valor y se interesó, además le gustó el estilo de la marca… ¿Ahora qué?

Es importante que le digas a esa persona qué es lo que esperas que haga a continuación.

Invítale a registrarse, a suscribirte, a ver tu producto destacado, a cotizar, a contratarte, a ver tu portafolio o lo que sea que quieras que haga y hazlo tan fácil como sea posible.

Lo que menos quieres es que el visitante ideal llegue al sitio y se vaya porque no supo qué hacer a continuación.

Asana deja muy claro que quiere que hagas click en «Comenzar».

Y bueno, espero que estos tips te ayuden a diseñar mejores paginas de inicio, con un contenido antes del scroll bien estructurado, que permita conectar de mejor manera con aquellos que forman parte de tu público objetivo.

¿Tienes algún tip adicional que te gustaría agregar a la lista? Déjalo en un comentario debajo de este video.

Te mando un abrazo y no vemos en la próxima.
@FranciscoAMK

También te podría interesar:

Honestamente, soy un tipo exitoso

Me considero una persona exitosa. Fue a principios de este año, durante una conversación con mi esposa en donde realmente me di cuenta de lo exitoso que soy. Es algo raro si tomamos en cuenta que no vivo en una casa grande y con piscina, no gano cantidades estratosféricas de dinero, no soy famoso, no […]

Seguir leyendo...

Diseñando las gráficas del curso de Webflow

Acompáñame en este episodio de «Diseñando con Francisco» mientras diseño las gráficas del curso de Webflow que puedes encontrar en mi plataforma de cursos amkpro.com.

Seguir leyendo...

No estaba muerto, estaba trabajando

Si eres una de aquellas personas que siguen mi contenido con frecuencia, seguramente habrás notado que las últimas semanas no he publicado artículos en el blog ni episodios nuevos de Huevos Revueltos pero antes de que te asustes, déjame decirte que no he abandonado el sitio ni pienso hacerlo ;), solamente he estado con mucho […]

Seguir leyendo...

Hay 6 opiniones

  1. Hola Francisco,
    Me encanta el nuevo enfoque de tu plataforma, más enfocado al diseño. Estupendo!! Te sigo de cerca y esperando las novedades que vas a ofrecer.

    Un abrazo.

    Débora.

  2. Hola gracias de verdad tus concejos me han servido de ayuda gracias a ti pude graduarme de verda lamento no tener los dolares para pagar todos tus cursos que se que mejorarian mas mi comprension de la creacion de mejores paginas web esperoen algun momento el que mejore economicamente en mi pais venezuela ya estoy afiliado a tu conexion espero ver mas contenido pronto 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 8.322 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

Ya me suscribí antes, no me muestres esto.