Volver al anterior capítulo
Volver al principio
Ir al siguiente capítulo
25%

El diseño web aplicado al blogging es un tema que hay que tratar con mucho tiempo, mimo y dedicación. Antes de empezar, quiero confesarte que no soy ningún gurú del diseño de blogs. Eso sí, en lo que soy muy bueno es observando, aprendiendo y aplicando, a mi manera, lo que funciona para otras personas y blogs. Después de haber leído cientos de posts, libros y creado cientos de blogs (propios y para clientes), he llegado a consumir tal cantidad de información que, de alguna manera, me ayuda a crear blogs bonitos, ordenados y altamente optimizados.

guia diseño web grafico blog

Antes de seguir quiero ponerte en contexto y explicarte la razón por la qué he creado está guía sobre el diseño de blogs. Hace un tiempo añadí una pregunta en un correo electrónico que envíé a mis suscriptores. La pregunta era «¿Hay una sola cosa que te esté dando la lata con tu blog?». Hacer este tipo de preguntas me ayuda a conectar con mis lectores en un nivel mucho más personal y entender cualquier problemática que pueda tener (si conozco tus problemas, puedo ayudarte mejor).

Mi misión entonces se centra en crear contenidos de calidad para ayudar a ese lector/suscriptor. Los consejos de diseño de blogs que te voy a mostrar en este guía son el resultado directo de varias respuestas que recibí de esa envío. Una específica fue «Quiero que mi blog destaque de los demás, pero no sé por dónde empezar cuando se trata de diseño web ¿Cuáles son los elementos comunes del diseño efectivo de un blog?».

Gran pregunta ¿No te parece? Aunque intuitivamente me encanta el diseño de mi blog, nunca lo había dividido para ver sus componentes básicos para ver lo que importa y lo que no, y ver cómo podría ayudar a otros a implementar eso mismo. Así que empecé mi andadura en diseño de bitácoras, cuyo objetivo era ver lo que creía que sabía sobre el diseño de blogs y lo que realmente sabía.

Resulta que había un montón de cosas que he estado haciendo mal. Además de algunas cosas que estaba haciendo bien que ¡ni siquiera sabía! (esto ha dado lugar a una lista de tareas pendientes que he establecido, que compartiré al final de esta guía). He recopilado todo este conocimiento en varios principios para un diseño de blogs efectivo. Ahora en lugar de pasar días y días investigando lo que funciona, esta guía abreviará tu viaje poniendo todo en un mismo lugar.

Piénsalo, ¿Qué sucede cuando haces click en un enlace de un contenido que te ha interesado y acabas en un blog con diseño feo y sin cuidar? Lo más probable es que llegues incluso hasta sospechar de la veracidad y calidad del contenido de ese página web, blog o tienda online ¿Verdad?. Después de cientos de estudios, se ha demostrado que el diseño web y gráfico y la usabilidad de un blog afectan a la manera en cómo los nuevos visitantes te ven a ti o tu marca.

Para muchos usuarios, el diseño web y gráfico son factores críticos para dar credibilidad a una pagina web, blog o tienda online. De hecho, el diseño de tu blog es crucial para dar una buena primera impresión a tus lectores e impactar en cómo ellos te perciben como fuente de información. Te guste o no, antes de empezar a leer cualquiera de tus contenidos, ya te estarán juzgarán por tu diseño. Esto, sumado a que cada día hay más bitácoras, hace que el diferenciarse sea clave a la hora de potenciar la marca personal.

Por otro lado, si quieres promocionar tu blog poniéndote en contacto con otros blogs y bloggers ¡Suerte! Con un diseño del blog descuidado es muy probable que pierdas muchas oportunidades de colaboración o de obtener una respuesta. Otros bloggers te verán como lo que eres, un total novato ¿Cómo van a confiar en ti? En este sentido, por estos y otros muchos motivos, muchos bloggers principiantes y propietarios de sitios web posponen o no prestan atención al diseño de sus blogs diciendo que es caro o que no tienen tiempo para dedicarle.

¡Nada más lejos de la realidad! El diseño web y el diseño gráfico de tu blog, aunque no es fácil (para que engañarte), no es caro. Lo que tienes que pensar primero es sí quieres hacerlo tú mismo o quieres externalizarlo. Existen herramientas y plataformas que te pueden ayudar a encontrar profesionales muy cualificados, a los que tendrás que pagar muy poco para obtener unos resultados muy positivos.

De todas maneras, si eres de los que les gusta el «DIY» (Do It Yourself o Hazlo Tú Mismo), también te voy a enseñar a ahorrar tiempo y dinero haciendo las cosas tú mismo (aunque siempre te daré, al menos, una opción de pago). También voy a compartir las herramientas y recursos que yo utilizo y que me ayudan todos los días en mis proyectos y en el de mis clientes. ¿Quieres que tu blog destaque del resto pero no sabes por dónde empezar cuando se trata de diseño? Te voy a enseñar cuáles son los elementos comunes en diseño efectivo de un blog.

Nota: Esta guía viene incluida con una exención de responsabilidad. Mi blog gira en torno al diseño visual y funcional. Ambos son elementos esenciales para el diseño de tu blog y cómo un usuario lo experimenta.

Entendiendo el manual de identidad corporativa

Una guía de identidad corporativa o guía de estilo une el corazón, alma, misión, visión y valores de la marca, y lo traduce en diseño. También le dice a todo el mundo cómo deben comunicar tu marca (con todo tipo de detalles). Es, al fin y al cabo, un documento que codifica cómo se presenta tu organización (es decir, tu página web, blog o tienda online) al mundo. Dicho de otra manera, es la herramienta de referencia que ayuda a mantener coherencia explicando cómo se ve, se siente y suena tu marca.

Llega a tener tanta importancia (sobre todo en empresas muy grandes), que algunas personas lo llegan a llamar la «Biblia de la marca«. De todas maneras, no dejes que eso te confunda o intimide, tan sólo son nombres diferentes para el mismo documento. Disponer de un manual de imagen te asegura que tu marca se vea y se sienta igual en todas partes, incluso cuando tienes con personas ajenas a tu actividad. Es perfecto para tener todo «atado» en lo que a diseño web y gráfico se refiere.

Nota: Aunque no es necesario hacer una manual de imagen para una página web, blog o tienda online, si que es muy importante saber qué es, por qué es tan importante y los elementos que lo conforman (simple cultura).

Componentes clave de la identidad visual de tu marca

Un manual de identidad corporativaguía de estilo es importante porque ayuda a que tu empresa se comunique de manera consistente en todos los equipos y canales. Hay, de hecho, cinco componentes clave: misión, visión, público objetivo, personalidad y valores fundamentales de la marca. Juntas, estas son los pilares más importantes a la hora de establecer tu identidad de marca, porque le dicen al mundo lo que representas. Las demás partes de tu guía de estilo de marca son elementos tangibles que comunican los componentes clave al mundo a través del diseño web.

  • Misión: La misión define principalmente cuál es tú labor o actividad en el mercado, pudiéndola completar haciendo referencia al público hacia el que va dirigido y con la singularidad, particularidad o factor diferencial, mediante la cual desarrolla su labor o actividad. Para definir la misión de tu negocio, te ayudará responder a las siguientes preguntas: ¿Qué haces?, ¿cuál es tu negocio?, ¿a qué te dedicas?, ¿cuál es tu razón de ser?, ¿quiénes son tu público objetivo?, ¿cuál es tu ámbito geográfico de acción?, ¿cuál es tu ventaja competitiva? y ¿qué te diferencia de nuestros competidores?

  • Visión: La visión define las metas que pretendes conseguir en el futuro. Estas metas tienen que ser realistas y alcanzables, puesto que la propuesta de visión tiene un carácter inspirador y motivador. Para la definición de  la visión de tu negocio, te ayudará responder a las siguientes preguntas: ¿Qué quieres lograr?, ¿dónde quieres estar en el futuro?, ¿para quién lo haré?, ¿ampliaré mi zona de actuación?

  • Público objetivo: Describe quiénes son tus clientes, por qué te necesitan y cómo tus productos o servicios resuelven sus problemas. Si has hecho un estudio de mercado, inclúyela para que tu equipo sepa comunicarse de una manera eficaz con tus clientes.

  • Personalidad: Haz una lista de 3-5 adjetivos que describen tu marca (las agencia de publicidad utilizan además el «Is/Is Not«, y también enumeran 3-5 adjetivos en los que no veas reflejada a tu marca). De esta manera estableces el tono para el diseño y el copywriting. Para la definición de  la personalidad de tu negocio, te ayudará responder a las siguientes preguntas: ¿Eres sofisticado o peculiar? ¿clásico o moderno?

  • Valores: Los valores son principios éticos sobre los que se asienta la cultura de tu negocio y te permiten crear las pautas de comportamiento. No olvides que los valores son la personalidad de tu negocio y que no pueden convertirse en una expresión de deseos de los dirigentes, sino que tienen que plasmar la realidad. No es recomendable formular más de 6-7 valores, si no pierdes credibilidad. Para definir los valores de tu negocio, te ayudará responder a las siguientes preguntas: ¿Cómo eres?, ¿en qué crees?

Una vez que hayas dado rienda suelta a tu imaginacióninspiración, es hora de empezar a trabajar para empezar a unirlo todo y darle forma. En este paso, siempre te recomendaré que trabajes con con un diseñador web y gráfico con el que te puedes comunicar bien y que te haga sentir cómodo. La razón es sencilla: Tu cuando tienes que operarte, ¿Vas al médico especialista o intentas operarte a ti mismo en tu casa? Se que es un ejemplo algo agresivo, pero quiero que lo entiendas. Si no sabes, no lo hagas, porque vas a perder un tiempo que puedes aprovechar para otros menesteres.

El diseño de una imagen de marca es un proceso de descubrimiento continuo y el diseñador será un socio clave en dicho proceso. El, como profesional en su trabajo, puede tener ideas o sugerencias que tu no habías considerado. Además, el precio por contratar este tipo de servicio no es caro, y los resultados, créeme, serán espectaculares. Si, aún así, te resistes a molestar a tu bolsillo, sigue leyendo que te mostraré algunas herramientas gratuitas para hacer el trabajo tú mismo.

Hay seis elementos esenciales que deben desarrollarse para tener una guía de identidad completa para tu marca. Debes concentrar y priorizar tus esfuerzos y los del diseñador en la creación de estos elementos. De hecho, algunas partes puede que ya las tengas (el logotipo por ejemplo), pero estoy seguro de que después de leer esta guía querrás volver a la mesa de diseño de nuevo. Un buen diseñador gráfico te asesorará y ayudará a coger esos estados de ánimo, sentimientos e imágenes y convertirlos en elementos tangibles de la marca.

Elemento #1: Historia y valores de la marca

Introduce tu marca al mundo. Un simple resumen le dará a la gente una visión del corazón y el alma de tu empresa, lo que les ayudará a entender las misma. En esta parte puedes incluir los cinco componentes clave de la marca que he comentado más arriba: misión, visión, audiencia, personalidad y valores (también puedes elegir compartir sólo parte). Piensa muy bien qué incluir por su utilidad y como punto de referencia. Todas tus directrices debe ser fieles a estos componentes fundamentales.

Elemento #2: Logotipo

Llega el momento de crear el logotipo. Tu objetivo es que la gente se tome en serio tu proyecto, por lo que este necesita lucir bien y estar bien presentado y no tener un logo «pasable» no es una opción. Yo te recomiendo encarecidamente que contrates a un profesional (diseñador gráfico). Me se eso de «le pongo lo que sea para ir funcionando y ya me encargaré del logo«. ¡Pues no! Al final, y te lo digo por experiencia (a mi me ha pasado), se queda esa «plasta» (y va para largo).

Seguramente pienses que contratar a un profesional cueste mucho dinero, pero ¿y si te digo que a mi me han hecho logos profesionales por menos de $150? ¿No te lo crees? Pues eso es porque no conoces las herramientas correctas. Se trata de recursos online que harán las maravillas de tu negocio, ofreciendo profesionales freelance muy cualificados a precios muy competitivos. Eso sí, ya te aviso que vas a necesitar ciertas herramientas para emprendedores que ya te había mostrado (como Skype).

Nota: No me responsabilizo de lo que gastes a partir de ahora en estos servicios, ya que, son tan útiles y cómodos de usar, que, cuando veas la manera en la que pueden ayudar a tu negocio, no sabrás vivir sin ellos.

99designs

mejores herramientas marketing online diseño grafico 99designs
BRONCE (279€) / PLATA (459€) / ORO (739€) / PLATINO (1.199€)

99designs es, sin lugar a dudas, el mejor plataforma líder en servicios de diseño gráfico incluyendo logos, diseño web y otros concursos de diseño gráfico. Además, si no te gusta el resultado, te devuelven el dinero. Lo uso en todos mis proyectos y los de mis clientes.

Ir a 99designs

Fiverr

como hacer dinero por internet trabajo freelance desde casa fiverr
A PARTIR DE 5€

Fiverr es una plataforma digital de trabajos independientes y micro servicios (como escribir un post, una grabación de voz o un servicio de traducción) que te permite comprar o vender todo tipo de servicios o Gigs a partir de $5. Puedes encontrar casi de todo.

Ir a Fiverr

Freelancer

como hacer dinero por internet trabajo freelance desde casa freelancer
A PARTIR DE 8€

Freelancer es una plataforma online que te permite contratar programadores, diseñadores web y gráficos y muchos más a un precio muy competitivo, ya que eres tu el que decide el presupuesto y los profesionales son los que se unen al proyecto.

Ir a Freelancer
Herramientas para diseñar tu logotipo gratis

Elemento #3: Paleta de colores

¡Has llegado a los colores! Definir una paleta de colores hará a tu marca mucho más consistente, coherente y diferente. La mayoría de las marcas eligen 2 o menos colores principales y no se alejan demasiado de los tonos de color de su logotipo. Para ello, es una buena idea elegir un color claro para los fondos, un color más oscuro para el texto, un tono neutro y también uno que llame mucho la atención.

Tal y como hace YouTube (o yo mismo en mi página de branding) con el manual de marca, define diferentes colores e intégralos con tu marca. Por ejemplo, si tengo una empresa dedicada a los productos ecológicos, te viene fenomenal el verde (que es el color que todo el mundo espera ver en este tipo de productos), pero podría complementarlo con un amarillo o un azul. Asegúrate de incluir los colores de tu marca en la guía de estilo y la información necesaria para reproducir esos colores con precisión, donde quiera que vaya su mensaje de marca. Estos es lo que debes incluir:

  • Combinación de colores: La compañía PANTONE ha definido más de 1100 colores con un número único. Con este número único te aseguras de que tienes el mismo color en cualquier parte. Por eso los colores Pantone son perfectos para usar en logos de empresa o diseño corporativo. Además, son difíciles de imitar usando CMYK, ya que los Pantone se crear usando 15 pigmentos base incluyendo negro y blanco.

  • Color de impresión: En este caso se trata del CMYK, que son las siglas en inglés de Cian, Magenta, Amarillo, Negro (Cyan, Magenta, Yellow, Key (black)). Mezclando cian, magenta y amarillo, el color más oscuro que puedes obtener es un marrón oscuro (por eso se le añade el negro). Todos los colores en el espectro tiene estos colores como base.

  • Códigos digitales de los colores: Por un lado está la paleta de colores RGB (RVA en español) que consta, básicamente, de tres colores primarios aditivos: Rojo-Verde-Azul. Como añadido, ña codificación dodecadecimal del color (HEX) permite expresar fácilmente un color concreto de la escala RGB, utilizando la notación hexadecimal, como en el lenguaje HTML y en JavaScript (este sistema utiliza la combinación de tres códigos de dos dígitos para expresar las diferentes intensidades de los colores primarios RGB). Por último, aprovecha el sistema de colores HSL, en el cual se miden por tres parámetros (huesaturation y light) que determinan la posición del color en el cilindro de colores HSL. El primer parámetro es el ángulo horizontal, el segundo es la distancia horizontal del centro de la base y el tercero es la distancia vertical (altura) del centro de la base.

¡Un momento! No hace falta que te hagas un master en colores, pero si que entiendas qué es cada uno. De todas maneras, existen varias herramientas online muy útiles para ayudarle a elegir un esquema de color o convertir el color digital en otros valores. Llamadas comúnmente «conversor de colores» o «ruedas de color» te permiten trabajar de forma simultánea con los modelos de color hexadecimal, RGB, HSV y HSL. Simplemente tienes que rellenar el dato de uno de ellos y presionar «Intro». Estas son mis favoritas:

Adobe Color CC

mejores herramientas optimizar imagenes compressnow
Gratis

Mejora tu flujo de trabajo creativo con la ayuda de Adobe Color CC. Como parte de Creative Cloud, te ayuda a crear y guardar paletas de colores y trabajarlos de forma fácil y rápida con otros productos (ya sean de Adobe o no). La rueda de colores es intuitiva y tiene la capacidad de obtener los colores de las imágenes que subas al sistema.

Ir a Adobe Color CC

Pictaculous

mejores herramientas optimizar imagenes balesio
Gratis

¿Estás creando un sitio web o un folleto promocional basándote en una idea que has cogido de una imagen? Con Pictaculous, simplemente, sube la imagen y la aplicación te mostrará la paleta de colores que tiene la imagen y qué colores combinan con los mismos. Es perfecto para saber en pocos segundos qué colores está usando tu competencia.

Ir a Pictaculous

RGB.to

mejores herramientas optimizar imagenes gifsicle
Gratis

Si buscas un convertidor para pasar tus códigos RGB a otros formatos de imagen, la página RGB.to es tu herramienta. Es perfecto para tenerla bien guardada en marcadores, ya que te permite convertir códigos de color RBG a HEX y a muchos otros formatos. Por ejemplo, Pantone, RAL, HSL, HSV, HSB, JSON y muchos otros que harán tu vida más fácil.

Ir a RGB.to

Elemento #4: Tipografía

Otra gran parte del diseño de la identidad de tu marca es la selección de la tipografía, tipo de letra y fuente. Con el fin de que conozcas la diferencia entre cada uno, te diré que la tipografía es el arte y técnica de crear y componer tipos para comunicar un mensaje (también se ocupa del estudio y clasificación de las distintas fuentes tipográficas), el tipo es el modelo o diseño de una letra determinada y la fuente es el estilo o apariencia de un grupo completo de carácteres, números y signos, regidos por unas características comunes.

Las necesidades de tu marca determinarán si una única familia de fuentes satisface todas tus necesidades o si, por el contrario, prefieres definir diferentes tipo de letras y fuentes para tu marca. Un buen consejo que te puedo dar es que definas fuentes diferentes a la de tu logo, ya que el contraste te ayudará a destacar.(un diseñador gráfico experimentado te guiará mucho mejor a través de este proceso). No importa cómo de simple o complejo sea tu esquema de la tipografía que elijas, cerciónate de que se utiliza siempre de la forma correcta explicando en detalle cómo la quieres y dando instrucciones claras para el uso. Lo mejor es que incluyas esta información:

  • Introducción: Cuenta la historia que haya detrás de la elección de los tipos de letra que está utilizando, cómo se relaciona con tu marca y para qué se utiliza cada uno (titulares, texto del cuerpo, subtítulos, etc.).

  • Alineación: Puede parecer que «no tiene sentido», pero te recomiendo dejar claro si quieres que el copywriting se alinee a la derecha, al centro o a la izquierda.

  • Espaciado: Incluye ratios de track o tracking (sirve para alterar la densidad visual del texto o el espacio global entre un grupo seleccionado de caracteres) y kerning (el espacio existente entre dos caracteres individuales, para cuando dos de estos caracteres se encuentran demasiado juntos o separados) para mantener un estilo consistente cuando cambia el tamaño de fuente.

Es muy importante elegir bien las tipografías de tu marca. Existen, literalmente, miles de tipografías diferentes que puedes utilizar, por lo que el éxito reside en la capacidad de elegirlas y combinarlas con acierto. Desde mi experiencia en diseño web y gráfico, elegir una buena combinación de tipografías no es tarea sencilla, pues requiere de hacer diferentes pruebas hasta encontrar la mezcla perfecta. Eso sí, hay varios consejos que te recomiendo seguir a la hora de elegir tipografías para tu proyecto web:

  • No utilices más de 2 tipografías diferentes: A la hora de diseñar un sitio o un folleto publicatario se suele elegir 2 tipos de letras (una para los titulares, botones, subtítulos, es decir, las partes donde el texto es más llamativo y hay menos cantidad y otra para el cuerpo de texto de entradas y páginas). Como mucho utiliza una tercera tipografía para llamadas a la acción.

  • Piensa siempre en la legibilidad y experiencia de usuario: Elige fuentes que sean fáciles de leer y que ayuden a que la experiencia de usuario sea muy buena (si eliges una tipografía difícil de leer provocarás que el usuario no lo lea bien y no entiendo tu mensaje).

  • Recuerda que hay muchos tipos de pantallas: Elegir un tipo de letra que se vea perfecto en un ordenador está bien, pero tienes que recordar que también se tiene que ver muy bien en tablets y smartphones.

  • Elige tipografías que tengas personalidad propia: Las tipografías son otro elemento más en tu guía de estilo para tu marca y están directamente relacionadas con el tono que se quiere dar. Por ello, debes elegirlas correctamente y en función de los valores que quieras transmitir.

  • Pide opinión a tus círculo más cercano (amigos, familiares, clientes, etc): Puede que a ti te parezca muy bonita cómo queda las tipografías que has elegido, pero a otros usuarios les sea molesta. ¿Quién va a ser más sincero que las personas más cercanas? Sé valiente y pregunta.

Cuando emprendes el camino de elección de las tipografías de tu marca, en ocasiones puede ocurrir que ves una imagen o vídeo y te gusta el tipo de letra y que quieres utilizarla para tus propios diseños, pero no sabes cómo identificarla o encontrarla. ¡Tengo buenas noticias para ti! Existen herramientas online que te permiten identificar el tipo de letra que se ha utilizado en ciertos diseños. Son muy fáciles de usar y muchas veces bastará con subir una imagen, documento o escribir la url de la web donde esté presente esa tipografía que te gusta, por lo que echa un vistazo a todas las maneras de identificar el tipo de letra:

1001 Free Fonts

paginas descargar tipografias gratis pago fuentes web 1001freefonts
ENLACES MANUALES (DESDE 79€) / ENLACES NOTAS DE PRENSA (DESDE 79€) / ENLACES SEO LOCAL (DESDE 149€)

1001 fonts es una página web en la que podrás encontrar diferentes tipografías para tu proyecto web. Las opciones que encontrarás se limitan a uso no comercial, por lo tanto solo podrás adquirirlas para una finalidad personal. El sitio posee 60 categorías en tipos de letras, las cuales engloban un total de 17.000 tipografías disponibles entre las cuales un 60% son gratuitas. Con una diversidad de 252 colores podrás tener acceso a vista previa.

Ir a 1001 Free Fonts

Dafont

paginas descargar tipografias gratis pago fuentes web dafont
GRATIS

Datafont es una página web para descargar fuentes gratis bastante útil. Ofrece una cantidad de tipografías que supera la cifra de 33.000 estilos. El sitio web es muy simple, pero ofrece la variedad y cantidad suficiente para escoger la que mejor te convenga. Para encontrarlas observarás distintas categorías. Y antes de descargar la fuente tendrás la opción de observar cómo luce previamente introduciendo un texto de ejemplo.

Ir a Dafont

Google Fonts

paginas descargar tipografias gratis pago fuentes web google fonts
GRATIS

A través de Google Fonts hallarás diversos tipos de letras importantes y perfectas para utilizar en tu página web o blog. Su lista de tipografías ofrecidas es mayor a 800 estilos distintos para escoger. Brinda una descarga segura al usuario, lo que la hace una de las opciones preferidas por el público, además de que permite la vista previa gratuita. Para obtenerlas no es necesario realizar registros y será posible comparar letras.

Ir a Google Fonts

Bien, ya tienes claro qué tipos de letras quieres para tu proyecto, pero ahora hay que ver si su descarga es gratuita o de pago. La diferencia entre ambas es muy clara, siendo las de pago más creativas y «únicas», aunque siempre podrías elevar la apuesta a un diseño exclusivo de una fuente (no te lo recomiendo). En este paso existen decenas de páginas que aglutinan las gran mayoría de fuentes de Internet y que, en pocos pasos (a veces es simplemente hacer click en «descargar»), te permitirán descargar tipografías. Estas son mis favoritas:

What Font Is

paginas detectar tipografias fuentes web whatfontis
GRATIS

What Font Is es una plataforma online que, después de subir una imagen o adjuntar una URL donde esté presente el tipo de letra que te gusta, detecta el tipo de fuente que es. Es muy fácil de usar y te ayudará a dar con el nombre de la tipografía que te ha gustado, que después tendrás que comprarla (no siempre son gratis), descargarla e instalarla en tu ordenador.

Ir a What Font Is

WhatFont Tool

paginas detectar tipografias fuentes web whatFont tool
GRATIS

Google Chrome y Safari te dan la posibilidad de incluir extensiones para detectar los tipos de letra. En este caso, con la extensión de WhatFont Tool, podrás hacer click en cualquier título o texto y obtendrás el tipo de fuente, color, tamaño y peso que se ha utilizado (es muy recomendable tener esta extensión instalado si estás en un proceso creativo o buscando tipo de letras para tu proyecto web).

Ir a WhatFont Tool

WhatTheFont (MyFonts)

paginas detectar tipografias fuentes web whatthefont
GRATIS

WhatTheFont buscar en entre más de 133,000 estilos de fuentes. Incluso funciona con scripts conectados y cuando hay más de una fuente en una imagen. Simplemente tienes que cargar una imagen, hacer clic en la fuente que deseas identificar y luego revisar los resultados. Lo que hace es detectar el texto en la imagen automáticamente indicándote la fuente que deseas identificar.

Ir a WhatTheFont
Páginas para descargar tipografías gratis
Nota: Elegir bien las tipografías de tu sitio web es clave, ya que son la manera de mostrar el mensaje (aunque las imágenes y los vídeos ayuden), por lo que ten paciencia y dedica tiempo en elegir bien el tipo de letra.

Elemento #5: Imágenes y línea visual

Cuando se trata de tu marca o negocio, se suele tener un instinto natural para saber qué fotos e ilustraciones son más adecuadas (echa un vistazo a la guía de estilo de Nike). La sección de imágenes en tu guía de estilo guiará a cualquiera que la vea en la dirección correcta a la hora de crear o agregar imágenes para tu marca (para evitar estar teniendo que aprobarlo todo y que se tenga que repetir el trabajo). Puede abordar este punto de varias maneras diferentes:

  • Reúne prácticas recomendadas: Muestra ejemplos de imágenes que hayan funcionando bien con tu marca. Asegúrate de abordar las principales formas en las que tu empresa se comunica, ya sea un catálogo de impresión o una cuenta de Instagram.

  • Utiliza ejemplos de grandes marcas: Si no tienes todos los ejemplos que te gustaría, busca lo que realmente quieres en las grandes marcas y úsalas de ejemplo. Aunque no es bueno apuntar demasiado alto, si que valdrá para saber qué tipo de imágenes e ilustraciones prefieres.

  • Crea un muro de inspiración: ¿Quién no ha coleccionado alguna vez postales, recortes de revista, retales de tela sin ninguna razón únicamente porque estos elementos te gustaron mucho en aquel momento? Pues sin saberlo, gracias a tu intuición y a tu sensibilidad, creaste un moodboard o muro de inspiración. Recoge imágenes que transmitan la sensación que quieres que la gente obtenga cuando interactúan con tu marca y provoca una reacción en ellos.

Por otro lado ¿te hayas parado a pensar la enorme cantidad de tráfico que te pueden traer las imágenes desde los buscadores? ¡En serio! Alguien busca un producto, un lugar, una receta, o una infografía en Google y ahí deberían aparecer tus imágenes. No importa que el nuevo diseño del buscador reduzca la cantidad de visitas que puedes recibir, la oportunidad de ser visible y atraer tráfico siempre es interesante y jugosa.

Además, la búsqueda universal muestra imágenes en la página de resultados de forma combinada. Esto significa que no es necesario buscar una imagen para encontrarla, puedes aparecer en cualquier momento (sobretodo para ciertas búsquedas). Por todo ello, es importante que aprendas a optimizar tus imágenes para los buscadores (lo que también se conoce como SEO para imágenes). Estas son mis herramientas para optimizar imágenes favoritas:

CompressNow

mejores herramientas optimizar imagenes compressnow
Gratis

CompressNow es un servicio online gratuito que te permite subir imágenes desde su ordenador, elija un porcentaje de compresión y descargar la imagen optimizada. Es compatible con los formatos GIF, JPG y PNG. El servicio también permite al arrastrar y soltar múltiples imágenes desde tu ordenador, con una carga máxima de 10 imágenes y un tamaño de archivo individual máximo de 3MB.

Ir a Compressnow

JPEG Mini

mejores herramientas optimizar imagenes jpgmini
Gratis y $19.99 para la versión de pago

JPEGmini te ayuda a reducir el tamaño de tus fotos hasta 5 veces, manteniendo la calidad original. Está disponible para Mac OS X y Windows como una aplicación de escritorio. Sólo tienes que elegir o arrastrar carpetas a la aplicación para que pueda optimizar cada imagen de forma automática. Ofrece un paquete de servidor que te permite reducir los costes de almacenamiento y ancho de banda.

Ir a JPGMini

TinyPNG

mejores herramientas optimizar imagenes tinypng
Gratis

TinyPNG permite la compresión con pérdidas avanzadas de imágenes PNG. Conserva la transparencia alfa completa y reduce el tamaño del archivo al disminuir selectivamente el número de colores y de bytes en la imagen. El efecto es casi invisible, pero donde si se nota es en el tamaño del archivo. Coge los archivos PNG de 24 bits y los convierte en imágenes de 8 bits indexadas, eliminando todos los metadatos innecesarios.

Ir a TinyPNG
Herramientas para optimizar imágenes de tu web

Elemento #6: Tono y voz

El estilo de la escritura no siempre es fácil de imaginar cuando se piensa en la identidad de la marca, pero su voz afecta en gran medida a cómo tu audiencia interactúa y se siente con la misma cuando la utilizan (echa un vistazo a la guía de estilo de Skype). De hecho, el éxito de una marca va ligado, en el 90% de los casos, a conseguir una conexión emocional (una relación) con su público objetivo. Al igual que con las imágenes, puede abordar esto de varias maneras diferentes:

  • Prácticas recomendadas: Si tienes mensajes que funcionan bien para tu marca, muéstralos de forma clara en este apartado, para que no haya hueco a equívocos o malentendidos.

  • Explica la personalidad de tu marca: ¿Recuerdas la lista de 3-5 adjetivos que describen la personalidad de tu marca? ¡Perfecto! Pues úsalos para describir el tipo de lenguaje que tiene tu marca.

  • Explica qué se puede hacer y qué no: A veces, lo más simple es lo mejor. Escoge palabras que te gusten y palabras que no te gusten (y que no quieras que se identifiquen con tu marca) para demostrar claramente cuál es tu voz de marca.

Ejemplos y mejores prácticas en el diseño gráfico y web

Aunque no soy ningún gurú del diseño de blogs, sí que soy muy bueno es observando, aprendiendo y aplicando lo que les funciona a otras personas a mi manera (única). Esto es lo que quiero tratar en este apartado. He llegado a consumir tanta información online, que quiero regurgitarla en forma de una bonita y optimizada guía del diseño web y gráfico. De hecho, estoy seguro que buscas que tu blog destaque de los demás, pero no sabes por dónde empezar cuando se trata de diseño.

Aunque intuitivamente me encanta el diseño de mi blog, nunca lo había dividido en los componentes más importantes, haciendo hincapié en que realmente importa y cuánto y cómo podría eso ayudar a otros a implementar buenas prácticas. Así que emprendí una misión para salvar el vacío entre lo que pensaba que sabía sobre el diseño de blogs y lo que realmente sabía.

Resulta que había un montón de cosas que he estado haciendo mal durante muchos años de blogger, pero muchas otras que estaba haciendo bien (que ni siquiera conocía). Este proceso de comprensión ha dado lugar a una pequeña lista de tareas que compartiré al final de esta guía y una serie de principios del diseño efectivo del blog. Ahora, en lugar de pasar días y días investigando lo que funciona y lo que no, esta guía te lo pone todo en el mismo lugar. Vamos a verlos uno por uno.

Nota: Mezclo una y otra vez el diseño visual y el funcional ya que ambos son elementos esenciales para el diseño de mi marca y mejoran en mucho la experiencia del usuario.

Un buen diseño empieza en tu página de inicio

guia consejos diseno web grafico ejemplos

La gente que navega por Internet, por desgracia, está ocupada, tiene prisa, presta poca atención y es avasallada con un mar de contenido todos los días (correos electrónicos, blogs, tweets, páginas de ventas, cursos, ebooks y un largo etc). Así que la primera impresión importa más que nunca. Tienes de 3 a 5 segundos para mostrar a un usuario tu página web, blog o tienda online, decirle quién eres o qué haces y hacerle que actúe.

¡Es rápido, muy rápido! Es por eso que el diseño de tu página de inicio es esencial para el éxito de su blog, ya que, con el tiempo (para los proyectos que llevan menos tiempo no suele ser así), la mayoría de tus visitas deberían llegar por aquí (si no es así, comprueba tu estrategia, porque tu tráfico directo no está creciendo).

La verdad es he tenido mis propias incongruencias a la hora de diseñar la página de inicio. De hecho, he tenido tantos diseños diferentes que no sabría enumerártelos todos. Algunos tenían el objetivo de informar, otros de captar leads (suscriptores) y otros de vender, pero ninguno me ha llegado a convencer del todo. Hay mucho escrito sobre lo que funciona y lo que no, pero hacer preguntas a las personas que te visitan es una muy buena idea.

Eso sí, no te quedes ahí y añade llamadas a la atención y otra serie de elementos que atraigan la vista y el click a donde realmente quieres. De hecho, sobre esto quiero extenderme un poco más, ya que existen ciertos elementos esenciales en el diseño de blogs que las mejores páginas de inicio suelen incluir (no hace falta incluirlos todos, pero sí hay que conocerlos):

  • Imagen del encabezado: Una imagen de encabezado o un banner diseñado profesionalmente puede aumentar exponencialmente la credibilidad percibida en cualquier blog.

  • Lema informativo y atractivo: La idea del lema es informar de forma resumida y concisa a sus visitantes sobre lo que haces. El mensaje debe ser directo para que el visitante entienda automáticamente qué es lo que puedes ofrecerle y qué conseguirá el con tu servicio o producto.

  • Llamada a la acción: Una visita a tu página de inicio es una excelente oportunidad para captar una dirección de correo electrónico o hacer que el usuario realiza alguna acción ¡No la pierdas!

  • Orientación sobre dónde empezar: Este es un elemento de diseño tan simple y, a la vez, tan importante. Cuando alguien nuevo llega a tu página web, blog o tienda online, es tu trabajo guiarle sobre dónde debe ir a continuación (una forma muy habitual de hacerlo es crear una página de «Primeros pasos en mi sitio web» para que los nuevos visitantes sepan con qué contenido tienen que empezar y dónde encontrarlo).

  • Prueba social: Si has trabajado con marcas significativas, has contribuido en publicaciones conocidas o tienes testimonios sorprendentes de las personas con las que trabajas o has ayudado inclúyelas en la página de inicio. Cuanto más rápido construyas una credibilidad y confianza con el usuario mejor.

  • Muestra tu personalidad: Aunque siempre depende del tipo de producto o servicio que ofrezcas y quién lo ofrezca, muestra a todo el mundo tu personalidad siempre que puedas. Si eres un blogger individual, incluye una foto. Si eres un negocio, crea una página de inicio que muestre tu visión, misión y conjunto de valores.

Crea un manual de identidad corporativa para tu marca

guia consejos diseno web grafico manual identidad corporativa

Tu blog debe ser una extensión directa de tu marca. Esto significa que necesitas crear una guía de estilo (si no tienes una ya) que se adapte a tu marca, tono y personalidad. El objetivo es crear una experiencia consistente para tus clientes a medida que investigan sobre quién eres y lo que haces. Aunque ya te lo explicaba más arriba, un manual de imagen eficaz aumenta la confianza y la credibilidad percibida y te da una cierta inspiración en lo que a diseño se refiere. Una guía de estilo debería incluir:

  • Una breve versión de la historia de tu marca.

  • Una tipografía primaria (y otra de respaldo).

  • Códigos de color HEX de tu marca.

  • Logotipo y variaciones del mismo (y cómo usarlos).

  • Imágenes, estilo de fotografía y esquemas de color.
  • Estilo de escritura y tono de voz a utilizar.

Unido a todos estos elementos, deberían añadirse una serie de ejemplos para cada punto que resalten exactamente lo que se espera de cada uno de ellos. Un buen ejemplo de manual de identidad, que la ha seguido al pie de la letra en todas sus plataformas, es Copyblogger. No importa donde vayas, si a su página web o a alguno de sus perfiles sociales, en todos sentirás que estás en Copyblogger.

Utiliza el espacio en blanco y provoca una lectura más ordenada

guia consejos diseno web grafico ejemplos google

El espacio en blanco es el mejor amigo de un diseñador web y gráfico. Ayuda a los ojos a dar sentido a lo que estamos leyendo y dibuja los puntos más importantes, destacados con otros colores. Los lectores pueden consumir la información de una manera más sencilla cuando se optimiza la cantidad de espacio en blanco y les permites escanear fácilmente la página para obtener textos o imágenes valiosas. En definitiva, más espacio en blanco hace más claro un sitio web y que la experiencia del usuario sea mucho más agradable.

De hecho, el espacio en blanco proporciona un buen colchón entre la información inútil y las cosas más importantes, guiándote exactamente hacia lo que debes hacer. Un ejemplo de un sitio web que usa esta técnica y la lleva a la máxima expresión es Google. Maximizan el uso del espacio en blanco y ponen el foco en el centro de la pantalla.

Nota: Para ayudar a tus lectores a navegar por tu sitio web (y contenidos), permite que sus ojos respiren y deja suficiente espacio en blanco en determinadas zonas. Yo uso esta técnica, pero con imágenes que ayuden a entender el texto. Queda algo más recargado, pero también alegra a la vista y permite descansar la mirada unos segundos, lo justo para empezar una nueva sección.

Tu diseño debe adaptarse a todos los dispositivos móviles

guia consejos diseno web grafico compatible dispositivos moviles

No lo digo yo, lo dicen los blogs y medios más importantes del mundo: El móvil no deja de crecer y se pone a la cabeza en lo que a consumo de información y compras se refiere. En promedio, gastamos una media de 120 minutos en nuestro dispositivo móvil todos los días (fuente: Econsultancy). ¡Es simplemente bestial! Pero no digo nada nuevo, porque es algo que se veía venir hace ya muchos años.

La tecnología avanza más rápido que nunca. De hecho, vamos tan rápido que no tenemos tiempo ni de acostumbrarnos a ciertos adelantos. ¿No te has fijado que caminamos por la calle chocando unos con otros porque no podemos retirar la mirada del teléfono móvil ni un segundo? Nos apresuramos de reunión a reunión con sólo unos minutos de descanso, y los invertimos mirar nuestro smartphone o teléfono inteligente. En 2014 los usuarios de Internet «móvil» superaron a los usuarios de Internet de escritorio.

Si no te lo crees, fíjate en tu analítica y haz un histórico de los últimos 5 años (es un ejemplo, con unos meses valdría). Si usas Google Analytics, vete a «Audiencia > Móvil > Visión General» y haz analiza bien los números y los porcentajes. ¿Qué ves? ¿No te das cuenta de que tienes cada vez más visitas desde dispositivos móviles? ¡Espera! ¿No tienes un sitio web responsive? Entonces lo primero es ponerse con eso antes de tocar ningún diseño.  Tus lectores están utilizando teléfonos móviles para acceder a tu bitácora, por lo que el diseño de tu blog debe adaptarse a todos los dispositivos posibles.

Ya te he hablado en alguna ocasión sobre las mejores páginas para probar la versión móvil de tu web, los errores más comunes, las métricas a medir y las mejores herramientas para convertir tu blog de WordPress en móvil. Por si esto no fuese suficiente, Google anunció no hace mucho que los sitios con versión móvil tendrán un mejor posicionamiento en los resultados de búsqueda (el móvil se añade como factor de posicionamiento). Y como los usuarios están cada vez más unidos a sus teléfonos, este factor de clasificación cada vez será más importante. Si no estás seguro de si tu sitio web es compatible con dispositivos móviles y no sabes por dónde empezar, consulta este recurso de Google.

Pon a disposición del usuario una navegación rápida y sencilla

guia consejos diseno web grafico estructura navegacion

Yo solía pensar que la «navegación» era lo bien que podías poner el menú superior en tu página web, blog o tienda online. Pero es mucho más que eso y algo más complicado. La navegación consiste en ayudar a tus visitantes a encontrar su camino en tu sitio web de una manera específica, rápida y sencilla. Una navegación eficaz y bien pensada es un win-win para tu web. Consigues que tus visitantes vayan exactamente donde tu quieres y, a la vez, les ahorras un tiempo precioso (ya que no tendrán que estar «adivinando dónde ir»).

Cuando empecé a diseñar y escribir este blog, pasé por alto algunos de los fundamentos más importantes de la navegación. Ahora, en retrospectiva, tiene mucho sentido que mi tasa de rebote fuese mucho mayor de lo que debería ser. Por ello, he reunido algunas claves que deberías considerar al diseñar la arquitectura de navegación de tu blog.

  • Pon orden en el menú superior: Ordena el menú principal, que sea muy claro y simple sobre lo que ofrece tu sitio web, para que tus usuarios de cualquier nivel (novatos y avanzados) puedan encontrar lo que quieren.

  • Incluye una sección de «Primeros pasos»: En esta página quieres proporcionar una ruta de entrada para que los nuevos visitantes pueden hacerse a tu web rápidamente. Por ejemplo, ¿qué blog debería leer primero, segundo y tercero? De esta manera creas una experiencia única para tus usuarios.

  • Incluye un despegable con las categorías más importantes del blog: Si tienes bien categorizado el contenido de tu blog, esta técnica es muy interesante, ya que el lector va directamente al contenido relacionado que realmente le interesa (no te aconsejo que sean más de 10).

  • Incluye una sección de recursos y herramientas: A la hora de crear y gestionar un blog, hay muchas veces que las personas se olvidan de que hay que monetizarlo. Una buena manera de hacerlo es añadir una sección con las herramientas que sueles usar y afiliarte a las mismas para sacar un dinero extra.

  • Incluye una sección más personal: Los blogs están hechos por personas, y la gente quiere saber quién es el que está detrás. Añade una sección donde expliques tu historia, tus objetivos y valores.

  • Incluye llamadas a la acción: Añade CTAs, enlaces internos o enlaces a contenidos relacionados en tu barra lateral (preferiblemente derecha) y al final de los posts. No quieres que alguien lea un post completo y luego salga de tu sitio inmediatamente ¡Dale una razón para quedarse!

Sobre este punto os puedo poner un ejemplo que seguro conocerás: AulaCM. Sigue a la perfección esta fórmula y clava la manera de presentar un menú. Es simple, rápido y muy atractivo. Puedo decir, sin equivocarme, que es el mejor menú que he visto nunca. Como en muchas otras cosas, los profesionales que hay detrás demuestran que están en lo más alto y que tienen mucho mimo con su diseño.

guia consejos diseno web grafico ejemplos aulacm

Nota: Dedica tiempo a pensar una estructura para tu sitio web porque de esa manera también potenciarás el SEO.

Evita y elimina rutas sin salida

guia consejos diseno web grafico rutas sin salida

¿Te ha pasado alguna vez que, estando en una web, has hecho click en un enlace y no te ha llevado a ningún sitio? ¿O tal vez si que te llevaba a algún sitio, pero no era la página que esperabas o era una página de error 404 sin más? ¡Tranquilo! Es muy habitual y, además, es esencial cuando se trata de percepción y conversiones. Si tienes un formulario o un enlace que no lleva a ninguna parte a tus usuarios, es probable que termine en un abandono de tu sitio web y un aumento de la tasa de rebote (más preocupante es que la gran mayoría no volverán).

Por favor, revisa todos estos errores y página sin «chicha», no sólo desde el punto del diseño, sino también desde el punto de vista del posicionamiento web. Google, de hecho, pone a tu disposición Search Console o Webmaster Tools, una herramienta SEO gratuita perfecta para tener controlado este aspecto y muchos otros.

Nota: Webmaster Tools debe revisarse todos los días y en profundidad una vez por semana o más. Los datos que arroja se pueden utilizar para mejorar la estrategia de marketing, prevenir un ataque de enlaces negativos, ayudarte a controlar cómo rastrea Google tu página web, y mucho más. Hay una gran cantidad de información en estas herramientas y el uso adecuado puede ser la diferencia entre el fracaso y el éxito.
Esta guía te puede interesar
tutorial webmaster tools search console

A cualquier propietario de una página web le viene bien estar bien informado del estado de su sitio web, y cuanta más y de mejor calidad sea esta información mucho mejor.

Indexación de páginas, enlaces entrantes, errores 404 y un largo etc. Aunque son datos algo técnicos, es recomendable que sepas manejar una de las mejores herramientas SEO gratuitas de Internet.

Ir a la guía

Humaniza la experiencia todo lo que puedas

guia consejos diseno web grafico humano robot

Tus usuarios quieren conectar con personas, no con marcas. Así que aprovecha cada oportunidad que tengas de personalizar y humanizar tu blog. De esta manera te haces más cercano y la confianza en tu sitio web sube instantáneamente. De todas maneras, te dejo algunos consejos para hacer más humano tu blog y aumentar el engagement y la conexión que tienes con tus lectores.

  • Completa tu biografía y la de cada autor (si tienes un blog multiautor) que contribuya en tu blog con una foto y un breve resumen sobre quien es y a qué se dedica.

  • Muestra, de forma clara (que sea muy visible), el total de comentarios y las veces que ha sido compartido en las redes sociales en cada artículo y, a ser posible, en la página principal del sitio blog (ambos son buenos medidores del engagement y animarán a tus visitas a leer tus contenidos).

  • Incluye imágenes sobre ti, tu personal, tu familia o tus clientes siempre que puedas, como mínimo, en la página «Acerca» o «Sobre ti» (el tipo de fotos depende de ti, pero intenta que se te vea bien a ti o a las personas que salen).

En este sentido, la imaginación es el límite. Puedes hacerlo como quieras, ya que depende de si es un blog más «divertido» o más «serio». En ambos casos te recomiendo hacerlo lo más cercano posible y, aunque suelo recomendar siempre fotos profesionales, en este caso te digo que son mejores «las de andar por casa«. Cuenta tu historia e intenta conectar con tu lector. Como ejemplo te pongo a Frenchiemania, donde te cuenta una pequeña historia y lo uno con decenas de fotos «personales».

guia consejos diseno web grafico ejemplos frenchiemania

También te dejo otro ejemplo. En este caso MensandBeauty, un blog de belleza y moda para hombres en el que vierto muchos de mis conocimientos, y que está dando unos resultados impresionantes. En este caso, gracias a un diseño muy cuidado, te cuento, brevemente, quienes son los que están detrás, uniéndolo con otras opciones que vienen al cuento.

guia consejos diseno web grafico ejemplos mensandbeauty

Diseña una página «sobre ti» irresistible

La página «sobre ti» o «sobre nosotros» es una de las páginas más visitadas en cualquier sitio web. Si alguien va a esa página en tu página web, blog o tienda