Our performance, your advantage

Diseño y estética en el blog

1.Introducción
2.Diseño sencillo y sin complicaciones
3.Temas y CSS
4.Pierde el miedo a dar identidad al diseño de tu blog

Descarga documento completo

Si quieres recibir mensualmente nuestros monográficos para ser un mejor blogger, ¡suscríbete! Es totalmente gratuito.

1. Introducción

Un mes más volvemos a la carga con consejos para exprimir vuestros blogs. Este mes esperamos que tengáis listos los botes de témpera y las ceras de colores, porque os vamos a dar una pequeña guía que os sirva para mejorar la estética de vuestro blog.

Tranquilos porque os daremos unos consejos muy básicos para que, sin necesidad de saber ni lo que es Photoshop, tu blog transpire una imagen agradable de tal manera que navegar por él suponga un paseo agradable para los ojos de tus seguidores.

Recordad que, como siempre, estamos disponibles en el email escueladebloggers@internetadvantage.com para responder vuestras dudas, escuchar vuestras preocupaciones o disfrutar de un café mientras nos presentas tu blog.

2.Diseño sencillo y sin complicaciones

En primer lugar te vamos a dar unas cuantas directrices y recursos que te pueden ser útiles a la hora de definir o elegir el diseño de tu blog. Estas directrices son muy generales y aplicables en cualquier tipo de blogs y se centran en el diseño de un esquema o ‘layout’, la elección de colores y la elección de fuentes apropiadas.

Después te enseñaremos cómo hacer algunas modificaciones sencillas en el diseño de tu blog sin necesidad de tener mucha idea de diseño aplicando las directrices antes propuestas. Nunca olvides que el trabajo de diseño puede ser una labor complicada y, en caso de que quieras un diseño totalmente personalizado y profesional, puede que tengas que recurrir a un diseñador profesional. Las mejores plantillas de WordPress no suelen ser gratuitas, sin embargo, quizás puedas encontrar alguna plantilla gratuita y darle tu toque personal.

En cualquier caso, nunca pierdas el foco en tu contenido. El diseño siempre ha de ser un complemento para que el contenido de tu blog sea más accesible y atractivo. Mantén un diseño sobrio, sencillo y agradable que no distraiga al usuario del contenido. Quizás consideras que una gran cabecera sobrecargada y llamativa puede dotar de personalidad a tu blog, pero probablemente sólo distraiga la atención del usuario y, muchas veces, un simple texto o una imagen sencilla son más que suficientes a modo de cabecera.

2.1. El ‘layout’

El ‘layout’ o esquema de paginación es la estructura que seguirá tu blog. Sería el equivalente a maquetar una revista o periódico. Este ‘layout’ suele expresarse como una estructura de cajas; en el caso de un blog normalmente existirá una caja central más importante que es la que mostrará tu contenido y, adicionalmente, existirán otras cajas que contendrán menús, enlaces, la cabecera, las redes sociales u otro tipo de contenido.

Si has visitado muchos blogs probablemente ya sabrás que, por lo general, los esquemas más tradicionales incluyen una caja de cabecera horizontal y, justo debajo, una, dos o tres cajas estructuradas en columnas.

Si optas por este enfoque de cabecera y columnas, dependerá de tus necesidades y gustos elegir más o menos columnas:

  • 1 columna es buena si no vas a utilizar menús complicados y prefieres que el contenido siempre tenga gran relevancia;
  • Apuesta por 2 columnas, si consideras que, además de la columna principal, debe existir otra columna secundaria en la que incluir elementos que siempre deben estar presentes como un menú, un ‘blogroll’ o enlaces a las redes sociales. Esta columna ‘secundaria’ por lo general debería estar a la derecha, ya que la columna izquierda suele ser más relevante, a no ser que sea un menú muy importante que quieras destacar antes que el contenido principal;
  • En último lugar, puedes elegir un diseño con 3 columnas si consideras que existe un menú muy importante que quieres que esté siempre presente a la izquierda y contenido estático adicional en una columna derecha.

Si no te ha quedado claro con esta explicación de palabra, a continuación tienes una explicación mucho más visual.

Existen más posibilidades, si quieres idear tu layout simplemente coge dos folios: uno representará la portada de tu blog y otro representará una entrada cualquiera. Dibuja cajas y escribe qué debería ir en cada caja: recuerda que la de la página principal debería tener un listado de las entradas en la caja principal y la página de entrada individual el contenido de la misma.

Una vez elegido o desarrollado el ‘layout’ o estructura más apropiada, podemos pasar a elegir otros elementos de diseño y buscar o desarrollar el diseño que más se aproxime a nuestra idea.

2.2. Los colores

Es importante escoger un esquema de colores apropiado y funcional. Recuerda que el color del texto debe contrastar de forma cómoda sobre el color del fondo en el que esté, no deben existir colores demasiado brillantes, y no olvides que es preferible utilizar tonalidades de gris muy oscuro cercanas al negro que el color totalmente negro para el texto principal.

Escoge una paleta coherente de cinco colores aproximadamente y asigna esos colores a los distintos elementos y fondos de la web siguiendo los consejos dados.

Colour Lovers” ofrece una colección de paletas web clasificadas de distintas maneras las cuales puedes utilizar de inspiración.

Procura salirte lo menos posible de la paleta seleccionada cuando diseñes cualquier elemento de tu web, de esta manera lograrás transmitir un diseño coherente, sencillo y agradable.

Existen muchos estudios acerca del correcto uso y empleo de colores, pero elegir una paleta ya definida apropiada puede ahorrar muchos quebraderos de cabeza.

2.3 . Fuentes de texto

Dado que el contenido de tu blog estará compuesto principalmente por texto, elegir unas fuentes apropiadas para tu blog es tan importante como escoger colores adecuados.

Deberás elegir al menos una fuente para el título principal del blog, otra para el contenido principal, y otra para los ‘headings’ o cabeceras (como los títulos de cada post).

Ten en cuenta que tu contenido será principalmente leído en pantallas, por lo que es recomendable que escojas una fuente sobria y sin serifas para el contenido principal (las serifas son las pequeñas terminaciones que tienen algunas fuentes como la conocida Times New Roman). Reserva las fuentes con más adornos para usos muy concretos y limitados.

A la hora de elegir fuentes Google nos provee una genial herramienta llamada Google Web Fonts. Esta herramienta dispone de una gran colección de fuentes listas para utilizar en cualquier web, selecciona las que consideres más apropiadas, guárdalas en una colección y descárgalas.

La propia herramienta te explica cómo utilizarlas pero si no entiendes muy bien las instrucciones que da, no te preocupes, ahora te explicaremos como hacer pequeños cambios al CSS de tu blog.

Como bien recuerda la herramienta, no olvides que utilizar un gran número de fuentes distintas en tu blog puede ralentizar el tiempo de carga de la misma, así que intenta utilizar un número limitado de fuentes y cargar solo aquellas que necesites.

 2.3.1. Alineación del texto

También te recomendamos que tengas en cuenta la alineación del texto dentro de cada entrada del blog. Por lo general el texto viene alineado a la izquierda, pero no siempre interesará utilizar esta alineación.

Puedes darle una apariencia más profesional si justificas el texto, quedará centrado a ambos lados dando un toque de orden al post.

También puedes jugar con los diferentes alineados centrando títulos y fotografías para enfatizar. Recuerda que el editor de la mayoría de blogs es muy intuitivo ya que sigue la misma línea que el editor de Word, por lo que no te costará hacerte con estos controles.

3. Temas y CSS

Llegados a este punto deberías haber seleccionado una estructura, unos colores, unas fuentes de texto y saber cómo alinear y cuándo hacerlo. Pero, ¿para qué sirve todo esto? ¿Cómo utilizar todas estas elecciones? En primer lugar, para familiarizarte con distintas opciones de diseño muy básicas. En segundo lugar para utilizarlas si decidieras realizar tu propio diseño o modificar uno existente.

Sin embargo la mayoría de CMS’s proveen una gran cantidad de diseños listos para ser usados y, si lo deseamos, modificados. Veremos los casos particulares de Tumblr y WordPress los cuales, además, proveen algunas herramientas básicas para modificar los temas sin necesidad de tener conocimientos de CSS. Después, veremos unas pequeñas nociones muy básicas sobre CSS por si quisieras hacer algunos cambios propios en el diseño.

 3.1. Tumblr

En el caso de Tumblr modificar la apariencia de cualquier blog que controles es muy sencillo: una vez hayas hecho ‘login’ en Tumblr simplemente vete al blog cuya apariencia quieres modificar y, en la esquina superior derecha, presiona ‘Customize’.

Aparecerá un menú a la izquierda, en este menú podrás elegir entre diversidad de temas simplemente presionando “Themes” en la esquina superior izquierda. Una vez elegido un tema, podrás modificar de forma sencilla muchas de sus características como los colores o la descripción.

Selecciona los colores que consideres más apropiados según la paleta de colores que has elegido. Realizar cambios más avanzados, según la plantilla, requerirá editar el HTML y el CSS de la página, para ello simplemente basta con hacer clic en el botón “Edit HTML”.

 3.2 . WordPress

WordPress también posee un menú para modificar de forma sencilla la apariencia de tu blog. Una vez dentro del panel de administración de tu blog (ubicado normalmente en /wp-admin) bajo el menú de “Apariencia” tendrás la opción de seleccionar o instalar nuevos temas.

Una vez encuentres un tema que se adecue al layout que buscas lo podrás instalar con un simple clic. Si no ha habido ningún problema, actívalo en el menú de temas y, haciendo clic en ‘Personalizar’ aparecerá un menú muy similar al de Tumblr en el que podrás editar algunos parámetros básicos como el esquema de colores.

Si has probado varios temas, te darás cuenta de que no todos tienen las mismas opciones para personalizar. Hay algunos desarrolladores de las plantillas dan más libertad que otros a la hora de cambiar cosas en el blog de manera automática, por lo que encontrarás algunas plantillas con un menú extra muy completo y otras con un menú básico.

Si has intentado cambiar algo desde la pestaña de apariencia del tema y no lo has conseguido o la plantilla no te da la opción, no te queda otra que ponerte el traje de PRO de la informática y editar de manera manual. No desesperes que es fácil y te lo vamos a explicar todo muy bien.

Para cambiar parámetros más avanzados, tendrás que recurrir a la opción “Editor” dentro del menú de Apariencia. Esta opción te permitirá modificar los archivos que componen tu blog.

Casi todas las opciones que afectan al diseño se encuentran en la Hoja de estilo (style.css) y, como mucho, puede que para incluir algún cambio como agregar nuevas fuentes debas acudir a la Cabecera (header.php) y modificar el HTML contenido en ese archivo.

En el caso de que hayas cogido gusto al tema edición manual de PRO y quieras meterte de cabeza en el mundo del HTML y el CSS para realizar retoques más avanzados, te recomendamos la siguiente guía en inglés: “A Beginner’s Guide to HTML & CSS

De momento, vamos a ver cómo hacer un cambio tan sencillo como utilizar una nueva fuente seleccionada en Google Web Fonts en tu blog de WordPress. Esto será simplemente una referencia para que, si tienes miedo al código, lo pierdas y te familiarices con algunos conceptos muy básicos. Si te pierdes no te preocupes.

ATENCIÓN: Guarda una copia en tu ordenador de CUALQUIER archivo antes de modificarlo (basta con copiar y pegar en el bloc de notas). De esta manera, si hay cualquier error, simplemente vuelve a poner el contenido del archivo que has guardado.

Ejemplo práctico: Utilizando una fuente de Google Web Fonts en WordPress

Este es un ejemplo para que te familiarices un poco con editar aspectos sencillos de la apariencia de tu blog. No nos hacemos responsables si editas algo que no debes y no has hecho una copia de seguridad. Si no tienes interés en familiarizarte con estos aspectos más avanzados puedes pasar directamente al siguiente punto.

Supongamos que tenemos un blog en WordPress con el tema “Twenty Eleven” (uno de los temas instalados por defecto en WordPress). Sin embargo queremos cambiar la fuente del título porque nos parece algo sosa.

Accedemos a Google Web Fonts y seleccionamos una de las fuentes que nos ofrece. Encontramos “Faster One”, la cual está algo ‘sobredecorada’ pero, al ser para utilizar en una cabecera, nos permitiremos el exceso. Dado que es un uso puntual no formaremos una colección y haremos clic en “Quick use”.

Al hacer clic en “Quick use” tendremos cuatro pasos. Los dos primeros pasos son para elegir variantes dentro de la familia de la fuente. En el caso de la fuente seleccionada solo existe una variante, por lo que pasamos a los puntos 3 y 4 donde tendremos los códigos a utilizar.

El código del punto 3 tendremos que ponerlo en nuestra Cabecera (header.php). Entramos en el panel de administración de WordPress (www.tublog.com/wp-admin/), en el menú de Apariencia hacemos clic en Editor y seleccionamos en la lista de la derecha Cabecera. (Asegúrate, en el menú desplegable de arriba a la derecha, de que el tema que estás editando es el que deseas, por defecto aparece el que está activo.)

 

Busca la línea en la que está escrito <head> y JUSTO DESPUÉS (para asegurarnos de que esté entre <head> y </head>) pon el código del punto 3 en una nueva línea. (No olvides hacer una copia antes de cambiar nada.)

 

Haz clic en el botón de “Actualizar archivo”. Esta línea de código HTML simplemente carga la fuente. Todavía no deberías ver ningún cambio pues nos falta el punto 4, actualizar el archivo CSS.

Ya no queda prácticamente nada. Sólo tenemos que cambiar el estilo de nuestra página en el archivo CSS para agregar esta nueva fuente a nuestros estilos.

En el menú de la derecha del editor de WordPress haz clic en “Hoja de estilo (style.css).

¡No te asustes! El archivo CSS puede parecer complicado en un primer vistazo pero no es nada demasiado difícil. Simplemente describe una serie de características de estilo para cada elemento del HTML.

Los textos de cabeceras de WordPress son elementos H1 en HTML (si miras el código HTML de tu blog verás que el título está entre etiquetas <h1> y </h1>).

Dependiendo del estilo este documento CSS puede ser distinto, seguiremos con el ejemplo del estilo “Twenty Eleven”. ¿Dónde se describe el elemento h1 en el CSS de Twenty Eleven?

 

Como ves está descrito junto con un montón de elementos más. Según esto el elemento h1 tiene que tener borde 0, hereda la familia de la fuente, tiene un tamaño del 100%, hereda el estilo, hereda el peso, tiene un margen de 0, un ‘outline’ de 0, un ‘padding’ de 0 y está alineado de acuerdo a la línea de base.

¿Qué significa todo esto? No te preocupes, no hace falta que lo aprendas si no tienes mucho interés, son distintos atributos del texto. Lo único que queremos cambiar es la familia de la fuente (Font-family).

Como no queremos cambiar el resto de elementos, quita el h1 de ahí y cópialo debajo con exactamente los mismos atributos.

Después, cambia

font-family: inherit;

Por

font-family: ‘Faster One’, cursive;

Si todo ha ido bien este debería ser ahora el nuevo aspecto de la cabecera:

 

Obviamente uno puede elegir la fuente que desee y el CSS será distinto si queremos cambiar otro tema de WordPress.

Si no consigues el aspecto deseado puedes probar retocando otros atributos y, si finalmente ves que el resultado es peor, puedes volver a poner la copia de seguridad que has hecho para restaurar los cambios.

Lo que debes aprender es que el CSS simplemente describe algunas características de estilo de nuestro sitio web que pueden ser muy fáciles de cambiar si se tiene un poco de cuidado y paciencia.

4.Pierde el miedo a dar identidad al diseño de tu blog

Esperamos que esta entrega te haya servido para perder el miedo a modificar el diseño de tu blog. El diseño no es esencial pero ayuda a aportar una identidad a tu blog.

Si has enredado con las opciones de apariencia de tu blog habrás visto que normalmente puedes introducir imágenes e iconos para personalizar muchos temas. No hemos entrado en aspectos de diseño gráfico pero, si te atreves a abrir el Photoshop, recuerda utilizar colores acordes a la paleta del resto del diseño del blog, no realices diseños demasiado sobrecargados y mantén siempre un aspecto coherente.

En cualquier caso, sean cuales sean los retoques que hagas a tu blog, no olvides estas recomendaciones generales:

  • Mantén un diseño sobrio y sencillo, no sobrecargues ningún aspecto del diseño de tu blog.
  • A la hora de elegir un ‘layout’ elige el más sencillo posible, no pierdas el foco en el contenido.
  • Usa el alineado del texto para enfatizar o aportar elegancia al post.
  • Si hay una serie de elementos que deseas tener siempre enlazados utiliza el menú más sencillo. Quizás si son sólo cuatro elementos puedas enlazarlo con un sencillo menú superior.
  • Cuida los márgenes, cada elemento de tu plantilla debe estar suficientemente separado.
  • Respeta la paleta de colores que hayas elegido siempre que sea posible.
  • Asegúrate de que todos los elementos de texto sean fácilmente legibles.
  • Elige unas fuentes adecuadas y procura no salirte de dichas fuentes.
  • Si deseas realizar tu propia cabecera y/o logotipo mantenlo tan simple como sea posible.

Con estos sencillos consejos posiblemente consigas un blog que sea agradable a la vista, lo cual siempre ayudará a que los lectores pasen más tiempo en el mismo.

No olvides que, si tienes cualquier duda, estaremos encantados de ayudarte en la dirección de email escueladebloggers@internetadvantage.com donde también podrás proponernos un tema para la próxima entrega. Y, si nuestros consejos te han sido útiles para rediseñar tu blog, no dudes en enseñárnoslo.

¡Mucha suerte y nos vemos en la próxima entrega!

Potencia tus resultados online: Contáctanos

Uso de cookies

Utilizamos cookies propias y de terceros para realizar análisis de uso y de medición de nuestra web para mejorar nuestros servicios. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información de nuestra política de cookies, aqui.