Principios de diseño y aplicaciones en la web

Principios de diseño, cómo crear un layout y cómo aplicar esto en la web

Transcript

1. Principios de diseño y aplicaciones en la web Bellatrix Martínez @bellatrixmartnz
2. disculpen EL spaNGLISH :)
3. 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?
8. TIPOGRAFíA COLOR LAYOUT
9. 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.
10. TIPOGRAFÍA
11. 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.
12. I am a SANS SERIF font Avenir Futura Gill Sans Helvetica Roboto I am a SERIF font American Typewriter Courier Georgia Palatino Times New Roman *más legible para bloques de texto
13. Dos tipografías que NUNCA debes usar: Comic Sans Papyrus
14. Kerning Kerning 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.
17. Tracking Tracking es el proceso de ajustar el espacio entre las letras equitativamente. Este texto tiene TRACKING de 5% y este de -5%!
18. Leading Leading es el espacio entre las líneas de tipografía.
20. 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.
22. Hyphens Debemos alejarnos de los hyphens ya que crea pausa y confusion en el ojo en la lectura.
23. 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.
24. 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.
25. ¿TRADUCCIÓN?
26. 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
31. With no typography style!!!
32. @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
33. @import url(//fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans', sans-serif; } Hosted
34. 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
36. .yourclass{ letter-spacing: 0.5em; line-height: 1.3em; } Tracking & Leading
37. .yourclass{ text-align: center; } Alineamiento .yourclass{ text-align: left; } .yourclass{ text-align: right; } .yourclass{ text-align: justify; }
38. COLOR
39. Color Wheel
40. La rueda del color se usa para visualizar la relación entre los colores y sus valores.
41. 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.
43. Colores secundarios Los colores secundarios son la mezcla de los colores primarios. Estos son verde, naranja y morado.
45. Colores terciarios Y los colores terciarios son la mezcla de un color primario con su color secundario más cercano.
47. 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.
48. 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
50. 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
52. 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
54. 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
57. CMYK & RGB CMYK 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.
58. Psicología del color Esta comprobado científicamente que cada color estimula ciertas partes del cerebro. Las marcas del mundo estudian esto a fondo para aprovecharlo.
59. Amarillo Estimula a la comunicación Optimismo Felicidad / Amigable Acelera el metabolismo.
60. Relacionado con lo natural Relaja El ojo humano esta muy acostumbrado a verlo ya que lo ve en muchos aspectos de la naturaleza Verde
61. Rojo Demanda atención Pasión
62. Negro Poder Elegancia
63. ¿TRADUCCIÓN?
64. .yourclass{ color: #d4d4d4; background-color: #222222; border: 1px solid #fff; } Color en la web
67. LAYOUT
68. 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.
69. El golden ratio es la proporción más adecuada de un set de elementos. Este patrón lo encontramos desde la naturaleza.
70. 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.
71. *Source: http://webdesign.tutsplus.com/articles/improving-layout-with-vertical-rhythm--webdesign-14070
72. Espacio negativo El 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
75. 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.
76. Focal Point Un 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
80. 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?
82. ¿TRADUCCIÓN?
86. .yourclass{ float: right; } .yourclass{ float: left; } Layouts en la web
88. 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.
89. Preguntas, Retroalimentación, Hola? :)