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
![Page 1: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/1.jpg)
Principios de diseñoy aplicaciones en la web
Bellatrix Martínez @bellatrixmartnz
![Page 2: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/2.jpg)
disculpen EL spaNGLISH :)
![Page 3: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/3.jpg)
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?
![Page 4: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/4.jpg)
![Page 5: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/5.jpg)
![Page 6: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/6.jpg)
![Page 7: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/7.jpg)
![Page 8: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/8.jpg)
TIPOGRAFíA COLOR LAYOUT
![Page 9: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/9.jpg)
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.
![Page 10: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/10.jpg)
TIPOGRAFÍA
![Page 11: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/11.jpg)
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.
![Page 12: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/12.jpg)
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
![Page 13: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/13.jpg)
Dos tipografías que NUNCA debes usar:
Comic Sans Papyrus
![Page 14: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/14.jpg)
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.
![Page 15: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/15.jpg)
![Page 17: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/17.jpg)
Tracking
Tracking es el proceso de ajustar el espacio entre las letras equitativamente.
Este texto t iene TRACKING de 5%
y este de -5%!
![Page 18: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/18.jpg)
Leading
Leading es el espacio entre las líneas de tipografía.
![Page 19: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/19.jpg)
![Page 20: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/20.jpg)
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.
![Page 21: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/21.jpg)
![Page 22: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/22.jpg)
HyphensDebemos alejarnos de los hyphens ya que crea pausa y confusion en el ojo en la lectura.
![Page 23: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/23.jpg)
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.
![Page 24: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/24.jpg)
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.
![Page 25: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/25.jpg)
¿TRADUCCIÓN?
![Page 26: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/26.jpg)
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
![Page 27: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/27.jpg)
![Page 28: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/28.jpg)
![Page 29: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/29.jpg)
![Page 30: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/30.jpg)
![Page 31: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/31.jpg)
With no typography style!!!
![Page 32: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/32.jpg)
@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
![Page 33: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/33.jpg)
@import url(//fonts.googleapis.com/css?family=Open+Sans);
body { font-family: 'Open Sans', sans-serif;}
Hosted
![Page 34: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/34.jpg)
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
![Page 35: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/35.jpg)
![Page 36: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/36.jpg)
.yourclass{letter-spacing: 0.5em;line-height: 1.3em;
}
Tracking & Leading
![Page 37: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/37.jpg)
.yourclass{text-align: center;
}
Alineamiento
.yourclass{text-align: left;
}
.yourclass{text-align: right;
}
.yourclass{text-align: justify;
}
![Page 38: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/38.jpg)
COLOR
![Page 39: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/39.jpg)
Color Wheel
![Page 40: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/40.jpg)
La rueda del color se usa para visualizar la relación entre los colores y sus valores.
![Page 41: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/41.jpg)
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.
![Page 42: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/42.jpg)
![Page 43: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/43.jpg)
Colores secundarios
Los colores secundarios son la mezcla de los colores primarios. Estos son verde, naranja y morado.
![Page 44: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/44.jpg)
![Page 45: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/45.jpg)
Colores terciarios
Y los colores terciarios son la mezcla de un color primario con su color secundario más cercano.
![Page 46: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/46.jpg)
![Page 47: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/47.jpg)
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.
![Page 48: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/48.jpg)
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
![Page 49: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/49.jpg)
![Page 50: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/50.jpg)
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
![Page 51: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/51.jpg)
![Page 52: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/52.jpg)
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
![Page 53: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/53.jpg)
![Page 54: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/54.jpg)
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
![Page 55: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/55.jpg)
![Page 57: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/57.jpg)
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.
![Page 58: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/58.jpg)
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.
![Page 59: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/59.jpg)
AmarilloEstimula a la comunicación Optimismo Felicidad / Amigable Acelera el metabolismo.
![Page 60: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/60.jpg)
Relacionado con lo natural Relaja El ojo humano esta muy acostumbrado a verlo ya que lo ve en muchos aspectos de la naturaleza
Verde
![Page 61: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/61.jpg)
Rojo
Demanda atención Pasión
![Page 62: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/62.jpg)
Negro
Poder Elegancia
![Page 63: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/63.jpg)
¿TRADUCCIÓN?
![Page 64: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/64.jpg)
.yourclass{color: #d4d4d4;background-color: #222222;border: 1px solid #fff;
}
Color en la web
![Page 66: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/66.jpg)
![Page 67: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/67.jpg)
LAYOUT
![Page 68: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/68.jpg)
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.
![Page 69: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/69.jpg)
El golden ratio es la proporción más adecuada de un set de elementos. Este patrón lo encontramos desde la naturaleza.
![Page 70: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/70.jpg)
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.
![Page 71: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/71.jpg)
*Source: http://webdesign.tutsplus.com/articles/improving-layout-with-vertical-rhythm--webdesign-14070
![Page 72: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/72.jpg)
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
![Page 73: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/73.jpg)
![Page 74: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/74.jpg)
![Page 75: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/75.jpg)
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.
![Page 76: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/76.jpg)
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
![Page 77: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/77.jpg)
![Page 78: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/78.jpg)
![Page 79: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/79.jpg)
![Page 80: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/80.jpg)
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?
![Page 81: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/81.jpg)
![Page 82: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/82.jpg)
¿TRADUCCIÓN?
![Page 83: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/83.jpg)
![Page 84: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/84.jpg)
![Page 85: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/85.jpg)
![Page 86: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/86.jpg)
.yourclass{float: right;
}
.yourclass{float: left;
}
Layouts en la web
![Page 88: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/88.jpg)
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.
![Page 89: Principios de diseño y aplicaciones en la web](https://reader035.fdocumento.com/reader035/viewer/2022081520/58a0e5241a28abad6d8b49a1/html5/thumbnails/89.jpg)
Preguntas, Retroalimentación, Hola? :)