28 Nov Cómo crear esos diseños minimal que nos gustan
Vas a estar de acuerdo conmigo en que hay una serie características gráficas que reunen los que podríamos llamar blogs “estilosos”. Vamos a ver cómo crear diseños minimal en blogs.
Empecemos por…
Espacio blanco.
Siempre ha sido un valor pero hace unas temporadas además es tendencia: fondos blancos, cabeceras blancas, espacio blanco alrededor de todo.
No solo nuestro blog o web se va a ver más limpio y ordenado, vas a tener mucho menos trabajo: no hay que coordinar estampados o grandes zonas coloridas.
Así que menos faena. Mejor, ¿no?.
Textos negros.
Después de mucho tiempo con miedo al negro, que regresara era cuestión de minutos. Y es que el contraste con el blanco lo hace elegante y directo. Si acertamos con el tamaño y la tipografía le vamos a dar un punto de interés. Hay algo intrínseco en un texto negro bien colocado, que hace que parezca más interesante. ¿Una tontería? puede ser pero si a tí también te pasa guíate por esa intuición.
Tipografías con serif.
O con palitos rematando las letras. Son lo contrario de las tipografias de palo (sans serif). Son del tipo Times o Georgia. Cuando empezó internet, los primeros diseñadores gráficos que venían del diseño impreso, quisieron emularlo y usaron en los textos digitales las tipografíaas con serif, las favoritas de los libros de verdad. Entonces llegaron argumentos como que era ilegible y que leer en pantalla era más sencillo con tipos de palo. Y se adoptó de manera general en webs y blogs.
Pues últimamente se está revertiendo la tendencia en algunas webs, como Medium, dedicadas precisamente a la lectura. ¿Qué te parece? A mi me encanta, y en mi nueva web quiero que esté así.
Fotografías.
¿Qué puedo decirte que no haya escrito ya sobre como tener fotos en condiciones en tu blog? Puedes leer sobre ello en No más fotos borrosas en tu blog y en Mima esas fotos y también descargarte gratis esta imagen-guía para no perderte en el proceso de acondicionar tus fotos para subirlas al blog.
Pero me gustaría repetir algo que por sencillo y efectivo merece aparecer aquí: deja espacio arriba y abajo de tus fotos.
Cuando estés escribiendo un post y pongas una foto entre el texto, da unos golpes de tabulador antes y después de ella. Sé generosa, el efecto es mucho más bonito. Y es que tiene todo el sentido: ¿cómo te gustan más los enmarques de láminas o imagenes?¿con el marco pegado o con paspartout?
La cabecera más simple.
Vamos a seguir por el camino fácil y efectivo. Pon el nombre de tu blog o tu logo simplemente en la cabecera, dale espacio arriba y abajo de forma que lo veas proporcionado (léase: agradable a la vista). Y nada más. Atrévete.
Note to Self Bessoted Garance Doré
Los iconos sociales sencillos
Ahora los verás muy minimals y posiblemente… negros.
Ese sidebar rebelde.
Hay que meterse a arreglarlo cual cambio de temporada de un armario: sin piedad.
Quita
- Banners que ya no sirven para nada pero ahí se han quedado a vivir
- Banners que te sirven para poco.
- Banners o logos feos de intercambio con otros blogs.
- Widgets o gadgets de utilidad poco clara como archivo de entradas (a no ser que para tí tengan sentido).
- Widgets sociales llenos de cabecitas. Fijate bien en cómo hacerlo, porque existen las versiones de estos widgets sin cabecitas. Si tu sidebar esta ordenadito puede que no lo estropée del todo. Pero como tu sidebar esté desastrado esto es ya la puntilla.
Deja (y en este orden)- Una imagen tuya -si quieres- con un textito debajo como presentación. (Sí: ya se que yo no lo tengo pero es algo que ahora tengo claro para el nuevo).
- Iconos sociales minimal.
- Tres, cuatro, cinco banners -los que necesites- que llevan a tus apartados principales, que tengan el mismo diseño, y que cambie solo el texto o la imagen que llevan. Para Creative Market hice un kit muy chulo de banners a juego y en esta línea. Echa un ojo a las imágenes que lleva.
- Ponlos juntos y agrupados, para que compongan un grupo que visualmente se perciba como un bloquecito.
The Effortless Chic The Love List
Si necesitas enlazar a más sitios, te sugiero crear otro bloque de banners. pero esta vez, cambia y simplemente escribe los nombres, como en el ejemplo: visualmente es más atractivo. Vuelve a ponerlos juntos para que haga bloquecito y a la vista quede más ordenado.
- Banners enlazando con el exterior Si no tienes más remedio que ponerlos, o tienes espacios publicitarios, piensa en un formato adecuado y pidde a tus anunciantes que te pasen sus banners a ese tamaño. Si los pones de esa forma al menos habrás ganado en orden.
- Bloquecitos.Me has oido hablar de bloquecitos todo el rato; distribuir los elementos del sidebar en bloques es lo hace que se perciba de forma ordenada. Por tanto el tema de la separación entre elementos es clave.
Y desafortunadamente, los paneles de control de los blogs no nos suelen facilitar la manera de controlar los espacios entre widgets (WordPress) o gadgets (Blogger) de sidebar. Solo si sabes CSS puedes controlarlo. Entonces ¿qué se puede hacer?Este es mi truco para conseguir los espacios que necesites para tu sidebar.
Crea el banner pero añade el espacio que necesites tambien en la imagen.
Es decir:
Solo hay y un problema: el blog por defecto deja un espacio entre todos los elementos del sidebar y sumar ese espacio al que hayamos puesto “artificialmente” puede ser excesivo.
Truco de truco para arreglar espacios.
Ir a donde se ponga el CSS en tu blog y pegar el código con la orden de que quite todos los espacios entre elementos del sidebar.
En Blogger es en Diseño > Plantilla > Personalizar > Avanzado > Añadir Css
En WordPress es en Escritorio > Apariencia > Ediatr CSS. O mira si tu plantilla te da un sitio especial para poner CSS añadido.Prueba a copiar este código y comprueba si se eliminan los espacios que separan los widgets.
En Blogger
.widget {
margin: 0;
}
En WordPress
.sidebar .widget {
margin: 0;
}
Ya sin espacios en el sidebar el truco de añadir un banner con su espacio dentro de la imagen va estupendamente.
Ya puedes entender porque el tema del orden en el sidebar es un hueso duro de roer.
Una organización profesional del sidebar de un blog pasa por ir un poco (más bien bastante) más allá de lo que te da la plantilla. Hay que tener un plan (los bloquecitos) y, o tocar donde no te dejan (CSS) o trucar esa limitación (utilizar fotos con espacios en blanco añadidos).
Nada que te puedas sacar de la manga espontáneamente.
El footer.
No te lo voy a negar: el footer es una de las cosas que a mí más me cuesta hacer, así que bienvenido minimalismo.
Si el footer puede llevar tan solo dos o tres elementos centrados, será ideal.
Por ejemplo: - logo
- dos o tres textos enlazados (como politicas y contacto)
- copyright
- Puede llevar fondo macizo negro y texto blanco o ser texto negro sobre blanco pero separando con una linea negra.
Por cierto, después de leer esto… ¡cómo me está agobiando mi blog! ¡qué abigarrado lo veo!
Llevo mas de dos meses trabajando en paralelo para rediseñarlo, pero qué poco me cunde…
Un día de estos lo termino.
Apúntate a Meisi Club.
Diseño cada día por 10/€ mes
Meisi Club es un servicio de suscripción mensual en el que podrás acceder a videotutoriales y podrás permanecer el tiempo que quieras.
13 Comments