Tips/Ideas - Edita títulos estilo "Minimalista" + Efecto title-post 4 sombras

Hola hola hola! Extrañaba ya pasar por aquí, aunque ya me organice, estudios por la mañana & horas libre por la tarde! Eso si, hasta que comience a cursar otra vez... (´；ω；｀)

Cuando tenia el diseño anterior al anterior(?, el que parecía tener un bonito aspecto a verano, me preguntaron varias veces como editar los títulos del blog, de los gadget & la fecha de los post con el "estilo" simple que usaba.

Bien, esa sencillez o mejor dicho, la mínima utilización de detalles, es el estilo minimalista. El minimalismo lo podemos ver en varios lugares, tenemos el diseño gráfico minimalista, el diseño interior, la música, el arte etc. etc. etc., pero... que es ¿?

MINIMALISMO:

El término minimalista, en su ámbito más general, se refiere a cualquier cosa que haya sido reducida a lo esencial, despojada de elementos sobrantes. Es la tendencia a reducir a lo esencial.

De aquí surge lo simple, lo sencillo, solo utilizar los detalles esenciales y nada mas, donde la idea es que estos sean originales, es decir, sean esos detalles fundamentales que le den "lo llamativo" que buscamos en un diseño.

Así, que aquí les voy a (mas o menos, según mi opinión) guiar como editar los títulos basándonos en las características esenciales.

Fuentes.

Lo primero & principal que debemos tener en cuenta, es el tipo de letra que utilizaremos. Aquí podemos elegir una variedad de estilos siempre y cuando tengan un trazo sencillo, delicado o elegante; con esto me refiero a que no podemos (si queremos este estilo) utilizar estilos de letras muy complejos o exagerados, ya que cambiaría completamente el significado de minimal.

Principalmente las fuentes que suelo utilizar (que se encuentran en el Diseñador de plantillas de Blogger) son Open Sans, Oswald o las de la familia PT Sans, aunque también puedes optar por Josefin Sans o Slab si buscas algo mas femenino:

Si ademas buscas un diseño minimalista, la familia Open Sans es una de las indicadas tanto para titulos como para la misma fuente de las entradas o gadgets!
Como veran, las que siempre utilizo son estilos rectos, precisos, pero esto no quita que no podamos utilizar letras manuscritas o italic; en mi opinión le dan un toque mas elegante las letras inclinadas y en manuscrita, ya que dan la sensación de estar escrito a mano. En este caso, no hay muchas cursivas en el diseñador, pero yo recomiendo de alli solamente Pacifico, ya que es delicada y precisa.
Ademas del diseñador, si ninguna te convence, siempre puedes buscar en Google Fonts, solo sigue este tutorial: Letra original en el title-post.

Colores.

Esta es una de las partes que mas me gusta de diseñar, realmente no se que haria si no existieran los colores.
Primero que nada hay que tener en cuenta que el color negro o blanco en un estilo minimalista siempre queda bien, pero esto no descarta a ningun color, & repito, a ninguno. Solo hay que saber combinar.

Para esto, primero que nada, debes tener ya tu diseño con una paleta de colores fija, sin ninguno de mas, ni ninguno que falte. La mayoria de las veces es mejor utilizar pocos colores para no terminar teniendo un caleidoscopio de diseño, pero hay veces que es necesario recurrir hasta 5 colores distintos para lograr lo que buscamos.

Con tres colores, para el titulo nos alcanza: el fondo, la letra & los detalles. El color de fondo siempre (o casi siempre) es blanco (#FFFFFF) o tonalidades muy claras de gris, así como lo son #FEFEFE, #FAFAFA, #F9F9F9, #F3F3F3, #EEEEEE:

Igual, si quieres arriesgarte a mas, puedes utilizar otros colores, tonalidades mas llamativas, pero siempre trata de que sean opacas o con poca saturacion, sino seria complicado de leer.

Lo que buscamos es comprensión y estilo a la hora de los colores.

Si colocas u fondo muy oscuro, NO coloques las fuente con un color muy claro, sino que el mismo color o similar un poco mas claro, así no seria molesto a la vista, estarían los colores combinados & logramos los simple.

Cuando utilices una paleta de colores para un estilo como este, trata de que los colores estén en armonía, busca que los colores se comuniquen unos con otros, puedes buscar varias en ColourLovers, aquí te dejo algunos ejemplos:

Bordes/Formas

Llegamos a los detalles! Aquí que podemos hacer ¿? Simplemente lo menos posible, ya que lo que queremos es que se note la ausencia de todo pero a la vez esto mismo sea lo que llame la atención.
Con los colores ya estaría, pero hay veces que no es suficiente, no queremos que el resultado quede vacío, sino que queremos que quede sencillo pero completo.

Lo que mas suelo utilizar yo, son los bordes, los bordes grandes, gruesos & siempre de colores. Si utilizo algún borde fino, es siempre de "1px" de tamaño & es claro si usamos el estilo dashed o de color llamativo si usamos el estilo solid. (Aprende los bordes CSS)
Pero el punto no esta solo en el tipo de borde que apliquemos, sino como & donde lo apliquemos; como sabrán & seguro vieron en mis diseños, que siempre coloco los bordes gruesos solo en los costados & uno solo, es decir solo aplico por ejemplo:

border-left: 20px solid #eee;

ni mas ni menos.
El objetivo es buscar la originalidad, el grosor y lugar ubicado; experimenta!

Formas ¿? Si, nunca utilizaste el famoso "border-radius" ¿?
Muchas veces nos gusta la idea que todo se vea con pequeñas o grandes curvas en vez de puntas, aunque lo minimalista suele ser todo completamente cuadrado, recto, nadie nos prohíbe probar, inventar, o como dije anteriormente experimentar; mientras todavía exista la ausencia de lo innecesario, sigue siendo minimal.

Igualmente, te recomiendo, que cuando apliques las puntas redondeadas, no te emociones & tengas mucho cuidado en cuanto redondeas! & recuerda de buscar lo original, no hay necesidad de redondear todas las puntas iguales; combina! Si, así como los colores!

Otra de las cosas que yo considero como indispensable en este estilo es el espacio (padding) de la "caja" que contiene al titulo, es decir todo el fondo; yo suelo colocarle o un espacio importante o directamente nada.

Y los efectos hovers ¿?

No suelo (yo, esto es en mi caso) aplicar efectos al pasar el cursor mas que el cambio de color en la letra del header ya que es un link & cambia por eso mismo (porque el los links tienen ese efecto), pero creo que si creamos un efecto simple, pero llamativo, lograremos cosas mas que originales!

La idea esta en que si tendrá un efecto al pasar el cursor, el diseño mismo del titulo en este caso, debe ser mas simple de lo que buscamos, así todo cae sobre el efecto mismo, es decir, lo esencial seria el efecto hover.

En este caso les dejo un ejemplo, un estilo hover con juegos de sombra:

VISTA PREVIA

Nos dirigimos a Plantilla/Edición HTML/Buscamos (CTRL + F) la siguiente linea:

]]></b:skin>

ARRIBA de ella pegamos lo siguiente:

h3.post-title {
    background: #f7f7f7; /* COLOR DE FONDO */
    text-transform: uppercase;
    padding: 10px 10px 10px 60px; /* ESPACIO */
    transition-duration: .80s;
    -webkit-transition-duration: .80s;
    -moz-transition-duration: .80s;
    -o-transition-duration: .80s;
    -ms-transition-duration: .80s;
    box-shadow: inset -10px 0px 0px #E8CBCA, inset -20px 0px 0px #D6A7BA, inset -30px 0px 0px #B391B5, inset -40px 0px 0px #7E809E;
    border-right: 10px solid #fafafa; /* BORDE DERECHO */
}
h3.post-title:hover {
    box-shadow: inset 10px 0px 0px #E8CBCA, inset 20px 0px 0px #D6A7BA, inset 30px 0px 0px #B391B5, inset -1500px 0px 0px #7E809E;
    color: #eee;
    border-right: 10px solid #eee; /* BORDER DERECHO HOVER */
}

(Lo que se encuentra en negrita son los colores de las distintas sombras del efecto.)
Editamos lo marcado & ya tenemos nuestro efecto!
Como pueden ver es un sencillo efecto de tres sombras que cambian de posicion, esto mismo podemos realizar con los bordes o podemos hacer cambios en la forma, darle forma redondeada solo al pasar el cursor; un estilo minimalista a un estilo moderno.

Ya las ideas son de ustedes, estos son los detalles que yo principalmente observo al crear este tipo de estilo o con el cual me inspiro para formar diseños con mis detalles originales.
Ahora en mas, esta su imaginación!

Espero sea una información útil.

Cualquier duda/comentario/pregunta deja tu comentario,

abrazos de colores!

ヾ（*⌒ヮ⌒*）ゞ