Principios de diseño y aplicaciones en la web
-
Upload
bellatrix-martinez -
Category
Design
-
view
284 -
download
2
Transcript of Principios de diseño y aplicaciones en la web
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.
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
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
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
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? :)