Por establecer un símil podríamos comparar tener un blog como tener nuestra propia casa, queremos ponerla lo más bonita posible y que cuando las visitas lleguen digan «¡Wow! ¡Qué casa tan impresionante!». El efecto rechazo o aceptación en el primer golpe de vista tiene un gran énfasis en las páginas webs.
Un contenido en colaboración con Ilusual.
Hay muchos factores que harán que tu blog pueda ser más o menos atractivo en cuanto a diseño, la disposición del texto, un correcto alternado de las imágenes, un logo, un color… ¡Vamos a ver algunos aspectos sencillos que harán que nuestro blog luzca mejor!
1. La cabecera
La cabecera es uno de los elementos más importantes a la hora de vestir nuestro sitio. Interprétala como si fueran los ojos de tu blog, el primer lugar donde va a mirar la gente que entre por primera vez y recuerda que las primeras impresiones son muy importantes y más aun en internet. Una buena cabecera puede otorgarle a un sitio una apariencia profesional, lógicamente el contenido tiene que consolidar esta posible primera buena impresión.
Este es un ejemplo del blog de motor de mi red. La hizo un diseñador de photoshop y de momento parece que esta gustando bastante. También hay que tener en cuenta que en función a la temática encaja más un estilo de cabecera u otro.
Por ejemplo para temas sobre motor se llevan mucho los rojos y colores impactantes, estilo Motorpasion o Autobild. Sin embargo en temáticas relacionadas por ejemplo con la tecnología las cabeceras tienden a ser más sobrias en cuanto a color y se tira más del uso de logotipos minimalistas.
2. Imágenes dentro de tu contenido
Utilizar imágenes de calidad ayuda a dar a tu blog esa sensación visual de calidad que tan importante es. Pero… ¿Imágenes de Google o con Licencia Creative Commons? Existe cierta controversia al respecto. Yo no recomiendo usar las imágenes con Licencia CC que podemos encontrar en sitios como Flickr, ¿El motivo? La baja calidad de la que suelen hacer gala.
Por otro lado si coges una imágen de Google y no duermes bien porque piensas que la has «robado» no te preocupes mucho, es una práctica que todos los días miles de sites realizan contínuamente, es más, es muy probable que la web de la que hayas tomado prestada la fotografía a su vez la haya cogido de otra web que tampoco era la suya. Este hecho te da cobertura, no obstante en caso de que quieras ir un paso más allá también puedes citar la fuente de las fotografías al final del artículo.
3. Sidebar lateral
Uno de los elementos en mi opinión más importantes de un blog. El sidebar es esa columna lateral que tienes al lado de tu contenido donde pones tus widgets, información de perfil y esas cosas. Habitualmente se tiende a poner información en el sidebar que no aporta demasiado valor al usuario medio usándolo como una especia de mesilla de noche, un lugar para organizar o donde insertar la publi de Adsense o tus últimas 10 entradas (¡que ya se ven en el Land Page normal!). Sin embargo un sidebar puede ser un lugar tan bueno para «vender» información como la propia página principal.
Hazte la siguiente pregunta ¿Mi sidebar aporta algo de valor a mis visitas?. Yo en mi bitácora aun no lo tengo optimizado pero si sigues habitualmente el blog dentro de poco te encontrarás una sorpresita en mi sidebar… 😉
4. Un buen favicon
Un buen favi… ¿qué?, el favicon es ese pequeño icono que aparece en la pestaña superior de tu web. Es un elemento que a pesar de su diminuto tamaño transmite imágen de marca. Yo particularmente soy algo maniático con los detalles y siempre recomendaría tener un favicon para nuestro blog o página web. La belleza está en los pequeños detalles.
¿Como lo instalo? Si no sabes programación puedes recurrir a un plugin que funciona estupendamente, su nombre es: cbnet Favicon y su configuración es de lo más sencilla, subes una foto, guardas y listo. Ya tienes tu favicon propio 🙂
5. Tu barra principal de menú
Hablé de este elemento hace ya algunos post. Creo que junto con el sidebar es el elemento más importante de un blog. La estructura «del blog perfecto» es la que aporta:
- Valor visual en la cabecera
- Valor de situación y de contenidos en la barra de menús inferior a la cabecera
- Un plus de valor adicional en el sidebar. Regala un curso echo por ti en Word sobre algo que domines o coloca en la primera posición de la columna tus 3 mejores post.
Aquí tienes el artículo completo con ejemplos prácticos de barras de menús optimizadas.
Hola Dean,
Me encanta tu blog, unos temas muy interesantes. Quizás me puedas ayudar, recientemente he iniciado mi propia aventura bloguera y después de poner mi favicon en su sitio (aparentemente los navegadores lo interpretan bien):
http://krakenbyte.com/favicon.ico
Me he dado cuenta de que, a diferencia de lo que ocurre con tu blog, que funciona correctamente, el «Feedly» no lo toma correctamente y lo sustituye por el favicon «genérico» de las RSS.
Mi pregunta es ¿hay que seguir alguna pauta específica para que el favicon.ico funcione, es decir, hay algún estándar?
Me da la impresión de que la cosa está un poco asilvestrada: he encontrado favicons de otros blogs populares que sí funcionan en Feedly bien, y son muy diferentes, desde el clásico 16×16 con 16 colores, hasta algunos con varios tamaños incrustados. Incluso he probado a sustituir el favicon de mi blog por uno de los de otros blogs que sí funcionan, pero sigue igual… ¿podría ser tema de la «caché» de Feedly, que no la actualizasen?
Bueno, Dean, perdona por «la chapa», gracias de antemano y enhorabuena por tu blog ¡Ánimo!
Hola!
Me pillas completamente, la verdad es que no tengo ni idea en temas de fevicon con feedly etc… no te sabría decir, jeje!!
Losiento
Un saludo y gracias por tus palabras
Gracias de todas maneras, Dean.
En cualquier caso ya he logrado solucionr el tema siguiendo el método científico de ensayo y error.
Lo que ocurre es que para que el favicon.ico funcione correctamente, debe ajustarse a unos estándares que no son tales: cada navegador, lector de RSS, sistema operativo… hace lo que le da la gana, ¡tristemente no hay posturas comunes…!
Así que se me ocurrió tomar como modelo a San Google y utilizar su favicon como «Norma» a seguir en KrakenByte:
http://www.google.es/favicon.ico
Como se puede ver, Google utiliza un favicon.ico que contiene sólo dos iconos (16×16 y 32×32 pixeles, ambos con 16 millones de colores), y no como el que empecé a utilizar yo que tenía seis variantes.
Una vez sustituido el favicon en el raíz de mi servidor, y transcurrido un cierto tiempo (la famosa propagación en internet no es instantánea), ambos orígenes de feeds…
http://krakenbyte.com/feed/
http://feeds.feedburner.com/krakenbyte
…actualizaron su respectivo favicon.ico en los lectores de feed: Feedly y FeedReader.
Otros lectores, usan otros métodos para poner el favicon, por ejemplo «ReadKit» parece que lo adquiere del «Gravatar».
En definitiva, cada uno es un mundo, estándares no estándares.
Gracias de nuevo, Dean, espero que mis comentarios también sean de utilidad y un cordial saludo a todos los lectores de blogger3cero.
Eso seguro que sí KrakenByte.
Muchas gracias por compartir tu experiencia 🙂
Excelente artículo sobre diseño web, Dean. Desde luego que no podemos parar de aprender contigo. A pesar de que este artículo es ya algo antiguo (lo cual también se refleja un poco en el número de comentarios, jeje) sus aportaciones son muy buenas.
Gracias!
Hola Dean
A mi me gustan los diseños minimalistas y al grano, intuitivos, visuales, sin demasiados párrafos que atiborren la pantalla
Que uno sepa rápidamente donde hacer clic para llegar al blog, las herramientas, el contacto
Gracias por estos tips
Saludos