[SONIDO] En este video hablaremos de la estética del diseño web y en particular cómo los contenidos deben ser organizados en la página a fin de crear una experiencia visual placentera para el usuario final. También mencionaremos algunos otros asuntos del diseño gráfico relacionados con aplicaciones web modernas. No obstante, antes de hacer esto, vamos a tomarnos un respiro. Al trabajo este muy duro para llegar a este módulo final, así que se lo merece. Póngase cómodo y disfrute de lo que viene ahora. [MÚSICA] [MÚSICA] [MÚSICA] [MÚSICA] [MÚSICA] [MÚSICA] [MÚSICA] [MÚSICA] [MÚSICA] Esta es una escena de la película El Bueno, El Feo y El Malo de Sergio León, un director de cine italiano y el creador de las películas de género espaguetti western. Esta es su película más famosa y esta es la escena más famosa de esa película. El cementerio de esa escena en realidad está en, cerca de Burgos en España y el tiroteo es el más famoso de la historia del cine. La banda sonora fué compuesta por Enio Morricone y es considerada por muchos como la más grande y la más original banda sonora de la historia. Si tiene la oportunidad vea la película pero antes de hacerlo vamos a hablar acerca de cómo esto se relaciona con el diseño de aplicaciones web. Además del hecho de que tanto la cinematografía como la banda sonora son estéricamente agradables, algo por lo que también debemos esforzarnos en nuestros diseños web, me gustaría que nos fijáramos en el título, El Bueno, El Feo y El Malo. Y vamos a hablar de lo bueno, de lo malo y de lo feo en diseños web. Me gustaría empezar con lo bueno. Los principios asociados con una imagen visual agradable son en realidad bastante antiguos. Esta es una imagen del Hombre Bitruvio de Leonardo Da Vinci. El dibujo se basa en la correlación de las proporciones humanas ideales con la geometría. Descrito por el antiguo arquitecto romano Bitruvio en su libro tercero de arquitectura, el dibujo y el texto se denominan a veces, el canon de las proporciones. Esta imagen es un ejemplo de la mezcla del arte y de la ciencia en el renacimiento y proporciona el ejemplo perfecto del gran interés de Da Vinci en las proporciones. De este dibujo también se dice que ilustra la proporción áurea utilizada para lograr el equilibrio y la belleza en muchas pinturas y esculturas del Renacimiento. La proporción áurea por cierto, también aparece en la Mona Lisa y fué empleada por Miguel Angel, Rembrandt, Dalí y otros. No tenemos tiempo para entrar en estos principios en esta clase, pero se pueden aprender fácilmente, les animo a investigar por su cuenta. Vamos a echar un vistazo a un ejemplo de, en una página web, este es un sitio llamado minimums que adoptó un enfoque muy audaz en la manera que exhibe su contenido. Tiene un diseño de sitio web basado en cuadrículas y tipografía grande junto con imágenes de alta calidad y máxima resolución. Su sitio sirve como muy buen ejemplo de cómo ejecutar correctamente una estructura en cuadrícula manteniendo una buena jerarquía visual de diseño. Como ejemplo de algo malo, les muestro aquí un sitio web que ha sido secuestrado. Lo importante aquí es que si no se tiene cuidado en materia de seguridad, incluso el mejor diseño se verá comprometido. [AUDIO EN BLANCO] Ahora vamos a echar un vistazo a lo feo. Aquí tenemos una captura de pantalla de la peor página del mundo. Este sitio web es en realidad construida con fines educativos y para apreciar todo su horror, hay que buscar en ella directamente. Así que permítanme que les muestre una vista en directo y puede ver que hay gráficos que parpadean, múltiples fuentes y colores que se utilizan en conjunto y un esquema de color horrible. De hecho como este sitio está destinado a ser educativo, si va hasta el botón clic here, donde verá que incluso clic here está mal escrito, irá a una lista de las cosas que están mal hechas en este sitio. Hay algo así como 60 defectos de diseño en este sitio web. Les animo a ir a the worldsworstwebsiteever.com y lean esta lista, es instructiva y aprenderán de su lectura. Vamos a hablar de diseño. El diseño es cómo aparece su contenido en la pantalla y les voy a mostrar algunos ejemplos. Creo que Facebook tiene un diseño muy limpio y sencillo. Si usted ve la forma en la que organizan su contenido, verá que es muy intuitiva, es muy fácil de usar y verá que es muy fácil de identificarse y crear una cuenta nueva. Aquí tenemos un ejemplo que se llama Freshbooks, es un sitio de contabilidad basada en la nube. Esta versión en directo de la aplicación, les voy a mostrar algo que es hoy bastante común, que es poner una gran cantidad de contenido en una sola página, que se puede acceder con sólo desplazarse hacia abajo. En las primeras páginas, en los primeros sitios de los sitios web, hay una gran cantidad de enlaces en una página y se navegaba de una página a otra. La tendencia actual es poner mucho en una sola página en la que puede desplazarse hacia abajo y ver cada vez más contenido. Otra cosa de la que me gustaría hablar con respecto al diseño es el diseño responsivo, sensible. El objetivo de un diseño sensible es proporcionar una visualización óptima e interacción a través de una amplia gama de dispositivos, desde ordenadores de escritorio, tradicionales hasta los teléfonos móviles. Esto se hace mediante la adaptación de la disposición para facilitar la lectura y la navegación con una cantidad mínima de cambio de tamaño y desplazamiento, con independencia de la plataforma que se use para que pueda verse el mismo contenido. El enfoque del diseño utiliza una cuadrícula junto con imágenes flexibles y consultas de medios CSS3, con el fin de construir este diseño fluido. Permítanme mostrarle un ejemplo, la página Freshbooks mostrada anteriormente es un diseño sensible. a medida que se ajusta al tamaño, verá que las imágenes se ajustan para que esta página se vea bien en un teléfono. Verá que todas las imágenes se reajustan para caber en la plataforma. Si se cambia otra vez la escala, verá que el diseño vuelve a cambiar, por lo que este es un ejemplo de diseño sensible. Debo mencionar que es muy importante proporcionar diseños sensibles debido a que cada vez mas usuarios de aplica iones web están accediendo a través de un móvil. Además si se proporciona un diseño sensible como este, no siempre es necesario que una empresa cree una aplicación activa para teléfonos móviles. La aplicación web puede funcionar en lugar de una aplicación específica para teléfonos móviles. La aplicación web puede servir como su aplicación móvil. Por lo que estamos viendo que cada vez más un diseño sensible es todo lo que una empresa necesita para hacer frente a su mercado basado en telefonía móvil. La siguiente cosa de la que me gustaría hablar con respecto al diseño es la estructura. Es una buena idea empezar sólo por una estructura aproximada de cómo desea que su sitio se vea antes de utilizar un montón de tiempo en la construcción del sitio. Es como un poner algo como esto que se puede mostrar al cliente y ahí el cliente puede tener una visión rápida de sus ideas y de cómo se verá el sitio web. Con esto obtendrá rápidamente una retroalimentación de lo que le gusta y lo que no le gusta al cliente, si le muestra una estructura como esta. Otra cosa común es establecer una estructura de navegación, de modo que el cliente puede ver cómo las cosas van a fluir a través de nuestra página web. Aquí hay una que hemos construido a partir de la página web de la Universidad de Nuevo México donde se ve cómo se enlazan las cosas. [AUDIO EN BLANCO]
