(7) Diseño visual para diseñadores de UX

1. Introducción y resumen: Creo que causa siete, vamos a hablar diseño visual y de información. Este curso se puede tomar como un curso independiente, y especialmente podría ser útil para las personas que están haciendo diseño o investigación UX y quieren aprender un poco más sobre el diseño visual. Se puede tomar como autónomo, como mencioné, como parte de una serie de diez partes. En segundo lugar, planear los diez cursos de esta serie significa que puede optar por presentarse al examen para obtener el Certificado de la British Computer Society Foundation en experiencia de usuario y convertirse en un practicante acreditado de UX. Hola, soy longitud de tenencia desde pico XD. Así que un poco sobre mí. Entonces, como pueden ver, tengo un montón de calificaciones. Pero para ser honesto, la mayor parte de lo que he aprendido, trabajando en el campo durante más de 20 años como diseñador de UX. Entonces ojalá a lo largo de este curso, pueda impartir algunos de esos conocimientos con mis colegas, Sophie, quien va a pasar por algunos de los principios de diseño contigo. Entonces, nuestra misión en el pico XD es empoderar a otros para mejorar el mundo a través del diseño centrado en el ser humano. Esto es un poco sobre lo que hacemos. Hacemos investigación, mapeo de viajes, diseño de servicios, donde haces diseño de UX, wireframes, pruebas de arquitectura de la información y, por supuesto, hacemos capacitación UX. Entonces, ¿qué sabe mi equipo de UX entre nosotros con ya sea 500 proyectos UX terminados desde 2003? Entonces vas a escuchar de mí y de mi equipo hoy sobre diseño visual y ojalá podamos impartirte algunos de esos conocimientos basados en nuestra industria y experiencia en consultoría. Este curso se basa en lo que hemos cubierto en nuestros tres primeros cursos sobre la comprensión sus usuarios o la comprensión del espacio del problema antes de entrar en el espacio de solución. En el curso uno, también cubrimos todos los diferentes componentes y cosas que necesitas saber sobre tus usuarios. En los cursos 2.3, cubrimos los métodos de investigación de usuarios y luego cómo documentar los resultados de su investigación de usuarios para construir empatía con sus partes interesadas. Después en el Curso cuatro, platicamos sobre cómo involucrar a los usuarios y stakeholders en el proceso de diseño y también la fase de ideación y la importancia de la creación de prototipos que equivale a cinco. Hablamos sobre cómo diseñar tu arquitectura de información y navegación, pero entendiendo el modelo mental de tu usuario. Después en nuestro último curso seis, hablamos de interacción y diseño de espumas. Si no tienes un buen conocimiento de cómo entender a tus usuarios, te animo a completar estos cursos primero ya que aplicando todos los métodos de diseño y el director solo irá a mitad de camino crear una buena experiencia en línea. La otra mitad es entender tus usuarios y luego a los modelos mentales. Entonces, ¿qué vamos a cubrir en este curso? Entonces, antes que nada, vamos a hablar de la teoría de la Gestalt. Vas a escuchar de Sophie, ella va a cubrir algunos de los principios de la percepción humana. También va a hablar de principios de diseño. Primera parte, nos vamos a centrar en la jerarquía y la alineación. Y luego en la segunda parte, vamos a hablar repetición, equilibrio y contraste. Entonces también hablaremos de algunos de los elementos visuales, cosas como el color, la tipografía y la iconografía. Y luego hablaré de cognición humana y diseño de IU. También cubriremos cosas como diseño de información y cómo diseñas las palabras en una página. Y también cubren el proceso de diseño visual desde wireframe hasta el diseño visual. Ahora échale un vistazo a estos lados. Quiero que escribas los siguientes sitios y des a cada uno de estos están escribiendo 1-10 en base a lo creíbles que te parezcan. Para echarle un vistazo a este, darle una calificación 1-10 pecho, tu primera reacción intestinal podría ser una nota de ella en una nota post-it o algo así. ¿Qué pasa con este? Este es uno de mis sitios web favoritos, enlaces, autos. Cómo escribirías esto de diez chez es confiabilidad y credibilidad. ¿Qué pasa con este? ¿Cómo escribirías éste? Así que probablemente pueda adivinar lo que pagarían tus respuestas. Pero, ¿qué crees que estás basando tu valoración de confianza y credibilidad en tu forma, base en el conocimiento de la organización? La mayoría de las personas hacen juicios sobre la credibilidad de un sitio web basado en gran parte en el diseño visual. Por lo que es muy importante tener un sitio web de aspecto creíble. Ayuda a construir esa confianza y credibilidad. Entonces tu x no se trata solo de usabilidad, no se trata solo de esa facilidad de uso. Los usos suelen tomar decisiones y elecciones predecibles o irracionales. Así que los diseños visuales y la estética son cruciales para hacer esa conexión emocional con tus usuarios y realmente construir esa confianza y credibilidad. Entonces, ¿qué es el diseño visual? diseño visual es efectivamente la práctica de diseñar cuadrículas, diseñar páginas, elegir paletas de colores y desarrollar íconos. Es posible que te pidan esta definición si estás sentando la evaluación para el examen BCS. Entonces esta es la definición según el BCS. Entonces, algunos de los principios fundamentales del diseño visual que realmente hay que conocer. Paga por proximidad, alineación, repetición y seguro un contraste para tratar de recordar este parque acrónimo con un C PARCC para ayudarte a recordar estas cosas. A continuación, Sophie va a hablarte sobre la teoría de la Gestalt. 2. Teoría del gestalt: Hola, mi nombre es selfie Smith y te voy a llevar a través de una teoría gestalt en esta lección, que, que son algunos principios de la percepción humana. Los principios de la Gestalt son principios o leyes de las percepciones humanas. Forman la base de muchas de las reglas de diseño que conocemos y usamos hoy en día. Describen cómo nosotros, como humanos, tendemos a agrupar elementos similares, reconocer patrones y simplificar imágenes complejas. Cuando miramos objetos o sitios web o interfaces de cualquier tipo. En los años veinte, fue un grupo de psicólogos de Alemania quienes desarrollaron una serie de teorías sobre percepción visual conocidas como estos principios de la Gestalt o la teoría de la Gestalt. Estaban mirando la forma en que las personas crean significado de todas las entradas que obtienen de lo que leen, miran, escanean y molestan. Y encontraron que hay ciertas formas que nuestros cerebros tienden a organizar toda esta entrada para crear sentido. Estos principios, nos ayudan a entender cómo los humanos suelen jugar entendimientos significativos a partir de lo que vemos, que nos ayudará como diseñadores de UX. Porque lo que queremos crear son interfaces significativas y puntos de interacción. La premisa clave en teoría de la Gestalt es que como humanos tenemos una capacidad limitada para procesar insumos y siempre buscaremos la forma más sencilla y relevante de interpretar lo que vemos. La teoría de la Gestalt afirma que los humanos buscan patrones, estructura, lógica y forma cuando miramos algo. Y también tendemos a organizar los insumos en grupos. Construir el significado del todo observando las partes individuales. Pero al mismo tiempo, tendemos a percibir el todo como algo más que la suma de las partes. Entonces, cuando miramos sitios web o cualquier interfaz, solo lo miramos en uno. No vemos todos los pequeños elementos al principio. Estos principios son bastante importantes para nosotros como diseñadores de UX. Podemos usarlos cuando diseñamos interfaces porque queremos que las personas puedan entender fácilmente lo que ven y que tengan una idea de lo que pueden hacer en este lado. Y podemos diseñar experiencias más efectivas cuando entendemos cómo las personas realmente agrupan el contenido que ven. Podemos utilizar este conocimiento para organizar contenidos o en sitios web y otras interfaces. Por lo que es fácil para los usuarios entenderlo. Echemos un vistazo a los seis principios. Son proximidad, similitud, figura-tierra, cierre, continuación y cerramiento. Echemos un vistazo a la proximidad. En primer lugar, el principio de proximidad establece que la óptica se percibe como relacionada y parte del mismo grupo si están muy juntas. Entonces todo esto se trata de cercanía. Podemos aprovechar este principio agrupando información similar como secciones similares dentro misma página o aplicaciones web, botones relacionados con campos de entrada y así sucesivamente. Cuando hacemos pruebas de usabilidad, este es en realidad uno de los principios más rotos que vemos. En primer lugar, las cosas que están cerca en un sitio web en realidad no estoy relacionado o al revés. Cosas que deberían estar relacionadas y trasladadas demasiado lejos en una página web. Página web. Echemos un vistazo a algunos malos ejemplos. primer lugar, en este ejemplo, tenemos un ejemplo de un teléfono donde las instrucciones están demasiado lejos de los campos con los que realmente se relacionan. Entonces, si los usuarios están buscando ayuda o no pueden tener una, tienen algún problema de algún tipo. Tienen que luego subir. No pueden simplemente verlo de inmediato o cerca. Esto es un poco lo mismo. Tenemos un formulario donde todas las instrucciones, hay como cinco instrucciones la parte superior y luego muchos campos de entrada. Y nuevamente, porque no se mueven juntos, el uso de no los percibirá como parte de esta misma forma. Aquí tenemos la otra cara de la moneda. Este es un ejemplo donde las cosas que están cerca en realidad no tienen relación alguna. Entonces porque el botón verde aquí está cerca de la barra de búsqueda, asumimos que están relacionados, que podemos presionar el botón verde y luego podemos hacer una búsqueda. De hecho, no están relacionados en absoluto en este caso. Y cuando los usuarios buscan un proveedor, ingresan en los textos en el cuadro de búsqueda y luego simplemente hacen clic en el botón verde porque es una convención común que tienes la barra de búsqueda y el botón de acción ahí. Entonces el botón verde, en un mejor diseño, el botón verde debería haberse alejado o deberían haber sido los botones de búsqueda reales. Piensa aquí en cuanto es el post tu soporte lumbar vital. Entonces ese es el otomano, el medio a la izquierda. ¿Cuál es el precio de la misma? ¿Es del 3099 al cinco o es el 44, 95? La mayoría de los usuarios en realidad asumirán que es el 39, 95. Y parte del problema aquí es que el precio está muy cerca del artículo. Y como sabemos por el principio de proximidad en la teoría de la Gestalt, átomos que están íntimamente relacionados o cercanos entre sí se perciben como relacionados. También hay otros problemas con esto. Tenemos el mismo color de fondo del precio y el artículo que vuelve a crear esa conexión y el gabinete. Así que tenemos casi como un borde alrededor del precio y el artículo. Echa un vistazo a los vestidos rojos de este lado e intenta pensar en qué descripción se relaciona con la imagen. ¿Es el de aquí arriba, el monocromo, o está aquí abajo? Este texto? Entonces la mayoría de los usuarios en realidad asumen que es este texto de aquí arriba, como ves en este ejemplo. Entonces así es como lo agruparía nuestro cerebro porque está cerca de los vestidos rojos. De alguna manera crea esa agrupación de contenido ahí. De hecho, en el sitio web en cuanto al contenido, así es como se pretende agrupar. Entonces lo ves en el lado derecho. Entonces, ¿qué se pudo haber hecho aquí? Podrías haber agregado un poco más de espacio en blanco y no poner aquí un encabezado entre las imágenes y el texto, sino poner el encabezado aquí arriba, las imágenes, los precios, y luego un poco de descripciones. La proximidad es lo que ayuda a los usuarios a entender el contenido. Y aquí tenemos un brillante ejemplo de Airbnb donde han agrupado el contenido e instantáneamente entendemos cómo encajan los elementos. En esta página, hay secciones claras donde el contenido se coloca en proximidad sí y luego se crea esta relación entre el contenido. Aquí, nuevamente, tenemos un ejemplo de un nuevo lado donde han usado secciones claras para los diferentes tipos de contenido sin leer nada, solo hojearlo, tenemos este sentido de los diferentes tipos de contenido. El siguiente principio Gestalt es la similitud. ¿Y cómo se aplica esto al diseño de UI? Pues bien, el principio de similitud establece que la óptica se percibe como relacionada y como parte del mismo grupo si comparten las mismas características. Entonces, cuando diseñamos interfaces y queremos transmitir una relación entre elementos, podríamos intentar darles características similares. Entonces, por ejemplo, al usar colores, formas, diseños, entonces mucha gente los percibiría como parte del mismo grupo, aunque tal vez no estén cerca unos de otros. Entonces echemos un vistazo a algunos ejemplos. ¿Qué pasa aquí? Bueno, hay dos llamados a la acción de su lado que hace exactamente lo mismo. Sí, son un poco difíciles de encontrar. Así que el botón naranja Aplicar ahora no se ve como un botón de ninguna manera. Esto, en primer lugar, rompe las convenciones de cómo debería verse un botón. Y luego tenemos el registro verde, botón de tus intereses. Y debido a que no se ven similares, los usuarios no crearán mentalmente esa conexión entre los dos, haciendo que el sitio parezca más desordenado de lo necesario. Este es otro ejemplo. Entonces esto es de una página de venta de entradas que fue rediseñada. Entonces esto es antes de que ocurriera el rediseño. Aquí. Para entender los precios de los boletos y las opciones de selección, los usuarios tienen que mirar cada sección para entender un poco lo que está pasando. Tenemos diferentes colores, tenemos diferentes números en los campos de entrada y tenemos diferentes premios. Entonces crea esa mirada muy confusa. Entonces echemos un vistazo a cómo se rediseñó esto. Este fue un nuevo flujo de compra de boletos rediseñado. Y tenemos, hemos utilizado el principio de proximidad. Entonces las opciones de precio están cerca una de la otra. Y luego otra vez, similitud. Parecen tres precios de boletos predefinidos. Como usuarios entenderán fácilmente que estas tres opciones están relacionadas. Y luego debajo tenemos la opción de ingresar tu propia cantidad que es visualmente diferente de los precios predefinidos, pero sigue agrupada en el mismo tema de ajuste de pantalla de elegir una cantidad. Aquí tenemos el principio de similitud en uso. Esta es una sección de precios donde todas las diferentes opciones de precios están alineadas de manera similar donde puedes comparar fácilmente. El tercer principio que vamos a ver es figura-suelo. El principio figura-fundamento establece que los humanos tienden a separar la figura del suelo. Entonces la figura principal es en lo que nos enfocamos. El resto se percibe como fondo. En el diseño de UI, podemos ayudar a los usuarios a crear ese enfoque resaltando algo y casi tratando al resto como un fondo, necesitamos crear ese punto focal. En este ejemplo, tenemos un principio roto, un principio de base de figura rota. No hay elementos en la página que realmente destaquen. Hay muchos colores, cajas, no hay muchos espacios en blanco. Por lo que los usuarios realmente no tienen ninguna orientación en cuanto a lo que necesitan enfocarse. Esto podría ocasionar alguna sobrecarga cognitiva. En este ejemplo, el diseño guía al usuario utilizando el principio figura-suelo y enfatizándolo. Entonces, cuando sabemos que las personas perciben elementos y ya sea como objeto de enfoque o como fondo, podemos usar eso para llamar la atención sobre un elemento. Aquí los usos se centrarán en el plan profesional como primer plano y verán el resto como fondo. Y los diseñadores aquí realmente han enfatizado que la figura-tierra es estable cuando los objetos son distinguibles del fondo y el fondo tiene estos intereses. El siguiente principio Gestalt es el cierre. El principio de cierre establece que el cerebro llena las partes faltantes para obtener una figura completa, una imagen completa. Tiene que haber suficiente inflamación para que las personas llenen la parte faltante. Porque construimos sobre nuestro conocimiento previo y experiencia para establecer ese sentido de significado. Por lo tanto, tiene que haber algo para que la gente reconozca para que puedan crear esa comprensión del todo. Aquí tenemos un buen ejemplo de Netflix. Y aunque solo veamos las primeras películas, entendemos que hay más opciones a la derecha. Entonces el cierre está en juego aquí porque nuestras mentes llenan los espacios en blanco de qué esperar más allá de las primeras películas, tenemos experiencia con ello, lo hemos visto antes, sigue una convención también. Además del cierre, proximidad y la continuación también está en juego. El cierre se puede usar cuando necesitamos transmitir un mensaje o reforzar un concepto dentro de un espacio pequeño, brindamos a los usuarios información limitada y luego esperamos que entiendan y encuentren significado en ello. Ejemplos de esto son los iconos, son las notificaciones. necesario que haya elementos simples y despojados a esos elementos básicos para ayudar a las personas a comprender rápidamente su significado. Pero al mismo tiempo, no podemos despojar demasiada información porque entonces no habría suficiente para que los usuarios crearan ese agujero, ese cierre ellos mismos. El siguiente principio del que vamos a hablar es la continuación. El principio de continuación establece que los objetos colocados en una línea o curva se perciben como más relacionados que los que no están alineados. En UI, la continuidad se utiliza cuando ciertos elementos sugieren que debemos dirigir nuestra atención hacia un lugar o dirección específicos. Ejemplos de esto pueden ser miniaturas en una galería, una diapositiva de imágenes o menú desplegable. Entonces, cuando veas un grupo de elementos como galería de fotos, deslizadores, pestañas o incluso listas simples. Ahora podrá notar que están utilizando continuación, este principio de continuación. Objetos. Podemos usarlo en UI cuando colocamos objetos cercanos y luego con ello conseguimos que los ojos del usuario saltaran de uno a otro, uno a otro. Ejemplo de esto es Uber Eats, donde tenemos continuación que juegan en lugares. Tenemos el menú arriba, ya sea que tenga algo así como continuar fuera de la pantalla. Y luego otra vez, lo último Roba el restaurante y premia y así sucesivamente. La continuación no solo funciona para el movimiento horizontal, que también puede guiar el ojo verticalmente a través de una composición, obligándonos a desplazarnos y ver elementos. Entonces, ya lo sabes por Instagram y Facebook y muchas redes sociales utilizan este principio de continuación para engancharnos. En este ejemplo de Airbnb, tenemos elementos consistentes que están perfectamente alineados y agrupados en tarjetas, que luego guían la vista hacia abajo a través de los listados. El último principio gestáltico es el cerramiento. El principio de cerramiento establece que los objetos que tienen un borde alrededor de ellos se perciben como más relacionados. Aquí tenemos un ejemplo donde los productos se agrupan por audiencia. Tenemos el público personal y el público de negocios. Y el color se utiliza para encerrar el contenido de cada uno de estos grupos objetivo. Debido a que se utiliza el principio de cerramiento, el contenido dentro del marco puede tener diferentes expresiones visuales, pero aún así ser entendido como relacionado debido a ese recinto general del, que el contenido para esa audiencia en particular. En el móvil, a menudo vemos el principio de cerramiento que se está utilizando. Porque aquí, el contenido a menudo se presenta en tarjetas, podría estar aquí como notificaciones o podrían ser artículos de noticias, o en redes sociales. Nosotros también lo vemos. En este lado de las noticias deportivas, los recintos se utilizaron de dos formas distintas. Vemos en los artículos, los propios artículos tienen un borde alrededor de ellos, indicando con ello que la imagen y el artículo pertenecen juntos. Y además, el contenido en la parte inferior está encerrado por el uso del color. Se tiene la sensación de que todo el contenido en el área negra está relacionado. No es necesario leer el encabezado para entender eso. Podemos utilizar los principios de la Gestalt y este conocimiento sobre cómo nosotros como humanos percibimos objetos y elementos en un sitio web para organizar el contenido y con ello guiar los usos hacia lo que queremos que vean. Podemos ayudarles a lograr sus objetivos aportando este signo que reduce la carga cognitiva y con ello mejora el significado de la interfaz general. Entonces, en la siguiente lección, vamos a hablar los dos primeros principios de diseño que son jerárquicos en alineación. 3. Principios del diseño: jerarquía y alineación: En algunos vamos a pasar por cinco principios de diseño y ellos son huracán, alineación, repetición, equilibrio y contraste. En esta lección, vamos a hablar de jerarquía y alineación, dos importantes principios de diseño. Vamos a empezar por la jerarquía. Jerarquía es lo que crea organización y ¿por qué es importante? Sí, la gente realmente necesita ayuda. Enfocarse para saber dónde buscar primero, ayudó a descubrir qué es lo que es importante de su lado. La forma en que los usuarios comprenden o leen el contenido es a menudo escaneando. Por lo tanto, podemos mejorar el comportamiento de escaneo proporcionando una jerarquía clara para ayudar a los usuarios a enfocarse en las tareas principales. Por un lado, el cerebro yace. La falta de jerarquía visual impide que el cerebro escanee y se zonifique en áreas de interés. Si podemos entender rápidamente lo que vemos, nos frustramos y probablemente volveremos a dejar el lado. Bueno, este es un ejemplo un poco exagerado. Esto carece totalmente de cualquier jerarquía visual. Los elementos de esta página, es una especie de competencia por la atención del usuario. Y no tenemos idea de dónde buscar. ¿En qué necesitamos enfocar nuestra atención? ¿Qué es importante? No tenemos idea. Y hay que recordar que la gente no lee. Escanean e intentaron encontrar lo que vagamente se parece a lo que buscan. Entonces, ¿cómo diseñamos para la jerarquía? En primer lugar, se trata de organizar los elementos de acuerdo a la importancia. Es la forma en que enfatizamos y elementos con el fin de influir en el usuario para que vea e interactúe con un determinado artículo. Primero, otro segundo, y otro tercio y así sucesivamente. Podemos dirigir la atención de los espectadores mediante el uso de tamaño, peso visual, color y posición también puede crear jerarquía agrupando elementos similares en proximidad entre sí para sugerir esta relación entre información o funcionalidad. Esto se basa en el principio Gestalt de proximidad. Sabemos que el cerebro percibe contenido en proximidad el uno del otro para estar relacionado. Bien, ¿cuál es la información clave de este lado? Imagina que has hecho una búsqueda licitaciones gubernamentales como lo haces. ¿Qué crees que harías? La mayoría de los usuarios en realidad nos dijeron que solo descargarían los resultados. A lo mejor bajarían en el fondo y echarían un vistazo ahí. Pero de nuevo, en realidad no tendrían un lugar claro a donde ir. Nuevamente, recordamos que la jerarquía es lo que ayuda a los usuarios a encontrar la información clave en el orden correcto. Entonces, ¿cuál es la información clave en esta página? En realidad, no hay resultados que coincidan con tu selección. El diseño de este lado no guía al usuario a la información clave. El caso de uso aquí es que los usuarios quieren comprar un boleto para una actuación. Cuando probamos este lado, usa todos seleccionamos la fecha y luego la hora, y luego fueron directamente al botón Continuar. Casi todos los usos faltan ahí. ¿Cómo te gustaría seleccionar tus asientos? Como no se esperaba y en la línea de visión como se movían de vez en cuando al botón. He aquí un ejemplo de gran jerarquía. Este sitio web es de solo texto, pero con diferentes tamaños de fuente, las líneas para separar el contenido, la agrupación de contenido similar, y finalmente, el color. Hay una jerarquía clara. En este sitio web el contenido relacionado se agrupa en diferentes secciones en esta selección donde seleccionan sus categorías de calendario. Y todas las categorías tienen encabezamientos claros y esto crea esta jerarquía visual. En este ejemplo de AirBnB, se ha agrupado el contenido relacionado. Cada baldosa con una casa tiene su propia agrupación de elementos , así como su propia jerarquía. La imagen es lo que nos atrae. Entonces tenemos el titular más duro apartamento estudio es. Así que han usado el tamaño para atraernos. El premio está subrayado y audaz. Las calificaciones se potencian con el color. Información clave como número de invitados, tipo de casa está atenuada con menos visibilidad. Entonces los elementos visuales, con los que realmente han trabajado, los diferentes elementos visuales, la topografía , el tamaño, los colores y el subrayado para crear una jerarquía clara, hablemos de alineación siguiente. La alineación es lo que crea un diseño nítido y unificado. alineación adecuada es una de las mejores maneras de hacer que tus diseños se vean profesionales y que se sientan como si la interfaz de usuario estuviera diseñada deliberadamente. Obviamente, a la izquierda tenemos bastante mala alineación. Y el ejemplo a la derecha tenemos un ejemplo de sitio web muy bien alineado. Nuestros cerebros, patrones de amor. Así que alinear elementos de tu lado realmente permite al usuario ver fácilmente ese orden y estructura. Esto es importante a la hora de hacer wireframes o los diseños visuales finales. Existen diferentes tipos de alineamiento. Se puede alinear a la izquierda. Sensor o paseo, o abajo o arriba, Alonzo, tu contenido. En un sitio web, nos gusta alinear elementos entre sí para que cada elemento, ya sean textos, imágenes, botones, etc., tenga una conexión visual con otra cosa en la página. Horizontal o verticalmente. Aprieta el diseño y lo hace menos desordenado. También se puede utilizar para crear una sensación de conexión entre elementos que podrían no estar muy juntos. Puede que no lo hayas pensado. Pero subyacente, cada sitio web es una lectura invisible, o al menos deberían serlo. Y esto ayuda a crear esa alineación en el sitio web. La grilla es siempre la misma en todo el sitio web, pero se puede utilizar de diferentes maneras. Puedes colocar elementos de diferentes maneras en esa misma cuadrícula para obtener la expresión deseada. No importa si estás haciendo un boceto o una estructura metálica o un diseño más pulido, establecer ese diseño es clave. Entonces quieres tener un pensamiento sobre cuáles deberían ser los márgenes. ¿Cuál es el número de columnas? ¿Cuál debe ser el ancho del canalón? B. Entonces ese es este espaciado entre el contenido y el ancho de la columna también. En cualquier programa de diseño como Adobe o Sketch o Figma, puedes configurar tu propia estructura de cuadrícula. Puedes probar diferentes configuraciones. Normalmente. Para un escritorio HD, normalmente tendrías una cuadrícula de 12 columnas. Entonces esa es una especie de estándar, pero siempre puedes alejarte de eso para hacer algo diferente o para crear otra expresión. A veces trabajarías en un sitio web que ya tiene una estructura de calamar establecida. Entonces claro que solo vas a usar esa. Una vez que haya establecido su estructura, puede comenzar a agregar elementos a esa estructura, asegurando que los elementos estén alineados con otros elementos en esa página. Así que juega con la colocación de los elementos para crear esa interesante capa efectiva con una jerarquía clara. La distribución de los elementos es otro aspecto de la alineación. Entonces aquí tenemos algunos elementos. Parece que acaban de ser arrojados. Podrían ser imágenes, podría ser texto , podrían ser botones. Entonces, una manera de apretarlo es trabajar con esta función en el programa de diseño que estás usando. De manera que esa distribución vertical y horizontalmente para crear ese orden y sentido de organización. lado, aquí, tenemos un aspecto mucho más claro, más limpio y se ve más profesional. Por este lado, tenemos una expresión un poco compleja. No hay muchos de los elementos de contenido o sección que se alinee con cualquier otra cosa de este lado. Entonces se puede ver que la alineación horizontal aquí arriba es bastante buena. Y luego pasamos a la siguiente sección. ¿Eso está alineado? Entonces tenemos los dos artículos, pero luego estas tres vías realmente no se alinean con el resto del contenido. Si nos fijamos en la alineación vertical, aquí tenemos estas secciones, la salud y el bienestar. ver si eso se alinea con algo abajo la página aquí no se alinea realmente. Entonces, una manera de endurecer este diseño es asegurarse que algunos de estos elementos de aquí arriba en realidad estén alineados con el, algunos de los artículos ahí abajo que crearían una forma mucho más tranquila y ordenada Mira. En este ejemplo, en realidad han intentado romper la grilla. Por lo tanto, también hay una estructura de cuadrícula subyacente en este sitio web. Pero para crear esa conexión entre esta sección de aquí arriba y los otros tipos de contenido aquí abajo. Han solapado las diferentes secciones para crear ese flujo y dinámica en este lado. Así que desplázate y no para desplazarte aquí. Esa es la pregunta. Usaría el pergamino aquí, ¿se desplazaría? Obtenemos esta sensación de este espacio en blanco horizontal de que la página probablemente esté terminando ahí mismo, obtenemos esa sensación de finalización. Hay más contenido de este lado. Entonces este ejemplo solo muestra eso, muestra que queremos evitar este espacio en blanco horizontal porque crea esa sensación de finalización para el usuario. Uh, estudios de 2018 mostraron que los usuarios gastan alrededor del 57% del tiempo de visualización de su página por encima del pliegue. 74% del tiempo de visualización se pasó en los dos primeros fulls de pantalla. Entonces los usuarios en realidad se estaban deteniendo en las dos primeras secciones. Pero para evitar esto, podríamos, como vimos en el otro ejemplo, tratar de tener elementos superpuestos a lo largo del sitio para crear ese flujo hacia abajo y no crear esa sensación de finalización. A continuación, tenemos el resto de los principios de diseño. Y son repetición, equilibrio y contraste. 4. Principios del diseño: repetición, equilibrio y contraste: En esta sección vamos a cubrir los principios de diseño que son la repetición, el equilibrio y el contraste. Empecemos por la repetición. La repetición es lo que unifica un diseño que tiene muchos elementos diferentes. Entonces los principios de repeticiones o patrones simplemente significa que reutilizamos los mismos elementos, son elementos similares a lo largo del diseño. Repetición de ciertos elementos de diseño en un diseño, traeremos ese claro sentido de unidad, consistencia y cohesión. Al repetir elementos de un diseño, inmediatamente, creas ese sentido de familiaridad o identidad y das a los usuarios una sensación de consistencia y cohesión. La repetición se puede hacer de varias maneras. Se pueden repetir los mismos colores, botones, estilos, patrones de interacción, formas tipográficas para el estilo gráfico u otros elementos de un diseño. A menudo las empresas, es que hay un sistema de diseño que define los estilos de los botones, los patrones de interacción, los iconos, la tipografía, etc. por lo que estos elementos se pueden repetir a lo largo de sus productos exactamente para crear este sentido de cohesión e identidad en sus productos. La consistencia es el resultado. Entonces, cuando repites los estilos, entonces solo tienes botones redondos y no botones cuadrados. Tienes la misma universidad A lo largo la misma topografía y demás. Evitas esa interfaz de usuario desordenada. Empecemos con algunos malos ejemplos. Cielos, este es uno de esos ejemplos de sitios web que son tan malos, casi piensas que no existen. Lo he incluido solo por diversión. Para hacer un punto. La falta de repetición y coherencia aquí es simplemente indignante. Es tan inconsistente. Tiene muchos colores, mucha diversión. Tiene letras mayúsculas, minúsculas. Tiene botones y llamadas a acciones por todas partes. Todo es solo que parece que lo han tirado. Está mal en tantos niveles. ¿Cómo es la consistencia de los botones aquí? Echa un vistazo. Así que tenemos tres botones azules diferentes y todos tienen, primer lugar, no están alineados con los campos de entrada con los que están relacionados. Pero tienen diferentes estilos visuales, algunos R-cuadrados, algunos más rectangulares. Tienen diferente topografía en su interior. Y nuevamente, diferentes estilos visuales de los botones. Ya hemos visto este ejemplo antes. En realidad hay dos botones en este lado. Entonces el estilo del botón naranja se parece en realidad al elemento visual que se usa en la parte inferior aquí. Vamos a explorar. El botón verde. un elemento interactivo real. consistencia en el estilo aquí sería útil para el usuario. Aquí hay otro ejemplo de solo un sitio web inconsistente donde los encabezados son diferentes, sus mayúsculas y minúsculas. Tenemos subrayado en texto que no son enlaces. Entonces esa es la convención que subrayan el texto es el enlace que no se ha utilizado. Y básicamente, solo crea esa impresión muy desordenada de este lado. Aquí tenemos un ejemplo sencillo pero bueno de repetición. Hay consistencia en la combinación de colores. Los estilos de botón son todos similares. Entonces tenemos, tiene este color degradado, botones redondeados. Los diseños de las tarjetas también tienen esquinas redondeadas y consiguieron consistencia en términos de los encabezados y el texto del cuerpo a lo largo del diseño. En este ejemplo, también tenemos buen ejemplo de repetición. Tenemos los elementos visuales, las tres franjas que se repiten en todo el sitio. Tenemos un esquema de color consistente, las mismas fuentes utilizadas y luego tenemos los botones de donar morados para la donación. Y luego los otros botones de acción son amarillos. Entonces en este caso, usan el botón de color púrpura para que realmente destaque. En realidad han roto esa repetición de estilos de botones aquí. Echemos un vistazo al principio de equilibrio. Equilibrio proporcionar estabilidad a un diseño y atractivo impactos. Equilibrado juega un papel importante exactamente en el atractivo de un sitio web. El equilibrio tiene que ver con los pesos visuales de los elementos que colocas en un costado. La forma en que diseñamos elementos en una página para crear esa sensación de equilibrio, de calma. No queremos que el diseño sienta que se vuelca sobre r, porque cuando los sitios web están equilibrados. Los usuarios obtienen esta sensación de estabilidad y simplemente calma. Hay dos tipos principales de saldo. Tenemos equilibrio simétrico y equilibrio asimétrico. Diseño simétrico, elementos de diseño en un peso igual cada lado de una línea central imaginaria. Esta forma de equilibrio a menudo trae una sensación armoniosa demasiado a un lado. Y este es el tipo de saldo más común cuando se trata de sitios web. El equilibrio a través de la asimetría es cuando creamos equilibrado mediante el uso de tensión. Por lo que deliberadamente jugamos los elementos no en un peso igual de un lado del centro, sino que lo colocamos de una manera interesante en el sitio web, creando esa tensión, pero aún así una sensación de equilibrio. Aquí tenemos un sitio que no está tan bien equilibrado, así que hay enormes trozos de espacios en blanco. La única imagen que se puso ahí, el único artículo simplemente da un poco más de punta al diseño. Se siente como que simplemente no se siente muy armonioso. Este es un ejemplo de un sitio web simétricamente equilibrado. Todo en este lado es una línea alrededor del eje central. Incluso los textos están alineados al centro en todas partes. Otro ejemplo de equilibrado a través de la simetría, si bien tenemos todos los elementos alineados al centro, no tiene que hacerlo. Los encabezados y las imágenes del héroe no necesitan estar alineados en el centro para que sea una especie de sitio web equilibrado. Todavía puedes tener un equilibrio global a través simetría o asimetría. Este es un ejemplo de equilibrado a través de la asimetría, se puede utilizar para crear una expresión más dinámica. Aquí, el equilibrio se logra mediante de elementos de diferentes tamaños y pesos en combinación con espacios en blanco para crear un diseño que sea más dinámico, pero que aún tenga esa sensación de equilibrio. Aquí el equilibrio se logra empujando la estructura de la rejilla. De hecho, tenemos una especie de sección principal alineada a la izquierda bastante sencilla . Y luego hay algo de juego con las fuentes para crear un diseño más impactante. Entonces este es un sitio web de industrias innovadoras. Por lo que este sentido de dinámica y asimetría se vincula bien con toda la experiencia de la marca. El siguiente principio de diseño por el que vamos a pasar es el contraste. contraste es la forma más efectiva de crear, enfatiza un impacto con tu diseño. Cuando un diseño realmente destaca, o Dios no lo quiera, aparece, como algunos dirían, lo más probable es que haya algunos contrastes involucrados. contraste juega un papel importante a la hora de organizar la información en una página. Ayuda al usuario a los contenidos y tareas importantes. El contraste también es muy importante cuando se trata de diseño accesible. Al crear diseños accesibles, el contraste puede dificultar la lectura del contenido, especialmente para personas con discapacidad visual. Se puede crear contraste cuando se utilizan dos elementos que son totalmente opuestos. Esto podría ser tamaños de fuente grandes o pequeños o elementos pequeños más grandes. Aquí tenemos un ejemplo donde el encabezado es enorme comparado con los tres tipos de llamada a acciones. Entonces esa es solo una forma sutil de usar ese contraste para crear esa primera impresión impactante. De nuevo, aquí tenemos contraste en tamaño. Han estado jugando con textos de diferentes tamaños, imágenes para crear contraste. El contraste también se usa cuando mezclamos fondos clásicos y contemporáneos. Así que aquí cuando hemos mezclado la fuente Serif, así que ese es el tipo rizado de dos fuentes con una fuente san serif, este tipo de fuente cepa. Entonces ese es un contraste que crea algo de dinámica también. Mailchimp está usando que hace un tipo fases en sus diseños. Entonces obtuvieron sus encabezados como fuentes Cera, y luego tienen los textos del cuerpo como una mezquita donde el color de fuente sans serif también es una forma efectiva de crear contraste. Por ejemplo, a Botones de llamada a la acción que destaque o coloren para llamar la atención sobre algo en la página. Ambos sitios han utilizado colores llamativos para crear algún ejemplo de impacto de buen contraste para contrastar principalmente a través del uso del color. En el ejemplo de Spotify, acabamos de obtener el contraste a través del uso del color. Entonces tenemos ese color de contraste verde que destaca del resto del fondo. También podemos crear contraste mediante el uso de espacios en blanco. Básicamente el espacio negativo o el espacio en blanco, como suele llamarse, es el área del layout que se deja vacía. Puede estar alrededor de los objetos como aquí a la derecha, por ejemplo, alrededor de botones o texto en general. Pero también podría ser el lugar dentro del botón como ejemplo a la izquierda, el espacio en blanco es una especie de respiro para todos los objetos que dispones en tu página en tu pantalla. Al igual que con otros elementos de la interfaz de usuario, usted como diseñador necesita comprender el papel que juega el espacio en blanco. Y luego puedes experimentar para encontrar el equilibrio adecuado de la misma para encajar con el resto de los elementos. Masa para ir de Interaction Design Foundation declaró que los espacios en blanco son como un lienzo. Es el fondo el que mantiene unidos los elementos en un diseño, permitiéndoles destacar. El choque inicial es casi demasiado para muchos. De este lado. Es una especie de ejemplo divertido, así que lo incluí. De todas formas. El contenido y diseño son tan abrumadores por este lado. Y cuando lo desgloses, todo se debe a la falta de espacios en blanco. Entonces no hay donde enfocarte y descansar tus ojos. Los usuarios están por todas partes y los elementos en el lienzo son simplemente abrumadores. Está tirado. Aquí, tenemos un mal uso de los espacios en blanco. Es casi como esto accidentalmente se han creado algunos espacios en blanco debido a la falta de artículos en la tienda. Pero no obstante, esto crea un desequilibrio en el diseño. Aquí tenemos algunos buenos ejemplos de cómo espacios en blanco realmente permiten que el contenido respire. No estás abrumado. Se puede ir comúnmente de una sección a la otra. Y otro punto a hacer es que el espacio en blanco no tiene que ser amplio. Puede ser un lienzo colorido. A continuación, tenemos una sección sobre elementos visuales. Vamos a pasar por la tipografía de color y la iconografía. 5. Elementos visuales: color, tipografía e iconografía: En esta parte del curso, vamos a pasar por algunos de los elementos visuales que podemos usar en la parte visual del proceso de diseño. Entonces eso es color, tipografía e iconografía. Y vamos a empezar con el color. El color es una herramienta psicológica bastante poderosa para involucrar a los usuarios en el diseño de un producto. El color indica qué elementos son interactivos, cómo se relacionan con otros elementos, y también su nivel de prominencia. Elementos importantes deben destacar más como aquí, donde está claro que hay un claro llamado a la acción. Un botón amarillo que aparece. Los textos y elementos importantes como los iconos también deben cumplir con los estándares de elegibilidad cuando aparecen en fondos de colores. Por lo que aún deben ser legibles y claros. Los botones, los iconos, y todos los elementos realmente que pones en ese lienzo. El color también establece el estado de ánimo de un diseño. Entonces, por ejemplo, aquí tenemos tres sitios web diferentes, y está claro que todos marcaron de manera bastante diferente con el uso del color. El primero, que es bastante vibrante y muy enérgico. Y luego tenemos el del medio que tiene una vibra más orgánica que él. Es una especie de tono abajo de colores terrosos. Y luego tenemos a Lorna Jane, una de sus gamas. Eso es más una especie de tono suave y femenino para ello. Para que puedas crear un ambiente de elegancia, de calidez o tranquilidad mediante el uso de la combinación de colores correcta. O puedes transmitir esa imagen de más lúdica y juventud. Hay muchas consideraciones hora de elegir colores para el diseño. El éxito de las elecciones de color depende la comprensión de los espectadores y la apreciación del color, dependiendo de sus antecedentes, sus experiencias pasadas. También prueban. Cuando empezamos a usar el color en nuestros diseños, tenemos que ser conscientes de las diferencias culturales. Sólo un experimento aquí. ¿De qué color asociarías con la muerte? Curiosamente, eso es bastante diferente de una cultura a otra. Entonces, en la cultura occidental y japonesa, ese color es el negro, mientras que en las culturas china e hindú, es por eso que en las culturas sudamericanas, es verde. Entonces esa es solo una forma interesante de ver el color. ¿Qué significa rojo para ti? ¿Otra vez? En las culturas occidentales, significa peligro. Significa barato y una ganga. Mientras que en la cultura china, significa éxito y riqueza. En la cultura occidental, un mercado de acciones en podría tener acciones que suben se muestran como verdes, lo cual es bueno, y las que van bajando como rojas. Mientras que en China, las acciones que aumentaron en valores podrían mostrarse como rojas ya que eso es una señal de éxito. Y bueno, es bastante interesante aquí puedes entrar en este sitio web y luego puedes ver esta visión general de los diferentes significados culturales de los diferentes colores. Siempre es bueno volver a consultar cuando estás usando colores. Cuando diseñamos con color, es bueno saber que en realidad hay una ciencia en la forma en que funciona ese color. Probablemente todos lo hayan visto antes 100 veces, mil veces en las escuelas primarias y hasta ahora mismo. Pero sólo vamos a volver a pasar por lo básico. Tenemos la rueda de colores, que muestra los colores primarios, amarillo, azul y rojo. Y luego tenemos los colores secundarios, que están igualmente mezclados entre los colores primarios. Entonces tenemos los colores terciarios, que es como los colores secundarios medios primarios. Por otra parte, tenemos las diferentes gamas de los colores más cálidos, más calientes, más fríos y fríos combinan colores de la rueda de colores de diferentes maneras. Entonces una de ellas es tener un esquema de color monocromático. Por eso eliges un color y luego diferentes variaciones de ese color. También puedes tener una paleta de colores simpática. Ahí es cuando usas el color cerca uno del otro en la rueda como esta instancia aquí donde tenemos colores terrosos en ambos casos. Si quieres crear una expresión más dinámica, puedes usar colores complementarios. Ahí es cuando usas colores directos opuestos de la rueda de colores. Y entonces los colores se intensificarán entre sí. Aquí tenemos dos ejemplos. Tienes la vitalidad a la izquierda, y luego tienes la versión más tonificada, el paseo. Por lo que el color complementario se puede usar tanto de una manera más vibrante y brillante, pero también si trabajas con él con una paleta de colores más tonificada. Hay algunas herramientas diferentes que puedes usar para tener un gol y jugar con las diferentes paletas de colores. Canva tiene uno genial en su sitio donde eliges un, eliges un color y luego eliges si quieres que sea monocromático, complementario o lo que quieras. Y luego te da algunos ejemplos de combinaciones de colores basadas en eso. Para que puedas entrar ahí y echar un vistazo a eso. Adobe tiene otro Hola, elige una herramienta de color donde podrás experimentar con las diferentes combinaciones de colores que puedes elegir si lo deseas. Tríada monocromática analógica complementaria. Como ya han visto, hay muchas más combinaciones por las que he pasado hoy por aquí. Entonces, si quieres cavar en él, puedes, puedes ir al sitio de Adobe y jugar con él y ver qué tipo de pellets sale de él. Así que el color también es importante para la accesibilidad en nuestros diseños, queremos asegurar un buen contraste. Esto es especialmente importante para cualquier dispositivo que se utilizará en el exterior. Para una aplicación móvil, una máquina expendedora de boletos, etc. No solo para personas con discapacidad visual o personas con otras discapacidades. Siempre queremos poner los primeros planos oscuros contra un fondo claro o al revés. En realidad, a menudo se crea un buen contraste al combinar colores complementarios. Pero el truco es, o la parte complicada es que si la saturación es demasiado alta, puede crear esta vibración visual, como a menudo se sabe por tener rojo y verde. Entonces queremos evitar el rojo y el verde juntos o un azul brillante sobre un fondo rojo brillante. Nunca queremos usar el color solos para diferenciar entre artículos. Sabemos que el diez por ciento de los machos son daltónicos y es alrededor del 1% de las hembras las que son daltónicas. Entonces aquí a la izquierda, tenemos una imagen de estos sombreros. Y así es como se ve para la mayoría de la gente. Pero las imágenes a la derecha es lo que parece para las personas con diferentes formas de daltonismo. Básicamente no pueden diferenciar los artículos entre sí. Echa un vistazo a este diseño y luego piensa en cómo podrías mejorar este diseño en base al conocimiento que has tenido hasta ahora del color. En este ejemplo, el rojo y el verde son la única forma indicar si los iPhones están disponibles en tu tienda local o no. Entonces, si llamaras a un ciego, ¿cómo sería esto? Probablemente se vería así y no podrías diferenciarlo. Entonces, lo que podríamos hacer para que este diseño sea más accesible, no solo podríamos mostrarlo como rojo, sino que podríamos mostrarlo tal vez como una Cruz Roja y luego una garrapata verde. Entonces al menos entonces tendrás dos variaciones diferentes, dos formas diferentes de mostrar la disponibilidad en ese lado. Como diseñadores de UX o UI, es útil saber que existen diferentes sistemas de color, aunque probablemente no vas a usar ambos, ¿vas a estar usando principalmente RGB? Entonces, como regla general, el sistema de color RGB se usa solo en diseños digitales y cuando estamos diseñando para la web. Entonces este es un sistema de color que están usando programas como Figma Sketch, Adobe. Esto incluye diseñar sitios web e imágenes y gráficos para sitios web y redes sociales. Entonces todo lo digital. Piensa en RGB. Entonces eso está en la configuración. Si quieres usar esos diseños en impresión, tendrás que convertirlos a color CMYK. Y si quieres adentrarte más en eso, y ahora sabes que existe, así puedes profundizar más en eso si quieres saber más al respecto. Genial, Pasemos a la tipografía. tipografía es el arte de ordenar letras y textos de una manera que haga que la copia sea legible y clara y visualmente atractiva para el radar. La topografía juega un papel importante en el diseño de interfaces de usuario. Cuando diseñas un producto, es crucial poder comunicar claramente su intención y propósito a Estados Unidos. Y esto se hace comúnmente mediante el uso de texto. Una buena tipografía establecerá una jerarquía fuerte. Proporcionará equilibrio gráfico al sitio web y también establecerá el tono general de los productos tal como nos coloreó. La tipografía debe guiar e informar a tus usuarios, optimizar la legibilidad y accesibilidad, y garantizar esa excelente experiencia de usuario. Entonces hay diferentes tipos de tipos de letra, que podrían ser fontanela. Entonces hay serifs, hay sans serifs, y hay más estilos de guiones decorativos y luego hay serifas de losa. Entonces las fuentes serif tienen eso, esos pequeños trazos decorativos, también conocidos como las serifas. Y luego tenemos la estrofa de la segunda F. Envíame con ese medio sin en francés. Entonces las caras tipo san serif son las que no tienen esos pequeños rizos. letra guion imitaban la escritura a mano. Las letras están conectadas. Entonces tenemos la serif de losa, que básicamente es parte de la familia, pero tiene como serifas gruesas en forma de bloque. Es un poco más audaz. El surf se remonta a la década de 1400. Y la razón por la que tienen estos pequeños piensos es en realidad por el tallado en piedra. Así que en sus tiempos y cuando la gente necesita tallar letras latinas en piedra, el diseñador solía pintar las letras con un pincel. Y entonces el cantero tendría que labrarlo de esa pintura. Y esa talla de piedra creó estas serifs en las letras. Hoy. La mayoría de los libros tienen letras serif, son fuentes serif porque es más fácil para el ojo leer si algo a lo que nos hemos acostumbrado. Mientras que en, en sitios web, serifs no son tan comunes para el texto corporal. El único lugar en el que somos el lugar más común que vemos es en sitios nuevos. Entonces, por ejemplo, aquí en el sitio web de guardianes, hemos obtenido una fuente serif utilizada tanto como encabezado como texto corporal. La fuente serif, el estado de ánimo es la fuente estable, respetable, atemporal, formal, tradicional y elegante. Y algunos de los ejemplos Times New Roman, Georgia, Palatina, y Garamond, y algunas de sus subfamilias. Por lo que el alguacil tiene cuatro tipos diferentes de familias. Entonces hay serifa de estilo antiguo , de transición, moderna y de losa. Entonces, si quieres, de nuevo entra en más detalles, puedes hacerlo. Aquí hay un ejemplo de cómo se han usado las fuentes Cera en los sitios web porque tienen más detalles, tienden a funcionar mejor con tamaños más grandes. Entonces, por ejemplo, como aquí, los titulares, su trabajo bien con copia web más pequeña hecha con una fuente sans serif. El san serif es simple, la cara sensata de tipo directo. Lo conocemos en Helvética. Uno de los tipos comunes de fases tipo diseño, REL a Homero u otra Diana, el sensor de nuevo, tiene cuatro tipos diferentes. Esos son lo grotesco, lo nuevo grotesco, lo humanista, y lo geométrico. Y todos tienen sus distintos conjuntos de caracteres. En general, la mayoría de los sitios web utilizan las fuentes serif. Es muy neutral, es fácil de leer, y es muy legible a menudo, y no ofenderá a nadie si quieres. Los sonidos que tengo también pueden tener un aspecto muy limpio, ya que aquí en la combinación de espacios en blanco y ese contraste, realmente tiene un impacto. letra de script imitaban la escritura donde las letras están conectadas. El guión debe usarse en pequeñas dosis cuando sea apropiado porque son difíciles de leer. Entonces es mejor usarlo como decoración o simplemente como elemento gráfico. El tipo de letra mood es como más femenino, personal, elegante y bonito. Pero de nuevo, es difícil de leer, así que es mejor simplemente meterlo como decoración. Las serifs de losa, toda su familia con las serifs de bloque grueso. Slap Sarah se desarrolló originalmente para titulares de noticias para aumentar la legibilidad y el impacto. Y eso es lo que este laboratorio conjunto de puertas. Se utilizan principalmente para titulares grandes, pero rara vez en tomas corporales. Entonces como ves aquí, un titular impactante y luego otra vez un cuerpo de Sarah envía mensajes de texto. Pero ese titular realmente destaca. El estado de ánimo de eso es algo importante. Es para mostrar un diseño audaz, impactante y su intención agarrando algunos de los tipos de letra. Lo sabemos. escribir americana, laboratorio alphas y slap sellador, usar fuentes san serif y sans serif juntas ahora es una práctica común en el diseño de interfaz de usuario para mantener la interfaz en él, aunque, y mantenerlo un poco más aerodinámico. No queremos usar más de un máximo de tres fondos. Y queremos mantener al mínimo las fuentes decorativas. Recuerda nuevamente, como siempre, las mejores opciones de fuente son aquellas en las que el lector en realidad no está, no, no notes la fuente sino el mensaje. Bien, echemos un vistazo a este gran ejemplo. ¿Cuántas fuentes diferentes ves en este ejemplo? Tenemos tipos de letra Script. Incluso conseguimos Comic Sans, que es un no-go para todos los diseñadores más o menos. Tenemos realmente, solo tenemos un uso inconsistente de fuentes aquí. Entonces usando los mismos fondos y realmente endurecería este diseño y crearía una mejor jerarquía. Algunas pautas evitan las mayúsculas porque las letras mayúsculas en, como las puntuaciones, minúsculas, es más fácil y rápido de leer. No lo hagas más difícil de lo que tiene que ser. No use script. Todas las mayúsculas son más lentas de escanear. Y mucho texto subyacente también es difícil de escanear. También es importante considerar el tamaño del texto. Una buena regla general es duplicar o la mitad del tamaño al cambiar de tamaño bastante. ejemplo, si estás usando 32 píxeles para el encabezado, entonces tienes 16 píxeles para los textos del cuerpo para crear contraste. O al menos ese es un buen punto de partida para duplicar el cabezazo. También queremos considerar la altura de línea. Entonces, a la izquierda, el diseño se ve un poco abarrotado y esta frase realmente muestra que es importante obtener esa altura de línea correcta en tus diseños. El espaciado entre letras o kerning es el espacio entre las letras. Es importante obtener la cantidad correcta de ese espaciado entre letras en su diseño para que no se sienta como abarrotado y haga que sea difícil de leer para los EE. UU., La longitud de línea también es bastante importante. Y el ancho, el ancho de tus cuadros de texto, es mejor tener líneas más cortas para mejorar la legibilidad. Y es más rápido y más cómodo de leer. Una longitud de línea sugerida para la pantalla de 60 a 80 caracteres basada en un tamaño de pantalla de 1,440 píxeles y el tamaño de fuente a 16. Para más móviles, debería tener alrededor de 35 a 45 caracteres por línea. Alineación. Ya lo hemos hablado antes. Queremos alinear a la izquierda para una mejor legibilidad. Si tu centro, está bien. Si no usas más de tres a cinco líneas, cuando se alarga más que eso, puedes ver cómo a la izquierda. Tenemos esa alineación central y hace que sea muy difícil de leer. Mientras que a la derecha, tenemos esa mejor legibilidad. La justificación es especialmente importante para las personas con dislexia. Los textos plenamente justificados pueden crear estos ríos de espacios en blanco, lo que dificulta su lectura. Entonces está bien para imprimir. Para noticias como pegar papeles por ejemplo, donde se puede ajustar el kerning pero no en digital. Hablemos de iconografía. Ya hemos hablado de iconografía antes cuando estábamos pasando por el principio Gestalt de. Entonces, cuando usamos íconos, suele ser para transmitir un mensaje o comunicar una idea en una cantidad limitada de espacio. Cuando hacemos eso, hay algunas cosas que debemos tener en cuenta. Necesitamos apoyar siempre los íconos con palabras para realzar el significado. Entonces, por ejemplo, en tu teléfono tienes todos tus íconos de aplicaciones, pero siempre tienes esa etiqueta debajo, diciéndote de qué se trata esa aplicación. También deben ser significativas para la mayoría de los usos. Tiene que transmitir el significado suficiente para que los usuarios hagan esa conexión y hagan ese cierre de lo que es el significado de eso simple. Entonces aquí tenemos una lista de tareas, un ejemplo de una lista de tareas, donde es como tres puntos en un círculo rojo, lo que realmente no transmite ese significado de tarea. Entonces, en cambio, podríamos diseñarlo como un papel con un bolígrafo. Otra cosa en la que pensar es que los símbolos o íconos suelen ser culturalmente específicos. Pueden significar cosas diferentes en diferentes culturas. Entonces, por ejemplo, en Australia, había una aerolínea que lanzó un vuelo a Corea y estaban repartiendo esta flor blanca de clavel. Pero simplemente no pensaron en el hecho de que en la cultura coreana esta flor es un símbolo de muerte. Así que eso no bajó tan bien. Por último, el icono no debería ser demasiado detallado porque entonces como todo el punto es tener un mensaje simplificado en poco espacio. Así que solo hazlo simple. Muchos íconos son universalmente adoptados como los casos con estos íconos que tenemos aquí, tenemos el bloqueo por seguridad, tenemos el botón de reproducción, tenemos el disquete, que podría tener la conexión con el artículo original de un disquete. Pero sabemos que significa guardar. Incluso, incluso los más jóvenes saben que a pesar de que nunca antes habían visto ese artículo, hay otros íconos que se entienden con menos frecuencia. Entonces estos son algunos ejemplos aquí tenemos el, el menú de hamburguesas. Y luego junto a eso, Ese es otro tipo de menú llamado el menú de kebab. Tienes la hamburguesa y el kebab. Ellos, a pesar de que usan comúnmente, no siempre se entienden comúnmente. Aquí, tenemos un buen ejemplo del uso de íconos donde son claros, son legibles y tienen esa etiqueta debajo. A continuación, a menudo hemos recibido una lección sobre la cognición humana y el diseño de IU. 6. cognición humana y diseño de interfaz de usuario: En esta lección, vamos a cubrir la cognición humana y el diseño de IU. Entonces hablemos del concepto de affordance. Entonces este concepto es básicamente donde las características físicas influyen o implican cómo se puede interactuar con el objeto. Entonces tengo una foto aquí de un joystick. Entonces puedes darle esto a un tres años y realmente no necesitas dar instrucciones. Es bastante intuitivo y obvio cómo usarlo. Las características físicas sugieren dónde pones mano cuando presionas cosas así. Entonces cuando hablamos de diseño web y diseño de interfaces de usuario y sistemas, tenemos este concepto de affordance funciona bastante obvio para el usuario. Lo que tienes que hacer lejos. Hay que ir en base las características de ese objeto. Entonces aquí hay un ejemplo de pobre o cuatro meses. Fui a este sitio web la semana pasada. Estaba buscando algo y no pude no pude trabajar en cómo interactuar con una búsqueda. Entonces estoy pinchando en él pensando, Oh, cuando haga clic en él, saldrá con una cajita blanca con la que puedo hablar. Y no fue hasta que básicamente entré en ello y le hice clic en torno a él que me di cuenta de que, oh, ahí es donde tienes que rematar. Entonces hubo una pobre asequibilidad. No me quedó claro dónde tenía que escribir en este ejemplo. Ahora imagina que te has ido y G banca por internet algún día y te he preguntado, ¿Quieres completar la encuesta? Entonces esta es una pantalla y me presentaron. Y piensa en qué crees que probablemente harías clic en esta pantalla? Así que échale un vistazo, mira lo que piensas. ¿Dónde crees que harías clic? Entonces, si eres como yo, hiciste clic en el botón gigante grande Cerrar porque solo hay un botón, ¿verdad? No puedes equivocarte. No tienes que decidir. No tienes que leer realmente el botón porque solo hay uno para elegir. Entonces este es un buen ejemplo de que es buena asequibilidad. Pero en este caso, es un poco engañoso y el flujo visual de la página está dirigiendo incluso esa gran flecha gigante está apuntando a los botones. Entonces mi yo y mi atención estamos realmente enfocados en ese botón. Entonces realmente no necesito leerlo porque está bastante claro qué hacer. Pero de hecho, lo que hace el botón es cerrar la encuesta. Entonces, de hecho, lo que tenías que hacer era hacer clic en cualquier parte de ese banner que nos ayudara a ayudarte, y ahí es donde harías la encuesta. Entonces ese ejemplo que acabo de mostrarte es un ejemplo de flujo visual y donde tu ojo es una especie de movimiento por la página y donde se sienten atraídos. Para el flujo visual, el flujo natural para la pantalla para la mayoría de las personas en todo el mundo es de izquierda a derecha, de arriba a abajo. Entonces la mayoría de los usuarios inician en una página web o una pantalla o un sistema, y voy a la parte superior izquierda de la página y trabajan su manera que leo todo de arriba a derecha, de izquierda a abajo. Pero, de alguna manera, funcionan naturalmente a través esa página y generalmente terminan en la parte inferior derecha. Entonces piensas en algo así como un formulario, tu lugar lógico para tener un botón siguiente o enviar es generalmente ese abajo a la derecha de la pantalla. Para algunas culturas, por ejemplo, el árabe, donde podrían moverse de derecha a izquierda, podría ser un poco diferente. Pero para la mayoría de las culturas, mayoría de las culturas occidentales y muchas culturas asiáticas, es de izquierda a derecha, de arriba a abajo. Entonces, échale un vistazo a este ejemplo. Este es un sitio que probamos. ¿Cómo crees que los usuarios podrían moverse por esta página? Entonces, por ejemplo, en este ejemplo, tuvieron que elegir la fecha y hora del desempeño. Entonces una vez que escojo la fecha, luego la hora, 08:00 P.M. ¿Qué crees que hicieron? Probablemente tengas razón si consigue eso, todos salieron directamente de ese gol de IPM malo, derecho al botón oro Continuar en la parte inferior. Pero lo que la mayoría de la gente se perdió es que abajo a la izquierda, ¿cómo le gustaría seleccionar sus asientos? Entonces, afortunadamente, no fue un gran problema porque la mayoría de la gente extraña esto. Pero el defecto era lo que la mayoría de la gente quiere hacer de todos modos, que es elegir sus propios asientos. Pero la mayoría de la gente descarta eso. Entonces, ¿piensa en dónde podrías mover eso? Entonces eso fue en ese flujo visual. Así que potencialmente puedes mover la forma en que te gustaría seleccionar tus asientos debajo de la hora en que comieron PM para que tus ojos realmente se muevan a través eso y es más probable que lo notes cuando se está moviendo hacia ese botón Continuar. Entonces esa es una solución bastante simple. Aquí hay otro ejemplo. Este es un buen ejemplo de buen flujo visual. Entonces en este ejemplo, gente está buscando a un miembro del personal. Ahora mucha gente solo quiere escribir un nombre y hacer clic en Buscar. Pero como son, como enseñaban en el nombre, sus ojos tienen que moverse por estos otros campos, palabras clave, división, ubicación. Ahora pueden simplemente ignorarlos si quieren, pero en realidad podrían ayudar a estrechar su búsqueda para que los ojos que se mueven a través de ellos, sean más propensos a notarlos. Entonces este es un ejemplo de un buen flujo visual. Me gustaría hablar sobre el skeuomorfismo. Ahora bien, aquí es donde un objeto en el software imita a la contraparte del mundo real. Entonces este es un ejemplo de morfismo de habilidades. En este ejemplo, tenemos la aplicación de notas antiguas en Apple iOS. Entonces aquí, los blocs de notas parecen una verdadera clavija conocida en el mundo real. Se trata de simular la experiencia del mundo real. Entonces tenemos un cuaderno amarillo. Tiene líneas sobre eso como en el mundo real. Y básicamente está bastante claro lo que tienes que hacer. Simplemente funciona como el mundo real versus la nueva aplicación de notas es más o menos una pantalla en blanco con un par de herramientas e iconos en la parte inferior. Entonces no es nada intuitivo sobre cómo usar esto. Entonces este es un ejemplo a la izquierda, un skeuomorfismo. A veces a estas también se les llama metáforas habituales. Y hay ciertas ventajas al usar metáforas visuales. metáforas pueden poner conceptos abstractos en términos concretos y lo hacen un poco más claro en algo como el pago de notas si no lo has usado antes. Y facilita que las personas entiendan cómo usar o interactuar con eso. Le crea familiaridad si quieres, es más cómodo. Y hace que un sistema sea un poco más fácil de recordar también. Y puede ser un poco más motivador, un poco menos intimidante si quieres, y fomentar la acción porque es más intuitiva. Pero hay algunas desventajas. Así que quiero pasar por esos también. Puede ser útil, pero realmente solo para usuarios inexpertos. Entonces ese ejemplo de la aplicación de notas en iOS, bueno, mayoría de las personas con un iPhone de Apple están bastante familiarizadas con cómo funcionan las notas ahora. Así que realmente no necesitas todas esas líneas extra y desorden y color. Entonces el otro problema con él es que puede crear limitaciones funcionales dictadas por el objeto del mundo real. En un bloc de notas. Cuando llegues al final de la página, tienes que pasar la página para iniciar una nueva página. Entonces con la aplicación de notas, solo puedes seguir adelante, pero los usos podrían pensar, Bueno , espera, estoy al final de la página. ¿A lo mejor tengo que iniciar un nuevo archivo o una nueva página? Entonces, a veces las limitaciones que podrían esperar se aplicarán en el mundo digital cuando de hecho lo han hecho. También agrega desorden a los diseños. Entonces tienes todas esas líneas y color extra, mucho ruido que no es tan limpio si quieres. Y puede que no cruce también culturas, diferentes idiomas o edades o generación. Mi ejemplo favorito de esto es el disquete. Algunos de mis hijos es Voy a buscar dinero, Ese es el icono de guardar impreso. Esto es básicamente un ejemplo de metáfora visual. En muchos años atrás solíamos usar disquetes para guardar cosas. Entonces se ha convertido en una metáfora del ahorro y es un icono que sigue siendo ampliamente utilizado en 100 años. Probablemente van a ir, ¿qué es esa cosa de todos modos? Pero es un estándar si convertirse en convención y es una metáfora para salvar cosas. La otra cosa de la que quería hablar ahora es reducir lo que llamamos carga cognitiva, pero no me hagas pensar, uh, dice Steve Krug, en esta idea es que el usuario no debería tener que recordar información de una parte del sistema a la otra. Entonces aquí hay un ejemplo de juguete. Encontrar una organización de capacitación para ubicar una organización de capacitación registrada, registrada para ofrecer el Certificado cuatro en celebrante. Consulte sus datos de contacto, por favor visite training.gov en el código de calificación CHC 46. Oh, hombre, aquí hay muchas cosas para recordar. ¿Crees que la mayoría de la gente podría recordar todo esto una vez que hagan clic en ese enlace? Probablemente no. Por lo que no debes obligar a los usuarios a tener que recordar mucha información como esta porque simplemente no van a poder hacerlo. Y simplemente pone mucho estrés en el usuario. Es innecesario. No me hagas pensar, como dice Steve Krug, Aquí también hay un ejemplo. Entré en recibe mi factura por mis peajes para fines de trabajo. Entonces entré y miré mi número de etiqueta y miré el número de etiqueta de mi esposo. Bien. Sí, ya sé cuál es ahora. Después fui a exportar porque quería descargarla. Entonces entré aquí y luego tenía el básicamente que tenía que poner en el número de etiqueta. Así que ni siquiera me dejó seleccionar entre las etiquetas disponibles y su cuenta. Tenía que regresar. Y luego pensé, bien, ahora lo arreglé. Volveré y lo copiaré y ni siquiera me dejaría copiarlo. Así que tuve que recordar el número cuando no exporté. Entonces este es un mal ejemplo. No quieres tener que hacer que los usuarios recuerden un número realmente grande y tener que teclearlo o recordar cuál es un candidato. ¿Por qué no me dejaría crear un apodo todavía? Mi le dijo a mi marido le dijo tenencia o algo así. Y luego déjame seleccionar de un menú desplegable, así que reduce la cantidad de pensamiento que tengo que hacer. Entonces, lo que queremos hacer es presentar información en trozos significativos y distintos. Entonces vamos a agrupar las cosas en trozos que tengan sentido para los usuarios. Y queremos que las herramientas de apoyo y la información estén disponibles. Cosas como convertidores de divisas o algunos sitios. Ahora incluso solo di Hey, nos dimos cuenta de que estás en Australia. ¿Te gustaría decir todo en dólares australianos? Y a diferencia de lo increíble, significa que no tengo que sacar una calculadora o usar mi cerebro para convertirla cada vez que hago clic en un elemento. Entonces las cosas que reducen la cantidad de pensamiento que vas a usar esto tienen que ver. Ahora quiero que veas siguiente y me digas qué notas. Imagina que quieres contratar un seguro de viaje. Quieres ir por unos días a Vanuatu. Y cómo pensar en lo que esperarías que sucediera. Entras aquí, seleccionas tu destino. Selecciona tu fecha de inicio, fecha de finalización. ¿Qué crees que va a pasar cuando hagas clic en el Obtener cotización? Entonces, ¿crees que iría a una nueva página? ¿Crees que volaría algo? Así que echa un vistazo y mira. Bien, está hecho, terminado. ¿Qué pasó? ¿No pasó nada o lo hizo? Entonces quizás no te hayas dado cuenta en medio de la pantalla, esos valores de tres dólares en rojo realmente actualizaron justo cuando hiciste clic en la cotización get. Entonces si vuelvo un poquito atrás, por qué ese último poco otra vez, a ver si nota que los cambió. Entonces este es un ejemplo de ceguera al cambio, donde los usuarios a menudo no notan cambios de estado, pequeñas cositas o partes de la página que actualizan las cuales no notan. A menudo se confunden cuando hacen algo en la página no parece cambiar de ninguna manera. Hemos hecho pruebas en sitios financieros y han cambiado las cosas y los usuarios han dicho cosas como si algo estuviera sucediendo o han cambiado esa opción en el seguro y dice una supongo que eso podría afectar el precio, pero no estaba claro. Entonces este es un ejemplo de eso. Entonces, ¿por qué es eso? Ahora quiero hablar un poco de lo que llamamos visión foveal y periférica. Entonces nuestra visión foveal es nuestra visión central. Es f uno a cinco grados lo que estás viendo, donde todo parecía un enfoque muy nítido y son colores brillantes. Y entonces tenemos cosas en nuestra visión periférica que están de lado. Y las cosas en ese tipo de visión periférica, tal vez un poco más apagadas y de color y están borrosas para que puedas sostener un libro a tu lado, pero probablemente no vas a poder leer eso realmente libro. Por lo que nuestra visión periférica guía nuestra atención y muchas veces compite sin visión foveal central. Entonces las implicaciones de diseño para nosotros es que queremos evitar mover o desplazar textos porque estos compiten con su atención. Entonces estás tratando de concentrarte en algo en el medio y algo está parpadeando en el costado. También queremos utilizar patrones familiares para que sean detectables por visión periférica. Entonces, si estoy buscando una barra de búsqueda, por ejemplo, estoy buscando una lupa o botón al lado de nosotros en una caja blanca donde voy a estar en la parte superior en un término de búsqueda. Entonces ese es un patrón con el que mi cerebro está familiarizado. No puedo ver los detalles de ese patrón, pero puedo ver suficiente de la forma del mismo. A Dios mi atención a eso. También queremos minimizar el ruido visual. Todas esas cosas en la página necesitan tener un propósito porque compite por la atención. El ABA, implicación de diseño es cuando usamos en pestañas de página. Así que la gente a menudo no nota pestañas dentro de una página. Aquí hay un ejemplo de un sitio web que probamos hace unos años. En este ejemplo, pedimos a la gente que acudiera a algo que les obligaba a encontrar un seguro. Judy ahora normalmente lidera a personas que coinciden en una sesión de prueba. Pero queríamos probar el punto de que incluso cuando los lideramos, todavía no lo podían encontrar. Entonces mucha gente acaba de pasar por esta página y simplemente no vi la pestaña en el seguro correcto GD. Y la razón de eso es ésta. Así es básicamente como se ve el cerebro. Entonces, cuando estás mirando la pantalla de una computadora, supongamos que estás a unos 45 cm de la pantalla, uno a cinco grados. El enfoque es igual a unos 4 cm más o menos en la pantalla que están en enfoque nítido. Efectivamente, esto es lo que ve tu cerebro. Para que puedas entender al mirar este tipo de simulación, por qué la gente podría fácilmente perder esas pestañas cuando no están coloreadas audazmente porque no las están buscando. Entonces, ¿qué significa eso para los diseñadores? Significa que queremos mostrarnos como CTAs o nuestros llamados a la acción. Las cosas que quieres usar esto para hacer son realmente prominentes. Queremos tener botones fuertes. Usa fuertes señales visuales. Realmente, muy buena asequibilidad, botones grandes, audaces, de colores fuertes que realmente tiene una jerarquía fuerte. También queremos asegurarnos de que las pestañas sean prominentes y esté tan cerca esa vista de cinco años, esa vista central. Entonces me gusta revertir el tratamiento de color de las pestañas. En el ejemplo de la izquierda, que es de lado, sólo te voy a mostrar. La gente no encontraría esas pruebas de elegibilidad que vinculan inundaciones en medio de la pantalla. Entonces sería mejor como botón si fuera realmente importante que quisieras que hicieran. Y las pestañas de la izquierda, no dije eso. Entonces en el ejemplo de la derecha, este es el sitio antiguo para National Australia Bank, pero es un buen ejemplo de cómo son las pestañas. El color está invertido. Entonces la, la pestaña activa que la que están en su guardia, y las otras pestañas que potencialmente pueden elegir una oscuridad para que coincidan con más probabilidades de ser notadas por tu visión periférica. Pensando en la visión periférica, ¿ cuál crees que podría ser el tema aquí? Entonces has entrado aquí y echándote un vistazo. Entonces, ¿qué tipo de en los bordes de la pantalla podría faltar a la gente? Entonces básicamente, aparte del menú de la izquierda, ese pequeño icono para la búsqueda la derecha puede ser fácilmente perdido por la gente por su visión periférica porque es muy pequeño y no es un patrón los que la gente está familiarizada. Paypal un set y un familiar con lo que llamamos la hamburguesa de menú. Y están muy acostumbrados a usar eso en un móvil. Pero en una gran pantalla de computadora, generalmente no usaría ese menú de hamburguesas. Entonces esto era obviamente un problema porque pusieron esta cosita, una solución. ¿Sabías que puedes usar la búsqueda? Bueno, no es una gran solución. Solo usa una convención de una patente. Pon una cajita blanca junto a ella. Esa es una solución, pero no una gran. Entonces eso significa que queremos usar patrones familiares detectables por una visión periférica. Entonces cosas como un cuadro de entrada de texto junto al botón de búsqueda y evitar muchas hamburguesas en sitios grandes. Ahora, quiero hablar un poco sobre confianza del usuario e ingresar datos personales. Por lo que la gente debe tener confianza usando la aplicación. Hay muchos escaneos que ahora, gente se está volviendo cada vez más nerviosa y cansada de poner en su información personal. Entonces necesitas construir esa confianza. Entonces, ¿cómo hacemos eso? Podemos usar cosas como iconografía o imágenes para mostrar que el sitio es seguro. Mucha gente no sabe cómo determinar si un sitio es seguro usando los iconos HTTPS o pequeños candados en el navegador. A veces navegadores como Chrome te dirán si el sitio no es seguro y te dan una gran advertencia y la gente se asusta porque su certificado caducó. Entonces, de su lado, puede ser seguro, pero eso puede no estar claro para los usuarios. Entonces este es un ejemplo de banca por Internet. Hicimos el grupo focal E es hace y la gente enfureció sobre el pequeño candado en la banca por internet. Y es como, bueno, es banca por internet para un banco grande, claro que es seguro. Pero esa pequeña foto de candado de un candado en ese registro solo los hizo sentir cálidos y borrosos, les dio esa seguridad. Aquí hay otro buen ejemplo cuando van a poner los su tarjeta de crédito en este sitio de lotería de premios. La gente podría estar un poco nerviosa con eso. Especialmente las personas mayores son las personas menos inteligentes. Así que de nuevo, es necesario cómo aseguramos tu información y pasas el cursor sobre eso en una cajita, viene con instrucciones. Puede que no signifique muchas cosas para la gente, pero tener toda esa información allí solo ayuda a construir esa seguridad de que se está tomando la seguridad en serio. Ahora, cuando pides que las personas ingresen datos personales, tienes que aportar una clara propuesta de valor. Si les estás pidiendo que registren detalles orientados a medida que van, Bien, ¿qué estoy sacando de esta transacción? Entonces aquí hay un ejemplo, no uno genial donde uso el estacionamiento del aeropuerto cuando viajo por trabajo. Y todos mis datos están guardados, me conecto como cliente. Y cuando entro aquí, me pidió mi teléfono, me enseñó todos mis demás datos que recuerdo excepto mi tipo de teléfono. Y estoy pensando, ¿por qué necesito mi diversión y me enseñaron a empacar mi auto? ¿No me gusta qué? No veo ninguna razón válida por la que necesitarían eso. Que conjunto de efectos mi confianza con ellos. Yo soy como, ¿qué vas a hacer con esa información? ¿Por qué necesitas eso? No me queda claro. Aquí tienes un buen ejemplo cuando entro aquí, pero básicamente puedes escribir cualquier dirección y la gente va, espera, estoy escribiendo una dirección puede que no se sienta cómoda. Estoy viendo los valores de las propiedades para decir el historial de ventas de la propiedad. Ahora se podría decir, Oh, no estoy seguro de eso, pero él dice aquí, ¿por qué tenemos que abordar ahora en este caso, realidad requirieron por las autoridades gubernamentales registrar los detalles de quienes están publicando esos datos también. Hay una razón válida la regulación gubernamental de que necesitan eso. Nuevamente, me acaban de explicar por qué necesitan esa dirección. Probablemente sería mejor si eso estuviera en la parte superior de la página. Pero al menos tienen esa información. La otra cosa que podemos hacer es lo que llamamos compromiso gradual. Así que básicamente hecho pedirle a alguien que se case contigo por adelantado. Queremos construir gradualmente esa relación y construir esa confianza. Y entonces tenemos que proporcionar una razón para que ellos proporcionen sus datos. Así que fui a un sitio web llamado carpa mundo. Compré algunos equipos de campamento. Agregar realmente no quería iniciar sesión o registrarse y es posible que no quiera hacer eso. Yo sólo voy a salir como invitado. Pero luego al final, me da una opción que dice: Oye, activa tu cuenta. Yo estoy como, ¿por qué querría hacer eso? Me da algunas razones válidas de por qué puedo verificar el estado de mi pedido y puedo regresar más rápido la próxima vez. Entonces me está dando algunas ideas razonables de por qué debo registrarme. Y todo lo que tengo que hacer es básicamente hacer clic en un botón y poner una contraseña, ya terminé. Entonces no es demasiado compromiso entonces me pediré por adelantado que me registre. Esto es lo que llamamos compromiso gradual. En nuestra siguiente lección, vamos a hablar de diseño de inflamación. 7. Diseño de información: En esta lección, vamos a hablar de diseño de información y nos vamos a centrar en el contenido web Riley, y la legibilidad. Entonces aquí hay un diagrama que prácticamente muestra el flujo de información. Tiene muchos elementos diferentes. Podrías pensar, Oh, solo pondremos las palabras en una página y gente la va a leer y va a estar bien. Pero no funciona de esa manera. Entonces podrías poner palabras en una página. Pero todas estas cosas diferentes afectan cómo interpretan eso, sus percepciones sobre esa materia, el entorno técnico y físico en el que operan, el entorno social, las metas, todas estas cosas pueden afectar forma en que interpretan o procesan esa información. Entonces, si piensas en algo como información de vacunación contra COVID, cuando eso salió por primera vez, probablemente recuerdes que hubo mucha contención al respecto. Entonces piensa en todas las cosas, cómo cambian estos elementos para este tema en particular. Entonces percepciones de COVID, información de vacunación. Cuando eso salió a la luz, la gente tenía diferentes percepciones sobre las ideas ahora preconcebidas. Existen diferentes entornos físicos. Pasaban muchas cosas. La gente tomó diferentes acciones, por lo que diferentes entornos sociales. Algunas personas vivían en comunidades con muchos de esos anti-vaxxers. Otros podrían haber vivido en mente, tal vez una especie de hogar científico. Así que las predisposiciones podrían haber sido diferentes. El flujo de información no siempre es como pretendemos que sea. Solo ten en cuenta que tiene muchos elementos diferentes. Entonces ahora quiero hablar sobre cómo usa ver contenido. Entonces, generalmente se lee a la gente, escanean. Y queremos mejorar ese escaneo proporcionando enlaces claros, encabezados, frases y oraciones cortas, y muchos párrafos cortos. Cuando la gente dice grandes párrafos de texto en una pantalla por casi real lejos con horror. Entonces no queremos eso. Queremos que sea fácil para ellos escanearlo y básicamente encontrar lo que buscan. Esto es del libro de Steve Craig, No me hagas pensar. Es un viejito, pero un libro excelente. Para lo que diseñamos. A veces nuestros grupos de interés son todo lo que tenemos para poner todas esas palabras en la página que diseñamos para todos los que lean todo de izquierda a derecha, de arriba a abajo. Pero la realidad es que se están saltando por toda la página. Así que no siempre están mirando el contenido que quieres que hagan. A menudo buscan enlaces y palabras clave. Ahora a veces cuando la gente va a leer, hay diferentes patrones de lectura que tiene la gente. Uno de los comunes a tener en cuenta es lo que llamamos el patrón en forma de F. Entonces como mencioné, la gente no lee, escanean pero a menudo escanean y patrón en forma de F. Podría leer la primera línea o dos de los textos. Entonces podría escanear hacia abajo. Leían un par de palabras de la siguiente, y entonces podría simplemente escanear hacia abajo y ver palabras clave. Así que aquí hay algunos ejemplos de ese patrón en forma de S. No es el único patrón de lectura, sino que es muy común, especialmente para cosas como páginas de resultados de búsqueda. Puedes ver aquí desde el seguimiento ocular cómo la gente ve el dolor. Ahora, se podría decir, oh, desbloquear biodatos de contenido web, necesito hacer este segmento. Sin embargo, es posible que aún esté escribiendo instrucciones para una aplicación o software. Entonces, cuando tenemos instrucciones, queremos asegurarnos de mover cosas como instrucciones a información sobre herramientas. Un poco de interrogación en el costado o ayuda. O incluso los mensajes de error hablarán sobre el mensaje de error más adelante. Pero a veces todavía necesitamos redactar esas instrucciones de una manera que la gente pueda entenderlas. Tampoco queremos incluir instrucciones innecesarias. No le digas a la gente cómo chupar huevos. Básicamente, la gente no es estúpida. Conocen algunas convenciones comunes. Así que no le digas a la gente que use cómo usar las cosas cuando es bastante obvio. Por lo que queremos asegurarnos de que el propio diseño debe indicar qué acciones están disponibles para los usuarios. Los diseños deben hablar por sí mismos. El usuario no debería tener que leer instrucciones sobre cómo interactuar con ese diseño o esa interfaz de usuario. Entonces aquí tienes un ejemplo para acceder al sitio, ingresa tu nombre de usuario y contraseña en los campos provistos. No, nunca lo habría conseguido de esa mascota. Entonces aquí hay un ejemplo. La mayoría de las personas conocen un patrón de inicio de sesión. No estoy sugiriendo que hagas esto, pero probablemente podrías incluso deshacerte de las etiquetas, nombre de usuario y contraseña y el papel aún sabría qué escribir porque es un patrón muy familiar. Así que solo pierde las instrucciones sobre cómo iniciar sesión. A lo mejor solo ponerle un encabezado y a lo que inician sesión. Así que no incluyas lo que yo llamo instrucciones superfluas que no son realmente necesarias y solo agregues ruido visual y desorden a la página. Entonces podrías pensar que la gente no lee instrucciones, y eso suele ser cierto, pero leerán instrucciones cuando se atasquen. Entonces piensa en tu propia situación. ¿Alguna vez has comprado un mueble de ikea o un juguete para tu hijo y estás tratando de armar en Nochebuena y piensas, Oh, no necesitaba leer el manual, puedo hacerlo sin eso. Y entonces empiezas a armarlo y luego te vas, Oh, estoy atascado. ¿Qué haces entonces? Entonces agarras el manual. Entonces la gente sí busca ayuda, pero sólo cuando se queda atascada. Entonces cuando llegan a un formulario web, van, no necesito leer las instrucciones. Simplemente llenaré este formulario web. Después se atascan y luego buscan ayuda. Y buscan ayuda en el punto de confusión. A veces sin embargo, queremos darles consejos o cosas que les van a ayudar en ese proceso. Antes de que comiencen. Y es realmente difícil porque si pones esas instrucciones en la parte superior de un teléfono, gente simplemente las ignorará. Entonces este es un buen ejemplo del sitio web de asic. Cuando cambiamos el nombre de nuestro negocio. Básicamente, se me presentó esto. Entonces, antes de comenzar los precios, tenía una lista de verificación de cosas, cosas a tener en cuenta porque es una página web gubernamental para registrar tu negocio. A él le parece que probablemente debería leer estas cosas. Y tener una casilla de verificación me hizo leerlas mucho más probables. Entonces aquí están las cosas que debes tener en cuenta. Cualquiera podría pasar y simplemente verificar prácticamente todas estas casillas de verificación sin leerlas. Pero al marcar la casilla aquí implica que estás de acuerdo con estas cosas. Entonces lees cada una de estas instrucciones, das clic en las casillas de verificación y no te permitirá continuar. Se atenúa el botón hasta que seleccionaste todas esas casillas de verificación. Entonces este es un buen ejemplo de cómo a veces puedes proporcionar instrucciones al estilo de un proceso, especialmente si necesitan ciertos documentos o si necesitan haber hecho ciertas cosas antes de que ellos iniciar ese proceso. Ahora cuando estamos escribiendo contenido, queremos usar lo que se llama la pirámide invertida. Entonces queremos poner las cosas importantes por adelantado. Entonces es casi lo contrario de la escritura académica, donde tenemos nuestra introducción, método o enfoque de nuestros resultados y discusión y estamos construyendo hasta una conclusión. Con redacción de contenido web. Queremos darle la vuelta a eso de cabeza. Queremos comenzar con la conclusión. Lo que la gente quiere saber, entonces ¿qué quieres que sepan? Que todas las otras cositas que cosa legal tienes que poner en sus términos y condiciones, cosas así. Entonces tengo las cosas realmente importantes en la parte superior de la página que van a ayudar a los usuarios a lograr sus objetivos. Y obviamente eso vuelve a ¿cuáles son los objetivos del usuario y quiénes son los usuarios para esta página? Así que siempre piensa en eso cuando estés escribiendo contenido. ¿Quién es el público de esta página? ¿Y qué están tratando de lograr? Te voy a mostrar un pequeño video ahora. Así que bastante limpio. ¿Te has metido en filetes? Yo preguntas frecuentes, solo pido divagar, en realidad no dice en esta sección. Podrás responder esto y aquello solo divaga sobre asistencias y haz clic aquí para esta última pregunta. Entonces como puedes ver aquí, hay mucho texto superfluo. Se trata de una pregunta frecuente. Ellos reciben mil llamadas al día. Sí. Entonces espero que sus preguntas frecuentes o base y todas las llamadas que algunas de sus preguntas hayan sido respondidas todavía. Bien. ¿Dónde se les responde? Si no encuentras la información, ve al acto. Bueno, buena suerte con eso. Tratando de leer información de un acto de gobierno. Y luego en la parte inferior de la página están los tres pequeños enlaces donde realmente se pueden encontrar las preguntas frecuentes. Entonces, la mayor parte de ese texto es superfluo. Gf es mi etiqueta científica para ese GF superfluo. A continuación rediseñamos esa página. Ahora tenemos los tres enlaces para las preguntas frecuentes porque tenía tantas preguntas frecuentes que se categorizan por el momento ya sea que comenzara o terminara una tendencia. Había un montón de pequeñas cosas como ¿cómo cambio una bombilla? ¿Quién tiene que pagar por eso? Así que un montón de pequeñas preguntas específicas. Pero al categorizarlos, por eso hicieron eso. Entonces teníamos esos tres enlaces primero y luego si no lo encuentras, entonces vete a estos lugares. Otra cosa que puedes hacer con contenido es usar lo que llamamos expandir colapsar o mostrar paneles de ocultar. Estas son de manera realmente útil, sobre todo funcionan bien en el móvil porque el usuario tiene control en cuanto a qué contenido dice y qué le gustaría ver expandido. Entonces este es un buen ejemplo. Aquí hay otro ejemplo de un panel en expansión. Este es el portal de descubrimiento de datos de giro en el que trabajamos. Nuevamente, hicimos mucha investigación de usuarios. Hablamos con ecologistas e investigadores. Y encontramos que una de las cosas que los científicos son colegios quiere saber esto es un metadato o datos sobre datos. Entonces es un lugar al que puedo ir para encontrar cualquier dato ecológico. Y lo que encontramos son las cosas que todos querían saber. Ponemos ahí en la parte superior de la página y luego las cosas que necesito algunos usuarios quisieron saber, golpeamos en estos paneles de expandir o colapsar. Así que de nuevo, asegúrate de ponerles etiquetas como mostrar y esconderlas para accesibilidad. Y asegúrate de que haya una señal visual fuerte como si fuera una buena oferta de toda la zona en la que se puede hacer clic, como un borde a su alrededor o sombreado o color, cosas así. Entonces esto es ejemplos de paneles en expansión. Ahora quiero hablar un poco alfabetización y legibilidad. Ahora bien, creo que esto es un poco trágico, pero alrededor del 14% de los australianos tienen muy poca alfabetización, y también es muy común en otras culturas occidentales. Esto no quiere decir que sean estúpidos o tontos. Y de todos modos, es solo que las personas tienen diferentes orígenes o pueden tener trastornos del aprendizaje que pueden haberles dificultado lectura o cosas como dislexia, cosas así. Los sitios web públicos en general. Lo que eso significa es que generalmente queremos escribir ese contenido dirigido a un nivel de sexto grado, que trata sobre nosotros de un niño de 12 años. Entonces eso suena bastante aterrador. Pero solo piensa si tienes público en general. Entonces, si tienes un sitio web bancario o un sitio web gubernamental para asistencia gubernamental, quieres asegurarte de que ese contenido esté dirigido a aproximadamente un nivel de sexto grado. En el gobierno australiano, la guía de estilo de contenido web dice que es un nivel de quinto grado. Entonces eso puede ser difícil de hacer. Entonces, ¿cómo evalúa eso en realidad? Entonces hay diferentes, lo que llamamos escalas de legibilidad, que determinaron la legibilidad de los textos. Entonces este es uno de esos ejemplos llamados papas fritas. En este ejemplo, se toman tres párrafos de textos. Se promedia el número de sílabas de más de 100 palabras y el número de oraciones por cien palabras. Y luego platicas eso para esos tres párrafos esta grilla en esta tabla. Y luego te demuestra que es un nivel universitario que es universitario, o si es un estudiante de quinto grado, etcétera. Entonces esa es una forma de hacerlo. Esa es la manera difícil de hacerlo, pero esa es la teoría de antecedentes detrás de ella, es un par de otras herramientas que puedes usar, incluso solo Microsoft Word básico. Si entra en las opciones, puede hacer clic en las estadísticas de legibilidad y luego hacer una revisión ortográfica. Y al final aparecerá y te dará la puntuación de facilidad de lectura. Entonces eso es usar un método llamado Flesch-Kincaid en lugar de papas fritas. Esta es una de mis herramientas favoritas. Esto se llama Hemingway App. Muchos redactores utilizan herramienta. Con esta herramienta, lo que haces es obtener tus textos de tu sitio web o lo que quieras probar y pegas en esta zona media. Y lo único que no me gusta de esta herramienta es que no es una forma cristalina de pegar tus textos. Entonces pegas tu texto justo sobre el texto que ya está ahí. Y luego automáticamente te da una puntuación en el lado derecho. Entonces este texto aquí es legibilidad de sexto grado. Y lo que es realmente útil es que puedes editarlo en línea. Entonces puedes entrar aquí y vas a ir, bien, esa frase en sombreado rojo oscuro, eso es muy difícil de leer. Déjame ir y cambiar eso. Y entonces se puede ver en tiempo real cómo está cambiando eso. Entonces puedes irte, bien, lo bajaré a un nivel de quinto grado quitando un par de palabras grandes. Entonces a veces es difícil bajarlo si tienes palabras como gobierno australiano, son palabras grandes. Y voy a afectar la legibilidad, pero no puede llegar con ella. Si lo llamas Ozzie y gov, probablemente esa no sea la mejor manera de ir a golpear. Entonces hay términos como ese que simplemente nunca vas a poder evitar. A continuación, vamos a pasar por el proceso de diseño visual. 8. Proceso de diseño visual: desde el marco de alambre hasta el diseño visual: Ahora vamos a hablar sobre el proceso de diseño visual, principalmente sobre cómo podemos usar el mood boarding para pasar de la estructura metálica en blanco y negro a un diseño visual real. Nos centraremos en el mood boarding como una forma de establecer un estilo visual para nuestros diseños. Y también hablaremos de las guías de estilo ya sea como una herramienta en el proceso o como una forma de documentar esos estilos. Mood boards son colecciones de materiales visuales para mostrar ideas y conceptos. No es algo con lo que estemos muy familiarizados en UX, pero es una técnica popular en el mundo del diseño más amplio y otros campos creativos. Los tableros de estado de ánimo son excelentes para crear direcciones visuales para su diseño y permitirle compartir efectivamente estas ideas con otros. Tenían la intención de transferir el estado de ánimo adecuado y llevar adelante esos aspectos más emocionales del diseño. A diferencia de los wireframes y prototipos, los mood boards no muestran la imagen detallada de un proyecto futuro. Pero más nuevamente, esos colores emocionales y algo más amplios, la topografía y las imágenes y así sucesivamente. Entonces, ¿por qué incluso nos molestamos con moodboards? En primer lugar, es para ahorrar tiempo y esfuerzo en unas horas o tal vez menos. Los diseñadores pueden crear esta guía visual para los clientes. Cuando presentamos un concepto. Y el móvil se puede editar fácilmente por lo que ahorra tiempo y esfuerzo. También es una buena manera de involucrar a los clientes en el proceso. Podemos obtener ideas de los clientes y tratar de entender lo que quieren del proyecto. Pueden participar activamente en la selección de estilos y muestras. Y es una técnica fácil y se puede hacer si también eres un no diseñador. También puedes hacerlo para entender el proyecto. Para que puedas hacer mood boarding en el cliente. ¿Qué aspecto tiene la marca ahora? El demográfico, tal vez sume a tus personajes. ¿Cuáles son los estilos visuales? ¿Qué les encanta? ¿Qué usan? ¿Qué ven? También puede hacer un mood board sobre los competidores del cliente. Entonces, ¿qué aspecto tienen los sitios de la competencia para evitar hacer lo mismo? Entonces, lo más importante, nos movemos aburridos para inspirarnos y establecer esa dirección visual. Es una buena manera de encontrar ideas e inspiración para esa dirección visual de tu diseño. El enfoque de la boca, tu tabla de estado de ánimo es más fácil tu proceso de diseño visual será. Como diseñadores de UX, podríamos crear una tabla de estado de ánimo para los elementos de la interfaz, para la iconografía, para la topografía de un color. Echemos un vistazo a algunos ejemplos. Así que el cuerpo del estado de ánimo nos ayuda a descubrir cómo pasar del wireframe al diseño visual. Entonces esto es solo un ejemplo, una especie de ejemplo simple. Tenemos el wireframe a la izquierda y tenemos el tipo de más UI de archivos a la derecha. Vamos a tratar de desglosarlo un poco. Hasta ahora en UX, nos hemos centrado en los aspectos funcionales del diseño. ¿Qué tipo de elementos de interacción necesitamos? ¿Cuál es el flujo del sitio que llamaremos a las acciones? ¿Necesitamos incluir cuando comenzamos el mood boarding, comenzamos a establecer esa dirección visual para nuestro diseño? Y esto es un simple wireframe para un hallazgo un sitio web para mascotas. Y echemos un vistazo a cómo el proceso de mood boarding ayudó a guiar la dirección de este diseño. Entonces, antes que nada, se establecieron algunas palabras clave, así que esas eran alegres fluidas en retro. Este sitio era un sitio web de mascotas y está dirigido a familias con niños pequeños que buscan una mascota para unirse a su familia. Entonces, por lo tanto, estos flujos muy alegres, se escogieron tus vibraciones retro. Este es un ejemplo de un mood board de una página. Basado en esas palabras clave. Basándonos en esas palabras clave, podemos comenzar a buscar inspiración. Entonces esta es una colección de algunas capturas de pantalla de otros sitios web. Hay algunas fotos que indican esa dirección visual del diseño. No tiene que ser súper complicado. Puedes tomar algunas imágenes. No tiene que tomar mucho tiempo, pero el abastecimiento, como solo un poco de inspiración antes comenzar a hacer su diseño será útil. Una vez que hayas recogido esta inspiración, puedes comenzar a desglosar y analizar el diseño. Entonces usa eso como tus pautas. Entonces, por ejemplo, no queremos copiar el diseño, no queremos copiar las fuentes de inspiración que hemos encontrado. Queremos entender qué hicieron y por qué lo hicieron, y luego copiarlo, luego hacerlo. Entonces aquí no se pudo hacer un poco de análisis. Entonces ha habido. Han utilizado grandes bloques coloridos como telón de fondo para cada sección. Tienen. Las líneas rectas se rompen por elementos superpuestos. En este caso, los calcetines que elige fluyen por todas partes. Y luego tienen botones redondeados en el diseño. Y luego el uso de bloques de color, apenas se usa blanco. Bien, entonces, ¿cómo podría ayudarnos este mood board a crear esa interfaz de usuario para este sitio web? Entonces tenemos ese wireframe en blanco y negro y luego vamos a aplicar esos diferentes elementos que vimos en un mood board. Así que hemos aplicado los grandes bloques coloridos como back to telón de fondo para cada sección en el sitio web de mascotas, las secciones de líneas rectas se rompen por elementos superpuestos, en este caso algunas formas y algunos perros. Hemos utilizado esos botones redondeados y azulejos redondeados. Entonces hemos usado bloques de color. Apenas hay manera. Entonces ese fue el resultado de un simple ejercicio de mood board y luego aplicado a ese wireframe. Todo se resume también en una guía de estilo simple muy breve, donde tenemos los estilos de botones, los titulares, los colores, luego algunos de los elementos visuales utilizados allí. Bien, entonces vamos a descomponer el proceso un poco de etanol. Puedes hacer una lluvia de ideas sobre tres palabras clave visuales. Entonces podría haber valores de marca, básicamente palabras clave que reflejen la marca y te den alguna dirección. Entonces, durante tu investigación y análisis de UX, lo más probable es que hayas descubierto muchas ideas de tus usuarios sobre lo que les gusta, sobre la marca. ¿Cuál es el tipo de estado de ánimo que le da la marca y qué se supone que debe hacer? Y podemos usar esa investigación cuando luego describamos esas palabras clave. Podemos hacer algunos mapas mentales o asociaciones de palabras o lluvia de ideas sobre palabras. Entonces, junto con o sin el de un cliente, podemos determinar esas palabras clave. Algunos ejemplos aquí de tipo de palabras clave emocionales. Alegre, competente, Alegre, curioso, y así sucesivamente. A continuación, queremos decidir qué mood boards necesitamos. ¿Necesitamos elementos de interacción, o eso ya está establecido? ¿Necesitamos color, una nueva paleta de colores, o tipografía, o un tablero de estado de ánimo en el diseño? Muy a menudo puede haber como una guía de estilo completa, en cuyo caso probablemente no necesitamos mucho para hacer mucho mood boarding. Pero otras veces podría ser como la mitad. Tenemos este botón, hace ese estilo de botón, esta paleta de colores, pero no ha habido, todavía faltan algunos elementos. Sí, así que si falta algo es una buena idea para luego ver algo de inspiración para eso, que solo queremos conseguir crear y crear un mood board de ejemplos que reflejen estas palabras clave. Podemos captura de pantalla, podemos sacar algunas fotos. Y recuerda de nuevo, un mood board enfocado es un poco más eficiente que solo tener muchas fuentes diferentes apuntando en diferentes direcciones. Por lo que es una buena idea afinar las opciones, el mejor resultado posible. Entonces más bien tres referencias enfocadas luego un montón de ideas diferentes. Por último, queremos analizar un mood boards. Queremos desglosarlo y entender qué hace que estos ejemplos sean buenos ejemplos. ¿Qué caracteriza a esta inspiración que hemos obtenido? No queremos copiar el diseño, sino que más bien creamos nuestro propio diseño basado en algunas buenas ideas. Entonces ejemplos de esto podría ser el layout. Tiene márgenes amplios o márgenes estrechos. ¿Tenemos qué tipo de topografías utilizan si eso es de interés? Podría ser la forma en que el sitio está equilibrado o podría ser la jerarquía que nos guste. Entonces sí, podemos, podemos obtener esa inspiración y luego desglosarla. Echemos un vistazo a otro ejemplo. Se trata, de nuevo, de convertir algo jugado en algo más emocional y visual. Pasando de ese blanco y negro a algo más colorido. Esto es como un boceto de UX adecuado, boceto muy temprano simplemente delineando este micrositio y los elementos en él. Después nos movemos a la etapa de wireframe donde entramos en Figma o sketch. Y luego empezamos a colocar nuestros elementos en la grilla que hemos trazado. Entonces podemos comenzar a crear esas, esas palabras clave que se vinculan con la marca. En este caso, Quirky, biblioteca y dinámica son algunas de las palabras. Entonces podemos empezar a hacer el mood boarding. Así que aquí hay un mood board para los elementos de la interfaz de usuario Entonces un poco de inspiración para eso. Tenemos una especie de botones caricaturescos y marcos de colores con espacios en blanco y así sucesivamente. Entonces lo desglosamos. Hay algo de inspiración sobre el diseño y las imágenes utilizadas. Y luego colores. Otra vez. En este caso, tenemos imágenes a dos colores. El uso de colores neón brillantes para evocar esa sensación de emoción y sentimiento. Es un poco más tipo de emoción y un poco más sentimiento, sentir cosas en esta fase del proceso. Ahora basados en aquellos que desglosan ese análisis, entonces podemos comenzar a aplicar ese estilo visual a nuestro wireframe. Podemos hacerlo sección por sección. Entonces empezamos por la parte superior y luego trabajamos nuestro camino hacia abajo. En esta fase, también podríamos estar estableciendo una guía de estilo al mismo tiempo. Entonces hablaré un poco más sobre las guías de estilo que innovan también en esta fase. Hay algunos buenos recursos por ahí que quizás quieras usar. Así que las imágenes gratuitas se pueden obtener de Unsplash, pixabay pixels, nappy.co y stock snap. Solo por mencionar algunos iconos para usar íconos en un diseño. Hay un montón de gratis por ahí. El Sustantivo Proyecto D, puedo decirlo, y las columnas jónicas son solo algunos ejemplos. Y luego fuentes otra vez, si queremos tener una fuente personalizada o simplemente una fuente que se ajuste a nuestra marca y a lo que queremos transmitir, podemos descargar fuentes de Google font, font fabric, Adobe fonts, y hay mucho más allá afuera. Hablemos de guías de estilo. Las guías de estilo definen los patrones consistentes, los elementos de la interfaz y los estilos visuales como las fuentes, los colores, la iconografía utilizada en los diseños. Los clientes suelen tener guías de estilo. A veces son más extensas, a veces apenas las hay. A veces, como diseñador de UI, tendrás que trabajar con el cliente para desarrollar una guía de estilo más extensa. Existen diversas formas de abordar e interpretar estas guías de estilo. Si hay una guía de estilo existente y ya hay elementos definidos, entonces ahí es donde tienes que empezar. Como chico alto también puede ser solo un trabajo en progreso junto a tu wireframe, por qué pruebas estilos y gradualmente vas refinando a medida que avanzas. Así que es casi como si vas y vienes de tu estructura metálica y luego eres una especie de diseño de elementos , diseño de elementos interactivos. También utilizan como final del proceso para luego documentar el diseño para que otros lo usen. Por lo tanto, podría ser un entregable junto con su estructura de alambre. Y eres más diseños visuales que pueden ser muy específicos y mostrar medición perfecta de píxeles para ciertos elementos. O pueden ser más sueltos y ofrecer pautas más amplias. Con ejemplos visuales, no hay una sola manera correcta o incorrecta de hacer estas guías de estilo. Solo hace falta que los demás lo entiendan. Es importante recordar que son activos vivos y se mantienen, siguen evolucionando con el diseño. Aquí hay otro ejemplo de cómo los titulares y las imágenes juegan todos juntos en el diseño también. Consiguió los iconos, el uso de imágenes de cuál es el estilo de uso de las imágenes, y los códigos de color y el estilo de la cita también. Otras veces hay una guía de estilo más extensa como esta guía de estilo Medecins Sans Frontieres, pautas de marca en línea. Entonces como dice aquí, el sistema de identidad visual es una forma de asegurar consistencia en todos los canales de comunicación que utilizamos. Entonces esta es una marca global y tiene como hub local. Entonces, solo para garantizar esa consistencia en todo el mundo, han desarrollado esta guía de marca silenciosa y extensa. Entonces tiene como activos descargables. Entonces tenemos los logotipos y luego cómo se aplica el logotipo. Cuándo usar logotipos, cuándo usar símbolos, qué no hacer en el diseño y qué hacer. También tiene color. Uno de los colores principales y ¿cuáles son los colores secundarios y terciarios? Tiene tipografía y luego composición también. Estructura, imágenes, mapas, pictogramas y ejemplos de cómo todo esto se une para comunicar la marca. Entonces, como diseñador de este proyecto, tendrías que entrar en este lado, descargar los activos, y luego mirar a través y luego asegurar la consistencia con las pautas de la marca. Entonces en este caso, probablemente no harías mucho mood boarding. Simplemente irías, irías directo a ello. siguiente diez te va a dar un poco de resumen sobre las lecciones por las que hemos pasado. 9. Resumen y lecciones clave: Mejor trabajo en un resumen ahora, para curso siete sobre diseño visual y de información. Entonces, ¿qué es el diseño visual? ¿Recuerdas esa definición? Es la práctica de idear cuadrículas, diseñar páginas, elegir paletas de colores y desarrollar íconos. Y esa es la definición según el BCS. Entonces los principios fundamentales del diseño visual, los realmente importantes que debes recordar si estás sentado ahí, BCS, examen, proximidad, alineación, repetición y contraste. Entonces, ¿recuerdas ese acrónimo parque PARCC? Nuevamente, son los fundamentales según el BCS, probablemente sean otros también, pero estos son los que consideran más importantes. Sophie habló sobre los principios de Gestalt, principios de proximidad , similitud, figura-suelo, cierre, continuación y excierre. También ha hablado de otros principios de diseño como jerarquía y alineación, repetición, equilibrio y contraste. Sophie habló sobre los elementos visuales del color, la tipografía y la iconografía. Luego toqué el concepto de asequibilidad. Aquí es donde las características físicas influyen o implican la función. Entonces algo así como un joystick es realmente obvio para un niño de tres años cómo interactuar con eso. Tocamos la oficina metafórica y descremada y donde un objeto en software imita esa contraparte del mundo real. Así que solo recuerda esos términos también. Y reduciendo la carga cognitiva. Y hablé de que el usuario no debería tener que recordar información de una parte del sistema a la otra. Déjame probar el flujo de información y la redacción de contenido web. Entonces habló sobre cómo el flujo de información tiene muchos elementos diferentes. Entonces platicamos sobre el diseño de información en términos de redacción de contenidos web, apegados sobre alfabetización y legibilidad y cómo medirlos. Hemos hablado de algunos de los principios de escritura roja para la web son cómo los usuarios leen el contenido. Y hablamos del patrón en forma de F. Entonces Sophie habló sobre el proceso de pasar del wireframe al diseño visual y cómo lo hacemos. En nuestro próximo curso, número ocho, hablaremos de evaluación de usabilidad, incluyendo heurística de diseño.