Introducción al diseño de la interfaz de usuario: Principios de diseño de la interfaz de usuario para diseñadores de UX/UI (+Ejercicio de diseño en Figma)

1. Promo: Hoy vamos a aprender sobre los principios del diseño de la interfaz de usuario. Al mirar otro diseño de interfaz de usuario, generalmente podemos decir qué diseño funciona mejor. Pero cuando comienzas a trabajar por tu cuenta, de repente ya no es tan fácil. Te mostraré lo que marca la diferencia, y juntos veremos lo siguiente. Jerarquía visual y por qué es esta clave para todo. Cómo utilizar el color, el tamaño y la forma para crear un sistema con especial atención a la tipografía y dimensionamiento. Aprenderemos por qué la sencillez siempre gana. Por qué el espacio en blanco es un superhéroe secreto, y qué cuadrículas y sistemas de espaciado pueden hacer por nosotros. Te mostraré cómo llamar la atención sobre dónde realmente lo necesitas y por qué es tan importante agregar algo de emoción para el éxito. Terminaremos este curso diseñando nuestro propio sitio web de coworking desde un wireframe utilizando todas nuestras nuevas habilidades aprendidas. Este curso es para ti, si eres un principiante total o un diseñador experimentado, y quieres retocar tus habilidades de interfaz de usuario. Este es un curso de moonlearning.io. 2. Desmitificación: ¿qué es el diseño UX/UI de UX?: Tenga en cuenta que este es un curso de dos partes, por lo que podría estar observando la parte sobre UX o la parte sobre los principios de la interfaz de usuario. Idealmente, estás combinando a los dos. En cualquier caso, quiero asegurarme de que tengas muy claro los dos términos diferentes, y lo que significa combinarlos. Una vez que empieces a sumergirte en el mundo de UX, UI, notarás que hay mucho ruido y discusión en torno a estos términos. Qué incluyen exactamente, si UX o no, y UI deben o no combinarse en un solo término. Permítanme arrojar algo de luz sobre eso desde mi punto de vista y experiencia. Sin duda el diseño UX es donde comenzarás el viaje. ¿ Qué incluye el diseño UX? En resumen, tratarás de entender los patrones generales, el comportamiento y las expectativas. Todo eso para crear una estructura general y orden de cómo debe funcionar el producto. Como resultado, normalmente tendrías algún esqueleto, y una forma de marcos alables, y diagramas de flujo que delineaban un producto o característica que estás sugiriendo. Otro trabajo muy importante del diseño de UX es probar e iterar a lo largo del ciclo de vida de un producto. No hay productos terminados en línea nunca. Si bien la experiencia del usuario, como lo indica el nombre, intenta mejorar la experiencia general que tiene el usuario, diseño de la interfaz de usuario se ocupa de los elementos de diseño reales. Ahora, el diagrama de flujo y las tramas de alambre previamente diseñadas cobran vida. Un buen diseñador de UI generalmente tiene una excelente idea de lo que sucede durante el proceso de UX, y viceversa. Durante el proceso de la interfaz luego definirá guías de estilo, color, tipografía, componentes, y el diseño general para todo el diseño responsive. Lo más probable es que crees un prototipo que se pondrá a prueba, que es donde te vinculas de nuevo al diseño de UX. Del mismo modo que trabajamos de la mano desde UX hasta UI, tendrás que hacer lo mismo desde la interfaz de usuario hasta el desarrollo. Cuando se trata de desarrollo, se escuchará sobre dos partes principales. Desarrollo front-end, donde se escribe CSS y HTML, el llamado marcado. Aquí es donde se crea la interfaz que vemos. Esto es lo que nos interesa como diseñadores de UI. Después está el llamado back-end. Aquí es donde se escribe el código. Eso podría ser JavaScript, Java, Python, o cualquier otro lenguaje. Realmente no nos molesta como diseñadores. Aquí es donde sucede toda la lógica detrás de las escenas. Nosotros los diseñadores de UI rara vez tenemos mucho que ver con esto. Front-end, y back-end obviamente están conectados, y podría haber marcos en su lugar tratando con front-end como React JS. Pero todo eso puede dejarse con seguridad al equipo de desarrollo. No es necesario que te codifiques. Debe, sin embargo, comprender los requisitos técnicos, y los principios básicos del diseño front-end como diseñador de interfaz de usuario. Esto te ayudará a configurar tus archivos y diseños de la manera correcta. Ahora, en una gran empresa o en un proyecto ocupado, podría simplemente lidiar con el diseño de la interfaz de usuario. Podrías simplemente configurar diseños en Figma, y eso es todo. Sin embargo, seguirás teniendo solapamiento con diseño de UX así como con el desarrollo, y necesitas conocer tus conceptos básicos. También podría trabajar como diseñador de UX solamente. En ese caso, lo más probable es que no hagas ningún trabajo de diseño. Pero estarás ocupado con la investigación, la estrategia y las pruebas, y definiendo nuevas características. Sin embargo, aún necesitarás estar al tanto de cómo las decisiones de diseño de interfaces impactarán e influirán en la experiencia del usuario. Si estás trabajando en una investigación profunda de usuarios, es posible que lo hagas en realidad, pero normalmente tendrás tanta suerte y saluda a un diseñador de vez en cuando. En algunos casos, sin embargo, sobre todo en empresas más pequeñas o proyectos freelance, podrías usar muchos sombreros. Cuando hablamos de UX, diseño de UI, suele ser esta área la que ves resaltada aquí. Probablemente empieces con alguna investigación, configurando personas, y configurando tus propios wireframes. Después traducirás esos wireframes en diseño y los entregarás al desarrollo. La mayoría de los diseñadores de UX, UI tienden a perder un poco de la parte en profundidad del diseño de UX. Eso es cierto, pero por lo general no es gran cosa en proyectos sencillos más pequeños. Este es también el área que me ocuparé durante esos dos cursos. Tenga en cuenta que en profundidad, investigación UX no es parte de este curso. Es cierto que en algunos puestos de trabajo el término UX, y UI a menudo se confunden. Podrías ver el diseño de UX anunciado sin embargo te están pidiendo configurar cualquier cosa, desde wireframes hasta terminar manejar archivos. Si alguna vez tienes dudas, simplemente dibuja este sencillo diagrama aquí en una hoja de papel, y muéstrale a tu potencial cliente o empleado dónde estás operando, y asegúrate de que esta es la zona que también están buscando y no sólo una palabra de moda que estaban usando. Además, seamos honestos, por lo general no es un proceso sencillo donde se trasmiten las cosas. También en la mayoría de la empresa ni siquiera pretenden que sea así. Siempre habrá un montón de ida y vuelta, y mucha discusión. Esto en realidad es algo bueno porque solo cuando UX, UI y desarrollo trabajan de la mano, realmente grandes productos cobran vida. No escuches a los gatekeepers, Encuentra tu pasión, y disfruta de la superposición, y aprende de diferentes campos del diseño digital. 3. Hola y una palabra de teoría de Gestalt: Hoy estaremos viendo los principios clave de diseño de la interfaz para crear jerarquía y armonía en nuestros diseños. Los principios que les voy a presentar se basan principalmente en la famosa teoría de Gestalt más algunos extras relevantes. Pero empecemos con el núcleo de todo. ¿ Cuál es la teoría de Gestalt, y por qué sigue siendo relevante tantos años después? psicología gestalt fue fundada principios del siglo XX en Alemania y Austria por Max Wertheimer, Kurt Koffka, Wolfgang Kohler. Gestalt es una palabra alemana y significa tanto como forma o forma. A modo de verbo, gestalten significaría diseñar. En pocas palabras, lo que dice la teoría de Gestalt es que percibimos patrones enteros en lugar de componentes individuales. Se estableció un conjunto de reglas sobre cómo percibimos esos patrones. Estas reglas son realmente estáticas después, por ejemplo, en los años 90, algunas más fueron agregadas por otros psicólogos. En su momento se documentó la teoría Gestalt UX UI realmente no era una cosa todavía. Esto es realmente importante de entender. La teoría gestalt no es una tendencia, sino la base sobre cómo nuestras mentes leen e interpretan las cosas. Por lo tanto, es el núcleo del diseño de la interfaz de usuario. Una vez que entendemos esas reglas sobre cómo el cerebro humano interpreta los patrones, podemos jugar con ellos para crear y estructurar nuestro diseño. Los principios que te voy a presentar se basan principalmente en Gestalt, pero también agregó algunos otros temas relevantes y hallazgos específicos al diseño de la interfaz de usuario. Estaremos viendo los siguientes aspectos para crear jerarquía y armonía en nuestro diseño. El efecto de usabilidad estética y por qué incluso nos molestamos con el diseño. ¿ Cuál es en realidad la jerarquía visual? El derecho de Prangnanz y por qué la simplicidad es clave. El derecho de similitud, color, tamaño y forma, y el papel que juegan en nuestro diseño de interfaz de usuario. Vamos a tener una mirada más cercana al tamaño objetivo del texto y al tacto y cómo configurarlo en diseño. Vamos a hablar de la ley de proximidad. Aquí vamos a buscar sistemas de espaciado y sistemas cuadrícula y por qué es tan importante usarlos y cómo usarlos. El derecho de común región. Vamos a crear secciones y hablar un poco sobre espacios en blanco y espaciado suave en nuestro diseño. El divertido resto del efecto. Esto es realmente importante para llamar la atención en tu diseño hacia donde realmente lo deseas y lo necesitas. El derecho del destino común. Esto es realmente importante a la hora de interactuar con el usuario para la predicción conductual. Para terminar, vamos a hablar de agregar algo de emoción a tu diseño. 4. Efecto usabilidad estética y estética con las de usabilidad: ¿por qué incluso te inquietan con el diseño?: El efecto estético-usabilidad básicamente establece que cuando los usuarios encuentren una interfaz visualmente agradable, asumirán que el producto es más utilizable. En otras palabras, si se ve mejor, gente piensa que funciona mejor. Esta es realmente una decisión que tomamos en milisegundos. Ahora bien, esto no es un boleto gratis, pero básicamente es un bono de confianza que puedes obtener y luego asegúrate de respaldarlo. Esta es también la razón por la que simplemente colorear y agregar algunas imágenes a un marco de cable bien diseñado no es suficiente. Aquí tenemos un ejemplo, el producto en el lado izquierdo y derecho son exactamente el mismo en contenido y características, sin embargo obtienen una sensación de comodidad y confianza muy diferente. El efecto estético-usabilidad también muestra que las personas son más tolerantes errores y problemas menores al tratar con un diseño que encuentran estéticamente agradable. Ten en cuenta que solo estamos hablando de temas menores aquí, sin embargo debes estar al tanto lo que suena como generalmente algo positivo para ti y tu producto final puede ser en realidad un obstáculo hacer pruebas de usabilidad y algo a tener cuenta en las fases de investigación y exploración. ¿ Qué significa eso para nosotros? Incluso si la usabilidad es nuestro enfoque principal, nuestro diseño de interfaz de usuario aún necesita verse bien para que el usuario comience. Es la primera impresión y los hace más dispuestos a probar nuestro producto en pequeñas dificultades más tolerantes, por lo que UX y UI necesitan ir la mano para un producto verdaderamente exitoso. ¿ Qué tal tener en cuenta el efecto estético-usabilidad a la hora de realizar pruebas e investigar? Es probable que tus usuarios de pruebas y tú mismo reaccionen sesgados, una opinión de que algo es fácil de usar no es lo mismo que que en realidad es fácil de usar. Es por eso que es tan importante diseñar primero la información y características que necesitas, como en un marco alambrico, flujos de arquitectura, etc., así que básicamente todo tu trabajo UX. Entonces en base a eso, sigue adelante, cepilla tu diseño para tu grupo objetivo de manera atractiva y estética y no al revés. Encima de eso puedes o más bien debes entonces por supuesto probar e iterar, pero asegúrate de comenzar con la base y no el maquillaje. El asegurado estético son medios para un fin, pero no para terminar meta. Vamos a resumir. Cuando se ve mejor, la gente suele pensar que funciona mejor. Los usuarios son más tolerantes; estresan en errores menores no mayores, cuando se trata de un diseño estéticamente agradable. Esto generalmente es algo genial pero también puede conducir a resultados distorsionados durante las pruebas de usabilidad e investigación, así que ten en cuenta eso. 5. ¿Qué es la jerarquía visual?: ¿ Qué es lo que marca la diferencia en el diseño? ¿ Cuál es el secreto detrás una distribución perfecta del espacio, tamaño, y el contraste que nos parece tan agradable? El núcleo de todo esto es una jerarquía visual en funcionamiento. La jerarquía visual es un método de organización de elementos de diseño para comunicar un orden de importancia. Al iniciar un proyecto, lo más probable es que te bombardeen con información importante que necesita ser comunicada. La marca, un premio, el logotipo, el producto, la copia, los testimonios de usuarios felices, y así sucesivamente. A medida que sigas agregándolos, tu página se sentirá bastante desordenada. El problema es que de esta manera, todo en tu página compite por la atención del usuario. Usa un pequeño truco. Tan solo imagina que todos los elementos de la página hablan o gritan acuerdo a la importancia que les diste. En este ejemplo, esto probablemente sonará bastante desagradable y será bastante abrumador. En lugar de crear una batalla de atención aleatoria, jerarquía visual te permite agregar toda la información pero de tal manera que crea una base pacífica que es fácil digerir y dibuja tu atención a los aspectos más destacados. Echemos un vistazo a algunos ejemplos del mundo real. Aquí hay un ejemplo de WIX que es un constructor de sitios web. Como de costumbre, no tengo relación alguna con esta empresa. Solo te estoy mostrando esto porque creo que tiene una gran jerarquía. Ahora tenga en cuenta cómo se construye aquí la jerarquía. Estamos empezando con un titular grande principal, nuestra edad 1. Hay algo de texto de copia que es más pequeño y probablemente no vas a leer. Entonces tienes aquí el Llamado a la acción. Observe cómo sobresale esto. Este es probablemente el elemento más importante de esta página, pesar de que es pequeño, está usando el color de resaltado. Este es el único punto donde estamos usando el color de resaltado en este primer lado de la página. Esta llamada sección de héroes. Por supuesto, estamos teniendo algunas imágenes. Esto es realmente para meternos en el estado de ánimo para mostrar el producto. A medida que nos desplazamos hacia abajo, se puede ver que no sólo cambia el color. Esto nos muestra muy claramente que esta es una sección y estamos entrando a una nueva sección aquí. Pero también miren el titular principal de la topografía H1. Entonces este es probablemente H2. También se puede ver que estos están en el mismo nivel de importancia. Entonces puedes ver aquí estoy agregando más información pero baja en jerarquía. A medida que nos desplazamos más abajo, puedes ver que aquí ahora nos están mostrando las plantillas, y nota cómo ninguna de esas plantillas está sobresaliendo. No hay oferta especial, nada que realmente nos esté sobresaliendo. Todo esto es lo mismo. Se trata de una colección de plantillas. Realmente se puede ver cómo esta jerarquía está funcionando a lo largo de toda la página. Por ejemplo, si estamos más allá aquí, todavía se puede ver que se trata un texto de copia H2 y llamado a la acción. Aunque vayamos a otra subpágina aquí, vayamos solo a la primera que encontremos. Se puede ver eso de nuevo, tenemos una sección de héroes y se puede ver titular principal, algún texto de introducción, llamado a la acción, e imágenes. Entonces a medida que se desplaza hacia abajo, se puede ver lo bien que funciona. Nuevamente, estamos teniendo titulares principales, subtitulares, y todo es realmente gran sistema al que podemos navegar. Vamos a resumir. La jerarquía visual ayuda a organizar elementos para comunicar un orden de importancia. Orienta la atención de un usuario a lo largo de tu página. Realmente puedes dirigir eso de la manera que quieras y lo necesitas. Es visualmente mucho más agradable. Ayuda a facilitar el escaneo y la comprensión. Podrás llamar la atención sobre los aspectos más destacados que realmente quieres comunicar. 6. Ley de PraHA Prägnanz de Praha la simplicidad es clave.: El derecho de Prangnanz o a veces también llamado la ley de la sencillez establece que se da preferencia a las formas con una estructura memorable y sencilla para evitar abrumadoras. Nuestros ojos descompondrán formas complejas en simples. investigación también muestra que las personas son mejores en el procesamiento, y así recordar formas simples. Tu ojo está disperso y será menos agradable porque nuestra mente está constantemente tratando de organizarlo. A menos que tengas una buena razón para las formas de fantasía, apégate a las líneas claras y a las formas y el diseño sencillos. Como puedes ver de esta manera es mucho más fácil procesar toda la información de lo que está sucediendo exactamente en esta página. Se trata de una situación de ganar-ganar porque hace que tu vida sea mucho más sencilla a la hora de programar, y saber que las formas simples no harán aburrido un diseño. Puedes traer dinámica con diferentes tamaños usando esas diferentes formas, color y espaciado. Veamos un ejemplo. Esta página está compuesta más o menos por un tipo de forma, a saber, un rectángulo con esquinas redondeadas. Como puedes ver no es aburrido, pero es muy claro, muy fácil de navegar y agarrar y hay mucha oportunidad de jugar con esas formas simples. Están usando muslos, están usando color, y están usando ciertos sentimientos de imágenes en sombras y jugando con la topografía para dar vida a este diseño. Como pueden ver, podemos quitarle mucha carga cognitiva de nuestra mente que estará ocupada de otra manera descomponiendo formas complejas en simples. Vamos a resumir. El ojo humano simplifica formas complejas en formas unificadas simples. Las formas simples conducen a una menor carga cognitiva, por lo que intenta usar formularios con una estructura memorable y sencilla para evitar abrumar al usuario. 7. Ley de la semejanza en la semejanza, el tamaño y la forma: El derecho de la similitud es uno de los principios originales de la Gestalt a la hora de agrupar. Básicamente establece que los elementos que sean visualmente similares se percibirán como relacionados. Tus principales herramientas para crear este sentimiento de pertenencia serán color, el tamaño y la forma. Tenga en cuenta que el orden que les estoy presentando esto no es aleatorio. color es el comunicador más fuerte, seguido del tamaño y luego la forma. Por supuesto puedes combinarlos. Permítanme mostrarles este pequeño ejemplo aquí sobre lo poderosos que pueden ser realmente estos pequeños cambios. Al igual que con todo en UX UI, la clave para todo esto es tener una guía de estilo clara cuando establezcas ciertas reglas. Para el color, por ejemplo, tiene una paleta de conjunto y luego define colores para usar como neutrales o sus colores de resaltado. Es una buena práctica utilizar color de resaltado como método para comunicar al usuario lo que es accionable y se puede hacer clic. Por lo que no usaría aleatoriamente mi color de resaltado en un titular sólo porque creo que se vería bien. Pero lo usaría por ejemplo, en un enlace en el que se puede hacer clic o en un botón. Esta forma se aplica a un botón en toda mi página también se identificará como parte de un grupo y así, esperaré un cierto comportamiento grupal, el mismo para la tipografía. Este es un tema que sigue apareciendo porque es una parte muy importante de nuestro diseño de interfaz de usuario. Se pueden tener estilos establecidos para titulares, copiar texto, y botones, etcétera. Además, todos los componentes de mi página tendrán reglas establecidas sobre cómo usan el color, la forma y el tamaño. Veamos un ejemplo de la vida real. Aquí estamos en la página web de Espacios como de costumbre, absolutamente ninguna relación. Solo te estoy mostrando esto porque me gusta la UI y creo que vale la pena mirarlo. Ahora pasemos por esto estratégicamente y primero veamos el color. ¿ Qué hicieron con el color? Elegieron este amarillo mustary como color destacado. Ahora, necesito decir una palabra sobre contraste y accesibilidad al mirar esto. Es muy importante que cuando elijas tus colores, que estés revisando el contraste y la accesibilidad. Puedes Google y elegir un comprobador de contraste o también probar un plug-in, por ejemplo, en Figma para comprobar tu contraste y el contraste necesita ser lo suficientemente alto. Estas damas de contraste te dirán si es lo suficientemente alto como para asegurarte de que sea legible para todos. Éste, para ser honesto, probablemente no va a pasar porque esta mostaza sobre blanco definitivamente no es legible para todos. Se puede ver que en mi hoja de estilo para mis colores, marco esto como en color para que color puede ir encima de cuál. Si quieres saber más sobre accesibilidad en color, tengo un curso completo sobre color en diseño de UI. No obstante, con este color, lo que están haciendo realmente bien es que lo están usando sólo para elementos accionables y clicables. Para que puedas ver todos los botones. Entonces, por ejemplo, aquí puedo ver las oficinas si están disponibles, puedo ver la ubicación. Este es un link en el que puedo dar click, y aquí de nuevo, este es un link en el que puedo dar click. Esto es color. Entonces el siguiente sería de tamaño. ¿ Qué están haciendo con talla? Podemos ver que hay una jerarquía realmente clara desde el primer titular que va aquí abajo. Entonces podemos ver, déjame revisar esto aquí, titulares más pequeños pasando aquí abajo. ¿ Qué está pasando con la forma? En forma, realmente se están pegando la mayor parte del tiempo a formas rectangulares triangulares muy simples. Pero entonces también tenemos estos pequeños iconos, por ejemplo, que nos muestran las diferentes oficinas disponibles. Aquí se puede ver aquí, usaron un icono redondo para que pueda ver alguna manera estos símbolos deben estar relacionados. También formas como efectos, como si flotara, tengo un poco de sombra. Puedo ver que están relacionados. Aquí, por ejemplo, estamos teniendo formas como estas formas dibujadas. Por lo que aquí también llegamos a diferentes ubicaciones se muestran en este estilo por lo que crean una jerarquía realmente agradable y simple. Vamos a resumir. Visualmente, artículos similares se percibirán como relacionados. Se puede crear esta sensación de pertenencia junto con el color, el tamaño y la forma. También, la orientación, el comportamiento y el movimiento pueden desempeñar un papel importante. Utilizar una guía de estilo o un sistema de diseño para un enfoque sistemático y consistente. 8. Un poco más sobre el tamaño de texto y el tamaño de texto de los botones: El tamaño es un elemento muy importante a la hora de crear jerarquía. Los elementos más grandes se perciben como más importantes que los elementos más pequeños. Esto se puede utilizar con imágenes, textos, o bloques de información. Veamos un ejemplo. Aquí tenemos una página de inicio donde las imágenes y los textos están en orden y con estilo, pero son relativamente similares en tamaño. Si agregamos alguna jerarquía a través del dimensionamiento, logramos algo como esto. Se puede ver que esto de inmediato nos ayuda a escanear información importante y enfocar. Si bien esto es bastante sencillo cuando se trata imágenes o bloques de información, tipografía es realmente donde necesitas enfocarte. ¿ Qué significa esto y cómo podemos lograrlo? Ten muy claro cuáles son tus titulares, sublíneas , intro, o texto kicker. También tenga en cuenta que la percepción del tamaño se puede lograr mediante el uso de algo así como un texto en negrita sobre un texto regular o letras en mayúsculas. Para asegurarse de que está siendo consistente y estratégico con su tipografía y dimensionamiento a lo largo de su diseño, asegúrese de usar una escala de tipo para establecer reglas claras. Para ello, comenzaremos con nuestro tamaño de fuente base. Este es el texto más común, que es tu cuerpo estándar o texto de copia. Por defecto en casi todos los navegadores, esto se establece en 16. Dependiendo de tu tipo de letra, teóricamente podrías ir un poco más grande o más pequeño. Pero 16 es generalmente una buena fuente de tamaño base para trabajar en línea. Normalmente trato de dejarlo en eso. De esta forma, sé que tendré buena legibilidad, y también sé que mi tamaño de fuente base corresponde a un rem, que es el valor raíz, el valor establecido en el navegador para el tamaño de fuente raíz. Una vez que decidimos por nuestro tamaño de fuente base, luego agregamos los otros tamaños. El H1-H3 son los titulares, 1-3, y esto es lo que se llama HTML. El H1 es tu titular principal, tu introducción principal. Generalmente, solo debes tener un H1 por página. Esto también es por razones de optimización de motores de búsqueda. Pero entonces puedes tener tantos H2s o H3s como necesites e incluso podrías agregar más. Entonces si quisieras más sub titulares, podrías agregar un H4, o un H5, y así sucesivamente. El tamaño y peso reales que asignas a ese estilo depende realmente de ti. Podrías asignarlos completamente al azar a tus necesidades. Podrías usar un sistema de escalado de proporciones, o como en este ejemplo, podrías ir en pasos de ocho. Esto va muy bien con mi sistema de espaciado de ocho puntos. Lo importante es que tu H1 es el más prominente, y luego corre lentamente en importancia y jerarquía. También puedes agregar otras cosas como enlaces o botones, subtítulos y citas. Cuantos necesites realmente depende de tu diseño. Lo que ves aquí probablemente sería el mínimo desnudo. Realmente puedes hacer crecer tu escala de tipo a tus necesidades. No obstante, trata de mantenerlo lo más simple posible ya que puede ponerse bastante desordenado de lo contrario. Al decidir sobre tus tallas, debes tener en cuenta que estás diseñando para diferentes tamaños de pantalla. Por lo general, diseñamos en algo llamado móvil primero. Eso significa que configuras todos tus tamaños para la pantalla más pequeña y luego trabajas tu camino hacia arriba donde necesites cambios, agregarías eso. Existen diferentes estrategias sobre cómo se pueden configurar escalas para el diseño responsive. Si te gustaría aprender más sobre la tipografía en el diseño de UI, entonces tengo un curso completamente separado sobre eso, pasando por diferentes unidades, técnicas de dimensionamiento y capacidad de respuesta. Además de la jerarquía, también es importante recordar que dimensionamiento juega un papel importante en la usabilidad y accesibilidad. Todos tus objetivos táctiles, como botones, o iconos en los que se puede hacer clic, deben ser lo suficientemente grandes para que los usuarios hagan clic, no solo con el ratón, sino también con el dedo en una tableta, por ejemplo. Hay mucha investigación por ahí lo grande que debería ser esto. Puede diferir un poco, pero no significativamente. Estoy usando el número dado por las pautas de interfaz humana por diseño de Apple, que por el momento establece que 44 puntos debe ser un tamaño objetivo ideal. Ahora bien, tenga en cuenta que está bien si el artículo en sí es un poco más pequeño. El parte importante es el área clicable, por lo que se ve eso en el muy justo aquí. Tan solo asegúrate de que el área en la que se coloca tu artículo sea lo suficientemente grande. Esto es especialmente importante cuando se agregan elementos clicables uno al lado del otro, como una fila de botones. Asegúrese siempre de que haya suficiente espacio entre ellos para no frustrar al usuario activando accidentalmente el botón equivocado. Ahora toma nota de que estoy hablando de punto aquí, y estamos diseñando un software de interfaz de usuario en el llamado 1x donde 1 pixel equivale a 1 punto. Mucha del tiempo la gente pregunta ¿cuál será el tamaño físico más adelante que veo en la pantalla? Bueno, es un poco difícil de responder porque no se pueden traducir píxeles o puntos como tal en centímetros o milímetros. Pero equivaldría aproximadamente a algo alrededor de un centímetro. Ese es realmente un buen tamaño clicable. Pero esto es realmente sólo algo para tener la cabeza alrededor e imaginarlo en un dispositivo cuando estás probando, por ejemplo. En tu trabajo de diseño, usa algo entre 44 y 48 y debes estar del lado seguro. Vamos a resumir. Los elementos más grandes se perciben como más importantes que los elementos más pequeños. Ser sistemático tener una jerarquía clara. Generalmente para todo, pero sobre todo cuando se trata de tipografía. Recuerda considerar diferentes tamaños de pantalla. Asegúrate de que tus objetivos táctiles sean lo suficientemente grandes. 9. Ley de la proximidad – sistemas y cuadrículas: Al colocar objetos en nuestro diseño, necesitamos considerar la ley de proximidad. Simplemente significa que los objetos cercanos unos a otros serán vistos como un grupo en lugar de partes individuales. Este efecto es uno de los principios originales de Gestalt y es genial crear un sentido de agrupación y pertenencia. ¿ Cómo podemos usar esto cuando se trata de diseño de interfaz de usuario? Podemos usarlo para agrupar elementos similares de intersecciones de información y desordenar nuestro diseño. El derecho de proximidad se puede aplicar prácticamente en todas partes a lo largo de tu diseño. Al igual que aquí puedes ver que a pesar de que mi texto tiene una jerarquía aplicada en cuanto a dimensionamiento, aún lo percibirás como perteneciente a la parte superior del diseño. En tanto que ahora, se convierte en parte de la biblioteca de imágenes a continuación. Del mismo modo que la proximidad puede crear una sensación de agrupación, también se puede lograr exactamente lo contrario agregando espacios negativos o en blanco, esto puede ser realmente útil. Por ejemplo, entre secciones con el fin de crear una clara distinción. píxeles no cuestan extra, así que úsalos y déjalo respirar. espacio negativo o el espacio en blanco realmente hace la diferencia en un diseño. Al igual que con todos los elementos de diseño, el uso del espacio debe ser un enfoque sistemático. Un sistema que solo agrega consistencia a tu diseño pero también facilita creación de componentes siguiendo el mismo conjunto de reglas más adelante en tu CSS. Existen dos herramientas que determinarán el posicionamiento y el distanciamiento en su diseño, el sistema de rejilla y el sistema de espaciado. Ahora, los dos a menudo se confunden y es importante entender lo que hace cada uno de ellos y que trabajan de la mano la mayor parte del tiempo. Los sistemas de cuadrícula establecen la distribución horizontal y el diseño más amplio. El grado que estás usando depende de ti y de tu equipo de desarrollo. Colocarías tus artículos dentro de la cuadrícula y luego utilizarías la canaleta establecida como una distancia horizontal. No obstante, para su espaciado vertical y para el espaciado dentro de los elementos, utilizaría un sistema de espaciado. El sistema de espaciado es básicamente un múltiplo de su tamaño base que usted define. En mi caso, me gusta usar y recomiendo encarecidamente usar un sistema de espaciado de ocho puntos. Mi tamaño más pequeño y tamaño base es ocho como distancia, y luego todo lo demás es un múltiplo de ocho. Hay muchas ventajas de por qué usarías un sistema de escalado de ocho puntos, o también un sistema de escalado de cuatro puntos, por cierto, últimamente es bastante popular. Estos dos sistemas de espaciado escalan sorprendentemente bien con el tamaño de fuente del navegador que generalmente se establece por defecto en 16 y es un múltiplo de cuatro y ocho así como iconos que normalmente encuentras en tamaño de 24 o 48 píxeles. Otro aspecto es que esos números se escalan realmente bien al exportar activos a otras resoluciones, ya que se puede escalar hacia arriba, pero también se puede escalar hasta, por ejemplo, 1.5 cuando se trata de Android. De esta forma evitas la mitad de píxeles y la borrosidad. Tengo un curso extenso separado sobre sistemas de resolución y espaciado, así como una causa en profundidad en las rejillas. Si esto es nuevo para ti, definitivamente algo que echar un vistazo para conseguir algo mayor de comprensión. Vamos a resumir. Los objetos cercanos unos a otros serán vistos como un grupo. Esto es genial para crear una sensación de agrupación y pertenencia en tu diseño. El espacio en blanco es rey, úsalo. Agrega espacio entre secciones. Agregar consistencia con el sistema de rejilla y espaciado. 10. Ley de la región común: crear secciones en tu diseño: El derecho de las regiones comunes establece que los elementos con región definida tienden a percibirse como pertenecientes juntos. Esto no formaba parte de la Teoría Gestalt original pero fue agregada posteriormente por Parma en los años 90. Common region es una poderosa herramienta que da una estructura clara al usuario, a lo que pertenece juntos. Puede parecer una técnica de diseño menor para resaltar las cosas, pero hace tal diferencia. Región común puede ser cualquier cosa, desde un contorno hasta un florero, sutil tono gris en el fondo que idean las intersecciones de tus páginas. Crear esas secciones es un gran ayudante para el usuario con el fin de no estar abrumado. Simplemente juega con él y verás la diferencia que hace. Veamos un ejemplo de la vida real. Esta es la página de avena, como de costumbre, sin relación. Simplemente me gusta mucho la UX y quería mostrarte. puede ver que están usando color de fondo gris muy sutil y luego solo el color de fondo blanco en contraste con él. Se puede ver que esto crea secciones realmente bonitas. Obtienes una estructura muy, muy grande sin siquiera tener un elemento que estás notando conscientemente. Ahora, además de esto como color de fondo completo y crear secciones, Región común también se utiliza en elementos más pequeños, como se puede ver aquí, por ejemplo, esto está dando una región Common y una sombra, y muestra claramente que se trata de una sección que pertenece en conjunto. Además, veamos aquí si vamos en trenes. Se puede ver que crea más cartas. Siempre que estoy teniendo esta región, entonces esto es un tema, tener esos temas todavía sentados en otra región común, el fondo aquí. Se puede ver que se pueden solapar, pero está muy claro que pertenece juntos. Más abajo. Por ejemplo, tenemos una tabla, y aquí también podemos ver que esta fila se destaca con una región común, dejando muy claro que se trata alguna información que pertenece conjunto y es pertinentes para nosotros. Ahora, también tenga en cuenta que no necesariamente tiene que ser un bloque de color. Aquí, por ejemplo, sólo tenemos líneas, pero esto también crea una región común. Esto se debe a la llamada Ley de Cierre, que también es una ley de Teoría Gestalt. Lo que hace, significa que nuestro cerebro va a completar, formas incompletas para crear una forma. Se puede, por ejemplo, ver aquí abajo, que esto creará una región común, pesar de que hay algún espacio abierto en la forma. Como puedes ver, realmente puedes jugar con él, lo único que debes tener un poco cuidado es no usarla en exceso y no anidar regiones comunes entre sí. Si quisieras crear más secciones con regiones comunes internas, me gustaría mostrarles aquí este ejemplo. Básicamente necesitas estar al tanto de algún tipo de jerarquía, tú las estás creando. Aquí se puede ver que crearon esta región común como esta caja exterior, y usaron una sombra y algo de profundidad, por lo que eso la hace muy prominente y muy poderosa. Entonces querían volver a crear dos subsecciones dentro de esas regiones comunes, y lo que hicieron no es reutilizar ese efecto utilizado para el grupo principal, pero usan algo mucho más sutil, como, por ejemplo, un suave cambio de color. También podrías usar espacios en blanco la mayor parte del tiempo, eso es más que suficiente. Más abajo aquí se puede ver realmente que no usaron este enfoque, lo que hizo es usar esta misma región común externa y un interior, comenzaron a dividirse con un enfoque similar de líneas. Se puede ver que sólo se pone un poco más desordenado y simplemente no es tan claro y limpio como lo que hicieron aquí arriba. Se puede ver que es un concepto muy sencillo, pero muy poderoso que puedes usar en casi cualquier diseño. Vamos a resumir. Los elementos con una región definida tienden a ser percibidos como pertenecientes juntos. Esta sencilla técnica es ideal para estructurar tu diseño. Una región puede ser un color de fondo completo o un contorno. 11. Efecto Von Restorff de Von en el lugar que necesitas: El efecto Von Restorff, también llamado el efecto Aislamiento establece, que dentro de un grupo de artículos similares, uno que sea diferente será más recordado. Un ejemplo clásico es uno de una tabla de precios donde quieres resaltar la oferta que más quieres destacar. Lo que pasa aquí es que todo sigue la ley de similitud para demostrar que estamos tratando con la misma familia, nombrando opciones de precios. Entonces solo coloreamos en uno de estos casos para resaltar. Aquí le dimos un borde rojo y resaltamos el botón. Al resaltar esta elección, se le dará más atención por parte del usuario, sobresale y será más probable que se recuerde. Veamos algunos ejemplos de la vida real. Aquí tenemos una oferta navideña. Se puede ver que a pesar esas cajas son casi las mismas, le dará mucha más atención a la caja verde superior. Esto se debe al color prominente. También estamos teniendo una preselección aquí y estamos teniendo algo que indica un muy buen valor. Otra área donde utilizamos el efecto Aislamiento es si queremos mostrar descuentos o algo especial sobre un producto que estamos vendiendo en una tienda online. Aquí, por ejemplo, se puede ver que este es un carrito normal que vende el artículo. Si tenemos un descuento, estamos agregando algo de rojo aquí en el premio, y esto automáticamente llama nuestra atención sobre este producto. El efecto Von Restorff no tiene que ser siempre algo relacionado con los precios o ofertas muy llamativas. También se puede utilizar de una manera muy sutil como se puede ver en esta página, donde el producto está muy simplificado. Entonces solo agregamos algunas imágenes donde la gente, por ejemplo, usa o un poco más de una imagen de humor que llama la atención. Realmente puede agregar algo dinámico siempre que tengas un conjunto de artículos similares y quieras resaltar uno o algunos de ellos. Vamos a resumir. En un grupo de artículos similares, el que sea diferente será más recordado. Esto es ideal para llamar la atención sobre sus principales características. El color es muy efectivo, pero asegúrate de considerar los temas de accesibilidad. Por ejemplo, ceguera del color o contraste suficiente. 12. Ley de la frecuencia común: predicción de frecuencia: El derecho del destino común establece que dos o más elementos que se comportan de la misma manera, son percibidos como parte de una unidad. No importa qué tan alejados se coloquen los elementos unos de los otros ni qué tan diferentes sean en apariencia. Si se mueven o cambian juntos entonces aparecen como uno. Esto es especialmente importante cuando hablamos de diseñar para la interacción con el usuario. Un ejemplo clásico para esto son las presentaciones de diapositivas o los drop-downs de FAQ. Tan pronto como hagas click en uno y veas que se abre, sabrás que el resto del grupo se comportará exactamente igual. Otro buen ejemplo es el sitio web de Headspace que utiliza mucho esto. Como de costumbre, sin relación con el producto, solo te estoy mostrando gran UX. Aquí puedes ver algunas citas, por ejemplo, y al hacer clic, se comportan y se mueven de la misma manera. Más abajo, puedo ver esta sección aquí donde si empiezo a hacer clic en un botón, revela nueva información. Sabré que esto probablemente va a pasar a todos esos botones de aquí ya que se comportan de la misma manera. Vamos a resumir. Dos o más elementos que se comportan de la misma manera, se perciben como parte de una unidad. Los elementos no necesariamente deben tener el mismo aspecto ni debe ser en proximidad. Esto se puede utilizar como un efecto de diseño o como una interacción mejorada. 13. Reacción visceral: emoción en tu diseño : Es importante construir su producto siguiendo los principios comunes de U, Xi. Te dará una base y un marco sólidos. Sin embargo, para que tu diseño realmente destaque, necesitas evocar una reacción visceral. La reacción visceral significa que quieres que tu diseño cree un sentimiento que no tiene nada que ver con lógica y no es el resultado del pensamiento, sino más bien un presentimiento Por mucho que puedas seguir estrictamente las reglas cuando se trata de principios de diseño, esto es todo lo contrario. Es difícil de predecir y difícil de probar, pero básicamente es la identidad de tu marca lo que estás comunicando. El corazón y el alma. Piénsalo como una persona. Lo más probable es que sea una combinación de la forma en que él o ella camina y habla, mira, hay algo gracioso o algo genial. Es muy individual y también muy diferente si a la gente le gusta o no. Así que asegúrate de conocer a tus usuarios y tu propia marca. Realmente se trata de ser auténtico en su conjunto. Veamos algunos ejemplos y diferentes formas de evocar imágenes de reacción visceral es la forma más directa e importante de atraer realmente a tu usuario a tu mundo Este ejemplo muestra muy bien cómo puedes usar imágenes en diferentes tamaños para atraerlas realmente a la experiencia Como aquí conseguimos la aventura y la temperatura y solo toda la experiencia se siente muy cerca. También tenga en cuenta cómo utilizan el color del azul y el naranja, como cálidos y fríos, colores complementarios, muy bien en la comunicación de este mensaje. El video es aún más fuerte que la imagen sola. Aquí puedes ver que el video se usa para comunicar realmente un estado de ánimo en lugar de simplemente mostrar el producto. También se anotaron los colores en el video y cómo en toda la página estos se repiten. Se trata de colores realmente suaves, beige como incluso en la cabeza, y un ambiente muy tranquilo. Tener una persona o personaje específico que te guíe a través del producto o la experiencia también es realmente genial para crear un vínculo con el usuario. Verás esto mucho en torno desarrollo personal como el deporte. Podría ser la persona real, pero también podría ser un personaje inventado. Headspace hace un trabajo realmente genial en esto e inventado hace pequeños personajes que te llevan a través de la meditación La tipografía también puede ser una excelente manera de comunicar un sentimiento Por lo general termina siendo un poco más moderno y un aspecto gráfico, pero no necesariamente tiene que ser así. También se trata de cómo se escribe tu texto. ¿Es gracioso? ¿Es poético? ¿Cómo habla con el usuario? Incluso si estás mostrando un producto o software, puedes ser realmente creativo en la forma en que lo estás mostrando. La importancia es ser congruentes y crear un sentimiento. Vamos a resumir. La reacción visceral es una sensación intestinal que establece el ánimo Qué, o quién hace que tu marca use imágenes, videos, combinaciones de colores, tipografía y tono de voz para crear este estado de Esta es la guinda de la guinda. Asegúrese de que se basa en una experiencia UXUI sólida. 14. Descarga de material: Quizás quieras trabajar a mi lado, así que preparé algunos archivos para que los descargues. En el curso que estás tomando simplemente navega a proyecto y recursos y ahí, encontrarás toda la información y el enlace donde podrás descargar el material. O bien puedes navegar a mi perfil donde también encontrarás un enlace directo a la página de descargas. En esta página encontrarás gran variedad de descargas. Simplemente puedes elegir el curso que estás tomando actualmente y luego solo tienes que hacer clic en “Descargar” y se descargará automáticamente el archivo por ti. Para abrir un archivo de Figma para descargarlo, es importante que tengas una cuenta de Figma. Dentro de tu cuenta, navega a nuevo y pulsa “Importar”. A continuación, puede elegir un archivo que le gustaría abrir. Podría tomar un momento ya que son bastante grandes, pero una vez que los importaste, estarán a tu cuenta y no necesitas repetir este proceso. Estoy trabajando con fuentes de Google para la mayoría de mis diseños. Si estás trabajando con la app Figma, entonces no necesitas hacer nada. Todas las fuentes de Google están precargadas automáticamente. Si quieres trabajar con Figma en el navegador, entonces solo necesitas buscar la fuente que te está mostrando como faltante. Por ejemplo, Poppins, yo uso mucho y luego puedes descargar directamente esta fuente instalarla en tu computadora y ya estás listo para ir. Todos los recursos son gratuitos para los estudiantes existentes y no es necesario ingresar ninguna información adicional. Por supuesto también puedes descargar cualquiera de los otros archivos en caso de que te interese. En general siempre agrego cualquier cosa que creo que pueda ser útil. Hay, por ejemplo, una plantilla Bootstrap y luego una lista con enlaces para libros de inspiración y bloques que son realmente geniales para el diseño de UX UI. Esta lista de descargas está creciendo constantemente, así que asegúrate de volver y echar un vistazo de vez en cuando. 15. Ejerce --> sitio web de cotrabajo Figma: Pongamos en práctica toda esta teoría. Preparé un Figma 5 para ti. Usa la función de importación para ver el archivo y podemos ponernos en marcha. En este expediente, se encuentra el ejercicio en la primera página. Nuestro ejercicio es que estaremos montando un diseño para un pequeño espacio de coworking de oficina abierta. Se nos da un breve con toda la información sobre materiales disponibles como imágenes y otros elementos de marca. También teníamos a nuestro equipo imaginario de UX trabajando en esto y nos dieron un marco básico de alambre para empezar. Ahora puedes aplicar los principios de los que aprendiste en este curso para configurar tu primer diseño. Los resumo para ustedes aquí en la descripción del ejercicio nuevamente. En la segunda página del archivo, encuentras una solución sugerida que preparé para ti. Esto solo está ahí para que te inspires y curiosos sobre cómo uno podría abordar esta tarea. No existe tal cosa como una solución para diseñar. El tuyo podría ser igual de bueno o incluso mejor que el mío. Realmente haz esto tuyo, trata de apegarte a los principios del diseño, pero siéntete libre de reescribir el breve y hacer todo un proyecto nuevo para tu portafolio de esto. Ahora estás a cargo. Disfrutar. 16. ¿Quieres añadir algunos UX?: Si tienes curiosidad por saber cómo se creó ese wireframe de nuestro ejercicio en primer lugar, y qué más podrías hacer para mejorar tu UX entonces te recomiendo que tomes la primera parte de este UX/UI intro. Puedes encontrar nuestro coito UX aquí mismo en Skillshare. Simplemente busca el aprendizaje de la luna y verás todos los cursos hasta ahora. Dentro de esos cursos, verás el curso UX aquí arriba. Dentro de ese curso, encontrarás todos los principios sobre el diseño de UX/UI. Al final, un ejercicio en el que estaremos hablando de cómo crear este wireframe. 17. ¡Gracias!: Bien hecho por terminar este curso. Siéntete libre de llegar a nosotros en moonlearning.io, siempre estamos interesados en escuchar tus comentarios. También nos harías un gran favor si tan solo pudieras tomarte un minuto y dejar una reseña aquí mismo. Si disfrutaste de este curso entonces también asegúrate de echar un vistazo a nuestros cursos adicionales. En moonlearning.io, cubrimos todos los temas desde los fundamentos mismos del diseño de UX/UI hasta Figma e incluso algunos conceptos básicos de código. Asegúrate de visitar nuestra página web en moonlearning.io, donde también puedes suscribirte a nuestro boletín de noticias.