Usabilidad & Diseño I El buen diseño siempre ha sido “usable” AUTORA: D.G. Mariana Varela Da Vinci – Diseño Web -2011 Adaptado y actualizado por: Paolo Andrés Cantillo Largo - 2014

El menú de esta clase Retículas Paletas de color Tipografías

Distribución de espacios: Retícula La retícula Distribución de espacios: Retícula La 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.

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

Colores Color es percepción = interpretación El 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

Colores Los 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.

Colores: Significados 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 en la Web 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. http://www.allgraphicdesign.com/graphicsblog/2008/03/24/color-theory-in-graphic-design-web-design-how-to-combine-colors-choose-color-schemes-part-iii//

Qué pasa con el Daltonismo El 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 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. 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

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 acento El 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/

Consejos finales 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!

La Tipografía

Tipografias “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 } 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 “Safe Types” estan en todas las computadoras y nos podemos confiar que de la manera que las usemos se van a ver bien http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces

Legibilidad tipográfica 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 Más herramientas en: http://designshack.co.uk/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme

Legibilidad tipográfica 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

Tamaño de las fuentes 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. http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

Combinación de familias Se 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/