54

12 consejos a tener en cuenta en el diseño de tu blog

Cuando inicias un blog, uno de los puntos "clave" que sabemos que hay que tomar seriamente en cuenta es el relativo al diseño. No sé si estaréis de acuerdo conmigo pero para mí el diseño es uno de los 3 elementos básicos e imprescindibles para el éxito de todo proyecto de blog, junto con el contenido y el SEO.

Por ello me gustaría compartir con los lectores de El Escaparate unas 12 consideraciones a tomar en cuenta a la hora de escoger un diseño para nuestro próximo blog.

[1] Sé objetivo. No te dejes llevar por tu estado anímico momentáneo, ni por tu color preferido de toda la vida. Tu blog no irá dirigido a una sola persona, ni a 10 ni a 100, sino a miles. Piensa, por lo tanto, en la combinación de colores y elementos que tenga más posibilidades de agradar al mayor número de lectores posible.

Colores Web
[2] Estudia y valora el perfil de tus lectores potenciales. Intenta reflejar la cultura y el modo de vida (lifestyle) de ellos a través de los colores, tipo de letra, etc. Haz que se sientan como en casa. ¿Tiene sentido que el color principal de un blog sobre Hip-Hop sea el rosa?

[3] El diseño tiene que permitir un escaneo visual rápido de los contenidos. Haz que la experiencia del lector sea agradable y le ganarás. Por ejemplo, los enlaces de "Contacto", "Publicidad" etc. tienen que estar donde estamos acostumbrados a encontralos.
Los títulos tienen que ser reconocibles como tal, los subtítulos, las secciones, etc.

[4] Preocúpate de la legibilidad. Evita tipos de letra que sean difíciles de leer o tamaños demasiado pequeños o grandes.

[5] No utilices títulos parpadeantes o con destellos, ni adornes tu blog con imágenes GIF animadas, a menos que tus lectores provengan del año 1996.

[6] Utiliza CSS en vez del HTML siempre que puedas, notarás la diferencia en rapidez y mayor riqueza en características.

[7] A menos que sea necesario, evita los menús desplegables. Muchos usuarios no los tocan (por pereza, por desconocimiento) y así pierdes lectores fácilmente.

[8] Asegúrate de que la plantilla sea compatible con TODOS los navegadores populares. Visualízala en IE; Firefox; Chrome; Opera y Safari antes de adoptarla definitivamente.

[9] Lo mismo se aplica para las resoluciones. Comprueba que tu diseño no perderá estética por el cambio de resolución de pantalla. Haz pruebas antes de decidirte.

[10] Evita utilizar patrones (patterns) como fondo detrás de un texto, ya que así harás que la lectura sea más difícil (muy frecuente en los blogs personales en MySpace).

Colores Blog
[11] Limita tu plantilla de colores. Los colores tienen un enorme poder a la hora de crear una marca visual, y son útiles para complementar la experiencia de la lectura dentro de la psicología del usuario/lector mediante matices que el texto no puede transmitir, pero si nuestra plantilla se compone de 19 colores, la cosa se nos va de las manos.

[12] Dentro del diseño, los elementos protagonistas tienen que tener colores destacados. Por ejemplo, para un botón de "Cómpralo ahora" no se me ocurre mejor idea que un botón rojo y simple sobre un fondo blanco.

Evidentemente esta lista se puede alargar todavía con más ideas y consejos. Si me he dejado alguno en el tintero por favor compartirlo con nosotros abajo en los comentarios.


P.D. Existen muchas webs que constituyen una fuente inagotable de plantillas y diseños listos para implementar. No dudéis en consultarlas ya que os ahorrarán posiblemente mucho esfuerzo.


Blogger invitado / Autor de la entrada
Mario PerézMario Peréz es de Madrid, de profesión Consultor SAP de Recursos Humanos, emplea sus ratos libres editando una pequeña red de blogs sobre diversos temas como Formación y cursos o consejos sobre Trabajo y empleo.

Entradas Relacionadas:

54 comentarios:


Stella

Muy buenos los consejos! Estoy muy de acuerdo, especialmente en lo del uso del color y los gifs. Hay blogs que vienen tan cargados que tardan en bajar y ya uno no tiene ganas de leerlos!!!

Oliver

Hola Rosa! Gracias por tus consejos, son muy buenos para mejorar mi blog ya que apenas estoy comenzando a darle vida... los tomare en cuenta

kkarlos

Que buenos consejos Rosa de seguro los tomaré en cuenta.

Saludos! :D

Juanma

Muy buenos consejos Rosa.
En el punto 6, a que te refieres exactamente???
Un saludo.

Cr!s

Lo tendré en cuenta...:D

Abadesa

Muy buenos consejos ;)

en-rHed-ando

De la experiencia se aprende Rosa, completamente de acuerdo en lo que dices (aunque todos caimos en eso al principio).
Una cosa que aprendí es que poner widgets como relojitos, calendarios, imagenes gif,fotos,fondos... etc que son divinos de la muerte desde luego!!, pero que hacen que a mi me aburra entrar en una pagina que tarda más de 3 minutos en abrirse, por no decir que bloquea en extremo incluso nuestros pcs.
Pero a mi lo que tambien me horroriza es la publicidad, los pop ups, las ventanas emergentes que salen y salen, desde luego a ese sitio el que sea no entro más en mi vida.
Y es que encima hay páginas que con 5 post o menos ya tienen publicidad, por dios! que no han hecho nada, y ya quieren cobrar por algo que en realidad ni siquiera es de uso creativo personal, sino alguna cosa que copiaron.
En fin Rosa que esto habria que divulgarlo más, no se trata de hacer un blog tampoco minimalista aunque a mi cada vez me gustan más...
Si no de ver cuanto tarda en abrirse y si tarda ir eliminando lo que entorpezca...
Me he lucido escribiendo eha guapa que toy en el curro ¡aun peral! ja!

..NaNy..

Hola muy buenos tus consejos y muy prácticos. Saludos

Fero

Hola Rosa.
Me causó mucha gracia lo de los gifs. :)

Ya que has permitido añadir, con tu permito comparto con tus lectores una web que permite visualizar nuestro blog en diferentes resoluciones, de acuerdo a tu recomendación N° 9. La dirección es: http://viewlike.us/

Hoy por ejemplo, he visualizado mi web y me di cuenta que la imagen flotante que coloqué en una de las esquinas de mi blog no ayuda a la lectura cuando las resolución es muy pequeña (por ej. en un iphone)

Gracias Rosa. Un placer leerte.

Saludos

José María

Como siempre, buenos consejos. Tu entrada me ha animado a cambiar mi blog de aspecto. Sólo la apariencia, claro. Un abrazo, Neru.

Majo

Muy bien traído, sobre todo ahora que hace relativamente poco que tenemos el "diseñador de plantillas" (los que usamos Blogger).

Sí añadiría algo, que podría complementar el punto número 4: fondo claro, letra oscura. Es mi opinión, claro, pero se puede probar a leer un rato un blog de fondo oscuro, y entrar inmediatamente después a otro de fondo claro: los ojos lo notan (para bien) y de qué manera...

Besos

Al� Reyes

Hola, no me conoces, pero te tengo entre mis cuatro blogs de noticias. Cuando tengas un tiempito, por fa pásate por mi blog, será un gran honor para mí

Mi blog es: tigrero-literario.blogspot

Mario Pérez

Juanma: Preguntabas sobre el punto 6: CSS is rápido de cargar por su carácter conciso. Si para decirle al navegador una cosa con HTML necesitas 10 palabras, con CSS a lo mejor sólo necesitarías 3, por ponerte un ejemplo vamos. Me refiero a que se necesita habitualmente más código y más tiempo de carga con HTML que con CSS, para al final decir lo mismo.
Por otro lado, si utilizas un archivo CSS único y lo llamas desde la plantilla através de una ruta, el navegador lo tiene que cargar una sola vez y así para el resto de las páginas te ahorras el tiempo de carga del código CSS.
Parece que poquito a poco esto de la rapidez de carga empieza a tener cada vez más relevancia.

ANRAFERA

Gracias por estos buenos consejos. Feliz fin de semana y cordial saludo.

Ciberviviente

El punto [6] es inaplicable. No se trata de escoger entre CSS o HTML, son complementarios.

tecla

No me gustan los blogs excesivamente recargados. En un blog literario, la protagonista debe de ser la palabra o todo aquello que se quiere transmitir.
Lo demás desde mi punto de vista sobra.
Aparte de que en ocasiones me dejan el ordenador bloqueado y lo tengo que apagar.
Gracias Rosa.
:)

Mario Pérez

Ciberviviente: "El punto [6] es inaplicable. No se trata de escoger entre CSS o HTML, son complementarios." Ésa es la idea, pero hay gente que programa todo el diseño en HTML sin usar CSS.

Vku

Huyyy!! voy a tener que cambiar todo mi blog :D

Jocarl

Blogger invitado genial .

Pájaro Blanco

Rosa! como estas! yo acá con otra duda :$

mira este blog http://guiracomic.blogspot.com/ como le hago para que no quede ese espacio en blanco arriba del footer?

MALINA

Hola wapa, hace tiempo me pareció ver una forma de eliminar lo que aparece en la parte superior de las entradas cuando se hace una búsqueda o se hace click en las categorias "Mostrando las entradas más recientes..."
He búscado en el indice pero no lo he encontrado, me echas una mano?

Besazos!

Lourdes Marin (zazil ha)

Muy interesante, gracias! espero poder preguntar algunas dudas!

Rosa

MALINA¡Hola wapa! :D To pa´ti:

http://elescaparatederosa.blogspot.com/2007/05/eliminar-mensaje-de-etiquetas.html

Rosa

Pájaro BlancoPrueba en esta parte:
#footer {
text-align:center;
margin: 0;
padding-top: 30px;
padding-right: 0px;
padding-bottom:40px;
padding-left: 0px;
}

Reduciendo el padding-top a cero.

Grandolina

Hola Rosa!

Una entrada muy interesante, a mi parecer básica, una buena presentación dice mucho del autor del blog.

Aunque escribo poco siempre te sigo de cerca a través del enlace que tengo en el mio. Me leo todos los post, y aunque no soy de añadir mucho artilugios, me gustan las cosas sencillas, siempre te sigo porque si encuentro algo que pueda interesarme.

Gracias a tu blog he podido organizar el mio, y como agradecimiento te hice una firmita, espero que te guste.

Un beso.

Pd. también se admiten críticas, siempre es bueno saber como se ve desde fuera el blog propio.

Gianluca

Muy buenos los consejos, felicitaciones Rosa.

MariaRM

Hola Rosa Maria quiero decirte que me encanta tu blog he aprendido muchas cosas como blogger principiante y he aplicado muchas de las cosas que escribes, me gustaría que visites mi blog y me dejes saber que opinas.Este es mi primer blog.

http://estilite.blogspot.com

Bilosony2™

Siempre pense y avale muchos de eso consejos que as nombrabo en este post. Pero lamentablemente pasa el tiempo y las necesidades de mi blog fueron cambiando agrandandoce asi que no e cumplido alguno de tus consejos como el "7" estube abligado poner un menu desplegable para hacer mas rapida la navegacion del visitante en el blog y el "11" noce si lo estare cumpliendo ya que utilizo casi 8 colores para todo el blog :)y sobre el "P.D." nunca me gusto la idea de bajar plantillas prefiero hacerla modificando la plantilla minima que te da blogger (es un desafio) pero pienso que es lo mas original que uno puede hacer en su blog jeje :)

Saludos!!!

Rosa

Bilosony2™ Suscribo totalmente lo de la "P.D." que dices ;) ¡Mínima forever! :D

Rosa

Grandolina ¡Gracias! además me encantan las hadas! :D

Rudolph

Hola Rosa, vendo a realizarte una pregunta un poco salida del tema de la entrada. Resulta que acabo de poner una imagen de fondo en mi blog: http://viviendobajolasletras.blogspot.com/ , pero no sé como hacerle para que se cree un marco que encierre al contenido (sidebar, entradas, etc.) y esto tenga el fondo blanco. Me refiero a que quedara como este por ejemplo: http://www.letrasyescenas.com/.

Espero que no sea mucha molestia. Saludos.

Rosa

Rudolph Añadiendo un background en outer. Localiza esto y añade lo que ves en negrita (hazlo después de añadir el fondo o no notarás nada):

#outer-wrapper {
width: 890px;
background: #fff;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

Nopia

Hola Rosa como estás he estado echándole un vistazo a tu blog y me ha gustado muchísimo,me encantaría que visualizaras mi blog y darme tu opinión y consejos,en que podría mejorar según tu criterio,si no es demasiado molestia,te agradecería que me visitaras, gracias de antemano, URL: http://nopia.blogspot.com

Old School Generation.

Hola Rosa, me había pasado por aquí a saludarte. Confío en que estés pasando un muy feliz fin de semana y que todo te vaya estupendamente. Un abrazo :)

Umm Abdurrahman

Hola Rosa! Se puede decir más alto pero no más claro, y se agradece siempre tus consejos. Siendo objetiva este es el blog preferido a la hora de jugar con mi blog, en el diseño nunca he perdido nada permanentemente y todo a salido a la perfección según tus indicaciones a pesar de que soy una chica torpe en estas cosas pero poco a poco he ido aprendiendo. Y encontré ya como enlazarte que prácticamente te llevas todos los honores cuando mis lectores dicen que le gusta el diseño.

Que estes bien
saludos.

Rosa

Umm Abdurrahman Es que tu blog es hermoso en su minimalismo, limpio y claro, como a mi me gusta :D

Umm Abdurrahman

Gracias Rosa, te digo la mayorías de las cosas las cogí de aquí y ando viendo como poner otras jeje.

Rudolph

Rosa, siento darte molestias de nuevo, pero creo que el código está incompleto, no veo nada en negritas :S

Rosa

Rudolph Si, se me pasó, pero tampoco era tan complicado...buscar el código en tu plantilla y fijarte en lo que tu no tienes ahí, o sea, lo que añadi yo y se supone iría en negrita :o

#outer-wrapper {
width: 890px;
background: #fff;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

Rudolph

¡Muchísimas gracias Rosa, me ha funcionado de maravilla! Si quieres puedes echarle un ojo: http://viviendobajolasletras.blogspot.com/ ;)

Ahora, otra molestia más (disculpa, pero en esto sé muy poco): ¿cómo le podría añadir a eso que puse, un marco? Espero no sea ya mucha lata.

De nuevo mil gracias, saludos.

Rosa

Rudolph Ahí mismo lo que ves en negrita:

#outer-wrapper {
width: 890px;
background: #fff;
border: 5px solid #ddd;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

Donde 5 es el grosor del marco y #ddd ahi cambias su color

Luixom

oye rosa no se si es correcto preguntarte esto en esta entrada pero esque ya tengo mi plantilla toda bien hecha y mi peor error fue no verla en internet explorer y cuando entro esta todo desordenado el buscador con el boton arriba los titulos de los post no se ven el post footer no se ve la imagen de hasta abajo tampoco se ve e incluso la publicidad de adsense no se ve tampoco no se porque sera pero entro a mi blog en gogle chrome y se ve perfectamente bien tambien en firefox solo el problema es en internet explorer que puedo hacer en esas sircunstancias?

tengo el internet explorer 8

mi blog es:http://tibialaner.blogspot.com/

Rudolph

Muchísimas gracias, ya quedó :) No sé que haría sin tu ayuda Rosa :D

Rosa

Luixom ¿Y que quieres que yo le haga?... no hay un código mágico que al colocarlo arregle eso... se ha de ir diseñando y comprobando los resultados en los dos o tres navegadores más usados... seguro serán varias e incluso muchas cosas las que habrá que corregir...

Ofiseguros

Hola Rosa, he estado mirando tu blog y me parece excelente y las indicaciones son muy faciles de realizar, inclusive para personas como yo que no tenemos idea de programacion.
Quisiera hacerte una consulta de un inconveniente que tengo en mi blog y es que en las entradas y en las columnas laterales lo que coloco queda pegadito al borde, sin margen y se ve super feo, no se si me puedas indicar como arreglarlo, el blog es ofiseguros.blogspot.com
Te agradezco si me puedes colaborar

Rosa

Ofiseguros Localiza esto:

.sidebar .widget, .main .widget {
border-bottom:1px dotted #cccccc;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Y cambia la ultima linea de ese código así:
padding:0 2px 1.5em 2px;

Ten cuidado no borres la ultima llave de cierre } sin querer...

Ornella

Hola!!
Me encanta este blog!
Me ha ayudado mucho en el mio.:P
Me gustaría que lo visites y me des tu opinion en un comentario, si no es mucha molestia:$
Besos

Rosa

Ornella No es por las molestias... sino porque no suelo dar mi opinión sobre el blog de otros... ;)

Globetrotter

Hola!! me ha servido de gran ayuda tu blog a la hora de personalizar el mío, pero te quería hacer una pregunta, ya veo que has puesto que limitemos el uso de los gifs, aunque yo en mi blog tengo uno en cada inicio de la entrada porque me parece una manera simpática de relacionar el gif con el tema de la entrada, el caso es que ahora estoy cambiando de plantilla y la nueva tiene un fondo lila, y cuando veo los gifs salen con el fondo blanco, no sé si hay alguna manera de arreglar esto en el HTML, mi blog es http://livingtotravel.blogspot.com, ahora el que está es el viejo...

gracias y saludos!!

Rosa

Globetrotter No veo los gifs, así que no se como los has subido a la entrada, normalmente sucede eso que dices si los subes directamente desde Blogger como cualquier otra imagen. Para los gifs lo mejor es añadirlos desde el alojamiento en el que están mediante su url.

Globetrotter

hola!! gracias por tu rápida respuesta, perdona te he dejado la página principal y hay no hay gifs, te dejo esta:

http://livingtotravel.blogspot.com/2009/07/riviera-maya-ii.html

como hago para subirlos desde su alojamiento como me comentas??

Gracias de nuevo!!

Rosa

Globetrotter Pues subiendo la imagen a algún servicio de alojamiento que admita gifs... fothobucket, imageshack, etc. y usando la url que te dan allí en la entrada, como cuando enlazas cualquier imagen:
<img src="url de la imagen aqui"/>

Globetrotter

Hola rosa!

Pues he probado de subirlas a imageshack y me pasa lo mismo... no hay manera de quitarle el fondo blanco...

No habrá alguna manera de modificar el HTML para que esto no ocurra?

Gracias de nuevo

Rosa

Globetrotter No, que yo sepa.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S