Colores, Tipografía, Imagen y Animación en la Web

2.4 COLORES, TIPOGRAFÍA, IMAGEN Y ANIMACIÓN EN LA WEB

Para los diseñadores web el color es una herramienta imprescindible que poseemos para poder captar la atención del usuario. Hay una relación directa entre el color y los elementos de una composición, alterar el color de un objeto puede repercutir en la valoración jerárquica que se haga.

También los colores nos provocan diferentes sensaciones de las que normalmente no somos conscientes, nos afecta pues vivimos rodeados de ellos y culturalmente se han ido identificando con las cosas que nos rodean.

¿Cuál es la importancia de los colores en el desarrollo web?

El color representa un estímulo visual potente siendo significativo el efecto que puede generar en el usuario. El uso del color se extiende mucho más allá de destacar simplemente ciertas zonas o ciertos fragmentos de texto.

Desde un punto subjetivo está directamente relacionado con la experiencia visual del usuario y de su contexto cultural. De esta manera podemos establecer relaciones entre el color y su significado o entre el color y sus propiedades espaciales.

El color desprende diferentes expresiones del ambiente, que pueden transmitirnos  la sensación de calma, plenitud, alegría, violencia etc. La utilización de ciertos colores afecta de diferente manera en nuestro estado de ánimo, de modo que le proporciona al diseñador web la oportunidad de conectar mejor con el usuario, pero también con el riesgo de conseguir una sensación negativa.

Fuente:ENLACE

Entonces nos podemos preguntar, ¿Cómo elegir los colores o paleta de colores a utilizar en un sitio web?  He aquí se propone cinco reglas sobre el color: el éxito de un diseño web profesional

1.       Identifica el público objetivo de tu página web

La importancia de elegir colores en base al público al que nos dirigimos radica en que la mayoría de los colores están asociados a determinados grupos. La página tiene ante todo que atraer y convencer a la visita. Es por eso que hay que seleccionar colores con los que la visita se sienta identificada.

Si el público al que queremos llegar es a un público másculino, podemos utilizar colores oscuros (como grises o negros) o colores fríos (azules y verdes). El público femenino se identifica más con los colores como violeta o púrpura; mientras que el público joven se identifica más con colores planos y llamativos como el naranja o el verde.

2.       Enciende las emociones

Una de las propiedades de los colores es la de transmitir sensaciones. Los colores estimulan nuestro cerebro y nos evocan tranquilidad, seguridad, confianza, pasión, misterio... Esto es muy interesante desde el punto de vista del Marketing, ya que no es necesario dar argumentos para convencer sobre las propiedad o beneficios de un producto o servicio.

Pero ojo: muchas de estas asociaciones tienen un fundamento cultural.  Por ejemplo, vestir de negro por ejemplo es ir de luto en nuestra sociedad, mientras que en India el color del luto es en blanco. Tenlo en cuenta en las relaciones internacionales de tu negocio.

3.       ¿Qué colores seleccionar?

Otro de los aspectos a la hora de escoger los colores para nuestra marca y para nuestra página web es el equilibrio. La armonía de colores y el equilibrio hace que un diseño sea más o menos efectivo. ¿Pero qué colores tenemos que seleccionar? Por lo general, se recomiendan respetar una de estas tres reglas:

• Colores de la misma gama cromática; es decir, diferentes tonos de un mismo color.
• Colores complementarios; aquellos situados próximos en la gama cromática
• Colores opuestos: son aquellos situados justo en el lado opuesto de la gama cromática y que ayudan al contraste.
• Otra de las recomendaciones es no abusar de los colores: dos o tres es suficiente y siempre es bueno que haya un color predominante.

4.       Efectividad del color: el contraste

El contraste de color se produce al combinar dos colores que no están relacionados. Esto permite por ejemplo, resaltar textos o imágenes. Combina colores claros y colores oscuros para lograr este efecto visual.

5.       Composición y peso de colores

Gracias a los colores y a las formas podemos dirigir la mirada de la visita y así resaltar determinados elementos.

 En la composición se dice que los colores cálidos, los oscuros o tierras, pesan más que los colores fríos, claro so pesados. Busca la armonía y el equilibrio justo en el diseño de tu web.

Para ello puedes seguir estas tres reglas básicas:

1. Crea un sólo punto de impacto visual por página; es decir, un punto al que dirigir la mirada.
2. Respeta la mirada del lector; es decir, de izquierda a derecha y de arriba abajo.
3. Deja aire y espacios en blanco para que la mirada descanse.

Tambien surge la pregunta, ¿Cuantos colores es recomendable utilizar en un sitio web?

Una de las causas principales de que una web no tenga un aspecto profesional es la utilización de demasiados colores.

Una web con muchos colores es confusa, pierde la coherencia y distrae al usuario evitando que se fije en los elementos más importantes.

Cada página de tu web debería tener un único objetivo principal y por tanto ahí es donde deberías poner el punto diferente, que en este caso consigues con el color.

Fíjate en la web de Pingdom, esta es una tabla de precios que hay en su página de inicio ¿Dónde se te va la vista?

Ellos quieren venderte su servicio “Professional” y te llevan hacia él. Es el mismo concepto de la uva, si solo hay un color que resalte te fijarás en él. Ahora imagina que dicha tabla de precios fuera así:

¿Crees que conseguirían el mismo resultado?

Conclusión.

Intenta utilizar la menor cantidad de colores posibles.

Como norma general te recomendaría uno o dos colores neutros, como pueden ser los grises, que te servirán para separar espacios y crear divisiones y luego uno o dos colores más llamativos para atraer la atención del usuario cuando lo consideres necesario. Puedes utilizar uno para los enlaces y otro para los botones y demás llamadas a la acción, por ejemplo.

Si te fijas en mi web todas las llamadas a la acción y elementos que quiero resaltar van en amarillo. El resto de la web va en blancos y grises.

Publico algunas consideraciones de que colores utilizar en desarrollar un Sitio Web para:

 Web de un Kinder

• Uno de los aspectos más importantes para capturar la atención de los niños es definitivamente la paleta de color. Al diseñar algún material para niños se emplean casi siempre colores como fucsia, verde, cyan, rojo, azul, amarillo, etc. Pueden darse cuenta de esto en centros comerciales, los juguetes y locales comerciales con productos para niños utilizan siempre este tipo de color. El contraste entre los colores utilizados en la paleta de color es lo que hace que no pasen desapercibidos por los niños, ya que generalmente estos colores los asocian a cosas como felicidad, energía, etc. lo cual hace que los niños lo vean, les llame la atención y les pidan a sus padres ir al lugar o comprar el juguete.  Sin embargo, es necesario cuidar que no exista un abuso en el contraste o cantidad de colores, se debe cuidar que siempre mantengan armonía. La cantidad de colores a utilizar y la tonalidad de los mismos van determinada por la edad del niño, es por ello que los juguetes para niños en preescolar generalmente son con los colores primarios.

Web de Panadería o Pastelería 

• Las panaderías y pastelerías son esos establecimientos que nos endulzan un poco la vida con sus deliciosos postres y panes. En internet, especialmente en Pinterest, Instagram, Tumblr y blogs especializados, podemos ver cientos de fotografías de bonitos cupcakes, donuts y otros postres que a más de alguno le hacen agua la boca.
• Bien en cuanto a colores se refiere es bueno buscar colores de fondo que sean suaves y el enfoque un poco fuerte en especial en el producto o logotipo.
• Creando una sensación agradable al usuario. El blanco quedaría bien con un rosado, también un color naranja pero muy suave.

 Web de Bufete de abogados

• El color de base tiene que ser blanco o claro, porque aparte de dar seriedad, ayuda a la lectura.
• Los colores azules (oscuros) aportan la sensación de compromiso, trabajo, seriedad y efectividad

Web de Perfumería y artículos de Belleza

• El color de estos sitios web dependerá mucho a que tipo de clientes va dirigido, osea si es para dama o para caballeros, o ambos. Regularmente el fondo seria blanco, algunos tonos oscuros y el rojo. Si es para damas también suele usarse el rosado algo fuerte pero no como fondo, o algún tipo de fucsia

 Web de Institucion de Gobierno.

• Para color de instituciones de gobierno, influye mucho a los colores patrios de cada país y el departamento que esta. Por lo general seria el fondo blanco y otro color seria negro y los colores que representan al país.

Veamos otros terminos y áreas del diseño Web sumamente importante.

¿Qué es la tipografía?

Se conoce como tipografía a la destreza, el oficio y la industria de la elección y el uso de tipos (las letras diseñadas con unidad de estilo) para desarrollar una labor de impresión. Se trata de una actividad que se encarga de todo lo referente a los símbolos, los números y las letras de un contenido que se imprime en soporte físico o digital.

¿Cómo elegir la tipografia adecuada para un sitio web?

Algunos tipos de letra favoritas en diferentes categorías: serifa, sin serifa, serifa slab, manuscrita y decorativa. Creemos que todas ellas son aptas para una página web y suelen dar una buena sensación dentro de la variedad de sus diversos ajustes.

Serif (Serifada)

Descripción

La tipografía serifa tiene pequeñas pinceladas o trazos que se extienden desde los extremos de las letras o símbolos. No son muy recomendables para textos largos debido a que puede parecerse a un escrito de universidad o dar la sensación de borrosos, aunque si sabes utilizarlos, pueden darle a tu página un estilo clásico o tradicional.

Uso y tipografía recomendada

Para títulos, enlaces o párrafos cortos, no para textos largos.

·         Vollkorn

·         Merriweather

·         EB Garamond

·         Lustria

·         Libre Baskerville

Sans Serif (Sin serifa)

Descripción

La tipografía sin serifa no presenta pinceladas o trazos, sino cortes limpios en los extremos. La mayoría de las páginas emplean tipografía sin serifa para el texto del cuerpo de la página, ya que son más legibles en la pantalla y dan la sensación de páginas modernas.

Uso y tipografía recomendada

Para la navegación y el cuerpo gracias a su legibilidad.

·         Open Sans

·         Roboto

·         Lato

·         PT Sans

·         Ubuntu

·         Arimo

Si quieres saber mas dejo este link: enlace

Muy recomendables por ser limpias, legibles y versátiles sin resultar aburridas.

 ¿Cual es la deferencia entre la tipografía serif y sans-serif?

Una fuente Serif es un tipo de letra que se usa en los medios de comunicación tradicionales como los periódicos o los libros. La principal diferencia entre las letras Serif y Sans Serif es que las Serif tienen detalles adicionales en los bordes de los contornos de las fuentes. Un ejemplo clásico de fuente Serif es Times new Roman. Las fuentes Serif también se conocen como tipo Roman.

Por otra parte, las fuentes Sans Serif son, literalmente, fuentes "sin Serif" (Sans significa sin en francés). Los tipos de letra Sans Serif también se conocen como Grotesque o Gothic. Algun buen ejemplo de letras tipo Sans Serif son Arial y Calibri

¿Cuantas estilos de fuentes es recomendable utilizar en un sitio web?

Los estilos de fuentes recomendables son de 3 a 4 tipos, pero de igual manera depende del tipo de sitio que se está desarrollando.

¿Que formato de imagen es el mas adecuado para los sitios web?

Cuando hablamos de un sitio web, las imágenes son un recurso imprescindible para ilustrar el contenido y, aunque puede parecer algo intranscendente, una mala elección en el formato de imagen puede provocar problemas innecesarios en nuestro sitio web, como por ejemplo, gráficos grandes, gráficos con textos borrosos.

Aunque la mayoría de navegadores no tienen problemas para mostrar los diferentes formatos, unos pueden ser más adecuados que otros dependiendo del caso.

Pero, ¿Cómo saber cuál es el formato más adecuado para una determinada imagen? A continuación vamos a realizar una comparativa de dos de los formatos más usados: PNG vs JPG. Para realizar el análisis, nos vamos a basar en tres factores fundamentales:

PNG vs JPG: Compresión

Todos los gráficos que se incluyen en una página web deben de ser descargados desde el servidor y, por ello, es importante que las imágenes pesen poco para que el contenido pueda ser descargado lo más rápido posible.

En este sentido, JPG es un buen formato ya que nos permite comprimir hasta 10 veces el tamaño de una fotografía. Con JPG se pueden guardar fotografías con gran colorido y el tamaño del archivo será bastante ligero, lo que lo hace ideal para utilizarse en un sitio web. Hay que tener en cuenta que es un formato comprimido, por lo que al convertir la imagen, habrá una pérdida mayor o menor de calidad, en función del ratio de compresión que utilicemos, y que aumentará con sucesivas conversiones.

Recomendamos no comprimir con un ratio inferior al 70% de calidad, lo que nos dará imágenes generalmente de menos de 200 KB pero con suficiente calidad para verse bien en el sitio web desde cualquier dispositivo.

Por otro lado, PNG es un formato de imagen sin pérdidas. Esto quiere decir que se puede guardar la imagen tantas veces como se quiera sin perder calidad. Dentro de los formatos de imágenes sin compresión, este es el más utilizado hoy en día en web. Es muy útil para fondos de la web, iconos o gráficos que no son fotografías.

PNG vs JPG: Transparencia

El formato PNG es el que mejor capacidad para la transparencia tiene. Este formato puede tener hasta 8 bits de información adicionales en cada píxel, lo que nos permite crear gráficos traslúcidos independientemente del color de fondo. Eso sí, hablamos de imágenes que ocupan más KB y, por lo tanto, de archivos de mayor tamaño. Por su parte, el formato JPG no admite transparencia. Es decir, la imágenes en formato JPG usan un paleta de colores ilimitada pero se mezclan píxeles para reducir su peso.

¿Que elementos se deben considerar para elegir un formato de imagen?

El formato JPG es el más adecuado para las fotografías e imágenes realistas que en su formato de origen ocuparían varios megabytes, ya que al comprimirse, pueden ocupar unos pocos cientos de Kb o menos, según el ratio de compresión. Solo se apreciaría la pérdida de calidad en pantallas muy grandes o al hacer zoom.

El formato PNG es el más adecuado para usar en fondos de los sitios web, en iconos y gráficos o imágenes que no son fotografías, o con trazos finos o texto, ya que aunque no estén comprimidos, por sí mismas no deberían ocupar demasiado KB. Además, gracias a su fondo transparente, pueden usarse en cualquier sitio de manera sencilla, manteniendo una gran calidad.

Qué formato de imagen usaría para:

• Galeria fotográfica JPG
• Logotipo de empresa  PNG
• Fondo de pagina PNG

¿Que formatos de animacion podemos usar en un Sitio Web?

FLASH Y GIF

¿Cuáles son los principales usos que se le da a la animación en un sitio web?

Las animaciones son una parte muy importante para lograr que las aplicaciones y los sitios web sean cautivadores. Los usuarios desean utilizar interfaces de usuario altamente receptivas e interactivas.

Algunas ventajas que trae la animación son:

• Animación grafica atractiva
• Comunicación visual y auditiva
•  Efectos multimedia
• Estándar en la industria
• Gran difusión
• Compatibilidad