In Autores Invitados, WordPress
7 principios básicos para mejorar tu web y convertirla en algo visualmente irresistible
5 (100%) 5 votos

Hoy me he traído al blog a otro crack, Oscar Fernández. Es el autor del blog Creativolandia.
Desde el primer día que me pase por su blog me encanto su diseño, un tío con personalidad.
Hace una semana le envié un email ofreciéndole escribir en el blog, y como no podía ser de otra manera le pedí que escribiese algo sobre diseño gráfico aplicado en los blogs o web.
Al momento Oscar me contesto encantado, que además era un lector de mi blog desde hacia un tiempo (¡y yo sin saberlo! es un crack, vaya 😛 ) y que le encantaba la idea del tema ya que el está muy puesto en esto.

Así que no te entretengo más y te dejo con Oscar para que te explique como puedes mejorar el aspecto de tu web fácilmente.


 

Convertir tu blog en algo verdaderamente irresistible, es una tarea que puedes conseguir aplicando estos 7 principios básicos para mejorar el diseño de tu web, una serie de pautas de diseño gráfico con los que vas a conseguir unos resultados increíbles y que hará finalmente que todo el mundo quiera tener un blog / web que mole tanto como va a molar el tuyo. El diseño gráfico no es ciencia para cohetes, tampoco es todo estética, más bien se trata de conseguir que determinados elementos en la comunicación visual cumplan su función, por muy precioso que sea un diseño si no cumple su función… apaga y vámonos, así que ya sabes  aplicando estos principios vas a convertir tu blog en algo visualmente irresistible. Estos principios que veremos a continuación, vamos a verlos aplicados sobre páginas de inicio, creo que de esta forma serán más fáciles de entender, pero son aplicables a todas y cada una de las secciones de tu web.

 

Empezamos con los principios básicos para mejorar el diseño de tu web

Vamos a hablar de 7 principios pero acabareis entendiendo que muchos de ellos acaban en…

Establecer un Punto focal:

El punto focal es aquel que reclama todas las miradas y jerarquiza la información de forma única en la comunicación visual. Imagínate que vas a una boda de un familiar, todo el mundo va de traje y corbata como marca el protocolo, de punta en blanco vamos, de repente en el momento del “Sí, quiero” por la parte izquierda del altar aparece el primo Antonio, con unas bermudas amarillas, una camisa hawaiana y unas rastas que le llegan allí donde la espalda pierde el nombre, para colmo se agacha y se le ve la hucha.  ¿Donde estaría el punto focal en el momento más importante de la boda? El tiempo de atención que te van a prestar los usuarios es reducido, así que establecer un lugar donde centrar todas las miradas es fundamental (la hucha del primo Antonio), has de buscar cual es el objetivo de conversión de tu página, en el caso de una página de inicio el objetivo bien puede ser que los usuarios entiendan que es lo que ofreces de un primer vistazo, o quizá algún tipo de conversión como puede ser un alta en una newsletter. Se consigue con tres elementos básicos:

  • Parte gráfica (fotos, gráficos) hablaremos mas adelante de esto con más detenimiento
  • Titulares y tipografías, un titular con un gran tamaño, exagerado con respecto a los demás textos que expresen el objetivo principal.
  • La redacción, es la explicación o el desenlace de este rápido storytelling que nos hemos montado.

javier barros

Fíjate en el ejemplo superior que te traigo, de la web de Javier Garcia Barros, en primer lugar un titular que aclara toda duda acerca de lo que hace. En occidente leemos de izquierda a derecha por lo que lo siguiente que ves es una foto de Javier con una actitud súper amigable, sentado en un mueble del que él mismo abre una puerta (muy sugerente), con un cartel en su interior en el que podemos leer “Encuentra a tu cliente”, ya te ha mostrado con una foto que él te ayuda a encontrarlo. Por último cuando tus ojos vuelve a escanear la siguiente línea se encuentran un formulario de alta a la newsletter, Magistral.

La regla de los tercios

Esta regla es muy simple y súper efectiva es casi matemática, sí, también usamos las matemáticas en el diseño. Consiste en dividir la pantalla en 9 sectores, en este caso hablamos de la visual que hay por encima de la línea de scroll  y poner los puntos focales en una o varias de las intersecciones que producen las líneas cuando se cruzan. Es muy efectiva para colocar los puntos focales en la pantalla, una vez sabes aquello sobre lo que quieres traer la atención. No has de ser de lo más perfeccionista, los puntos focales no han de caer milimétricamente en las intersecciones, aunque estén algo desplazados van a funcionar igual, sí es un alivio teniendo en cuenta que las webs actuales han de ser responsivas y adaptarse a todos los dispositivos De nuevo en la foto de la web de Javier observa que cada intersección, está alineada casi perfectamente con cada una de las partes que explicamos en el punto anterior. Podréis comprobar que he marcado los 9 sectores con sus intersecciones en todos los ejemplos. Para quienes no sepáis cual es la línea de scroll es la parte visible antes de que el usuario empiece a desplazarse por tu página haciendo uso de la rueda del ratón.

SUSCRIBETE YA A MI BLOG Y RECIBE EN TU CORREO 2 EBOOKS GRATUITOS

¡ÚNETE YA A MI PEQUEÑA TRIBU!

Te mandaré al instante los 2 Ebooks que he preparado para ti :)

Espacio para respirar o espacio en blanco (white space / negative space).

Todos necesitamos espacio para respirar, incluso nuestras webs, dejar espacio para que los elementos respiren añade pausa y ritmo a la comunicación visual. No, no te preocupes esto no es desaprovechar el espacio, al contrario esto ayuda a:

  • Aumenta la legibilidad de tus contenidos,
  • Mejora la interacción de tus lectores.
  • Establecer puntos de foco en tus llamadas a la acción.
  • No satura la visual, por lo que se resaltan los puntos focales.

laura ribas

Te pongo como ejemplo la web de Laura Ribas fíjate la cantidad de aire que hay alrededor de su foto todo ese espacio vacío, que da paso a lo importante , que hago, y suscríbete que te enseño,  sugerente ¿verdad?

Contraste

Esta es una técnica mediante la que se pretende resaltar o hacer que algunos elementos predominen sobre otros, esto se consigue, enfatizando y haciendo visibles unos elementos sobre otros ¿Cómo se puede crear un contraste?

  • Aumentando el tamaño
  • Usando colores que destaquen del resto
  • Con una tipografía ya sea: usando una diferente, marcándola, girándola, etc.
  • Añadir una forma donde no debería haberla, va a crear obligatoriamente un contraste

Una de las formas que todos usamos para crear contraste a nivel muy básico es un subrayado, cuando subrayas un texto creas contraste y haces que un elemento sobresalga sobre otro. Quiero que te fijes en el ejemplo que hay más abajo en la foto de la web de lifestylealcuadrado, fíjate como hay dos fotos en el fondo, en escala de grises (blanco y negro), incluso se funden un poco con el fondo, forman parte de la historia ¿verdad?, ahora observa como resalta el titular en un naranja (un color bastante llamativo) junto con el botón que dice “Accede ahora gratis”  y al otro lado la foto, Frank Scipion con sus niñas, están claramente creando contraste gracias a los colores llamativos que usan en comparación con el fondo. Más arriba en la barra de navegación puedes ver otros dos botones que crean contraste , el que dice “Club privado”  y el que dice “Login”  gracias a los iconos en un color naranja, que resalta claramente del resto, usan formas y color para crear contraste.

El poder de las imágenes

Recuerdas eso de una imagen vale más de mil palabras, pues a pesar de que suene a Cliché, siento decirte que está más que demostrado que los seres humanos pensamos en imágenes, te lo demuestro, te acuerdas del ejemplo de la boda que explique antes y del primo Antonio, a que en tu mente se conformo perfectamente la escena. Bien para crear esa escena necesitaste casi 100 palabras, que pasaría si en vez de usar un párrafo, ayudase a tu subconsciente con una o varias imágenes, para introducirte una idea en un simple barrido de tus ojos.

frank scipion

Fíjate en el ejemplo que te ofrezco de lifestyle al cuadrado, de un simple vistazo puedes hacerte a la idea de que habla Frank, en la izquierda hay un tío en mitad de una montaña con los brazos abiertos dando una sensación de libertad de la hostia, en la parte derecha se ve un teclado de ordenador y unas manos usándolo, en la parte central y a todo color los puntos focales, el texto explicativo con su titular, y una llamada a la acción, al otro lado Frank con sus hijas pasándoselo que te cagas, riendo como enanos. De un simple vistazo te ha relacionado la libertad, escribir en un blog, la felicidad y con la redaccion te ha explicado que si quieres conseguirlo, el te forma y te regala recursos para que empieces, créeme tu subconsciente lo ha asimilado mucho más rápido de lo que yo he tardado en explicartelo y no te has dado ni cuenta.

Humaniza tu blog

Este es uno de esos puntos junto con el anterior en los que yo me repito mucho, es algo que no paro de decirle a mis clientes, a las personas nos gusta ver personas, sentimos empatía cuando vemos otros seres humanos. Pon personas en tu web haciendo eso que vendes, si es una web personal tienes que poner una foto tuya en la home, como he dicho a las personas nos gusta ver personas, nos gusta saber con quien tratamos, pero eso sí por favor pon una foto actual, no pongas una foto de cuando tenías 18 años, no, queremos saber como eres ahora. Personalmente (supongo que a ti te pasa lo mismo) me decepciona encontrarme una foto de un tio joven en la web y después ver un vídeo de un tío con 40 tacos desaliñado que en la foto parecía joven e incluso tenía pelo, craso error, muéstrate como verdaderamente eres, se trata de generar confianza, no la cagues nada más empezar. Puedes revisar todos los ejemplos anteriores y ver que tanto Javier como Laura se muestran tal cual son, incluso Frank te muestra un aspecto todavía más personal, se muestra disfrutando con sus hijas.

Crear bloques visuales

Esto es tremendamente importante, hacer que una serie de elementos funcionen todos como si fueran uno, vamos a entender esto mediante los ejemplos anteriores : En el primer ejemplo Javier Garcia barros usa esta técnica uniendo todos los elementos de su cabecera con una textura de cemento en el fondo, a pesar de que hay una serie de elementos diferentes que aportan una información distinta, se perciben como una unidad, todos son parte de significado o el propósito final de Javier García barros: Yo soy este, hago esto, y te puedo ayudar a que lo hagas mejor En el segundo ejemplo Laura Ribas juega de una forma parecida, usa e fondo de la foto como nexo de unión, en la foto o bien el fotógrafo dejo mucho aire en la parte izquierda de la misma, o ha sido una composición creada por el diseñad@r pero hace que claramente todos los elementos se mantengan unidos, en el caso de Laura este fondo aúna incluso la barra superior de navegación. Vamos con Frank de lifestylealcuadrado si te fijas en el ejemplo de su web, el bloque visual esta creado con la composición hecha a partir las fotos de fondo en blanco y negro que aúnan todo el mensaje e incluso incluye uno de los botones del menú como parte del mismo bloque, para que entiendas que es a lo que se está refiriendo, casi te está pidiendo una llamada a la acción de forma indirecta.

Las conclusiones :

Bueno como has ido viendo con los ejemplos que te dado, he intentado que entendieras a través de ejemplos los principios básicos para mejorar el diseño de tu web. Como ves todos estos ejemplos cumplen o aplican los principios básicos para mejorar el diseño de tu web, no es obligatorio aplicarlos todos, pero si encuentras la forma te aconsejo que lo hagas, vas a notar un punto de inflexión. Me interesan mucho las conclusiones que hayas sacado por tu cuenta , cuéntamelas en los comentarios, estaré encantado de conocerlas y si tienes dudas ya sabes pregunta… Un fuerte Abrazo a todos!!!

Oscar Fernández Herrero
Una mente inquieta que un día decidió enfocarse en el diseño gráfico y el desarrollo web, trabajo con emprendedores y agencias de comunicación ayudándoles a crear y mejorar sus blogs / webs en lo que a comunicación visual se refiere, si quieres saber más sobre mí, soy el creador de la web creativolandia.com allí te espero.
Recommended Posts
Showing 7 comments
  • Javier
    Responder

    Aupa….

    ¡Muchisisisimas gracias por citarme en el post!

    🙂

    Javi

  • Oscar
    Responder

    Ha sido un placer Javier,
    Tu web cumple prácticamente todos los principios de diseño que menciono .

    Un abrazote!!!

  • Luis A. Román
    Responder

    Muy buen artículo!!! Enhorabuena!

    • Oscar
      Responder

      Muy buenas Luis,
      Me alegro que te guste, lo escribí con mucho cariño y dedicación.

      ¡¡¡Un Fuerte abrazo Luis!!!

  • Javi Felices
    Responder

    Muy buenos ejemplos, gracias Oscar, ahora toca ponernos las pilas y seguir aprendiendo

    Un saludo y gracias.

    • Oscar
      Responder

      Muchas Gracias Javi,

      Nuestra vida es un continuo aprendizaje, especialmente para aquellos a los que nos gustan estos temas, y yo me apunto el primero.

      ¡¡¡ Un abrazote Javi !!!

pingbacks / trackbacks

Leave a Comment

Contacta conmigo

Envíame un email con lo que necesitas y te enviaré un presupuesto ajustado a lo que buscas en menos de 48 horas.

Not readable? Change text.

Start typing and press Enter to search