3 de agosto de 2012

Tips de Diseño

Para el tip de diseño de hoy le pedimos ayuda a Maira de blog Adorable, ya que ella es toda una experta y tiene un blog... adorable...


Estoy bastante segura de que alguna vez les dijeron “No juzgues un libro por su portada” pero todas sabemos que nadie sigue ese consejo, más de una vez dejamos de comprar uno porque la portada era horrible y probablemente nos perdimos una buena lectura. Lo mismo puede aplicarse a los blogs, sé que las seguidoras de Blad apreciamos el buen diseño, y muchas veces me lamenté al ver blogs con contenidos fantásticos y con mucho potencial pero que su imagen no los acompañaba para nada.

La primera impresión es la que cuenta y solo tenemos una oportunidad para causar una buena impresión ante los nuevos visitantes, para que tengan ganas de volver y quedarse, ofrecer un buen diseño también es un mimo para nosotras y para nuestros lectores asiduos, así que hoy estoy aquí compartiendo algunos tips.

Tomen nota.

1- UNIFICAR.
En la actualidad, la mayoría de los bloggers usan varias redes sociales para compartir el contenido de sus blogs y estar en contacto con sus lectores, por eso una buena idea es unificar las diferentes redes tratando de usar el mismo avatar/imagen de perfil en todas, incluyendo el perfil del blog y correo electrónico, en Twitter podés usar el mismo fondo que en el blog y en el cover de Facebook Timeline podés usar la imagen de la cabecera de tu blog, adaptando su tamaño (850px x 350px), con eso estarás reforzando la imagen integral de tu blog (que también es una marca) y creando una identidad. Miren este ejemplo clarísimo, Paula de Terribly Nice ha integrado muy bien el diseño de su Facebook y su Twitter con su blog.

2- CABECERA.
La cabecera (header) es lo primero que los visitantes ven cuando llegan a tu blog y puede ser un elemento decisivo en el diseño, por lo tanto debe ser fantástica. Sé consciente de lo que querés comunicar y tratá de hacerlo a través de este elemento importantísimo. Lo ideal es que no supere los 250px de alto. Aquí hay algunos ejemplos geniales para inspirarse:








































3- COLOR.
Elegir bien los colores es muy importante. El fondo de tus posts debe ser de un color claro para que los textos se puedan leer con facilidad. Mi recomendación es no usar más de tres colores, podés combinarlos en los elementos de diseño como la cabecera, los títulos de la sidebar, los íconos de redes sociales, etc. y dentro de los textos, usar uno para los títulos, uno para el texto y otro para los links.

Una herramienta muy útil para elegir paletas de colores es Color Scheme Generator.

4- TIPOGRAFÍAS.
Una buena utilización de las mismas puede mejorar muchísimo un diseño, hay toneladas de fuentes gratuitas muy lindas que podés usar para la cabecera, títulos de la sidebar e incluso para añadir a las imágenes que acompañan a tus posts. Font Squirrel es, para mí, la mejor opción a la hora de descargar fuentes gratuitas por que tienen una selección muy cuidada. También podés cambiar las fuentes del título y el cuerpo de los posts añadiendo Google Webfonts, acá te enseño como hacerlo.

5- SIDEBAR.

Uno de los errores más comunes en cuanto a diseño es llenar la sidebar de gadgets e imágenes que solo le dan un aspecto desordenado al blog. Lo mejor que podés hacer es editar y mantener solo lo indispensable, dejá el traductor solo si tenés una buena cantidad de lectores extranjeros, ordená las etiquetas alfabéticamente, quitá las que estén duplicadas y agrupá las que toquen temas similares, si te gusta desplegar los premios que se suelen dar entre bloggers mi consejo es que crees una página específicamente para ellos ya que muchas veces los diseños de un banner y otro no tienen nada que ver entre sí, ni con tu blog, lo mismo podés hacer con la lista de tu blogroll, muchas veces es infinita, aquí Eli te muestra en su blog como acortarla.

Podés ver algunos ejemplos de sidebars con una buena cantidad de información pero estéticamente cuidadas y bien organizadas en estos blogs: Susannah Conway | Bake At 360  | A Blog Named Scout  | Elements of Style .

6- FOOTER.
El footer es un espacio ampliamente desperdiciado en la mayoría de los blogs, lo más común es colocar los créditos del blog, es decir el copyright, quien es el autor y quien lo diseñó. También podés colocar los mismos enlaces de tu menú para que cuando se llegue abajo de todo no haya que volver hasta arriba si se quiere ver una página en particular, podés agregar los enlaces a tus redes sociales o un mensaje de agradecimiento a tus visitantes. No te olvides de coordinar el diseño con el resto del blog. Aquí podés ver algunos ejemplos de como aprovechar este espacio:





7- ENSANCHATE
Hoy en día la mayoría de las personas tienen monitores en formato widescreen lo que nos permite diseñar blogs y webs más anchos. Imagínense como se ve un blog que tiene un ancho total de 700px (un claro ejemplo es la plantilla Mínima) en un monitor moderno, perdido en el medio de la nada. Es una lástima que muchos desperdicien un espacio valioso que podría aprovecharse, por ejemplo, para lograr un mayor impacto con las fotografías, especialmente cuando parte de nuestro contenido tiene mucho que ver con el diseño, los detalles y lo estético. ¿No te pasa que a veces encontrás un buen DIY o unas fotos de un departamento divino y tenés que achinar los ojos para poder apreciar los detalles porque las fotos son minúsculas? Estoy bastante segura de que el 99% de los blogs que son referentes en el mundo del diseño sacan un gran provecho de las dimensiones de sus posts. En mi opinión, un ancho total de 1000px para todo el blog, un ancho para los posts de 650px y un ancho para la sidebar de 300px son buenos números para tener como guía.

8- ESPACIO NEGATIVO
Cuando me refiero a espacio negativo, me refiero a todo el espacio que queda intacto, sin ningún tipo de diseño. En cualquier diseño, el espacio negativo es tan importante como el espacio positivo, crea armonía, balance, le da fuerza al diseño y le da al lector un lugar donde descansar la vista. Por ejemplo, observá el espacio negativo que hay entre estas líneas, te imaginaras que si no estuviera presente sería imposible leer, no?

Así que no te olvides de dejar algunas zonas de tu blog libres de imágenes y textos, de dejar espacio entre un post y otro y entre los gadgets de la sidebar.

Blad es un muy buen ejemplo de como funciona esto.

9- ALINEADO
Otro detalle a tener en cuenta es la alineación de todos los elementos del blog, desde los títulos de los posts y el texto de los mismos hasta los títulos de la sidebar e imágenes.

Personalmente, me gusta que el texto de los posts esté alineado a la izquierda o justificado, el texto centrado puede funcionar en los títulos o si se trata de una poesía o una cita. ¿Alguna vez viste un artículo en una revista, diario o incluso un libro donde el texto esté centrado? Yo no y estoy segura de que hay una buena razón para eso.

10- CONSISTENCIA
Tener consistencia en el diseño puede ser difícil pero se puede lograr, por ejemplo, si usás una foto como parte de la cabecera de tu blog, no uses ilustraciones en la sidebar, si elegiste un estilo shabby chic no uses una tipografía moderna, si por el contrario te decidiste por un diseño moderno y minimalista no uses elementos de estilo vintage como parte de tu diseño.

Ok, si llegaste hasta el final de este post, aplauso, medalla y beso!

Espero que puedas sacar provecho de estos tips, te invito a visitar mi blog donde podrás encontrar más información. Un enorme gracias a Marce y Mars por invitarme a contribuir en este maravilloso espacio!

25 comentarios:

  1. Gracias Maira! Tus consejos, tanto estos como desde tu blog, son siempre excelentes!

    ResponderEliminar
  2. Muy buenos consejos, gracias por compartirlos!

    ResponderEliminar
  3. El blog de Maira es increible y tiene siempre unos consejos buenisimos, al igual que estos. Gracias Maira por compartirlos!

    ResponderEliminar
  4. Maira impecable como siempre!!! este post es para leer y releer!!!

    Buen fin de semana!
    Besos

    ResponderEliminar
  5. graciassss!!!! buenisimos consejos!!!! besos en este día gris!!!!

    ResponderEliminar
  6. Gracias! buenísimo! Les dejo acá un link del tamaño de todas las imágenes para redes sociales, muy útil a la hora de subir cosas a Facebook, Twitter, etc http://geeksroom.com/2012/07/guia-completa-con-todas-las-medidas-de-imagenes-de-la-social-media/64511/

    ResponderEliminar
  7. Gracias por participar en blad Maira! impecable como siempre!!
    besos!!!

    ResponderEliminar
  8. Como siempre, estoy feliz de contribuir desde mi lugar en este mundo de los blogs, gracias a todas por sus lindas palabras!

    ResponderEliminar
  9. Gracias chicas!!!!Mai sos una IDOLA!!!

    ResponderEliminar
  10. Gracias por estos consejos. Amo el blog de Maira, soy una fiel seguidora (se convirtió en uno de mis preferidos), por su estética, su prolijidad, su simpleza y su claridad! Felicitaciones :)
    Nati

    ResponderEliminar
  11. estos consejos de maira valen oro!! genia total!
    besos

    ResponderEliminar
  12. muy buen post! Descubri hace poco a Maira, y su blog me tiene enamorada!

    ResponderEliminar
  13. Como siempre, impecable Maira! Gracias!

    ResponderEliminar
  14. buenísimo, muchas gracias por la generosidad, y el blog "adorable" es un placer de mirar, hace bien! :)

    ResponderEliminar
  15. Genial!!! Unos consejos buenísimos.....como siempre!!!

    ResponderEliminar
  16. Muy buena la imformación chicas!!! tengo mucho por aprender!
    Gracias!

    ResponderEliminar
  17. Una genia Maira! Ya voy a implementar algunos de sus consejos.
    Gracias!

    ResponderEliminar
  18. Excelente, como todo lo que hacer Maira, sos una GENIA!!!

    ResponderEliminar
  19. Me encantan estos consejos porque son fáciles de seguir y con ellos consigues que tu blog sea más personal.

    ResponderEliminar
  20. Aplausos,Maira!!!!(cuantas cosas tengo que cambiar...!!)

    ResponderEliminar
  21. Muchas gracias!! Soy nueva en el ambiente, y me vienen genial todos los consejos!!!

    aplausos, para uds!!
    Bess

    ResponderEliminar
  22. Fantásticos consejos. Me sirven para refrescar conceptos y conocer algunos que no había tenido en cuenta. Gracias.

    ResponderEliminar