Usabilidad & Diseño I

D.G. Mariana VarelaDa Vinci – Diseño Web2011

El buen diseño siempre ha sido “usable”

El menú de esta clase

• Paletas de color• Tipografías

ColoresEl color es una percepción visual que se genera en el cerebro al interpretar las señales nerviosas que le envían los fotorreceptores de la retina del ojo y que a su vez interpretan y distinguen las distintas longitudes de onda que captan de la parte visible del espectro electromagnético.

En resumen:El color verdadero no existe.

Color es percepción = interpretación

http://es.wikipedia.org/wiki/Color

ColoresLos colores en diseño son muy subjetivos.

Lo que para a algunos puede evocar a algo, para otros no.

Puede tener que ver con las preferencias personales de cada uno o el universo cultural donde viva.

Rojo: amor, pasión, peligro, comida, impulsos, acción, aventura. Azul: Confiabilidad, éxito, seriedad, calma, poder, profesionalismoVerde: dinero, naturaleza, animales, salud, armoníaNaranja: confort, creatividad, celebraciones, diversiónVioleta: realeza, justicia, ambigüedad, lujo, fantasía, sueñosBlanco: inocencia, pureza, limpieza, simplicidad.Amarillo: curiosidad, alegría, diversiónRosa: Suavidad, dulzura, inocencia, juventudMarrón: tierra, naturaleza, simplicidad, primitivoGris: Neutralidad, indiferencia. reserva.Negro: Seriedad, oscuridad, misterio, secretos.

Colores: Significados

Colores en la Web

http://www.allgraphicdesign.com/graphicsblog/2008/03/24/color-theory-in-graphic-design-web-design-how-to-combine-colors-choose-color-schemes-part-iii//

La paleta de colores RGB consta de tres colores primarios aditivos:Rojo – Verde - Azul.

Elegir bien los colores es importante para saber donde poner ciertos acentos en nuestro sitio web, enfatizar secciones, guiar la mirada.

Muchas veces son mirar rápidamente el sitio, los colores nos transmiten de qué se trata lo que estamos mirando:Sitios para niños, adultos, corporativos, etc.

Qué pasa con el DaltonismoEl daltonismo es un defecto genético que consiste en la imposibilidad de distinguir algunos colores (discromatopsia). Aunque la confusión de colores entre un daltónico y otro puede ser totalmente diferente, incluso en miembros pertenecientes a la misma familia, es muy frecuente que confundan el verde y el rojo; sin embargo, pueden ver más matices del violeta que las personas con visión normal y distinguen objetos camuflados.

Crear una paleta base

http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/ y http://s3.accesoperu.com/wp6/includes/htmlarea/mezclador/ayuda/ec.htm

Monocromática:Intensidades del mismo color

Análoga:Usa colores “vecinos”

Complementaria:Opuestos en el circulo

Triaxial:combina tres colores equidistantes en el círculo

Cutomizada: Tomamos los colores arbitrariamente sin seguir ningún patrón

Empezar con una paleta básica monocromática y luego ir descubriendo nuevos colores para combinar.

La importancia de los neutrales

Los colores neutrales son una parte importante del diseño, es donde la vista “descansa”

Pueden tener una connotación cálida o fría si se inclina hacia los tostados o celestes.

Los grises también son neutrales, un “comodín” para cualquier paleta.

El color acentoEl color acento se trata de buscar un color particular que encienda una paleta neutral.Se puede utilizar para realzar una parte particular del diseño, por ejemplo los encabezados principales (H1)

Cuantos colores uso?Una paleta base puede tener aproximadamente 5 colores. Puede tener más o menos colores según el caso.

Partir de una foto base

http://kuler.adobe.com/#create/fromanimage

Mismo color, diferente tono Para mantener el balance en la saturación pero a su vez no cansar la vista (y que los colores “griten”) se puede combinar con diferentes tonalidades del color opuesto, o dentro de la misma gama con mayor o menor saturación, mayor contenido de negro o de brillo.

Herramientas: Kuler

www.kuler.adobe.com

Herramientas: Colorlovers

www.colourlovers.com/

Herramientas: I like your colors

Más herramientas en: http://designshack.co.uk/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme

Los colores utilizados en los gráficos, fondos o cualquier elemento de la pantalla trabajan en conjunto y no deben “apropiarse” del sitio

Asegurarse que el color de texto tenga suficiente contraste con el color de fondo.

Manetener consistencia con la paleta de color en todo el sitio.

Las pantallas hoy en día reflejan millones de colores: divertirse con ello!

Consejos finales

Tipografias

http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces

Arial, Helvetica, sans-serifCourier New, Courier, monospaceTimes New Roman, Times, serifGeorgia, Times New Roman, Times, serifVerdana, Arial, Helvetica, sans-serifGeneva, Arial, Helvetica, sans-serif

“El 95% de la Web está hecho de tipografía y el tiempo promedio de lectura es de 6 minutos .” – Oliver Reichenstein

“La tipografía se trata de afilar el texto para una óptima

experiencia en la lectura.” – Oliver Reichenstein

}“Safe Types” estan en todas las computadoras y nos podemos confiar que de la manera que las usemos se van a ver bien

Legibilidad tipográficaSer o no ser

Más herramientas en: http://designshack.co.uk/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme

La legibilidad (legibility) trata sobre el hecho de entender las letras. La leibilidad (readibility) trata sobre el hecho de entender a todas las letras juntas, compuestas en un bloque.

Muchas tipografías son legibles, pero, compuestas en un bloque de, por ejemplo, una caja muy ancha, se hacen ileibles.

Tanto serif o SanSerif pueden ser legibles (sin ser una mejor que la otra) la clave está en el bloque de texto en donde compongamos la información

Tamaño de las fuentes

http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

El tamaño por default en html es 16px.

¿Grande?

Tipografía del tamaño 16px es aproximadamente 11pt en texto impreso. Se debe tener en cuenta la distancia de lectura de la pantalla, que es usualmente mucho major que la que utilizamos a leer desde papel.

Combinación de familias

Combinación de familias

Color + Legibilidad?

Demasiado Grande?

Herramientas: Google Web Fonts

Herramientas: Cufon Js

Herramientas: Em Calculator

http://riddle.pl/emcalc/

Herramientas: Elección de familias

http://flippingtypical.com/

Próxima clase:

-Traer PPT de desarrollo de diseño

-Cada uno va a tener 10 minutos para hablar.

- Tratar de tocar los temas que vimos estas ultimas clases y cómo defienden sus desiciones de diseño en terminos de usabilidad