CSS Drop Down Menu by PureCSSMenu.com

jueves, 16 de abril de 2015

Tipografía y colores


Sigo trabajando para mejorar el blog con la iniciativa de Aprende & Comparte; hoy toca la tipografía y los colores.

Creo recordar que empece el blog usando Calligraffiti pero tras un tiempo me dí cuenta que no era muy legible y cambié a otra que ahora no recuerdo; pero tras leer el post de Minerva (colaboradora en la iniciativa); volví a cambiarla a la actual: Cuprum; aunque mantengo Calligraffiti para el titulo de los post; Arial para la fecha; Georgia para el texto de los gatgets.

Otra cosita importante de la que hablan Roinmar y Minerva es el tamaño; no debe ser grande ni pequeña; pues en ambos casos dificulta la lectura; y esto es lo que me ocurría. Veréis, la percepción del tamaño de la letra varía si lees desde un portátil; un ordenador de sobre mesa; una tablet,... yo uso un portátil y para mí estaba bien; el tamaño de letra que usaba y además aplicar la negrita, hasta que Minerva revisó mi blog y me dijo que era muy grande y que al negrita difuminaba las letras; por lo que cambié esto también; ahora uso tamaño 16 pxl y mantengo la negrita.

En cuanto a la paleta de colores; ¿qué decir? Creo que he saltado de un extremo a otro; creo recordar que empece con un fondo negro y las letras blancas; luego pasé a un azúl en la cabecera y el resto blanco; después probé con los tonos pastel; y cómo podéis comprobar, finalmente me de decantado por el blanco; a parte de que me parece más limpio, creo es lo más sencillo para la lectura. He probado a poner un fondo azulado porque me parecía algo soso usar todo blanco; pero espero los consejos de Roinmar cuando lo vea ;) La cabecera también la he cambiado un par de veces; la ultima; la que veis, yo creo que no desentona, ¿qué os parece?

Sé que últimamente tengo el blog un poco abandonado, pero tengo un buen motivo; me he mudado a ... ¡ EEUU ! He empezado en Seattle como Au Pair el día 6 y esta siendo todo un poco locura hasta que me acople;asique pido disculpas y espero volver a estar a total rendimiento en breves.

16 comentarios:

  1. Hola, me he puesto a navegar por tu blog para conocerlo un poco más y me encontré el post de las 15000 visitas (en diciembre) vaya cambio de look que has dado!! y los avances muy bien, felicitaciones!! particularmente y considerando que estas en proceso de cambio solo te dejaría algunos comentarios: los menús tienen fuentes muy grandes que lo hacen ver pesados, creo que el marco negro para los gadgets los hacen ver un poco toscos y en el caso del sidebar no queda muy bien los marcos dentro de otros marcos, probaría si no es quitar los marcos negros por lo menos bajarle a un tono de gris. En líneas generales creo que los colores que has elegido son agradables pero habría que jugar un poco con tonalidades. Espero haber contribuido, y hasta la próxima actividad.

    ResponderEliminar
    Respuestas
    1. Gracias por las felicitaciones y por los consejos; soy un poco lerdi lerdi en tema de colores; así que toda ayuda es bienvenida. Puse los cuadros negros porque me dijeron que era un poco difícil diferenciar la barra lateral del contenido principal.
      Siento no extenderme más con mi respuesta pero ahora mismo tengo un bebé con hambre ;)
      Por favor; pásate cuando quieras, tus consejos siempre serán bien recibidos.

      MUAKS

      Eliminar
  2. Hola Cris, primero darte la enhorabuena por tu cambio de vida, por que irte a vivir a EEUU no es como irte a Valencia, yo que se, ya me entiendes; así que me alegro por ti es un paso gigante y espero que todo te salga muy bien.

    Ahora vamos con la actividad, que parece que con cada una de ellas, la cosa va bien ¿no?

    Estoy totalmente de acuerdo con Karina, de Mamá&nené en que los marcos negros a cada cosa que hay en tu blog (entradas, pie de pagina, widgets,etc) no le favorecen en nada, incluido los recuadros del menú, prueba a bajarles la intensidad a ver que tal.

    En el caso de el menú si que la tipografía es muy grande, bájale un poco a los pixeles y yo que tu en vez de separar las palabras con barra(/) lo haría con guiones (-), prueba si quieres.Tampoco queda bien que cada uno este dentro de un marco.

    La tipografía, ¿crees que necesitas 4 tipografías para delimitar zonas?, creo que si eliges dos y las combinas todo quedara más coherente y armonioso. La negrita, es una opción que sirve para marcar referencias importantes en el post, lo cual ayuda a Google a saber de que va el post y posicionar mejor o peor, en comparación con el resto de los blogs que ofrezcan la misma información...si la usas para todo el post, es como si no estuvieses usando esa opción o peor.

    Los colores, ¿tienes unos colores definidos o vas alternando como te parece? veo azul, negro , morado y blanco..el primero de ellos en varias tonalidades....céntrate en tres, por ejemplo negro, blanco y morado. Ademas puedes jugar con la intensidad del último, pero no dos tonos, no 4-5 por ejemplo.

    El fondo lo dejaría blanco, no me agrada ese fondo azul, pero a gustos tampoco hagas todo lo que yo diga, a ver que dicen tus seguidores. La cabecera, no se si con el fondo blanco me convencería de momento con este fondo creo que no encaja.

    Prueba a definir primero los colores, incluido el cogido html de los mismos, para que siempre uses los mismos tonos, y luego ve probando.

    Cristina, todas estas son criticas constructivas ok. Pero luego cada cual tiene sus gustos. a ver que dice Minerva que estamos en su terreno y vemos!!

    Besos!!

    ResponderEliminar
    Respuestas
    1. Mil gracias por los consejos Roinmar; por supuesto que me consta que son todos constructivos para ayudarme a mejorar; nunca me a ofender pues soy consciente que si no me lo dices no aprendo.
      No sé cómo incluir el HTML de los colores :o
      He cambiado ya la tipografía a dos: Arial y Calibri. El problema de la barra de menú es que la creé con un programa on-line que para modificarla necesito crearla desde 0; intentaré enredar en el HTML para cambiarla y si no me tocará hacerla de nuevo.
      He puesto el fondo azulito porque me parecía sosillo todo blanco; aunque es verdad que queda más limpio; a ver qué me dice Monerva y voy probando; igual que la cabecera.

      UN MUAKS

      Eliminar
  3. Hola Cristina!
    Te comento un poco las cosas que creo que se pueden mejorar. Lo primero: no usar negritas. Apenas hay tipos normales, hasta los comentarios salen en negrita! Como dice Roinmar la negrita se hace para destacar elementos, si todo está destacado, ¿qué haras para marcar algo importante? Segundo:reducir el número de tipografías. Yo no usaría Cuprum, no me parece bien diseñada (fíjate en la ñ) y es una fuente muy estrecha y pesada para utilizarla en el cuerpo de texto. Yo utilizaría Arial, que ya tienes en la fecha. Calligraffiti tampoco me gusta, creo que puedes encontrar caligráficas con mayor grosor y mejor diseñadas. Y los títulos de los gadgets los tienes en Averia Gruesa Libre, que vuelve a ser una tipo muy gruesa y parecida a cuprum. La barra de menú parece carente de "estilo" ¿era éste el aspecto que tenía cuando la generaste? Es un problema que puede afectar a la usabilidad, al pasar el ratón cambia repentinamente de estilo y eso marea. Además es demasiado grande, compite con el título y sale ganando en importancia.

    La paleta de color debería definirse más. Si deseas un tono azul pálido puedes ponerlo pero sólido, la imagen de fondo no te está aportando nada.Piensa que la tendencia actual son blogs muy minimalistas, de fondo blanco y elementos sin efectos realistas (como el de la flecha de subir). Si el blanco te parece soso pon un fondo de una textura clara como el de tu cabecera, aunque que casen las dos ya es otro cantar.

    El color azul de la cabecera es un color saturado, propio de un monitor, y no se integra bien con la imagen más handmade del resto de la cabecera. Inspírate en el color de los iconos de RSSS que están más en armonía con el resto. Tienes tres morados ligeramente diferentes, unifícalos (has de apuntar el código hexadecimal).

    Y por último, el ancho del blog es un poco ancho para utilizar el widget de redes sociales de ña izquierda, en un monitor de 1024px flotará sobre el texto y entorpecerá la lectura.

    En cuanto al color

    ResponderEliminar
  4. Bueno, y aparte de todo ésto el diseño va mejorando que es lo importante! Poco a poco y sin agobiarse, prima la legibilidad y la sencillez!

    ResponderEliminar
  5. Uy, retiro lo de los elementos cambiantes del menú ahora no se me cambia, pero revisa el estilo, el doble borde le da aspecto de tabla, la tipo grande...es como si entraras en una web de hace quince años!!

    ResponderEliminar
    Respuestas
    1. Madre mía de mi vida y de mi corazón; a poco me compensa comenzar el blog desde 0 jajaja; intentaré cumplir todos los cambios aunque tengo escaso tiempo con un nuevo bichito en mi vida; pero prometo intentarlo. MIL gracias Minerva

      Eliminar
  6. Genial todos los consejos que te deja Minerva, Cris.

    Creo que te aporta ideas que debes aprovechar....piensa en lo que te dije de el banner de publicidad entre la cabecera y el menú; si te aporta grandes beneficios genial, pero si no, mejor muevele de sitio por que hace feo y estorba.

    Cambia el menú por algo más simple, el fondo del blog (este), esta muy bien pero no concuerda con la cabecera...intenta dejar el título y la imagen encima del mismo fondo, seguro queda mejor.

    También estoy de acuerdo con Minerva en que debes establecer los colores con los códigos, para que no mezcles tonos del mismo color, creo haberlo dicho en el anterior comentario...por lo demás va mejorando Cris así que tranquila y que opinen el resto a ver que les parece!!!

    ResponderEliminar
    Respuestas
    1. Gracias Roinmar; como ya tengo el titulo con el fondo transparante voy a cambiarlo ahora mismo y me dices si está mejor ^_^

      Eliminar
  7. Hola, Cris!
    Aunque estoy de acuerdo en que la tendencia actual es la de los blogs más minimalistas, también es bien cierto que el blog ha de ser un reflejo de la personalidad de quien lo escribe, así que debe gustar a tus lectores pero también debe contarnos cosas de ti, de cómo eres y de lo que te gusta. Respetando tus gustos personales, y viendo la temática que tratas y lo joven que eres, yo hacía una renovación del "feng shui" y lo ponía todo patas arriba y empezaba a experimentar, a ver qué sale, transformando unas cosas y conservando otras. Por ejemplo, la barra negra no te pega nada, tú desprendes mucho más optimismo! Eso sí, ármate de paciencia y poco a poco, no te me vayas a agobiar, ¿eh? Un besoo!

    ResponderEliminar
    Respuestas
    1. Mil gracias Fina; realmente eres un amor. Pero el mayor objetivo de este blog es que sea de utilidad para aquellos que de una forma u otra tratan con muchos por lo que aunque refleje mi personalidad; creo que prima la legibilidad y accesibilidad del mismo para cumplir este objetivo.
      No dejes de venir por aquí y darme tu opinión siempre que quieras.

      Un abrazo!

      Eliminar
  8. ¡ Hola! estuve navegando por tu blog y me gusta, es un reflejo de ti que es lo más importante porque es tu blog. En general me gusta excepto la barra de arriba en negro , cámbiala de color por otra que no te pega nada, y con paciencia, y sabes, a mí me faltan un montón de cosas pero bueno...poco a poco
    besotes|

    ResponderEliminar
    Respuestas
    1. Muchas gracias Aida; la barra ya esta cambiada al mismo color de azul que los titulos ^_^; seguro que no te falta tanto mucho; ahora me paso por el tuyo a echar un ojillo.
      ¡ Un abrazo !

      Eliminar
  9. Hola Cris, me parece que has seguido a la perfección los consejos que nos dieron en esta actividad, me encanta el cambio que le has dado al blog, genial!! Besos

    ResponderEliminar
    Respuestas
    1. ¡ Muchas gracias Teresa ! Espero que las teachers pienses igual ^_^

      Eliminar