[BOLUDECES #019] TIPS PARA ELEGIR EL LAYOUT DE TU LJ Y HACERLO MÁS AMIGABLE A LA VISTA
Este es otro de esos posts donde me voy a mandar un poco la parte xD porque es lindo estudiar algo y después poder compartir lo que una sabe. Esto va para aplicaciones en diseño web.
Me gusta frecuentar las comus de layouts más o menos para ver qué hay de nuevo en combinaciones de colores, estilos, organización de elementos (o de moda), aunque no vaya a tomar ningún diseño ni utilizarlo. Con el que tengo me basta, y sé lo suficiente de HTML como para hacerle algún que otro cambio de vez en cuando, cuando me canso de los colores y demás. Puede decirse que he encontrado "el layout perfecto" para mí y por eso lo conservo desde hace un buen tiempo. Además, yo sé que está "de moda" esto del minimalismo (una onda que no me satisface, porque una cosa es "menos es más" y otra cosa es "menos, más pelado y más ilegible"), pero hay una serie de issues sobre los layouts "modernos" que a mi parecer (y este es mi humilde punto de vista de diseñador gráfico) no son recomendables desde un punto de vista de diseño. El principal problema es que no son amigables a la vista.
¿Qué significa esto? En pocas palabras, QUE SON ILEGIBLES. No es lo mismo ver una fuente tipográfica Times New Roman cuerpo 10 puntos en un monitor seteado con una resolución de 800x600 píxeles, que verla en un monitor a 1440x900. En el segundo monitor, se va a ver BASTANTE más pequeña, y va a ser más difícil leer. Tengamos encuenta que no todos tenemos en nuestras casas o en nuestras laptops el mismo tipo de monitor ni con la misma resolución, por lo que desde el vamos es imposible contentarlos a todos, pero hay algunos pequeños detalles que está bueno tener en cuenta a la hora de elegir un layout. Porque, aunque no lo crean, una de las causas por las que algunos LJ y blogs en general no son visitados es porque el layout no es amigable a la vista. ¿No me creen? Pues es así. Y no lo digo yo, lo demuestran las estadísticas en base a una conducta muy lógica: todo entra por los ojos.
LEGIBILIDAD es un concepto complicado, en algunas universidades le dedican toda una materia al estudio del asunto. Es la conjunción perfecta y armónica de fuente tipográfica, tamaño de la fuente, color de fuente y fondo, y la resolución de los monitores; que te permita leer bien y no te destroce la vista. Dicho así, parece imposible, así que vamos a resumirlo en QUE LO PUEDAS LEER Y NO TE DESTROCE LA VISTA. Podemos lograr un mejor diseño (que no te va a salvar de quedarte ciego, porque milagros no hacemos; pero por lo menos va a molestar menos) de teniendo en cuenta LA ÚNICA COSA que es más importante: EL CONTRASTE.
HABLEMOS UN POCO DEL CONTRASTE
Está muy de moda usar layouts "limpios", sencillos... sobre todo, muy BLANCOS. Y todo muy bonito, porque puede ser un layout precioso pero si quiero pasar por tu blog, QUIERO LEER lo que dice, no tener que tratar de distinguir si eso grisecito que se ve contra el fondo blanco es texto o una trama de fondo para el layout. El CONTRASTE es la facilidad con que una figura se "despega" del fondo. Si pongo un objeto negro sobre fondo blanco, se va a ver MUY BIEN, o sea, es una figura en ALTO CONTRASTE (que no es el mejor, tampoco); pero si pongo un objeto gris muy clarito sobre un fondo blanco, genera BAJO CONTRASTE porque se ve menos, es decir, cuesta más distinguir dónde empieza la figura y termina el fondo.
El color BLANCO es prácticamente el PEOR COLOR que se puede elegir para el fondo de un layout. Porque refleja demasiada luz y la vista se cansa más rápido de leer. ¿Por qué creen que las páginas de las novelas que compran son ligeramente amarillentas y no blanco puro? ¿Dónde vieron una novela cuyas páginas sean blanco puro? A menos que sea un libro técnico en papel ilustración, es muy posible que no vayan a encontrar algo así. Más allá de que los libros de texto se imprimen en un papel que es barato porque le falta calandrado (el proceso que lo alisa y con el aditivo de químicos, lo hace más blanco); esto trae el beneficio extra de que el amarillo pálido es un color menos reflectante que el blanco pero igual de legible. Cansa menos la vista, podemos pasar más tiempo leyendo.
Algo que también he visto mucho en los nuevos diseños de layouts es que usan fuentes DEMASIADO PEQUEÑAS para resultar cómodas (then again, esto puede ser por la resolución del monitor, pero lo que es pequeño sigue siendo pequeño en cualquier resolución) o de colores demasiado claros respecto del fondo, que hacen difícil distinguir el texto escrito del fondo propiamente dicho. He aquí algunos consejitos que se pueden tener en cuenta a la hora de elegir un layout:
FONDOS: USAR COLORES SÓLIDOS (nada de degradados, imágenes o tramas de fondo en el cuerpo de las entradas)
FONDOS: SI HAY POSIBILIDADES, USAR COLORES PASTEL (esto puede funcionar muy bien, un color pastel como el celeste, el rosa, el amarillo, el verde; son bonitos colores y pueden crearse combinaciones muy interesantes si lo colocan como fondo del layout en general)
USAR UN TAMAÑO DE FUENTE NO MENOR A 10 PUNTOS (volviendo al uso de fuentes RIDÍCULAMENTE PEQUEÑAS para el cuerpo principal de las entradas. Esto lo pueden encontrar fácilmente leyendo las líneas de código, y se puede cambiar el tamaño de la fuente por defecto con facilidad. La medida de fuente ideal para leer en una pantalla, es 11-12 pts; cualquier cosa menor que eso termina siendo un engorro para los ojos)
BUSCAR UN LAYOUT QUE TENGA FUENTE SERIF PARA EL CUERPO DE LAS ENTRADAS, SI ES POSIBLE (las fuentes serif han demostrado ser menos agresivas para la vista que las sans-serif, justamente por esas "patitas" que tienen; las fuentes serif son todas aquellas que se parezcan a la Times New Roman, Garamond o Baskerville, mientras que las fuentes sans-serif son todas aquellas que se parezcan a la Verdana, Arial o Tahoma. No es que las fuentes sans-serif sean malas, pero su uso en textos extensos genera cansancio visual. Los libros de texto están impresos con fuentes serif por este motivo).
DETALLE ÚTIL SOBRE LOS COLORES HEXADECIMALES: Los valores con "#" adelante son números hexadecimales, la información de color básica para HTML, de modo que si miran su layout, todo lo que tenga un "#" adelante, seguido por seis cifras que pueden ser número del 1 al 6 o letras de la A a la F -son valores alfanuméricos- será información de color para alguna cosa del layout. ¡ESO QUIERE DECIR QUE LO PUEDEN CAMBIAR A GUSTO Y PLACER! Pueden buscar en Google una tabla de colores hexadecimales para guiarse, y voilà.
¿Dos referencias MUY útiles? El blanco es #ffffff y el negro es #000000.
LOS CONTRASTES MENOS RECOMENDABLES
Fuente color lavanda claro + fondo blanco
Fuente color gris claro + fondo blanco
Fuente celeste claro + fondo blanco
EN SÍNTESIS, ES DESESTIMABLE CUALQUIER COLOR QUE SEA MUY DIFUSO O ESTÉ A UN PASO DEL BLANCO + FONDO BLANCO, O USAR DOS COLORES MUY PARECIDOS COMO FRENTE-FONDO.
LOS CONTRASTES MÁS RECOMENDABLES
Si tanto te gusta el blanco, OK, probá una fuente gris oscuro (#333333), o marrón chocolate, o rojo oscuro, o verde oscuro, o azul/celeste oscuro + fondo blanco. Que no sean colores puros contra el blanco, porque si el contraste es DEMASIADO ALTO, además, resulta muy intenso para la vista.
Gris (#666666) + blanco
Gris oscuro (#333333 ó #222222) + fondo ligeramente amarillo o beige.
Marrón chocolate/Marrón oscuro + fondo ligeramente amarillo o beige.
Rojo oscuro o naranja + fondo rosado claro.
Verde/Marrón oscuros + fondo verde claro, beige, amarillo pálido, naranja claro, etc.
Si quieren usar dos colores de la misma familia (por ejemplo, dos tonos de marrón, queremos un marrón más o menos oscuro y un beige) cuiden que el color de fondo sea BASTANTE MÁS CLARO que el color del texto, por motivos de contraste.
ES PREFERIBLE NO USAR FONDOS NEGROS Y TEXTO BLANCO, ROJO, AZUL O AMARILLO. Es destructivo. No sólo genera una vibración frente-fondo espantosa que destroza los ojos, sino que es estéticamente poco recomendable. Traten de evitarlo. Lo más oscuro que recomiendo usar es un gris #666666, con fuente en color negro #000000 o un gris #222222
EL USO DE OBJETOS INCRUSTADOS MUY PEQUEÑOS
Como headers, icons, barras de navegación adicionales, gifs etc. Sí, quedan muy lindos. Pero creo que no soy la única chicata a la que se le hace un tanto IMPOSIBLE leer los textos escritos en algunos headers o icons que encuentra por ahí, sobre todo para un icon de 100x100 píxeles que tiene escrito un texto de no menos de cinco líneas. Si la leyenda está colocada, por algo debe ser. Y si no se puede leer, ¿Cuál es el propósito de quemarte las pestañas haciendo un icon que no se puede leer? ¿O que tenés que pegar la nariz a la pantalla para verlo?
OJO, MUY IMPORTANTE: No pueden editar layouts por defecto de LiveJournal. Sólo si toman el layout de un tercero y lo incrustan como una nueva "CSS". Las comunidades de layouts tienen instructivos muy flasheros y originales (y completitos) sobre cómo colocar el layout que más te guste en tu LiveJournal, ¡Ahora salgan corriendo a buscar su layout perfecto!
Creo que más o menos, esto fue todo. Cualquier colega que crea que estoy equivocada en algo, no deje de señalármelo, por favor :)
PD: Esto es un "haz lo que yo digo, no lo que yo hago", y tampoco tienen que hacerlo si no quieren. Cada uno, a lo que le gusta. ¡Que tengan una gran semana!