Usabilidad & Diseño I

AUTORA: D.G. Mariana Varela Da Vinci – Diseño Web -2011Adaptado y actualizado por: Paolo Andrés Cantillo Largo - 2014

El buen diseño siempre ha sido “usable”

El menú de esta clase

•Retículas •Paletas de color• Tipografías

Distribución de espacios: RetículaLa retícula en el diseño es una guía que nos sirve para distribuir los elementos y la alineación, todas sin excepción cuentan con las mismas partes básicas sólo que algunas alcanzan cierta complejidad de acuerdo a las necesidades de la información, también estas se pueden combinar.

La retícula

Tipos de Retícula

Manuscrita: La más sencilla de todas, se usa para

textos largos porque están contenidos en un bloque grande delimitado por un margen y tiene un espacio para los

títulos y la numeración.

Tipos de Retícula

Columnas:Es muy flexible y se pueden separar distintos tipos de información, es unas de las retículas más utilizadas en revistas y también en el diseño web y multimedia, porque puede utilizarse varias columnas para texto amplio e imágenes grandes y también pequeñas.

Tipos de Retícula

 Modular: Útil cuando es algo muy complejo, es parecida a la de columnas solo que las divide en filas creando así una matriz de celdas que se denominan módulos, en cada uno de ellos se puede colocar información o en varios agrupados. Son flexibles y precisos pero en exceso puede crear confusión.

Tipos de Retícula

 Jerárquica:Esta la he visto que la ocupan en gran medida en el diseño web y multimedia, la información se organiza de forma intuitiva en proporción a los elementos y no en intervalos regulares y repetidos como sucede con las otras, es por eso que es muy variable.

El Color

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, profesionalismo

Verde: dinero, naturaleza, animales, salud, armonía

Naranja: confort, creatividad, celebraciones, diversión

Violeta: realeza, justicia, ambigüedad, lujo, fantasía, sueños

Blanco: inocencia, pureza, limpieza, simplicidad.

Amarillo: curiosidad, alegría, diversión

Rosa: Suavidad, dulzura, inocencia, juventud

Marrón: tierra, naturaleza, simplicidad, primitivo

Gris: 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

https://kuler.adobe.com/create/color-wheel/

http://www.colourlovers.com/

http://www.colorschemedesigner.com/

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

La Tipografía

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-serif

Courier New, Courier, monospace

Times New Roman, Times, serif

Georgia, Times New Roman, Times,

serif

Verdana, Arial, Helvetica, sans-

serif

Geneva, 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áfica

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

Los aspectos que pueden influir en la legibilidad de un texto:

El diseño del tipo: las familias que consiguen mayor diferenciación entre caracteres parecen ser más legibles. Si el diseño de letras es muy homogéneo dificulta la lectura. 

Serif o Sans-serif: actualmente hay cierto consenso en que las tipografías con remates consiguen una mayor diferenciación entre letras y, en consecuencia, una mayor legibilidad, y suelen usarse en textos continuos.

Caja alta o baja: la caja alta tiene una alineación horizontal homogénea que uniformiza las letras. La caja baja, con caracteres más individualizados, ofrece menor dificultad de lectura.

Legibilidad tipográfica

El estilo o peso: La negrita y la itálica son resultantes de algoritmos que añaden píxels extras al contorno de las romanas. Un peso medio es más legible que una fuente fina o negrita (aunque la negrita dentro de un texto normal llame la atención por su peso). Las fuentes cursivas pierden legibilidad por su inclinación, es recomendable no utilizarlas en textos largos.

Anchura de la fuente: una fuente demasiado ancha o demasiado condensada pierde en legibilidad. Se suele usar el modo condensado para informaciones secundarias que tienen que ocupar poco espacio.

El soporte: las propiedades del soporte influyen en la legibilidad. La baja resolución de las pantallas de televisión y de ordenador paradójicamente baja la legibilidad de las tipografías con remate.

- Vea mas en : http://www.ivoserrano.com/diseno-web/recomendaciones-para-el-uso-tipografico-en-diseno-web/#sthash.ZVNlXx3Q.dpuf

Legibilidad tipográfica

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 familiasSe recomienda no utilizar más de tres familias de fuentes en una multimedia

Combinación de familias

Color + Legibilidad?Tratar que el color del fondo no disminuya la legibilidad del texto. Por el contrario la debe mejorar.

Demasiado Grande?Definir tamaños específicos. Por ejemplo, títulos, subtítulos y párrafos

Herramientas: Google Web Fonts

http://www.google.com/fonts

http://flippingtypical.com/