El color como herramienta en Diseño Web.

El color como herramienta en Diseño Web.

Uno de los factores clave en el diseño de una web es el tratamiento del color. Las percepciones en pantalla son muy distintas a las que tenemos en papel. El ojo se mueve de forma diferente y la mente busca estímulos efectivos.

Para que una web funcione desde el punto de vista de su diseño nos basaremos en la teoría del color, también tendremos en cuenta la psicología, las tendencias actuales y las variaciones que pueden existir entre las distintas configuraciones de los monitores y la adaptación de una página a dispositivos móviles.

A lo largo de una serie de artículos iremos completando este conjunto hasta darle la forma de una herramienta esencial en el diseño de un proyecto digital.

Para ir entrenando nuestras retinas a la vez que aprendemos sobre la teoría del color, nos valdremos de las principales herramientas online para la elección de colores.

Rueda cromática

Personalmente es la más técnica de todas las herramientas, fácil de usar e intuitiva. Al pie tiene las instrucciones de uso.

rueda-cromatica

Rueda cromática

En HTML y CSS siempre trabajaremos con códigos de color  hexadecimales, si ya tenemos elegidos los colores con sus códigos los introducimos en la pestaña superior derecha sin #, si no lo seleccionamos en la rueda cromática y el proceso siguiente es el mismo.

Una vez que tengamos el color podemos ver:

Tono: es una de las propiedades más importantes  en estado puro y la que le da el nombre a cada uno.

Saturación: es el matiz que toma  según la agregación de gris (el color pierde pureza y se aproxima cada vez más al gris).

Luminosidad: es el valor que toma  dependiendo de la cantidad de blanco ( se aclara).

Colores Complementarios: dentro del círculo cromático los colores que se sitúan diametralmente opuestos son complementarios entre sí (o sea, que si los mezclamos proporcionalmente nos darán blanco, gris o negro dependiendo si son o no colores luz).

Colores Análogos: están situados a ambos lados de cualquier color del círculo cromático (luego el resultado es de tres colores muy armoniosos entre sí).

Colores triádicos: si tomamos los tres colores resultantes de los vértices de un triángulo equilátero sobre el círculo cromático, tendremos una triada de color (el contraste entre ellos resulta vibrante e intenso).

Colores tetrádicos: se toman cuatro colores, esta vez  superponiendo un rectángulo sobre el círculo de colores, sus vértices darán lugar a dos pares de colores complementarios que combinados resultan a la vez armónicos y chispeantes.

Adobe Color CC

Para los que no están acostumbrados a trabajar aún con combinaciones de colores,  Adobe renueva su antigua Kuler y la amplía, puedes hacer búsquedas de paletas y crear la tuya partiendo de una imagen. Sencilla, eficaz y completísima.

Rueda cromática Esquemas de color Adobe Color CC

Adobe color CC

Blogger 2.0

Existen muchos motivos para crear un Blog e ir más allá y convertirse en un auténtico Blogger.

Selección de tipografías

Selección de tipografías

Selección de tipografías gratuitas que harán personalizar tus imágenes en la web o en cualquier diseño gráfico:

Reis

tipografia-reis

Esta tipografía transmite frescura, jovialidad y ritmo, es una fuente tipo Script que en títulos o imágenes con textos cortos se visualiza y lee bien. Lamentablemente su versión es solo en mayúsculas, regular y sin acentos, en formatos ttf y otf.

Un truco para que tus imágenes queden correctamente acentuadas es superponer una capa transparente y con el pincel a tamaño adecuado dibujarlos, luego para perfeccionar el estilo puedes dar pequeños retoques con la herramienta borrador.

Ha sido creada por Marcelo Reis Melo, para descargarla gratis os tenéis que registrar y compartirla en Facebook o Twitter. Se puede usar también para proyectos comerciales.

Komoda

tipografia-komoda

Tipografía elegante y muy actual. De la categoría Sans Serif, es ideal para títulos y carteles. Su versión solo está disponible en mayúsculas, regular y sin acentuación. Viene en formato otf.

Para acentuar esta fuente, crea una capa sobre el texto y usa la herramienta línea con los píxeles de grosor que necesites. Y para crear el rectángulo redondeado vacío, haces dos figuras con esa forma y distinto color, una de ellas la redimensionas unos píxeles más pequeña que la de abajo, seleccionas las dos y alineas centros verticales y horizontales, las rasterizas y combinas. Por último seleccionas la figura pequeña con la varita mágica,suprimes y deseleccionas.

La puedes descargar directamente y su uso es tanto personal como comercial.

Comic Neue

tipografia-comic

Las tipografías casuales están de moda. Comic Neue es una fuente completísima en estilos, light, light oblícua, regular, oblicua, negrita y negrita oblícua, y en gran número de idiomas.

El archivo que se descarga directamente de la página de los creadores, viene en formato otf y versión css y es gratuita para uso personal y comercial.

Merece la pena visitar el enlace y ver la gran labor de sus diseñadores.

Langdon

TIPOGRAFÍA-LANGDON

Langdon es muy funcional, es una pena que su descarga solo nos ofrezca un archivo en formato otf, sin acentos y únicamente en mayúsculas.

La tipografía está clasificada dentro de las sans serif y es muy versátil, pudiendo crear efectos diferentes jugando con varias capas de texto y añadiendo estilos. Concretamente el efecto de arriba se hizo tratando dos capas de texto casi superpuestas solo variadas unos píxeles en horizontal, la de arriba lleva borde del color del fondo y la de abajo toma el color del fondo aumentada en luminosidad.

El autor es Esteven Bonner.

Ostrich

Tipografía Avestruz

Ostrich tiene un resultado moderno y muy versátil. Es gratuita y está en mayúsculas y acentuada, en catorce formatos otf. Cinco de ellos son complementarios entre sí para crear efectos coloristas o con transparencias. Y tiene una versión de pago Ostrich Sans Round.

El diseñador  Tyler Finck  la creó para The League of Moveable Type.

Znikomit Nº24

ZnikomitNo24

Redondeada y muy ligera, tiene glifos alternos en “A”, “Q”, “R”, “V”, “W” y adornos decorativos con o sin relleno, dependiendo de la versión Thin o Regular.

Su aspecto es delicado y dulce, es idónea para textos de estilo artesanal o navideño. Alternándolo con otra tipodrafía o usando algunas letras el resultado es muy original.

La podéis descargar en glukfonts.pl.

Utilización correcta de las tipografías. Pautas a seguir

Utilización correcta de las tipografías. Pautas a seguir

En los estudios previos al diseño web, uno de los factores más importantes a tener el cuenta es cómo utilizar la tipografía de forma correcta:

Una fuente tipográfica es el conjunto de caracteres, números y símbolos con propiedades comunes que le proporcionan un estilo diferenciado. Una familia tipográfica mantiene las características de la fuente pero con algunas variaciones en el grosor y la anchura.

Las tipografías se dividen en las siguientes categorías:

Serif: son las familias tipográficas que usan remates en los bordes de los caracteres, este diseño se inventó en la antigüedad cuando los textos se escribían con cincel en piedra, para regular e igualar el tamaño de las letras. Aportan calma, dominio y solidez a un texto. Sus caracteres redondeados como la o, c, p, b, etc. son un poquito más grandes que el resto porque al combinarse en el texto con las otras se visualizan más pequeñas. Se clasifican en Romanas, Glífico y Caligráficas. Las más usadas son Book Antiqua, Bookman Old Style, Courier, Courier New, Garamond, Georgia, Lucida Bright, MS Serif, New York, Times, Times New Roman y Palatino.

Sans Serif: no tienen serifa en sus bordes. Fueron creadas en Inglaterra en el S.XIX. Tienen los vértices rectos y el trazado es coincidente. Los textos resultan sobrios, modernos y de trazado seguro. Su lectura en textos amplios resulta difícil por eso su uso se limita a rótulos o títulos. Algunas son Arial, Chicago, Mónaco, Tahoma, Helvética, Verdana y Univers.

Manuscritas o script: su nombre ya lo indica todo. Las usamos en los medios digitales como titulo principal o para la firma del autor. Se clasifican en Brush, Caligráfica, Canciller, Causal, Formal, Semi-formal Gráfico, Monolínea…. Como ejemplos tenemos Aelfa, Belphebe, Brush, Edwardian Script, English, Killigraphy, Medieval Victoriana y Vivaldi.

Exhibición: son las más atrayentes de todas, sugieren épocas de la historia y aportan gran estilo. Se utilizan exclusivamente para el título. Son muy decorativas, Antigua, Art Noveau, Art Decó, etc. Las más utilizadas son Terminator, Star Wars, Final Frontier y Jokerman, creadas por la industria del entretenimiento, el arte y la tecnología., Killigraphy, Medieval Victoriana y Vivaldi.

Símbolos: Dingfonts y Dingbats, insertan signos, patrones, logotipos, decoraciones, imágenes y caracteres que no son alfabéticos. Su uso es exclusivo para resaltar y  ornamentar textos y en dibujos.

Si quieres algunos buenos ejemplos de fuentes mira esta selección de tipografías.

Debemos seguir unas pautas que nos llevarán a usar la tipografía correcta:

No mezclar tipografías: Si se mezclan varios tipos de tipografía no comunicamos lo que queremos decir de forma clara y perdemos la unidad del mensaje.

No abusar de los estilos: si nos excedemos con el uso de negrita, cursiva, subrayado, etc. haremos que el texto pierda distinción y resulte sobrecargado y poco elegante.

Optar siempre por la legibilidad: a la hora de elegir la tipografía correcta ésta debe ser siempre fácil de leer, con un diseño sencillo, sin texturas, sombras o colores que dificulten su lectura y comprensión.

«Kerning” y “Traking”: El espaciado y el interlineado al acercar o alejar los caracteres sin querer, puede perder la armonía del texto y la legibilidad.

Uso adecuado del color: para lograr una lectura adecuada tendremos en cuenta el tono, valor e intensidad del color usado y la fuente elegida. Los ojos descansan más si la lectura se hace sobre un fondo claro, con letra más oscura.

Tamaño: es recomendable que la dimensión de la fuente esté entre los 12 y 14 px.

Párrafos bien diferenciados: para conseguir una lectura relajada  donde el ojo recorra las líneas cómodamente y si cansancio, es recomendable lograr un texto con párrafos cuidados.

Si se tienen en cuenta estos factores en la elección de la tipografía correcta para un sitio web, estaremos aportando éxito al diseño y conllevará a  tener una baja la tasa de rebote de visitantes y ampliará el número de usuarios y lectores.

Blogger 2.0

Existen muchos motivos para crear un Blog e ir más allá y convertirse en un auténtico Blogger.