Principios de diseñoy aplicaciones en la web

Bellatrix Martínez @bellatrixmartnz

disculpen EL spaNGLISH :)

Antes de comenzar a diseñar las vistas e interfaces de los proyectos debemos entender de que trata.

• ¿Para qué necesitamos esta aplicación? • ¿Cual es el problema que estamos resolviendo? • ¿Cómo vamos a lograr nuestros objetivos? • ¿Quiénes son los tipos de usuario?

TIPOGRAFíA COLOR LAYOUT

El diseño es el proceso de solventar problemas visuales que siguen una función y ayudan a nuestros usuarios conseguir una meta fácilmente.

TIPOGRAFÍA

La tipografía es el arte de crear y manejar letras y poder expresar ideas con ellas.

Existen más de 25,000 familias o tipos de tipografías.

Todas estas tipografías se dividen en: Serif y Sans- Serif fonts, entre otras.

I am a SANS SERIF font

Avenir Futura Gill SansHelvetica Roboto

I am a SERIF font

American Typewriter CourierGeorgia PalatinoTimes New Roman

*más legible para bloques de texto

Dos tipografías que NUNCA debes usar:

Comic Sans Papyrus

KerningKerning es el proceso de ajustar el espacio entre las letras para que se vean proporcional.

Las tipografías traen un espacio por defecto y aplica el mismo espacio en cada carácter. Pero no cada carácter es igual.

El kerning fue creado para que el ojo no se distraiga con la imperfección del espacio. El layout se vea mas balanceado y como resultado sea más placentero.

http://type.method.ac

Tracking

Tracking es el proceso de ajustar el espacio entre las letras equitativamente.

Este texto t iene TRACKING de 5%

y este de -5%!

Leading

Leading es el espacio entre las líneas de tipografía.

Widow and Orphans

Un Widow es cuando queda colgando una palabra o corta linea al final de un párrafo.

Es considerado mala tipografía porque deja mucho espacio en blanco al ojo en el párrafo.

Un orphan es lo mismo a un widow pero cuando queda una palabra o linea corta al principio de una pagina.

HyphensDebemos alejarnos de los hyphens ya que crea pausa y confusion en el ojo en la lectura.

Alineamiento

Por defecto debemos alinear nuestros textos a la izquierda. El idioma español, inglés y en general en esta parte del mundo se lee de la izquierda a la derecha.

Idiomas como el árabe de leen de la derecha a la izquierda. Para nosotros esto añade un nivel de dificultad increíble en el momento de la lectura.

Debemos olvidarnos de tener párrafos largos alineados centrados. Esto hace más difícil la lectura.

Tampoco usemos texto justificado. Al justificar nuestros párrafos creamos espacios extra o ficticios entre nuestra tipografía para forzar que todo el texto se alinee a un bloque igual.

¿TRADUCCIÓN?

La tipografía en la web es una de las maravillas del CSS ya que nos permite crear empatía en nuestros usuarios y darle mas vida a nuestro layout.

No debemos olvidar que nuestra meta es comunicar y hacer de nuestro sistema una experience usable.

La tipografía antes que nada debe ser legible.

Web Fonts

With no typography style!!!

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}

body { font-family: 'MyWebFont', sans-serif;}

En tu servidor

@import url(//fonts.googleapis.com/css?family=Open+Sans);

body { font-family: 'Open Sans', sans-serif;}

Hosted

Los archivos de tu font los necesitas incluir en tu app.

Para tener todos los formatos necesarios, pueden usar un generador de tipografías web.

ex. http://www.fontsquirrel.com/tools/webfont-generator https://fontie.flowyapps.com/home

.yourclass{letter-spacing: 0.5em;line-height: 1.3em;

}

Tracking & Leading

.yourclass{text-align: center;

}

Alineamiento

.yourclass{text-align: left;

}

.yourclass{text-align: right;

}

.yourclass{text-align: justify;

}

COLOR

Color Wheel

La rueda del color se usa para visualizar la relación entre los colores y sus valores.

Colores primarios

Los colores primarios son las tonalidades puras del color. La raíz de todas las otras tonalidades de color. Estos son azul, amarillo y rojo.

Colores secundarios

Los colores secundarios son la mezcla de los colores primarios. Estos son verde, naranja y morado.

Colores terciarios

Y los colores terciarios son la mezcla de un color primario con su color secundario más cercano.

Harmonía

Colores calientes - amarillo - rojo - naranja

Colores fríos - azul - verde - morado

La harmonía de los colores se consigue cuando hay un buen balance entre los colores calientes y colores fríos dentro del layout.

Los colores complementarios son los que están directamente opuestos en la rueda del color.

- Esta mezcla de colores es super vibrante. Debemos tener cuidado de como se usa.

- Nunca usar para textos ya que no es legible.

Colores complementarios

Los colores análogos son tres colores que estén consecutivos en la rueda de color.

- Son generalmente encontrados en la naturaleza y son placenteros al ojo.

- Escoge un color que domine, uno de soporte y otro para acentos. Siempre con negro, blanco o gris.

Colores análogos

Los colores triádicos son tres colores que estén en forma de triángulo exacto en la rueda de color.

- Son super fuertes y vibrantes deben ser usados con cuidado.

- Escoge un color que domine, y dos sólo para acentos. Siempre con negro, blanco o gris.

Colores triádicos

Los colores tetrádicos son cuatro colores en forma de rectángulo. Es formado por dos pares de colores complementarios.

- Son super fuertes.

- Usa un solo color dominante y el resto de acentos.

Colores tetrádicos

http://color.method.ac/

CMYK & RGBCMYK es el manejo de color por defecto en la imprenta. Significa Cyan, Magenta, Yellow y Black. Si mezclas estos 4 colores en un 100% obtienes lo que llaman Rich Black que es el negro puro en la impresión.

RGB es el manejo de color por defecto en pantallas. Significa Red, Green y Blue. Si mezclas estos colores obtienes Blanco.

Psicología del colorEsta comprobado científicamente que cada color estimula ciertas partes del cerebro.

Las marcas del mundo estudian esto a fondo para aprovecharlo.

AmarilloEstimula a la comunicación Optimismo Felicidad / Amigable Acelera el metabolismo.

Relacionado con lo natural Relaja El ojo humano esta muy acostumbrado a verlo ya que lo ve en muchos aspectos de la naturaleza

Verde

Rojo

Demanda atención Pasión

Negro

Poder Elegancia

¿TRADUCCIÓN?

.yourclass{color: #d4d4d4;background-color: #222222;border: 1px solid #fff;

}

Color en la web

http://www.color-hex.com/

LAYOUT

Grid

El grid es un set de reglas que nos permiten definir como estarán alineados los elementos en nuestro diseño. El grid permite que nuestros diseños sean consistentes y proporcionales.

El golden ratio es la proporción más adecuada de un set de elementos. Este patrón lo encontramos desde la naturaleza.

Ritmo

Ritmo es una repetición que crea un patrón.

Leemos de arriba para abajo de la izquierda a la derecha.

El ritmo en si es el intervalo en los elementos, debe ser repetitivo y consistente.

Un patrón de ritmo en un layout es definido cuando hay más de un elemento gráfico en la composición.

Una vez que el ojo ve una repetición de elementos, busca inmediatamente un patrón que seguir.

*Source: http://webdesign.tutsplus.com/articles/improving-layout-with-vertical-rhythm--webdesign-14070

Espacio negativoEl espacio negativo es la distancia que dejamos entre los elementos en nuestra pantalla.

Layouts diseñados con espacios negativos: • Son más fáciles de leer • El usuario puede comprender más su lectura • Genera atención • Nos permite priorizar elementos de la interface • Le da harmonía y tono

Jerarquía

Todo diseño tiene sigue un propósito y tiene un mensaje que comunicar. Una buena planificación ayuda a que el usuario asimile y entienda nuestro mensaje.

Este proceso de priorizar los elementos de acuerdo a su importancia es la Jerarquía.

Focal PointUn punto focal atrae a la gente a tu diseño y les da un comienzo desde dónde empezar a ver tu composición.

Si tus usuarios sólo tuviesen dos segundos para ver tu layout. Que parte de la información deberían ver?

¿Cómo crearlo? Tamaño Forma Color

Textura Posición

Balance

Luego de definir un punto focal se necesitan organizar el resto de los elementos en una manera que tu usuario pueda navegar la información fácilmente.

En este momento es que la Jerarquía entra en juego en la composición.

Tu usuario deberia mover los ojos para abajo, de una sección a otra? a travez de la pantalla?

¿TRADUCCIÓN?

.yourclass{float: right;

}

.yourclass{float: left;

}

Layouts en la web

http://www.basehold.it/

Conclusión

¿Para qué es todo esto?

Para comunicar nuestra idea de manera mas eficiente.

Para crear una mejor experiencia de usuario.

Para lograr nuestros objetivos / metas creando un app.

Preguntas, Retroalimentación, Hola? :)