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