Elementos claves en el diseño web.

4 elementos clave del diseño de tu blog que marcan la línea entre éxito y fracaso

Tenemos que asumirlo: en el mundo que vivimos hoy en día, independientemente de que nos guste más o menos, causar una buena impresión a nivel de imagen es fundamental.

Estoy seguro que si, por ejemplo, estás buscando trabajo, nunca se te ocurriría ir a una entrevista en chándal, ¿verdad?

Que conste que no tengo nada en contra del chándal. Soy el primero al que le encanta estar con ropa cómoda antes que embutido en ropa muy elegante.

Sin embargo, como te decía, la imagen cuenta.

En el diseño de tu blog también es así y existen una serie de elementos fundamentales que pueden marcar la diferencia entre que tu plataforma digital tenga éxito o sea un absoluto fracaso.

Hoy precisamente quiero hablarte de estos elementos que yo considero claves en el diseño web y darte algunos consejos que te ayudarán a hacer una elección correcta de los mismos.

Descubre los 4 elementos clave de un diseño web de éxito - Ahora vas y lo twitteas          

 

Colores

El primero de los elementos importantes que pueden hacerte triunfar o caer al fango es el de la elección e implementación de los colores de tu blog.

En este punto hay que tener mucho cuidado, pues mucha gente piensa que “para dejarlo bonito” o “para que no se vea todo muy soso” (sí, ambas frases las he oído en más de una ocasión) hay que utilizar un montón de colores o tonalidades diferentes.

Este es un error muy común y en el que no debes caer, ya que utilizar demasiados colores puede provocar justamente dos cosas que no queremos:

1. Que el usuario quede cegado por el arco iris que has montado y se vaya rápidamente por donde ha venido.

2. Que, en el caso poco probable que no se vaya, al haber tantos colores, no le dejes demasiado claro qué acción quieres que lleve a cabo en esa página y, por tanto, acabe por no hacerla (y tú, por no cumplir el objetivo que te habías marcado con tu blog).

Mi consejo en este sentido es que selecciones una paleta con no más de 3 colores y que la respetes.

Normalmente, lo suyo es que esta paleta esté relacionada con dos cosas:

1. Con tu imagen corporativa (si ya la tienes): tu logotipo, colores corporativos etc.

2. Si no tienes dicha imagen corporativa, lo suyo es que generes tu paleta de colores en función de lo que quieres transmitir o hacia qué público te estás dirigiendo (si no al 100%, al menos que lo tengas en cuenta a la hora de seleccionar un color u otro).

Si no entiendes del todo bien esto último, te recomiendo pasarte por este artículo que escribí hace algún tiempo en el que te explico la psicología del color. 😉

Del mismo modo, si no tienes conocimientos de diseño o no quieres complicarte la vida y quieres utilizar paletas de colores que quedan bien, te recomiendo que te pases por la herramienta de Adobe Kuler.

Elige los colores de tu blog como si fueras un “pro” con esta herramienta - Ahora vas y lo twitteas          

Sin duda alguna, es la mejor que yo conozco para llevar a cabo esta tarea. Puedes seleccionar paletas de colores en función de una regla cromática concreta a partir de un color base que tú establezcas o seleccionando cualquier paleta ya generada por diseñadores y usuarios que utilizan la aplicación.

Te marco ambas opciones en la imagen para que lo veas más claro. 😉

Elementos claves en el diseño web. Los colores.

 

Tipografía

El segundo de los elementos clave en un buen (o un mal) diseño web sin duda alguna es la elección de la tipografía.

Debes tratar siempre que las tipografías que selecciones para tu proyecto sean leídas sin problema alguno a la hora de implementarlas en tu blog.

De nada te sirve que una tipografía sea muy chula, original y nunca vista si luego no va a haber Dios que lea lo que quieres transmitir, ¿no crees? 😉

Mi recomendación en este aspecto, aparte de lo dicho anteriormente, es muy similar a la de los colores.

Personalmente, yo no soy partidario de usar más de dos tipos de tipografía diferente en un mismo diseño web. Mi modesta opinión es que seleccionando una tipografía para los títulos y otra para los textos, es más que suficiente.

Por supuesto, es importante también que estas dos tipografías concuerden entre sí.

Por si eres de los inseguros que no sabe si una tipografía queda bien con otra, te dejo una amplia lista generada por el amigo Javier Gobea con el top 25 de combinaciones de Google Fonts para tu blog.

¿Cómo dices? ¿Que por qué utilizar Google Fonts?

Bueno, la respuesta es muy simple y está basada en dos poderosas razones:

1. Tiene montones de tipografías que son 100% gratuitas y se pueden utilizar en cualquier proyecto sin problemas de derechos.

2. Las tipografías de Google Fonts ya son prácticamente un estándar más en el diseño de sitios web, por lo que utilizándolas no tendrás problemas de visualización en ninguno de los navegadores más utilizados de la actualidad.

Bueno, ya no tienes excusas para hacer una mala elección en cuanto a las tipografías. Pasemos al siguiente elemento clave…

 

Imágenes

Ya lo he mencionado al principio de este artículo: la imagen (a nivel general) es algo bastante importante en el mundo actual por suerte o por desgracia.

Estamos hartos de escuchar por todos lados que la imagen vende. Y, en el diseño web, esto no es una excepción.

Los elementos gráficos y multimedia que vayas a utilizar en el diseño de tu blog profesional tiene que respetar esta buena apariencia a nivel visual.

Que no se te pase por la cabeza en ningún momento poner fotografías tuyas o de tu negocio hechas con el móvil de cualquier manera, borrosas, mal encuadradas o estando de fiesta en tu último fin de semana porque sales bien.

No caigas en este error tan común al publicar imágenes en tu blog - Ahora vas y lo twitteas          

Sí, también me he visto en esta situación con clientes en alguna que otra ocasión.

Recuerda la frase que he puesto un par de párrafos más arriba: la imagen vende. Te estás “vendiendo” a tí mismo. Por tanto, no puedes venderte de cualquier manera o a lo cutre.

En un mundo ideal, lo perfecto sería contratar un fotógrafo profesional que llevara a cabo esta tarea de realizar las fotografías que fuesen necesarias para tu proyecto. Esta opción, siempre que tu presupuesto te lo permita, debería ser la número uno.

Sin embargo, soy consciente que no siempre se puede invertir en un servicio de este tipo o no tendrás presupuesto para todo, por lo que la opción B es acudir a bancos de imágenes (ya sean gratuitos o de pago).

El “problema” de acudir a estos bancos de imágenes es que, naturalmente, estas fotografías, ilustraciones o elementos vectoriales están a disposición de todo el mundo y, por regla general, lo natural es que te las encuentres en muchos otros sitios web, con lo que en este sentido no estarás marcando la diferencia.

Del mismo modo, debes cuidar que el tamaño y peso de las imágenes que publiques sea el correcto.

Esto es, no utilices imágenes pequeñas si las vas a implementar en tu blog a un tamaño mayor del que tienen, porque se te pixelarán y no se verán de manera nítida. Del mismo modo, tampoco utilices imágenes demasiado grandes si las vas a utilizar únicamente en tamaños reducidos, puesto que estarás empeorando el tiempo de carga de tu web innecesariamente.

Para llevar a cabo esta tarea de optimización, puedes utilizar cualquiera de estas 17 herramientas para reducir tanto las dimensiones como el peso de tus imágenes.

 

Espacios en blanco

Puede que este elemento te sorprenda o te parezca poco importante, pero te aseguro que no debe caer en saco roto.

Por algún extraño motivo, la mayoría de las personas tendemos a no querer dejar ningún espacio vacío o en blanco en el diseño web. Se puede decir que es el elemento olvidado.

Aquí está el elemento olvidado pero imprescindible en un diseño web de éxito - Ahora vas y lo twitteas          

Mucha gente no es consciente que estos espacios son un elemento más en la composición del diseño como lo son cualquiera de los tres que hemos visto en los puntos anteriores.

Sin embargo, estos espacios en blanco son imprescindibles para marcar la diferencia entre un diseño bien hecho y uno garrafal, ya que ellos son precisamente los que permiten al diseño “respirar” y darle una apariencia más atractiva para que todo el contenido no esté tan apretado.

Es posible que esto no termine de convencerte, por lo que quiero darte un par de motivos de peso adicionales por los que deberías tener en cuenta utilizar estos espacios en blanco:

1. Facilitas la lectura, ya que grandes bloques en el diseño sin espacios ahuyenta a los usuarios de leer tus contenidos y, por tanto, impide que puedas transmitirle tu mensaje.

2. Ayudas a captar la atención sobre elementos importantes del diseño, como pueden ser formularios de suscripción o botones de venta, ya que gracias a los espacios vacíos evitas distracciones, destacas dichos elementos e incitas al usuario a realizar la acción que tú deseas que haga en una página concreta de tu sitio web.

Así que ya sabes… no te obsesiones con llenar cada hueco con contenido. Utiliza los espacios en blanco inteligentemente y verás que la calidad de tu diseño web mejora de manera considerable.

Si todavía tienes dudas sobre si utilizar espacios en blanco es un desperdicio en tu diseño o no, te voy a dejar el ejemplo de una web famosísima, número uno en su sector y con un éxito arrollador que utiliza el espacio en blanco en su diseño como uno de sus elementos principales.

¿Te suena de algo Google? 😉 😀

Elementos claves en el diseño web: espacios en blanco.

Conclusión

Hoy puedo decirte sin riesgo a equivocarme que te he hablado de los 4 pilares básicos en el diseño de tu blog que pueden marcar la diferencia entre tener un sitio visualmente atractivo a través del cual puedas lograr lo que te propongas o uno que te haga caer al abismo del más absoluto de los fracasos.

Espero que, si no decides acudir a un servicio de diseño web profesional, los tengas muy en cuenta a partir de ahora cuando vayas a crear tu blog o tu sitio web.

Sin embargo, aparte de esto, recuerda siempre también que hay un quinto elemento (como en la película de Bruce Willis) que, aunque no está directamente relacionado con el diseño, debe estar en concordancia con estos cuatro y es vital para alcanzar el éxito con tu blog.

Tus contenidos y la propuesta de valor que aportas a quien te lee. 😉

Ahora es tu turno: escríbeme lo que quieras sobre este tema en los comentarios, ya sea para resolver alguna duda que consideres que se haya quedado en el tintero, para realizar tu aporte personal o para debatir de manera constructiva sobre un punto de vista diferente al mío.

José Antonio Carreño
Diseñador web freelance especializado en el CMS Wordpress. Ayudo a bloggers, negocios unipersonales y emprendedores digitales a crear un blog profesional atractivo cuyo diseño esté orientado a conseguir conversiones. También te echo una mano a través de mi blog escribiendo artículos, consejos, reviews o tutoriales en los que te hablo sobre temas referentes a Wordpress, diseño web y blogging
José Antonio Carreño
RT @RaulSCC: GeneratePress: tutorial a fondo del tema Wordpress más flexible https://t.co/VpQPLhs1gs @joseantcarreno #WordPress https://t.… - 1 hora ago
José Antonio Carreño
José Antonio Carreño

6 comentarios en “4 elementos clave del diseño de tu blog que marcan la línea entre éxito y fracaso

  1. Hola Jose Antonio 😀

    Un artículo muy útil y con mucha razón. ¡Gracias por compartirlo! Una de las cosas con las que tuve que lidiar fue con el tipo de letra para mi web. A mí me encantan las letras con personalidad y que visiblemente sea muy bonitas, pero siendo sincera, poco legibles. Así que aunque me costó en un principio, utilicé un tipo de letra claro y legible y los resultados mejoraron notablemente. Gracias por seguir aportando valor.¡Feliz día!

    ¡Un abrazo!

    • Hola María José!

      Efectivamente, hay tipografías muy chulas por ahí. Pero que sean bonitas no siempre quieren decir que sean las mejores para ser leídas en un blog. Gracias por compartir tu propia experiencia, ya que con ello confirmas con un “hecho real” que elegir una buena tipografía es una de las claves que pueden hacer que tu diseño te ayude a alcanzar el éxito o el fracaso.

      Muchas gracias por leer y comentar! Un abrazo!

  2. ¡Hola Jose Antonio!

    Me queda aún por seguir aprendiendo de este mundillo online. He pensado varias veces en cambiar el tipo de letra y, entre unas cosas y otras se me acaba olvidando. ¡Muchas gracias por el post! Estoy segurda de que tu blog me va a venir genial.

    Un abrazo.

    • Hola Marta!

      Pues si he podido aportar aunque sea sólo un granito de arena a que el diseño de tu blog mejore. doy por buena la publicación de este post. Aquí tendrás muchos artículos más que seguro te pueden ayudar mucho. ¡Dales caña, que para eso están!

      Un abrazo.

Deja un comentario

Share This