Diseño de experiencia de usuario de la A a la Z: diseño UI/UX en Adobe XD

1. Resumen de los cursos de UX/UI: En este video, vamos a repasar la interfaz de usuario de aprendizaje de UX de la a la descripción general del curso Z. Vamos a recorrer todas las diferentes secciones centrales. Te voy a dar una visión general de cada sección, lo que puedes esperar antes de saltar a las secciones del curso, quiero presentarme rápidamente. Entonces mi nombre es Juan, soy uno de tus instructores en este curso. He sido emprendedor desde la primaria. Mi experiencia está en el espacio tecnológico, desde el marketing digital, el comercio electrónico, el diseño, hasta la programación. Creo en la educación continua con lo mejor de un título universitario, sin todas las desventajas de los costos budistas y métodos ineficientes. Espero poder ayudarte a ampliar tu conjunto de habilidades. Arthur es el otro instructor en este curso. Ha sido diseñador gráfico desde 2002 y actualmente trabaja como freelancer de UX UI, trabajando con muchas empresas en todo el mundo. Y está deseando ayudarte a expandir tu conjunto de habilidades y el diseño de la interfaz de usuario de UX. Sigamos adelante y saltemos aquí. Bien, entonces la primera sección va a ser la introducción al curso. Aquí es donde vamos a repasar la interfaz de usuario de UX. Cuál es exactamente la diferencia entre la experiencia del usuario y interfaz de usuario y cuáles son exactamente esas. Y luego vamos a repasar el actual mercado de diseñadores hasta donde se encuentra actualmente, cuanto al salario promedio, el número de posiciones abiertas, las oportunidades, el potencial de crecimiento para el campo UX y UI, ¿verdad? Así que vamos a repasar eso. Así que vamos a repasar diferentes tipos de roles de UX en diferentes organizaciones, desde organizaciones pequeñas hasta organizaciones medianas, hasta organizaciones de grandes empresas también. Y luego en la sección dos, vamos a entrar en la introducción a la industria web. Y aquí es donde vamos a entrar en las diferentes fases del desarrollo web. Es importante que tengas una comprensión fundamental de cómo funciona el desarrollo web, todo lo que implica en lo que respecta las diferentes etapas de diseño, quieres entender el enfoque ágil. Vamos a recorrer eso con gran detalle. Te vamos a dar una visión general versus el modelo lineal versus el enfoque Ágil. Y luego también repasa el marco del proyecto Scrum que normalmente vas a estar trabajando con ellos. Entonces tenemos la Sección tres. Aquí es donde empezamos a hacer algunas de las lecciones de Adobe XD también. Donde vas a estar haciendo un poco de manos sobre el hombro. Y entonces vamos a estar discutiendo la psicología del color. Vamos a entrar en diferentes esquemas de color, ruedas de colores, y realmente te daremos una visión general de los fundamentos del diseño gráfico, ¿verdad? Porque necesitas entender cómo funciona el color, diferentes esquemas de color, cómo trabajar con diferentes fuentes, cómo trabajar con diferentes íconos y entender realmente la teoría del color, cómo funciona la teoría del color, cómo funcionan los colores, cómo usar el tipo correcto de colores y situaciones únicas. Cómo los colores evocan emoción, y el tipo de colores que quieres usar, dependiendo del tipo de diseño que estés buscando crear. Así que sección muy emocionante ahí también. Y luego tenemos la Sección Cuatro. Aquí es donde entramos en el diseño UX. Aquí es donde también hacemos algunas lecciones adicionales de Adobe XD, donde vamos a estar haciendo análisis competitivos. Vamos a repasar lo que es un viaje de cliente. ¿Qué es? Embudo de ventas, los diferentes tipos de embudos de ventas, diferentes etapas de embudo de ventas. Mucho más. Esa probablemente va a ser la sección más grande de este curso. Y es muy profundo. Y así me emociona que también empieces con eso. Y luego Sección cinco, aquí es donde vamos a repasar el diseño de la interfaz de usuario. Vamos a repasar el proceso de diseño de la interfaz de usuario. Vamos a repasar diferentes páginas de destino, diferentes componentes de interfaz de usuario en varias lecciones diferentes de Adobe XD también, donde vas a estar creando diferentes tipos de diseños, crear diferentes tipos de encabezados, trabajar con microinteracciones y un montón de otros tipos de interfaz de diseño de interfaz de usuario. Así que muy, muy emocionada de que tú también empieces con eso. Y entonces tenemos la Sección seis, que va a ser la optimización. Aquí es donde vamos a ir por encima de la regla del doblez. Vamos a repasar cómo usar la analítica para la optimización, cómo usar los mapas de calor. Y luego tenemos un par de Adobe XD menos thans ahí también. Entonces finalmente tenemos la Sección Siete. Aquí es donde vas a comenzar tu carrera en el espacio de diseño de UX UI. Y vamos a estar repasando freelance una consultoría de clientes, marca personal, cómo configurar un sitio web. Y vamos a repasar algunas de las cosas que se deben y no se deben hacer en las redes. Cómo establecer redes correctamente para que puedas ponerte en posición, conseguir nuevos puestos, nuevos empleos, tal vez nuevos clientes, ¿verdad? Y luego repasando algunos de los mejores sitios web freelance. Y luego también, voy a guiarte a través una herramienta que vas a usar como tu hub donde esencialmente puedes tener todos tus proyectos de clientes, todas tus tareas pendientes, todas tus tareas. Y es una plantilla que he creado y a la que vas a poder acceder. Y luego finalmente, vas a encontrar los diferentes lugares para encontrar trabajo de UX y UI. Entonces me emociona que empieces en este curso y te veremos en el siguiente. 2. Descripción de la sección de UX/UI: En este video, vamos a repasar la descripción general de la sección aprender UX UI. Por lo que en el video anterior, repasamos todo el panorama general del curso. Pasamos por encima de las diferentes secciones, lo que vas a esperar de cada tema en particular, cada área en particular. Y luego En este video, vamos a repasar lo que se va a incluir en esta sección en particular en sí. De acuerdo, así que sigamos adelante y saltemos aquí a la visión general de la sección. Entonces lo que vamos a estar cubriendo en esta sección es la UX versus UI. Quiero darte una visión general fundamental de lo que es la UX, lo que realmente significa, y cómo funciona realmente en el mundo real. Lo mismo para la UI. Y luego poder contrastar UI versus UX porque quieres poder entender las diferencias, cómo funcionan y cómo trabajan juntos. De acuerdo, entonces vamos a entrar en el mercado de diseñadores de UX UI. Vamos a ver algunos potenciales salariales, el mercado laboral, el potencial de crecimiento, y realmente te daremos una visión general de hacia dónde va esta industria y cuánto potencial de crecimiento realmente tiene para ti si buscas realmente sumergirse profundamente en esta industria en particular. Porque el futuro es muy prometedor para el mercado de diseñadores UX UI. Y quiero mostrarles algunos números que van a respaldar eso hasta lo que se puede esperar hacer apenas empezando y lo que se puede esperar hacer a medida que avanzas en tu carrera. Y luego vamos a estar repasando, como mencioné, salario promedio para la UX y la UI, el potencial de crecimiento. Vamos a repasar cómo aprender las habilidades correctamente, la mejor manera de aprender estas habilidades. Y tengo una conferencia que repasa eso específicamente. Y luego la importancia de ser un diseñador bien redondeado. Porque una de las cosas que notarás cuando empieces por primera vez a solicitar diferentes trabajos. O tal vez si consigues un trabajo en una organización pequeña, de tamaño mediano, te van a hacer un montón de cosas diferentes y usar múltiples sombreros y tal vez escribir copia, tal vez escribir contenido, y tal vez, ya sabes, trabajar en un embudo de ventas o algo parecido al del departamento de mercadotecnia, ¿verdad? Entonces y ahí es donde vas a poder ser un diseñador bien redondeado cuando conoces todos estos diferentes elementos y sobre todo la estos diferentes elementos y psicología conductual y entender por qué tomamos decisiones, qué nos impulsa a tomar las decisiones en diferentes desencadenantes de influencia, diferente elemento de persuasión y cómo usar la persuasión y influencia y su mensajería con diferentes colores, ¿verdad? Y así en este curso vas a aprender a hacer justamente eso. Vas a aprender a desarrollar embudos de ventas, diferentes etapas de embudo de ventas, cómo crear páginas de aterrizaje para diferentes tipos de elementos que están involucrados en los esquemas de color. Entonces puedes ser un diseñador bien redondeado, ¿verdad? Y luego vamos a repasar los diferentes roles de UX y UI. Porque lo que queremos que hagas es alejarte de este curso siendo un diseñador muy bien redondeado. Para que si vas a entrar en más de la etapa de diseño gráfico donde quieres construir logotipos. Quieres crear logotipos y diferentes diseños. Podrás hacer eso a un nivel muy alto porque entenderás diferentes elementos de diseño, psicología del color, teoría del color, diseños y esquemas de color únicos, ¿verdad? Y así vas a saber cómo hacer tantas cosas diferentes aparte del típico diseñador de UX y UI, vas a tener una variedad de habilidades y vas a ser extremadamente valioso para una organización después de que hayas terminado con esto curso. Y así me emociona que empieces y te veremos en el siguiente. 3. UX vs UI: En este video, vamos a repasar las diferencias entre UX y UI. Esta es una lección muy importante aquí porque quiero darte una verdadera comprensión fundacional de lo que es UX, cómo funciona, cómo funciona una función, los diferentes factores entonces UX y poder contrastar eso con UI para que tú puede obtener un alcance completo de lo que eres es lo que es UX, y ser capaz de entender cuáles son los diferentes elementos, componentes, y factores de los que cada uno de estos está formado. Así que sigamos adelante y saltemos al diseño de UX. El diseño de Ux implica interacciones entre un cliente potencial o activo y acompaña y se basa en el diseño visual, psicología del comportamiento, y la investigación del consumidor. Ahora, una de las cosas más grandes aquí que quieres tener en cuenta es la psicología conductual y la investigación del consumidor. Eso es lo que también estás aprendiendo en este curso, que es muy importante para tu carrera de UX y UI. Si realmente no entiendes la psicología conductual, la influencia desencadena la persuasión, siendo capaz de entender qué hace que los humanos se ticen y qué realmente lo hace tomar una decisión y cómo evocar ciertas emociones, entonces eres realmente va a pasarlo mal con el diseño del usuario y la experiencia del usuario. De acuerdo, entonces eso va a ser un gran elemento para la UX. Y entonces la parte de la experiencia del usuario se refiere a la interacción entre el usuario y el producto o servicio. Entonces cómo el usuario está interactuando con ese producto en particular, ese sitio web, está considerando esencialmente todos los diferentes elementos y cómo interactúan entre sí para dar forma a esta experiencia. De acuerdo, entonces esto es lo que es la experiencia del usuario. Es cualquier tipo de experiencia que esté atravesando un usuario para interactuar con el negocio, el sitio web del negocio, la aplicación, cualquiera que sea, eso es lo que realmente quieres quitarle a la experiencia del usuario. Entonces interfaz de usuario, este es el diseño y aspecto real de la presentación o la interactividad de un producto, ¿no? Piensa en una aplicación web, un software como aplicación de servicio que alguien utiliza en su teléfono para realmente tal vez jugar un juego o para poder construir el producto o lo que sea que sea, ¿verdad? Todo tipo de interfaz de usuario va a tener una interfaz única que es capaz de que el individuo, el cliente, o el usuario final puedan usar el software, la aplicación real, el sitio web, y poder utilizar ese producto y tener una experiencia placentera usándola, ¿verdad? Y entonces tenemos la interfaz de usuario es el punto de interacción entre el usuario y un dispositivo digital o productos, ¿verdad? Entonces piensa en como una pantalla táctil en tu smartphone cosa sobre Facebook, estoy seguro que tienes Facebook en tu teléfono. Piensa en cómo esas interfaces de usuario configuran donde lo hacen para que estés constantemente en tu teléfono. Estás revisando tu feed de noticias, estás mirando de lo que están hablando otras personas, ¿verdad? Entonces esa es esencialmente la interfaz de usuario de una aplicación. Y lo diseñaron de una manera para que siempre quieras ir en Más allá de la aplicación, ¿no? Y con sitios web y diferentes aplicaciones, diseño de la interfaz de usuario considera el aspecto y la interactividad del producto. Y así en última instancia lo que el diseño de la interfaz de usuario siempre piensa en ello desde esa perspectiva. Esta es la interfaz con la que realmente estoy interactuando. Esto es lo que estoy diciendo. Así es como realmente estoy usando esta plataforma, cómo estoy usando, digamos LinkedIn o Facebook o cualquiera de estos otros tipos de sitios web o aplicaciones, ¿verdad? Es como estás interactuando con ellos y eso es lo que realmente quieres entender y saber en cuanto a la interfaz de usuario, el diseño de la interfaz de usuario. De acuerdo, así que eso va a estar aquí para esta, y nos vemos en la siguiente. 4. Mercado diseñador UX/UI: En este video, vamos a repasar el mercado de diseñadores UX UI. Entonces esto te va a dar una introducción al mercado como salario inicial. ¿ Cuáles son algunas de las cosas que buscan los reclutadores? Y algunos de los retos que en realidad enfrentan los reclutadores para poder encontrar el mejor talento de diseño de UX UI. Porque estás tomando este curso y estás pasando por este programa, vas a ser alguien que en realidad es capaz de cubrir esos puestos porque vas a conseguir la capacitación necesaria y requerida que va a se espera de para un diseñador de UX y UI. Así que sigamos adelante y saltemos al mercado de diseñadores de UX UI y cuánto potencial de crecimiento tiene realmente aquí. Entonces una de las primeras cosas a tener en cuenta aquí es que LinkedIn hizo un lado diseño de UX como una de las mejores habilidades para aprender y 20-20 y más allá. Y tiene sentido, ¿verdad? Porque piensas en diferentes negocios que buscan hacer más de un impacto en línea y buscan encontrar más formas en las que pueden involucrar a sus usuarios. Pueden proporcionar un mejor viaje al cliente, experiencia al cliente, y poder brindarles una experiencia increíble con la marca, con la empresa, con los empleados, ¿no? Y así el diseño de UX Marketplace ha estado explotando, seguirá teniendo una cantidad significativa de crecimiento a partir de ahora y más allá. Por lo que los reclutadores a menudo están luchando para llenar los roles de UX debido a la brecha de conocimiento. Ahora, al igual que mencioné, ustedes pasando por este curso, entran en este programa. Vas a tener esas habilidades necesarias, la comprensión de lo que se requiere de un diseñador UX UI. Y así vas a poder llenar estos roles muy fácilmente, sobre todo porque estás aprendiendo mucho más aparte de la información y conocimientos tradicionales de UX y UI, ¿verdad? Porque la tradicional UX UI, eso va a ser más alrededor de la obviamente experiencia del usuario, diseño gráfico y muchas otras áreas, sin embargo, donde esto realmente se mete en un creador de diferencias es la psicología conductual, la comprensión de la persuasión de influencias, y realmente la comprensión de la psicología humana su conjunto para que se puedan crear productos que realmente estén siendo capaces de ser tomados acción por los individuos porque usted entiende cómo el realmente opera, qué impulsa la toma de decisiones, cómo en realidad Emoción, el factor más grande cuando los individuos toman decisiones, y tienden a justificar lógicamente. Por lo tanto, entender no sólo los roles de UX UI en tener ese conjunto de habilidades, sino también entender la influencia y la persuasión va a recorrer un largo camino. Y así el salario promedio para un diseñador de UX y UI, y creo que esto está en EU. Entonces por 85 mil al año, puedes ver aquí es una cantidad bastante decente de salario porque estás haciendo tanto por el negocio, ¿verdad? Tienes un valor tremendo. Eres responsable de proporcionar la experiencia real en el cliente, el usuario final, como tener lo que ese producto final. Y así esta es una posición muy importante. Y si le preguntas a la mayoría de las personas que están en la UX UI sienten, te dirán que es una carrera significativa porque tienen verdadero interés en la curiosidad por el trabajo que realmente hacen todos los días. Porque recuerden, los profesionales de la UX suelen estar muy interesados en cómo operan las personas. ¿ Cómo funciona la mente humana? ¿ Cómo funciona la psique humana? ¿ Qué nos impulsa a tomar medidas realmente para tomar ciertas decisiones? Y entonces lo que todos tienen en común aquí es que están motivados a entender a sus usuarios y a mejorar la experiencia general, ¿no? Y eso todo entra en la psicología conductual. Por lo que en última instancia el mercado de diseñadores UX y UI es masivo. Está creciendo a un ritmo muy alto en hay mucha oportunidad para que puedas empezar en esta industria en particular, sobre todo porque estás pasando por este programa, estás obteniendo todas las habilidades. Estás comprendiendo, psicología del color, o en lo que respecta al diseño gráfico , la teoría del color, diferentes esquemas de color, entiendes cómo crear diferentes maquetas. Esencialmente estás pasando por un bootcamp, un programa completo que te va a poner listo para poder conseguir un puesto de nivel de entrada, un diseñador UX de UI, o puedes empezar a hacer freelancing. Puedes empezar a hacer algunos gigs y conseguirte un perfil, luego obtener un portafolio acumulado y luego poder salir y conseguir diferentes posiciones como diseñador de UX UI. Depende de ti. Y así se trata realmente de lo que quieres hacer y de cómo quieres hacerlo. No obstante, la información está aquí para que puedas aprovechar y poder aprovechar y a tu UX y eres carrera. Y así que eso va a estar aquí para el mercado de diseñadores de UX y UI. Y nos vemos en el siguiente. 5. Descripción de los roles UX: En este video, vamos a repasar los roles de UX y UI. Entonces estos son los, algunos de los diferentes roles y vas a ver dentro de una organización. Y esto puede diferir bastante dependiendo del tamaño de la organización. Si tienes tal vez una organización más pequeña con la que estás trabajando o una organización de tamaño mediano, vas a encontrar que muchas veces una persona individual lleva un montón de sombreros diferentes y están haciendo mucho de este trabajo por sí misma. Por lo que un individuo, digamos en una startup o en una empresa más pequeña, puede estar haciendo UX y UI por sí solos. Versus con organizaciones grandes, puede que alguien solo maneje una UX, alguien simplemente maneja una UI. Alguien sólo hace la investigación real, ¿verdad? Y si las organizaciones más pequeñas de tamaño mediano, típicamente vas a encontrar a una persona que maneje ambos y hace toda la investigación y toda la información de antecedentes y requisitos diferentes que también se necesitan. Así que sigamos adelante y saltemos a los diferentes tipos de rol UI y UX. Entonces el primero aquí va a ser un diseñador visual. Y esto también puede ser conocido como diseñador gráfico. Y lo que están haciendo es esencialmente enfocarse en el panorama general, el concepto, el impuesto de los gráficos, la topografía, los iconos en diferentes esquemas de color, el aspecto y la sensación de cómo va el diseño o la aplicación a la que va la página web mira. Y entonces tenemos al diseñador de UX, ¿verdad? Este es el individuo que maneja el viaje del cliente. Están manejando la experiencia del cliente, asegurándose de que el usuario final esté teniendo una experiencia placentera y satisfactoria con la marca, con el sitio web, con la aplicación, y que el proyecto tenga una lógica fluye para que el usuario pueda pasar de paso a paso sin perderse, ¿verdad? Tan solo piensa en un embudo de ventas. Si no estás familiarizado, vamos a estar caminando por eso en este curso en la sección de diseño de UX, donde vas a aprender sobre embudos de ventas, que diferentes pasos a lo largo del proceso. Cómo va la gente y realmente compra artículos en un micro pasos diferentes que están involucrados en eso vas a aprender todo sobre eso. No obstante, solo quería darte una visión rápida de que el diseñador de UX tiene todo que ver con cómo él los usuarios interactúan con la marca y cómo pasan de un completo extraño a convertirse realmente en un cliente pagador. Y luego el diseñador de UI, este es el individuo que se preocupa por los elementos de diseño gráfico de una interfaz, ¿no? Basta con pensar en una aplicación. Piensa en cualquier tipo de aplicación móvil, cualquier tipo de producto online, como un producto SaaS, ¿verdad? Eso te tiene ahí dentro. Obtienes un login y tienes que interactuar con los diferentes tipos de características y funcionalidades, ¿verdad? eso se enfoca un diseñador de UI, asegurándose de que una vez que el usuario ya esté ahí y esté interactuando con el producto real, que es una experiencia muy placentera para realmente interactúen con eso aplicación particular, sitios web o lo que sea, ¿verdad? Y luego tenemos un diseñador de interacción. Esto normalmente va a ser organizaciones más grandes donde se tiene un proyecto realmente grande, ¿verdad? Y así necesitas que alguien entre aquí y entienda cómo un usuario interactúa con una aplicación y construye diferentes interacciones y animaciones en el diseño para que haya mucha más interactividad. Y como dije, esto suele ser en una organización más grande donde los proyectos se vuelven bastante complejos y se necesita que estos diferentes individuos trabajen como diferentes medios, para trabajar con diferentes tipos de videos. Y luego el siguiente es el arquitecto de la información. Esto va a ser de manera similar en una gran organización. Y así estos individuos están tratando con la estructura de un sitio web, una aplicación, asegurándose de que todo esté de manera estructurada para que, ya sabes, se cubran las diferentes áreas, se cubran las diferentes secciones, y todo tiene una bonita estructura a la información y es de fácil acceso, ¿verdad? Y luego tenemos al estratega de contenido. Este es el individuo que realmente tiene a cargo de escribir el contenido. Entonces solo piensa en si se están embarcando en una enorme página web que están construyendo, tal vez desde cero, entonces el estratega de contenido, Este es el que en realidad se está desarrollando o reuniendo o escribiendo la copia, ¿no? Para toda la página web, derecha. Es armar todas las diferentes páginas, el Sobre Nosotros, el Contáctenos. Todos esos son manejados esencialmente por los estrategas de contenido. Y recuerda, en organizaciones más pequeñas, típicamente vas a tener una persona haciendo todo esto, bien, haciendo todo esto. Y por eso es realmente importante conseguir experiencia. No sólo como diseñador UX UI, entender el diseño gráfico, entender las diferencias entre UX y UI, sino también ser capaz de entender la psicología humana, entender cómo estructurar la información correctamente, cómo escribir copia diferente, cómo escribir diferentes entradas de blog. Porque en su mayor parte, en un negocio más pequeño, mediano, vas a estar haciendo todo esto tú mismo. Es por eso que quieres estar bien versado y entender lo que cada uno de estos diferentes roles hace al poder entender las implicaciones de estos roles en una organización. Y así cuando estás mirando diferentes posiciones, cuando estás mirando cosas diferentes que se requieren en lo que respecta a una descripción de trabajo en particular. Se quiere poder ver lo que hacen todos estos individuos y lo que se requiere. Y luego poder ver dónde se puede agregar más valor y aprender estos diferentes roles y entender estos diferentes roles a un nivel fundamental fundacional para que se pueda hablar sobre ellos. Ya sabes lo que hacen, cómo interactúan con el equipo real y el objetivo general del proyecto. Entonces, y así eso va a estar aquí para los diferentes roles dentro del tipo de proyecto UX y UI. Y como dije, asegúrate de que estés entendiendo lo que cada uno de estos individuos hace para que cuando estés buscando postularte para un puesto determinado o estés buscando pujar por un determinado trabajo, ya sabes qué estos chicos lo hacen, y puedes poder atender tu oferta en particular o tu oferta o tu currículum a estos requisitos particulares, ¿verdad? Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 6. Descripción la sección de la industria web: Bienvenido a la sección Introducción a la industria Web de este curso. En este curso, vamos a hablar de la industria web desde un panorama general para que puedas hacerte una idea de lo que vas a esperar cuando saltes a un entorno de equipo y cuáles van a ser tus roles específicos dentro de ese ambiente de equipo? Y cuáles van a ser los roles de todos los demás dentro de ese entorno también. Y así vamos a seguir adelante y saltando aquí. Entonces lo primero que vamos a cubrir son las etapas del desarrollo web. Ahora bien, esto es realmente importante aquí para que lo entiendas ya que las etapas del desarrollo web van a ser los pilares fundacionales que cualquier diseñador usa cuando están desarrollando un nuevo producto, ¿verdad? Es importante entender cuáles son estos y cómo aprovecharlos y usarlos en tus diseños y en tu trabajo, ¿verdad? Y si estás trabajando en un entorno de equipo para entender realmente cómo todos y cada uno de ustedes que están involucrados en equipo van a pasar por estas diferentes etapas para desarrollar ese producto en particular, ese sitio web, que app, sea lo que sea, ¿verdad? Entonces después de eso, vamos a entrar en el trabajo en un equipo y responsabilidades de diseñador. Queremos asegurarnos de que tengas una comprensión fundacional de cuál va a ser el papel de todos dentro de ese equipo? ¿ Cuál va a ser tu papel? Cuál es el rango de responsabilidades de todos aunque diferentes roles tienen descripciones diferentes para que sepas qué esperar si vas a ir a trabajar para una startup, si vas a trabajar para pequeñas y medianas empresas, o incluso si vas a trabajar para una gran empresa, ¿no? Y luego vamos a repasar el enfoque ágil de la gestión de proyectos. Esto es algo que es muy importante para que entiendas ya que existen varios tipos diferentes de gestión de proyectos. No obstante, la edad fuera, el enfoque Agile va a ser el más comúnmente utilizado a menos que también estés usando enfoque lineal. Pero este va a ser el más común que veas en el campo UX y UI. Y luego después de éste, vamos a entrar en el Scrum, entendiendo el marco detrás de este sistema de gestión de proyectos en particular y cómo funciona esto hasta el momento de poder completar diversas tareas conocidas como Sprints. Y vamos a entrar en eso a detalle. Yo solo quiero darte una visión general de lo que es este scrum. Se trata de un marco realmente flexible que permite diferentes individuos dentro de un proyecto a través del maximizar las habilidades y la salida. Y luego vamos a repasar Trello, otros va a ser una aplicación Kanban fácil de aprender. Tipo de darte una visión general de cómo es un tipo de interfaz de usuario Kanban, por qué es importante y qué esperar cuando se trabaja con la interfaz de usuario Kanban. Y luego finalmente, vamos a repasar otros sistemas de gestión de proyectos y otros diferentes tipos de aplicaciones de equipo y realmente te daremos una visión general de las diferentes en el mercado. Y un poco te dan una visión general de lo que puedes esperar usar empezando si solo vas a ser un freelancer o si estás buscando unirte a un equipo, cuáles son algunos de los más populares y luego algunos de los pros y contras de cada uno. Entonces eso va a estar aquí para esta lección, y nos vemos en la siguiente. 7. Las fases del desarrollo web: En este video, vas a aprender las etapas del desarrollo web. Entonces esto es algo que es muy importante como diseñador UX UI entender, hasta donde poder tomar un producto desde el principio hasta terminarlo completamente y tener un producto terminado total, completo. Y así quiero que entiendan algo así en un nivel muy alto aquí, cuáles son las etapas y cómo funcionan, y qué esperar en cada etapa en particular. Entonces sigamos adelante y saltemos justo aquí. Entonces como puedes ver aquí, tenemos las tres etapas diferentes, que es el diseño número uno. El número dos va a ser el revestimiento. El número tres va a ser el desarrollo. Y así como puedes ver aquí, es un proceso bastante sencillo. En primer lugar, esbozas el diseño. Se mira. ¿ Cuál es exactamente el objetivo final de los clientes, o cuál es exactamente el objetivo final del proyecto en particular, verdad? ¿ Cómo quieres que se vea en cuanto a un producto terminado? Y luego una vez que diseñes y mires, vale, así es como quiero que se vea. Es así como quería sentir los esquemas de color que diseñan. Y luego tenemos la etapa de recubrimiento. Y aquí es donde normalmente estás trabajando con HTML o CSS para realmente diseñar exactamente cómo quieres que se vea y se sienta. Y luego entramos en desarrollo. Esta es una fase final en la que estás más o menos colocando la funcionalidad. Los diseñadores front-end han hecho todo el trabajo, ahora todo está en el back-end. Vamos a caminar por cada una de estas a detalle. Entonces sigamos adelante y saltemos aquí a la etapa de diseño. Entonces cuando se trata de la etapa de diseño, aquí es donde se está desarrollando el concepto gráfico y lógico. Entonces todos en el equipo, si estás trabajando en un entorno de equipo, saben cómo funcionará el sitio web, cómo funciona la manzana, cómo va a funcionar el producto que estás diseñando, ¿verdad? Y esta es la parte más importante de estas tres etapas porque la parte de diseño del proceso de desarrollo web te permite realmente obtener una visión general general de lo que va a estar viendo el público, cómo van a ser experimentar el producto o la aplicación o sitio web en particular, sea lo que sea, ¿verdad? Y así es donde se quiere desarrollar el producto final en cuanto a wireframing, cuanto a entender a dónde van a ir los botones, a dónde van a ir los diferentes elementos dentro de un sitio web. En. Todo ese entendimiento te va a ayudar a tener una mejor idea de cómo se va a ver el proyecto final, ¿verdad? Porque no puedes construir algo si no sabes lo que estás construyendo, ¿verdad? Entonces primero tienes que conseguir esa dirección. Tienes que conseguir esa visión general de diseño de imagen grande de esto es como quiero que se vea el sitio web. Así es como quiero que funcione. Aquí es donde quiero que vayan todos los diferentes componentes que controlan todas las diferentes características y funcionalidades. Y entonces podemos pasar a la etapa de desarrollo. Y entonces lo que quieres entender sobre la etapa de diseño es que aquí es donde todo comienza. Aquí es donde eres capaz de elaborar diferentes ideas, crear diferentes wireframes. Y realmente diseña exactamente cómo quieres que los usuarios se interconecten con el producto real. De acuerdo, sigamos adelante y pasemos por un ejemplo aquí. Entonces digamos que estamos desarrollando una página de aterrizaje donde estamos proporcionando un recurso gratuito o los clientes proporcionando algún tipo de recurso gratuito a cambio de una dirección de correo electrónico. Y esto es bastante común donde tienes una página en particular que está aquí solo para intercambiar información con ese usuario en particular. Entonces digamos que estamos desarrollando una página de aterrizaje y nuestro objetivo final es reunirnos en dirección de correo electrónico, ¿ verdad? Recoger dirección de correo electrónico. Entonces cuando estamos desarrollando la página de aterrizaje, estas son cuatro cosas que debemos responder antes de realmente Lenaro fuera en desarrollar todos los contenidos y todo. Entonces número uno, ¿cuáles son los objetivos de la página? Entonces los objetivos de la página son conseguir descargas, educar al usuario sobre la descarga, ¿no? Digamos que tenemos algún tipo de PDF o algún tipo de ebook o engaño G que muestra a la gente cómo hacer una cosa determinada y menos tiempo, ¿verdad? Cómo ahorrar tiempo haciendo X, o cómo ahorrar tiempo haciendo por qué escribir lo que sea. Es importante educar al usuario y hacerle saber qué es exactamente lo que está recibiendo y por qué debe tomar medidas. Y así número dos, queremos mirar los objetivos del usuario para la página. Entonces para ellos, quieren conseguir algo gratis y quieren averiguar qué es. Por lo que responder a estas preguntas y hacernos estas preguntas realmente nos va a permitir crear una página de aterrizaje que tenga la mensajería adecuada, la correcta distribución adecuada. Y va a ser fácil para ese usuario lograr estas cosas, ¿verdad? Y luego número tres, cuáles son las preguntas que el usuario necesita responder para lograr el objetivo. Entonces, ¿qué consiguen? ¿ Por qué necesitan esto? ¿ Qué pasa después? ¿ Qué pasa después de descargar el ebook o chichi en particular? ¿ Van a comprar realmente un producto o van a comprar algo más? ¿ Cuál es el siguiente paso correcto? Entonces el siguiente paso implica algún tipo de nutrición, algún tipo de proceso de embudo de ventas donde los pones en un cubo separado, en una audiencia real que ya se ha comprometido con el producto y servicio. Y estamos llegando a embudos de ventas y viaje del cliente. Y en conferencias posteriores, solo quiero darles una visión general aquí del diseño en lo que respecta una página de aterrizaje que está diseñando algo para un recurso gratuito, ¿verdad? Entonces la cuarta pregunta que tienen que estar haciendo, y tú deberías estar haciéndote, ¿verdad? Es las emociones que quieres invocar. Se quiere invocar el aseguramiento, el alivio, y la confianza, ¿no? Lo que quieres hacer es siempre que estés diseñando una página de aterrizaje para cualquier situación en particular, ya sea las preguntas que quieras hacerte. Estas preguntas aquí no son solo para diseñar landing page. Esto se puede llevar en el diseño del producto. Puedes tomar esto en, ya sabes, diseño de aplicaciones, sea lo que sea, ¿verdad? Porque las preguntas aquí van a ser relevantes independientemente de lo que sea que estés diseñando. Recuerda, quieres poder ayudar a la gente a entender qué es lo que está consiguiendo, por qué es importante para ellos, cómo quieres que se sientan y que tú y tu equipo entiendan cuál es el objetivo final para eso producto en particular o cualquier tipo de aplicación en la que estés trabajando, sea lo que sea. Entonces. De acuerdo, así que ahora veamos el wireframing. Esta es la porción del diseño que es realmente importante aquí también. Aquí es donde vas a poder mirar, digamos, un wireframe de un sitio web y mirar donde van a estar todos los diferentes componentes, donde las diferentes pestañas, cuanto al menú, digamos que tú tener un menú en un área específica, tal vez diseño específico, diseño específico. Dónde vas a tener tus diferentes textos piezas, piezas de contenido, ¿verdad? Y así el wireframing consiste en ese boceto inicial que realmente establece dónde va a estar todo. También te muestra los diferentes esquemas de color que se van a utilizar en este proyecto en particular. Y si miras la imagen aquí a la derecha, realmente te da una buena imagen grande de cómo se va a ver un wireframe, donde todas las diferentes piezas del sitio web real, el producto, cualquiera que sea, donde se van a posicionar, ¿verdad? Y una herramienta que vamos a estar utilizando a lo largo de este curso es Adobe XD. Y esta es una poderosa herramienta de wireframe que comúnmente es utilizada por los diseñadores de UX y UI con dx, dy, puedes burlarte rápidamente de los diseños de estructura de cable, Crear elementos de interfaz de usuario, definir diferentes diagramas de flujo de usuario, diferentes estructuras de navegación. Y es realmente, realmente una buena herramienta para nosotros poder burlarnos de algo muy rápido, muy fácilmente. Y va a ser algo que vamos a estar usando a lo largo de este curso. Entonces me emociona que empieces con eso. Y sigamos adelante y saltemos a la siguiente etapa, que va a ser el recubrimiento. Entonces una vez que tenemos el diseño dispuso hasta donde queremos que se vea todo. Ya es hora de empezar a crearlo usando varios tipos diferentes de lenguajes de codificación. Entonces, cuando se trata de codificar aquí, lo que vamos a estar haciendo es típicamente usar tres lenguajes diferentes. Entonces una vez que terminemos con el diseño y sabemos exactamente cómo queremos que se vea todo. Conocemos los esquemas de color, conocemos el diseño, hacemos alambrar que todo. Entonces vamos a transferir los archivos a los codificadores frontales para que puedan empezar a crear. Esto va a parecer, y por lo que normalmente van a estar usando HTML, CSS, y JavaScript. Ahora, si miramos los tres idiomas diferentes aquí, HTML significa lenguaje de marcado de hipertexto, y esto permite crear texto estructurado dentro de páginas web o aplicaciones. No hay nada súper especial en ello ni nada por el estilo. Es sólo un lenguaje muy sencillo que nos permite usar texto. Y luego tenemos el CSS. Aquí es donde sucede la magia aquí, donde realmente somos capaces de introducir muchos de los diferentes elementos de estilo en el HTML. Y en última instancia lo que hace es que separa el contenido de la representación visual de los sitios. Aquí es donde entran los esquemas de color. Aquí es donde entran las características de diseño, correcto, en el archivo CSS, los desarrolladores frontend o los codificadores, enumera todos los estilos que tiene tu proyecto. Por ejemplo, los estilos de fuente, los botones, las esquinas, las sombras, los colores, ¿verdad? Entonces estamos realmente da vida a esa página web en particular o a esa aplicación porque solo estamos teniendo texto ahí, ¿verdad? No va a ser muy bonito por lo que añade la capacidad dar vida a una página web o a una aplicación, por así decirlo. Y luego tenemos JavaScript. Aquí es donde puedes tomar elementos web estáticos y hacerlos interactivos. Y así por ejemplo. Digamos que tienes algún tipo de botón que dice por ahora o Añadir al carrito. Seguro que has visto aquellos en diferentes sitios web de e-commerce, tal vez cuando vas a comprar un producto o lo que sea que esté en línea, puedes hacer que esos diferentes botones sean interactivos. Puedes hacer que reboten por ahí. Puedes hacerlos hacer todo tipo de cosas diferentes con JavaScript, ¿verdad? Es que interactivo en esencia, eres capaz de hacer frente al solo tener que esos elementos sean estáticos y ahora poder tener cualquier interactividad. Entonces esos van a ser los diferentes lenguajes de codificación que se van a utilizar. Por lo general, cuando los codificadores realmente están codificando al sitio, están usando HTML para escribir realmente el texto. Están usando CSS para los elementos de diseño reales y para traer el color y todos los diferentes esquemas de diseño. Y luego JavaScript es lo que está permitiendo que la página web o aplicación haga que diferentes elementos estáticos se vuelvan interactivos. Tan muy, muy poderoso. De acuerdo, así que saltemos a la tercera y última etapa aquí, que es el desarrollo. Esta es la codificación back-end ahora, así que hemos hecho el diseño. Sabemos exactamente cómo queremos que se vea todo. Tenemos wireframe que sabemos a dónde van todos los elementos. No enviemos esos archivos a los codificadores. En realidad lo han configurado todo, construido todo con el HTML, CSS, y el JavaScript. Y ahora es hora de que vayamos a la etapa de Desarrollo aquí donde realmente estamos desarrollando todo en el back-end. Entonces sigamos adelante y saltemos al desarrollo. Entonces cuando se trata del desarrollo de back-end, esto es lo que realmente lo pone a disposición para que el sitio web esté en vivo en internet. Y aquí es donde se almacenan todos los datos. El backend del sitio web consta de un servidor, la aplicación, y la base de datos. Porque si de verdad desglosa qué es exactamente el sitio web en sus términos técnicos, realidad es solo un montón de archivos, un montón de codificación, y una base de datos, ¿verdad? Y así hay diferentes aplicaciones en esa base de datos. Tienes un servidor, a veces se puede compartir, a veces puede ser auto alojado, sea lo que sea, ¿verdad? Pero un desarrollador back-end realmente construyó y mantiene una tecnología que potencia todos aquellos componentes que trabajaron juntos en el enable y permiten el usuario frente al lado del sitio web incluso exista en primer lugar. Los sitios web son literalmente igual que mencioné, todo el AR es un montón de codificación, un montón de aplicaciones en una lluvia de servidores. Y cuando vamos a cualquier sitio web y vemos todos los diferentes esquemas de color, todos los textos o el JavaScript Eso está todo siendo alojado en el backend en una base de datos en particular en el servidor. Por lo que estas son las tres etapas diferentes del desarrollo web. Tienes la etapa de diseño donde estamos construyendo todo. Estamos construyendo cómo va a funcionar todo, cómo se va a ver todo. ¿ No estamos enviando todo a los codificadores? Lo están construyendo usando HTML, usando CSS y JavaScript. Y luego finalmente, los desarrolladores realmente van a albergar el sitio web, obtener la configuración de la base de datos y las aplicaciones para que podamos publicar eso en vivo. Por lo que los individuos realmente pueden usarlo a través de internet. Entonces eso va a estar aquí para esta lección y nos vemos en la siguiente. 8. Responsabilidades del diseñador diseñador (trabajar en un equipo): En este video, vamos a repasar las diferentes responsabilidades del Diseñador dentro de un equipo. Por lo que esto te va a dar una visión general de qué esperar en cuanto a unas responsabilidades diferentes dentro de un entorno de equipo. Lo que puedes esperar como diseñador UX UI tú mismo. Y, pero te dan esa visión general general de lo realmente puedes esperar ver dentro de un entorno de equipo. O si vas a estar trabajando dentro de una organización más pequeña o grande. Entonces echemos un vistazo a algunas de las responsabilidades del diseñador de UX. Algunas de las cosas que puedes esperar estar haciendo, sobre todo si estás trabajando dentro de una organización más pequeña donde tal vez estés teniendo que usar múltiples sombreros diferentes. Usted puede ser el diseñador UX UI y usted puede ser la persona que hace la investigación. Usted puede ser la persona que está desarrollando los contenidos, ¿no? Y es por eso que como diseñador de UX, diseñador de UX UI, es importante ser multifacético porque en sobre todo ahora donde lamentablemente hay una cantidad significativa de despidos en el mercado, a pesar de que todavía hay mucho crecimiento y mucha oportunidad y es importante ser multifacético. No tenía muchas habilidades dentro de la UX UI y el espacio de marketing en línea. Por lo que vas a ser responsable de la investigación de usuarios muchas veces para recopilar la información para evaluar diferentes requerimientos de los usuarios, para trabajar con los gerentes, desarrolladores, y también con los clientes finales. Y también vas a ser responsable de ilustrar tus ideas usando storyboards, flujos de usuarios, un mood boards y sitemaps. Y también te vas a involucrar con el diseño gráfico usando diferentes elementos de interfaz. Vas a ser responsable de desarrollar diferentes maquetas, diferentes prototipos que ilustran cómo funciona el sitio y se ve así en esa etapa inicial de diseño. Y aquí es donde vas a estar usando Adobe XD verdaderamente wireframe que hasta burlarse de eso. Y tú vas a estar haciendo eso. Vas a aprender a usar Adobe XD, cómo dentro de este curso. Y también vas a ser responsable de identificar y resolver diferentes problemas de UX y entender el flujo de experiencia de usuario de Canadá, ¿verdad? Porque con la experiencia del usuario tienes el recorrido del cliente en el que entra la gente, diferentes usuarios están llegando en diferentes etapas. Pero también entender qué es un embudo de ventas, cómo funciona un punto de ventas a y los diferentes tipos de embudos de venta. Porque todo eso va a ser parte de la experiencia del usuario, ¿verdad? Cómo van a estar interactuando con el producto, con la marca. Y luego también vas a estar ajustando maquetas en función de los comentarios de los usuarios. Vas a estar haciendo como MVP, productos mínimos viables, donde puedes empujar eso hacia fuera al cliente o al usuario y poder volver modificando, ajustarlo en base a la información y la retroalimentación que obtienes. Y luego vas a ser responsable desarrollar y seguir los estándares y fuente, colores y elementos, OK, esto es lo que puedes esperar. Típicamente en el campo UX UI, sé que esto es más de la UX. No obstante, UX y UI están bastante interconectados y relacionados. Solo vas a encontrar típicamente en organizaciones más grandes donde UX y UI están individualizados, donde es posible que tengas a alguien simplemente trabajando en la fase de experiencia del usuario. No obstante. Para la mayoría de mod a medianas empresas, especialmente startups, que va a ser una gran zona para que empiece a trabajar para una empresa, ¿no? Porque vas a poder entrar y ayudar a que esta empresa crezca, les ayudó a desarrollar un producto y aplicación, sean cuales sean, y también estar potencialmente involucrados con la participación de capital porque serás miembro fundador. Y lo que éstas tienen para tener organizaciones, vas a estar haciendo muchas de las diferentes cosas dentro UX y UI y se van a fusionar. Y así realmente no notarás una diferencia, ¿verdad? Y por eso también mencioné que si tienes la experiencia del usuario, no solo con la comprensión de los diferentes flujos de usuario a diferentes trayectos de clientes, sino también con embudos de ventas, entendiendo cómo desarrollar un landing pages, elementos de la página de destino, cómo desarrollar copiar todos esos diferentes factores que te harán un individuo UX UI multifacético. Vas a tener mucho más valor para estas organizaciones, para estas empresas. Y van a querer contratarte y mantenerte alrededor. Porque son muchas veces los que son los menos valiosos normalmente van a ser los que, ya sabes, salen primero o son despedidos, ¿verdad? Porque si alguien solo tiene experiencia en UI o experiencia UX versus alguien que tiene tanto UX UI, poco de experiencia en marketing, entendiendo la persuasión de ventas. Ya sabes, embudos de ventas, cómo desarrollar un landing pages, cómo escribir copia, que vas a aprender. Muchos de esos en este curso, entonces vas a ser extremadamente valioso para esa organización o para cualquier cliente con el que decidas trabajar. El pre va a estar llamando al freelance o consultoría de clientes, ok. Y así algunas otras cosas que puedes esperar estar haciendo en tu rol es analizar datos estadísticos. Normalmente se utiliza como Google Analytics o cualquier otro tipo de software analítico para mirar información diferente en cuanto a dónde vienen los usuarios, de dónde viene el tráfico, si viene de una fuente en particular frente a otra. Y por qué eso es mirar también a la demografía del usuario, la edad, ya sea masculina o femenina, ¿no? Diferentes zonas del mundo en el trafico que viene, ¿verdad? Haciendo análisis competitivos y también escribiendo cuestionario, algún tipo de encuesta para poder dar retroalimentación con el fin mejorar los productos o app o sitio web actuales, cualquiera que sea. Una gran manera de hacerlo también es poder simplemente entrevistar al público objetivo real. A lo mejor conseguirlo en una llamada telefónica, tal vez que hagan que llenen algún tipo de encuesta como mencioné. Pero realmente entiende que el rol de UX y UI realmente va a ser multifacético si quieres ser alguien que tenga una tremenda cantidad de valor para una organización, quieres ser alguien que tenga todas las habilidades que vas a aprender en este curso. Se quiere tener algo más que habilidades de UI o UX. Como dije, quieres ser multifacético. Se quiere conocer ambos de esos. Quieres conocer páginas de ventas, quieres conocer embudos de ventas, y vas a aprender todos esos de este curso para que cuando sí decidas salir por ahí y buscar trabajo, vas a tener multitud diferentes habilidades que vas a poder llevar a la mesa. Vamos a ser extremadamente valiosos y va a ser más fácil para ti conseguir un trabajo o poder trabajar con el cliente porque no eres solo un diseñador unidimensional de UX o UX. Eres multifacético y tienes muchos más conjuntos de habilidades, ¿verdad? Entonces en algunas de las otras cosas que se te va a pedir hagas es definir diferentes personas de un proyecto, ¿no? Esto es entender los diferentes viajes de clientes que cada individuo va a pasar. Y también entendiendo esa persona individual como quién es ese individuo objetivo que va a estar comprando este producto en particular utilizando esta aplicación en particular, utilizando este sitio web en particular. ¿ Qué aspecto tiene esa persona? Rama demografía punto de vista, y también crear un Sitemap Para como un sitio web. Y luego también poder diseñar historia de usuario en flujo de usuarios. Y esto es realmente importante para que puedas ser un buen diseñador de UX es entender tipo de esa apuesta de flujo que alguien va a pasar cuando está usando una aplicación en particular, cuando estás usando un sitio web y están usando algunos especie de producto, ¿verdad? ¿ Qué aspecto tiene eso de principio a fin, verdad? Y poder entender cómo diseñar eso. Y eso es exactamente lo que vas a aprender en este curso. También se va a esperar que cree un prototipo de baja fidelidad. Pantallas transitorias. Normalmente vas a poder usar Adobe XD para crear esto. Por lo que deberías poder crear esos. No hay problema en este curso porque vas a estar aprendiendo a hacer todos estos en este programa que cuando decidas salir al mercado y en realidad busques un trabajo o, ya sabes, realmente lo hagas alguna consultoría de clientes o freelancing. Vas a estar equipado con muchas más habilidades que solo un diseñador típico de UX o UI. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 9. Roles y descripciones (trabajar en un equipo): En este video, vas a aprender sobre los diferentes roles y descripciones que normalmente vas a encontrar cuando estás trabajando dentro de un entorno de equipo. Ahora esto va a ser para típicamente una pequeña a mediana empresa, podría ser tal vez a mediados de su negocio también. No obstante, encontrarás que las grandes organizaciones nivel empresarial, y vas a tener roles mucho más específicos dentro del departamento creativo real. No obstante, para este ejemplo en particular, esto va a ser para un pequeño y mediano negocio maduro. Y así sigamos adelante y saltemos a lo que van a ser los diferentes roles y lo que debes esperar. Por lo que el primer papel es un gerente de proyecto. Ahora bien, este es el individuo que reúne un proyecto requisitos, estiman el costo real. Planean todo lo que controlan la gestión del tiempo del trabajo que se está haciendo ahí esencialmente encabezando toda la operación ahí, asegurándose de que todo se esté haciendo a tiempo o asegurándose de que todo el mundo esté tomando acción y siendo responsables de su lado del proyecto. Y así son los que realmente están en control a un nivel muy alto. Y luego tenemos al gestor de contenidos. Este es el individuo que se encarga esencialmente actualizar la sección de contenido de un sitio web en particular en este contexto, pensémoslo, un punto de vista del proyecto de sitio web. Ahí van a estar escribiendo diferentes textos. mejor la sección Acerca, tal vez el Contáctenos, tal vez, tal vez como una entrada de blog, cualquiera que sea eso hasta el alcance de un proyecto, van a ser responsables de escribir el contenido específico hasta, digamos que están trabajando dentro de un sistema de gestión de contenidos como WordPress. Se van a iniciar sesión y trabajar en el backend de la página web, iniciando sesión y escribiendo todas las diferentes post quizá del blog, agregando todas las diferentes imágenes todo a través del backend del sitio web. Y luego tenemos el codificador frontal. Se trata de un programador que codifica y realmente crea el frente visual y elementos de una aplicación de un sitio web utilizando esos tres lenguajes de programación diferentes de los que hablamos antes, que es el HTML para el texto a CSS para el diseño visual real, los esquemas de color, y luego el JavaScript para los diferentes elementos interactivos que van a estar involucrados en ese sitio web en particular. Y luego tenemos un programador, este es el desarrollador backend. Esencialmente están trabajando con el desarrollador front-end que en realidad está construyendo el diseño, el aspecto del sitio web para que puedan alojar el sitio web en un servidor en particular. Son capaces de crear una determinada base de datos, tener diferentes aplicaciones, cualquiera que sea esa, cuanto a asegurarse de que el backend del sitio web esté configurado para albergar realmente el sitio web. En última instancia, el desarrollador backend es lo que realmente permite que el sitio web, la aplicación, cualquiera que sea , se hospede para que pueda ser accesible a través de Internet para que cualquiera pueda descargar o interactuar con VHS, ya sabes, escribiendo la URL, ¿verdad? Así que asegurándose de que en realidad esté alojado para poder ser accedido a través de internet. Y luego tenemos el probador, Este es el individuo que va a estar realmente pasando por la aplicación, realidad yendo al sitio web, asegurándose de que todo esté de una manera lógica muy precisa. El flujo de usuario es bueno, ese diseño es bueno, el contenido está todo teniendo sentido, y todos los tecnicismos están dispuestos y simplemente asegurándose de que todo esté funcionando sin problemas desde la perspectiva del usuario. Voy a meterme en el cliente o en los usuarios y mentalidad y pasar por esta app o este sitio web como si fuera el cliente real o usuario final. Y así van a estar trabajando con todo el equipo y haciendo saber a todos si hay algún problema técnico o el contenido no tiene sentido. Si hay algún error ortográfico, si el diseño está apagado, ¿verdad? Y así van a reportar que de vuelta a los demás integrantes del equipo para asegurarse que todo esté funcionando sin problemas para que puedan tener un gran producto final. De acuerdo, así que esa va a ser esta lección aquí. Solo quería darte una visión general de lo que puedes esperar dentro una empresa típicamente pequeña a mediana cuando vas a venir como diseñador de UX, diseñador de UI, ¿verdad? Vas a tener a estos diferentes individuos dentro del equipo. Y una vez más, como mencioné anteriormente, si tienes muchas más habilidades que solo un diseñador UX UI, entiendes las páginas de aterrizaje, entiendes los embudos de ventas, entiendes e influyes en la psicología conductual, que vas a aprender en este curso. Vas a ser mucho más valioso para tu equipo. Eso va a estar aquí para esta. Y nos vemos en el siguiente. 10. Enfoque ágil: En este video, vamos a repasar el enfoque ágil de la gestión de proyectos. Ahora, este va a ser uno de los tipos más comunes de estilos de gestión de proyectos que usas en el mundo real de los negocios. Si estás trabajando en un proyecto en particular dentro de una organización, o si estás trabajando por ti mismo como freelancer, o tal vez tienes tu propia empresa y haciendo amable consultoría. Este va a ser el sistema de gestión de proyectos más utilizado que vas a estar usando. Entonces, sigamos adelante y saltemos a lo que es exactamente el enfoque ágil para la gestión de proyectos. De acuerdo, entonces una de las primeras cosas que quiero compartir con ustedes es una comparación aquí entre el enfoque tradicional frente al enfoque Ágil. Como mencioné, el enfoque Agile va a ser el más común, ampliamente utilizado. Y en las empresas más grandes, los tipos de empresas más grandes, aún utilizan el enfoque tradicional, que es el modelo de cascada o lineal. Y a medida que pasemos por esta lección aquí, te vas a dar cuenta de cuánto más poderoso es el enfoque ágil para la gestión de proyectos frente al enfoque tradicional. Porque con el enfoque tradicional, como puedes ver aquí, todo está de manera secuencial, lineal, donde tienes el análisis de requerimientos, tienes el diseño del sistema, tienes el implementación, y usted tiene las pruebas, despliegue y mantenimiento. Esto es suponiendo que todo está funcionando bien. Todo va igual que lo planeado. Bueno, eso rara vez ocurre en cualquier tipo de proyecto. Siempre va a haber bichos. Siempre va a haber problemas antiguos, cosas que necesitas ajustar y modificar arregladas en el camino. Y por lo que muchas veces este modelo se va a quedar corto. No obstante, ya sabes, las empresas más grandes aún usan y siguen sintiendo que es importante, ¿verdad? Y muchas veces lo que encontrarás en estas grandes organizaciones es que encontrarás diferentes individuos manejados en solo una zona del proyecto real. Entonces puede que tengas a alguien haciendo sólo la UI, puede que tengas a alguien solo haciendo la investigación de mercado, el análisis, ¿verdad? Y así se llega a entender que estas grandes organizaciones tienen presupuestos más grandes y así son capaces de destinar más recursos a estos individuos. Por lo que el enfoque ágil es algo que es muy, muy único y preciso, que permite recolectar datos y retroalimentación muy rápidamente para que puedas modificar y ajustar sin tener que ir más allá por la línea. Porque si estás desarrollando, digamos, un sitio web o algún tipo de aplicación, quieres obtener feedback lo más rápido posible para que puedas averiguar cuáles son los cuellos de botella, cuáles son los problemas, ¿cuáles son los problemas? Arreglarlos de inmediato. Y otra cosa a tener en cuenta aquí es que la cascada o modelo lineal se utiliza típicamente en el espacio de ingeniería de software. Por lo que no muy utilizado en el espacio UX UI. No obstante, algunas organizaciones más grandes todavía utilizan la cascada o el modelo lineal. El típico proceso de desarrollo web ágil está compuesto por una serie de sprints o ciclos que implican la fase inicial de descubrimiento, esa fase de diseño, ese desarrollo, y luego las pruebas. Entonces esencialmente lo que sucede es que cada sprint da como resultado un producto tangible y nueva información para guiar al siguiente sprint. Y así podrás tener pequeños mini sprints dentro de cada etapa. Y entonces esencialmente estás siendo capaz de planear, diseñar, desarrollar y probar en cada etapa en particular. Y eres capaz de obtener esa rápida retroalimentación. Eres capaz de conseguir que se hagan esas pruebas de inmediato. Y así no estás teniendo que esperar, ya sabes, en cuanto al modelo de cascada, tener que esperar en las últimas etapas para realmente recuperar esa información donde estás probando y estás viendo si las cosas realmente están funcionando correctamente, si hay algún bug cuyos problemas, lo estás haciendo de manera consistente. cada paso del camino aquí, ¿verdad? En la planeación y diseño, en el desarrollo, en el despliegue. Y así todo es sinérgico. Estás recibiendo retroalimentación muy rápidamente y eres capaz de modificar y ajustar sin tener que usar muchos recursos. Una de las cosas que me encanta de este enfoque ágil marco de gestión de proyectos aquí es que toma el modelo NVP, el producto mínimo viable. Y este es el término que se desarrolló en la zona de Silicon Valley donde constantemente estás sacando un producto que no es muy bueno, que, ya sabes, tiene algunos bichos, ya sabes, tiene algunos problemas, tiene algunos problemas. Pero estás queriendo obtener esa retroalimentación los usuarios para que te hagan saber, oye, esto es lo que estoy experimentando, cuál es el producto, este es el problema que estoy viendo aquí. Esto es lo que creo que se puede arreglar, se puede ajustar, se puede modificar para que realmente funcione correctamente. Entonces estás recibiendo esa retroalimentación constante porque estás poniendo productos que sabes que no están completamente terminados, pero lo estás haciendo con toda la intención de recuperar esa retroalimentación del usuario, user_data de inmediato. Entonces puedes modificar constantemente, ajustar. Y luego a medida que avanzas hacia el producto terminado, has pasado por tantas iteraciones porque has obtenido esa retroalimentación del mercado, porque has ido esos datos. Y así tienes un producto terminado. Ya sabes que el mercado quiere porque ellos fueron los que te devuelven la retroalimentación. Y como mencioné anteriormente, el método de cascada todavía se utiliza en algunas organizaciones. Y por eso es importante como diseñador de UX UI poder seguir siendo adaptativo y poder ajustar y modificar a cualquier tipo de enfoques que se utilicen en tu espacio de trabajo particular. O si estás trabajando para ti, eres un freelancer. Lo más probable es que estés usando este enfoque ágil. Y solo para reiterar aquí, la principal diferencia con el enfoque Agile es que ayuda a mejorar permanentemente el producto en base a los comentarios de los usuarios. En tanto que el objetivo de los modelos lineales es establecer proyectos y producción y luego con el mantenimiento. Y así hay que pensarlo con el proceso lineal, ese enfoque lineal. Tienes la etapa de mantenimiento, que está al final donde están constantemente modificando y ajustando versus aquí con este enfoque ágil o modificando un ajuste continuo en cada etapa. De acuerdo, entonces echemos un vistazo a algunos de los diferentes componentes dentro del enfoque ágil de la gestión de proyectos. Entonces vas a tener un rezago de producto, y esto suele ser como una hoja de cálculo, una carta simplemente algo en la pared que vas a usar, tal vez tarjetas de índice o tal vez notas pegajosas. Esto realmente te está dando el atraso. En una representación visual del progreso del equipo. Y luego tienes el rezago del sprint. Esta es la lista de tareas que debes realizar durante un sprint y antes de un sprint e iniciado, el equipo elige elementos del rezago del producto y determina las tareas que son necesarias para satisfacer las necesidades del usuario. Y luego tenemos las reuniones scrum. Se trata de reuniones diarias para facturar y fijar el rumbo para la jornada laboral. Y luego tenemos al Maestro Scrum. Este es el verdadero facilitador de las reuniones y la comunicación entre todos los integrantes del equipo. Y entonces tenemos los incrementos enviables. Esta es la función tangible en aplicaciones que exhiben una característica o el producto final. Por lo que cada sprint debería resultar en incrementos enviables. El motivo por el que estás trabajando un sprint diferente es porque quieres tener algo tangible, físico, típicamente al final de esa primavera porque esto te permite tener ese progreso después de cada sprint para poder tener algo tangible, decir en realidad, oye, esto es lo que hicimos, esto es lo que nos encontramos y esta es la información que reunimos y lo que armamos a partir de este sprint previo. Entonces esto es lo que debes esperar al trabajar en un sistema de gestión de proyectos Agile. Y así ahora echemos un vistazo a algunos de los beneficios trabajando en un proyecto tipo de marco Ágil. Por lo que algunos de los beneficios aquí es la retroalimentación más rápida mantenerse al día con cualquier cambio, mayor productividad. Y luego el enfoque en los usuarios versus el modelo lineal donde estás teniendo el mantenimiento al final. Y luego estás modificando un ajuste después de que realmente hayas completado el proyecto. Versus aquí, en el enfoque Agile, eres capaz de obtener comentarios sobre los usuarios de forma muy rápida, muy fácil, y poder modificar y ajustar a medida que avanza. Y entonces tenemos transparencia y rendición de cuentas antes, entrega impredecible y luego costo y horario muy predecibles. Entonces, y así echemos un vistazo a algunos de los beneficios para el diseñador de UX. Cambiar el diseño y la lógica de acuerdo con la retroalimentación real del usuario. Recuerda, cada cosa que estamos haciendo en este enfoque aquí está centrada en obtener esa retroalimentación de los usuarios. Entonces sabríamos exactamente lo que ese usuario quiere experimentar, lo que ese proyecto con esa aplicación en particular del sitio web, con esa aplicación en particular, cualquiera que sea, correcto, que la retroalimentación del usuario es críticamente importante en las primeras etapas para que estén tomando parte en la construcción de esta aplicación para que sepamos última instancia esto es lo que van a querer en el mercado. Otro beneficio aquí para el diseñador de UX es tener oportunidad de probar nuevas ideas usando las pruebas AB ser parte del proyecto a lo largo de su vida útil. Y aquí te presentamos cinco preguntas que quieres hacer cuando te presenten nuevas ideas dentro de tu equipo. Porque muchas veces la gente va a tener ideas diferentes, van a tener diferentes preguntas, diferentes marcos, los pensamientos. Y realmente quieres preguntarte cuando se les están dando ideas diferentes, esto nos ayudará en última instancia a lograr nuestras metas para este proyecto? Es consistente con nuestra marca o con la marca con la que estás trabajando, que estás buscando desarrollar ese producto, sitio web o aplicación, sea cual sea, existe una mejor solución que ya existe, ¿verdad? Si alguien ya tiene una gran idea y alguien tiene otra idea, qué idea es mejor o qué ideas ya funcionan en este momento? ¿ Va a ser mejor que lo que ya tenemos existente y qué es lo peor que puede pasar si lo probamos? Esta es probablemente la mejor pregunta aquí porque siempre se trata de entender que, oye, queremos reunir la mayor cantidad de retroalimentación y datos posible para que sepamos en última instancia qué va a querer el mercado, qué hace los usuarios en realidad se van a entusiasmar. Y así no hace daño probar cosas diferentes. No obstante, si se le quita tiempo al proyecto, si no está relacionado, ¿verdad? Tienes que verlo como algo que va a agregar valor al proyecto. Y luego finalmente aquí, ¿cómo evaluaremos si la idea fue efectiva o no? Entonces hay que tener algo que medir. mide su voluntad, se logra. Y así si no mides la salida, los datos, y poder mirar, ¿realmente funcionó esto? Entonces se va a no ser muy efectivo en cuanto a sólo tomar pensamientos diferentes, simplemente tomar ideas diferentes, preguntas diferentes. Y entonces estas son cinco preguntas muy importantes que hacer cada vez que alguien arroja algún tipo de idea o simplemente algo fuera del campo izquierdo, ¿verdad? Esto es algo que va a permitir que tú y tu equipo sean responsabilizados el uno al otro, donde no solo estás entrando y simplemente tirando cosas de izquierda y derecha. Quieres ver si va a agregar valor a tu proyecto existente o a lo que ya has establecido. De acuerdo, entonces eso va a estar aquí para el enfoque ágil de la gestión de proyectos. Y nos vemos en el siguiente. 11. Scrum: marco flexible: En este video, vamos a repasar el marco flexible de Scrum. Ahora bien, este es un marco que se utiliza en conjunto con los proyectos de desarrollo ágil para hacer las cosas mucho más fáciles, para agilizar muchas de las diferentes tareas y para definir realmente los roles de cada miembro del equipo individual dentro del proyecto real. Así que sigamos adelante y saltemos aquí a lo que es exactamente el marco flexible de Scrum. Ahora, al igual que mencioné, el Scrum es un uso de marco con proyectos de desarrollo ágiles que ayuda a los equipos a trabajar juntos. Y así en última instancia lo que hace es apuntar a que los proyectos sean más efectivos, más eficientes definiendo los roles de cada equipo, y proporcionando una forma específica, organizando la carga de trabajo a lo largo de una serie de ciclos cortos de desarrollo o sprint. Entonces, si miras la imagen de aquí a la derecha, el sistema Kanban, esto es típicamente como se ve eso hasta el marco de Scrum. Tienes tus tareas pendientes, tienes cosas que están en progreso. Tienes cosas que están listas para desplegar. Y luego se tiene la etapa aprobatoria y luego la etapa final de w1. Y dentro de cada una de estas diferentes etapas, vas a tener diferentes sprints, ¿verdad? Echemos un vistazo a algunos de los elementos de Scrum. Entonces tenemos los sprints, que son los ciclos de trabajo, y luego tenemos las historias justo de que los proyectos se dividen en piezas pequeñas y consumibles. Entonces cuando miramos las historias, la pequeña tarea por aquí va a ser atendida por este individuo. Pequeña pieza de un proyecto va a ser manejada por esta persona de allá. Por lo que descompone las cosas en trozos más pequeños para poder consumirlas fácilmente, por así decirlo. Por lo que cada historia es asignada a un miembro del equipo y se mueve a través de la serie de columnas en un tablero de Scrum. Al igual que mencioné, tienes el do tienes la revisión del equipo en curso, Owner Review, y hecho, y luego el stand-up. Estas son solo reuniones de standup que impulsan un sprint. Vas a tener estos típicamente en cualquier lugar entre cinco a diez minutos. Sólo una pequeña reunión rápida que realmente te diga qué esperar, qué se va a lograr a través de ese sprint, ¿verdad? Y todo esto va a ser contigo trabajando dentro de un ambiente de equipo. Obviamente no vas a tener un estándar puesto tú mismo. Entonces todo esto es desde la perspectiva de que trabajes dentro de un equipo. Y luego tenemos las filas. Entonces aquí es donde todos en el Equipo Scrum van a ser miembros del equipo, ¿verdad? Excepto el Maestro Scrum. Este es el individuo que en realidad dirige el tablero de Scrum. Por lo que esencialmente puedes llamarlos el Gestor de Proyectos, por así decirlo. Y luego tenemos las reuniones atrasadas. Entonces aquí es donde estás priorizando todas las historias y las estás preparando para el próximo sprint, ¿verdad? Entonces note cómo esto es todo de manera secuencial. Lo estás haciendo para que todos puedan estar todos en la misma página. Ustedes saben dónde está todo, y tienen una persona en la cima, que es ese maestro de scrum, ¿verdad? Eso es realmente dirigir y guiar a todos para asegurarse de que están todos en el lugar correcto y se están ocupando del tipo correcto de sprints, ¿verdad? El tipo de acciones correcto para finalmente llevarlas al destino final. Después tenemos la reunión de planeación. Aquí es donde el equipo elige qué historias asumir y a quién asignarlas. Y de nuevo, aquí es donde los maestros Scrum normalmente van a estar dirigiendo y guiando a todos para asegurarse de que están todos en el lugar correcto. Entonces echemos un vistazo a algunas ventajas del marco flexible de Scrum. Por lo que la principal ventaja de Scrum es la forma en que facilita la adaptación a los cambiantes requisitos de los clientes. Porque estamos usando sprints, ¿verdad? Y estás obteniendo retroalimentación muy rápidamente del real qué cliente, del del usuario. Realmente permite que la facilitación adapte diferentes cosas a lo largo del camino. Si algo se debe cambiar o modificar, si algo necesita acortarse, sea lo que sea, correcto, la constante retroalimentación de los usuarios y los requisitos que están regresando permite a los individuos realmente hacer cambia sobre la marcha y poder finalmente salir al final con un producto terminado, esa solución terminada que va a ser exactamente lo que quieren los usuarios, ¿verdad? Entonces el sistema de sprints fomenta la retroalimentación regular, ¿no? Al igual que mencioné, cada pequeño Sprint va a dar retroalimentación. Se va a devolver la interacción desde el usuario haciéndonos saber exactamente qué hay que hacer, para modificarse en cuanto a ajustes, cuanto a modificaciones, y poder mirar cosas diferentes para mejorar para la siguiente iteración. Y luego también definiendo roles para miembros del equipo y clientes. Promueve la colaboración y la comunicación clara y abierta entre todas las partes. Algunos beneficios adicionales aquí, tenemos la capacidad de adaptarnos a diferentes ciclos. Implementación más rápida. Las tareas se agrupan en sprints, fáciles de rastrear el progreso utilizando el flujo combinado. Y este va a ser el principal tipo de marco que usas cuando estás trabajando en el campo UX UI. De nuevo, si estás trabajando para ti, eres un freelancer. Estás haciendo consultoría de clientes. Esto es algo que vas a estar implementando por ti mismo. No obstante, es importante entender también que cuando se trabaja en un entorno de equipo, esto es lo que ustedes van a estar usando. Todo el mundo va a tener sus roles definidos. Y ustedes van a estar trabajando dentro de esos sprints para poder reunir comentarios muy rápido, muy fácilmente, y finalmente terminar el proyecto y poder tenerlo listo para salir al mercado. Porque has podido obtener esa retroalimentación de los usuarios. Eso va a estar aquí para esta y nos vemos en la siguiente. 12. Aplicaciones de gestión del proyecto: En este video, vamos a repasar las diferentes herramientas de administración de proyectos que puedes usar en tus proyectos de UX UI. Entonces sigamos adelante y saltemos aquí. Entonces la primera herramienta de gestión de proyectos que recomiendo encarecidamente que utilices porque es gratis, es Trello. Y esta es una aplicación muy agradable y fácil aquí para usar ya sea en tu teléfono o en tu escritorio. Y te permite plasmar ese flujo Kanban muy suavemente para que puedas mirar todas las diferentes secciones, ¿verdad? Los recursos para hacer el hacer, lo hecho. Y vamos a caminar a través de cómo crear una sencilla tabla de flujo Kanban aquí en un momento, pero solo quería pasearte por aquí hasta algunas de las características y funcionalidades. Es muy fácil y sencillo de configurar. Tienes una gran visualización y codificación de color. Se puede cambiar el fondo, se puede cambiar un esquema de color diferente. Podrás tener diferentes imágenes sobre las tareas. Esto permite una fácil colaboración en equipo. Se puede agregar miembros del equipo y se puede hacer mucho con los diferentes antecedentes. Entonces sigamos adelante y vayamos a mi computadora y haremos un rápido paseo por el flujo Kanban instalado ahí por Trello. Y te mostraré cómo crear un tablero de Trello. De acuerdo, entonces aquí estamos en mi computadora y tenemos un tablero de Trello aquí. Muy fácil, muy sencillo para nosotros configurar. Todo lo que necesitas hacer es agregar una lista aquí, ¿verdad? Digamos que queremos sumar en los recursos, igual que pasamos por ahí en la cubierta de diapositivas. Y luego queremos hacer la tarea pendiente. Y luego queremos seguir adelante y sumar éste y luego queremos hacer el hacer. Entonces vamos a sumar en el Dunn. De acuerdo, entonces tenemos aquí estos diferentes tableros en lo que respecta a las listas. Y digamos que aquí tenemos un todo. Digamos que construya una alambrada, ¿verdad? Para aplicación de sitios web, ¿verdad? Agradable y sencillo. Y se puede ver lo fácil que es esto aquí. Y una vez que configuras una de estas tareas aquí, haces clic en ella y tienes un montón de características diferentes aquí. Puedes agregar diferentes miembros y puedes invitar a personas a colaborar en esto aquí puedes poner un poco mejor descripción aquí, como hey, esto es para proyecto XYZ, ¿verdad? Y como dije, esto va a ser algo en lo que típicamente trabajes. Si estás haciendo freelance, si estás haciendo consultoría de clientes, porque Trello es gratis y tienes tantas características y funcionalidades diferentes aquí para que puedas gestionar tu proyecto. Vamos a ahorrar ahí. Puedes ponerte una etiqueta aquí hasta donde sea un color. Digamos que queremos poner verde ahí, ¿verdad? Puedes poner una fecha de tareas pendientes aquí. Ayudemos mañana y digamos que aquí tenemos algún tipo de apego. Puedes agregar desde tu computadora, desde una unidad, y entonces tal vez quieras tener una portada aquí. Digamos que tú, sumémosle este de ahí, OK. Y así ahora podemos cambiar esto alrededor y podemos tener esta portada ahí justo en la tarea real. Tan guapa muy bonita, muy bonita aquí que podemos sumar en cuanto a las tareas, para las de hacer. Y lo mismo aquí, vamos a añadir una tarea. Podemos pasar por el mismo proceso y luego simplemente trasladamos las cosas a la siguiente etapa. Cuando en realidad se está haciendo algo, vamos a mover eso al hacer. Y luego si queremos invitar a diferentes individuos, diferentes integrantes del equipo. Ve a crear equipo, pon el nombre de John Smith. Ok. Y elegir o lo que sea el departamento creado equipo ahí, correcto. Y luego los enviarás en invitación real a esta pizarra en particular aquí. Y así esta es solo una herramienta fantástica aquí que vas a poder usar si apenas estás empezando y el espacio UX UI. Y digamos que tienes a Nino clientes actuales con los que vas a estar trabajando. Y digamos que quieres entrar en el freelancing. ¿ Desea segmentar una consultoría de cliente? Esta va a ser una de las formas más fáciles y eficientes para que administres tus diferentes proyectos. Nos han gestionado diferentes clientes. Entiende que cuando entras a una organización, vas a tener diferentes herramientas, diferentes aplicaciones de administración de proyectos que vas a estar usando. Pero quería solo darte una visión general rápida y caminar por Trello porque va a ser una de tus mejores apuestas cuando acabas de empezar porque es gratis y es muy fácil para ti. Entonces sigamos adelante y saltemos, volvamos a las diapositivas y vamos a mirar a través de las otras herramientas de gestión de proyectos. Y te daré una visión general de esas también. De acuerdo, entonces estamos de vuelta en la presentación aquí, y podemos ver aquí hay varias otras herramientas diferentes de gestión de proyectos. Tienes campamento base, campamento frito, holgura, Asana, y noción. Este primero de aquí, esto es holgura. Se trata más de un tipo de herramienta de comunicación. Sí tienes capacidades y funcionalidades de gestión de proyectos. No obstante, se utiliza en su mayoría como herramienta de comunicación. Yo uso esto todos los días. Es muy, muy poderoso. Y luego tienes aquí una sauna, que en su mayoría es una herramienta de gestión de proyectos. Y creo que este de aquí es el campamento espacial. Entonces volvamos a mi computadora y vamos a pasear por estas diferentes herramientas para que puedas obtener una visión general de cómo funcionan, los precios, y cuál va a ser lo más probable para ti. ¿ Y cuáles son los pros y los contras de cada uno? Adelante y volvamos a mi computadora ahora. De acuerdo, así que echemos un vistazo al campamento base aquí. El campamento base es una gran, gran herramienta, muy poderosa. Muchas empresas usan esto y yo solía usar esto antes también. No obstante, una de las cosas que hay que tener en cuenta es que esto es algo para organizaciones muchas veces más grandes porque el precio es bastante alto. Y cuando miras a $99 al mes plano, quiero decir, eso es bastante. Si solo eres una startup, si apenas estás empezando en el espacio, no quieres tener ese tipo de costos incurridos cada mes, ¿verdad? Quieres ser lo más magra posible. Entonces esto es algo que he visto donde tienen las organizaciones más grandes porque hay una tonelada de características, funcionalidades atentas, puedes llevar a tus clientes a bordo para poder colaborar dentro del proyecto y que den diferentes comentarios de los usuarios. Por lo que muchas herramientas diferentes a las que vas a tener acceso dentro del campamento base. Y es posible que te encuentres con esto en una agencia creativa más grande. Si vas a trabajar en un entorno de equipo, pueden estar trabajando con ellos en campamento base. No obstante, apenas empezando, no lo recomendaría. Entonces el siguiente aquí es libre para acampar. Esto es similar al campamento base, y éste es uno que en realidad recomendaría eso. En realidad inscríbete también y dale un test run. Esto es algo que también he usado en el pasado, y es muy barato. Y hace muchas de las mismas cosas que el Campo Base des. No obstante, a un costo menor, tienes aquí tu lista de tareas, tablero compuesto, Jaeger, diferentes subtareas. Se puede obtener una vista de pájaro lo que el diagrama de Gantt. Y creo que es muy barato. Es como, creo que cinco o $10 al mes. Eso va a bajar a la fijación de precios. Y vámonos. De acuerdo, para que puedas inscribirte gratis. Y luego si quieres tener un usuario el cual debería ser, ya sabes, solo en nuestro para ti 149 permanente. Es decir, esto no es nada aunque se utilice la versión de negocio aquí, que es la planta de $7.49, quiero decir, esto es super barato y esto bien vale la pena porque a tiene muchas de las diferentes funcionalidades y herramientas que base camp tiene. Es sólo una interfaz de usuario ligeramente diferente. De acuerdo, y entonces eso es algo a tomar nota si vas a querer usar algo similar al campamento base, todas las características, todas las funcionalidades, interfaz de usuario ligeramente diferente a la que recomiendo encarecidamente con libertad no puede porque con una tabla de Trello, vas a poder usar eso de manera muy fácil, muy eficaz, y no te va a costar nada. No obstante, faltan muchas de las características y funcionalidades que vas a tener aquí dentro del campamento frito, que esto te va a dar eso todo en uno. Entonces ahora echemos un vistazo al SLAC aquí. Como mencioné, la holgura es más una herramienta de comunicación entre tú y los miembros del equipo. Y esto también va a ser gratis. Creo que es gratis hasta una cierta cantidad, pero no deberías poder simplemente descargar esto, configurarlo hasta donde sea para un canal. Y deberías tener, ya sabes, miles de mensajes que puedes enviar dentro de un equipo. Y luego tienen paquetes diferentes más grandes que puedes recoger si buscas tener múltiples miembros del equipo diferentes. Y sí tienen otros paquetes que puedes recoger una vez que estés usando la herramienta real. No obstante, no recomiendo eso porque esto va a ser algo más para como una organización de nivel empresarial, pero para ti si tienes uno, tal vez dos a 345 integrantes del equipo, esta versión gratuita de holgura debería ser simplemente bien. Y así subamos aquí al precio y podemos ver algunas de las diferentes características y funcionalidades que están involucradas en la versión gratuita versus el estándar. Y así tenemos la versión gratuita aquí. Tienes acceso a 10 mil y a tus equipos los mensajes más recientes. Esto es algo donde si ustedes chicos están enviando muchos mensajes de ida y vuelta, no van a tener la historia completa, sólo los últimos 10 mil mensajes. Y tienes diferentes integraciones aquí, voz y videollamadas. Esto es algo que puede ser bastante grande aquí si miras Mantener registros, correcto. Entonces eso es un gran problema. Y luego 667 al mes aquí por poder contar esencialmente con todas estas características y funcionalidades adicionales. Lo mismo aquí con los 1250. Tienes muchas más características y funcionalidades, pero típicamente, deberías estar bien yendo libre si apenas estás empezando. Obviamente, si quieres usar el estándar y quieres usar muchas de las diferentes funciones, muchas de las diferentes características y muchas de las diferentes características que están disponibles, puedes inscribirte en esto también. Pero sobre todo esto va a ser para una herramienta de comunicación entre tú y otro miembro del equipo. Y luego tenemos una sauna aquí. Asana es una de las más grandes del mercado también. Y tienen diferentes puntos de vista en cuanto al vínculo común, cuanto a una lista, bajaré aquí. Nos fijamos en cómo se pueden ver diferentes flujos de usuarios, líneas de tiempo, y en última instancia es una herramienta muy bonita. Y en lo que respecta a la competitividad y la fijación de precios, son bastante competitivos. Tienen una interfaz de usuario realmente agradable. Tengo que decir que definitivamente recomiendo esa base off de lo que he visto en cómo lo he usado previamente y diferentes entornos de equipo. Y luego también, echemos un vistazo a los precios aquí. El precio también es bastante competitivo. 1099 por cada usuario. Puedes usar esto de forma gratuita también y tipo de probarlo. No obstante, aquí vas a tener algunas limitaciones, pero si quieres probar la sauna de forma gratuita, bien, ver cómo te funciona, cómo se ve puedes seguir adelante y darle una oportunidad. Es 1099. Lo más grande aquí de lo que quiero que tomes nota es en cuando vas y mires el campamento frito, ¿verdad? Tienes 149749, interfaz de usuario ligeramente diferente. No obstante, vas a tener muchas de las características y funcionalidades que tendrá Asana a excepción de una interfaz de usuario diferente. Entonces depende de ti, pero estos van a ser geniales para que vengas aquí, obtienes una prueba gratuita, probarlos, ver cómo funciona y en última instancia mira cuál funciona mejor para ti. Ahora la final aquí va a ser noción, ésta es una la marca nueva aquí. Esto es en realidad lo que uso para la mayoría de mi trabajo. Tengo todo en diferentes proyectos. Me encantan las diferentes características que tienen aquí, las notas, los docs, y ésta es un poco más compleja. No obstante, el precio es muy, muy bajo. Hay muchas más cosas que puedes hacerlo esto, y hay muchas más personalizaciones. No obstante, sí toma un poco de una curva de aprendizaje y así definitivamente te recomiendo que revises esto si esto también es algo que quieres mirar. Creo que el precio es muy barato también. Puedes empezar de forma gratuita. Simplemente entiende que esto es mucho más características y funcionalidades y todas las demás herramientas y mucho más personalizable. Y sí viene, como dije, con la curva de aprendizaje más grande, pero creo que es uno de los top, si no el top del mercado actualmente. De acuerdo, así que solo quería darte una visión general rápida aquí de las diferentes herramientas de gestión de proyectos. Te recomiendo encarecidamente que revises todos estos, hagas algunos ensayos gratis, averigres cuál va a funcionar mejor para ti si estás empezando ahora, usa un Trello, familiarízate con eso. Y si quieres probar todas estas otras, adelante y hazlo. Va a valer la pena el intento de poder encontrar en última instancia cuál funciona mejor para ti y tu situación. ¿ De acuerdo? Entonces eso va a estar aquí para esta y nos vemos en la siguiente. 13. Lección XD - introducción: Hola a todos, bienvenidos a nuestra primera lección de Adobe XD. Y antes que nada, asegurémonos de tener XD instalado en tu computadora. Para aquellos que aún no tienen esta aplicación, por favor visite Adobe.com slash XD y descargue la aplicación. Se tienen dos planes para XD, de pago y gratis. Ves que para empezar, puedes usar un plan gratuito el cual solo tiene una camisa, Documento activo. Para documentar a los editores, un enlace de camisa activo y almacenamiento en la nube de dos gigabytes. Por supuesto, cuando crecerás como diseñador UX UI, necesitarás ampliar tu plan. Pero por ahora no es necesario pagar por la app. Una vez que instale el XD puede abrirlo. Y la pantalla de inicio de esta aplicación se parece más o menos a esto. Si habrá diferencia en versiones, las principales cosas son las mismas. Aquí tienes cuatro precedencia. Para crear diferentes tipos de proyectos. Ahí hay una aplicación móvil o publicaciones de Twitter, publicaciones sociales, lo siento. Publicaciones sociales y tamaño personalizado. Tenga en cuenta que hay un pequeño trabajo abajo el cual le permite seleccionar diferentes precedencia diferentes dispositivos. También puede crear NINGUNO, uno como tamaño personalizado, escriba la dimensión necesaria. Y vámonos. El apartado de aprender tiene pequeñas lecciones de tres minutos de cosas muy útiles sobre XD. Documentos en la nube es la sección donde ves tus documentos en la nube y respectivamente el documento de camisa contigo también son una sección para documento compartido contigo. No contar con ningún enlace gestionado te llevará al al sitio web, a la página web donde podrás gestionar tus enlaces compartidos y así sucesivamente. Éstas se suprimen. Proyectos eliminados. Cosa muy útil. Sección eliminada le permite restaurar sus documentos y visualizarlos en línea. Además, se puede eliminar de forma permanente. Entonces esto es más o menos todo para la pantalla de bienvenida de x D. Ahora podemos seguir explorando la interfaz de usuario de esta app. De acuerdo, es hora de bucear en la interfaz de usuario del Adobe XD. Y en el nivel principal, a nivel general, puede ver el prototipo de diseño y compartir pestañas, así como herramientas alineadas verticalmente y el panel de activos. Entonces para las herramientas que trabajarán con Photoshop o alguna otra. Software de Adobe, es muy común y natural que no piensen que aquí encuentren nada extra. Pero para aquellos que son nuevos en la familia Adobe y XD precisamente, voy a dar una pequeña introducción rápida a cada una de estas herramientas. Por lo que puntero nos permite movernos alrededor de elementos, rectángulo, muchos crea rectángulos y también cursor o puede usar, puede mover los lados, el objeto mismo. El LX crea LMS. Por favor, ten en cuenta que mantener pulsado el botón Mayús te ayuda a crear, te ayuda a crear la forma. Y el rectángulo. Línea. Y BC dos, o es una sartén, pero también funciona como un más ocupado. Por lo que Text Tool y conocía nuestra herramienta tableros. Se ve que en el lado derecho, hay algunas opciones para tipos de hacia afuera. puede presionar, y se crea el iPad y Nexus nueve, impar comprado automáticamente. Averigüemos de qué son responsables estas tres pestañas. Por lo que si te das cuenta, estamos en la sección de diseño en este momento. Por lo que nos permite crear diferentes formas. Entonces el diseño real, sí, no le prestan mucha atención a mis dibujos ya que están muy mal. Por lo que la sección de prototipos se encarga las conexiones entre nuestros tableros y sus transiciones. Se ve que la barra lateral también cambia a otras dos funcionalidades, a otras opciones, que están relacionadas con la creación de prototipos e interacción entre elementos y pantallas. De acuerdo, entraremos en más detalles más adelante cuando hagamos algún diseño y hagamos el prototipo a partir de ese. Pero ahora nos enfoquemos en las cosas generales y vayamos a compartir. Seguro. Te ayuda a compartir realmente el proyecto. Y ves que hay un par de cosas que tener en cuenta. Entonces, en primer lugar, va un ajuste de vista. Podrás compartirlo como revisión de diseño para desarrollo, presentación, pruebas de usuario y costo. Personalizado significa que puedes seleccionar unas opciones específicas para compartir tu proyecto e incluir especificaciones de diseño, mostrar pistas de hotspot abiertas en pantalla completa en los comentarios allo. Tan sólo para aclarar eso. Especificaciones de diseño es la opción que generalmente selecciona para desarrolladores web para que puedan cortar el tu maqueta a HTML CSS link access también se puede modificar un poco, lo que solo personas invitadas de todos modos. Y cuando pasaporte, puedes crear un pasaporte para tu proyecto si lo deseas ahí. También puede crear un título personalizado. Aquí, título personalizado. Y tu enlace aparecerá aquí. Por lo que una vez que se sube el proyecto, enlace aparece aquí y puedes copiar tu enlace y compartirlo entre el equipo o las partes interesadas. Por lo que fue una especie de resumen rápido de x Dui. Pero vamos a sumergirnos en los detalles de la sección de diseño ya que este es el que nos interesa, OK, porque la mayoría de las veces usaremos la sección de diseño y tiene que analizarse un poco más con precisión. Por lo que agregaremos inicio. Y crearemos un elemento, un objeto. Una vez que he creado un objeto , las opciones aparecen en el lado derecho. Y puedes modificar tu objeto a tu gusto, a lo que necesites en tu proyecto. Llenemos esto. ¿De acuerdo? Entonces, empecemos desde arriba. En la parte superior vemos opciones de alineación. Entonces una cosa interesante es que cuando no tengas dos o tres elementos a los que alinearte, la alineación se aplicará de acuerdo al tablero impar. Entonces mira, una vez que presiono estos botones, estos iconos objeto está alineado codificando al fueraborda. Una vez que tengamos dos elementos en un diferente en diferentes posiciones, se alinearán unos de otros. ¿ De acuerdo? Igual para la alineación izquierda y derecha y centro por supuesto, la función distribuida te ayuda a, a tener un espaciado igual entre objetos. Ya lo ves. Repetir rejilla crea partisano que podría expandirse vertical y horizontalmente. ¿ De acuerdo? Ahora parece inútil, pero verás lo útil y aplicable que podría ser en tu diseño web. Veamos las otras opciones. El ancho y la altura podrían modificarse. Aquí. Puede bloquear las proporciones para que no se apriete ni se desplaza. ¿De acuerdo? Una vez que seleccioné este, será así. Entonces esto es una diferencia. Podrás escribir tu disfraz con u odiar. En caso de ser necesario. K, x, e y son los responsables de posicionar el elemento. Puntos que selecciono. Ok. Consulta estos dos iconos. Voltear el objeto o componente o grupo de objetos, horizontal y verticalmente. El pergamino te ayuda a crear un desplazamiento horizontal y un desplazamiento vertical. Ahora mismo, sólo vivídalo. Porque habrá una lección específica donde discutamos. Estas dos son las principales o estas tres opciones con mayor detalle. Y voy a mostrar cómo se podría aplicar el en diferentes áreas del proyecto. Posición fija al desplazarse. Vamos a crear una muestra aquí, ¿de acuerdo? Por lo que ves el que tiene un pergamino y también tiene una posición fija. ¿ De acuerdo? Nuevamente, nos limitamos a echar un vistazo a las funciones de este proyecto abstracto. Entonces solo para familiarizarse con las herramientas y posibilidades de x d k Si el responsive cambia de tamaño desactivado, la escala de los objetos se verá así. Por lo que serán libres transformados de acuerdo a tus necesidades. ¿ De acuerdo? Una vez que seleccione el redimensionamiento de respuesta, se moverán. Esto es para el desarrollo web. Si estás tratando de mover las cosas en tu sitio web o aplicación móvil, es mejor usar el redimensionamiento responsive. Por lo que quieren cambiar su tamaño y se distribuirán adecuadamente entre sí. 14. Descripción la sección de diseño gráfico: En este video, vamos a repasar los fundamentos de la sección de diseño gráfico resumen. Vamos a caminar por lo que exactamente vamos a cubrir en esta sección en particular. Y realmente dándote una visión general de lo que está por venir en esta sección en particular. Entonces sigamos adelante y saltemos justo aquí. De acuerdo, entonces lo que vamos a estar repasando en esta sección es cómo funciona el color. Vamos a conseguir una comprensión fundamental de la psicología del color, cómo juega un factor en el diseño. Vamos a repasar la teoría del color, cómo entender los diferentes factores, diferentes componentes que todos entran en juego utilizando los esquemas de color adecuados. Y luego vamos a repasar los dos tipos diferentes de esquemas de color aquí. lo que respecta al RGB y CMYK, vamos a repasar esos en detalle. Y luego vamos a repasar la rueda de color y los esquemas de color específicamente. Esto es muy importante aquí para que lo entiendas porque como diseñador, quieres tener una comprensión fundamental de por qué es que estamos usando varios colores, sentido junto con los demás. Y por qué queremos mantenernos alejados de ciertos colores, dependiendo del look y la sensación que buscamos obtener del usuario final real, ¿verdad? Queremos que sean capaces de sentir de cierta manera, tener cierta afinidad o cierta sensación sobre una marca en particular o un producto en particular. Y este esquema de color es realmente, y los esquemas de color realmente van a jugar un factor en eso. Y luego vamos a repasar trabajando con fuentes, diferentes tipos de fuentes que se van a recomendar para ciertas situaciones. Cómo asegurarte de que estás usando las fuentes en los lugares correctos, que estás mezclando diferentes tipos de fuentes. Por lo que DOE tiene un aspecto agradable y tacto al mismo. Y luego finalmente, vamos a repasar los iconos. Los iconos son muy, muy poderosos de tener en un sitio web o una aplicación web en particular. Agregan mucha singularidad, mucha diversión y emoción a la aplicación o al sitio web. Y realmente agrega un poco de estilo poco divertido al diseño. Tan emocionado de que empiezas en la sección, y te veremos en la siguiente. 15. La psicología del color: En este video, vamos a repasar la psicología del color. Esto va a ser algo donde entramos en la psicología, la teoría del color detrás de cómo usar el color correctamente, cómo miramos el color desde diferentes perspectivas, y cómo somos capaces de combinar diferentes tipos de color, temas y combinaciones de colores para finalmente llegar a un diseño increíblemente hermoso. Entonces sigamos adelante y saltemos a la psicología del color. Esto es algo que como diseñador de UX UI, necesitas tener una comprensión fundacional de esto es donde vas a poder entender por qué es importante tener diferentes esquemas de color. Lo que tiene más sentido en cuanto a tener un color en particular y hacer que la gente se sienta de cierta manera. Y por qué algunos colores van a tener más sentido frente a otros, ¿verdad? Dependiendo de la situación única. Y así que tener ese color Foundation es realmente importante para ti como diseñador UX UI. Y me emociona empezar aquí. Entonces sigamos adelante y saltemos justo aquí. Cuando pensamos en el color, ¿verdad? ¿ Cómo funciona realmente? Si miras aquí el lado derecho, miras los diferentes esquemas de color. Se mira el blues, se mira el blues claro, el azul marino. Observe cómo todo aquí tiene la combinación perfecta. Se mira el morado, se mira el rosa claro. Te fijas en la y, todo eso realmente se cumplieron entre sí, ¿verdad? Se mira el verde allá abajo, cómo se tiene el verde oscuro, verde claro y el blanco. Todo está en perfecto orden porque se está complementando entre sí. Y entonces eso es lo que vas a aprender en esta lección en particular aquí. Por qué es importante usar diferentes colores. Cómo usar cada esquema de color en diferentes diseños cuando miras diferentes sitios web, diferentes logotipos, diferentes marcas, Aquí es donde te van a golpear una cierta experiencia emocional cuando estás mirando una marca que tiene una color azul, te vas a sentir de cierta manera cuando tienes una marca o un sitio web en particular que estás mirando y tiene los colores verdes, te vas a sentir de otra manera. Y entonces eso es realmente de qué color te da esa experiencia emocional al usuario final. Y elegir el color correcto significa tu público que podrá saber instantáneamente quién eres, sabes de qué se trata el producto, qué haces y de qué vas. Y así si no tienes los esquemas de color adecuados para tu producto en particular en cómo estás buscando presentar eso y al mercado, entonces te vas a costar vender los productos, ¿verdad? Y tener el tipo adecuado de usuarios realmente usando el producto. Cada color habla de un aspecto diferente del consumidor. Envía tu mente a la mente del consumidor y piensa cómo te hacen sentir estos diferentes colores. Y cada color en particular habla de un aspecto diferente del consumidor. Cuando miras los colores de fondo del verde, esto provoca paz y bienestar. Piensa en la app de meditación. Este sería un buen esquema de color para tener una aplicación de meditación donde puedas relajarte, eres capaz de sentirte bien, eres capaz de tener esa sensación general de bienestar. Y luego tienes rosa en el medio aquí donde esto es más de una femenina. Tipo de color obviamente, ¿verdad? Y luego tienes un toque de morado, que es un poco de sensación de lujo. Por lo que tienes el tipo femenino de esquema de color así como el tipo de campo de lujo así con el morado. Y luego el azul proporciona emoción como la confianza, la seguridad y la relajación. Basta con pensar en Facebook. Seguro que has usado Facebook o estás en Facebook. Facebook tiene el esquema de color azul y tiene prácticamente el esquema de color en la parte superior aquí. Porque cada vez que inicias sesión en Facebook y quieres que sientas una sensación de confianza, seguridad, y conexión con la plataforma real porque tienes a tus amigos y familiares ahí. Tienes personas diferentes con las que te estás comunicando. Y así entender que estos diferentes esquemas de color van a hacer que la gente se sienta de cierta manera. Entonces ahora hablemos de psicología del color real aquí y cómo nuestras mentes reaccionan automáticamente a los colores sin que sepamos que miras la imagen de aquí a la derecha. Y para ponerte un poco técnico aquí, quiero darte realmente la comprensión de cómo funciona esto realmente desde una perspectiva técnica. En los momentos que nuestros ojos perciben el color, se conectan con el cerebro, lo que da señales al sistema endocrino, liberando hormonas responsables de los cambios de humor y emociones. Si miras la imagen de aquí a la derecha, mirando diferentes colores, notarás cómo te están haciendo sentir. Y si lees la descripción ahí justo, donde tienes alegria con amarillo y naranja, M6 donde tienes comodidad con verde claro y luego felicidad aquí con azul y verde, ¿no? Optimismo allá abajo con azul, te darás cuenta de todas las diferentes épocas que te has topado con estos colores y cómo te hicieron sentir. Ahora tienes una comprensión de lo que los diferentes esquemas de colores van a hacer por ti cuando te encuentres con ellos. Esto es algo que está incrustado en nuestro ADN y esto es algo que es automático. Cada humano que mira estos colores particulares, Va a sentir este tipo de emociones. Es automático. Cuando estás mirando ciertos colores, vas a sentir de cierta manera. Y así piensa en tus diseños cómo quieres que se sienta la gente, cómo quieres que la gente piense en el producto, la marca, lo que sea que estés construyendo como diseñador UX UI y los colores correctamente seleccionados ayuda a poner usuarios en el marco de la mente que lo obliga a tomar actos igual que mencioné, si quieres que alguien se sienta seguro, siente seguridad, quieres ir con azul. Si quieres que alguien se sienta relajado, tranquilo, y quieres que se inscriba en, digamos, una aplicación de meditación. Quieres ir con ese verde, ¿verdad? Entonces entiende que aquí tienes un tremendo poder. Entender cómo funcionan estos diferentes colores, cómo son capaces de afectar a las personas, sentirse de cierta manera y de tomar ciertas acciones. Y aquí está una de las cosas más grandes que tienen en cuenta es la app. Tardan sólo unos 90 segundos para que las personas hagan un juicio subconsciente sobre un producto. Y entre el 6290% de eso se valora en base únicamente al color. Entonces solo piensa en esto. Todo esto está sucediendo inconscientemente. Estás mirando un esquema de color en particular y tu mente ya está interpretando cómo te sientes. Te sientes de cierta manera. Y muchas veces está ocurriendo sin saberlo. Simplemente te sientes de cierta manera y realmente no sabes por qué. Y estoy seguro de que puedes pensar múltiples situaciones diferentes donde has visto un nuevo producto, has visto un esquema de color diferente en un sitio web en particular o lo que sea que sea, y te ha hecho sentir de cierta manera. O ahora lo que puedes hacer es ir a diferentes sitios web, mirar diferentes aplicaciones y ver cómo se configuran sus esquemas de color en lo que están tratando de decirte, cómo quieren hacerte sentir, cómo te están haciendo llegar a darse de alta. Todo está basado en los diferentes esquemas de color que están consiguiendo que te sientas de cierta manera. Y si la gente está tomando decisiones en un plazo de 90 segundos a nivel subconsciente, entonces esto es enorme porque todo es automático y está sucediendo sin que ni siquiera seamos conscientes de ello. Tan muy poderoso para entender el poder de la psicología del color y del color. Entonces ahora echemos un vistazo a los diferentes colores en lo que estos realmente significan, lo que estos transmiten, y cómo quieres poder usarlos de manera efectiva. Por lo que se lee Aquí, tenemos confianza, Juventud, Empoderamiento. Entonces tenemos naranja. Esto va a ser amable, cálido y enérgico de lo que tenemos amarillo, felicidad, optimismo y calidez. Y piensa en esto por un momento. Cada vez que hayas visto estos colores, piensa en cómo te han hecho sentir. Simplemente piensa en el amarillo. amarillo es como el sol cada vez que estás afuera y te estás poniendo algo de sol, te sientes bien, ¿verdad? Estás obteniendo esa energía del sol. Te sientes caliente, hay una felicidad. Y luego tenemos crecimiento de pieza verde y ayuda. Tan solo piensa en verde. Muchas veces esto se usa en productos que son del medio ambiente que son respetuosos con el medio ambiente. Y luego tenemos azul, que es confianza, seguridad y estabilidad que sobre con Facebook, cómo mencionamos que quiere que te sientas seguro y seguro y quiere que te sientas como si fuera un sitio web de confianza. Y luego tenemos morado, lujoso, creativo y sabio. Y luego tenemos el negro, que es confiable, sofisticado, y experimentado. Y entonces tenemos blancos, que es simple, tranquilo, y limpio. Y estos normalmente van a ser los colores directos. No van a estar donde tienes un poco de rojo o naranja mezclado juntos, donde tienes tal vez un poco de amarillo y verde. Este es el color exacto, rojo, color naranja. No hay mezcla de colores. Es sólo el color amarillo. Así es como típicamente te hace sentir verde. Y así es lo que transmiten estos colores. Y esto es muy importante entenderlo como diseñador UX UI para que puedas usar estos colores de manera efectiva en tus diseños. Ahora vamos a repasar la teoría del color aquí, que es el RGB, rojo, verde, azul. Y esto se utiliza principalmente para proyectos de diseño gráfico digital como diseño, anuncios en línea, y todo lo que tiene que ver con archivos digitales únicos. ¿ De acuerdo? Y así en última instancia, lo que explica la teoría del color es cómo los humanos perciben el color y los efectos visuales de cómo los colores se mezclan, combinan o contrastan entre sí. Y eso es lo que esencialmente estamos pasando en toda esta lección. Pero diferentes colores significan cómo te hacen sentir, tenían una mezcla y combinan y contrastan cada color diferente. Y para conseguir cierto sentir bien, cierta emoción de ese usuario en particular, ¿verdad? Porque cada uno de estos colores, igual que pasamos en la diapositiva anterior. Comunica cierto mensaje, cierto sentimiento, cierta emoción. Entonces eso es importante de entender. Y otro factor importante aquí en términos de teoría del color, es entender que los colores están organizados en una rueda de color y agrupados en tres categorías diferentes. Tienes tus colores primarios, secundarios y terciarios. De acuerdo, así que este es un resumen aquí del modelo de mezcla de color aditivo. Ahora repasemos el modelo de mezcla de colores sustractivos. Y la razón por la que estos se llaman aditivo y sustractivo Es que lo que el aditivo que vas a estar agregando diferentes colores haría sustractivo. Obviamente vas a estar restando diferentes colores. Y así el CMYK significa cian, magenta, amarillo y negro. Y así se trata de cuatro colores diferentes en los colores sustractivos se creanabsorbiendo total o parcialmente o restando absorbiendo total o parcialmente o restando algunas longitudes de onda de luz para luego reflejar el otro. Por lo que nota cómo en este de aquí, estás empezando con el color blanco. Y a medida que añades diferentes filtros con luz blanca como Inc., que esta luz blanca adquiere una apariencia de color. Y esto es lo que se utiliza en diferentes revistas, diferentes materiales impresos, todo lo que va a ser tangible o físico en el mundo real, cuando se está trabajando con tipo digital de documento o tipo digital de medios, vas a estar usando RGB cuando estás usando cualquier cosa que se va a imprimir que requiera un tipo físico de producto, entonces quieres estar usando el CMYK. De acuerdo, así que ahora echemos un vistazo a algunos factores clave hora de trabajar con el color, las expectativas de los clientes. Cuando se trata de las expectativas de los clientes, hay que entender qué tonos van a ser los más apropiados a partir de esa historia de marca en particular y de una personalidad. Y luego cuando se trata de preferencias de los clientes, estás eligiendo el esquema de color correcto o los colores correctos que evocan la confianza y los usuarios. Y luego cuando se trata de un mensaje de marca, ¿qué tipo de emociones y características está tratando de retratar la marca? En ocasiones tendrás marcas en querer hacer un reacondicionamiento completo de su marca. Ellos quieren tener todos los esquemas de color diferentes. Quieren representar, ya sabes, cosas diferentes con su logo, con su marca, con su app, lo que sea que se pueda clasificar dos muchas veces vienen a estos escenarios únicos donde la gente, donde los negocios quieren renovamos completamente todo. Y así realmente quieres preguntarle al cliente cómo quieren que se sientan sus usuarios. ¿ A qué quieren que represente su marca? ¿ Qué quieren que diga la gente sobre el cerebro en cuanto a cómo les va a hacer sentir. Qué tipo de emociones y características es la marca tratando de retratar y el mercado. Y luego también mirando al competidor, mirando lo que está funcionando para la competencia y usándolo como referencia. A veces no ponemos suficiente énfasis en mirar a la competencia. Sobre todo porque, ya sabes, como individuo creativo, te gusta crear algo desde cero que nunca se había hecho antes. Pero muchas veces, es mucho más fácil mirar lo que ya ha hecho la competencia y poder modificar y ajustar y sacar ideas de eso, ¿no? Y luego poder crear un diseño único basado en eso. Y así eso va a ser aquí para la psicología del color y la teoría del color. Y nos vemos en el siguiente. 16. Esquema de la rueda y color: En este video, vamos a repasar la rueda de color y los esquemas de color. Ahora esta va a ser una lección muy importante aquí, que puedas entender cómo funcionan los esquemas de color y cómo se complementan entre sí, que diferentes variaciones de esquemas de color y cómo puedes usarlos como modelo para poder, usando tus diseños en todos tus diferentes marcos gráficos, permiten entender cómo usar los diferentes esquemas de color y rueda de color va a hacer que tus diseños destaquen más y tengan más de un flujo de color en combinación que va a se complementan entre sí con el esquema de color general y el diseño del producto. Entonces sigamos adelante y saltemos aquí. Por lo que la rueda de color muestra la relación entre los colores. Y si recuerdas de las diapositivas anteriores, recuerdas que son muchos de estos colores aquí que tenemos uno al lado del otro. Nosotros somos los que nos estábamos complementando. Tienes el amarillo y el tipo de amarillo, naranja, el naranja y el tipo de naranja más oscuro. Y luego en la parte inferior tenemos el rosa y el morado, el azul oscuro. Y luego tenemos el azul en el azul claro. Por lo que todos estos se están complementando entre sí. Y dentro de la rueda de color hay 12 colores principales de los que debemos tomar nota. Y la rueda de color RGB, estos tonos son rojos, anaranjados, amarillos, pantalla verdadera, creo que es como lo pronuncias. Verde, primavera, verde, cian, asegurar, azul, violeta, agenda, y rosa. Y se pueden ver esos todos aquí en la rueda de color. Y entonces la rueda de color se puede dividir en colores primarios, secundarios y terciarios, vale, tres grupos diferentes. Los colores primarios, rojo, amarillo, azul, y los tres colores secundarios. Estos son los colores que se crean cuando se mezclan los colores primarios, verde, naranja y morado, y luego los seis colores terciarios. Estos colores están hechos de los colores primario y secundario juntos, como el violín azul, verde y rojo. Y así, entender cómo funciona la rueda de color y cómo puedes usarlo a tu favor va a ser críticamente importante. Como diseñador de UX y UI, quieres poder no sólo entender cómo funciona el color en cuanto a cómo hace sentir a la gente y el mensaje que transmite, sino cómo podemos usarlos de manera efectiva en los diseños, ¿verdad? Y así realmente ayuda a crear diferentes esquemas de color que van a coincidir juntos, que van a quedar muy bonitos, que van a lucir increíblemente bellos y a destacar. Y realmente agrega consistencia en la interfaz de usuario, la interfaz de usuario. Y así ahora echemos un vistazo a los diferentes esquemas de color y combinaciones. El primero que tenemos aquí es el de cortesía, que es el morado y el amarillo, ¿no? Se puede ver cómo los dos se complementan muy bien. Y luego tenemos el triádico, que es el amarillo, el naranja, y el azul. Y luego tenemos el split de cortesía, que es el amarillo, el rosa, y el azul, y luego el cuadrado. Tienes los ensambles reales, ¿verdad? El cuadrado aquí dentro, tienes el amarillo, el naranja, el morado, y el azul. Y luego el rectángulo, tienes el verde, el amarillo, el rosa, y el azul. Y así vas a poder usar estos en tus diseños particulares para que se puedan complementar entre sí. Y tienes diseños increíblemente bellos donde los hermosos colores. Ahora echemos un vistazo a los colores cálidos y fríos. Obviamente, si miras al top de ahí, tienes cool, que es azul. Obviamente él, pensarías en calidez. Vas a pensar en el sol. Vas a pensar en amarillo, naranja. Cuando piensas en cool, vas a estar pensando en más azul, verde, tal vez un poco de ese morado. Y así las ruedas de color se dividen en los colores cálidos y fríos, también conocidos como temperatura de color. Diferentes temperaturas de color evocan sentimientos diferentes. Recuerda cómo pasamos en las lecciones anteriores donde tenemos diferentes colores que te están haciendo sentir de cierta manera, como seguridad, aseguramiento de seguridad. Y un buen ejemplo aquí con los colores cálidos es que se dice que trae a la mente coziness y energía. Y mientras piensas en los colores fríos, esos van a estar asociados con lo de serenidad y aislamiento del verde, ¿verdad? El verde va a ser típicamente lo que se utiliza como una aplicación de meditación para como el aislamiento. Y así entender la diferencia entre los colores cálidos y los colores fríos y cómo estos juegan un factor en cómo hacen que la gente se sienta bien en el tipo de mensaje que es querer ser transmitido por el cliente. Entonces ahora echemos un vistazo a algunos diseños aquí donde obviamente puedes echar un vistazo a OK, veo que están usando cierto color. Es por eso que están usando ciertos esquemas de color, ¿verdad? Porque están tratando de conseguir un mensaje cruzando solo del esquema de color, ¿verdad? Los colores que están usando. Estas son las mejores apps de meditación por descargas en EU para 2018. Número uno, tienes el espacio de cabeza tranquilo, Insight Timer, 10% feliz, 10% más feliz, aura. Y miras a todas estas heurísticas, puedes decir que están buscando transmitir un mensaje de calma. Tienes los colores cálidos aquí con amarillo y naranja, ¿verdad? Que es, Vamos a traer a la mente caliente como el sol. Tienes algo de azul aquí dentro, trayendo frescor, calentado como agua. Y luego tienes uno en la parte superior de esa pantalla. Por lo que todos estos están transmitiendo ciertos mensajes con los esquemas de color. Y por eso es importante entender lo que representan estos diferentes esquemas de color con estos diferentes colores, cómo hacen sentir a la gente y cómo puedes usar diferentes combinaciones de colores usando el color rueda para poder sacar el diseño y el aspecto y la sensación de lo que ese producto paran dot la aplicación quiere transmitir a su usuario. Entonces eso va a ser aquí para la rueda de color y esquemas de color. Y nos vemos en el siguiente. 17. Trabajar con fuentes: En este video, vamos a repasar trabajando con fuentes. Hemos repasado la psicología del color, esa teoría del color, entendiendo los diferentes esquemas de color usando tus diseños y sabes mezclar y combinar diferentes colores para sacar una cierta sensación, cierta emoción en el usuario final real. Y así ahora lo que vamos a repasar es cómo mezclar y emparejar diferentes tipos de fuentes para que seamos capaces de que los usuarios se sientan de cierta manera basados en solo usar diferentes fuentes específicas. Entonces sigamos adelante y saltemos aquí. De acuerdo, así que aquí está la cosa. Cuando estamos trabajando con fuentes, aquí hay cierta psicología de fuentes de la que necesitamos estar al tanto. Font dice algo sobre ti, tu negocio o cualquier tipo de producto o servicio o sitio web de aplicación que estés diseñando para tus clientes finales, ¿verdad? Quizás incluso para ti mismo. Si estás desarrollando tu propio sitio web de negocios, vas a estar haciendo, digamos consultoría de clientes, ¿verdad? Quieres entender cómo funciona la psicología de fuentes que puedas usarlo a tu favor en tus diseños particulares, en tus aplicaciones particulares y lo que sea que estés diseñando y construyendo, ¿verdad? Por lo que las personas tienen ciertos sentimientos, emociones, y asociaciones cuando ven ciertos colores y tienen el mismo tipo de respuesta a diferentes fuentes. Si miras la imagen de aquí a la derecha, puedes mirar los diferentes sentimientos que se van a asociar con diversas fuentes. Y luego si quieres que la gente vea los negocios como estables o modernos, debes inclinarte hacia una cara tipo san serif. Y mirando estos por aquí a la derecha, puedes mirar un tradicional, estable y un poco de elegancia ahí con lo cursivo. Y entonces tenemos lo moderno con fuerte tipo de fuente. Entonces en última instancia lo que puedes hacer es usar realmente esta imagen en particular aquí. Y para ayudarte a entender mejor cuándo es el momento adecuado para usar qué tipo de fuente. Como puedes ver aquí, de todos estos, todos están regalados. Diferentes emociones, sentimientos diferentes solo desde la mirada de la fuente, porque solo se puede tener la fuente sin color, nada más en y de por sí mismo desprenderá cierto sentimiento, cierta emoción, y transmitirá bastante solo de ese texto, ¿verdad? Porque quieres mirar cuál es el significado detrás del texto real, el estilo. Y así cuando miramos diferentes fuentes, queremos mirar las diferentes categorías. Entonces tenemos el serif, Esta es la autoridad de respeto de confianza para la malady, igual que vimos en la diapositiva anterior. Tenemos el san serif. Este es el sencillo fideicomisos modernos y sofisticado tipo de tecnología enfocada a la vanguardia. Entonces tenemos la manuscrita, Tenemos la pantalla, el monoespacio, y hay miles de tipos diferentes de fuentes. Pero realmente quieres obtener la comprensión fundacional de los diferentes tipos de fuentes y lo que realmente están significando y transmitiendo. Porque se quiere poder tener el tipo de fuentes correcto como encabezamiento y tener el tipo de fuente correcto en el párrafo. Y a veces tiene sentido tener el mismo tipo de fuente y otras veces tiene sentido tener dos diferentes. Entonces, y si miras el medio aquí, miras el, oops, y tienes las letras muy largas, ¿verdad? Y en cuanto a la fuente, y luego bajas, miras el texto del párrafo real. Es completamente diferente. En ocasiones puede tener sentido tener el mismo tipo de fuente en el encabezado y luego el mismo tipo de fuente también en el párrafo. No obstante, para Más a menudo que no, va a ser mejor para ti tener un tipo específico de fuentes para el encabezado y otro tipo de fuente para los párrafos reales. Por lo que ambos se pueden elogiar y va a ser más fácil de leer. Y como dije, quieres asegurarte de que va a ser bastante fácil para que leas y para que alguien más lo lea. Y a veces puede tener sentido utilizar el mismo tipo de fuente en la misma parte superior en cuanto al encabezado, así como el párrafo. Y a veces no es más frecuente que no, no va a tener sentido. Se desea tener una forma específica para el encabezado y otro tipo de fuente para el párrafo para que ambos estén siendo capaces de ser leídos fácilmente. Estos son algunos recursos útiles. Puedes mirar fuentes dot google.com, font paradox, font, joy.com. En realidad se puede comprar un tipo diferente de fuentes también. Y puedes comprar algunas de tus propias fuentes si no quieres usar las estándar que vienen con todas las diferentes herramientas en lo que respecta a Microsoft Office o Microsoft suite. Sólo recuerda un entendimiento aquí que cuando estás emparejando fuentes, quieres que sea donde el encabezado siempre sea fácil de leer y muy bonito y claro así como un párrafo para que no estén confundidos y sea difícil de leer. De acuerdo, entonces ahora echemos un vistazo a la jerarquía tipográfica. Este es esencialmente un sistema de organización de la fuente que establece en orden de importancia, permitiendo al lector navegar fácilmente por el contenido. jerarquía tipográfica muestra al lector en qué información enfocarse y cuál es la más importante y que simplemente se apoya los puntos principales. Si miras el primer ejemplo aquí tienes encabezamiento uno y luego tienes los diferentes textos por ahí hasta el texto del párrafo, y eso va a ser en H1. Y luego tienes en la parte inferior hay H2, que es un poco más pequeño. Y luego tienes el texto del párrafo y luego tienes el botón ahí. Ahora, en esta situación particular, dependiendo del aspecto y el tacto y el diseño que quizá quieras tener en H 1 primero. Y esto es realmente prevalente en las entradas de blog cuando miras diferentes encabezamientos, diferentes subtítulos, siempre vas a encontrar cada uno de los muy top. Y luego después de unos párrafos de ese H1 en particular, ese rubro uno está cubierto, entonces vas a entrar en H2 y va a ir menor tamaño en cuanto al tamaño del texto. Pero esto es típicamente lo que vas a ver en una entrada de blog donde tienes H1, H2, H3, H4 típicamente. Y típicamente va a donde el tamaño del texto real a medida que vas más alto en los encabezados. Y así si quieres ver un ejemplo de esto, recomiendo solo tirar cualquier tipo de blog o, ya sabes, un sitio web de blog por ahí tiene muchos artículos, artículos de noticias, y te darás cuenta de que tendrás el H1, que es una especie del tema principal del blog y de qué se trata. Y entonces todos los demás encabezamientos son el subtema. Y así algunos de los factores clave a tener en cuenta con la jerarquía tipográfica es la fase de tiempo, el tamaño, el peso, la altura de línea, el espaciado de letras, los esquemas de color, si tienes algo ahí dentro, el mayúscula carta. Porque si vas a bajar a h3, h4, h5, entonces eso significa que los textos de encabezamiento se van a hacer más pequeños. No obstante, no quieres que sea demasiado pequeño. Estamos, se está mezclando con el texto del párrafo, ¿verdad? Así que asegúrate de estar al tanto de eso. Simplemente harías algunos factores clave a tener en cuenta cuando estás usando la jerarquía tipográfica. Y así en última instancia, ¿cuáles son los beneficios de la jerarquía tipográfica? orientación más fácil en la información ayuda a trimestres, por lo que se aplican diferentes estilos, ¿no? Si estás siguiendo esta jerarquía en particular, es realmente fácil de escalar. Acelera el proceso de diseño. Y luego aquí hay algunos recursos diferentes y puedes usar también archetype att.com, design systems.com y Material dot o.Recuerda que esto es algo que vas a ver típicamente ya sea en un sitio web o en su mayor parte, lo vas a ver en entradas de blog que, ya sabes, varios subtemas diferentes, ya sabes, con un tema principal. Y lo vas a ver con varios miles de palabras dentro de esa entrada de blog. Entonces vamos a entrar en las fuentes Web y mira qué es exactamente una Fuente Web. Entonces está la web safe fonts y luego la fuente del sistema. Y en cuanto a las fuentes del sistema piensa que Arial Times New Roman para Donna o Georgia como los ejemplos principales de las fuentes seguras web. Estas son las que son fuentes predeterminadas que se encuentran en la mayoría de los diferentes sistemas operativos y dispositivos. Entonces solo piensa en ti tirando un documento de Excel o un documento de Word. Estos son los que van a venir personalizados en esa suite de software en particular, correcto, en esa Microsoft Office Suite. Y estos se van a encontrar en la mayoría de los diferentes sistemas operativos y dispositivos, correcto, como estándar. Y entonces tenemos las Fuentes Web las cuales se encuentran es parte de las fuentes por defecto disponibles en diversos dispositivos, sistemas operativos, y están específicamente diseñadas en licencia para su uso en sitio web. Entonces piensa en Open Sans y rubato. Estas van a ser fuentes especializadas que normalmente van a estar necesitando tener licencia. Y así es importante entender las fuentes del sistema frente a las fuentes Web, que estés usando el tipo de fuentes correcto para tu situación particular. Entonces ahora veamos los beneficios de tener las diferentes fuentes web, la personalización fácil para la implementación front-end soportada por la mayoría de los navegadores, ¿verdad? De acuerdo, así que ahora echemos un vistazo a convertir fuentes en curvas. Ahora, esto se va a utilizar y como diferentes diseños de logotipos, diferentes tipos de diseños en general, tal vez algunas aplicaciones pueden ser un sitio web, ¿no? Pero sobre todo para como branding o personalización de fuentes existentes. Y así este es un buen ejemplo aquí con la parrilla campestre y taberna. De nuevo, esto es algo que se va a utilizar y situaciones únicas en las que vas a poder hacer eso en el Adobe XD. Y vamos a tener algunas lecciones de caminata para que puedas caminar y de hecho mirar por encima del hombro tuvo que hacer esto para que puedas crear este tipo único de diseños también. Entonces eso va a ser aquí por trabajar con fuentes. Y nos vemos en el siguiente. 18. Trabajar con íconos: En este video, vamos a repasar trabajando con iconos. Ahora, los iconos son una de las cosas más poderosas que puedes agregar a una aplicación web en particular, a un sitio web, o lo que sea que pueda ser hasta donde tu proyecto en el que estás trabajando porque permite a los usuarios y navega por lo particular sitio web, la aplicación más fácil y también proporciona una interfaz de usuario muy agradable. Entonces Sigamos adelante y saltemos aquí a trabajar con iconos. Entonces, cuando se trata de iconos, ¿cuál es exactamente el papel de ellos? Bueno, los iconos representan una gran parte de cómo los usuarios navegan por software, sitios web, aplicaciones. Y la investigación ha demostrado que los iconos, cuando se usan correctamente, pueden mejorar la usabilidad, ser fácilmente recordados, y mejorar el diseño de las páginas web y el software que se está utilizando. Y una de las cosas más importantes aquí a tener en cuenta es que el ícono siempre debe tener una etiqueta de texto a menos que tengas el ícono que es universalmente entendido o conocido, habrías estado, típicamente no necesitarías texto junto con el icono real. No obstante, esto es lo que puedes tener. Como digamos por ejemplo, esta de aquí, esta bombilla, esto puede significar muchas cosas diferentes en diferentes contextos, ¿verdad? Entonces por eso tiene sentido que en su mayor parte, uses los iconos seguidos algún texto para que puedas dar algún contexto detrás de lo que intentas decir ahí. ¿ Cuál es tu significado, verdad? Y así ahora echemos un vistazo a tres iconos diferentes aquí que saqué de mi página web donde se puede ver la bombilla de ahí. El bulbo de luz está representando una estrategia de marketing y luego la presentación ahí con la gente. Y se puede ver ahí en el número dos, esto representa la generación de plomo y luego el número tres, el apoyo de ventas. Entonces como puedes ver, muchas veces estos iconos por sí mismos pueden dejar un poco de confusión a menos que ya sea un dado en cuanto a lo que significa ese icono en particular. La gente va a necesitar algún tipo de textos ahí para realmente darles algún contexto detrás de lo que quieres que el ícono real represente y signifique. Ok, entonces ahora echemos un vistazo a algunos recursos aquí. Tenemos la pluma icons.com. Hay una colección gratuita de iconos y luego el aplanado con.com, 2.5 millones de iconos personalizables, gratuitos y pagados, y luego Icon finder.com, más de 4 millones de iconos SVG. Y van a ser gratuitos y pagados. Y así aquí solo hay un ejemplo de un estilo diferente de iconos. Tienes el contorno típico y tienes el campo, y luego tienes el multicolor. Y así ahora lo que quiero hacer es ir a mi computadora y mostrarles un sitio web que realmente no hace buen trabajo con los iconos en cómo los están usando en el look y la sensación general de la página web. De acuerdo, entonces estamos de vuelta aquí en mi computadora. Y como puedes ver aquí, este sitio web es dashed clicks.com y usaron los iconos y muy bien aquí. Por lo que puedes ver aquí ícono justo aquí. Y notarás que cada uno de estos tiene texto con eso porque va a ser difícil entender lo que esto significa. Todo el mundo entiende lo que significa un carrito aquí. Esto puede significar muchas cosas diferentes dependiendo del contexto. Echemos un vistazo a algunas diferentes aquí. Esto es más de algunos gráficos aquí bajamos por aquí. Volvamos a subir a la cima. Aquí miramos el menú, los anuncios de Facebook, ¿verdad? Todos estos diferentes iconos aquí. Aquí hay como una tarjeta de crédito. Aquí te dejamos el directorio de marketing de contenidos, aquí mismo para la agencia, sitio web, insights y algunos reportes resbalan en el mar herramientas educación. No los tienen aquí, pero aquí hacen un muy buen trabajo con los iconos. Y como dije, es importante tener texto con más frecuencia que no cuando estás usando un icono, porque la mayoría de las veces la gente no va a saber lo que significa y puede estar abierto a la interpretación, ¿verdad? Entonces por eso es importante tener el texto ahí. Y así eso va a estar aquí por trabajar con iconos. Y nos vemos en el siguiente. 19. Lección XD: herramientas, manipulación y componentes de objetos de objetos: Al seleccionar una opción manual para cambiar el tamaño de respuesta, es posible que vea las formas de escalar su objeto o grupo de objetos y seleccione si desea tener un Haidt fijo o un ancho fijo. Seleccione ambos. Nada cambiará. Podrás simplemente hacerlo más pequeño. Si sacamos el odio fijo, podemos redimensionar el odio k, c. Así que puedes jugar un poco con él si lo deseas. En ocasiones puede ser útil conocer esta característica, utilizarla. Ahora mismo, como dije, solo exploramos la interfaz de usuario para que lo sepas, sabrás dónde encontrar esta función y cuál es esta función es cuatro, vale. A continuación va el modo de mezcla. Podrás seleccionar. Algunos de ellos también están disponibles en Photoshop. Entonces para quienes trabajan en Photoshop, eso sería bastante fácil de, entender para qué es eso? Pero ahora mismo, en cuanto al diseño web, no lo uso. Sólo es aplicable cuando se quiere modificar una imagen, una foto. Pero cuando se trata de interfaz de usuario, no creo que sea necesario, pero ¿quién sabe? A continuación van las esquinas redondas o diferentes radios de esquinas. Por lo que se puede, y se puede cambiar simultáneamente en, para los cuatro lados de cuatro sección, cuatro esquinas. Podrás seleccionar el disfraz o diferentes radios para cada lado y tenerlo diferente. Está bien. Cool cosa que se destaca aquí. Cuando tú, cuando te enfocas en la entrada, te muestra de qué esquina es responsable esta sección. Y sentir y frontera. Podrás seleccionar color. Hay hacks, modales de color RGB y HSB. Podrás usarlos todos. Una vez que hayas seleccionado el color que te gustaría usar en todo tu proyecto, puedes agregarlo presionando el botón más. Por escoger el color del proyecto. Puede usar el icono del cuentagotas, tiene zoom, y puede clonar el color a su objeto actual. Este pro es responsable de la opacidad del objeto. Y puede ser dueño de tipo la capacidad precisa. En este campo. La opción de sombra tiene varios ajustes, muy útiles. A ver, tiene un color. Por lo que puedes crear la sombra no sólo para de un color negro o gris, sino que puedes crear diferentes colores, lo que quieras. Aquí. Creas, seleccionas el color. Hay un matiz y la capacidad de la, de la sombra misma como la sección de campo x, y, y b. B es en realidad cuatro más azules. Entonces seis como de costumbre, la configuración predeterminada, pero vamos a tener 25. Por ejemplar, ves que es bluebird, es muy suave. X e y responsables de cambiar la sombra según el acceso. Izquierda, derecha, abajo y arriba. Esto no estaba disponible en Photoshop. Por lo que recuerdo en este momento, los desarrolladores están muy contentos de que podamos usar clasificaciones precisas para sombras. Y pueden copiar eso en CSS sin problema ellos en CSS fácilmente. La opción background bluer se utiliza no muy a menudo, desafortunadamente, porque no es compatible con todos los navegadores. Te mostramos cómo se ve. Mira, hay una barra de desplazamiento para la cantidad, el brillo y la capacidad. Entonces como dije, es muy elegante, pero desafortunadamente no lo apoyan algunos de los navegadores populares. Esperemos que con algunas actualizaciones se obtenga este hecho en todos los navegadores y marcando para exportación, marcar esta casilla de verificación llevó el XD. Tenga en cuenta que este elemento debe exportarse a su proyecto y se puede descargar como PNG, como VG o donde sea, depende del formato del objeto que utilice. Por lo que es un tu exportado la imagen PNG, PNG aquí. Y desarrollador no puede descargarlo. Basta con ver la configuración de estas imágenes precisas, pero él o ella no puede descargar la imagen hasta que marques la imagen para exportarla. Pero de nuevo, llegaremos a esto más adelante en nuestro proyecto de clase tal vez ahora mismo sea justo. Para saber que para equipo de desarrollo, tienes que marcar para exportar elementos personalizados que importas a tu proyecto. Para los objetos de texto, es casi lo mismo. Excepto por telefoneo. Su tamaño, estilo, espaciado entre letras, interlineado, espaciado entre párrafos, alineación hacia el lado derecho, alineado central y alineado derecho. Estas dos cosas son nuevas incluso para los usuarios de Photoshop. Crea un párrafo o un solo elemento de texto. Por lo que este el texto puntual seleccionado por defecto. Para que veas que podemos cambiar, podemos cambiar el tamaño del texto y arrastrando este pin. Una vez que creamos un área de texto, tener un cuadro que pueda contener varias líneas, línea a línea tres. Y puedes ajustar el ancho y la altura si es necesario. Con ancho, alto, ajustarás el tamaño de la caja del área de texto. Es necesario cuando se tiene el tamaño preciso de un área de texto. El ajuste de un área de texto generalmente se aplica cuando se tienen columnas que son iguales y se tiene que conservar el mismo tamaño para cada una de las áreas de texto. Otra cosa que tenemos para el texto es el título en mayúscula, minúscula k, superíndice, subíndice subrayado tachado. Ahí hay un superíndice. Ahora, es subíndice dice subrayado y este tachado, nada complejo. Y pueden notar que nuestra sección de activos está vacía en este momento porque no tenemos ninguno, vamos a crear un activo. Voy a crear un botón. A ver. Escojamos un color. Contamos con un botón de enviar. Y voy a añadir, voy a crear un competente a partir de este botón. Y ya verás que aquí tenemos un componente. Abajo o la otra cosa son los colores aquí. Es pico algunos colores. Y al presionar el botón derecho, ¿quién puede agregar estos colores a tus activos? Aquí van. Ver. hoy estará aquí a tiempo que trabajará en este documento. Hasta que los borres. A ver, déjame borrarlos. Puede editar subrayados en el lienzo, cambiar el nombre de aplicar el campo, pero estará disponible cuando aplique los múltiples objetos. Copiar renombrar mi nombre, son útiles cuando tienes una guía de marca. Por lo que puedes agregar estos colores inicialmente corren justo desde el principio. El siguiente es el componente. Sí, volvamos a nuestro componente. Entonces este es un componente parental que creamos. Y vamos a pedir copiarlo en alguna parte. Ver cuando cambio el título en mi componente parental, cambia este título en cada uno de los elementos secundarios. Pero cuando cambiamos el elemento infantil, tal carne, no se ven afectados elementos. Está bien. Imaginemos que tenemos dos pantallas. Este, éste, y muchos de ellos. Y lleva mucho tiempo cambiar este botón en todas partes. Aquí lo puedo cambiar. Sólo. Digamos Decidimos ir con otro color. A ver qué pasa. Cambió su color en todas partes debido a que este elemento ya está ajustado. No se cambiará, no se verá afectado por los cambios del compromiso parental. 20. Lección XD – estilos de font y ajustes de la base de arte: A continuación van los estilos de carácter. Eliminemos esto para limpiar estos tableros de arte y rumbo. Ahora tenemos rumbo. Contamos con nuestro estilo gráfico, tagline y sub title. Por lo tanto, creemos un perno telefoneado para encabezarse y que sea mayúscula. A mí me gusta usar diferentes colores. Encabezamiento. El párrafo codificará con T y subtítulo, pero le gustaría que tuviera cursiva. Por lo que tenemos una línea de etiqueta de párrafo de encabezamiento y socio de subtítulos para 2p debería ser mucho más pequeño. De nuevo, es ejemplo. No estoy seguro de cómo se vería en el producto real, por lo que no hay juicio. Aquí. Quitemos esto. Ahora. Ten cuidado con ello, con el tamaño de la fuente. Yo estoy sugiere que se adhieran a un número igual como 80 o 75. Por lo que quieres masa con los con tamaños en tu documento. En primer lugar. En segundo lugar, a los desarrolladores front-end les encanta cuando se tiene todo preciso, pero si el proyecto requiere tener 61, por instancia, no se preocupe. Podrás usarla. Y sólo trató de preservar la precisión incisante, el espaciado y demás, que se ven más matemáticamente correctos. Por lo que terminé este azulejo de texto en nuestro proyecto imaginario. Y sumemos estos dos. Eran ácidos a carácter al estilo. Ese estilo de carácter a los ácidos. Aquí vamos. Ahora nos dirigimos igual para detectar línea y cuatro párrafo para apoderarse del PI para nombre más corto. Y sí, así lo tenemos. Todo aquí, podemos borrarlo o movernos a alguna parte. Copiemos algún texto para mostrar cómo funcionan los activos. Copio el texto T futuros, y automáticamente aplica d último teléfono que utiliza dt. Tenemos que crear una cosa hermosa, mucho hermosa que ésta. Y selecciono el encabezado, el lema. Y tenemos algo como esto. Para la versión móvil, probablemente puedas crear otro estilo y ponerlo también en los estilos de carácter. Podrás aplicarlo más adelante. Por lo que puede agregar icono personalizado, íconos legis alimentador. Puedes usar alimentador icons.com para muy agradable. Simplemente puedo arrastrarlo a tu proyecto. C Aquí tenemos puedo, podemos hacer un competente y editar a compuestos también. Está bien. Nuevamente, una vez que se cambia el elemento parental y es principal competente, ve que el otro también cambiará. Si seleccionamos el cartón presionando el nombre, veamos que aquí hay algunos ajustes. Entonces es un retrato y orientación paisajística. Tiene un redimensionamiento sensible, desplazamiento vertical nom. Vista. ¿Qué es c? Uno, el fondo de vista previa. Podrás hacerlo transparente. Y Layout Create es que estamos mejor alineación. Y de nuevo, para un mejor y más rápido desarrollo web de la maqueta. Puede usar el valor predeterminado y hacer el valor predeterminado. Si lo deseas. Es una cuadrícula cuadrada es útil. Objetos gráficos. Ilustraciones, probablemente carteles, pancartas. Pero el otro. Disposición crit, es más para web y móvil. Diseño. Puede que sólo los datos de tamaño de canaleta con el número de columnas, el ancho de columna, y los márgenes. Entonces creo que ya es suficiente para la introducción en este momento. Te verías en nuestra siguiente lección x e intentarías explorar las características si aún no lo has hecho. Muchas gracias. Nos vemos en nuestra próxima lección. 21. Herramientas de software de diseño gráfico: De acuerdo, entonces en este video, vamos a repasar los diferentes tipos de software de diseño gráfico que normalmente vas a usar en la sensación UX UI. El primero aquí es Photoshop. Ahora photoshop típicamente se va a utilizar mayormente con imágenes. Podemos hacer una gran cantidad de edición diferente haría imágenes específicas. Se puede hacer mucha personalización. Se pueden agregar elementos indiferentes. Ahora, una cosa a tener en cuenta aquí es que cuando estás usando Photoshop, normalmente va a ser fotográfico y estás usando píxeles, ¿verdad? Y entonces lo que eso significa es que digamos que tú ibas a acercar una imagen, ¿verdad? Y tú ibas a acercar el 1000%. Vas a estar viendo píxeles individuales que están conformando la imagen. Y se puede, muchas veces perder calidad y claridad de esa imagen dependiendo del tamaño y la pixelación de esa imagen. Entonces, por ejemplo, digamos que aquí tenemos esta imagen, ¿no? Y íbamos a acercarnos aquí. Eventualmente podrías ver los diferentes píxeles dentro de esta imagen aquí, ¿verdad? Se ven los diferentes colores, pero se verían los píxeles si llegáramos lo suficientemente profundo. Y así cuando piensas en Photoshop, su mayoría se va a utilizar para diseñar una base de autos de edición o ráster R. ¿De acuerdo? Y luego cuando estamos viendo la otra herramienta aquí, hasta el Adobe Illustrator, Esta va a ser una herramienta diferente que está funcionando a partir de un vector, ¿de acuerdo? Y qué ilustrador, lo que estás usando unos puntos específicos. ¿ De acuerdo? Y eso es algo a tener en cuenta aquí porque si tuviéramos que tomar un vector en particular y poder acercar 10 mil o un 100% mil. Nunca perderíamos nada de esa calidad porque solo puntos los que se están conectando entre sí, ¿verdad? Y así si miramos una imagen vectorial en particular por aquí, permítanme traer eso por aquí. Si fuéramos a acercar un 100% mil o lo que sea, nunca vamos a perder la calidad. Entonces esa es una de las mayores diferencias que hay en lo que respecta a Photoshop. Obviamente, tiene el nombre de la foto justo ahí dentro. En cuanto a Photoshop y Adobe Illustrator, esta es una herramienta que estás utilizando para crear mucho más de las ilustraciones, los gráficos, el diseño, el diferente diseño gráfico que diferentes gráficos y muchas veces usando vectores. De acuerdo, entonces estas son las dos herramientas principales que vas a estar usando para el diseño gráfico. Adobe XD es lo que también vamos a utilizar dentro de este curso. Pero eso va a ser más para la interfaz de usuario y el diseño de usuario. De acuerdo, así que solo quería darte una visión general rápida aquí de Adobe Illustrator y Adobe Photoshop, y te veremos en el siguiente. 22. Lección de Adobe XD 4: íconos y gráficos vectoriales: Hola allá y bienvenidos de nuevo a nuestras lecciones de práctica XD. hoy, vamos a revisar los gráficos vectoriales y cómo trabajar y gestionar y editar los iconos para nuestra app de perspectiva, empecemos con la herramienta de lápiz. Y para ver cómo se podría crear la forma dentro de esta herramienta, ya ves acabo de crear una forma aleatoria. Y ves que aquí hay algunos puntos. Estos puntos, nuestro trabajo según fórmula busier, que es muy común entre los gráficos vectoriales. Y al hacer doble clic puedes, puedes desactivar el ángulo y ves que tienes unos controles sobre estos ángulos. Por lo tanto, haga doble clic habilita o deshabilita las líneas curvas. A continuación, se ve que hay algunos ajustes para la línea. También podemos apagar el relleno, por lo que tenemos un objeto en negrita. Ahora mismo centrémonos sólo en el contorno. Por lo que en primer lugar, crear iconos para tu proyecto es muy útil para tener tu concreto encendido . Vamos a crear. Y para mostrar la cuadrícula cuadrada, es necesario seleccionar el tablero de arte presionando el, el título del nuestro tablero. Marque la casilla de verificación con avaricia y seleccione cuadrado. Y por lo general 40 píxeles es suficiente o un icono. Y ahora somos capaces de perforar un tamaño consistente para nuestros iconos. Ok, entonces en cuanto a nuestra aplicación, podemos tener algunos iconos para categorías de las meditaciones que tenemos dentro de la app. A ver, tenemos meditación del sueño, tress, real en vivo, progreso y hogar. De acuerdo, vamos a reorganizarlo un poco. hogar, el sueño, el alivio del estrés y excita nuestro progreso. Y casa representará conjunto de meditaciones que se ofrecerán por defecto para el usuario. Ahora cuando definimos los iconos que necesitamos cuando empezamos a dibujar, puedo o podría crearme de diversas maneras. Se puede utilizar una combinación de formas geométricas que ya son barra de herramientas existentes, digamos triángulo. También puede tener. También puedes usar enredo de ladrillo si necesitas terminar. El último es la herramienta de forma o pluma. Podemos usar este para más personalización de nuestra forma. Vámonos. Entonces empecemos con el ícono más simple, que es el icono de Inicio. Y probablemente lo adivinaste. Puede ser una fusión de dos iconos. Sólo hay que estar muy cuidadosamente alinear aquí. ¿ De acuerdo? Tenemos forma de casa. Ahora, necesitamos crear un barco. No quiero que se llenen. Hagamos ángulos un poco redondeados hasta aquí. Y ahora es el momento de conectar esto para dar forma con este botton. Entonces tenemos una especie de omicron. Añadamos una puerta. No se parecerá más. Casa. No necesitamos que el fondo esté rodeado de doble clic. Tienes el acceso a los elementos separados. Podrás modificar tu icono donde quieras. Y agruparemos este símbolo e a un elemento. Y hagamos de los lados del borde dos píxeles. Yo quiero cortar un trozo de nuestro elemento de puerta, ya que parece que no se ve bien. Por lo que para cortar un objeto de otro, puede usar la función Restar. Entonces he borrado la parte inferior. Ahora parece que nuestro icono se parece a nuestro hogar. Tratemos de cambiar el radio. Parece un hogar. Por lo que ahora puedo cambiar el color del icono, tiene un elemento entero porque está agrupado y puedo acceder al elemento separador dentro de este ícono haciendo doble clic terminado, puede modificarlo si es necesario. De acuerdo, eso es más o menos icono simple. Tratemos de crear algo personalizado. Y a continuación, nos hemos resbalado la meditación. Creo que el símbolo de la luna es bastante apropiado aquí. Nuevamente, necesitamos seguir el mismo estilo y este ícono así como para que todos sean consistentes significa que tenemos que aumentar nuestros lados de culto de la frontera, cambiar el color y desactivar el Phil. Creo que podemos excluir y tener el, Pero ya ves, si comparamos estos dos iconos, Este es más agudo y no encaja bien con el primer ícono. Por lo que necesitamos cambiar este rincón. Como dije en todo icono anterior, podemos acceder al otro elemento haciendo doble clic y necesitamos modificarlo un poco manualmente. Por lo que nuestra luna será redondeada como la, como es nuestro hogar. Por lo que para crear un nuevo punto, debes presionar con un solo clic. Si tu conjunto de iconos requiere ser redondeado, para tener esquinas redondeadas, eso tienes que hacer todo lo posible para crear iconos que luzcan consistentes. De lo contrario no bajará profesional en tu interfaz. Por favor, evite cuando este control vaya en la otra dirección. La mejor manera de crear unas esquinas lisas es tener aquí una línea recta. Simplemente me daré cuenta de que lo podemos hacer de otra manera sin usar formas adicionales. Creo que esto está bastante cerca de lo que estamos apuntando. A lo mejor necesito agregar algunos puntos de apoyo. ¿ De acuerdo? Sí, aquí vamos. Tenemos dos iconos de este mismo conjunto. Su siguiente es el alivio del estrés y emocionante. Bueno, por supuesto, para crear un icono, necesitas tener una idea de cómo debería verse. El otro es crear el ícono en sí. Creo que es algún tipo de flash o sería apropiado para el alivio del estrés. Nuevamente, hay que usar el mismo estilo para cada uno de nuestros íconos. Algunos de tus iconos podrían ser más altos o más anchos que los demás de tu set, porque depende de la forma y el objeto que intentes ilustrar. Si quieres tener esquinas redondeadas, puedes agregar la manualmente, aunque ansiedades, cosa agresiva aún necesita tener un hermoso icono. Yo quiero vivirla un poco girada sociedad Qing. Entonces tenemos un avance. ¿ Qué podría comunicar un avance? Bueno, podemos crear una bandera. Por lo que para crear un icono de bandera, necesitamos crear un rectángulo en el radio de esquina antes de nuestra manipulación. Porque cuando empieces a personalizar la forma, ya no tendrá los futuros de esquina redondeada una vez que hayas creado al menos 1 de los tuyos, ¿de acuerdo? Y usaré una sencilla herramienta de línea a la que se puede acceder pulsando L como tecla show. Por lo que ahora tenemos cuatro iconos para nuestra app, que son el hogar, el sueño, la ansiedad, y el progreso. Quizás no sea la mejor manera de categorizar la app de esa manera. Pero esta lección es solo para mostrar cómo puedes crear tus propios iconos personalizados si es necesario, en caso de que si quieres ahorrar algo de tiempo y no te sientas seguro en cuanto a dibujar iconos, puedes visitar sitios web como Peter icons.com, huyó icann.com. Puedo encontrar r.com y agarrar iconos de estos sitios web. Su profesional hay icono de alimentador es gratis, los otros iconos de recuperación y premium dentro, por lo que puedes elegirlo de acuerdo a tus preferencias. Podrás elegir quién uno de los varios estilos que están disponibles para los iconos, hay más, pero voy a enumerar los tres principales. Por lo que este es delineado exactamente como diseñamos para nuestra aplicación. Este es con un fondo sólido. Entonces la misma forma pero con el fondo. Y este es icono multicolor plano. Ella tiene más detalles en ella se ve más rica que las dos fichas anteriores. ¿ De acuerdo? La mayoría de los diseñadores que van con el contorno porque está de moda, es flexible, es fácil volver a crear otras colecciones de elementos e iconos que puedo establecer, son más ricos en términos de contorno o iconos audaces en lugar de a todo color, más o menos realista, puedo peinar. Por lo que estamos de vuelta a nuestros iconos de aplicaciones y pongamos iconos en sus lugares. Recuerda que tenemos el f2 t, Contamos con 40 pixeles de área cuadrada para nuestros iconos. Es, se llama contenedor. Entonces puedo ser más pequeño, pero el contenedor tiene 40 píxeles. Creo que aquí podemos quitar la puerta. Tiene, no se siente como el mismo estilo. Ahora estamos alineando nuestros iconos a una línea horizontal. Eso es bueno que tenemos para saludo de columna nos ayuda a alinear nuestros iconos correctamente al diseño general. Una vez que esté en la pantalla de inicio, podemos destacar esto de alguna manera. Esta opción única. La otra opción es hacerlo hablador. Por favor, no olvides crear diferentes condiciones para tus iconos ya que esto puede ser un problema mientras el desarrollo y exhibición a las partes interesadas. Aquí podemos agregar especie de mente tabulador, muy común en estos días. A ahora soy pantalla de inicio o no, es mejor tenerla en la parte inferior. Podrías hacerlo así. Disminuye el, disminuye la capacidad de estos iconos si sientes que es apropiado a tu experiencia de usuario cuando disminuimos la capacidad de este ícono porque no es del todo agradable. Eso iría con la versión anterior donde este botón ya está presionado. Creo que eso debería tener más contraste. Entonces, entonces ahora así es como un marroquíes Luke en la barra inferior. Ahora ya sabes cómo crear iconos de la manera de esquema. Y lo último que me gustaría señalar es que hay que marcar iconos para la exportación. Cada vez que hagas Icono Personalizado, por favor marcarlo para experto. Porque tus desarrolladores no podrán descargar el archivo SVG e implementarlo en el HTML. De acuerdo, así que muchas gracias por su atención. Espero que esa lección haya sido útil. A lo mejor tienes otras ideas sobre cómo representar estas secciones. Por favor, adelante y pruébalo tú mismo. Muchas gracias y nos vemos la próxima vez. 23. Descripción la sección de diseño de UX: En este video, vamos a repasar la descripción general de la sección de diseño de UX. Por lo que esta es la sección más grande de todo este curso. Esto va a cubrir muchas áreas diferentes, como la experiencia del usuario, como el proceso de diseño de UX, que diferentes perfiles de usuario y realmente mostrarte de qué se trata exactamente el diseño de UX. Esta lección en particular aquí te va a dar una visión general general de lo que está por venir en esta sección en particular. Aquí hay mucho que cubrir, y estoy emocionado de que empiece. Así que sigamos adelante y saltemos a la visión general de la sección. Entonces, lo que vamos a cubrir primero es ¿qué diseño exactamente UX? ¿Qué significa? ¿ Cómo funciona en el proceso de diseño de UX real? Y luego el proceso de análisis, que es muy importante para que entiendas así como un Diseñador UX. Y luego vamos a entrar en un perfil de usuario, puntos de dolor de usuario, desarrollando una persona, un avatar. Aquí es esencialmente donde nos va a permitir realmente entender quién es el usuario final para poder elaborar el tipo correcto de producto que va a poder conseguir que realmente quieran comprar porque lo estamos haciendo específicamente para ellos, ¿verdad? Y luego vamos a estar repasando el viaje del cliente y luego el viaje del cliente versus un embudo de ventas. Muy importante para que conozcas a un diseñador de UX, sobre todo cuando estás tratando de venir a una organización y ser capaz ser extremadamente valioso si tienes conjuntos de habilidades y conocimientos adicionales, como entender la psicología de la venta, psicología conductual, embudos de ventas, factores de persuasión, ¿verdad? Vas a ser mucho más valioso para esa organización en particular. Y vamos a estar repasando las tres fases de un embudo de ventas, las cuatro etapas de un embudo de ventas, y luego conversiones macro y micro. Vamos a pasar a diferentes embudos en esta lección en particular. Y vamos a repasar un embudo de generación de plomo y luego un embudo de venta de productos digitales también. Y luego una de las cosas más grandes que vas a querer entender es la sofisticación del mercado. Y vamos a entrar en esto con mucho más detalle en las lecciones. No obstante, la sofisticación del mercado realmente te está dando una comprensión de dónde se encuentra el usuario en el viaje real, correcto, el camino en realidad se compra un producto, ya sea que estén o no conscientes de un problema de un punto de dolor que puedan tener y dónde exactamente están en el proceso de Holbein. Entonces lo siguiente que vamos a estar cubriendo son los siete principios de influencia. Vamos a estar pasando por el flujo de usuarios. Vamos a estar repasando storyboards, mood boards, los bajos y los wireframes de alta fidelidad, luego desarrollar prototipos. Después tenemos las pruebas y la evaluación y luego los entregables UX. Entonces esta es, como dije, una sección muy grande aquí. Es mucha información, pero te va a convertir en un diseñador de UX bien redondeado porque muchas veces cuando entras en una organización, normalmente van a tener una persona manejando un área. Pero si vas a entrar, digamos, un negocio pequeño a mediano tamaño, o tal vez incluso como una startup, tú conociendo todos los diferentes factores aquí en cuanto a un embudo de ventas, la diferencia entre el viaje del cliente un embudo de ventas y los diferentes tipos de embudo de ventas. Y sobre todo con la influencia y persuasión, una vez que puedas tener estas habilidades adicionales añadidas a tu repertorio, por así decirlo, ¿verdad? Y vas a ser un activo extremadamente valioso para cualquier organización, ¿verdad? Porque la mayoría de las personas que son diseñadores de UX UI suelen estar bien versadas en un área. Pero si tienes muchas habilidades diferentes dentro del espectro de marketing, entonces vas a ser extremadamente valioso. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 24. ¿Qué es el diseño de la experiencia del usuario User (UX): Y bienvenidos a todos. Estás en la sección de diseño de experiencia de usuario. Y en este video, voy a explicar los principales conceptos y metodologías de la UX. Por favor trate de ver el panorama completo, pero no los entregables y las actividades de una manera separada. Todo esto es parte de uno. Sólo piensas que me gustaría señalar antes seguirlos ya que voy a explicar muchos, muchos tipos de cosas que son que podrían incluirse en el proceso UX. No obstante, tu proyecto puede no requerir o no puedes hacer esta actividad, este entregable, este tipo de investigación por el marco temporal, donde por un presupuesto ajustado. Según Don Norman, hay cuatro principios principales que hay que seguir haciendo un diseño centrado en el usuario. ¿ De acuerdo? Entonces el primero es entender y abordar los problemas centrales al hacer el, el diseño del producto que hay que tratar de entender qué dolores, Qué frustraciones experimentan las personas con un tipo similar de producto. Y también tratar de resolverlos, pero no en bajo nivel sino en el superior, a nivel general. Me gustaría agregar múltiples productos en mi carrito de compras en alguna tienda online k, Y me gustaría hacerlo, pero el sistema no tiene discapacidad en este momento. Por lo que usted ofrece es introducir múltiples pedidos, múltiples productos en su sistema de carrito en los pasos del padre no puede manejar los múltiples pedidos y significa que usted reduce la solución en un nivel, pero no ha pensado en lo que va a ser la siguiente etapa, cómo interactuarán estas dos cosas, cómo se conectarán y sincronizarán. Por lo que esto requiere, por supuesto, trabajo cercano con el equipo de Desarrollador o desarrollo. Depende del proyecto. Trató de ver todo el panorama, no sólo una cosa, porque probablemente cuando resuelvas esta sola cosa, cambiarás una cosa en un solo lugar. Esto tendrá un impacto en un padre, los módulos padre y la experiencia Padre de tu usuario. Resolver los problemas fundamentales subyacentes, no los síntomas. Pregunta por qué cada tema, cuando la respuesta es error humano, sigue adelante por el error, cura lo que podría haberlo impedido. Y el siguiente principio básico, según Don Norman, es B people Sander. Bueno, esto significa que tienes que diseñar tu producto o sistema, empezando por las necesidades y capacidades de un usuario que usará tu producto. Es sencillo porque gran parte de los procedimientos y dispositivos del sistema actuales son lijadora tecnológica. Diseñaron en torno a las capacidades de la tecnología, con la gente a la que se les pide llenar las piezas que la tecnología no puede hacer. Personas centradas significa cambiar los días, empezando por las necesidades y capacidades de las personas. Por lo que significa que si ya tienes algunos requisitos que son técnicos y estás tratando de construir la experiencia del usuario sobre los requisitos técnicos de tu sistema. Ese no será un diseño centrado en el usuario. ¿ De acuerdo? Este diseño centrado en el usuario coloca al usuario en el centro absoluto de su producto. Y los requisitos y la funcionalidad del sistema crecen alrededor de este centro central. De acuerdo, trataremos de dar otro ejemplo. Tomemos un auto, por ejemplo. Tiene que tener cuatro ruedas, y esto es un requisito para la mayoría de los vehículos. Pero aún así, cuando quieres estar cuando quieres que el vehículo tome menos lugar, que quieres que el vehículo pase por el, ya sabes, vialidad. Probablemente diseñarás la motocicleta o scooter. Está bien. Por lo que la ms. Eso sí, me gustaría moverme por la ciudad, pero me gustaría también gastar menos gasolina, pasar menos tiempo en el tráfico. No quiero tener asientos de pasajero. Yo estoy viajando solo. Y por eso probablemente se te ocurre la motocicleta. Y este es un ejemplo amplio, pero realmente demuestra el enfoque centrado en el usuario, quiero decir, el enfoque centrado en la gente, vale, usa un enfoque de sistema centrado en la actividad. Esto es bastante interesante porque una vez que empecé mi carrera de UX, no lo consideré muchas veces. Pero ahora voy a tratar de explicarte con palabras simples para que puedas aplicar esto en tu trabajo y en tu carrera de UX. Por lo que el diseño debe enfocarse en toda la actividad que se está considerando, no sólo en componentes aislados. Por ejemplo, digamos que estamos en tienda online, sitio web y tratamos de encontrar algunos dispositivos, está bien. Y lo agregamos a la tarjeta. Un teléfono inteligente por ejemplo, agregamos y nos gustaría agregar uno más. Este sitio web no tiene esta característica. Puedo poner en el carrito sólo uno. Entonces u, siendo diseñador de UX, introducirá un pedido múltiple. El cartulina podrá manejar múltiples productos dentro. A continuación, cuando una persona intenta confirmar el pedido, parece que el sistema no tiene esta característica. No lo planeaste. Por lo que te fuiste sin consideración. Padre, pasos que se ven afectados por tu solución. K que cambiaste una cosa en un componente. No has considerado el otro que va más allá, tienes que intentar ver toda la imagen cuando estás haciendo tu diseño de usuario, experiencia de usuario. Utilizar iteraciones rápidas de prototipos y pruebas. Nuevamente, aquí está la parte interesante de principios de Don Norman. Porque me encanta el prototipado y lo hago con un placer con el amor. Y cuando recibo comentarios de usuario del equipo, realmente me encanta introducir, para resolver el problema, para cambiar mi prototipo de acuerdo a retroalimentación, según sugerencias. Ya sea un Staholder o el usuario final, es difícil diseñar una solución perfecta desde la primera prueba. Eso lo creo firmemente y lo animo a confiar en mí. No hay nada malo en las iteraciones forlibres de prototipos. Con cada iteración, el prototipo se vuelve más refinado. En utilizable. Días de Indiana, obtendrás tanta satisfacción cuando a tus usuarios les encantará tu prototipo. Y no tendremos ningún comentario. A ellos les encantará. Su producto. Tail te felicitará por, ya sabes, por hacer estas experiencias muy inteligentes, muy cómodas para ellos porque resuelves sus problemas, resuelves sus problemas, consideras sus frustraciones, valores, etcétera y así sucesivamente. En otras palabras, todo lo que se hace con un diseño centrado en el usuario está hecho para los usuarios. Consideramos su edad, condición social, hábitos, lugares de trabajo en las escuelas, problemas cree pinta un nivel de ingresos, y así sucesivamente. Aquí, el usuario se coloca en el centro absoluto de servicio o producto que estás diseñando. Por eso se llama diseño centrado en el usuario. Y tengo la cita de Don Norman, que lee, diseño centrado en el usuario significa trabajar con tus usuarios en todo el proyecto. Muchas gracias y nos vemos la próxima vez. 25. Proceso de diseño UX: De acuerdo, y hablemos del proceso del diseño de UX en este video. Por lo general lo divido en descubrimiento, prototipos, pruebas y mejora. Es lo mismo que un enfoque general para la gestión de un proyecto. Por lo que un ciclo de estas cuatro etapas es uno alrededor o una iteración. entregables son informes de auditoría, persona, storyboards, mapas de viaje del cliente del usuario, flujos de usuarios, tablones de estado de ánimo, arquitectura de la información , sitemaps, wireframes, prototipos interactivos e informes de prueba. No te preocupes si no entiendes algunos de ellos, volveremos a la descripción y exploraremos el cada entregable con mayor detalle. Ahora centrémonos en cuatro etapas, y exploremos más a fondo la etapa de descubrimiento. Bueno, al ser la primera etapa en tu diseño de UX, requiere más entregables y más trabajo, y es el trabajo más complejo y arduo. comparación con otras etapas, tendrá análisis de un análisis competitivo del producto actual, perfiles de usuario y persona, necesidades del usuario y puntos de dolor, storyboards, viaje del cliente del usuario, mapa, flujos de usuarios, tableros de humor, wireframes todo dentro de uno, etapa k Pero de nuevo, quiero reiterar que tu proyecto tal vez no requiera Algunos de ellos no tiene que ser tan expandido. Este es el modelo perfecto en el mejor de los casos en mi descubrimiento, utilizo modelo de diseño de diamante doble. Cuando tenemos investigación, analizamos y sintetizamos, ampliamos posibilidades, ampliamos nuestros hallazgos. Y tenemos mucha información en manos de la que la agrupamos, ordenamos, filtramos eso y seleccionamos lo que es necesario, seleccionamos lo que no es, seleccionamos donde es importante, eso es menos importante que podría ser implementado en este momento y eso no se puede implementar. Entonces encogemos nuestros hallazgos. Los estamos definiendo, luego llegar a un siguiente diamante en el que desarrollamos y entregamos. Y desarrollar y entregar significa que prototipeas, pruebas, y refinas entonces, y solo entonces conseguimos el resultado. Por lo que hay dos cosas que recordar. Tendrás mucha información, muchas variaciones, muchos ejemplos en tus manos, pero hay que tener cuidado con todos ellos. No puedes presentarlos todos en un solo lugar. Tienes que agruparlo ordenados usando la forma más fácil de usar. ¿ De acuerdo? Tratando de entender la similitud entre las cosas que encuentras y luego las conviertes a prototipo, que también puede tener muchas revisiones, luego va a la prueba, y solo entonces puedes refinar el diseño y tener resultado. 26. Viaje al cliente vs. embudo de ventas: En este video, vamos a repasar las diferencias entre un viaje de cliente y un embudo de ventas. Entonces estoy emocionado por este. Adelante y saltemos justo aquí. Pasamos por el viaje del cliente en otro video anteriormente, sin embargo, quiero darles una visión rápida de nuevo de lo que se trata realmente esto. Esto realmente se trata de tener un esquema detallado. Cada paso en el camino que toma un lead, un cliente potencial o cliente llega hasta convertirse en un cliente pagador. Y pueden entrar en cualquier etapa aquí. Puede venir tal vez escuchando algún tipo de anuncio de radio o tal vez leyendo un blogger en línea, tal vez algún tipo de sitio web que tenga un anuncio de banner en él con nuestra promoción, tal vez un anuncio en Facebook o LinkedIn, Google, sea lo que sea, ¿verdad? Este es el proceso final por el que pasa un cliente para convertirse en un cliente doloroso real. La diferencia aquí con un embudo de ventas real es que el embudo de ventas es un modelo que se utiliza realmente para comercializar apropiadamente a estos leads individuales en diferentes etapas del ciclo de compra. Y así si miras esta imagen de aquí a la derecha, ves en la parte superior del embudo hay prospectos, contactos, leads, finalistas, y luego ventas. Y entonces esa es realmente la mayor diferencia aquí, es que un embudo de ventas se puede usar como herramienta dentro de cada etapa en particular, ¿verdad? Digamos que alguien entra por la página web y ahí llenan el formulario, ¿verdad? Para conocer realmente más sobre el negocio, sobre el producto. Entonces después de eso, les van a poner en un embudo de ventas que va a tener varios pasos diferentes que le permitan presentar su información. A lo mejor descargar algún tipo de PDF para información gratuita, o incluso tal vez comprar algo a bajo costo para que puedan familiarizarse con la marca. Y así realmente puedes pensar en el viaje del cliente como una vista de 50 mil pies. Ese es un esbozo detallado real de cada paso que llevo lleva para convertirme en realidad en ese cliente. Un embudo de ventas funciona dentro del viaje real del cliente porque un embudo de ventas consigue, tienen un montón de piezas en movimiento diferentes. Por ejemplo, digamos que alguien entra y la descarga. Y vamos a entrar en esto en las conferencias adicionales en esta sección en particular. Pero digamos que alguien iba a entrar a través la página web y ellos envían su información, luego se ponen en un cubo separado, y se ponen en un embudo de ventas diferente que digamos les dispara mensajes de correo electrónico una vez a la semana o dos veces a la semana. Y luego si responden a uno de los correos electrónicos y descargan un PDF para hoja de trampas gratis o libro nuevo, sea lo que sea, entonces van a la siguiente etapa. lo mejor, la siguiente etapa es conseguir que compren algo de bajo costo. Y luego después de que compran algo a bajo costo, entonces se están moviendo a la siguiente etapa del embudo, que está consiguiendo que compren algo a un costo mayor. Entonces estás sacando la imagen aquí de que el embudo de ventas normalmente va a tener un montón de piezas en movimiento diferentes, un montón de etapas diferentes. Y va a tener diferentes ventas ascendentes abajo celdas, diferentes tiempos. Eso es regalar información gratis al usuario. Pero siempre va a estar dentro del viaje real del cliente. En las próximas conferencias, vamos a repasar diferentes tipos de embudos de venta. Y vamos a repasar las diferentes fases de embudos de ventas. Y así eso va a estar aquí por las diferencias entre el viaje del cliente y el embudo de ventas. Y nos vemos en el siguiente. 27. 3 fases de un Funnel de ventas: En este video, vamos a cubrir las tres fases de un embudo de ventas. Entonces esto es algo que vas a querer tomar conciencia a medida que estás trabajando en el espacio de marketing, en el espacio de marketing digital, sobre todo si apenas estás iniciando tu carrera de UX, vas a querer unirte a típicamente, si estás buscando un trabajo, unas organizaciones más pequeñas, para que puedas obtener algo de experiencia. Y típicamente estos individuos van a querer que tengas un conjunto de habilidades diferente en diferentes áreas. Y así cuando realmente puedes saber mucho sobre marketing, y por UX UI, vas a ser mucho más valioso para estas organizaciones. Entonces sigamos adelante y saltemos a las tres fases. Un embudo. Entonces los tres diferentes vendedores o fases se pueden descomponer en duros MAF y Bob, sé que suena un poco raro, pero es justo lo que se utiliza para representar estas diferentes fases dentro de un modelo de ventas. Por lo que la parte superior del embudo es todo sobre educación. Es proporcionar al usuario información relevante y significativa sobre un producto o servicio. O tal vez solo incluso en branding. Sólo piensa en si estás viendo un anuncio de Facebook y todo lo que dice el anuncio de Facebook es, oye, hacemos X, Y, y Z o, ya sabes, estamos a punto de x e yEn realidad no te vende nada. Es solo darte esa conciencia de marca para que seas capaz de saber que existen, ¿verdad? Y eso es típicamente lo que ves en la parte superior del embudo y promociones muy ligeras. Está bien. Y entonces tenemos la mitad del embudo y esta es la fase de consideración. Ahora entiende que las conversiones pueden ocurrir en cualquier momento a lo largo del embudo. No obstante, aquí es donde empiezas a apuntar al tráfico que ya está caliente y ya le ha interesado. Entonces por ejemplo, en Facebook, lo que puedes hacer es retardar a aquellas personas que ya se han comprometido y marca senior previamente. La parte superior del embudo, ¿verdad? Mucho de los anuncios es muy ligero, muy despreciable, muy no ventajoso. Solo dándote algo de branding y haciéndote saber, oye, mi marca, mi producto está aquí. Esto es lo que hacemos. Y si la gente interactúa y se involucra con ese anuncio en particular, entonces puedes ponerlos en un cubo separado ahora y moverlos a la mitad del embudo. Porque ya sabes que ahí hay algunos intereses. A lo mejor vieron un video, lo mejor vieron un video, ya sabes, 30 segundos a través. Y eso te está dando una buena indicación de que ahí hay interés. Por lo que quieres poner esos en un cubo separado, mueve esos a la mitad del embudo. Y aquí es donde empiezas a ver algunas conversiones porque son las personas que ya han visto tu marca. Y luego al fondo del embudo. Y aquí es donde retargeting audiencias altamente interesadas que no se convirtieron para convertirse en leads o clientes antes en medio del embudo. Por lo que se puede ver aquí, el público va bajando más allá. Y a cada etapa, la mitad del embudo son personas que te han visto en la parte superior y luego en la parte inferior del embudo son personas que son altamente apuntadas porque te han visto en la parte superior, el branding senior, el anuncios senior que son mucho así, ya sabes, no tratando de vender un producto o servicio, sino más de branding. Y entonces han visto tal vez tu llamado de luz a la acción. En medio del embudo. Y por la razón que sea, si incluso son comprador ajustando convertir, entonces los mueves a otro cubo, que es la parte inferior del embudo. Y aquí es donde vas a encontrar mucha convergencia. Porque muchas veces, sobre todo si un producto o marca, es totalmente nuevo, gente necesita ver el producto Medici la marca varias veces para sentirse cómodo, para tener esa confianza en su derecho. Y por eso muchas de las conversiones sucederán en la parte inferior del embudo porque han visto la marca varias veces y en realidad han interactuado con la marca y con los anuncios. Y así ahora ven ese producto o marca en particular como de confianza, y luego van a apretar el gatillo. De acuerdo, entonces veamos algunas de las diferentes cosas que estarías ofreciendo en cada etapa del embudo. Entonces en la parte superior del embudo aquí tenemos, digamos un chichi, algún tipo de contenido educativo, una conciencia del problema del dolor, conciencia pérdida de oportunidad, o simplemente cualquier tipo de conciencia como hey, ayudamos perros hacen X o tenemos una app de meditación, existimos, ¿verdad? Algo súper sencillo. También puedes proporcionar un gran ebook descargable que le permita resolver un problema en particular, punto de dolor particular. Mucho así en el lado no ventajoso de las cosas, de acuerdo. Y luego el embudo medio aquí, aquí es donde puedes tener algún tipo de propuesta de valor, tal vez algún tipo de guía de compradores, conseguir que vean algunos estudios de caso, algunos testimonios, algunas métricas de por qué tu producto, no tienes sentido para ese mercado en particular, por qué sería en su mejor interés por, y entonces aquí es donde empiezas a ver algunas conversiones, ¿verdad? Y luego al fondo del embudo, aquí es donde también vas a ver muchas más críticas, testimonios. Vas a ver mucho de los precios que tal vez se dispuso sus demos. Y realmente donde vas a ver a la gente que está lista para comprar, ¿verdad? Y así nota cómo en cada etapa que bajaríamos en el embudo absoluto aquí, se pone mucho más claro en cuanto a lo que estamos buscando hacer y la oferta se pone mucho más específica ¿verdad? En la parte superior solo estaban educando a IK, estamos aquí, estamos en el mercado. Oye, queremos resolver tu problema dándote un ebook gratis o tal vez un enlace a una publicación de blog en el sitio web embudo medular. Oye, tenemos esta guía aquí que te puede ayudar a lograr XY y Z. Oye, mira algunos de nuestros estudios de casos anteriores que hemos podido lograr. Y luego finalmente, realmente quieres, en el fondo del embudo, martillando la prueba social que revisa testimonios, apalancando lo que otras personas habían experimentado, proporcionando el precio real, cualquier tipo de demos y donde encontrarás que gente en su mayoría va a estar lista para apretar el gatillo. ¿ De acuerdo? Por lo que estas son las tres etapas de embudo y debes darte cuenta de que esto está en un nivel muy alto, porque en cada nivel en particular aquí, puedes tener un embudo de ventas dentro de esa fase en particular. Entonces, por ejemplo, el embudo medular puede consistir en varios embudos diferentes en esa etapa. Lo mismo al fondo del embudo. Digamos que los, ya sabes, click en el anuncio y les interesa comprar, ¿verdad? Puede llevarlos a cierto embudo dependiendo de sus acciones previas, ¿no? Y así todo depende de la información en los datos que se recojan. Facebook es una de las mejores plataformas para poder utilizar publicidad para recopilar datos y poder ver lo que está haciendo el usuario, cómo están interactuando con eso se suma a los electos un mensaje. ¿ Les gusta lo que están viendo, verdad? Y luego poder llevarlos a diferentes direcciones con base en su acción previa. Por lo que va a estar aquí para las tres fases de embudo de ventas. Y nos vemos en el siguiente. 28. 4 etapas de un embudo de ventas: En este video, vamos a repasar las cuatro etapas de embudo de ventas. Ahora, este va a ser el tipo de embudo de ventas más común que veas hasta las diferentes etapas. Y también entiende que esto va a ser un marco que puedes usar cuando estás escribiendo copia, si alguna vez consigues la tarea de escribir copia porque digamos que tomas un trabajo en una start-up y ellos necesitan que lleves diferentes sombreros. Ser capaz de entender las cuatro etapas del embudo de ventas y luego el marco de redacción de textos que va en conjunto con esto será sumamente valioso para usted y después para las organizaciones. Entonces sigamos adelante y saltemos aquí. Por lo que las cuatro etapas del embudo de ventas es la número uno, la etapa de conciencia. El número dos es el interés. Aquí es donde les estás dando la razón para mantener su atención porque en la primera etapa que quieres hacer es crear esa conciencia, ¿no? Dejar saber a la gente, hey , existimos, yo existo, ya sabes, estamos aquí en el mercado con los intereses les estás dando una razón para mantener su atención. A lo mejor digamos que detengan lo que están haciendo. Típicamente como en un smartphone, quieres que dejen de desplazarse en Facebook, Instagram, o cualquier plataforma que pueda ser y quieres llamar su atención. Y entonces la siguiente etapa es la decisión que deseo. Entonces un prospecto, exactamente cómo la oferta particular en resolver un problema en particular, ¿no? Y en última instancia el público debería poder ver cómo estás ofreciendo puede hacer su vida mejor. Y entonces la etapa final es la acción cuando había podido crear la conciencia de la marca, por lo que los intereses, y luego realmente crear el deseo. El siguiente paso es persuadir a la perspectiva de que ahora tomen la acción inmediata, ¿verdad? Y en realidad compró un producto o pasar a la siguiente etapa del embudo. Y así vamos a seguir adelante y diseccionar esto un poco más profundo. Entonces la etapa de concientización. Entonces aquí es donde el usuario toma conocimiento de un producto o una marca a través publicidad como redes sociales o boca a boca o cualquier tipo de referencia, ¿no? Es esa conciencia la que se crea. Número dos, la edad de interés. Aquí es donde el consumidor se interesa y se compromete aprendiendo sobre su solución, producto o servicio existente. Al igual, digamos que ven, por ejemplo, un anuncio que dice, ¿sabías que puedes hacer o lo hiciste, estás al tanto de eso? Se puede lograr XY y Z sólo haciendo y, ¿verdad? Algo así donde realmente estás involucrando sus intereses. Estás haciendo que se detengan y te están sacando los ojos, ¿verdad? Y luego la siguiente etapa aquí con decisión, aquí es donde realmente se muestran los prospectos exactamente cómo se puede resolver su problema. Y estás consiguiendo que tomen una decisión para comprometerse y tomen la acción, ¿verdad? Aquí es donde queremos que tomen acciones inmediatas. Y queremos asegurarnos de que esté deletreado. A veces, muchos anuncios se quedan cortos porque no le dicen a la gente qué hacer. Hay una razón por la que muchos de los botones. Para hacer una compra, digamos por ahora o agregar al carrito. Porque necesitas estar brindando algún tipo de experiencia, ¿verdad? Donde estás conduciendo a la gente a través del embudo de ventas aquí y las estás llevando a través de cada paso y estás haciendo que sea súper simple y fácil para ellos comprar los productos con poca fricción. Porque una de las cosas clave que hay que entender acerca de la psicología, la psicología social, la mercadotecnia, psicología conductual es que tomamos decisiones de compra basadas en la emoción y las justificamos lógicamente, ¿de acuerdo? Entonces siempre que veamos algo y queremos comprarlo, Normalmente va a ser la emoción la que nos hace querer comprarlo o es querer conseguirnos los Byatt, ¿verdad? Y entonces justificaríamos esa compra después de lógicamente, correcto, por qué lo hicimos, pero es la emoción la que realmente está creando ese poder adquisitivo. Entonces ahora echemos un vistazo a un ejemplo add aquí, donde estamos usando este framework para realmente escribir la copia y el anuncio en sí. ¿ De acuerdo? Entonces vemos aquí con esta oferta en particular aquí en Facebook, tenemos el marco Ada y esencialmente estamos promoviendo aquí una oferta de implantes dentales de $1000. Y como pueden ver aquí, tenemos en la primera etapa, atención. Agarra la atención del público abordando un punto de dolor, desafiando o llamando a un público específico en sí, ¿verdad? Donde lo más alto es su atencion can y de web. Ahí es donde estás llamando al público específico, ¿verdad? Para que puedan saber que estás hablando con ellos. Y luego el interés. Aquí es donde estás describiendo los beneficios de la oferta, ¿no? Estamos diciendo, Hey, hay un in-plant por solo 999, ese es el beneficio real. Estás consiguiendo algo por un profundo descuento. Y luego la siguiente etapa, un deseo o decisión. Se desea proporcionar una razón para que tomen medidas ahora. Y para eso, tenemos por un tiempo limitado, estamos ofreciendo diez visitantes por primera vez. Entonces estamos demostrando que es un derecho limitado. Y entonces esa es una razón para que tomen una decisión ahora. Y entonces tenemos la acción. Entonces esto les está diciendo, oye, haz clic aquí, descarga ahora o reserva ahora, ¿no? Sea lo que sea. Siempre tiene que ser algo donde les estés diciendo exactamente qué hacer para que haya poca o ninguna fricción a lo largo de todo este anuncio aquí. Porque recuerda, todo se trata de las emociones, de excitar a la gente, de conseguir que la gente simplemente tome acción en base a sus emociones, sin que realmente usen el poder cerebral para pensar realmente todo a través de lógica, ¿verdad? Porque entonces esos están cuestionando su decisión de iniciarlo y Han y preguntándose si en realidad deberían perseguirlo. Y consiguen, ya sabes, la paradoja de la elección versus sólo decir, oye, esto es lo que quiero que hagas. Es por eso que debes hacer es presionar tu click aquí para ir al siguiente paso, ¿verdad? Entonces eso va a estar aquí para las cuatro etapas de embudo. Y nos vemos en el siguiente. 29. Conversiones Macro/micro: En este video, vamos a repasar macro y micro conversión. Esto es algo que normalmente vas a ver en el espacio de comercio electrónico en línea donde tienes como una tienda de comercio electrónico que tiene algún tipo de producto que están vendiendo. Y cuando los usuarios están interactuando con ese sitio web en particular, esa tienda de comercio electrónico, hay varias macro y micro conversiones diferentes que están sucediendo a través todo ese proceso de compra por el que atraviesa ese ese usuario para realmente seguir adelante el sitio web y en realidad comprar un producto. Entonces vamos a caminar con la macro y las micro conversiones están en esta lección en particular. Entonces sigamos adelante y saltemos aquí. De acuerdo, entonces veamos las macroconversiones y micro. Las conversiones macro son las acciones que un usuario puede realizar que representan el objetivo principal de un sitio web. Y así solo piénsalo. Una página web que tiene cualquier tipo de producto a la venta. El objetivo final es conseguir que ese usuario compre el producto. Y así esa es la última conversión macro. Y a lo largo de ese proceso, hay diferentes micro conversiones que entran ahí en el camino. Por lo que las micro conversiones son acciones que realiza un usuario que son críticas en el camino hacia llegar a una conversión macro. Al igual que cuáles son los pasos que un individuo está tomando usuario para realmente completar el proceso de compra y realmente hacer una compra. Y como acabamos de discutir con un sitio web de comercio electrónico, esto va a ser donde, digamos que alguien está en un sitio web de comercio electrónico, van a diferentes páginas que dicen, por ejemplo, alguien se dirige al página del producto. Se puede ver aquí en la primera imagen allí en la página del producto. Y como puedes ver ahí en la parte inferior de esa página, ahí está la cantidad, hay un precio, hay una serie de cajas, y luego los tienen la capacidad ahí de Agregar al Carrito. Entonces cuando presionan ese botón ahí, agregan al carrito, eso es una micro conversión. Les está llevando al siguiente paso del proceso. Y como se puede ver aquí en la segunda página, se puede ver en la muy superior de su carrito. Por lo que han agregado un producto al carrito. Y luego la final ahí en la parte inferior, Ahí es donde están, la página de caja. Y lo vas a ver en muchas áreas diferentes, sin embargo, donde en su mayoría se ve donde realmente se ven los diferentes cubos reales de audiencias que se crean a partir de cada una de estas diferentes interacciones está dentro de Facebook. Porque lo que puedes hacer es configurar un píxel de seguimiento con la plataforma de Facebook. Y luego podrás poner un código en cada página individual que te permita saber cuántas personas han agregado el producto al carrito, ¿cuántas personas lo han agregado a una lista de deseos? Cuántas personas han ido realmente a la página de pago. Y luego podrás mostrar a esos individuos el tipo específico de anuncios. Hazle saber, oye, noté que agregaste productos XYZ, carros, pero no terminaste. Aquí te damos un 10% de descuento adicional para completar tu compra. Esto es muy poderoso aquí porque permite crear estos diferentes cubos de audiencias y ver dónde se está cayendo la gente en el embudo de ventas, donde se están cayendo y haciendo la compra. Si estás viendo a mucha gente que está sumando al carrito pero no completando, entonces eso significa que hay algo ahí que hay que arreglar hasta donde ayudarlos a través de todo ese proceso de realmente completar la compra, ¿verdad? Porque quieres que esto sea tan fácil, tan suave y sin fricción para que el usuario realmente pase por todo el proceso de compra del producto. Pero sigue siendo genial que puedas retardar a personas que han tenido esas micro conversiones y acaban de aterrizar en la página de caja y que incompletas las mayores las que han agregado el producto al auto. Y hay muchas cosas diferentes que en realidad puedes crear en cuanto los criterios de micro conversión que también puedes agregar a esto. Pero esto va a ser bastante común aquí para una tienda de comercio electrónico, alguien aterriza en la página del producto. Eso va a ser un cubo de público. Alguien agrega un producto al carrito otro cubo de público ahí. Y luego los que están en la página de la caja y por la razón que sea, distraían que al poner la información de su tarjeta de crédito, ese va a ser el público real más caliente ahí porque se llega a reapuntarlos, haciéndoles saber que no terminaron su compra. Y puedes incentivarlos dándoles cierta promoción, ya sabes, 10% de descuento. Entonces, en última instancia, entender que la macro conversión es la compra, ¿no? Queremos obtener la compra real se completó. Esa es una conversión macro real. Y entonces la micro convergencia son los pasos que se dan para realmente completar esa macro conversión. Entonces eso va a ser aquí para conversiones macro y micro. Y nos vemos en el siguiente. 30. Stages de la sofisticación del mercado: En este video, vamos a repasar las etapas de la sofisticación del mercado. Es realmente importante para ti como diseñador de UX UI entender dónde están los diferentes usuarios en el proceso de compra real. Hablamos del viaje del cliente, hablamos de los embudos de ventas y con las etapas de sofisticación del mercado, Esto es lo que te va a ayudar a entender cómo escribir el tipo correcto de copia si eso es algo que también vas para estar manejando. Pero también es bueno que entres esto para que sepas dónde están los individuos tan lejos como los usuarios, en cuanto a la conciencia de ese producto en particular, quieres tener una comprensión de dónde se encuentra mentalmente el usuario. Han visto diferentes productos en cuanto a ellos viendo otros productos en el mercado que son similares, que tienen características similares, que tienen características diferentes y funcionalidades similares. Por lo que es importante que entiendas las diferentes etapas de la sofisticación del mercado y qué significa en última instancia la sofisticación del mercado. Entonces sigamos adelante y saltemos justo aquí. Entonces sofisticación de mercado es un término usado para describir el nivel de conciencia del mercado, ¿de acuerdo? Sea cual sea el mercado en el que te estás metiendo, digamos que estás buscando diseñar una app o estás trabajando con la empresa que está diseñando una app para la meditación. Quieres poder entender cuántas aplicaciones de meditación diferentes hay por ahí. ¿ Qué están haciendo? ¿ Cuánto cuesta su mercadotecnia? ¿ Están presentando en lo que se clasifica su mensajería? Entonces vamos a entrar en las diferentes etapas aquí en un momento, pero quiero darles realmente ese panorama general general de qué se trata la sofisticación del mercado. Y este fue un término que fue acuñado por primera vez por un peso pesado de copywriting, Uno de los mejores para vivir y hacerlo usando Schwartz en su libro rompedor, publicidad de avance, que te recomiendo que revises si quieres también obtener una comprensión de los principios de derechos de autor. Y entonces la pregunta clave a hacer aquí es, ¿de cuántos productos o servicios similares se ha dicho antes a su mercado? Mencioné la app de meditación. Entonces quieres ver cuántas otras apps de meditación hay por ahí. ¿ Cuál es su mensajería? ¿ Cómo se están presentando? ¿ Cuál es la saturación del mercado? ¿ Hay muchos productos haciendo y diciendo lo mismo? ¿ Cómo se diferencian los mismos? Entonces eso es lo que realmente quieres saber en cuanto a la sofisticación del mercado. Y entonces, ahora sigamos adelante y saltemos a las diferentes etapas. Por lo que hay cinco etapas diferentes de sofisticación del mercado. la primera etapa es donde el mercado es completamente inconsciente. No tienen conocimiento de un producto en particular, ¿verdad? Digamos, en cuanto a las apps de meditación, no sé cuál fue la primera en salir. No obstante, cuando salió esa primera meditación, esto era algo que era bastante fácil de vender porque era nuevo y el mercado simplemente desconocerá completamente que este tipo de cosas existían. Por lo que fue bastante fácil vender eso al mercado. Y luego número dos, en cuanto a las etapas de sofisticación del mercado, Aquí es donde prospect siente que tienen un problema, pero no saben que hay una solución, ¿verdad? Por lo que quieren tal vez algún tipo de servicio de meditación guiada por ahí fuera que sea capaz de meterlos en un estado de meditación profunda. Lluvia. Y no hay nada ahí fuera en el mercado. Eso es hasta que creo que el headspace entró y realmente dominaron el mercado hasta la meditación guiada. Entonces número dos, aquí es donde saben que tienen un problema, pero realmente no saben que hay una solución ahí fuera. Y luego el número tres, aquí es donde su solución consciente. Entonces el prospecto sabe exactamente lo que quieren. No obstante, no saben que, ya sabes, tu producto es capaz de proporcionarles eso para que sepan exactamente lo que buscan. Simplemente no saben acerca de la aplicación de meditación XYZ. Y luego está la etapa número cuatro. Aquí es donde el usuario sabe que hay un producto por ahí, pero no saben si tu producto es el adecuado para ellos. Y así tiene que haber alguna diferenciación ahí. Tiene que haber algo convincente, algunos persuadiendo en cuanto a lo que su producto hace diferente al resto de la competencia. Y así es fácil de vender, ¿verdad? Oye, tenemos una app de meditación, etapa dos. Entienden que tienen este problema. Y para que puedas salirte con la tuya con solo decir, oye, este es el problema que tienes y así es como podemos resolverlo. Número tres, realmente necesitas poder diferenciarte y proporcionar una solución única. Y luego número cuatro, aquí es donde realmente necesitas diferenciar tu producto y hacer saber a la gente que, oye, escucha, existo. Por eso estamos mejor. Es así como hacemos las cosas diferentes. Es por eso que nuestra app es mejor que el resto de la competencia, ¿no? Por lo que te das cuenta de que en cada etapa, el comprador se vuelve más sofisticado. Se vuelven más comprensivos y conociendo las diferentes opciones que tienen en el mercado, ¿no? Y luego establece cinco, Aquí es donde más están conscientes, el usuario, el prospecto, no necesitan ser vendidos en todas estas diferentes cosas locas únicas como, hey, mi app hace esto por app hace eso. Simplemente quieren saber el trato definitivo. Sólo quieren saber, oye, ¿cuál es la línea de fondo aquí, verdad? Entonces a medida que vas bajando por las diferentes etapas, el comprador real, el usuario, se vuelve más sofisticado. Entonces la mensajería tiene que cambiar y hay que mirar lo que es la competencia actualmente por ahí diciendo y haciendo, y es llevárselos a los usuarios. Y así podrás ver qué etapa del mercado en cuanto a la sofisticación del mercado que, esa base de usuarios está en, en las etapas iniciales, las etapas 12, puedes salirte con la tuya con solo decir, hey , tenemos una nueva app de meditación. Aplicación de meditación del cabello te ayuda a meditar mejor. Algo que es muy sencillo porque va a ser nuevo en el mercado. Número tres, cuando te das cuenta de que el mercado ha sido lo suficientemente sofisticado hasta el punto donde tienes que venir con una solución que sea única, que sea diferente. Esto es en la etapa que requiere de un mecanismo único. Necesitas que la gente sepa por eso esta app es única y diferente. Esta es la forma única en que funciona. Esta es una forma única en la que realmente funciona y por qué es diferente a la competencia. Entonces esto va a estar aquí por la sofisticación del mercado. Definitivamente te recomiendo que hagas un poco más de investigación sobre esto si quieres saber más y realmente entender que la sofisticación del mercado va a jugar un papel vital cuando estás creando tus diseños. Porque quieres entender qué nivel de sofisticación es ese mercado. Anuncios, ¿verdad? Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 31. Embudo de la generación principal: En este video, vamos a repasar el embudo de Generación de Plomo. Este es un embudo que se utiliza muy comúnmente en el espacio de marketing digital para generar leads y realmente cualquier tipo de entorno de negocios cuando eres un negocio que está haciendo generación de leads online, eso es hacer publicidad en línea, normalmente vas a tener un embudo de generación de leads en cualquier etapa dada de tu viaje de clientes porque quieres poder generar leads a un costo muy bajo y luego poder nutrir esos leads y llevarlos a través de en realidad convirtiéndose en un cliente pagador, ¿verdad? Porque muchas veces puedes generar una ventaja solo por poder regalar algo gratis y luego llevarlos por esa experiencia. Los siguientes pasos en el embudo y poder conseguir que realmente se conviertan en un cliente doloroso en una cantidad baja. Digamos que algo así como un cable de viaje en eso es algo muy, muy pequeño y luego poder conseguir que eventualmente por algo que va a estar a un precio más alto, un poco más boleto alto. Entonces sigamos adelante y saltemos al embudo de la Generación de Plomo. Y así a un nivel muy alto, el embudo de Generación de Plomo es esencialmente un enfoque sistemático para generar leads para un producto o servicio específico. Toda la intención aquí es embutir al público objetivo a través varias etapas diferentes hasta que decidan ingresar su información. Aquí es donde vamos a tener aquí la fórmula Ada, el marco de conciencia, intereses, decisión y acción. Queremos poder meter a la gente en la parte superior del embudo para que se tomen conciencia, para que se interesen, tomen una decisión y tomen una acción. Y típicamente el embudo de generación de plomo tiene tres pasos diferentes. Tienes un anuncio, digamos en Facebook o Google, y tiene algún tipo de oferta o tal vez algún tipo de tramposo, tramposo o ebook, o algún tipo de recurso gratuito que sea valioso para ese usuario individual, ¿verdad? Y luego entran ahí a la página de aterrizaje real y entregan su información. Y luego hay una página de agradecimiento que les permite saber, oye, tu información se te está enviando vía correo electrónico o puedes descargar un aquí. Y entonces muy importante aquí que la página de agradecimiento tiene los siguientes pasos. ¿ Cuáles son los próximos pasos para que hagan? Puedes invitarlos, digamos a tu sitio web para leer algunas publicaciones de blog que tal vez te gusten en Facebook o lo que sea que sea. La página de agradecimiento realmente te permite conseguir que den el siguiente paso en tu proceso. Obviamente deberías tenerlos automáticamente configurados en un embudo diferente después aterricen en la página de agradecimiento porque eso debería desencadenar otra automatización que te permita saber, Oye, esta persona ya ha descargado esta oferta aquí. Son perspectiva cálida y así entran en la siguiente etapa. Y así vamos a recoger estos tres pasos de embudo un poco más allá. Entonces el primer paso aquí va a ser un anuncio, ¿verdad? Aquí es donde van a ver un anuncio de Facebook, tal vez un anuncio de Google o cualquier plataforma que estés usando. Se quiere dar algún tipo de anuncio que les esté haciendo saber de qué se trata la oferta, tal vez haciéndoles saber, oye, puedes descargar esto. Todo lo que tienes que hacer es poner tu información o simplemente algo súper simple, ¿verdad? También puedes tener como una oferta de descuento a tarifas bajas, tal vez, tal vez 75% de descuento lo que sea, entonces estarían en lo correcto, aquí es donde es el primero de contacto y quieres que se den cuenta de que tienes algo para que reciban, ¿verdad? Y tiene que ser muy alto valor percibido. Si ahí no hay valor percibido, entonces va a ser difícil para ti conseguir que esos usuarios introduzcan su información porque eso es lo que estás en última instancia tras su nombre, su dirección de correo electrónico en cualquier otra información de contacto. Y entonces la segunda parte del embudo de regeneración es la página de aterrizaje y aquí es donde califica al prospecto. Les dices exactamente lo que van a conseguir. Se explica la oferta. Les permite saber que, oye, vas a conseguir x, y, y z Todo lo que necesitas hacer es poner tu nombre y correo electrónico o cualquier otra información ahí. Y podrán descargarlo y conseguirlo ahí mismo. Y entonces y luego la etapa final aquí es la página de agradecimiento. Aquí es donde como mencioné, les estás diciendo cuáles son los próximos pasos. En muchas veces esto se usa en negocios de ladrillo y mortero donde quiropráctico dentista, solo para darte algunos ejemplos aquí. Pero esto se puede utilizar en cualquier tipo de industria. Pero muchas veces esto se usa como dije, y el espacio de ladrillo y mortero donde el individuo aterriza en una página de agradecimiento, y pueden llamar para reservar una cita o pueden agendar una cita ahí mismo y luego en el agradecimiento -Tu página. Por lo que este es un resumen rápido aquí de un embudo de generación de plomo de tres pasos. Entonces ahora echemos un vistazo a un embudo real de tres pasos aquí. Este embudo de aquí es para un implante dental. Se puede ver aquí que tenemos un anuncio de Facebook que está hablando con ese mercado en particular. Una vez que hagan clic en el anuncio, los va a llevar a una página de destino, y luego esa página de destino califica a ese individuo. Hágale saber lo que están recibiendo y les permita ingresar su información y reservar la cita. Y luego finalmente aquí tenemos la página de Gracias que le permite saber, hey, felicitaciones, se ha recibido su información. Aquí puedes tener un par de opciones para trabajar. Ya sea puedes llamar o puedes usar el código y horario en línea, ¿verdad? Entonces así es como se ve a un nivel muy alto aquí. Siempre vas a tener tres pasos en su mayor parte, a menos que estés haciendo algún tipo de oferta única o tipo único de situación, ¿verdad? Siempre va a ser donde haya un anuncio, hay una página de aterrizaje, y luego hay una página de agradecimiento. De acuerdo, entonces eso va a estar aquí para el embudo de regeneración, y nos vemos en el siguiente. 32. Embudo de ventas digitales: En este video, vamos a repasar un embudo digital de venta de productos. Ahora esto va a ser mucho diferente al embudo de regeneración real porque esto es obviamente donde tenemos un producto y estamos, estamos buscando gente para realmente comprar algo. Y aquí hay algunas variaciones diferentes. Esto va a ser en última instancia donde queremos que alguien haga una compra. Y muchas veces va a ser una compra de bajo costo porque queremos conseguirlos como comprador y podemos darles como una oferta sin cerebro, algo típicamente entre veintisiete, doscientos cincuenta dólares para que podamos subvenderlos a productos adicionales de mayor costo por el camino. De acuerdo, así que sigamos adelante y saltemos al embudo de venta de productos digitales. Por lo que mencioné que aquí hay diferentes variaciones. Y esto puede ser algo donde pueda ser directo a una oferta de producto o a una oferta de legión con una oferta de una sola vez, upsell. Por lo que tendrás diferentes variaciones. Podrás generar un lead derecho, con obtener la información del cliente. Pero entonces también ten una oferta de una sola vez que sea como, Hey, nunca volverás a ver esta oferta. Obtienes esta oferta por un precio bajo de una vez de 90% de descuento, ya sabes, 997. Algo súper único y tuvo que ser una oferta de una sola vez que nunca van a poder volver a conseguir, ¿verdad? Se suma a la exclusividad después de haber ingresado su información justo a través del embudo ahí. Y este embudo en particular tiene cuatro pasos diferentes. número uno tiene el anuncio, y luego el número dos, tiene la página de aterrizaje página de ventas de slash. Por lo que podría o ser una página de aterrizaje que solo está diciéndole a la gente, oye, poniendo tu información aquí y luego después de que metan su información, van a ser llevados a una pagina de ofertas de una vez que tiene algo que pueden comprar en un muy bajo costo típicamente. Y va a estar ahí sólo para que compren ahí mismo y luego no pueden comprarlo en un momento posterior. Y luego la otra variación de eso es donde solo tienes una página de ventas y son capaces de simplemente comprar el producto ahí mismo. Y luego, y luego el número tres, correcto, como mencioné, oferta de una sola vez o una página de captura de plomo, y luego tienes la página de Gracias en el escenario por ahí. Entonces sigamos adelante y caminemos por los escalones con un poco más de detalle. Entonces primer paso aquí, tenemos el anuncio que está mostrando la oferta en particular, que está mostrando el tramposo, que está mostrando el PDF descargar el valioso recurso que van a conseguir. Y más a menudo que no, va a ser como una oferta de descuento o va a ser algo donde están ofreciendo algo gratis y luego haciendo una oferta de una sola vez que va a estar a la venta. Y así la siguiente etapa, tenemos la página de aterrizaje o la página de ventas. Esto va a calificar al prospecto. Si es una página de aterrizaje, esto realmente va a vender la oferta explicó la oferta si es una página de ventas para conseguir que realmente compren. Y vamos a caminar por un ejemplo, embudo de venta de productos digitales aquí en un momento. Y luego en el escenario tres, puedes tener típicamente como una oferta de una sola vez aquí, si tienes una página de destino donde tu intención es simplemente capturar la información, o si tienes una página de ventas, entonces no necesitarás la única vez oferta porque la página de ventas está ahí para conseguir realmente en la compra hecha bien por el usuario real. Y luego tenemos la página de Gracias. Aquí es donde le estás contando al prospecto y los próximos pasos, diciéndoles cómo pueden aprender más sobre tus otros productos y servicios, ¿verdad? Y así ahora veamos un ejemplo embudo de venta de productos digitales aquí. Entonces tienes el anuncio de Facebook justo aquí, y luego hacen clic en ese anuncio de Facebook y se lo lleva a una página de aterrizaje. Will realmente, esta es una página de ventas y les muestra exactamente lo que van a conseguir. Y luego tienen un botón Comprar ahora ahí mismo por $27. Recuerde que esto es algo que va a ser típicamente a un costo muy bajo porque aquí no hay interacción humana, necesita ser menor de $50. Entonces aquí es donde puedes conseguir que la gente compre cosas que van a ser no-cerebros, ¿verdad? Tipo de ofertas que no tienes que tener ninguna interacción con las personas. Es que, Hey, esta es la oferta. Aquí tienes una página de ventas y puedes comprarla ahí mismo. Y luego, y luego la siguiente etapa, lo que hace es captar la información principal. Esto es un doble whammy aquí, para que poniendo su información, y luego después de esto, van al paso dos. Y entonces aquí es donde realmente ponen en su información de su tarjeta de crédito. Y luego tienen una oferta de una sola vez. Ahí se puede ver en la última diapositiva. Ahí se puede ver en la última imagen, tienen una oferta de una sola vez. Están resaltados en amarillo y son 7 dólares adicionales. Es así como puedes agregar esas ofertas de un solo tiempo en la página de pago real donde lo haces muy simple, muy fácil para el usuario real comprar realmente una oferta de una sola vez. Entonces como mencioné, hay diferentes variaciones. Puedes hacer un embudo de ventas de generación de leads con la oferta de un solo tiempo, o puedes hacer un producto digital de ventas fue por aquí donde tienes una oferta exacta que estás lanzando, que estás promocionando, y luego llevarlos a la página de ventas para realmente comprar el producto. Y puedes recolectar su correo electrónico y información de su tarjeta de crédito después de que realmente hayan citado para realizar la compra. Por lo que va a estar aquí para el embudo de venta de productos digitales. Y nos vemos en el siguiente. 33. 7 principios de influencia: En este video, vamos a repasar los siete principios de influencia. Ahora esto es algo que realmente quieres entender como diseñador de UX. Porque cuando estás diseñando diferentes productos, diferentes aplicaciones, diferentes sitios web, quieres tener una comprensión fundamental de la psicología conductual. Y de esto se trata realmente influenciado porque hay que entender lo diferente sucede, los diferentes factores que entran en juego cuando los individuos buscan tomar una decisión, hacer una compra o moverse junto al siguiente paso del embudo de ventas, ¿verdad? Y entender fundamentalmente las diferentes cosas que puedes hacer para que la gente coma o compre un producto o para pasar a la siguiente etapa, ¿verdad? Entonces sigamos adelante y saltemos a los siete principios de influencia. Entonces aquí está la cosa. hora de tomar una decisión, ya sabes, cuanto a comprar un producto, comprar un servicio, sea lo que sea, ¿verdad? Sería bueno pensar que la gente considera toda la información disponible. Pasamos por este proceso lógico, nos aseguramos de que miramos múltiples varianzas del producto. Nos fijamos en los competidores. Bueno, aquí está la cosa que, que rara vez sucede. Normalmente nos basamos en atajos dentro nuestra mente que gobiernan la forma en que tomamos decisiones, bien, en nuestras capacidades de toma de decisiones. Y así estos siete principios de influencia realmente permiten a la gente tomar decisiones basadas en cierta información y criterios en lugar de usar realmente su propia mente lógica. Porque pensar y usar tu propia mente lógica requiere trabajo. Y así queremos algo que nos pueda atajar para que tomemos una decisión. Y así no tenemos que pensar tanto. Entonces es una transición agradable y simple y fácil a poner su nombre y a una página de aterrizaje en particular o realmente comprar un producto, sea lo que sea, donde no hay fricción porque hemos sido influenciados por uno de estos siete principio diferente. La publicidad está configurada para que te sientas de cierta manera sobre ti mismo y sobre el producto o el servicio y la marca también. Y creo que lo mencioné en una de las otras lecciones. Eso es todo lo que las decisiones de compra se toman emocionalmente en justificado lógicamente. Nos vamos a sentar ahí y vamos a convencernos o incluso tratar de convencer a los demás de que pasamos por un proceso lógico. Seguimos la fórmula paso a paso para asegurarnos de que estamos tomando la mejor decisión general la mayoría del tiempo. Estamos tomando decisiones basadas en una moción y qué nos gusta admitirla o incluso conocerla, ¿verdad? Entonces nuestras emociones nos están guiando. Nos están permitiendo hacer ciertas compras, tomar ciertas acciones. Y luego después de que se hagan esos, entonces volvemos y justificamos lógicamente con nosotros mismos y con los demás cuanto a por qué tenía más sentido que tomáramos esa acción para comprar ese producto. Entonces sigamos adelante y saltemos al principio real de Siete. Entonces el principio número uno aquí es prueba social. Entonces estos son testimonios. Estos son esencialmente algún tipo de estudio de caso, cualquier cosa que permita que otros sepan que alguien más u otras personas han tenido éxito o han usado como producto, desservicio, cualquiera que sea, y hubieran podido conseguir un buen resultado de ello. Y este es uno de esos atajos, ¿verdad? Entonces. Buen ejemplo de esto es digamos que estás por ahí alrededor de la ciudad, estás buscando un nuevo restaurante. Bueno, si vas y miras un restaurante que tiene mucha gente frente a otro restaurante que está bastante vacío. Tu más a menudo que no vas a ir al restaurante que ha permitido a más gente porque eso te está dando pruebas sociales de que otras personas les gustó este restaurante y que es popular. Y como a otras personas les gusta este restaurante y está estallando, entonces también me va a gustar. Versus cuando el restaurante del otro lado está vacío, eso va a ser una indicación de que no sea tan bueno, no sea muy popular. Porque si fuera popular eran muy buenos, entonces habrá otras personas allí también. Lo mismo cuando vas a como una página de ventas y buscas dentro para comprar un producto, miras en un by, ya sabes, cualquiera que sea. Esas páginas de ventas particulares siempre van a tener testimonios de otras personas contando su historia o hablando de los resultados que también pudieron lograr. Y así eso te da una gran indicación de que hey, este producto funciona para otra persona. Está obligado a trabajar para mí también. Y luego el número dos, tenemos el principio del gusto. Y para entender aquí este principio, a gente muy sencilla compran a aquellos que les gustan, que saben, que confían. Y a pesar de que la calidad puede no ser tan grande, piensas en alguien que es como un influencer o alguien que es conocido en su mercado particular. Pueden dar algún tipo de promoción o anuncio para un producto y comido aunque de ese producto puede no ser tan grande. Todavía va a conseguir que la gente les compre porque tienen el factor del gusto. Tienen una audiencia de fans de confianza que los miran, que como ellos, ¿verdad? Y así esencialmente lo que sea que estén recomendando, más a menudo no son independientemente de la calidad real del producto que la gente va a comprar porque les gustó ese individuo. Y entonces el principio número tres es la autoridad. Sólo piensa en si estás al costado de la carretera o si estás conduciendo por un bien ocupado. Y tienes como una parada de 4 vías o tienes un montón de tráfico y tienes a alguien que solo salta del auto o salta desde un costado de la carretera o lo que sea, simplemente entran en escena y la ponen en una construcción chalecos y tienen una señal que dice lento y se detienen y empiezan a dirigir el tráfico más después de la novela, lo que va a pasar ahí es que la gente va a empezar a seguir lo que ese individuo está haciendo y está diciendo, si es guiando a la gente de cierta manera y lo está dirigiendo y tiene puesto un chaleco y tiene el letrero y todo lo que automáticamente los pone en una posición autorizada, ¿verdad? Porque tienen los makings, las miradas de alguien que realmente estaría dirigiendo el tráfico, pesar de que podría ser alguien de justo enfrente o alguien de cualquier lugar. Y solo piensa en policías también. Cuando los policías tienen el uniforme bajo la lluvia, están jugando esta parte de que ellos son la ley y cuando ahora están donde en eso entonces son simplemente persona regular, normal. Entonces la autoridad es algo que se asume, ¿verdad? Asume autoridad. Y cuando puedas asumir autoridad en tus anuncios, en tu copia, en tu mensajería, que hey, somos los mejores. Nosotros somos el top y eso va a jugar un gran factor. Y te estás posicionando como eres el top o eres el número uno en tu mercado, ¿verdad? Porque la autoridad se asume y la asumes por cómo te posicionas, cómo te presentas esa mensajería diferente que tienes alrededor de la marca. Y entonces el principio número cuatro es la reciprocidad. Ahora bien, esto es algo que aquí es sumamente valioso. Solo piensa en si estás en EU y entras como una tienda Costco y vas ahí y cada esquina más o menos vas a ver diferentes stands que te están regalando comida gratis. Tienen diferentes muestras. Tienen cosas diferentes que puedes probar que puedes probar antes de comprar. Y así muchas veces lo que pasa es que cuando uno entra ahí y estás recibiendo estas muestras gratis, vas a sentir algún tipo de obligación de comprar realmente el producto porque estás consiguiendo algo gratis, ¿verdad? Y entonces esto es algo que es innato, que es psicología conductual sq, donde está arraigado en nosotros, ¿verdad? Siempre estamos sintiendo que queremos devolver porque tenemos algo gratis. Automáticamente nos vamos a sentir obligados a corresponder de nuevo. Es por eso que mucho tiempo tienes el ebook gratis o la hoja de tramposos gratis o algo que es gratis que estás recibiendo en una descarga en particular, la otra persona se va a sentir obligada a querer tener algo a cambio y te devolvemos algo porque han podido conseguir algo gratis, ¿verdad? Por lo que la reciprocidad y el principio extremadamente poderoso también. Y luego el número cinco, tenemos consistencia. Este es uno genial aquí para embudo de ventas. Entonces cuando estás caminando gente por diferentes pasos y caminamos por uno de los diversos embudos de venta para productos digitales en el, una de las otras lecciones. Y como recuerdan, pasamos por donde tenían el anuncio, hicieron clic en que la siguiente página los llevó a la página de inicio con una página de ventas. Entonces entonces hicieron clic en el botón ahí y luego fueron llevados a otra página para llenar su información. Y luego fueron llevados a otra página para realmente llenar la información de su tarjeta de crédito y hacer la compra. Esas todas pequeñas micro conversiones en micro pasos. Y es el factor de consistencia. Tener que den un montón de pequeños pasos, va a llevar a que hagan una gran compra o tomen una gran acción por el camino porque los estás guiando y es casi como un juego. Tienen un montón de pequeños pasos diferentes que están dando. Y no parece que sea algo enorme o algo masivo son grandes porque solo piensa en si tenían todo eso, todo en una sola página donde tenían la página de ventas. En la página de ventas, necesitabas poner tu información, que necesitas poner la información de tu tarjeta de crédito, y luego necesitabas seleccionar una opción en particular. Todo eso sería demasiado y tanto encendido, en una sola página. Y parecería un montón de cosas para el usuario. Por eso lo desglosas en esos pequeños pasos para que tengas el factor de consistencia. Y parece que solo están dando pequeños pasos, escriben pequeñas acciones, y luego finalmente van a llegar a la tierra prometida. Entonces tenemos aquí el principio número seis, que es la escasez también es extremadamente poderoso aquí. Aquí es donde puedes tener como por ejemplo, spots limitados disponibles en, digamos un lanzamiento beta en particular o un producto en particular, sea lo que sea. Muchas veces, esto se usa muy bien y como el negocio de ladrillos y morteros, donde se tiene un descuento específico para las primeras diez personas entren y se hagan un procedimiento específico. E incluso para las tiendas de comercio electrónico donde tengas como para los próximos 30 días, consigue un 20% de descuento todo bien por 30 días, pudiendo tener esa escasez, haciendo saber a la gente que hay cantidad limitada, disponibilidad limitada, el precio va a cambiar y subir y la próxima vez si no tomas acción ahora, tan escasez, extremadamente potente. Y luego finalmente aquí, número siete, tenemos curiosidad. Esto también es algo que hará que la gente realmente quiera aprender más sobre. Tú, aprendes más sobre el producto, la marca, lo que sea que sea es que estás promocionando o tratando de ponerte frente a la gente. El factor de curiosidad de no poder darles toda la información, ¿verdad? Toda la información por adelantado y dividirla en pedacitos y piezas les permite mantener la curiosidad en marcha y no les permite aburrirse. Simplemente piensa en esto desde un contexto de relación donde si tú, ya sabes, en el primer día, le dices a la otra persona que sabes todo sobre ti, toda tu historia de vida, todo sobre ti hasta tu vida personal, tu vida laboral, tu familia, todo bien? Ya no hay más emoción ahí porque lo que hay que esperar primero es si solo das pedacitos y piezas y te quedas un poquito tan lejos como misterioso y poder tener esa curiosidad en esa otra persona justo entonces es va a ser mucha más sinergia , mucha, más química, y va a ser mucho más emocionante para esa otra persona Y para ti también, porque tienes algo que esperar y no solo estás dando todo todo en una vez. Entonces eso va a estar aquí por los siete principios de influencia. Y nos vemos en el siguiente. 34. Triggers de influencia basados en la edad: En este video, vamos a repasar los desencadenantes de influencia basados en la edad. Y entonces esto es algo que es importante para nosotros entender porque cuando estamos creando personas de usuario, dolor de usuario apunta en todos los diferentes avatares de persona. Queremos poder entender los diferentes factores de edad y los diferentes intereses y diferentes valores e ingresos que todos van a entrar en juego cuando estamos desarrollando un determinado producto, sitio web, apps, sea lo que sea, ¿verdad? Por lo que tener una comprensión de cómo usar disparadores de influencia de HBase adecuadamente nos va a permitir tener una tremenda cantidad de éxito con los productos porque sabemos cómo ser capaces de obtener el tipo correcto de mensajería, branding e influencia y diversión del mercado adecuado. Entonces sigamos adelante y saltemos a los desencadenantes influenciados basados en la edad. Entonces aquí está la cosa. Cuando estamos comercializando a diferentes grupos de edad. Diferentes grupos de edad van a tener diferentes intereses, diferentes valores, diferentes ingresos, y diferentes patrones de compra, ¿no? Algunos van a estar en el lote de Facebook, algunos van a estar tal vez, tal vez en LinkedIn. Y así en cuanto a las generaciones, tenemos los baby boomers que nacen entre 19461964. Entonces tenemos el ejercicio de generación, que nacen entre 19651980. Y entonces tenemos a los millennials, que son los individuos que nacen entre 19812001. Y así es importante entender estas diferentes demografías, escribir estos diferentes grupos de edad para que podamos tener el tipo correcto de branding de mensajería, y lo estamos poniendo frente a ese grupo en particular. Vamos a entrar en cada uno de estos y mucho más detalle. Entonces cuando remarketing a Gen Xers, Esto es algo que necesitamos entender en cuanto a su amor por la tecnología. Y lo siguiente grande con los Gen Xers, normalmente van a estar más preocupados por brindar comodidad a su familia, seguridad familiar, seguridad familiar frente a ellos mantenerse al día con los Joneses y tener el último objeto brillante. Ellos quieren asegurarse de que su familia va a estar segura, para tener comodidad, tienen seguridad. Y así con estos tipos, quieres entender que no les gusta que les digan qué hacer. Quieren poder tomar sus propias decisiones. Ellos quieren ser los que realmente están haciendo todas las determinaciones sobre si compran o no algo. No quieren que los empujen a una venta. No quieren conseguir a alguien que sólo esté siendo vendedora o persuadirla de una manera muy ineficaz, ¿verdad? Ellos quieren sentirse como, Hey, estoy tomando esta decisión y es mi decisión sola, ¿verdad? No me están obligando a nada. De acuerdo, entonces ahora hablemos de marketing a los baby boomers. Entonces esta va a ser la generación más antigua. Estos van a ser típicamente individuos. Esa es nuestra lealtad diferentes marcas porque había estado con él por tiempo y son leales mientras esas marcas estén satisfaciendo sus necesidades. Eso es algo que debes entender así como app, siempre y cuando se estén cumpliendo las necesidades para estos individuos, van a tener esa lealtad de marca. A menos que si se les cayó el balón, entonces va a haber algunos problemas ahí y donde ese baby boomer puede estar queriendo buscar una opción alternativa. Porque en última instancia, lo que estos chicos están buscando es que quieren sentir que tienen el producto de la más alta calidad de tu parte. Están consiguiendo el mejor servicio al cliente, el mejor servicio general. Eso es realmente lo que les importa. Y así cuando puedas martillar eso y poder hacerles saber que, oye, escucha, no sólo tenemos un gran producto, sino que tenemos un gran servicio, atención al cliente en el backend, entonces vas a poder ganar estos tipos se acabaron. Y típicamente están en las redes sociales sólo para mantenerse al día con su familia, con sus nietos y sus hijos, ¿verdad? Por lo que siguen ahí. Simplemente tienes que tener tu mensajería sea más en el heno. El producto es de la más alta calidad, pero también el servicio va a ser de primera clase también. Y luego finalmente, tenemos a los Millennials. Estos van a jugar el factor más grande aquí porque esta es la mayoría de la población. Y estos chicos son los que tienen la mayor cantidad de compromiso en las redes sociales. Entonces así como mencioné, estos tipos van a estar mucho en redes sociales y tienden a preferir marketing muy orgánico, lugar de tratar de venderlo en una venta dura o tratar de empujar un producto o un servicio al frente de ellos, ¿verdad? También quieres hacerlos sentir como si fuera su decisión. Y una de las cosas más grandes aquí es que desde que los millennials están bastante en internet, en redes sociales bastante. Y están posando con sus amigos y familiares y están publicando diferente material de feed de noticias, contenido diferente, material diferente en otras plataformas diferentes, cualquier momento dado, si hay algún tipo de pequeño problema o pequeño problema estos chicos van a ir a las redes sociales y en realidad a hacerles saber a la gente. Esa cosa es que si tienes una gran marca, gran producto y lo estás haciendo todo bien, entonces vas a tener una buena reputación. No obstante, algo súper pequeño podría realmente detonar a alguien, ¿verdad? Y podrían iniciar un post y podría volverse viral, y no podría tener un desenlace positivo. Tan importante entender que suelen estar preocupados el impacto social y ambiental de ese producto y servicio en particular. Eso es algo que también hay que tomar en consideración. Y también equiparan la experiencia de compra con entretenimiento porque por eso muchas veces cuando estás en Facebook, por ejemplo, no estás en Facebook para hacer una compra, ya sabes, en Facebook para comprar cosas, ¿verdad? No obstante, estás ahí, ves anuncios diferentes, obtienes interacción de compromiso diferente. Tienes diferentes videos que podrías ver que normalmente llevan a que se venda un producto real, ¿verdad? Pero es algo donde tienen una experiencia única. Y así eso es algo que también hay que tomar en consideración. No obstante, los Millennials, Estos chicos van a ser el mayor objetivo por su amplio uso de las redes sociales. Eso va a estar aquí por los desencadenantes de la influencia de la edad. Y nos vemos en el siguiente. 35. Triggers de influencia de género: En este video, vamos a repasar los desencadenantes de influencia basados en el género. Ahora esto es algo también de lo que hay que estar realmente consciente aquí en cuanto a cuando estás comercializando a diferentes individuos o Cuando estás creando un producto que quieres ser ya sea para hombre o mujer, es importante entender que diferente desencadenantes que se van a involucrar con cómo toman su decisión de compra. El detonador de influencia que los hacen querer ir realmente a comprar en términos de varón o hembra, ¿no? Porque el varón va a tener cierto conjunto de criterios, cierto tipo de desencadenantes que les van a influir para querer comprar. Lo mismo para la hembra. Van a tener cierto conjunto de criterios. Quieren sentir de cierta manera. Y cuando eres capaz de comunicar tu mensajería, tu marca a estos individuos, ya sean masculinos o femeninos, la manera correcta en la que les gusta ser comunicados, ¿verdad? Entonces va a llevar a una mayor probabilidad de reales más compras, ¿verdad? Entonces sigamos adelante y saltemos a los desencadenantes de la influencia de género. Entonces lo primero que quieres tener en cuenta aquí es que hay muchos estereotipos por ahí. Y aquí está la cosa. Estos estereotipos son más a menudo que no ciertos. A veces la gente se ofende. A algunas personas les gusta decir: Bueno, oye, y siempre el caso, y no siempre es el caso, ¿verdad? No obstante, la mayoría de las veces, ya sabes, los hombres, a los chicos les va a gustar, ya sabes, autos, deportes, mientras a las mujeres les va a gustar ir de compras, reality tv, ya sabes, color rosa, ¿verdad? Cosas de esa naturaleza que son femeninas. Y así esto es algo que se impregna dentro de la conciencia colectiva y se extiende a todos y se refleja en la publicidad mediática real y en los productos que consumimos. Y así no sólo está arraigada y aspiran a los padres, también lo vemos en los medios de comunicación y todos los diferentes recursos externos que estaban usando las redes sociales para plataformas sociales cuando estamos comprando algo en línea, todo va a esencialmente nos muestran este tipo de estereotipos cuando la mayoría de las veces van a ser verdad. Obviamente, va a haber algunos casos únicos, pero en su mayor parte, son los estereotipos van a ser ciertos para el varón y la hembra. Entonces echemos un vistazo al marketing a los machos, detonadores de influencia. Los hombres están motivados cuando se sienten necesarios. Simplemente piensa en si estás casado o si estás en una relación, o si estás soltera, sea lo que sea, correcto, te sientes muy valorado cuando te necesitan y cuando estás ahí para ayudar a la gente y ayudarla resolver un problema. Muchas veces en las comunicaciones, el otro lado, lo que a la hembra le gusta lo comunica, les gusta hablar con ellos, hablar de sus sentimientos. Y obviamente no hay nada de malo en eso. Sólo hay que entender que de ahí vienen de bajo dinámica. Y tú, como varón escuchando esto, necesitas entender que siempre estás mirando a Comb la situación con una solución a ese problema en particular donde las hembras son más propensas a estar solo queriendo ser escuchadas. No necesariamente buscan una solución porque eso no es realmente lo que los impulsa. No es realmente importante para ellos. Ellos sólo quieren sentirse escuchados y en realidad escuchar. Los hombres buscaban sentir que en realidad estamos resolviendo un problema. Nos gusta sentirnos necesitados. Y ese producto que se nos está comercializando necesita tener el mismo tipo de sensación y mirada, hay un problema que se necesita resolver y el producto es capaz de resolver uno de esos problemas. Un montón de grandes videos de cómo hacer un montón de cosas que muestran cómo hacer x, cómo hacer y para un ejemplo de en el mundo real real real, cómo se está logrando, cómo se está haciendo. Y entonces eso va a ser algo muy importante a la hora de comercializar tamiles. Y debe ser conciso directo al grano, usando unas últimas palabras de poder y realmente demostrándolo con hechos. Y muchas veces en las que se puede, como mencioné, mostrar en realidad en la acción, mostrar, alguien realmente haciéndolo bien. Entonces eso va a ser una de las cosas más importantes aquí. Si piensas en muchos de los infomerciales, DAG se muestra a los hombres en diferentes productos de hombre, diferentes herramientas de hombre. Siempre les muestra realmente usando el producto en tiempo real y en realidad cómo funciona desde un punto de vista funcional, todas las diferentes características y luego también con el uso de diferentes palabras de poder y en realidad tener algunos datos para hacer copias de seguridad reclamo. Entonces eso es realmente en lo que quieres pensar en términos de marketing a los varones. Ahora veamos el marketing a las hembras. Ahora, al vender aquí a audiencias femeninas, quiere inclinar hacia ser descriptivo y muy detallado. Esto es algo que es innato en la mente femenina y con las hembras en general. Y obviamente no hay nada de malo en esto o solo diferencias, ¿verdad? Las hembras tienden a ser mucho más descriptivas. Tienden a usar auditivos. Tienden a usar todos los sentidos diferentes cuando están describiendo sus experiencias que tienden a entrar mucho en detalle. Por lo que también quieres seguir eso para que puedas ser muy descriptivo y muy detallado en los esfuerzos de marketing. Y luego con las hembras quieres usar palabras de software y lo más importante, tu mensaje debe terminar de tal manera que le dé la sensación de que las entiendes y que las apoyarás. Recuerda, con los machos, quieren poder resolver problemas. Están buscando ser esa solución o encontrar una solución a ese problema donde las mujeres buscan ser comprendidas, ser escuchadas y reconocidas y apoyadas. Muy importante ahí para entender las diferencias entre ambos. Y luego siempre proporcionar a las mujeres la capacidad de conectarse y conversar. Entonces es más fácil para ellos poder hacer una compra, ¿no? Quieren esa conexión, esa interacción social. Y entonces eso es lo que hay que buscar en términos de marketing a las mujeres, marketing a los hombres, las diferentes cosas que debes tener en cuenta hasta donde se dispare la influencia de género. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 36. Marketing basado en intereses: En este video, vamos a hablar de marketing basado en intereses. Este es uno de los diferentes tipos de marketing más poderosos que puedes hacer porque es realmente dirigido, su hiper target, hiper específico para un grupo de individuos. Y vamos a caminar por el poder del marketing basado en intereses. Voy a caminar por un par de herramientas que te recomiendo y luego te daré una visión general de cómo puedes usar esta ventaja aquí y cómo puedes hacer investigación inicial para cualquier tipo de producto o sitio web o aplicación que seas en desarrollo. Entonces sigamos adelante y saltemos al marketing basado en intereses. segmentación basada en intereses, como mencioné, es una gran manera de ponerse frente a tu público objetivo Porque es la segmentación precisa. Se llega a apuntar a personas que les gusta una determinada página, que al igual que ciertos productos que tienen algún tipo de afiliación sería cierta marca. Y así sabes que si a alguien le gusta una determinada página o tiene intereses similares a los de tu producto, y entonces lo más probable es que vaya a ser un gran candidato para tu producto también, si le gusta una marca de culturismo en particular, por ejemplo. Y tienes un producto de culturismo, suplementos o aplicación, sea lo que sea, correcto, entonces lo más probable es que te interesen tu producto también. Y entonces las plataformas de redes sociales reúnen tantos datos de los usuarios que tienden a saber ya en qué le interesa a la gente, ¿verdad? A todo el algoritmo de IA le gustaría Facebook, donde puede mirar cuando te estás deteniendo a mirar diferentes videos. Cuando te detienes a mirar diferentes imágenes, cuando te gustan diferentes páginas, cuando tienes diferentes intereses o gustos diferentes en tu perfil real. Y así fue capaz de mirar todo eso, todos tus diferentes interacciones videos, cuánto tiempo veías los videos tipearían de videos hasta que todo esté aprendiendo el tipo de contenido que te gusta, el tipo de cosas que te interesa y estás familiarizado con. Y te va a seguir mostrando el mismo tipo de productos y servicios, ¿verdad? En lo que respecta al anuncio. Entonces es por eso que el marketing basado en intereses es tan poderoso. Y Facebook e Instagram son en realidad los dos más grandes del mercado porque Facebook tiene esa IA de aprendizaje automático donde al igual que mencioné, van a poder mirar a qué sitio vas desde Facebook diría de donde vienes para realmente llevarte a Facebook. Tiene tanta información y tantos datos. Por lo que te permite poder ir y usar una herramienta específica que te voy a mostrar ahora y poder crear diferentes audiencias, diferentes cubos de audiencias, de personas que van a ser tus clientes ideales. De acuerdo, así que veamos ahora las ideas del público de Facebook. Ahora bien, esta es una gran herramienta tanto si estás haciendo marketing en Facebook como si no. Esta es una gran herramienta para mirar y para construir diferentes objetivos de audiencia y demografía, ¿verdad? Porque esto te va a mostrar los diferentes grupos de edad de personas que les gusta una determinada página, que como ciertos derechos, que como cierta marca. Y entonces podrás ver cuál es la edad típica de estos individuos. ¿ El varón o la hembra? ¿ Están usando un dispositivo móvil? ¿ Qué dispositivo móvil? ¿ Están usando? Un teléfono Apple, ¿verdad? ¿ Están usando un teléfono Android? ¿ Y cuál es su ubicación? ¿ Con qué frecuencia compran? ¿ Qué otras páginas les gustan, verdad? Y así realmente puedes construir aquí una audiencia sólida real, basarte en la gente que estás buscando poner frente cuando estás construyendo tu persona de cliente, cuando estás construyendo tu cliente, tu avatar de cliente, Este es un gran lugar para entrar aquí y también mirar cuáles son los grupos de edad, ¿cuáles son los diferentes intereses de la demografía o de los casados? ¿ En qué clasifica el nivel educativo? Toda esta información está fácilmente disponible en la herramienta de Facebook Insights. Por lo que el marketing basado en intereses es probablemente el método de marketing y estrategia de marketing más poderoso para utilizar en el día de hoy en edad, porque se llega a colocar contenidos hiperdirigidos, materiales, anuncios frente al láser audiencias dirigidas, ¿verdad? Entonces eso va a estar aquí para el marketing basado en intereses. Y nos vemos en el siguiente. 37. Comprender el flujo de usuario: Hola ahí. Ahora hablará sobre el flujo de usuarios. Cuando hablamos de storyboards del mapa de viaje del usuario, este descubrimiento se centró en torno entorno que rodea al producto y al usuario en ese momento. El flujo del usuario, sin embargo, su camino interno al que debe someterse el usuario para lograr su objetivo. Flujo de usuario. Es un camino interno sobre el usuario. Del punto a al punto B. El flujo del usuario puede ser de alta o baja fidelidad. No hay requisitos específicos, solo trató de preservar el mismo nivel de detalle. Pantalla. El usuario cuatro también describe la interacción. Muestra conexión entre pantallas, Módulos, elementos, etcétera. Puede usar líneas, punteros, algunas otras formas que muestren estas conexiones. El flujo de usuario muestra la ruta del usuario a través de un producto. Por lo que podrás descubrir que te faltan algunas pantallas en tu modelo mental sobre el producto. Piensas que el proceso de registro requiere de una pantalla, pero al final del día es que descubres que hay dos pantallas o había información que no se podía incluir o mejor para vencer separados. Aquí puedes ver el ejemplo de una aplicación de flujo de usuario para meditación. Se hace con la menor fidelidad. Una cosa se ilustra es la lógica y las flechas que muestran la dirección del usuario. Entonces ves la pantalla de inicio y cargando, entonces una persona debe seleccionar si es usuario existente o no. Y si no existe usuario, va al registro y luego de nuevo a iniciar sesión, va a la pantalla principal. Entonces tenemos algunas pestañas que representan categorías. Y hay dos tipos de secciones, Es categorías y progreso. Y después de seleccionar uno de ellos, el usuario se dirige a la pantalla interior. Al igual que aquí hay una lista de meditaciones. Después puede seleccionar la meditación e ir a previsualizar o a escuchar realmente la meditación, meditación completa. Después recibe una pantalla de éxito. Después va la pantalla de éxito o pop-up y los usuarios se llevan a una pantalla de Progreso, la lista de meditaciones terminadas. Hay otras interacciones así como para la meditación de plano podemos detener la meditación, volver a escuchar las meditaciones similares. Este es el ejemplo de flujo de usuario de baja fidelidad. Muestra en un nivel general, todo el camino de un usuario. No tenemos cosas adicionales, pero podemos agregarlas en nuestras próximas iteraciones. que tener en cuenta que no hay nada final en el diseño de la experiencia de usuario. Entonces, ya sea que estés haciendo algunas iteraciones, estás obteniendo algo de pantalla, por lo que estás excluyendo algunas. Puede cambiar su flujo de usuario a lo largo del tiempo. Está bien, está bien. Por lo que ahora sabemos cuántas pantallas tenemos que integrar en nuestro producto. Eso es lo primero. Otra cosa, que haciendo los wireframes o haciendo el diseño visual, es posible que descubras que algunas pantallas pueden estar separadas a varias pantallas. Algunos guiones se pueden combinar a uno. A lo mejor las cosas pueden pasar así también. Ahora ves la lógica que tienes que hacer, la conexión entre pantallas. Puede excluir algunas de ellas e intentar acortar su flujo de usuario si es necesario. Algunos de recursos útiles, tal vez desbordamiento dot io. Ya veremos el gráfico que vienen y cable flow dot co. Estos recursos que muestran el para crear, para diseñar flujos de usuario. Podrás usar esos para facilitar el proceso. Son fantasiosos. Podrás probarlo tú mismo y tal vez haya mucho útil que Adobe XD, ¿quién sabe? Está bien. Y para aquellos de ustedes que no están familiarizados con los niveles de fidelidad, esta diapositiva demuestra que tres de ellos son de nivel bajo, medio y alto y bajo. Vemos sección bastante abstracta la cual sólo tiene formas geométricas sin ninguna definición, el nivel de fidelidad medio tiene imagen. Dentro del contenedor, tiene texto y botón no más en forma. El alto nivel de fidelidad es el diseño visual en realidad, y tiene todos los estilos. Tan alto es sinónimo de final. Probablemente tengas la pregunta, ¿cómo debo construir el flujo de usuario? ¿ Cuál debe ser el punto de partida del flujo de usuarios? Y cómo crear una experiencia de usuario fluida. Honestamente, entre los recursos que he estudiado sobre el flujo de usuarios. Nadie me dijo cómo debería construir esos. K. Te diré los varios pasos que puedes dar para crear un flujo de usuario que probablemente sea el mejor punto de partida, luego lo probarás y lo mejorarás en la siguiente iteración. Por lo que en primer lugar, por favor considere el análisis de un producto actual y el análisis de un competidor. Debido a que lo son, puede extraer experiencia de usuario ya familiar para su flujo de usuarios. Para llevarás el flujo de usuarios existente y lo mejorarás. Si creas algo desde cero, tienes oportunidad que no quedará clara para el usuario porque espera algo más. Hay muchas aplicaciones relevantes. Y por eso como usuario, estoy esperando algo con una experiencia de usuario similar. Podrás inventar una bicicleta, pero no te recomiendo que hagas eso. El primer ejemplo de tu flujo de usuario sería una, probablemente una copia de lo que ya existe. Después trabajarás en mejorar este flujo de usuario siempre que sea posible. Aquí, estoy considerando esto a la gente que estarán familiarizados y bastante bien con el flujo del usuario. Es bastante simple, usted dice. Y aún así podemos excluir o incluir algún encogimiento de sección, algunos de ellos. Entonces mi consejo es, medida que comienzas tu carrera de UX, tienes una pregunta de cómo crear un espíritu de flujo de usuario para partir de la experiencia de usuario existente y tratar de mejorar esa. Y luego tus próximos, próximos ensayos, próximos proyectos, verás el panorama claro, sentirás eso y tendrás más ideas sobre cuál será el punto de partida para tu flujo de usuarios. Después de un tiempo, reemplazarás estas secciones abstractas con tus wireframes y Dan con tipos paralelos, capacidad para el equipo de desarrolladores. Y comenzarán la lógica de forma de tu producto. 38. Proyecto de clase 6 xD 6: flujo de usuarios: tu primer resultado de: De acuerdo, acabo de bajar el flujo de usuario del sobre su pie, Panda y Strauss M D sobre su, descubrimos que hay un escenario para ingresar un número telefónico, recibir código SMS, luego a radiación, lo que requiere que introduzcas contraseña de correo electrónico, y luego te permite escoger la dirección. Y la zona del padre es descubierta por nosotros. Ahora bien, en cuanto a panda alimenticia, tenemos prop de reautorización, prop, probablemente vamos a montar un perfil. Tampoco se descubre aún porque no está soportado en mi zona. Pero lo que vimos en el video, que demuestra el flujo del usuario, somos capaces de seleccionar la dirección y seleccionar el tipo de comida o restaurante selecto producto que si es aplicable, la variación reservada del producto. Y luego nosotros y para atender y datos de contacto. Y luego tenemos la confirmación de OTA. Bueno, más o menos se ve así para Strauss él el flujo de usuario se ve casi igual que en caso de que con la comida Panda, pero a excepción de la optimización se coloca en la última etapa. Ok. Esta es la dura demostración del flujo de usuarios de estas tres aplicaciones que no tomé en cuenta considerando que eso no funciona en mi área. Pero estos tres son suficientes para aclarar, cuál es el mejor flujo de usuario para nuestra aplicación prospectiva. Entonces ven que marqué la secuencia que es similar y también es muy cómoda para mí personalmente. Entonces creo que esta elección abordó la selección de comida o tipo de comida o restaurante y en realidad el producto, entonces podemos ajustar el número de artículos de pedido. Y la confirmación del pedido va más allá con el número de teléfono que ingresa y recibe el código SMS. Entonces aquí siento que vamos a implementar o vamos a utilizar esta lata de flujo de usuario que contiene tres pasos o etapas en nuestra app de perspectiva. Entonces intentemos crear nuestro propio flujo de usuario para nuestra aplicación de entrega de alimentos, que estará en nuestra app, autorizaciones TEA, tipo, nuestra comida entrega de alimentos de acuerdo? Creo que esa autorización estará en primer lugar. Está bien. Teorización vía Google, Facebook, cuenta de Twitter, tal vez, bueno, tal vez algunos otros. Claro, pero también tienes que identificar cuál es la mejor manera de autorizar a tus usuarios según la persona. Está bien. John, creo que necesitamos seleccionar un vestido en primer lugar. Vamos a reorganizarlo un poco y a ver qué obtenemos. Por supuesto, si usted está planeando crear aplicaciones internacionales mejor para colocar la sección de enrejado y después de la autorización, tal vez sea más eficiente porque algunos socios, algunos restaurantes, no podrán entregar a su precisión ubicación. Pero estoy pensando en la app local, que sólo funcionará en mi ciudad. Por lo que la dirección irá en la última etapa junto con los detalles del pedido. Ok, entonces tenemos la autorización, tenemos una lista de restaurantes. Podemos seleccionar el producto de la, del restaurante, y luego modificamos nuestro pedido. Este es el flujo de usuario para una sola entrega de libro. Puede ser no lineal. Por lo que el usuario puede volver y seleccionar el otro producto y así sucesivamente y así sucesivamente. Modificando orden y luego los detalles del pedido para ver lo que realmente ordenamos y luego conformación del titular. Y lo último será la dirección seleccionadora. De nuevo, puedes hacer que el usuario fluya cualquier software que prefieras. Estoy usando x D Para la mayoría de los casos porque estoy acostumbrado a ello. Acabo de darme cuenta de que podemos en nuestra dirección junto con los detalles del pedido. Por lo que Dirección de entrega será P aquí. Por lo que saltamos 11 pantalla, que tiene los otros esfuerzos para el usuario K. Ahora la autorización, seleccionando tipo de comida de comida o restaurante. Después seleccionamos producto de la categoría B o del restaurante preciso, de restaurante particular, podemos modificar nuestro pedido, que sería la variación de cantidad del producto. Varias pantallas que combinamos a una. Y aquí también fusionamos los detalles del olor y el tress deliberado en una sola pantalla. Después va la confirmación del pedido y la pantalla de éxito. Está bien. Si a una persona le gustaría obtener más producto, él o ella puede ir aquí. Y dos, no le pongas mucha atención a esto. A mi dibujo. Es solo para mostrarte la relación entre pantallas. India. ¿De acuerdo? Entonces y el ciclo vuelve a ir una vez más. Por lo que diseñamos el esquema, el borrador de rol para nuestro flujo de usuario sobre baja fidelidad, tenemos algunas etapas. Todavía no son pantallas por sí mismas, pero hay algunas etapas a las que necesitamos someterse antes de hacer un pedido. 39. Proyecto de clase 7: creación de un tablero de historia: Por lo que diseñamos el esquema, el borrador de rol para nuestro flujo de usuarios tendrá una baja fidelidad. Tenemos algunas etapas. Todavía no son pantallas por sí mismas, pero hay algunas etapas a las que necesitamos someterse antes de hacer un pedido. Y nuestro registro que encontré una descripción del público objetivo para las aplicaciones de entrega de alimentos en heavy.com. Y son las tres personas's que pueden ser útiles en nuestro caso, el tiempo crujido ejecutivo. Este cliente no tiene el lujo de comer fuera en restaurante durante la hora del almuerzo o incluso esperar en fila, auditándolo para ir. Ejecutivos ocupados con un TE, tonto de las reuniones a menudo solo tienen tiempo suficiente para realmente comer y vamos a recurrir a una app para cuidar el resto, llegar a estos clientes promoviendo sensaciones especiales a la hora del almuerzo que brindan ese impulso energético necesario para pasar por la tarde. El segundo personaje es el padre on the go. Para muchos padres trabajadores de esos niños que están ocupados con deportes y otras actividades durante la semana, preparar la cena a una hora decente puede ser difícil cuando sólo hay 20 minutos para conseguir una cena equilibrada sobre la mesa para el familia. Este cliente pagará una prima por la conveniencia que brinda un atractivo de aplicación de entrega a este cliente al ofrecer comidas de valor estilo familiar para servir a un grupo. El tercero es el adaptador de aire de principios de diciembre. Todos tenemos ese amigo o compañero de trabajo que es el primero en adoptar el último gadget y usar una aplicación de entrega de alimentos no es la excepción. Este cliente fue uno de los versos para usar nuestra aplicación de afilado correcta como Uber, aprovecha las aplicaciones de abarrotes para un ahorro extra en lo más probable tiene el último teléfono iPhone o Android, rastrear al adoptante temprano ofreciéndoles acceso VIP a ofertas especiales y otros Burke's. Está bien. Hay preguntas que hacerte. ¿ Qué estrategia tiene sentido para mi negocio? ¿ Qué apps promesa marca fetal, debería mamá mi menú cambiar? ¿ Cómo puedo utilizar estos nuevos canales de comunicación? Utilizar la aplicación de entrega de alimentos puede ser una gran fuente de ingresos para los restaurantes, pesar de que esta base de clientes, clientes no es visible como otros, debe estar lejos de un objeto a través de los comercializadores inteligentes. Por lo que considerando a nuestro público objetivo, que será tanto padres como gente de negocios, he creado un primer guión gráfico en el que se muestra la secuencia de actividades que hará, que una persona tomará antes de usar nuestra aplicación. Entonces James llega a casa, Mira, admite a su hija, su esposa, y lo siguiente, abre la nevera. Su esposa, ella cuidaba a los hijos y no podía dedicar tiempo a la preparación de la cena. Por lo que no hay nada interesante para James en la nevera o en una mesa. Entonces ahora mismo vemos que aquí podemos hacer algunas notas. En primer lugar, esta foto no demuestra el entorno real porque suele ser de noche. Entonces digamos que es de noche, luego es una nevera y así sucesivamente, o entrena nuestra parte. Por lo que he estructurado la tabla para que el formato de datos sea más confiable. Estas fotos pueden ser reemplazadas por tu dibujo de lápiz. Y lo más importante de los storyboards es que son fáciles y rápidos, elaboras. Entonces el estilo del guión gráfico no es tan importante a menos que la información dentro de este entregable sea clara. Ok, entonces he desglosado nuestra tabla dos etapas, medio ambiente, equipo, pensamiento, diciendo cuál es la forma más común de estructurar la tabla para storyboards. Algunos de sus proyectos pueden requerir otro tipo de datos sobre usuario. De acuerdo, entonces tenemos etapas, que es James llega a casa, abre gratis chup y delivery app y esperando la entrega. No se ha cambiado. Su esposa, James es un hombre ocupado. Vuelve a casa. Dice, fue un día largo, idea mía. Y luego piensa que tengo hambre y abre la nevera. Y cuando usa la app, se preguntó, ¿qué quiero comer y preguntarle a los miembros de su familia, están todos bien con la pasta hoy en día, la tendencia de la familia es la otra persona y quizás el otro storyboard. Tenemos dos familiares en el auto y uno de ellos utiliza la entrega de alimentos superiores. Por lo que terminaron su jornada laboral y quieren pedir su cena. Por lo que la orden estará en proceso mientras se dirigen a su casa. Entonces si hacen un pedido, están en el auto, piensan y qué vamos a comer esto si y el dicho, vamos a decidir qué queremos comer cuando lleguemos a casa el día siguiente, llegar a casa, están en casa y piensan, finalmente tenemos a casa. Y deciden pasar algún tiempo juntos. Sus pensamientos sobre la tercera etapa, ¿cuándo leían libros con sus hijos? A lo mejor jugando, viendo la televisión o algo más. Que los pensamientos son cosas que el tiempo con los niños no tiene precio. ¿ De acuerdo? Y finalmente, consiguieron la orden y piensan que tienen mucha hambre. Y dicen, Gracias por la entrega a la persona que entregó el Yehud. Listado de caminos hacia esto mostrará lo que ya ocho, donde ya ordenamos en el pasado. Entonces persona 1.5 dudas sobre lo que vamos a comer hoy porque no sabe. Siente que el pastor está bien. Pero estará muy agradecido si le mostraste lo que ya ordenó y tal vez hagas una recomendación, recomiendo Dacian basado en tipos de comida de células anteriores chico que sí, Hey, K. Así que insights para una familia entrenada sería como, echemos un vistazo a esta tercera etapa donde la gente está leyendo libro con su hijo. Y creo que ofrecen una actividad donde los niños mientras esperan la entrega. Está bien. Esta es una buena. Creo que podemos en algunas historias, juegos de puzzle, versión ligera de algunos juegos que podrían implementarse en la app. Incluso somos socios con otras aplicaciones para pasarlo bien mientras esperamos la comida. Por lo que en base al tiempo para que se entregue el pedido, podemos aconsejar diferentes actividades para que los padres pasen tiempo con sus hijos mientras esperan el día completo, podrían estar en actividades de desarrollo, libros, juegos eran algunos rompecabezas o tal vez algunas misiones. Todo esto depende de la, lo que podremos desarrollar. 40. Trabajar con moodboard: Híbrido uno, y vamos a explorar ahora los tableros de humor. Tableros de humor, piezas de muestras de diseño para inspiraciones que contienen colores, tipografía, interacciones, imágenes y fotografía, futuros, iconos y elementos de interfaz de usuario. Por lo que cuando navegues por Internet, es posible que encuentres un diseño que ilustra que la idea que tienes en mente, puedes pedir prestado y sonar elementos o secciones de tus competidores. Eso está bien. No tienes que imitar la IU ni el estilo. El tablero del estado de ánimo ayuda a construir una visión estilo Tweedledee que tendrá tu producto de perspectiva. También es útil mostrar a dos stakeholders, clientes, ¿qué tienes en mente? ¿ Cómo se ve el proyecto en esta piezas separadas de ejemplos de diseño. Y puede incluir topografía, puede que no, puede que encuentre sólo un botón. Podrás encontrar 10 mil botones para tu proyecto. Podrás incluirlos todos en tu pizarra de humor, pero ¿te será útil o no? Esa es la pregunta. Se trató de incluir las cosas importantes porque puede terminar con un, con un toneladas de soluciones. Perderás demasiado tiempo en colocarlos y probarlos todos. Este es un ejemplo de mi tablero de humor hecho para la aplicación de meditación. Me gustaría presentar algunas imágenes de la naturaleza. Agarré algunos colores. También me gustan los diseños de estas pantallas, UI muy ligero y suave. Y la versión oscura puede ser algo así. Estos esquema de color y gradiente. Ahí está muy encantador. El ejemplo de cómo pueden verse los foros en lunar oscuro también es genial. De verdad me gustaría tener algo como esto en mi app, tres iconos y barra de herramientas inferior. Muy eficiente. A continuación, está bien, imágenes. Entonces estas son varias cosas que me gustaría guardar para, para mi app. Tomé esto de triple y Behance. Consideraré el estilo de esto y cómo funcionan los colores juntos. Hecho muy cool. Y aquí el esquema de colores también es muy agradable. Tengo que tratar de construir algo como esto. Me gusta el diseño de las pantallas. Son bastante ligeros. Creo que deben ser fáciles de usar. Está bien. Si te das cuenta, no tengo tipografía. No tengo muchas cosas que están listadas en, no tengo interacciones. Pero para mí, a estas alturas, basta con mostrarle a mi cliente si está de acuerdo en que tomes esta dirección o no. Puede agregar piezas adicionales a su tablero de humor más adelante y una lluvia de ideas. De nuevo con el equipo o cliente. Es realmente útil porque cuando comienzas a hacer visual y diseño, te será muy útil porque no usarás colores equivocados. Eso no será esperado por el cliente. A pesar de que el que estás haciendo el diseño de la experiencia del usuario, te enfocas en tu usuario, en tu usuario final. La aprobación de su trabajo está arriba en el cliente. Y el mood board es muy agradable tener esta seguridad, este punto medio con transición entre los wireframes y el diseño visual. Entonces de nuevo, toda la lista de cosas que puedes incluir a tu tablero de humor pueden ser colores, tipografía, interacciones, imágenes en fotografía, características, iconos y elementos de interfaz de usuario. Es posible que no incluya algunos de ellos. Podrás crear tu propio tablero de humor sin ninguna restricción. No hay reglas, pero el resultado debería ayudarte a ti y a los interesados a entender la dirección que estás a punto de tomar con el diseño visual. 41. Proyecto de clase 8: creación de moodboard: Hola a todos y bienvenidos de nuevo a nuestras clases de práctica UX junto con XD. Y hoy exploraremos el mood board, que se introduce no sólo en el proceso UX, sino también en el diseño visual porque realmente te ayuda a entender la visión del cliente sobre las preferencias, ideas y expectativas del proyecto. Pero también eres capaz de expresar tus sentimientos sobre cómo puede verse este proyecto. Por lo que podría haber dos partes combinadas. Podrás utilizar referencias que tu cliente o te envió y combinarlas con otras que sientas que son adecuadas para este proyecto. E imaginemos que tenemos cinco enlaces a algunos proyectos. Te acuerdas, estamos trabajando en la entrega de alimentos hasta. Entonces tenemos cinco referencias que nuestro cliente imaginario piensa que están bien de considerar. Le gusta el estilo y quisiera que siguiéramos estos conceptos. De acuerdo, echemos un vistazo rápido a través de la interfaz de usuario. Luz muy espaciosa, muy suave, debo decir. Y los iconos también se dibujan muy bonitos. Nos interesa sólo el, el diseño y la interfaz de usuario. Este punto, se ve que aquí no hay nada pesado y todo lo que se coloca en la pantalla está organizado agrupando. El color secundario es el azul. Primero parece que es naranja, pero vamos a ver. Sí, naranja, negro, gris, y rosa claro. Repasemos la app o tiene un modo oscuro. Esto es muy bonito porque también estamos buscando un modo oscuro. Y realmente creo que el modo oscuro para nuestra app será más adecuado que el modo de luz. Por lo que incluso si desarrollamos un modo lite, no serán por defecto. Por lo que por defecto deseo configurar el modo oscuro para que esté activo. De acuerdo, echemos un vistazo a la, otra arriba en nuestra lista. Es Estación de Cast, color rojo plano con un parasol. Bonito estilo para el caso. C leer como Color principal. Claro, bueno podemos extraer de esto donde creo que lo más destacado de esta app es que funciona sólo en dos colores, principalmente uno que es pan. Y las IU, bien estructuradas y organizadas usando sólo el color blanco, negro, rojo y gris. Pero no creo que en nuestra aplicación esto pudiera aplicarse de alguna manera. No estoy seguro. Un mundo agarró varias capturas de pantalla. Trataremos de incorporar los elementos o algo más desde estos hacia arriba. Pero ahora mismo es realmente difícil decir ¿cuál es la cosa genial que podemos usar? Este proceso de incorporación se ve bien, vale, echemos un vistazo y tomemos el otro ejemplo. Y ahora nuestras referencias, zapatos de serpiente, vale, zapatos. Sí, ves que las tarjetas están organizadas muy bien aquí y ordenan por filtro que se podría aplicar en nuestra app también. Y amar el estilo de los iconos. Como dije, la lista de las tarjetas se ve bastante acogedora aquí. Elemento o la estructura de la pantalla interior podría ser utilizado en nuestra aplicación también. En mi bolso está en mi carrito. Veo aquí el botón de Checkout. Paso principal, tenemos un acuerdo con el orden K filtros SlideUp tipo ventana. Creo que ese filtro también lo va a incorporar de la misma manera en nuestra app porque habrá muchos ajustes que les gustaría tener a bordo, lo que significa el tiempo para entregar el tipo de comida que estamos buscando. A lo mejor habrá una casilla de verificación para comida vegana o algo más. A ver, pero creo que esa es la forma más apropiada de tener un filtro. Esta es la lista. Ella es simpática. Pasemos a nuestro siguiente ejemplo de esto. El ícono es muy bonito. Por lo que nuestro cliente estará muy contento si pudiéramos usar iconos similares en nuestra app. Ahora mismo nos queda una aplicación más. Déjame abrirla para ti. Y aquí está tu ley y otra arriba se ve como zapatería que teníamos. Este layout me recuerda el Instagram. A continuación va, sí, realmente posavasos Instagram. Aquí tenemos una categorías. Tan bonito diseño basado en el fondo. El color principal aquí es este vibrante azul. Los iconos se basan en diferentes tonos de gris, de diferentes tonos de gris y pequeño acento de color azul es una sombra suave, suave, que es muy común en estos días. Aquí tenemos un mapa y especie de filtro por meses. Realmente difícil para mí entender lo que es esta app por duda usando una. Pero estoy seguro de que a nuestro cliente le gustó la parte visual, no la UX. Por lo que ahora tenemos cinco muestras a considerar en cuanto al diseño visual. Y vamos a agarrarlos y decidir qué parte vamos a pedir prestado y vamos a derribar. Acabo de terminar de hacer capturas de pantalla a partir de las referencias que exploramos y organizamos de la forma en que será más o menos comprensible para nosotros y para nuestros grupos de interés. Nuevamente, puedes crear un tablero de humor muy bonito y así como tu usabilidad de reportes o zona y cualquier otro tipo de entregable, por favor concéntrate en el valor que estás entregando. Y lo siguiente es. Estilizando, haciendo un año bonito. Entonces volvamos a nuestro bar de humor. Aquí tenemos futuros, imágenes, color, elementos, iconos, telefonados, interacciones, y layout. O futuros, he escogido el tema del estado invitado ahora con el proceso de incorporación, realmente aprecio cuando hay algo antes de usar el temporizador de entrega op. Creo que podemos introducir el temporizador de entrega. Creen que es cosa muy elegante tener un temporizador de entrega. Nuevamente, todo aquí está a consideración, para discutir con las partes interesadas, con su equipo y decidir si en las características que usted ofrece sugiere son aceptables o no porque puede haber una enorme cantidad de necesario para gastar en desarrollar tal cosa como Timer pack. Equipo de contenido puede no tener el contenido para proceso de incorporación. Y así uno, entonces esta es sólo otra etapa más cercana a nuestro producto final. Ok, volvamos a nuestra pizarra de humor. Filtrar. Creo firmemente que podemos implementar filtro que se abrirá en una ventana separada. Nos deslizamos hacia arriba o se desliza hacia abajo porque en primer lugar, nos permite crear un sistema escalable. El otro asunto son los que llaman. Yo llené ese negro o gris oscuro sería el color de fondo principal. Iconos. Ahí recuerdas estos hermosos iconos. Este es el ejemplo de lo que el cliente quiere que creemos elementos. Este botón es muy bonito. El resto es más o menos estándar. En cuanto a interacciones. Creo que podemos pedir prestado este enfoque cronológico como camino lineal a nuestra sección de pedidos pasados, donde la gente puede ver los platillos que ordenaron antes. Por lo que habrá un calendario, fotos y tal vez nombre del restaurante, el botón de precio para reordenar, o tal vez una calificación y estrellas y así sucesivamente. Aquí, se propone el diseño para nuestro panel principal. Habrá una sección superior, por supuesto, poner un logo con el menú desplegable o menú bulgur. Tendremos algunas pestañas de funcionalidad junto con la barra de búsqueda. A lo mejor podemos hacer la alimentación de amigos que tienen fotos de su comida y así sucesivamente. El otro es el tipo de letra, que me gustaría usar la app que escogí solo, solo para tener algo diferente esta tendencia de Montserrat porque creo que esta fuente está muy sobreutilizada. Y esto hace que cada app sea similar a otra porque tienen la misma fuente en sus diseños. Y vamos a probar ahora cómo se verá el párrafo usando esta fuente. En primer lugar, lo harás antes de enviar el par de ánimo al cliente o para demostrarlo entre los miembros de tu equipo. Kay, pasemos a nuestros imagers que representarán al filósofo, la imagen de nuestro, nuestro producto. Siento que la familia sentada y comiendo la cena será agradable. Y aquí están los miembros de la familia. Afuera, aire bastante acogedor, tres niños en tiempo pasado, ¿Algo más? A mí me gusta el medio ambiente, la iluminación. Entonces cuando lo hagamos, el equipo de diseño visual y contenido escribirá artículos. Podrán elegir entre imágenes con las mismas emociones, el mismo tono, es decir, con las mismas características que son importantes para nuestra app. ¿ De acuerdo? Está bien. Entonces creo que lo aclararé con una pizarra de humor, ya se explicó el diseño de alimento-borne. Te dije que no es tan importante cómo se ve tu tablero de humor porque lo principal es la información que contiene. Por lo que puede obtener un poco de estilo si lo desea. Y lo reorganizamos si no te gusta mi manera. Pero el 90% de mi proyecto tiene el mismo tipo de tableros de humor. Minimalista, claro, sin ningún ruido blanco sobre ellos. Muchas gracias por su atención por un tiempo, trató de crear su propio tablero. A lo mejor tienes algunas otras sugerencias y buena suerte. Nos vemos en nuestra próxima lección. 42. Mapa del sitio y información: Enhorabuena, tienes a la arquitectura de la información. Ahora hablaremos de este tipo de actividad de diseño de UX. La arquitectura de la información es organizar el contenido y la forma más lógica y eficiente de aumentar es la descubribilidad. Es combinación de organización, nomenclatura, navegación, y sistemas de búsqueda implementados en el sistema de información. A nivel de todo un sitio web o arquitectura de la información de la aplicación determina qué datos deben colocarse en cada página y cómo vincular las páginas entre sí. Con el fin de crear una unidad de Arquitectura de la Información fácil para considerar los hallazgos previos a partir de su análisis, desde el recorrido del cliente y las demás cosas que ha hecho hasta ahora. El análisis te ayudará a entender dónde estás, a definir reglas de conducta y patrones de usuario familiares, perfil de usuario y persona te ayudarán a entender nuevo los futuros de sus patrones de comportamiento de percepción, y consumo y puntos de dolor. El viaje del cliente te ayuda a definir puntos de entrada, puntos de salida y puntos de decisión. Bastantes resultados de búsqueda lleva al usuario a la página de inicio. Así que tenga cuidado y organice su arquitectura de información. Y la forma que acortará y aliviará el proceso de toma de decisiones para el usuario. Agrupar de acuerdo a las expectativas del usuario significa que si tienes múltiples personas's en tu proyecto, tienes que considerarlas todas. Y probablemente eso tendrá un impacto en el contenido, en la estructura, categorías y así sucesivamente y así sucesivamente. Por lo que necesitas conocer diferentes grupos de usuarios y sus intereses. Tienes que tener en cuenta la funcionalidad del producto listando todas las funciones y trató de ayudar al usuario a usarlas cuando fuera necesario. Si tomas en cuenta storyboards y escenarios, te ayudarán a construir una mejor relación entre el contenido y su funcionalidad. Por lo que la arquitectura podría estar orientada al usuario. Entonces si tu viaje de usuario muestra que la persona suele venir de la búsqueda y gen o redes sociales a la mitad del enlace en la página específica que tienes que mejorar. Esta página, esa página probablemente será página de toma de decisiones. Te sorprenderías, pero la página de inicio no es la página más popular en la mayoría de los proyectos. Eso fue una sorpresa para mí también. Hace mucho tiempo, diseñé homepages muy bonitos, muy contenidos pesados. Pero al final del día, el usuario toma decisión en las páginas internas y tienes que enfocarte en ellas y ayudar a tu usuario a tomar una decisión de acuerdo a un modelo de negocio del proyecto. En la arquitectura de la información, determinará la relación entre el contenido y la funcionalidad. Digamos que lo pusimos bajo nivel de estudio de caso en este ejemplo. Seremos desconocidos o inesperados por Euler o presionamos el botón de contacto y nos lleva a una página de Facebook o Linkedin. Espero visitar una página que exhibirá el número de teléfono, correo electrónico o formulario de contacto, u otra forma de, para contactar a la empresa o persona. Por lo que esto también significa que la relación entre el contenido y la funcionalidad debe ser clara. Ya sea presionando la página de inicio, te lleva a otra página que estará equivocada, eso será inesperado. Entonces si contamos con algunos servicios que ofrece la empresa, tenemos que demostrarlo adecuadamente. Por lo que Análisis, gestión de riesgos, carga financiera irá en el proyecto de servicios alfa, deta va bajo nivel de estudio de caso y contáctanos página donde podamos encontrar información que nos ayude a llegar a esta empresa. Así como otros entregables de su proceso de diseño de UX. La arquitectura de la información ayuda a estar en la misma página con las partes interesadas y el equipo. Equipo de desarrolladores considerará arquitectura de la información y junto con el antiguo proceso de desarrollo, así como su flujo de usuarios. Y también muestra áreas de entrada de los interesados, tal vez eso sea un contenido u otros medios de comunicación. Por lo que descubriste que tenemos que incluir sección de video, pero no tienes videos a mano. Si necesitamos un video de exploración, alguien tiene que producirlo. Si sabes que el usuario tiene 18 años, probablemente no entenderá algún idioma que quieras usar. Y es necesario adoptar este lenguaje a un grupo de usuarios. Entonces aquí tenemos Proyecto beta, financiero cargado todo esto. Es a nombres para nuestras secciones. Podrás considerar nombrar esto de otra manera redonda como cartera o nuestro trabajo, nuestro proyecto, proyectos pasados, lo que hacemos, y así sucesivamente. Por lo que este es un lenguaje de usuario que hay que tener en cuenta al hacer la arquitectura de la información. Y haz tu arquitectura de información. Y de esa manera eso podría ser fácilmente editable, escalable. Hay un montón de software en línea. Puedes hacerlo con el xor, con Adobe XD, puedes usar Balsámico si lo deseas. Todos son software sencillo, sencillo en cuanto a crear arquitectura de información y compartirla entre el equipo. 43. Lección XD Proyecto: proyecto de clase: arquitectura de aplicación: Hola ahí. Bienvenido de nuevo a nuestras lecciones XD junto con la práctica de UX. Y lo que vamos a hacer en esta lección va a definir la estructura de nuestra app de entrega de alimentos de perspectiva. Por cierto, las cosas que ya hicimos, ya recogíamos hasta pantallas de nuestros competidores. Definimos los flujos de usuario de varias aplicaciones y propusimos una para nuestra aplicación, tenemos descripciones de persona, visión general muy ligera, pero aún así es suficiente para crear un guión gráfico y otras cosas UX. Nuestro objetivo es ofrecer cenas para personas ocupadas y padres de familia que quieran dedicar más tiempo hoy a los niños. Por lo tanto, empecemos desde el resumen del blog de nuestra arquitectura, que estará dentro de nuestra app. En primer lugar, enumeraremos todas las características, todos los bloques, todos los módulos o elemento, quizá elementos que serán importantes en nuestra lista aquí. Y luego agruparemos este bloques intersecciones para que haya fácilmente descubrible e intuitivo. Gaillard Start desde el principio, es nuestra pantalla de registro o de bienvenida. Se seguirá la pantalla de bienvenida con un inicio de sesión, luego el registro, luego la pantalla principal. Y otra es la comida del restaurante, historia del orden de busto. Configuración de la cuenta, diga retroalimentación. Familia. Contamos con la sección de comidas recomendadas. Entonces la idea general ya está aquí, pero a continuación necesitamos organizar esta búsqueda de registro de pantalla de bienvenida estaría en el siguiente nivel en prioridades después de las categorías K, hemos definido pantalla de inicio, y ahora es el momento de definir la configuración de la cuenta. Ya ves lo que es la parte desafiante aquí es organizar estos varios elementos separados en grupo dan. Tenemos todo aquí. Tratemos de crear en flujo de esta arquitectura de información. pantalla de salpicaduras de orégano es lo primero que vemos. Pantalla de compromiso nos lleva al host de pantalla de inicio Green tiene categorías, tiene Buscar como comidas recomendadas. Y aún tengo dudas de colocar lista de restaurantes aquí en el mismo nivel con la categoría búsqueda y comidas recomendadas. Pero lo haré porque aún no tengo otra idea. Una vez que decida o encuentre otro lugar más apropiado para la lista de restaurantes, lo sacaré de aquí. Ok, siguiente. Categorías en comida para comer, Khomeini, está bien, entonces la búsqueda nos lleva al resultado de búsqueda que comidas recomendadas. Por lo que el historial de pedidos, algo separado de esto, así como ajustes, comidas recomendadas. Por lo que sabes que la arquitectura de la información está hecha para facilitar la navegación y la descubribilidad del contenido. Pero desde secant place, también sirve otra función, que es para nosotros, para los constructores de la app, somos capaces de fusionar en cinco pasos adelante, cómo se verá la interfaz y cómo la experiencia del usuario como k Así que vamos a ver qué con lo que queda aquí. De acuerdo, nos olvidamos de dirigir la atención. Pondremos toda la historia en dos lugares, después de un tiempo, podremos rastrear y analizar si una colocación es mejor que otra. Y arreglas estos elementos de acuerdo a nuestras estadísticas. Por lo que mi perfil tendrá confianza, confianza, información personal. Estamos lidiando con una entrega de alimentos hasta. Por lo que la dirección es más importante y debe ser de fácil acceso. Déjame ponerlo todo abajo y vamos a definir si el vestido tiene un mejor lugar aquí. Variación irá aquí. Creo que la historia más antigua no tendrá ningún desplegable. Will, será el propio menú. Con garabato largo. A lo mejor debería haber un ID de pedido o algo así. Por lo que ahora quiero jugar algunos juegos somos familiares para que sean accesibles no sólo durante el tiempo de entrega, quisiera que fueran accesibles y poco tiempo. Por lo que solo me cuesta definir la colocación de esto así como el sobre la información de la app en situación real probablemente compartirá entre los miembros del equipo, decidiremos cómo crear una mejor arquitectura de información, teniendo todo esto. Entonces, solo saltemos esto también por un tiempo. Y ahora mismo ves que tenemos arquitectura de información para nuestra app. Este es el nivel de baja fidelidad. Tenemos una pantalla de inicio, historia más antigua y mi perfil. Es así como decidí separar los elementos dentro de la app. Pantalla de inicio, tendremos categorías, función de búsqueda, comidas recomendadas, y lista de restaurantes. Entonces tenemos las categorías serán diferentes. Es solo un tenedor de lugar para que tengamos una idea de lo que tendremos bajo las categorías. Habremos sido otras cosas, categorías. Este precio. Y nos interesa no la distancia y en sí mismo, sino el tiempo de entrega de nuestros alimentos. Así que por favor ten cuidado cuando estés hablando con un usuario como una máquina. Gran habilidad para las personas que están haciendo diseño de experiencia de usuario es recoger el lenguaje del usuario e imitarlo para que la gente pueda entender exactamente lo que quiere decir, por ejemplo, pero entiendo que cada entrega requiere tiempo y este tiempo se calcula a través de la distancia. Pero el cliente o el cliente final, estar interesado en cuántos minutos o muchas horas él y su familia deben esperar a que se entregue su cena. Nuevamente, creo que la búsqueda podría combinarse de alguna manera con filtro, con el mismo filtro. Déjame empezar con wireframing y vamos, vamos a tratar de conectar y desconectar estos dos elementos entre sí. Y tenemos variación en la parte inferior. Ok, creo que eso es suficiente por ahora para nuestra arquitectura de información. Dividimos nuestro hogar en tres secciones principales, que sería la pantalla de inicio más antigua historia en mi perfil, que es responsable de algunos datos personales para el vestido. Y tal vez a una persona le gustaría dar un corazón de retroalimentación sobre el AP. Esta no es una versión final. Esto podría cambiarse de tiempo. Después de discusiones, después de hacer wireframes, te has dado cuenta de que esto no funciona o esto se ve mal, y así sucesivamente y así sucesivamente. No debería ser el diseño final de tu arquitectura de información. Al menos no lo tomes de esa manera que es rígido y no se pudo cambiar. Kay? La experiencia del usuario es usuario en primer lugar. Por lo que tenemos que hacer nuestro mejor esfuerzo para crear un flujo suave y fácil de usar. Cambiar está bien aquí. Bueno, muchas gracias por su tiempo por hacer esto hoy. Tener un buen descanso. Asume la siguiente lección. Adiós. 44. Lección XD Proyecto de clase: de iniciación, inicio de la pantalla de la red de la versión con el el sistema de la pantalla de la: Hola a todos, bienvenidos de nuevo a nuestras clases de XD. En esta lección, vamos a transformar nuestra arquitectura de la información en wireframes de fidelidad media. Empecemos con la pantalla de inicio de sesión más simple. De acuerdo, necesito dibujar un fueraborda. Seleccionemos a Samsung Galaxy como diez por ejemplo. Te acuerdas, la sección superior generalmente se usa para la notificación del sistema, información del sistema como señal de mejor nivel, tiempo WiFi y así sucesivamente. Podemos poner éste aquí también. Por lo que las dos barras superiores, usualmente 24 píxeles, cuatro dimensiones de los teléfonos como Samsung como diez. No obstante, debes tener cuidado y leer las instrucciones para el modelo preciso de encontrado u otro dispositivo en el que estés trabajando. Porque esto podría cambiar dependiendo del modelo y luego hacer, bien, así que ya he escogido este, prehecho como ves, uno que fue descargado de la biblioteca de materiales. Por lo que puedes visitar material que io slash recursos y veremos muchas piezas útiles de diseños, cosas prefabricadas, Plantillas, Componentes, montón de cosas que te ahorrarán tiempo y te ayudarán a construir tu interfaz. Por lo que material que corte recursos, verás que hay una Biblioteca de iconos, herramientas, fuentes, colores, tipo, escala, generador, diseños, kit de diseño de línea base para kits de diseño de Fichman, y así sucesivamente. Muchas cosas interesantes que pueden ayudarte a construir tu interfaz K. Así que volvamos a nuestro diseño. Yo lo moveré aquí. Entonces lo que necesitamos aquí, ya tomamos la barra de herramientas superior y necesitamos crear dos campos para la entrada. Creo, omita este. Y como nuestro tema será oscuro, podemos pedir prestado, han coloreado en pantallas oscuras, modos oscuros. Podemos cambiar el color de nuestra barra de herramientas. Entonces hagámoslo. Creo que eso es todo. También podemos querer agregar algo de capacidad a nuestra barra de herramientas y es posible ocultarla efectivamente. Por lo que si necesitas ocultarlo, puedes entrar en ello. Estamos haciendo la pantalla de inicio de sesión, ¿de acuerdo? Esta es la cuadrícula que es por defecto para x d, cuatro columnas. Aquí veremos el nombre de usuario contraseña. A continuación, lo que necesitamos es un botón para que iniciemos sesión. Encontremos botones aquí. Hicimos este solo miembro, tenemos que asegurarnos de que esa persona pueda registrarse aquí k Así que elegir ración solo construiría para crecer prototipo de nuestra app. Y no pongas mucha atención al estilo de uno. Si bien mi parecer que ya ha heredado algunas estadísticas del diseño de materiales, pero cambiaré el color a ancho por lo que no se siente como si ya fuera el inicio de sesión de diseño visual. Recuerda si necesitas tener la mayúscula para cada una de tu escalera, puedes usar esta función mayúscula así como otras. También útil, necesitamos tener algún logotipo. Vamos a hacer esta sección para logo. De acuerdo, tenemos login, tenemos registro para personas que son nuevas en la app. A lo mejor queremos tener algún pequeño tagline para ellos con el fin de activarlos para que se registren y así como guiarlos un poco en la pantalla. Tan nuevo en la nube nuestra app, registrarse, nombre de usuario, contraseña, inicio de sesión. Parece que el inicio de sesión quiere ser del otro color, no tiene ganas. Secundaria Barton. Y lo haremos un poco más oscuro porque realmente queremos que la gente registre en nuestra Apple quiere darle a un usuario la oportunidad de iniciar sesión, aunque con una cuenta de Google que con una cuenta de Facebook. John iba a repetir la palabra cuenta cada vez. Entonces recuerda, contento de diferenciar estas tres secciones porque la parte superior es el lugar para que una persona escriba los datos y presione log in. La otra parte serán los conteos con los que una persona podrá iniciar sesión sin teclear aquí la info. Y la tercera parte será la sesión de Inscripción. Por lo que presionando estos bots y transferirá usuario a una pantalla de registro. Por lo que estas son tres partes diferentes. Por favor intenta diferenciarlos, ya sea un color, algún espaciador y línea o algo más. Pero ten cuidado porque ahora parece un tres partes diferentes de sus votos, no tan amigable de usar todavía. Pero aun así se ve que hay tres grupos de elementos y son responsables de diferentes funciones. Iniciar sesión. Aquí estamos vamos a trabajar solo en colores Quiero usar cualquier otro elemento gráfico sobre el, los tonos. Este botón no es fácil de presionar. Si recuerdas el mapa de calentamiento, es cuando lleguemos a un mapa de calentamiento, verás que esta zona no es fácil, preferible. Por lo que quizá queramos retomarlo un poco. De acuerdo, estamos encogiendo nuestro logo lo más posible. Está bien. Ahora parece más o menos la pantalla de inicio usará espaciador para separar dos secciones. Entra con cuentas sociales e inicia sesión con la contraseña en correo electrónico. De acuerdo, tenemos la primera pantalla. Se trata de wireframes de fidelidad media, por así decirlo. No tenemos colores. Todos tenemos teléfonos aquí. No tenemos el estilo final para nuestros botones. No tenemos logo y muchas cosas. Todavía no tienes fotos aquí. Pero llegaremos a ese pedacito más tarde. Está bien. Por lo que vemos puede estar confundido al estar con un espacio aquí debajo del botón de registro Cuenta. También me parece bastante raro, pero antes que nada, recuerda que hay diferentes odios a los dispositivos. Por lo que será un área segura para, para los casos con la pantalla más pequeña. El otro es que no es muy fácil presionar el lado inferior, una sosteniendo el teléfono con una mano. Si echas un vistazo a los mapas de calentamiento, te darás cuenta de que el más compresible antes está en algún lugar aquí. Por lo que a partir de la esquina del botón de registro Cuenta a la esquina izquierda del botón de Inicio de sesión. Entonces esto es algo diagonal y es mejor arreglar los elementos cuando tu u i, por lo que hay de fácil acceso si quieres que se acceda a ellos. De acuerdo, entonces creo que eso es todo para pantalla de inicio de sesión. 45. Trabajar con prototipos: Hola ahí. En este video hablaremos de prototipos. Y los prototipos son la fusión de wireframes e interacción. Por qué necesitamos esto para identificar brechas de diseño. Por lo que descubrirás que tienes navegación equivocada. Te perdiste la capacidad de respuesta. Es posible que alguna interacción no incluyera retroalimentación después de alguna tarea. Puede mejorar el diseño de la interfaz de usuario como el posicionamiento, estilo, el tamaño de los elementos y la tipografía. Es lo mejor para probar entre los usuarios de perspectiva para tu público objetivo y considerar su retroalimentación para una mayor mejora para la etapa de padres. Aquí puedes introducir las micro iteraciones, como pop-ups, alertas y animación. Por supuesto, como cada cosa y UX y tienes que hacer una lluvia de ideas con el equipo, con tu cliente para escuchar sus comentarios sobre el prototipo. Por lo que aquí me gustaría señalar que los más prototipos que hago en Adobe XD, me parece que la forma más eficiente. Es un software ligero, fácil de usar y tiene muy fácil de usar en la medida en que, y como es la familia de Adobe, muchas características, muchas herramientas y teclas cortas son las mismas que en Photoshop, que usé hace varios años para el diseño de la app. Existen varias alternativas para Adobe XD, como FISMA y sketch si eres usuario de Mac. Pero en este curso nos enfocaremos en Adobe XD. Te mostraré cómo organizar tu prototipo, Cómo crear Desde qué empezar, y qué funciones tienes que tener en cuenta. Algunos pueden llamar prototipos de wireframes, algunos pueden llamar wireframes de prototipo, pero me apegaría a los prototipos como algo que tiene interactividad, que tiene capacidad para ser probado, algo que tiene comentarios para el usuario, algo que se puede analizar. Está más cerca del producto final en lugar de wireframe. Por lo que puede que tengas un wireframes clicable y alguien lo llame prototipo. Eso está bien. Aquí la importancia es acercarnos a los mejores resultados que sea posible. Y tus prototipos como otras cosas que hiciste. También cuentan con versiones, revisiones, y margen de mejora. Pero poner h escenario, serán más refinados y utilizables. En escenario prototipo ¿quiénes son capaces de ver qué cosas te pierdes? Es posible que tus wireframes no hayas incluido algunas pop-ups que mostrarán al usuario que esta operación fue exitosa. O tal vez haya algunos datos equivocados en el campo de entrada. Tienes que resaltarlo de alguna manera, dar comentarios de los usuarios. Por lo que estas pequeñas cosas que son realmente importantes para el usuario final están incluidas en tus prototipos. Y trata de explorar estos prototipos por ti mismo varias veces e implementar mayor interactividad posible para estar más cerca del producto final que será utilizado por los usuarios finales. 46. Lección XD proyección de clase: proyecto de la clase y el contacto interior: A continuación hagamos el registro. El registro será como éste. Ya tienes cuenta. Entonces este es el detonante para las personas que ya tienen la cuenta. Entonces viceversa, estamos vinculando esto, vincularemos esta pantalla a ésta. Y ya ves voy a prototipo de sanción y presiona este botón de inicio de sesión y agarra la flecha a esta pantalla. Aquí tenemos superposición de transición, desplazamiento a la reproducción de audio de arranque de arte anterior, reproducción de voz, etcétera. El gatillo podría ser golpeado. Caso de drogas, gamepad. Voz. Y la animación podría deslizarse a la izquierda, los derechos de deslizamiento como abajo. Podrás jugar un poco con ella, pero te explicaré lo esencial. Entonces si necesitamos ir de una pantalla a otra presionando significa que tenemos que tocar el botón. Entonces la transición es en realidad lo que necesitamos. Pero creo que la animación auto o sería mejor, déjame añadir un enlace a esta pantalla desde la pantalla de inicio de sesión. Vamos a intentarlo. Dice que la auto animación se usa mejor. Quieres animar cosas pequeñas. En este momento se ve un poco raro porque no tienen esta sensación de diferentes pantallas. Entonces animemos a la transición y veamos cómo funciona . Un poco mejor. K para el registro, necesitamos más campos para rellenar. lo mejor es un nombre de usuario, es correo electrónico. ¿ Qué más? Número de teléfono, contraseña, y repita pasaporte aquí pongamos el registro. No estoy seguro de cómo se verá el logo, pero esta es la estructura de nuestra app. Por lo general, para los diseñadores de UI si trabajas en los actos de nuevo, tienes que indicar el contraste, la colocación, quizás el área que es tomada por el elemento u objeto de grupo de objetos. Por supuesto, debería haber un texto Gran Bretaña. Por lo que una persona que trabaje después de ti entenderá si esta sección es para trató de usar los verdaderos titulares del lugar y déjame distribuir esto un poco. De acuerdo, entonces tenemos dos pantallas. Vamos a marcar esto también, ha hecho, vamos a preservar el flujo y vamos a ir con la pantalla de inicio. En la pantalla de inicio tenemos Filtro Buscar, comidas recomendadas y lista de restaurantes. Encontremos el ícono de Filtro en los íconos del fielder. Simplemente descárgalo si cualquiera de los íconos. Entonces es un filtro. Necesitamos icono de búsqueda a. Te animo a que no pases demasiado tiempo en diseñar iconos en tu escenario wireframe, ya que es solo un wireframe, Por eso suelo elegir iconos de las fuentes abiertas. Entonces tenemos búsqueda, tenemos filtro, tendremos pies. Comidas recomendadas y riesgos de restaurantes, comidas recomendadas. El tabulador activo donde estamos. Entonces creo que necesitamos ampliar la barra de búsqueda. Y de alguna manera para asegurarse de que estos dos elementos estén vinculados entre sí, parece comidas recomendadas y solo restaurantes, tal vez tu feed. Y ahora volvamos a nuestro Kit de UI y agarrar la tarjeta, algo así. Probemos esta y veamos si es adecuada para nuestra app. Demasiado espacio. En primer lugar, creo que podemos cambiar los antecedentes. Vamos a nombrar a este Pollo Frito. Aquí tendremos el logo del restaurante. Se puede escuchar descripción y no tener miedo de la gran imagen porque la comida se está vendiendo en el, usando este enfoque cuando tenemos aplicaciones, cuando tenemos sitios web o más bien promoción que no puede transferir olor, yo sentir que vamos a poder tener aquí algunos garabatos así. De acuerdo, déjame explicarte. Podemos crear tres tipos de pergaminos, que es Pan, horizontal, y vertical. Aquí usaremos el pergamino vertical. Para este, hay que seleccionar elemento, ampliar los bordes. Entonces tengo un grupo, lo agrupé, y ahora ves que somos capaces de desplazarse. Fácil. Entonces lo siguiente que vamos a hacer es tener algunos botones aquí, por supuesto, acción uno. Y hay una acción a vamos a tener orden o leer más. Ah, ves estos autos, DR dinámico y vamos y ahora tenemos función de búsqueda. Todavía quiere liberarse de este puro título de cuota. Por lo que tenemos una pantalla de inicio la cual enlazaremos a nuestro login. Sí, nos olvidamos de algunos ajustes. Mi perfil en el historial de pedidos. Por lo que he escogido tres iconos para lista ordenada y perfil de usuario. No estoy seguro de que sea la mejor opción para el historial de pedidos. Pondría reloj de arena demasiado tiempo dedicado a la colocación. Sé que soy yo quien hará los diseños visuales y tratando de ir un paso más allá y pensar en cómo se arreglarán. Por lo que además de la pantalla de inicio, necesitamos filtrar que tendrá categorías y así sucesivamente. Cuando busca que tengamos resultados de búsqueda, necesitamos comidas recomendadas y lista de restaurantes. Aquí es mejor usar la animación automática porque veremos este movimiento de luz. Y de nuevo, estamos pasando a la sección de un prototipo para enlazar pantallas. Pondré OTO animate cuando veas que se están moviendo. Por lo que tenemos dos secciones ya diseñadas. 47. Lección XD Proyecto: añadir interacción a los tramas de alambre: A continuación, creemos la pantalla para la comida. A lo mejor queremos ayudar a los usuarios a volver de esta página, entonces ya no necesitamos barra de búsqueda y toque. Por lo que aquí tendríamos que indicar el nombre de Neil. Encontré muy bonito nombre de pie y foto. Necesitamos restaurantes donde se esté cocinando. Las descripciones también importan, pero aún no como fotografía. Por lo que no me gustará lorem ipsum. Sí, no tenemos nada más. Entonces si tenemos una variedad, necesitamos otro elemento llamado botón de radio, vehículo, pez, Turquía. Tenemos un prototipo rho de la página. Ahora necesitamos que el botón para que sea mejor para nosotros reorganizar nuestro diseño a esta rejilla tan consistente de opio. No estoy seguro de si la tarjeta es nombre apropiado aquí, pero dejémosla por ahora. Y ahora necesitamos ajustar el número de alimentos que estamos ordenando. Y así, puedes crear tu propio conjunto de elementos prediseñados como este. Entonces ahora tenemos la comida es ver tenemos un garabato oculto o descripción que nos permite tener un área fija en la parte inferior. Y tenemos una variación, pescado vegano, pavo, y habrá más menos. Ahora vamos a conectar de nuevo nuestras pantallas. Por lo que la lista de correo estará conectada a una página de comidas. Todos tenemos que recordar el botón Atrás, que nos dirigirá a la pantalla anterior. Probemos nuestra app. variación no era la pantalla, por lo que la bajaremos mucho más fácil sin pop-up adicional o ventana transitoria todo en una sola pantalla. Piensa ahora podemos hacer el historial de pedidos, ordenarse a sí mismo. Cuando desee duplicar elementos horizontal o verticalmente, puede usar la codicia repetida. Entonces una vez que hayas agrupado y presionado repetir la avaricia, podemos llevarla hacia abajo o hacia la derecha, hacia la izquierda. Ya ves que es fácil crear tablas, cosas que se repiten y cambian simultáneamente. Pastor guisantes sureños y su costo. Pongámoslo aquí. El tiempo total de entrega probablemente no sea el mejor para indicar aquí porque aún queremos saber dónde entregar este alimento. Vamos a crear para llevar y cuatro, comida para llevar o entrega. Tendremos dos pestañas. Muy conveniente. A lo mejor. Nuestra familia tiene una ruta específica y el restaurante está cerca, por lo que podemos darles otra opción, que es comida para llevar. Y para un restaurante , son algunos ahorros en cuanto a entrega. Ahora, definamos qué secciones necesitamos más confianza ciudad, cuadra. Ya estará predefinido en el teléfono. Y la dirección será tomada prestada de los datos de mis perfiles. A pesar de que podremos cambiar tu K Una vez presionamos sobre las entradas sobre los datos ya mecanografiados texto, podemos cambiarlo si es necesario. Esa es la idea. Una vez que seleccionamos la entrega, entonces ingresamos información de contacto y dirección. Después nos llevarán a una pantalla de confirmación que nos mostrará cuántos minutos u horas deben esperar. Por lo que muestra costa total, muestra tiempo de entrega, muestra su vestido y pero sin confirmar, pero también voy a añadir otro botón editar orden. Porque una vez que un usuario o cambia de opinión, deberían poder volver a la pantalla anterior. A pesar de que tenemos esta flecha todavía no tan clara que podemos editar ordenada. Entonces tenemos que crear pantalla de éxito. Enhorabuena. Tu comida está en camino a tu casa, pide id y especie de temporizador aquí. Añadamos los enlaces. Estamos de inicio de sesión. Tenemos nuestra alimentación de comidas. Presione al pastor con salmonella y guisantes. Podemos desplazarse descripción. Por favor recuerda el desplazamiento vertical y horizontal. Podemos seleccionar la tarjeta Editar confirmada y el temporizador continúa. Es todo por ahora por parte de un prototipado de fidelidad media. Gracias a su entender cómo deben organizarse las pantallas. Puede seleccionar otro kit de interfaz de usuario si lo desea. Aquí hay un montón de ellos. Obtener material del kit de interfaz de usuario, wireframes de Microsoft, más. Ustedes son niños, pueden cosechar algún año. Esto no es importante. En el escenario de wireframing. No tienes que pensar mucho en el estilo de tu u Trato de probar el flujo para encontrar algunas brechas de diseño, brechas de flujo, brechas de UX y así sucesivamente, así como brechas de retroalimentación. El tiempo en diseñar Girl by frame debería desalojar con mucha precisión. Porque el wireframe es punto medio entre la investigación que has hecho antes y el diseño visual que tiene que ahorrar tiempo en el diseño visual. Por lo tanto, no exageres tratando de hacer las cosas perfectas en este escenario. ¿ De acuerdo? Por lo que muchas gracias por su aeropuerto y toda su larga lección. Es duro. A veces es aburrido, pero ya sabes, al final de los días, tienes estas pantallas, puedes presionar, puedes experimentar el diseño ¿no fue ahí? Hiciste una sensación muy, muy agradable cuando puedes compartir tu prototipo con tus amigos, tus compañeros y partes interesadas de lo que te darán una retroalimentación. Esperemos que buena retroalimentación. Y siguiente lección trataremos de definirla y hacerla perfecta. Gracias de nuevo y que pasen un buen rato. Nos vemos en nuestra próxima lección. 48. Prueba y evaluación: Una vez que hayas completado tus prototipos, puedes empezar a probar. Y las pruebas es el tema de este video, vale, esta es la conclusión de tu trabajo realizado hasta ahora. Y hay varias formas de hacer pruebas de usuario. En primer lugar, va entrevistas presenciales, y hay servicios de terceros y luego cuestionarios de seguimiento. El modo más eficiente, por supuesto, es cara a cara cosa a usar. Necesitas encontrar a tu público objetivo, el representante de tus usuarios. Hágales preguntas, pídeles que realicen una tarea. Necesitas tomar notas, tratar de ayudar a los usuarios a pensar en voz alta, y podrás poner notas sobre lo que piensan. Podrás utilizar equipos especiales como yo o cámaras de rastreo de dedos. Después preparas tus reportes y extraes los puntos necesarios para los cambios en la siguiente iteración. Otra forma de hacer pruebas de usuario es utilizar servicios de terceros. Hay muchos de ellos como pruebas de usuario, plug-in para XD, cirugías, forma tipo pyro, Encuesta, Monkey, reporte de usuario obtiene satisfacción, enorme respuesta. Clientes seguros, pregunten amablemente. Hay muchos, muchos, muchos otros los que puedes usar para tus pruebas de usuario. Y cuentan con informes integrados. Algunos de ellos tienen pruebas gratuitas limitadas a versiones. Por supuesto que son características de pago. Podrá elegir el servicio de acuerdo a los requisitos de su prueba. Las características que son necesarias para la prueba. Probablemente precio también será considerado. Y lo otro es tener cuestionarios de seguimiento. También puedes hacerlo a distancia o en persona. Podrás utilizar los Formularios de Google para elaborar tus años de pregunta si declaras las tareas y haces preguntas de seguimiento en la persona después de usar el prototipo te responderá. Llenaremos el cuestionario y podrás analizar una vez finalizada la prueba. correo electrónico, por supuesto, es la forma tradicional de obtener algunos comentarios de los usuarios depende del tipo de preguntas que tipo de pruebas de usuario esté haciendo. Ahí hay múltiples. Para trabajar con una gran audiencia, probablemente necesites seleccionar algo que se ofrece por servicios de terceros. Como dije antes, sí, se les paga, pero tienen esta audiencia y es posible que especifique los criterios necesarios para filtrar a las personas que no son su público objetivo. Entonces, echemos un vistazo a los tipos de pruebas. En primer lugar. Puede ser en el laboratorio o en el campo, UMass Carson, para venir a su oficina o regazo y realizar entrevista allí. O puedes hacerlo en un campo como el exterior y el café en el ambiente natural para el producto. Se puede moderar. En moderado, cuando te sientas cerca de persona y vigilas todo, ¿hizo él o ella haciendo es decir, puso notas como preguntas. Eso es prueba moderada. Podrás hacer prueba sin moderar. Pide a persona que use el sitio web o app y espera una respuesta. Puede ser presencial o remoto. Está bien. Tu informe debe incluir resumen de antecedentes. Es el entorno, las herramientas, día, hora, tal vez ya sea usando estos teléfonos móviles, por favor, deja esto también, porque es importante para una metodología de diseño de aplicaciones móviles que utilices la lista de escenarios y tareas y descripción de los participantes. Debido a que tiene escenarios, le pide al usuario que realice alguna tarea que tiene que estar en su informe. Por lo que te daré un ejemplo de informe de pruebas de usuario más adelante. Entonces a continuación van los resultados de las pruebas. Tienes que incluirlo. Se trata de una retroalimentación de los usuarios. Es una serie de exitosamente versus en realizar tareas exitosamente. Número de participantes, tiempo que se tardó en lograr cada escenario. Y sus hallazgos y recomendaciones como pros y contras y conclusión. Por lo que encontrarás algo interesante en tu prueba. Por supuesto que hay que bajarlo. Ese es el propósito de esta prueba para encontrar cosas interesantes, para obtener estos insights, para evitar frustraciones para mejorar, para definir el Product_Type más adelante. informe de prueba típico del usuario o el informe de usabilidad incluye un gran resumen, metodología, resultados de pruebas e insights. Resumen de antecedentes. Es el ambiente de la prueba donde está tomando, cuál era el espacio, el equipo, si es específico para modal, deberías ponerlo también. También la hora y la fecha deben indicarse en sus antecedentes. Verano. Metodología significa que incluye en su informe listas de escenarios y tareas, y descripción de los participantes. Por lo que tienes algunas tareas específicas que eres participante tiene que realizar. Por favor, inclúyalo. Porque de lo contrario no podrás analizar la situación después de las pruebas del usuario. De acuerdo, a continuación van los resultados de las pruebas. Por supuesto, sin resultados de pruebas, puedes ir a cualquier parte. Y los resultados de las pruebas incluyen comentarios de los usuarios. Por lo que le pide a sus participantes que piensen en voz alta si llena poco confundido con la navegación. De acuerdo, pusiste, trataste de obtener la mayor información posible del usuario. Y es agradable tener el número de participantes porque podrás comparar resultados y ver toda la imagen indica el tiempo que se tarda en lograr cada escenario en tu informe de usuario. Por supuesto, los insights también son importantes en el informe. Es posible que encuentres que hay algunos pros y contras. A lo mejor un participante te dará algunas ideas. ¿ Quién sabe? Bien conduciendo la entrevista, trate de pedirle al participante una conclusión. Lo que Él o ella se sintió bien realizando estas tareas. Y también escribe tu propia conclusión sobre la prueba. Considerando toda la información que tienes en las manos, ya sea una alta tasa de éxito o su baja tasa de éxito, si la gente estaba sufriendo con la búsqueda del artículo específico o era fácil de encontrar. Uno. Ya sea que sea fácil navegar en la aplicación o que sea difícil hacerlo. Puede probar un módulo específico o una nueva característica o un nuevo servicio que se haya introducido cuando el proyecto actual o puede probar todo el proyecto. Por lo que aquí puede expandir o reducir sus pruebas de usuario si es necesario. Una vez que hayas terminado las pruebas de usuario, podrás analizar los resultados. Y podría ser útil agrupar los hallazgos en temas de diseño y no diseño y comenzar a implementar los de sus wireframes y su arquitectura de información. Probablemente haya algunos otros hallazgos que requieren cambios en otras etapas de UX Design. Aquí está el ejemplo de formulario de informe de prueba de usuario. Y verás que hay verás que hay una descripción de una persona que fue cuestionada para realizar una acción. Y la mesa y la conclusión, puede pedir una conclusión, puede que no. Depende de la de su en su formato de prueba. Está bien. Entonces aquí tenemos fecha siete lugar de agosto, equipo de oficina, Samsung, a siete, herramientas, deck lodge, webcam, registro de escenario, éxito derecho de 0 a cinco, interiores, pros, contras, y tiempo que toma para realizar la acción. Enumeré si tres escenarios que el usuario tenía que realizar. Se trata de la inscripción, que el usuario marcó cuatro de cada cinco. Entonces es tasa de éxito. Descubrimos que necesitamos agregar cuenta de Vimeo para la autenticación y tiempo requerido para esta acción fue de 35 segundos. La otra actividad que pedimos es encontrarlos anotación para el alivio del estrés. Y recibió cinco estrellas. Pero tenemos que limitar el número de meditaciones a cinco en cada categoría. Porque tener muchas meditaciones, poco confusas, a veces creció tiempo que requieren, que necesitaba para realizar esta acción fue de un minuto y 14 segundos. Después le pedimos al usuario que sienta la información del perfil. Recibió tres estrellas de cada cinco porque hay muchos tipos de datos para que un usuario llene. Y decidimos dividir los datos personales y retrato psicológico en dos secciones o dos pasos. A2, usuario, dos minutos y dos segundos para llenar toda la información y la conclusión de los participantes es la siguiente. Me sentí muy conocedor usando esta app, es fácil apuntarme y comenzar a meditar. No obstante, preferiría tener cuenta de correo electrónico para autorización y cuestionador de perfil parecía un poco largo. Está bien. Por lo que recolectas este tipo de información de cada uno de tus participantes y es posible que tengas otro, el formulario de reporte general donde incluyes los aspectos más destacados de tus pruebas. 49. Descripción la sección de diseño de UI: En este video, vamos a repasar la sección de diseño de la interfaz de usuario, visión general de la interfaz de usuario, ¿verdad? Esto te está dando una visión general de diferentes interfaces en diferentes plataformas, diferentes sitios web, realmente dándote el otro lado de la UX, donde la UX normalmente va a estar más enfocada en la experiencia del usuario. Embudos de ventas, viajes de clientes donde la interfaz de usuario es la interfaz real con la que interactúan los usuarios, ¿no? Disposición, el contorno del sitio web, la interacción, la interactividad que van a estar teniendo hasta el momento de usar un sitio web en particular, usar una aplicación en particular, derecha, así que sigamos adelante y repasemos el resumen de la sección U-I. Por lo que en esta sección vamos a repasar la visión general de la interfaz de usuario. Vamos a repasar lo que eres, es cómo funciona. Aquí se puede ver obviamente desde la imagen de la derecha, esta va a ser la interfaz de usuario con la que vamos a estar trabajando en esta sección en particular. Se trata de entender realmente la interactividad de los usuarios, cómo están usando el producto, cómo se presenta, cuán fácil es para ellos navegar a través del uso de su producto, la facilidad de uso, y cualquier tipo de hipo o barrotes en el camino. Y luego vamos a repasar los tipos comunes de interfaces. Vamos a repasar varios tipos diferentes de sitios web, diferentes plataformas, y tipo de darte una visión general de los diferentes tipos de interfaces que hay en el mercado. Y luego vamos a repasar la visión general de las páginas de aterrizaje. Vamos a repasar diferentes tipos de páginas de aterrizaje, cómo están dispuestas, el propósito de las mismas, cuanto a lo que quieres que se utilicen en última instancia, cómo quieres presentarlas. que sea muy fácil y sencillo para el usuario entrar y tomar cualquier acción que estés buscando que tomen. Y luego los componentes de la interfaz de usuario, elementos. Y luego finalmente la UI controla, ¿verdad? Por lo que me emociona que empiece aquí en esta sección U-I. En esta sección también se incluye una tonelada de diferentes clases en Adobe XD, vamos a estar repasando diferentes diseños de encabezados, diseños comunes, móviles y de escritorio. botones de diseño de pie de página, diseño de entrada , diseño desplegable, y todos los diferentes tipos de diseñados para funciones móviles y de escritorio. Por lo que tenemos un poco de lecciones de mano en Adobe extreme en esta sección en particular así como las otras. Y me emociona que empiece y nos vemos en el próximo. 50. Descripción del diseño UI: En este video, vamos a repasar el diseño de la interfaz de usuario. Por lo que hemos pasado por el diseño de UX y todas las diferentes otras lecciones en la sección UX. Y el diseño de la interfaz de usuario realmente va a ser sobre la interfaz de usuario de los productos reales, ¿verdad? Cómo lo usan los usuarios, cómo están navegando a través de él. Y luego poder tener algo que es agradable y fácil para ellos de lograr cualquier tarea que estén buscando lograr con la interfaz de usuario, ¿verdad? Porque en última instancia, eso es lo más importante, ¿verdad? Pensarías en una interfaz de usuario para como Facebook. Facebook quiere que tengas una gran experiencia. Facebook quiere que te facilite poder conectarte con tus amigos y familiares, poder ver videos, poder publicar diferentes cosas en tu feed de noticias. Y así esa interfaz lo está haciendo. Entonces es muy fácil y sencillo para alguien hacerlo, ¿verdad? Entonces de eso vamos a estar hablando aquí en el diseño de la interfaz de usuario. Vamos a estar hablando de qué es, cómo funciona. Y entraremos en algunos detalles muy específicos. Y luego veremos UX versus UI. Entonces sigamos adelante y saltemos aquí. Entonces con el diseño de la interfaz de usuario, la interfaz de la interfaz de usuario, este es el proceso que utilizan los diseñadores para construir interfaces y software o cualquier tipo de dispositivos enfocados en la apariencia, la sensación y el estilo. Y como mencioné anteriormente, los diseñadores buscan crear interfaces que los usuarios encuentren fáciles en placentera. Quieren poder volver a la plataforma, ¿verdad? Entonces solo piensa de nuevo en Facebook. Cuando estás en Facebook, es una experiencia placentera. Es muy fácil de navegar. Sí, tienen bastantes actualizaciones, pero en su mayor parte, pero en su mayor parte, esas actualizaciones están potenciando la plataforma, potenciando la experiencia, ¿no? Por eso tienen miles de millones de usuarios. Y así en última instancia con el diseño de la interfaz de usuario, todo se trata del usuario y de cómo pueden navegar fácilmente por la interfaz. Queremos hacerlo súper simple, súper fácil. Tener una experiencia agradable, correcto, para todos los usuarios. Y cuando nos fijamos en UX versus UI, los diseñadores de UX se están preguntando cómo las preguntas, ¿cómo puede el flujo del usuario ser mucho más optimizado? ¿ Cómo puede ser mucho más estructurado? ¿ Cómo puede ser un proceso más fácil para el usuario real? Y luego los diseñadores de la interfaz de usuario haciendo las preguntas qué. Cuando pienses en el diseño de UX, piensa en psicología, comportamiento y predicción, ¿verdad? En esa sección, pasamos por bastante psicología conductual. El psicología desencadena muchas métricas de influencia diferentes, muchos disparadores de influencia diferentes. Y estamos buscando que la gente tome acción, ¿verdad? Descubre cuál es el proceso, cuál es el flujo. Eso es más fácil para ellos convertirse realmente en un cliente frente a la interfaz de usuario es que queremos que la gente pueda leer la información, acceder a ella, poder trabajar en ella y usarla y tener que ser experiencia muy placentera para el usuario final. Y las siguientes lecciones vamos a repasar diferentes tipos de interfaces. Y también vamos a repasar algún diseño de página de aterrizaje. Entonces eso va a estar aquí por la diferencia entre los diseñadores de UX y UI. Y nos vemos en el siguiente. 51. Tipos de diseño UI: En este video, vamos a repasar los diferentes tipos de tipos de diseño de interfaces de usuario. Entonces sigamos adelante y saltemos aquí. Hay una tonelada de diferentes tipos de diseño de interfaz de usuario. Y entonces lo que te voy a guiar por aquí hoy son solo algunos de los diferentes tipos de interfaces que estarás experimentando que estarás viendo en el mercado. Entonces sigamos adelante y saltemos aquí. Por lo que el primer tipo de interfaz va a ser un sitio web corporativo. Los sitios web corporativos van a ser una gran parte en esto porque esta es una de las primeras áreas en las que alguien puede mirar una marca o un negocio, ¿verdad? O tal vez incluso un producto. Cuando pasan a la página web, son capaces de ver cómo ese negocio se está representando justo en el mercado. Tan muy importante. Y luego las ventas en las páginas de aterrizaje. Y vamos a repasar algunos ejemplos de esos también. Y obviamente, ya sabes cuáles son las ventas y las páginas de aterrizaje. Contamos con la página de ventas que está impulsando el tráfico real para realizar una compra. Y la página de aterrizaje suele estar ahí para conducir el tráfico y en realidad conectar la información, derecha, recoger ese plomo. Y luego tenemos diferentes páginas promocionales donde hay algún tipo de oferta de descuento o una promoción que sea decirle a la gente, hey, 20% o 30% de descuento. Y es mucho así para tipos específicos de ventas. Y entonces tenemos comercio electrónico. tipos de sitios web de comercio electrónico son muy únicos y los clientes bien, gran jugador en el juego, un Shopify , sin embargo, muchos sitios web también están hechos a medida y están diseñados con la interfaz de usuario en la mía, ¿verdad? Entender que lo bajo del usuario, cómo están usando el sitio web y la facilidad de uso va a ser muy, muy importante. Por lo que el comercio electrónico, también vas a ver eso un poco. También en el software basado en SAS como servicio, vas a ver bastante esta interfaz. Te fijas en diferentes empresas de software que salen de Silicon Valley, la zona de Seattle también. Y entonces realmente cualquier tipo de empresa de software en general, se va a tener típicamente una interfaz de usuario muy única. Y luego tenemos sitios web móviles. Cuando estás mirando sitios web en particular en tu teléfono, normalmente va a tener una interfaz diferente a la que si lo estás haciendo en línea a través de tu escritorio hasta una tableta. Entonces, así que es realmente importante que sobre todo en los sitios web móviles, seas capaz de hacerlo súper simple, súper fácil para el usuario, porque si tienes demasiadas cosas todas en un solo lugar o todo está revuelto, entonces es va a hacerlo para que no quieran interactuar con el negocio o el sitio web usando su teléfono cuando el teléfono es más o menos utilizado la mayoría de las veces ahora, ¿verdad? La mayoría del tráfico proviene del móvil directo. Tan importante entender los sitios web móviles, la interfaz de usuario de eso, y cómo asegurarse de que sea fácil de usar para el usuario final. De acuerdo, así que echemos un vistazo a algunas de las diferentes interfaces de usuario aquí. Por lo que tenemos portales y redes sociales. Entonces como puedes ver aquí, la jerarquía de contenido en el layout aquí es muy sencilla, diseño muy minimalista aquí, muy contenido pesado. Esto está optimizado. Tienes diferentes idiomas, tienes típicamente como una función de búsqueda. Para que puedas encontrar diferentes artículos, diferentes videos. Esto suele ser lo mismo para como Facebook, también para como Pinterest o cualquiera de esas plataformas de redes sociales también. Y luego tenemos los sitios web corporativos. Y esto va a ser muy costumbre aquí. No obstante, va a ser consistente con el branding, los esquemas de color, ¿verdad? Y luego un muy poderoso por encima del redil. Y vamos a entrar en eso en otra lección exactamente qué es eso en el poder de eso. Y entonces representa áreas de pericia, ¿no? Tienes que gustarte escuchar de sección. Cuenta con sus servicios. Y esto también puede ser de una sola página. Podrás tener todos tus servicios, tu sobre nosotros, tu información de contacto todo en una sola página. No obstante, las organizaciones más grandes están justo donde diría que incluso solo las organizaciones y negocios modernos en general van a tener sitios web de varias páginas, ¿verdad? Como se puede ver ahí con Honda, aquí tienen una interfaz de usuario muy fácil. Tienen la búsqueda en la parte superior derecha, luego tienen el menú a la izquierda. Y también Sony tiene una interfaz de usuario muy agradable también. Para muy fácil conseguir el logo en la parte superior. Tienes el menú en la parte superior derecha también. Y es simplemente súper fácil de navegar. Tienes que hacer video ahí. Entonces, cuando miras ahora diferentes sitios web corporativos, lo que vas a notar es un panorama grande o un video en el principio mismo, ¿verdad? Y luego abajo que vas a tener el contenido diferente. Y entonces eso es típicamente lo que puedes esperar con los sitios web corporativos. Y luego tenemos las ventas en landing pages. Las ventas y las páginas de destino van a ser típicamente, ya sabes, asegurándose de navegar por la página con facilidad. Hay un buen flujo hacia él y hay consistencia con el enfoque de acción de branding consiguiendo que tomes una acción ya sea para comprar o para poner en tu información y normalmente va a ser una página se desplazaría ¿verdad? Vas a estar desplazando hacia arriba y hacia abajo esa página. Típicamente pesado en los contenidos para una página de ventas porque tiene que haber mucho convincente para que tomes acción o compres, ¿verdad? Por lo que hay muchos elementos de compromiso. Y sobre todo si tienes una página de ventas, quieres tener la seguridad ahí donde ves por aquí en red facts.com. Tienen asegurado a Norton. Cuentan con la garantía o garantía. Han autorizado.net porque quieren que te sientas seguro haciendo una compra a través de su plataforma, ¿verdad? Y luego la siguiente que tenemos son las páginas promocionales. Esto va a ser típicamente para nuevo producto, para cualquier tipo de promoción especial. Normalmente van a ser muchas animaciones diferentes, gráficas pesadas, tecnologías web de vanguardia por lo general. Y de verdad te va a dar una experiencia memorable, ¿verdad? Vas a venir a esta página. Se va a salir ese Jim, va a conseguir que lo recuerdes para que si no tomas una acción cuando aterrices en esa página o no compres o lo que sea esa página está queriendo que hagas, ¿verdad? Se va a recordar, lo vas a recordar, va a estar en el fondo de tu mente por el diseño único y cómo se presenta. Y luego tenemos los diferentes sitios web de comercio electrónico que usan. Vas a estar muy enfocado al producto, gustaría una consulta de búsqueda con muy poco texto, ¿verdad? Porque no estás tratando de tener un blog aquí o algo así donde puedas. Y la cosa es que realmente no estamos tratando de tener mucho texto aquí porque tu principal intención aquí. Para vender un producto, ¿verdad? Es un buen producto por la puerta y quieres que la gente venga aquí y compre. Y así esto es mucho así que va a estar lleno de diferentes productos. Va a ser fácil para la gente poder comprar el producto en las tarjetas y pasar por esas diferentes micro conversiones, ¿verdad? Para finalmente hacer la conversión macro, que es una compra, ¿no? Y luego tenemos el SaaS, que es el software como servicio. Esto va a ser un poco más único y complejo. No obstante, lo va a hacer para que sea muy fácil y sencillo para el usuario. Tienen mucha simplicidad en nuestra navegación. Muchos esquemas de colores diferentes basados en el branding. Y va a ser amigable con el móvil y la mayoría va a estar por encima del redil, ¿verdad? Y solo ten en cuenta, estos van a ser típicamente mucho más sofisticados, mucha arquitectura más compleja. No obstante, la interfaz va a ser muy importante aquí porque la gente va a estar pagando típicamente como una cuota mensual o tal vez pagando sobre una base anual o tal vez usted compra una vez, pero típicamente una cuota mensual para poder para utilizar el software. Va a haber cientos de miles, si no millones de personas usando el software dependiendo de lo que sea. Y va a ser importante que sea fácil de usar y tenga unos bonitos esquemas de color, lo que el branding y en última instancia es una experiencia placentera, trabajo dentro de la interfaz. Y entonces tenemos webs móviles, ¿verdad? Esto es algo en lo que necesitas estar muy, muy consciente cuando estás construyendo un sitio o si has hecho algún tipo de desarrollo web, quieres asegurarte de que tienes la capacidad ver cómo se va a ver el sitio en un versión móvil. Porque muchas veces se construirán sitios web y, ya sabes, las páginas de aterrizaje se construirán, ya sabes, las páginas de ventas. Nosotros conseguiremos a Bill y luego los miras en el móvil y están completamente apagados. Por lo que hay que mirar y asegurarse de que el tamaño de los márgenes de los elementos sean todos correctos, que todo cabe en el teléfono, cabe en la pantalla. Queremos ver el tamaño de la fuente, diferentes orientaciones, que las diferencias en el dispositivo, ¿no? Si tienes un teléfono Android versus un teléfono móvil, ¿tienes una tableta, no? Cómo esos Rog se vieron en esos dispositivos es crucial porque quieres poder hacerlo para que haya muy poca diferencia entre ellos yendo al escritorio o el teléfono real es justo, el teléfono es va a ser un poco más de un tipo de vista condensado, ¿verdad? Tipo de interfaz. Tan muy importante tener eso en el fondo tu mente. Y un par de cosas más de las que tener cuidado en lo que respecta a las características móviles. Quieres ver las funciones de deslizamiento, las diferentes funciones multitáctiles adicionales, y también el toque y mantenga pulsado ¿verdad? Muchas aplicaciones diferentes, muchos programas de software diferentes por ahí. Diferentes sitios web ahora están teniendo estas características ya configuradas dentro de ellos, o se están creando con estas funciones y características en mente. Entonces eso es sólo algo de lo que hay que tener en cuenta, sobre todo en los dispositivos móviles. Entonces eso va a estar aquí para el diseño de la interfaz de usuario, los tipos de diseño. Y nos vemos en el siguiente. 52. Descripción de páginas de aterrizaje: En este video, vamos a repasar los diferentes tipos de páginas de destino y los diferentes tipos de interfaces de usuario que tienen todas estas diferentes páginas de destino. Entonces esto va a ser algo en donde vamos a caminar por varios diseños de página de aterrizaje diferentes. Te voy a mostrar cómo están configuradas y por qué están configuradas de cierta manera. Y los diferentes factores de interfaz de usuario que entran en juego con cada tipo de página de aterrizaje. Entonces sigamos adelante y saltemos a la lección. Por lo que los tipos más comunes de páginas de aterrizaje son estos aquí mismo. Tienes tu página squeeze, que es un tipo de página de generación de leads. Y luego tienes tu página de captura de leads, que obviamente está ahí para recolectar información y leads, y luego tu página de ventas ahí para vender un producto o servicio, cualquiera que sea eso. Y luego la página de agradecimiento para que sepas que has pedido con éxito el producto o la información que has solicitado ha sido enviada a tu correo electrónico o puedes descargar el producto o lo que sea que sea. Escribe una página de agradecimiento. A veces es genial para poder dirigir al público al siguiente paso en tu embudo. Y luego la página de aterrizaje del error 404. Esta es una página donde si alguien va a alguna de las páginas de tu sitio y ya no existe. Se desea tener allí una página de aterrizaje 404. Y quieres tener algún contenido específico para poder usarlo a tu favor. Y entonces finalmente tenemos aquí la página de registro del webinar, sobre todo ahora donde mucha de la capacitación y mucha de las reuniones se están llevando a cabo en línea. El registro del webinar va a ser algo que muchos negocios diferentes van a empezar a implementar bastante. Entonces vamos a pasar por cada una de estas individualmente. Así que aprieta páginas. Estos suelen ser más cortos, más sencillos y contienen muy poco texto y muy pocas imágenes, sólo algo corto, dulce al grano. Y muchas veces estos van a ser pop-ups donde vas a un sitio web, tal vez estás leyendo un blog o lo que sea, o aterrizas en la página de inicio, verás un pop-up que aparecerá en la página real. Y te dará la opción ahí con poco gran x. puedes ver por el texto de peso, este de aquí te está diciendo que esperes para no irte porque está notando que estás tratando de salir del sitio web. Y así te está diciendo, oye, espera, vas a conseguir esto aquí gratis. Todo lo que tienes que hacer es poner información. Por lo que estas son las páginas de apretar típicamente van a ser muy cortas y dulces. menudo ni siquiera tiene tanto texto es solo hey, consigue tu copia de esto o Hey, consigue este ebook en particular o descarga o lo que sea que sea. Y va a ser típicamente en un pop-up. De acuerdo, entonces vamos a repasar la página de captura de plomo ahora. Las páginas de captura de plomo son las más utilizadas a lo largo del embudo de marketing porque son un poco más largas que una página de apretar porque te muestran y te dicen lo que vas a estar recibiendo, ¿verdad? De lo que vas a estar llegando hasta una descarga de ebook. El beneficio de eso, tal vez otras personas que se han beneficiado con el ebook real o los productos, ¿no? Pero no son el Islam como una página de ventas donde llegas a tener un montón de copias de ventas diferentes, muchos testimonios, marco de prueba social. Y así con una página de captura de plomo. Es realmente importante tener un buen equilibrio entre el ask y la recompensa en la página que te preguntan solo va a ser FirstName, LastName, y luego un email muchas veces diferentes dependiendo del tipo de landing pages que estés edificando. respecta a la página de captura de leads, es posible que desee recolectar alguna información sobre el usuario en cuanto a su número de teléfono, tal vez su dirección, ¿verdad? Basta con pensar por como bienes raíces, quizá quieras intentar obtener su puntaje crediticio, cosas de esa naturaleza que van a ser relevantes para ese mercado específico. Y así se puede ver en esta página en particular aquí, están haciendo un poco de venta en cuanto a por qué deberías descargar este ebook, por qué ahora deberías conocer esta lista de comprobación aquí, ¿verdad? Te están diciendo que vas a conseguir esto. Por eso es importante. Es por ello que debes descargarlo. Y te están dando un poco de spiel ahí, ¿verdad? Entonces veamos ahora una página de ventas. Ahora ésta va a ser la que realmente está impulsando las ventas, las compras, ¿no? El que va a requerir mucha copia, va a ser típicamente muy largo o dependiendo de cuánto tiempo quieras hacerlo. Pero definitivamente va a tener muchos elementos diferentes como prueba social, ¿no? Los testimonios, vas a tener mucha copia. Vas a tener muchos puntos de bala diferentes. Realmente vas a vender el producto, ¿verdad? Porque aquí es donde realmente quieres que la gente sepa qué es exactamente lo que está consiguiendo, ¿verdad? Y en una página de ventas puedes tener un video y todo depende del tamaño de la oferta, ¿no? que puedas vender un producto hasta por $50 con una página de ventas agradable y sencilla, ¿verdad? Pero si estás tratando de vender un producto por más de $1000, cierto, entonces vas a necesitar hacer algún tipo de Webinar o carta de ventas virtual donde tengas un video que les muestre lo que van a conseguir. Y luego los llevas a otra página, que es la página de ventas final para que realmente aprieten el gatillo. Pero en su mayor parte vas a ver una página de ventas que va a estar persuadiéndote para que compres el producto y necesita convencerte, escribir todo a través de las palabras, escribir la copia. Por qué debes comprar el producto, por qué es en tu mejor interés y por qué tu vida será mejor después de comprar el producto, ¿verdad? Y así la longitud normalmente va a variar, ¿verdad? Puedes tener algunas que son cortas, puedes tener algunas hay varias páginas diferentes, y todo se basa típicamente en la cantidad de información que necesitas para poder explicar el valor al usuario final justo como dije, justo sobre por qué tiene sentido que compren, por qué su vida va a mejorar al tener tu producto, correcto. Está bien. Entonces vamos a repasar la cosa. Páginas de confirmación Q. Entonces gracias. Las páginas de confirmación van a ser geniales porque permiten al usuario descargar el producto, para conseguir lo que sea que realmente optaron por y poner en su información. Pero entonces también te permite decirles, oye, ve aquí, echa un vistazo a esto, ve a mi página web y mira este artículo en particular, o ve a ver este enlace, este video, ¿no? Sea lo que sea, puedes dirigirlo fácilmente a otra fuente de información de tu sitio web, tal vez otro producto, cualquiera que sea ese, correcto. Una vez que consigues que lleguen a la página de agradecimiento, sabes que o bien han comprado algo o han descargado un producto o el descargado. Tipo de guía chichi o ebook. Y así hay plomo caliente. De acuerdo, así que pasemos a las 404 páginas de error ahora. Estos también son extremadamente poderosos aquí. Obviamente, realmente no quieres tener muchos de estos, pero, pero muchas veces tendrás un enlace en particular o tienes un artículo o una página en particular, sea lo que sea que esté en tu sitio web y ya no está ahí. No obstante, cuando tienes gente aterrizando en estas páginas, quieres que puedan estar trabajando por ti y no en tu contra, ¿verdad? Se quiere tener algún tipo de humor ahí dentro. Quieres hacerles saber, oye, escucha, esta página ya no está aquí, o por alguna razón se perdieron en el ciberespacio. Pero sé que aún te interesa hacer X, Y, y Z. Oye, echa un vistazo a este recurso por aquí, o echa un vistazo a este recurso por ahí, ¿verdad? Entonces quieres poder reconocer el, oye, esta página ya no está aquí, pero oye, aquí hay otra página que te puede interesar, ¿verdad? Por lo que es una gran manera de hacerlo para que entiendas que esta página ya no está aquí, pero aquí hay una alternativa que quizá te resulte útil también. Y luego finalmente aquí tenemos las páginas de registro del webinar. Ahora, estos se están volviendo mucho más populares en el mercado porque se ha hecho mucha capacitación en línea ahora en cuanto a incluso con equipos, están vendiendo en línea muchos productos y servicios diferentes, todo a través del zoom en línea presentaciones y videos, ¿verdad? lo que estas suelen ser páginas que tienen un usuario inscrito para una formación gratuita, típicamente de 45 a 90 minutos de duración. Y en ese entrenamiento, los usuarios o caminan por un proceso, una historia, un tipo de escenario que le muestra, hey, tú también puedes hacer esto, ¿verdad? Y así entra en la historia de fondo del individuo. A lo mejor es la empresa, les muestra lo que pueden hacer y esencialmente está dando valor por delante durante 45 a 90 minutos, ¿verdad? Si recuerdas el principio de reciprocidad, ¿verdad? Estás obteniendo todo este conocimiento gratuito, todos estos tres valor por hora y media, te vas a sentir obligado a hacer algo a cambio porque conseguiste la información gratuita sin costo, ¿verdad? Y estos van a ser los mejores para productos o servicios digitales que van en cualquier lugar entre 497 o 1997. Y al final de la presentación, suelen tener una página de compra de pedidos donde realmente se puede realizar la compra. No obstante, para diferentes productos que son boleto alto, diría que más de 2 mil dólares. Entonces aquí es donde tienes esta presentación aquí. Y luego al final de la presentación, tienes la capacidad de poder reservar un calendario, reservar slots, para hablar con uno de los reps de ventas. Y entonces típicamente te pondrán en la llamada y buscarán tenerte e invertir en algo típicamente superior a los 2 mil dólares, que va a ser como un tipo de programa uno contra uno o un tipo de coaching grupal, ¿verdad? Donde te caminan por todo paso a paso y te agarran de la mano. Entonces es por eso que esos suelen tener un precio más alto. Y así estos van a ser algunos de los tipos de páginas de aterrizaje más importantes que te encuentres en tu carrera. Y como dije, la página de registro del webinar es una de las más atrayentes y venideras y populares en el mercado hoy en día. Entonces eso va a estar aquí para las páginas de aterrizaje y nos vemos en la siguiente. 53. Lección XD : utilizar cuadrículas en XD: Hola ahí, arterias aquí. Y hoy vamos a hablar de rejillas. Las rejillas son muy importantes. Son importantes para el diseño de escritorio y móvil en más soldaduras y tenemos dos opciones. La primera opción es mi elección. Por lo que es 124 cuadrícula de columnas. Para móviles y para escritorio suelen usar cuadrícula de 12 columnas. Entonces vamos a discutir el diseño móvil. En primer lugar, aquí tenemos dos opciones, como dije, y una a la izquierda, que es de 12 columnas als us line para ajustar los elementos con más cuidado que en la cuadrícula de la cuarta columna, que es más rígida por así decirlo. Y ves que la mayoría de los tamaños están bastante bien aquí aunque. Es uno por dos segundos, 1 tercio, y así sucesivamente. Puedes usar ambos 1214 acordados U, suelo usar rejilla de 12 columnas porque es más fácil para mí disponer elementos dentro de áreas pequeñas. Tenemos justo esta área en como para alinear varios elementos, como iconos, por ejemplo, ver, puede que tengas más opciones para adjuntar estos dos. La codicia. A pesar de que aquí, el cuarto cono avaricia también tienes esta oportunidad, pero tendrás más dificultades. Aquí ves, puedes discutir el primer desarrollador front-end maduro con tu stakeholder, qué codicia será mejor para estos diseños. Pero la mayoría de los casos los diseñadores son esos. Estamos decidiendo qué codicia se utilizará en este y aquel proyecto K. Entonces, ¿para qué sirve la grilla? En primer lugar, es alinear los elementos correctamente. Digamos que tenemos formulario de contacto. Déjenme agarrar cuando, digamos que tenemos varias secciones las cuales nos gustaría tener en nuestra pantalla, el dashboard. Ya ves tenemos opción para hacer más la capacidad. Y si queremos, tener el crear, podemos arreglar módulos. Y la forma en que nos gustará, pero eso no será correcto. Por lo que ves la codicia nos permite crear maqueta correcta. Por lo que es más fácil leer un C aquí. No habremos estado de acuerdo. Podremos organizar nuestros bloques son aleatoriamente. Ahora mismo cuando usamos creed, podemos tener el mismo espaciado, los mismos márgenes entre los objetos horizontales y verticales. Entonces, ¿para qué sirve la grilla? Nuevamente, el propósito de la codicia es crear una maqueta correcta, correcta, en términos de posicionamiento, alineación, distribución. Entonces aquí ven nos cambiamos un poco más bajo aquí, espaciador allá. Y tenemos la barra lateral, que. Cerca de dos columnas. Cada bloque toma tres columnas y el espaciado es igual entre ellas. Por lo que nos permite encontrar el objeto adecuado, leer el título, y empezar a interactuar con el módulo, necesitamos ver líquido hasta que, éste. Y es más fácil para los desarrolladores front-end cuando tienes grid y trabajas con el grande correctamente. Por lo que tus elementos están alineados correctamente, directamente a la línea. Nuevamente, en cuanto al diseño móvil, como dije antes, puedes elegir entre estas dos opciones, aunque las ofertas para cuadrícula de columnas como predeterminado, no estoy seguro de que sea el camino correcto. No acostumbraba a la cuadrícula de 12 columnas. Y estoy tratando de trabajar dentro de las 12 columnas en el diseño móvil también. Ok, pasemos a los ajustes del credo en x D. Así que ya ves puedes tener el cuadrado o diseñar cuadrado te muestra solo cuadrícula de píxeles. Se puede ajustar el tamaño de píxel cuadrado. Por lo que una plaza toma 15. De acuerdo, volvamos al credo artístico. Podrás seleccionar el color de tu pactado y la capacidad. Es muy útil cuando no quieres que esto interfiera con tu ajuste de diseño. Destruir la capacidad a 0. Ya ves que son solo guías, se muestra característica muy útil. Y los siguientes ajustes son el número de columnas, columna de ancho de canaleta con y los márgenes. Por lo que canaleta será el espaciado entre columnas, columna con es el tamaño de la columna. Los márgenes son esos espacios en blanco a la izquierda y a la derecha respectivamente. De nuevo, puedes ajustar tu cuadrícula a tu proyecto justo sobre la marcha, pero ten cuidado, no la cambies una vez que iniciaste otras páginas porque no tienes permitido tener diferentes diseños en las páginas. Por lo que puedes crear diferente con tu área de contenido. Pocos desean decir que tienes algún sitio web de texto pesado como medio. Quieres que esta sección esté en el centro de la pantalla. Digamos que quieres tener más espaciado entre elementos cuando estás trabajando en un tablero complejo o en su hábil sitio web. Por lo que puedes ajustarlos a tus necesidades. Entonces no se preocupe si cambia los valores por defecto aquí. K, de nuevo, intenta hacer lo mejor para ajustar el, solo estamos mostrando los colores para que sea más fácil para ti ver. Trate de evitar tal colocación cuando nada apegado a ponerse de acuerdo. Entonces el, tu bloque sale de la columna, trató de encoger el elemento. Y los elementos internos también podrían estar alineados con el Read Me. Ahora ya ves tenemos UI más organizada y cuando quieras crear otra la cual tendrá otros datos aquí. Otros datos aquí, tal vez propósito diferente. Pero ya tendrás las medidas que te ayudarán a crear un diseño consistente, exactamente como en los otros bloques como aquí, aquí, aquí. ¿ De acuerdo? Trata de poner más atención a la alineación porque es realmente difícil para los codificadores front-end adivinar qué querías decir exactamente, ya sea su error o sea por diseño. Así que intenta mantener tu maqueta pegada a tus columnas, a tu avaricia. Muchas gracias por su atención. Nos vemos en nuestra próxima lección. Adiós. 54. Lección XD - diseño de una tarjeta: Hola ahí. El día de hoy vamos a trabajar en el diseño de la tarjeta. Por lo que para el diseño de autos, necesitamos saber varias cosas que son necesarias para la tarjeta. Es la especificación de la tarjeta. Por lo que si trabajas con el e-commerce, si trabajas con él para entrega, entrega de flores, cualquier otro diseño o proyecto basado en catálogo, puedes solicitar. Ya nos recibieron especificaciones sobre las tarjetas de su cliente. Contamos con foto o imagen descripción, precio, botón Agregar al carrito, etiqueta especial. Y esto es todo para la entrega de alimentos. Entonces entiendes, vale, ya encontré aquí una pizza muy sabrosa con salami y salsa. En primer lugar, vamos a decidir en qué espacio llevaremos nuestro carrito, nuestra disposición y tenemos codicia. En primer lugar, decidamos qué espacio nos llevaremos nuestros autos, k, qué tan grandes o pequeños con la tarjeta. Entonces empecemos. El punto de partida aquí será la imagen como ya adivinaste, K. Así que los productos, los artículos que se venden vía internet, decidirás sobre el tamaño de la imagen de la foto porque a veces hay cosas pequeñas que tienes que luke cuatro para hacer zoom eran la foto pequeña es suficiente para objeto específico? Digamos que queremos usar la pequeña foto de la pizza porque no podremos ver cómo es. No es sabroso Para nosotros, en otras palabras, está bien. Por lo que voy a empezar desde tres columnas aquí, pero ya ves que habrá una amplia y enorme cartas si lo vamos a hacer así. Ok. Entonces ahora ves esa tarjeta con una foto tan enorme, casi 400 píxeles. Ser muy bonito y sumas de imagen y capacidad de ver los contenidos exactos detuvieron la pizza. Entonces vamos a tratar de reducir un poco nuestras tarjetas y a ver si podemos usar a las columnas y ver. No tan bueno como yo sugeriría tener. A lo mejor lo disminuiré así. Creo que tres filas nos bastan así. Veamos qué más apropiado aquí. A lo mejor podemos ajustar el Credo para que se ajuste a nuestro o a k Nuestra foto es a 324 pixels. Y tratemos de ajustar la tarifa. Ajusté la rejilla para que esté más cerca de lo que necesitamos. Los parámetros son los siguientes, por lo que todavía tiene. Cuadrícula de 12 columnas, ancho de columna es 73186, márgenes de izquierda y derecha. Y ahora podemos borrar el pecho de las fotos. Se ve la distancia entre las columnas es casi la misma que la propia columna. Por lo que tenemos muy bonito espaciado y diferenciación entre los bloques entre las tarjetas que estamos a punto de diseñar. De acuerdo, entonces ahora vamos a la descripción o nos olvidamos el título, encabezamiento, titulado, nombre, nombre. Permítanme borrar los números. En ocasiones también se indica la cantidad en stock. Eso hace que el proceso de diseño de estas tarjetas sea más desafiante. Porque más elementos, es más, más preguntas, más problemas, y así sucesivamente. Pero te mostraré un par de trucos que podrás aplicar en el sencillo diseño de carrito. Y luego son muy útiles para ti en tus otros retos que emprenderás y tu UX por año. Entonces el nombre, vamos a escribir el nombre salami descripción. Dependiendo del tipo de producto que pueda agregar o no agregar. La descripción a veces depende del tipo de producto que estés vendiendo. Estás mostrando k. aquí. Siento que es bastante apropiado tener. ¿ Qué más hemos nombrado descripción precio en botón Carrito en especial etiquetado. Hagamos un prototipo bro. Trata de evitar tales valores como el 218. Entonces este es el botón de tarjeta y sencillo. Entonces hablemos un poco del diseño. En primer lugar, por qué pongo estos elementos de esa manera. No somos de la otra manera así o así o de cualquier otra manera. Entonces pasa para mí orgánicamente como automático. Entonces porque ya abastecí y enfrenté los problemas que ocurren cuando se hace contenido puede cambiar tu carrito y tú enfrentándote a un montón de problemas. En primer lugar, el espacio para tu nombre tiene que contener por favor dos líneas porque tu contenido puede cambiar. ¿ De acuerdo? Entonces, y aquí tienes la alineación. Una vez que tu nombre cambie a una sola línea, sola línea, eso será perfecto para ti porque está muy bien diseñado, equilibrado, bien, el precio puede aumentar, digamos que tenemos 9099 y se acerca más al centro. Está bien. Entonces si tienes 5, $0.05 euros, cinco dólares, tiene estos espacio para expandirse. Por lo que tiene estas área para expansión c, esta, el nombre, tiene la expansión a este lugar. Y tratar de no interferir Estos dos, déjame cambiarlo a éste porque no es necesariamente. Entonces vamos a reducir un poco la sección de precio k Así que puede ver los precios aquí, títulos aquí, y el resto será transferido a la siguiente línea. Por supuesto, no se puede predecir ningún caso, ningún escenario. Pero aquí puede agregar dos o tres líneas para una muestra de descripción y poner aquí y agregar una línea para cualquier caso para ver cómo se verá el carrito. Cuando las descripciones más largas, Gary, solo agrega un área segura que te permitirá matar otra línea en tu descripción. A pesar de que la mayoría de las descripciones tienen dos líneas, por favor tenga cuidado y trate de predecir algunos escenarios pendientes y agregar un pequeño espacio para otra línea adicional. En los casos en que la descripción es mucho más larga que ésta, puede utilizar efectos de desplazamiento. Por lo que el efecto hover te ayudará a ampliar tu descripción si es necesario. Por favor recuerda eso, solo ten en cuenta, es sencillo. Probemos otro contenido. Segunda tarjeta. Digamos que es o Salomon y de un gato o pizza. Necesitas mostrar diferentes estados de tu auto, cualquier contenido y general. El precio. Si va a la izquierda. Lo mismo aquí. Si quieres optará el botón cuando falte el contenido, estoy en cuando hay dos líneas de la descripción, Ver hay dinámica y también por favor recuerda sobre 0 estado o 0 caso. Porque a veces no hay una descripción aquí, puede predecir este escenario para y crear el diseño para el producto que no tiene la descripción. Porque a veces se ve muy azul, parece. Esto, realmente me molesta los ojos. Y volvamos a nuestra especificación. Nombre de la imagen de la foto, descripción , precio, Agregar al carrito botón etiqueta especial. Necesitamos crear una etiqueta especial. Por lo que aquí puede utilizar algún tipo de seguimiento. Diagonal. El seguimiento de diagonal te ayudará a encontrar un mejor lugar para las etiquetas. Las etiquetas serán algún tipo de puntos de control para que el usuario i lo traiga. En primer lugar, al precio al lado de la parte inferior, agregando al carrito. Ahora mismo veo que este lugar es más apropiado que este, esta esquina porque la tracción será bastante bandeja aquí por diagonal. Colocemos venta. A lo mejor navegado me hizo saber, tal vez bestseller, puede estar fuera de stock, necesita ser fresco y respetuoso con el medio ambiente, así sucesivamente y así sucesivamente. Hasta que se. Este es un prototipo de fidelidad media con, ya sabes que se definirán todas estas cosas. Cambiarás la fuente aquí. Añadirás alguna caja alrededor del exterior, conectarás el área de texto con foto. Por lo que parece todo el asunto. Venta. Por favor, crea varias etiquetas como best, best seller. Por lo que en perfecto caso escenario, tendrás la tarjeta predeterminada, la tarjeta con la etiqueta, y el carrito con una etiqueta sin descripción. ¿ De acuerdo? Por favor, considere estos diferentes estados, diferentes casos. El contenido es flexible, los candidatos dinámicos. Por favor prepare sus elementos de diseño de maquetas para estos casos. Porque a veces cuando ya empujaste tu diseño a la producción, verás estos vacíos. Ocurrirán en la etapa de gestión de contenidos cuando las personas sumarán el contenido real que veremos estos vacíos y podrás el que se encargue de arreglar estos errores. De acuerdo, así que tuvimos cuidado. Por favor, ten en cuenta es que el concepto es dinámico y trata de probar la diferente longitud de tu título, diferente longitud de descripciones, las imágenes podrían ofrecerte diferente escala, diferentes proporciones, pero solo inténtalo considerar un caso muy que pueda suceder y estar preparado para esto porque será menos doloroso hacerlo en este escenario en lugar hacerlo en el escenario de diseño visual y al decodificar la propagación. De acuerdo, muchas gracias y nos vemos en nuestra próxima lección. Adiós. 55. Componentes navegantes de UI: En este video, vamos a repasar los diferentes tipos de componentes de navegación. Ahora esto es algo que normalmente vas a estar viendo en la parte superior de un sitio web o parte superior de la aplicación donde tienes, digamos, diferentes componentes de barra de búsqueda, diferentes tipos de barras de menús, ¿verdad? Entonces sigamos adelante y saltemos a los componentes de navegación. Ok, entonces los diferentes tipos más comunes de componentes de navegación que vas a ver ya sea en un sitio web o aplicación o cualquier tipo de software que estés usando va a ser la barra de búsqueda. Tienes pan rallado, etiquetas de paginación, slider, diferentes iconos y el carrusel. Entonces vamos a seguir adelante y sumergirnos en estos un poco más. Entonces la primera aquí es la barra de búsqueda, ¿verdad? Y esto es típicamente donde tienes la capacidad de buscar en cualquier cosa en la página web allí si quieres encontrar, digamos un individuo, si quieres encontrar un determinado artículo, cierta publicación de blog, o una cierta pieza de información. Aquí es donde vas a poder utilizar la barra de búsqueda aquí. Y proporciona una tonelada de valor para el usuario final porque son capaces de encontrar algo muy rápido, ¿verdad? Si están encendidos, digamos YouTube, ¿verdad? Quieren poder encontrar un video específico pasando ahí y escribiendo ciertas palabras clave, ciertos nombres ¿verdad? En. Va a ser muchas veces muy sencillo y fácil para ellos encontrar lo que están buscando. El siguiente que vamos a cubrir aquí es el pan rallado. Esto es esencialmente algún tipo de línea que está mostrando la ruta actual a la ubicación real. Entonces ya verás aquí, tenemos el hogar, luego tenemos una barra hacia adelante Sobre Nosotros. Y la barra delantera es realmente la miga de pan porque te está mostrando la jerarquía, ¿verdad? Tienes en la parte superior, tienes casa, y luego tienes sobre nosotros bajo eso. Y luego bajo Sobre Nosotros, tienes historia, ¿verdad? Y está mostrando todos los diferentes niveles dentro de esa sección en particular. Y luego la paginación aquí. Aquí es donde se puede mirar al fondo, digamos, de un blog o tipo de publicación de noticias particular de sitio web donde se pueden ver todas las diferentes páginas e incluso páginas actuales en las que el sitio web tiene contenido, ¿no? Por lo que este es un tipo de navegación muy sencillo para crear y configurar. Es sólo mirar el post anterior y después poder estar al día de la publicación más reciente, ¿verdad? Y luego tenemos las etiquetas aquí. Y este suele ser el nivel más bajo de jerarquía para encontrar contenido preciso. Porque fácilmente puedes simplemente ir a la barra de búsqueda, escribiendo ahí lo que estás buscando. Puedes escribir como diferentes etiquetas como diseño UX, branding, lo que sea. No obstante, en su mayor parte, la forma más fácil y lo que la gente va a usar típicamente y comúnmente es solo la barra de búsqueda y también la navegación de encabezados en el menú para poder buscar exactamente lo que están buscando. Y luego tenemos el deslizador. Y esto se utiliza para establecer valor de organizar o valores y en particular dado conjunto. Entonces normalmente te va a mostrar como, oye, este es el público objetivo entre, ya sabes, 25 a 45, o te está mostrando, ya sabes, lo que prefieres. O aquí en la parte superior, te está diciendo que pongas el peso de tus mascotas. Veinticinco, hasta, digamos un par de 100 libras o lo que sea. O si estás en kilogramos, obviamente eso va a ser diferente. Pero esto normalmente va a ser algo que se muestra horizontalmente. Porque si lo haces verticalmente, va a ocupar mucho espacio y no va a quedar muy bien. Por lo que esto se presenta mejor en un tipo de diseño horizontal. Y entonces tenemos los iconos aquí. Iconos o uno de mis favoritos aquí porque realmente te dan una indicación de qué es esa área en particular, ¿verdad? Al igual que si miras lo más abajo ahí, tienes un e-commerce, legal y de cumplimiento. Tienes unos bonitos iconos ahí con los textos debajo de esos. Y realmente te dan una gran indicación de qué se trata esa sección. Entonces me gustan mucho estos. Obviamente hay un hueso a diferentes tipos de iconos y diferentes diseños. Y lo bueno de estos también es que se pueden diseñar estos de manera vertical u horizontal también. Y ambos van a quedar fantásticos. Obviamente lo que la vertical, quieres tener iconos más pequeños para que no estés ocupando demasiado espacio, demasiado espacio. No obstante, lo que las horizontales, puedes hacerlas mucho más grandes, igual que tenemos aquí en la parte inferior con el e-comm, legal y cumplimiento, y luego las finanzas y la banca. Pero funcionan fantásticos. Se ven geniales también. Y luego tenemos el carrusel. Aquí es típicamente donde vas a ver un portafolio donde tienes muchos proyectos diferentes que has hecho en el pasado. A lo mejor diferentes obras de arte, fotografía diferente. Eso va a ser lo mejor para. Ahí es donde puedes lograrlo. Entonces eso se puede hacer clic. Y digamos que alguien está en tu página web y está buscando tu portafolio. Se puede tener un carrusel ahí que le permita ver diferentes imágenes si soy proyectos en los que trabajaste y luego pueden dar click en esos específicamente y ser llevados a una página específica que les da algo más de información sobre eso proyecto particular. De acuerdo, entonces echemos un vistazo a algunos de los diferentes factores cuando se trata de las especificaciones móviles aquí. De acuerdo, así que recuerda, cuando estás diseñando una aplicación web, es importante que entiendas las diferencias con diferentes fuentes, diferentes elementos, y el tamaño que se va a requerir en un escritorio frente a un móvil, ¿no? Porque va a ser obviamente completamente diferente tipo de diseño, interfaz de usuario para un teléfono móvil. Y hay que poder estar al tanto de la diferencia ahí. Para que si tienes una aplicación muy bonita que funciona bien en el escritorio, pero puede estar quedando corto en el diseño en las especificaciones móviles. Es necesario tener eso en cuenta en todo momento. Y algunos de los factores clave que se quiere tener en cuenta aquí obviamente es el tamaño de la fuente, diferentes elementos, diferentes formas. Si tienes como personas llenando aplicaciones y en general el diseño y diseño así para que puedas maximizar la cantidad de espacio que tienes y no lo estás llevando todo revuelto. Por lo que es fácil para la persona navegar. Porque recuerden, los teléfonos móviles son esencialmente los líderes en este momento en las fuentes de tráfico. Y así es donde va a venir la mayoría del tráfico para aplicaciones de sitios web. Y así queremos que sea lo más fácil y simple y lo más suave posible que estos individuos estén navegando por la aplicación, ese sitio web, cualquiera que sea lo que pueda ser correcto a través de sus teléfonos móviles. Echemos un vistazo a las especificaciones móviles un poco más profundo. Entonces, ¿cuál es el tamaño de fuente aquí? Queremos asegurarnos de que tenemos al menos 16 píxeles y luego también aumentar el espaciado entre líneas. Se puede ver aquí en esta imagen a la derecha, este es un fantástico tipo de interfaz de usuario. Son agradables, de diseño, agradables y simples. No tienes demasiado, están pasando. Y luego también el tamaño de un elemento, al menos 44 por 44, para que no sea demasiado grande, no demasiado pequeño, pero es muy fácil de mirar y navegar. Y luego el heatmap, Aquí es donde obviamente vas a estar mirando donde la gente está haciendo clic, donde la gente realmente está pasando su tiempo, si están girando a la vez en, digamos, leyendo artículos versus en una página en particular, quieres poder ver qué están haciendo estos individuos en su teléfono móvil cuando están usando mi aplicación, cuando están en mi sitio web, ¿verdad? Tan importante ahí. Y luego los foros, ¿no? Si estás teniendo algún tipo de aplicación que tenga gente llenando su información, estás reuniendo o estás haciendo que la gente se registre como usuario, ¿verdad? Crear un nombre de usuario, tener una contraseña ahí. También quieres considerar tener un mapa de temperaturas aquí y hacerlo para que sea agradable y simple, ¿verdad? Aquí es donde tienen toda la página esencialmente como la forma real en la que eso es todo en lo que realmente se centran, ¿verdad? Porque solo piensa en tener un formulario en una página web en particular, página de aterrizaje o lo que sea, ¿verdad? Y tienes esa forma que solo está en una pequeña pieza de ese sitio web en particular en ese diseño para el móvil, ¿verdad? Va a ser muy distrayente para el usuario. Entonces quieres que hagan clic en un botón y los lleven a que se registren realmente para que eso sea todo lo que tienen delante para que se centren en solo hacer eso y en realidad se inscriban, ¿verdad? Menos distracciones. Y luego echemos un vistazo a algunas cuadrículas de diseño aquí. Se desea preservar la legibilidad. Quieres tener más aire en el espacio, ¿verdad? No quieres tener las cosas agitadas. Se quiere tener tres libros de texto para una columna, cinco ítems por fila. Considera tener un marco que sea específico y personalizado a lo que buscas lograr aquí. Pero este de aquí, se puede ver desde este teléfono móvil aquí es genial porque no hay demasiadas cosas pasando ahí. Es muy fácil mirar lo que está pasando ahí y lo que puedes elegir, lo que puedes seleccionar. Así que realmente piensa en las diferentes rejillas de diseño y las especificaciones en eso. De acuerdo, entonces echemos un vistazo a las especificaciones móviles aquí para un teléfono Android, ¿verdad? Porque van a ser un poco diferentes a como un IOS, un teléfono Apple y varios otros fabricantes de teléfonos por ahí. Por lo que para el retrato móvil, estas son las diferentes especificaciones que quieres tener en cuenta. Lo mismo para el paisaje móvil, un retrato para tabletas, y luego un paisaje para una tableta también. Entonces cuando estás diseñando diferentes elementos, diferentes componentes, ¿verdad? Se quiere tener en cuenta estos para el Android. Y entonces aquí es para el iPhone, quieres asegurarte de tener la columna y 16 margen. Y luego para el iPad, quieres tener una columna y 16 margen también. Y entonces obviamente vas a tener una orientación diferente para el paisaje del iPad y luego también para el diseño del escritorio. Así que asegúrate de tener una comprensión de los diferentes diseños, las especificaciones, ¿verdad? Cuando estás creando diferentes aplicaciones, porque durante la mayoría del tiempo, cuando estás diseñando o creando diferentes aplicaciones que se van a utilizar más o menos exclusivamente en el teléfono o en dispositivos portátiles. Por lo que quieres asegurarte de tener las especificaciones correctas, los tipos correctos de columnas por tipos de margen, para que aparezcan bien en los dispositivos adecuados. Y aquí algunas especificaciones para el Bootstrap. Se quiere mirar los teléfonos a nuestros 768 píxeles o a las tabletas. Se desea mirar 768 píxeles, 15 píxeles a cada lado de la columna. Nuevamente, esto es algo que quieres poder mirar y usar y navegar por tu cuenta. Solo te estoy dando aquí algunas especificaciones diferentes que debes tener en cuenta. Y lo que puedes hacer. Muchas veces es solo ir en diferentes aplicaciones, diferentes sitios web, y mira cuáles son las tendencias actuales, ¿verdad? Mira los diferentes reportes y esencialmente poder emular cómo estos chicos han trazado sus diseños actuales y poder mirar, vale, cuáles son algunas cosas que soy ideas, algunos marcos diferentes que puedo quitarle estos individuales, a partir de estas diferentes aplicaciones, estos diferentes diseños. Y entonces puedo usar en mis propios diseños también. Y luego finalmente aquí tenemos la orientación del usuario. Y esto es genial para los nuevos usuarios que introducen nuevas actualizaciones de funciones en una interfaz de usuario. Y entonces esto es típicamente lo que vas a ver cuando alguien entra a una página web que tiene diferentes contenidos, diferentes tipos de información donde quieres que la gente se inscriba, ¿verdad? O tal vez sea un servicio que sea de forma gratuita o tal vez de pago, o tal vez tengan una versión gratuita y luego puedas actualizar. Quieres que sea agradable y simple y fácil para ellos registrarse, introducir su información, y poder registrarse como usuario y ser parte de esa página web o aplicación de software en particular. Y así que eso va a estar aquí para los componentes de navegación de la interfaz de usuario. Y nos vemos en el siguiente. 56. Controlos UI: En este video, vamos a repasar los diferentes tipos de controles de interfaz de usuario. Por lo que estas van a ser cosas diferentes, como el campo desplegable en la parte superior de la navegación del encabezado, cosas como diferentes botones, diferentes casillas de verificación, diferentes toggles, y un montón de otros tipos diferentes de control. Entonces sigamos adelante y saltemos a la derecha en esto aquí. Por lo que los tipos más comunes de controles de interfaz de usuario van a ser los campos de texto, el desplegable, quizás un botón de opción si incluye eso también. Diferentes botones en general, un checkbox toggle y luego el día en el tiempo picker. Entonces puedes echar un vistazo a esto aquí en el lado derecho, poco hacerse una idea en cuanto a cómo se vería esto. Esto normalmente va a ser con diferentes software o diferentes tipos de programas. Donde, digamos por ejemplo, tienes como un software o programa de grabación de audio. Aquí es típicamente donde vas a ver muchos de estos diferentes botones ahí, como la radio, tal vez falta el encendido o apagado. Entonces esto es lo que puedes esperar muchas veces en los diferentes tipos de aplicaciones de programa. Si estás interesado en echar un vistazo a tal vez una interfaz de usuario realmente agradable para una aplicación de creación de audio, entonces te recomiendo encarecidamente que revises Fruity Loops. En realidad es un programa. Puedes hacer cuentas, puedes hacer música, y tiene una interfaz de usuario realmente agradable. Y ¿te dan una buena idea en cuanto a lo que me refiero aquí, en cuanto al control. Entonces lo siguiente que debes tener en cuenta aquí es el campo de texto. Y esto va a ser agradable y sencillo por solo tener tu texto ahí y a menudo solo va a tener un portador de lugar. Tan bonito y sencillo aquí para el campo de texto. Y luego el desplegable. Digamos que cuando estás en un sitio web y ves en el menú allá arriba en la parte superior puedes ver cartera por ejemplo. Debajo de eso, vas a ver el desplegable y vas a ver que, digamos, un portafolio de fotografía, portafolio de diseño web, portafolio de diferentes aplicaciones, ¿verdad? Es así como se puede pensar en el trabajo abajo. Va a ser donde tengas como una navegación de cabecera. Tienes un tema en particular. Son como digamos servicios, ¿verdad? Y luego vas a tener debajo de ahí diferentes tipos de servicios dentro de esa etiqueta en particular. El siguiente que vamos a estar mirando es el botón de radio. Y esto normalmente va a ser en una aplicación de software donde estás trabajando en ella y estás creando diferentes tipos de productos digitales, diferentes tipos de medios digitales, como videos, como audio. Y aquí es donde vas a tener la habilidad que solo tienes que hacer clic en el pequeño botón de ahí. Y va a poder encenderse, revisarse o desactivarse. Y echemos un vistazo a algunos de los más comunes, que son los botones que normalmente vas a ver en la mayoría de los sitios web, la mayoría de las diferentes aplicaciones. Estamos más a menudo que no, los botones van a tener algún tipo de llamada a acción donde te están diciendo que compres aquí, Agregar al carrito, aprende más, Consigue una cotización, ¿verdad? Y dentro de los botones a veces puedes tener como un emoji. A veces se puede tener como un ícono que realmente sacará el botón, además de tener algo de JavaScript en el botón también, haciéndolo destacar más al también poder tener una interactiva, tener diferentes esquemas de color en algunos array de 2 vías de sombra. Hay muchas cosas diferentes que puedes hacer con los botones. Y me encanta trabajar con botones porque es realmente lo que permite al usuario dar el siguiente paso en tu página de destino o en tu página de ventas, ¿verdad? Porque cuando están en esa página de ventas en particular, por ejemplo, están buscando comprar tu producto y quieres tener ese botón ahí. Eso es súper fácil, súper sencillo para que hagan click, ¿verdad? Y destaca. Y realmente les está haciendo saber que necesitan hacer clic en este botón. Y realmente está captando su atención ¿verdad? Aquí te dejamos algunos tipos adicionales de controles también. Tenemos las casillas aquí. Estos suelen estar en diferentes interfaces de usuario también. Normalmente los vas a ver como en algún tipo de cuestionario, tal vez como algún tipo de software de encuesta. Uno de los softwares que puedo pensar arriba de mi cabeza es como el Survey Monkey, donde esencialmente puedes recopilar comentarios de tus clientes o donde las empresas realmente pueden enviar encuestas a sus clientes reales y obtener esa retroalimentación. A menudo vas a ver esto en ese tipo de preguntas donde es opción múltiple o realmente solo en cualquier momento que haya algún tipo de cuestionario, ¿de acuerdo? Y estos siempre se van a presentar mejor verticalmente. No quieres tener estos horizontalmente, ¿verdad? Porque simplemente no se ve bien. Y así que asegúrate de que cuando estés agregando estos, las tengas dispuestas de manera vertical, ¿de acuerdo? Entonces tenemos los otros aquí que es el toggle. Estos también van a ser fantásticos para la pierna encendido y apagado. Aquí es donde mayormente vas a ver esto. Nuevamente, esto va a ser como en el tipo de producción musical de aplicaciones de software. Mucho donde estás encendiendo algo, apagando algo, tal vez como una radio en línea también. Ahí es donde normalmente vas a estar viendo esto. Y luego la interfaz de usuario controla hasta el Picker de fecha y hora también. Este es un bonito diseño aquí. Se puede ver que muchas veces hay en diferentes blogs. Puedes tener esto en, ya sabes, sitios web particulares. No obstante, esto en su mayoría se va a ver como diferentes aplicaciones de gestión de proyectos, ¿verdad? Porque eres capaz de tener una vista de pájaro del mes real o incluso el año real en él normalmente va a ser como un desplegable. No obstante, al igual que mencioné, aquí es donde realmente vas a ver esto es en el espacio de aplicaciones de gestión de proyectos. Otra cosa a tener en cuenta aquí cuando se trata controles de interfaz de usuario es realmente entender las cuadrículas porque esto te va a dar una idea realmente buena en cuanto a la legibilidad y la accesibilidad de una aplicación en particular o sitio web, ¿verdad? Se quiere pensar en términos de la cuadrícula para que se tenga el contenido dispuesto de manera precisa que está siguiendo estas rejillas. Por lo que es más fácil de digerir, más fácil de consumir, y es una experiencia placentera donde las cosas no están por todo el lugar, no están, ya sabes, confundidas. Todo es de una manera muy precisa lo que lo lleva. Por lo que los usuarios son capaces de consumir la información de una manera placentera y tener una gran experiencia. Entonces eso va a estar aquí para los controles de la interfaz de usuario, y nos vemos en el siguiente. 57. Lección XD - Mobile y Desktop: diseño de un jefe del: Y en esta lección se explorará el componente de las más UI donde interfaces de usuario que regañan encabezado y vamos a discutir tipos de diseños, también explorará un poco la versión móvil para cabecera. De acuerdo, empecemos. En primer lugar, ¿por qué el encabezado es importante? Es importante debido a que es una posición fija elementos que presentarán en cada una de tus páginas, pantallas, u otro tipo de ventanas y el usuario lo verá todo el tiempo. Por eso es que el encabezado debidamente factorizado es muy útil para la experiencia del usuario y el diseño de la interfaz de usuario. K, con la ayuda de cabecera, somos capaces de guiar al usuario. Entonces serviremos un propósito de navegación, como una especie de navegación superior. Y también podemos guiar a una persona a su cuenta personal, al carrito, exhibir el número telefónico por ejemplo, o resaltar algunas acciones culturales específicas u otros elementos que sean importantes y serán importantes durante toda la sesión de visitar el sitio web o aplicación móvil. De acuerdo, entonces describamos los tipos de navegación. Entonces imaginemos que este es el logotipo. Por lo general, el logo se coloca aquí o en el centro, en el medio, dependiendo del diseño que elijas. Pero empecemos de manera más tradicional. Y el logo suele estar aquí. Por lo que todo vino de periódicos de ahí, donde la gente lee el periódico desde la esquina superior izquierda. Estas reglas vienen de celda de impresión de periódicos esto por lo que solemos usar logo en el lado izquierdo. Es un enfoque más tradicional, pero a veces podemos ver logo centrado para encabezado. De acuerdo, vamos a crear una notificación. The About Us Servicios y contactos. Ok. Entonces en este caso, el encabezado servirá la función de navegación y molienda, bien, o la orientación. Por lo que a veces el primer enfoque móvil sensible hace que los dispositivos se vean de esta manera. Es un menú de hamburguesas. Colocado generalmente aquí. Ahí hay un mentor. Se transmite un menú desplegable el cual sirve la misma función de navegación. Es decir, escóndelo detrás del ícono. En mi opinión, si tienes el espacio para colocar tu menú, en este caso ayudar al usuario a encontrar su camino fácilmente. Ok. Por lo que esto requiere esfuerzo adicional como hacer clic en buscar un ítem específico Categoría y luego ir allí. Por lo que es mucho más fácil simplemente hacer clic aquí, y eso es todo. Entonces para Mobile, te sugeriría por supuesto, que usaras algo como esto. Es la forma tradicional. Nada de fantasía. Porque no tenemos mucho espacio como tenemos en el escritorio para colocar diversos elementos. Por lo general podemos romper esta sección a cuatro partes. Y cuando se trata de cuatro o más 56, se vuelve muy difícil para la gente leer. Por lo que sugiero que se adhieran a tres máximo para grupos de elementos. Puede ser un logotipo que también esté agrupado. Menú de hamburguesas y sección Cuenta podrían colocarse aquí junto con el carrito. Por lo que están un poco más cerca el uno del otro en lugar de logotipo del menú. De acuerdo, intentemos sumar dos secciones para conteo y para tarjeta. Veamos cómo estas páginas, estos enlaces podrían implementarse en una pantalla tan pequeña. De acuerdo, estoy dibujando un diseño de fila. Por lo general tenemos un contraste aquí, agregamos contraste por nosotros, me refiero a diseñadores. Estos elementos están ahí, Es Kerala categorías o páginas web. A ir aquí. Por favor, ten cuidado con el tamaño de la fuente usando en dispositivos pequeños. Por lo que si solo tienes tres, puedes agregar siete elementos redondos en 27 pixeles Font. ¿ De acuerdo? Entonces esto es solo para que predigas algún escenario si ocurrirán nuevas páginas, ¿cómo manejarás cómo gestionará el sistema esta actualización? este momento puedes tener tres colocando en la parte superior centrada, bit inferior puede hacer así. Apenas acortando el menú. Intentemos ver cómo se verá nuestro prototipo con el menú desplegable. Char. C, bastante fácil. Y en otros pidieron agregar más artículos si fuera necesario, porque generalmente los sitios web, las apps, el cambio y hay que estar listo para esto. De acuerdo, volvamos a nuestros grupos. Entonces tenemos tres grupos aquí. Uno sirviendo la función de navegación, logo, es el branding. Y aquí tenemos también funcionalidad, un grupo, estos dos juntos porque es composición más o menos equilibrada, solo el color un poco y el tamaño. Y cabecera de aspecto perfecto. Además del menú, la navegación, la configuración de la cuenta, el carrito u otros ajustes u otras secciones. También puede haber una función de búsqueda. Una función de búsqueda también puede ser ocultarlo detrás del icono. Una vez que presionaste el icono de búsqueda, el puerto de entrada se expande y luego podrás escribir tu consulta de búsqueda. A veces la barra de búsqueda ya está aquí. Por lo que puedes diseñar una barra de búsqueda como esta. Aquí podrás considerar que el trabajo se hace para barra de búsqueda porque una vez que una persona haga clic en el campo de búsqueda, descomposición Bard se expandirá al sistema Android o IOS, mostrará que las letras junto con el botón Enter. Entonces aquí no necesitamos ningún otro elemento. Y más que eso, aquí sustituimos un elemento, como Go o button like o arrow que muestra algún proceso padre para proceder. El dato significa que vamos a hacer reacciones, lo cual es en primer lugar, estamos dando click en la barra de búsqueda. Después escribimos el coro aquí en algún lugar del teclado, y luego regresamos y presionamos este botón. Esta transición no es tan difícil, pero aún así podemos evitar esta acción adicional implementando botones tímidos para Android o iPhone. De acuerdo, déjame, aquí vamos. Ahora ves este botón del que hablé. En estos días, la gente suele empezar desde el diseño móvil murmura diseño porque más personas que usan teléfonos móviles para servir a internet. Y es por eso que el enfoque Mobile-First es muy importante y muy real a la carta. En estos días, es más fácil cuando tienes un área más pequeña para el diseño, transfiérala a un área más amplia y no encontrarás problemas con el espacio una vez que hayas encontrado el espacio en una pantalla de dimensión más pequeña otra vez, aquí, yo también sugeriría apegarte a un menor número de grupos, pero aún así podemos integrar cosa adicional como número. Por ejemplo, lindo así. No me tomes mal. Es un prototipo, es el wireframe solo mostrándote la estructura del encabezado, ¿de acuerdo? Y se ve en esta pantalla esto es más o menos confiable que si nosotros, por ejemplo, pusiéramos este número aquí. Se ve un poco legible. Pero de nuevo, no es el enfoque perfecto. Si coloca su número de teléfono, por favor trate de encontrar formas más estéticas hacerlo en lugar de hacer lo que mostré en la muestra. De acuerdo, otra cosa que es interesante en el rubro, podría haber un nivel adicional de navegación u otra información. Podría ser teléfono, podrían ser términos legales. Por lo tanto, utiliza la información completa. Sí, información útil. Muchas gracias por su atención. Espero que esta lección sea útil. 58. Lección XD - Mobile y Desktop: Diseño de ascenso: En este video, aprenderemos a crear un desplegable. Para desplegable, tenemos que crear dos estados. Primero es el predeterminado y el R1, que ya es menú expandido o algo así. Entonces vamos a graficar voy a crear un menú abstracto. Este es nuestro estado por defecto. Ahora necesitamos hacer un componente a partir de este grupo de elementos. Entonces usando el control k, ahora tenemos la capacidad de agregar estados adicionales a nuestro elemento, y es un estado estacionario. Por lo que vemos este estado por defecto y el estado de hover en el estado de hover, estamos diseñando lo visual de nuestro desplegable. Vamos a intentarlo. Ok, nos olvidamos de cambiar triángulo. Ver. También puedes usar onclick event, pero para esto, tienes que crear otro tablero de arte y lleva más tiempo. Pero en algunos casos es inevitable porque la interacción funciona sobre el onclick. Por lo que la expansión de su trabajo hacia abajo estará disponible sólo después de hacer clic en el elemento. Para ello, es necesario crear adicionales a bordo y conectar estas tablas de arte entre sí. Te mostraré un ejemplo cómo se ve. He borrado el estado de hover, así que uno interfiere con nuestro prototipo. Entonces una vez que he hecho clic, veo elemento adicional. Podrás integrar efecto hover para cada uno de estos que sea necesario porque tu usuario tiene que entender qué elemento aquí está a punto de seleccionar. Por lo que sería bueno si pudieras agregar algo de resalte aquí para los elementos que serán seleccionados de la lista. Yo diminuta destaque es nuestro acarreo. Este enfoque, este método podría ser utilizado en los menús móviles. Nuevamente, podría ser hover, podría ser onclick Reino Unido presumir que habrá alguna funcionalidad adicional, algún menú adicional que utilices. Entonces en este caso es en lo más probable es que utilicemos tableros de arte separados porque la interacción se basará en el click. Por lo que habrá dos pantallas diferentes mostrando colapso cerrado en un menú colapsado. De acuerdo, déjame mostrarte un ejemplo. Entonces estoy dibujando dos rectángulos, conectarlos entre sí, creando una especie de fondo que debería ser contrastante. Estos elementos se cambiarán a x, por así decirlo, o el icono de kilo no prestan mucha atención en los enormes bloques. Por supuesto que tienes que ser más preciso, más nuevo diseño. ¿De acuerdo? Y aquí tenemos a Vout. Aquí vamos. Mi posición en diferente. Ese no es el caso aquí. Vamos a intentarlo. Por lo que hago click y tenemos una ligera animación aquí, lo cual es bueno. Este enfoque se utiliza generalmente para un sitio web móvil primero siestas. Permítanme presentarles el botón de toque de esta manera. Ahora. Ahora tienes estos conocimientos de cómo crear menús interactivos, menús desplegables. Podrás aplicar este conocimiento a los menús desplegables en tu kit de UI, ya sea un sistema complejo o simple, 1 de mayo aplica esto al diseñar la navegación para tu sitio web y por supuesto el menú para tu aplicación móvil. Prueba un par de veces por UNA cosa sobre las áreas de aplicación y componentes como este donde pueden ser útiles. Gracias por su atención. Nos vemos en nuestra próxima lección. 59. Descripción de los diseños comunes: De acuerdo, entonces en este video, vamos a repasar algunos de los diseños más comunes de contenido en un sitio web o aplicación en particular, cualquiera que sea. Entonces vamos a caminar por varios ejemplos diferentes aquí. Y entonces Arthur te va a guiar a través de cómo configurar esto y crear esto y Adobe XD. Entonces como pueden ver aquí, tenemos este sitio web en particular que estamos viendo. Y lo que estamos viendo aquí es cómo se presenta el contenido, ¿no? Y me gusta mucho este ejemplo particular de aquí, porque se puede ver aquí abajo que tienen como un H1 justo aquí. Y entonces tienen el texto del párrafo justo debajo de esto. Y me gusta mucho cómo hay muchos espacios en blanco aquí porque realmente llama la atención hacia el texto, hacia tu imagen, llega a que los usuarios realmente presten atención a esto. Y así bajamos aquí. Aquí es donde se pone un poco revuelto aquí arriba. Hay bastante cosas, sin embargo, puedes salirte con la tuya porque sí se ve bien. No obstante, para mí, lo desglosaría en tal vez dos o tres secciones diferentes. Creo que aquí está pasando mucho y se puede poner un poco revoltoso aquí arriba. Ahora bien, este es un buen diseño aquí también. mí me gusta esto hasta el ícono y luego algo de texto y luego un poco de texto de párrafo debajo de eso. Y luego hay un botón aquí mismo. Pero realmente me encantó sólo este blanco o este espaciado aquí. En cuanto al texto aquí, el contenido del botón. Y hay esta enorme brecha aquí porque realmente quiere dibujen los ojos en este contenido en particular. Y también hacen un buen trabajo aquí abajo también. Esto también es bastante bueno aquí. Simplemente tienen texto de edición aquí con el párrafo y luego tienen las empresas reales con las que trabajan. Pero me gusta este de aquí también, donde tienen el ícono y luego el texto Encabezado, y luego un párrafo corto y luego el botón real. Esto es lo que creo que es uno de los mejores tipos de diseños donde tienes mucho espacio que está abierto. Tienes un icono y luego tienes algún texto de encabezado, y luego el párrafo. Y eso va a ser más a menudo que no, el mejor tipo de maquetación porque permite que fácilmente te dirijas a este contenido aquí y realmente tomar cualquier acción que este sitio web quiera que hagas. Ahora si bajamos por aquí, no tan mal, y entonces el resto de la página web se ve bastante bien y ver cómo tienen su blog aquí. Ok, entonces su blog está por todas partes. Creo que esto es demasiado aquí. Yo hubiera tenido tal vez imágenes más pequeñas. Vamos a ver aquí. Está bien. Por lo que su contenido de blog aquí no es para Matt también. Tienen los rubros. Entonces esto sería como un H1, H2, H3 y así sucesivamente y así sucesivamente. Entonces ahora echemos un vistazo a mi página web aquí y quiero mostrarles cómo se presenta esto aquí en cuanto al contenido. Por lo que tengo aquí las tres áreas centrales. Tengo los tres iconos diferentes y tengo el contenido bajo eso. Y luego hay algunas referencias, y luego hay contenido aquí mismo con el rubro. Y luego lo mismo aquí también. Y es bastante sencillo, ¿verdad? Y luego hay algunos testimonios reales diferentes aquí en lo que respecta a los clientes. Y luego déjame mostrarles cómo se presenta el servicio. Y este es mi favorito porque es muy preciso y es muy llamativo para el usuario entrar aquí y poder mirar los diferentes servicios y cómo se presenta esto es muy, muy preciso para que sea atractivo para el usuario. Entonces como puedes ver aquí, está la imagen de la izquierda y hay contenidos a la derecha. Y hay como un desplegable aquí, justo donde se puede ver entregable completo. Por lo que este es un informe integral aquí, revisión. Y luego pueden mirar los entregables completos y bajo el botón Aprender más, lo mismo aquí, SMB y alcance empresarial. Hay una imagen a la derecha y luego donde se puede ver entregable completo. Entonces me gusta este tipo particular de maquetación porque permite proporcionar contexto a lo que es el contenido. Pero entonces también se presenta de una manera muy placentera, llamativa, ¿verdad? Entonces ahora echemos un vistazo a algunos otros ejemplos aquí. Echemos un vistazo a esta página web de abogado en particular que vimos en otro video. Y veamos cómo están dispuestos aquí. Creo que esto es demasiado. Esto está todo revuelto aquí arriba. Entonces muchas de las cosas que están haciendo para como SEO, donde tienen aquí todos estos enlaces diferentes. Entonces puede ser por eso también, pero yo tendría estos típicamente en el fondo aquí abajo. Entonces echemos un vistazo a su pertenecer aquí. De acuerdo, entonces el blog no es para bien presentado solo simple disposición de blog aquí. Tiene sus rubros. ¿ De acuerdo? Por lo que este tipo de sitios web, realmente no vas a ver mucho diseño de UI porque su principal intención es solo conseguir que entres a este sitio web y hagas una llamada telefónica o contactes con ellos. Entonces no es el mejor tipo de interfaz de usuario aquí. Pero echemos un vistazo a otro aquí. Esto es la visibilidad de Ignite. Esto es, creo una agencia de mercadotecnia. Y una de las cosas que no me gusta este sitio web es que aquí está pasando demasiado. Hay mucho contenido. Entonces aquí mismo, se puede ver que hay una agencia de marketing de primera categoría y ahí hay un nombre de empresa, como si solo estuviéramos mirando atrás la escuela. Entonces está el motor de búsqueda número uno. Y luego en EU, Reino Unido y Canadá. Y luego es que pasan tantas cosas ahí. Al igual que tres diferentes cuatro colores diferentes. ¿ Verdad? Y creo que sería mucho más fácil tenerlo más llano y no tanto cosas pasando aquí. Entonces a lo mejor me gustaría el texto verde o tal vez sólo un texto blanco y lo pondría hasta donde hace la empresa, ¿verdad? En lugar de tener todas estas cosas aquí porque, ya sabes, hay tanto que leer y luego ir y bajar aquí. Todo esto está bastante revuelto también. Creo que esto podría ser un mejor diseño. No obstante, aún permite la facilidad de uso porque está todo en un solo lugar. Entonces eso también es un beneficio. Viniendo aquí abajo, no tan mal también. Y luego veamos aquí mismo. Creo que esto también está demasiado revuelto. Creo que debería haber algunos textos por encima de esto que diga, somos capaces de hacer XYZ. Podemos ayudarte a lograr, ya sabes, ABC y después tener un botón ahí. Algo así como lo tengo aquí encendido cuando vamos al hogar aquí abajo, cómo está listo para más proyectos de seguridad, ¿verdad? Sí. Elegido Saber más. Entonces creo que algo así aquí donde dice listo para más clientes o lo que sea que sea. Creo que eso realmente podría beneficiar este año. Pero en general, esto también es bastante bueno. Yo sólo creo que aquí están pasando muchas cosas en su mayor parte, realmente buscaría hacer esto mucho más fácil, para navegar, mucho más fácil en cuanto a no tener tantas cosas todas revueltas en un solo lugar. Está bien. Al igual que mencioné antes, creo que este de aquí probablemente fue el mejor porque tienen mucho espacio en blanco, ¿verdad? No tenemos suficiente espacio en blanco en el otro. Porque mucho de su revoltoso aquí mismo. Tienes un poco de espacio en blanco justo ahí, un poco justo ahí, ninguno aquí. Y sólo un poquito aquí, ¿verdad? Muy, muy poco frente a éste. Tener una tonelada de espacios en blanco. Espacio en blanco aquí, rango, todo lo que es es el contenido y el botón. Y entonces justo aquí también, teniendo esto, ya sabes, sólo estar en el medio aquí. Este es un mejor tipo de diseño, mejor tipo de interfaz de usuario. Es mucho más fácil para el usuario y permitir que más placentero se acerquen a este sitio web y, ya sabes, cumplir con cualquier acción que se requiera. Entonces eso va a estar aquí para el diseño común. Entonces vas a ver que Arthur te va a guiar por otra lección en Adobe XD en cuanto a cómo crearlos y cómo configurarlos. Entonces eso va a estar aquí en este video y te veremos en el siguiente. 60. Lección XD - diseños comunes: Hola ahí. En esta lección vamos a hablar de tipos de diseños, diferentes diseños para tus páginas. Y nos gustaría empezar desde un enfoque más tradicional como imagen más encabezado de texto. Entonces nada de fantasía. Te mostraré una licenciatura cómo se integra en crear dos. Tenemos un margen aquí y un margen en el lado derecho se ve espacioso. Aquí ves que el contenido puede tardar menos o más. Se puede ajustar ancho y Haidt en realidad se puede ajustar sólo el ancho de los contenidos porque Haidt suele calcular cuando se tiene contenido real dentro de la caja k Así que digamos que sólo tenemos prolíneas y esto se ve bien. No se ve tan bonito. ¿ De acuerdo? Entonces si tienes menos contenido, trataste de reducir tu cuadro de texto, por lo que se ve compacto, veritable. Ton trató de difundir tus palabras por toda la página. No vamos a trabajar. Lo mismo aquí. Deja la versión espejo de este y acabo de aumentar el tamaño de la imagen a la derecha y disminuir el tamaño del número de palabras dentro del contenedor. Así que averigüe qué tipo de contenido tendrá el sitio web en las secciones e intente ajustar sus blogs a su longitud para que se vea más equilibrada composición. El otro camino es hacerlo paso a paso. Por lo que hay un encabezado con un cuadro de texto, hay una imagen por estos elementos, presumo que no sólo las etiquetas de encabezamiento y la imagen podrían ser diferentes elementos combinan de diferentes maneras. Por lo tanto, intenta aplicar este enfoque a tu diseño y piensa no solo en la imagen y en las etiquetas. Ser un formulario opt-in podría ser un slider, cualquiera que sea, cualquiera que sea, solo trata de arreglarlo apropiadamente para que se vea muy acogedor para la IA y amado por los usuarios en estos días, se hacen más diseños usando el primer enfoque móvil en el aquí Te sugeriré tener este diseño tan como paso a paso, así que es un enfoque consistente, ¿kay? Entonces hay un elemento en otro, y el tercero, déjame mostrar cómo se veía aquí. Tener un encabezado de imagen. Por lo que este enfoque funciona mejor aquí. Aunque disminuyamos el tamaño a su acero mínimo, podremos usar algo como esto a la rejilla de columnas aquí. Una palabra que así, como en el diseño de escritorio. Por lo tanto, por favor considere esta diferencia cuando haga primero el diseño de escritorio, por favor piense en cómo nos veremos la versión móvil. Creo que será consistente, igual que aquí. La imagen continúa desde el lado izquierdo, significa que la imagen estará en la parte superior. Si la imagen va del lado derecho como aquí que en el teléfono biliar, se verá así. Está bien. Ten en cuenta que en cada uno de estos diseños, debes considerar un adjuntar tus elementos al diseño saludar k Recuerda, puedes usar estos bloque y este bloque, este bloque, y luego el otro, solo para tener alguna variación para que la gente no esquema, estás gravado tratando de activar el ojo para leer un texto dentro de él y presionar el botón. Ok, voy a mostrar las justas las barras y para referencia. De acuerdo, entonces ahora ya ves cómo funciona. Con el par de llamada a la acción. Puede colocar botón como este, pero necesita trabajar en la parte visual. Por lo que esta área estará junto con esto, donde tus elementos deben estar alineados con algo porque una vez que salga del credo, tú, como usuario te darás cuenta. De acuerdo, estos son los diseños más comunes, más populares, más fáciles que puedes integrar y usar tu diseño. Por supuesto, para sistemas complejos que no funcionarán porque hay que pensar en la estructura. Existen diferentes tipos de elementos y hay muchos de ellos mucho más que en la página web corporativa. Por lo que requiere un análisis adicional y una mayor investigación sobre cuál sería la mejor manera, en la cual será la mejor estructura para su contenido en el tablero, en los sistemas complejos, en los demás controles y así sucesivamente. Te diré que se trata de dos tipos porque esta es la versión espejo de este y el otro está más adaptado a los teléfonos móviles. Y por supuesto, con los complejos sistemas SAR, necesitarás un análisis más profundo del contenido de la función y así sucesivamente y, y estructurar tu pantalla y controles al revés. Por lo que esto es más aplicable para sitios web que tienen algunas páginas, hasta cinco páginas, diferentes diseños que tal vez recuerdes estos dos por ahora por empezar es suficiente. El segundo es más apropiado para el diseño móvil. El primero está más adaptado al escritorio, y éste es solo versión espejo del segundo diseño. Entonces en estos días, más a menudo estoy usando este, pesar de que desde una perspectiva estática, me gusta más este, mucho más. Pero cuando hago el primer diseño móvil, por supuesto, tengo que atenerse a un diseño consistente. Muchas gracias por su atención y nos vemos en nuestra próxima lección. Adiós. 61. Descripción del diseño de pies de fonzo de fondo y de escritorio: De acuerdo, entonces en este video, vamos a ver el diseño del pie de página. Ahora el diseño del pie de página es donde vas a tener típicamente tu logo en donde vas a tener diferentes tipos de enlaces. Para diferentes páginas. Normalmente vas a tener como tu saldo, tu contacto, tu dirección. En ocasiones puedes tener como un mapa ahí de tu ubicación si tienes como un negocio local y donde la gente realmente sale a tu ubicación, y también varios tipos de enlaces para las ciudades o ubicaciones. Y ese es usted, señor. Y entonces también típicamente como un formulario de contacto y como se puede ver aquí, cada uno de estos muchas veces por qué lo hacen en cuanto esa geolocalización y los servicios para fines SEO, pues cuando se tiene un enlace, sobre todo con el texto de anclaje, que es el texto aquí, se puede ver que dice Optimización de motores de búsqueda aquí. Y luego en la parte inferior izquierda tiene Servicios hacia adelante barra SEO. Entonces si abrimos esto aquí arriba, se puede ver que la URL es Ignite visibilidad forward slash servicios, forward slash SEO. Pero entonces cuando bajamos aquí, el texto, el texto ancla es la optimización del motor de búsqueda. Por lo que realmente están haciendo esto con fines SEO, para que puedan ubicarse en Google. Y obviamente esto es extremadamente inteligente. Esta es la forma correcta de hacerlo. Y así tienen diferentes tipos de enlaces aquí para los servicios. Y entonces esto es lo que normalmente vas a encontrar en un tipo de pie de página bien diseñado donde tienes los enlaces para los servicios y luego están usando ese SEO, jugo y poder, las industrias aquí, no soy realmente necesario. Pero entonces el sirviendo orgullosamente escaso para las localizaciones. Esto es un gran problema porque las ubicaciones, digo que están tratando de clasificar en Google para, ya sabes, anuncios de Facebook o servicios de marketing digital en una ubicación particular, entonces así es exactamente como lo harían. Tienen estos enlaces aquí y tienen las ubicaciones. Y luego si vas a la página, tiene como marketing digital de San Diego, ¿verdad? Puedes mirar la URL aquí arriba. Dice mercadeo digital de San Diego. Por lo que todo esto se hace estratégicamente para asegurarse de que sean capaces de clasificar para esos servicios particulares en esas áreas. Está bien. Y luego por aquí, tienes el equipo, tienes los clientes de valores, y como esta cosa en particular de aquí, como los valores y tal vez algunas críticas, tal vez algunas herramientas y recursos, ¿no? No lo vas a encontrar aquí arriba en la cabecera. Normalmente va a estar abajo en la parte inferior del pie de página en donde vas a encontrar páginas como de política de privacidad, donde vas a encontrar páginas de Like Terms of Services, ¿verdad? Entonces aquí es donde típicamente vas a tener esa información en el pie de página. Y luego tienes la dirección aquí para la ubicación, el número de teléfono. Y luego un poco sobre la empresa aquí. Y así esto es fantástico aquí. Este es un gran tipo de Pie de página para tener aquí el logotipo. Y para este de aquí que tienen el logo a la derecha, derecha. Entonces esto es sólo un pie de página. Recuerda en el pie de página, hay diferentes reglas por las que juegas. Y realmente no importa si tenías un logo a la izquierda o a la derecha. Para el pie de página. Y entonces tienen un buen llamado a la acción aquí. Y en lo que respecta a que presenten su información. Y luego a lo social y a mí me gusta cómo el texto es como gris claro o plata claro porque no sale como el actual rumbo aquí. Y así está realmente ahí sólo para tener como referencia. Y así me gusta mucho este diseño. A mí me gusta cómo se presenta esto. Echemos un vistazo a algunos otros aquí hasta el menú de fotones. Y así esta es la página web del abogado aquí. Se puede ver que tienen su social aquí. Yo tendría este Social aquí abajo más. Y una de las cosas que noto aquí es este testimonio aquí que apenas se puede ver. Y así no sé por qué tienen esto así. Tendría este destaquado más o convertirlo en texto blanco real. Y luego tienen el mapa del sitio y luego tienen el texto justo aquí, que es igual que mencioné cuatro. mayor parte de las veces, va a ser con fines SEO. Observe cómo tienen aquí, abogado criminal de San Diego, ese es el texto de ancla que está dando el jugo y el poder a ese sitio web en particular. Y entonces tienen la política de privacidad aquí también. Y luego tienen las indicaciones aquí. Seguro que si haces click en esto, te llevará a un mapa, ¿verdad? Perfecto. Está bien. Sí, eso es genial. Y luego aquí está el enlace a la página real del abogado defensor penal de Escondido. Por lo que hay algo más de poder SEO yendo ahí. Y luego tienen lo social como mencioné. Pero aquí debería haber un llamado a la acción. Debería haber como un botón aquí que permita a la gente enviar un mensaje o incluso llamar si querían escuchar bien, basta con dar click en este número de aquí, pero esto en su mayor parte va a estar bien. Normalmente vas a ver este tipo de diseño y una gran cantidad de sitios web de negocios locales. Ahora echemos un vistazo a otro aquí, que es z F7 creativo. Este de aquí es mucho más sencillo, ¿verdad? no tienen un montón de cosas pasando, como las otras. Esto es sólo un número de teléfono aquí, dirección, y luego diferente información de asociación. En realidad no están haciendo muchas cosas de SEO aquí porque estos chicos son más una agencia creativa. Y así todavía tienen que el Google Partner aquí, tienen el branding aquí. El servicio se trata, pero realmente no tienen como el particular, ya sabes, San Diego o XYZ servicios de marketing tipo de enlaces porque realmente no van por el SEO porque esta empresa es más bien una tipo creativo de agencia. cualquier manera, aún podrían usar algo de ese jugo SEO también. El pie de página, por lo que respecta a tener algunos enlaces ahí. No obstante, este es más de un tipo agradable y sencillo de diseños InDesign. Y luego tienen el social aquí abajo. Y para que no tengan el logo ni nada por el estilo. Simplemente tienen enlaces sencillos. Y luego poder conseguir que realmente los llames o visites su ubicación. Entonces estos son los diferentes tipos de pies de página que vas a ver. Obviamente, hay mucha variación entre ellos, dependiendo del tipo de sitios web, lo que realmente quiere el cliente y lo que sientes que se ve mejor basado en tu experiencia en lo que quieres que el pie de página obtenga en última instancia cumplida. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 62. Lección XD - Mobile y Desktop: Diseño de pies de pie: Hola otra vez, Arthur está aquí y hablemos de pie de página. Pie de página, es la parte más baja de tu maqueta. Y aquí incluimos todo lo que no podemos incluir en el encabezado. Por lo general duplicamos información del encabezado, duplicaría aquí si fuera necesario. Por lo que voy a explicar un par de cosas aquí. Cuando tenemos páginas largas en el sitio web, podemos olvidarnos de esta notificación y esta navegación la esconden, no fijo, entonces podemos duplicar esta modificación en el pie de página K. Cuando los bebés no son tan largos, tienes un bastantes pergaminos. No creo que sea necesario duplicar para incluir la navegación principal desde el encabezado y el pie de página k Por lo general, sirve estos amplios. Cuando tenga piezas pequeñas de contenido necesario, podrá utilizar esta sección. Son derechos de autor. Déjame mostrarte la cadena de derechos de autor. Copyright por nuestro tour. 2020. Además, es posible que veas que algún pie de página puede tener redes sociales. Para móvil, recomendaría usar un diseño de columna. En ocasiones puedes poner dos menús aquí si es necesario. Si funciona, sugeriría colocar los iconos de esta manera. Ok. Y por supuesto, no se olvide de diferenciar por espaciado o algún tipo de divisor entre secciones, entre grupos. Por lo que es más fácil reconocer la información. Déjame poner el logo aquí. Puedes cambiar registrador a versión en blanco y negro o invertir colores. ¿Crees que es genial? Por supuesto, puede que tengas otro color del fondo, pero generalmente son más oscuros que el resto del contenido. En ocasiones, el pie de página puede incluir hoja de ruta. Reestructuremos el debate. Además, no te olvides del if usando el mapa en móvil. Recuerda eso es presionar en el mapa. Si la persona uno para desplazarse presionando sobre la mafia iniciará la interacción con el mapa mismo. Yo uso banda aquí. Intentemos donde digamos, y presiono llamada y se llama el mapa. Ten cuidado con esto. En ocasiones podemos usar algunos márgenes para permitir que una persona toque esta zona, para no interferir con la sección del mapa. Si se nos considera la cantidad de cuatro elementos del menú, está bien usar un diseño centrado. A lo mejor así. Bueno, PSAP a ti. A lo mejor así pero con algunas pistas, alguna bala que muestra que dos secciones diferentes. Lo mismo va con el diseño de escritorio porque es más fácil crear un escritorio cuando tienes mucho espacio aquí, k Y generalmente va dB así. Crea un mapa más amplio. Copyright. De nuevo, no es una regla, pero todo tu equipo de proyecto apreciará si usas verde. Por lo que puede parecer donde se pueden mover elementos a diferentes. Para esto, usemos el mismo ancho que la sección Contenido. Dedique algún tiempo a jugar elementos de ala de 1 a otro y encontrar el lugar perfecto para los elementos. La codicia te ayudará en esto porque te muestra dónde se podría tocar tu elemento o grupo de elementos. El colocado. De acuerdo, eso es todo para pies de página. Muchas gracias por su atención. Nos vemos la próxima vez. 63. Descripción del diseño de botones móviles y de escritorio: De acuerdo, entonces en este video, vamos a repasar los diferentes tipos de diseño de un botón. En la siguiente lección, Arthur te va a guiar por los diferentes tipos de botones también en el Adobe XD. Y te va a mostrar cómo crear el. Entonces para este de aquí, solo voy a repasar algunos tipos diferentes de diseños de botones en diferentes sitios web que te dan una visión general rápida aquí. Entonces sigamos adelante y saltemos aquí, podemos ver los primeros tipos de botones aquí en este sitio web en particular. Se puede ver que aquí tienen los servicios. Y entonces nuestro trabajo se puede notar aquí. Y lo que realmente me gusta de esto aquí es que tienen el botón aquí con la caja blanca lisa en con el texto blanco real en el medio. Y luego una vez que se cierne sobre esto, ve que se pone azul. Entonces me gustan mucho este tipo de botones aquí porque te permiten tenerlo destaque, pero luego también poder enviar aún más una vez que se cierren y escriban toda la característica dinámica de ésta y luego ésta de aquí. En realidad tienen una característica donde realmente levanta el botón aquí y lo hace un poco más ligero. Entonces me gustan este tipo de botones aquí. Y luego bajemos aquí y veamos algunos otros tipos diferentes de botones aquí también. también me gusta este. Uno cuando pasas por encima de él, se convierte en una flecha aquí en su dinámica. Además, notarás que también hay un poco de sombra en el fondo. Cuando pasas por encima de esto y puedes ver la sombra a su alrededor, sin embargo, realmente no tienes una sombra cuando es solo que son estáticos, ¿verdad? Pero la sombra también es otra gran característica. Y luego bajando aquí, aquí está su botón también. Lo mismo. Tienes la sombra que aparece ahí arriba y luego la flecha. ¿De acuerdo? Y entonces este botón aquí es fantástico. Me encantó su botón aquí. Esto es muy, muy único. Una vez que aterriza en toda esta sección aquí, este botón a la derecha se convierte en un cuadrado de un círculo y luego un fondo realmente cambia el color también. Por lo que este tipo de botones dinámicos son muy, muy bonitos también. Y así sigamos adelante y veamos algunos otros tipos de botones que tenemos aquí en este ejemplo. Por lo que este botón aquí es para la página web del abogado en, como se puede ver aquí, tienen la presentación y luego tienen como un tipo de botón dorado aquí. Y luego tienen un poco de sombra más oscura ahí en la parte inferior también. Entonces le da el tipo tres D de look, justo donde tipo de apuntalado, ¿verdad? Tienes este tipo de look 3D. Y luego cuando se cierne sobre él, en realidad cambia esto a un texto blanco, ¿verdad? Y luego se pone un poco más oscuro aquí en cuanto a un botón. Y así vamos por aquí y echemos un vistazo a este botón aquí mismo. Entonces me gusta cómo está este texto aquí arriba justo encima del botón. Siempre se quiere tener textos por encima un botón en particular que ha ayudado a la gente de qué se trata esto. Y luego este, se pone un poco más oscuro una vez que estás prestando y normalmente tendrás como un botón que es una especie de bordes redondeados como este, o un cuadrado completo, o tienes un botón como un círculo, ¿verdad? Y así esos son los diferentes tipos de botones que normalmente vas a ver. Se puede ver este de aquí tiene un poco de sombra ahí con el ojo negro como esa sombra eran realmente lo hace estallar y sobresalir. Y luego éste de aquí, sólo otro botón de símbolo. Y luego vayamos a mi sitio web en particular aquí. Y este botón aquí es un botón cuadrado puro, y entonces en realidad se pone más oscuro una vez que realmente pasa el cursor sobre un botón en particular aquí, y luego haz clic en esto, y te lleva al botón de contacto con nosotros. Y este de aquí esencialmente va a ser un botón de envío. Esto no va a ser nada elegante. Puedes hacerlo elegante. No obstante, es bastante sencillo. Observe cómo este, se pone un poco más oscuro al pasar el rato sobre él. Entonces, en su mayor parte, vas a notar que diferentes tipos de botones tendrán diferentes tipos de funciones dinámicas para ellos. Algunos de ellos destacarán en diferentes colores. Algunos de ellos tendrán diferentes elementos sobre ellos. Y me gusta este de aquí. En cuanto a este tipo de botones aquí, cuanto a su video de reproducción, se puede ver cómo lo resalta alrededor. Y es muy diferente porque esto es para un video aquí. No es para un botón en particular, tiene como un diseño de círculo. Es, Hey, reproduce este video aquí, y es un diseño muy bonito, único. Y luego bajando aquí, como este de aquí también, donde sólo tienes aquí un contorno blanco llano para el botón. Y luego tienes el texto blanco en el medio. Y luego cuando lo destacas, realmente sale. Tienes que texto en blanco con los reflejos azules a su alrededor hasta que realmente sale a la luz. Entonces esta es una lección rápida aquí sobre los diferentes tipos de botones que vas a ver. Típicamente las cuadradas o las que suelen ser un poco redondeadas, ¿verdad? O un tipo de botón redondeado completo de diseño que vas a ver. Entonces en la siguiente lección te va a guiar a través de cómo crear estos botones. Y eso va a estar aquí para esta. Y nos vemos en el siguiente. 64. Lección XD - Mobile y Desktop: diseño de botones: En este breve video, vamos a hablar de gangas y cómo diseñarlas en XD. Vámonos. Aquí se ven tres botones. Uno tiene las esquinas redondeadas, uno con las esquinas cuadradas, y otro con una esquina ligeramente redondeada. Por lo que esta característica se controla fácilmente. Sería esta función de x D Muy buenas noticias para el futuro. Alguien que trabaja en Photoshop sabe que también puedes tener esquinas tre sin ningún radio y levemente reducir aquí. Además, para diferenciar tu curso de cargas, puedes usar diferentes colores. Por lo general son los colores principales, verde, azul, rojo para alguna atención. De acuerdo, a continuación, donde puedes hacer es hacer titulo todas gorras aquí. Además, también puede aplicar el espaciado entre letras. Es decir, puede aumentar el espaciado entre letras para una mejor consistencia si es necesario. El botón de sombra recientemente introducido, que sólo tiene el contorno P2. Y este tipo de biden, generalmente conocido como batón de sombra o va botón K. Así que además de estas manipulaciones, puedes agregar la sombra cuando sea necesario, por favor no uses más sombras para todos los elementos. Si el embotellado transmite presionando, haciendo clic en algunas diapositivas, la sombra está bien. El color podría ser gradiente. Prueba es c cubed p un gradiente a tu kit de UI, que es la combinación de los cuales es la colección de tus elementos de UI sobre el proyecto tiene que tener esquema de color consistente, como ya hablamos eso. Y tienes que definir reglas para tus botones como este color y esta forma se usará para esto y aquello, este color se usará este tipo de funciones, botones rojos usualmente utilizados para eliminar operaciones que se pueden deshacer. Y por supuesto que no usarás fondo cuadrado y redondeado en una pantalla en se verá terrible. Yo te muestro. Entonces, por ejemplo, hemos comprado ahora editar o me cambiaría. Entonces aquí está la muestra de la combinación, cómo los colores en equilibrio funcionan juntos. Entonces aparecer ahora es la función que a todos nos interesa transmite algo positivo, color verde, el color azul transmite otra cosa. Algo diferencia en promedio entre lo bueno y lo malo tal vez. Y se usa aquí para editar. Y abogado significa que saltarás este script de pantalla, esta ventana, y regresarás. Venimos de palabra. Se puede utilizar para eliminar un elemento y datos de fila, cualquier cosa. Para aplicar este enfoque en todos sus proyectos, utilizado principalmente en sistemas SaaS complejos, dashboards, etcétera. Quizás puedas implementar este enfoque en el carrito o en la sección de mi carrito en algún e-commerce. Entonces la idea es asignar colores y probablemente formas a un grupo de botones. Por lo que no tendrás una pantalla donde tengas tienda ahora y edita, respectivamente, los colores verde y azul y el consejo con el rojo. Y entonces de repente, la siguiente pantalla tendrá afilada. Ahora aquí, edita brad y consejero. Ok. Ahora ves la diferencia. Si ves tal combinación, tal vez te confundas para pujar porque estás acostumbrado a los colores rojos, color de advertencia. El color azul está más o menos bien para tienda ahora, pero el color rojo para editar como algo no apropiado. Por lo que este enfoque se llama codificación de color. Cuando tienes funciones que son similares y aplicas los mismos colores, dos botones que están en tu proyecto. También se llama botón primario, secundario y tercer. ¿ De acuerdo? Por lo que el botón primario se dispara ahora, se agrega secundaria. Mi tarjeta. Y el tercer botón va ha diseñado este estilo. Por lo que es fácil cuando comienzas a hacer esto, cuando tienes funciones primarias y secundarias, así es como aplicas esta codificación de color a tus elementos de interfaz de usuario. Y no importa si tienes esquinas redondeadas donde seamos copropietarios. Solo necesitas tener la consistencia en toda tu interfaz de usuario. Entonces cuando el usuario está acostumbrado a tus colores, él o ella ya esperarán, cambiará después de hacer clic en botón rojo, después de hacer clic en botón verde o azul, ok. Por lo que además de la asignación de prioridades a sus botones, por favor considere los diferentes estados de los botones por defecto. Al igual que éste. Discapacitados. Por lo general, los discapacitados tienen color gris en el hover. Y prensado. O activo. Activo significa que se presionó el botón. Oye, estas son fechas básicas de botón que puedes considerar. Pero en x D, Puedes crear en los dos de estos, tan normal y en Hoover. Y creo que eso es suficiente para que los entrenadores trabajen en tu simulacro el botón deshabilitado quizá sea el mismo estilo para todos tus botones sólidos. El estilo discapacitado sí suele ir, el estilo discapacitado suele ir, además de estos dos. Significa, muévelo un poco. lo que el estilo discapacitado suele venir como una adición a tus estados inferiores, pero estos dos o tres estados, por favor ilustra cómo tus cargas Luke on hover cómo se ven cuando se presionan. No solo se trata de cargas en tus cascos interactivos que tengan alguna interacción, incluso la micro interacción es muy útil para ilustrarla, para mostrar, para frontend equipo para que sean capaces de implementar tus pensamientos de diseño y el markup y el proyecto además de los estados razona otra cosa que llamó saludo. Y será genial si tus botones se ajustarán a la creta k, si se trata de tres columnas, si se trata de dos columnas o cuatro columnas y así sucesivamente. Incluso puedes diseñar varios tamaños, botones pequeños y grandes si es necesario. Te podría decir que puedes preparar una interfaz de usuario perfecta keyed antes de repasar proyecto. Y afortunadamente, la mayoría de las veces es imposible porque no estás seguro de qué funciones, qué elementos requerirás y qué tan pequeños o grandes deben resolverse. Tienes suficiente comprensión sobre cómo diseñar no sólo botones hermosos sino también significativos, Cómo comprar llamantes para crear gradación entre primaria, secundaria y terciaria. Y también puedes ajustar el estilo, afinar las esquinas en sombra, gradiente de rayos y grado de curso en diferentes estados. Y lo último es la codicia. La codicia repasa todas tus páginas, ventanas, lo que sea. Por lo que tus elementos precisamente botones tienen que ser los mismos con no sólo lo mismo, sino que también tienen el número preciso de columnas para que se ajusten a tu codicia C, Así que tres columnas, cinco columnas, seis columnas, K. Intenta evitar tal tamaño como éste o éste, k, voy a ser mucho más fácil trabajar con tu maqueta. Muchas gracias por su atención. Espero que esta lección haya sido útil. Nos vemos en nuestra próxima lección. 65. Lección XD - Mobile y Desktop: diseño de entrada: Bienvenido de nuevo. En esta lección, diseñaremos el área de texto, que es el elemento de la mayoría de los kits de interfaz de usuario y la interfaz de usuario en general. Por lo que no será tan desafiante ese arte. Diseño, el área de texto o entrada, pero algunas cosas que debes considerar para crear una interfaz de usuario consistente. Chico, de acuerdo, de nuestra lección anterior, ¿sabes crear botones y qué tipos hay? ¿ Cuáles son sus prioridades? Yo solo quiero agregar. Algo que puedes hacer en Adobe X-Y es crear un efecto de desplazamiento en el botón. Por lo que una vez que la persona pasa con el cursor sobre el botón, cambió de apariencia. Kay, digamos, tú dices, Aquí vamos. Sólo ten eso en cuenta. De acuerdo, entonces volvamos a nuestros insumos. En primer lugar, en cuanto a insumos, necesitarás comenzar con el odio de tu insumo. Y eso es interesante porque hay que saber qué tamaño de la fuente se utilizará en su interfaz. Eso está bien si estás trabajando con algunos tanques estándar y tu tamaño de fuente está en realidad entre 1624 píxeles. Eso no va a hacer tanta diferencia. Pero cuando se trata de algunas interfaces de usuario sobresalientes para capear enormes teléfonos calvos, a veces es necesario afinar área de texto a ese tamaño y a las miradas de Sasso, ya sabes, como un hogar único. De acuerdo, así que cada vez que empieces a diseñar la entrada, por favor escribe el Marcador de posición de texto dentro de ella. Por lo general es nombre o nombre completo. Ok. Entonces el tamaño de esta fuente es de 27 píxeles, y esta área es demasiado grande para tal tamaño de teléfono, pesar de que se ve espaciosa, pero aún así podemos deducir un poco del Haidt, Así que, oh, mira más compacta. Podemos deducir un poco más. Trata de mantener claras estas dimensiones de tus elementos. Soviético no 6163. Y ahora vemos que con casi 30 tamaños formados, tenemos entrada de 60 píxeles de altura. El otro lado de este elemento es que suele funcionar junto con botón. Entonces si tomamos botón y lo colocamos aquí, se verá un poco desequilibrada ya que estas dos alturas son diferentes. Aunque así lo hagamos, vemos que este elemento toma mucho menos énfasis en comparación con el botón de cancelar. Y este es el problema. Porque los elementos deben ser iguales, por lo que se puede armar de diferentes maneras. Entonces tenemos dos vías aquí. Haga nuestro botón más pequeño o cubran entrada más alto. Por lo que aquí disminuiré el tamaño de botón. Pero cuando estás diseñando tu kit de interfaz de usuario, necesitas comenzar con el tamaño de fuente. Ya sea que estés haciendo textblock, si estás haciendo Barton, si estás haciendo input, textarea, checkbox, botones de radio, menú desplegable lag y así sucesivamente. Tienes que partir del tamaño del texto. Y una vez que tengas el tamaño de fuente correcto, entonces tus elementos se envolverán alrededor de esto. El punto de partida es el tamaño de tu teléfono en tu IU. Entonces tenemos 24 píxeles, lo cual es suficiente para legibilidad. Y nuestro odio por la entrada es de 60 píxeles. Por lo que el mismo será de cuatro botones. En cuanto al estilo de estos simple elemento, debo señalar que si estás haciendo unas esquinas redondeadas para tu curso de Barton, necesitas mantener un preservado el mismo estilo aquí. Usa el mismo radio de esquina radial, borde radio para tus entradas así como en botón, tu entrada puede tener tres estados. En primer lugar es el estado predeterminado, el otro es el estado deshabilitado, y el otro está activo o no enfocado. Por lo que una vez en el foco, tal vez tengas el cursor aquí en tus desables. A lo mejor tendrá más brillante. Y creo que es útil incluir al usuario. Otro estado como texto mecanografiado, vale, porque hay una diferencia entre el texto del usuario y el Marcador de posición. Entonces vamos a describirlo de nuevo. Déjame reorganizarlo un poco. ¿ De acuerdo? Entonces aquí está la condición predeterminada que representa la entrada con texto de Marcador de posición. Una vez que has hecho clic en esta área, tu positor generalmente desaparece y ves el cursor o escribiendo, luego escribes tu texto. desactiva el estado adicional para la entrada. Deshabilitado se utiliza cuando algo no está disponible para que cambies en este momento, y el estado de desplazamiento será éste. Vamos a tener en cuenta que a veces incluso en el Marcador de posición Hoover y permanece ahí hasta que empieces a escribir realmente algo. Ok. Por lo que queda ahí sólo hasta que comiences a presionar cualquier tecla de tu teclado. Ahora sabes combinar estos elementos centrales en tu interfaz de usuario. A continuación lecciones, discutiremos elementos adicionales que te ayudarán a crear tu kit de interfaz de usuario. Muchas gracias por su atención por. 66. Descripción el diseño de la búsqueda con la búsqueda con los que los cuales con los filtos de la que se los los el el: En este video, vamos a repasar los diferentes tipos de diseño de filtros en los diferentes tipos de diseño de búsqueda. Entonces esto es típicamente lo que vas a ver en una tienda de comercio electrónico donde estás comprando un producto en particular, un artículo en particular, y tienes diferentes variaciones entre las que puedes elegir. Y luego también en la barra de búsqueda donde esencialmente se puede utilizar para buscar diferentes productos, diferentes artículos en una tienda en particular. Entonces sigamos adelante y saltemos aquí. Por lo que este primer sitio web aquí. Por lo que este primer sitio web aquí se puede ver es partake foods.com. Parece que venden un montón de diferentes tipos de cookies. Y así lo que quiero mostrarles aquí es cómo tienen dispuestas su particular diseño de filtros. Entonces sigamos adelante y veamos uno de estos productos en particular. Entonces tenemos las crujientes galletas con chip de chocolate. Aquí se puede ver. Tienen las críticas aquí, lo cual es genial porque permite pruebas sociales, ¿no? Para que la gente pueda ver que este es en realidad un buen producto. Y luego tienen los diferentes tipos de tamaños. ¿ O quieres tres cajas o quieres seis cajas? Y entonces puedes ver aquí los cambios de precio, ¿verdad? Y luego puedes inscribirte en una suscripción basada para que entreguen cada dos semanas, cada cuatro semanas. Y así este es un tipo de diferentes tipos de filtros que vas a ver en varios sitios web. Ahora, el diseño va a diferir, ¿verdad? Dependiendo del aspecto y la sensación de esos sitios web en particular. Solo quiero mostrarles algunos ejemplos aquí de diferentes tipos de tienda online de comercio electrónico. Tan bien. Entonces aquí mismo puedes cambiar la cantidad y luego puedes agregar al carrito aquí. Entonces este va a ser un tipo de diseño de filtros aquí. Y así ahora subamos aquí a la barra de búsqueda. Ya puedes ver, solo puedes escribir aquí, digamos que estábamos buscando un tipo particular de cookie. Entonces vamos a blandir Bates. De acuerdo, así que sigamos adelante y tecleemos aquí galletas suaves horneadas. Ok, entonces saca aquí los diferentes tipos de galletas con chip de chocolate al horno suave. Ahora, esta barra de búsqueda, el diseño de búsqueda va a ser bastante sencillo. Esto lo vas a ver en la parte superior de los sitios web muchas veces, en también, como ya he mencionado anteriormente en otros videos, vas a tener el logo ya sea en el medio o en el lado izquierdo. Entonces esto aparecer también es una gran cosa para las tiendas de comercio electrónico, donde tienes en la parte superior como un código de cupón o un cupón, ¿verdad? Permite que la gente sea capaz de ser más tentada a querer hacer una compra, ¿no? Por lo que este es un diseño de filtro de búsqueda muy simple aquí, y así como el tipo de filtro para el producto. Entonces ahora veamos aquí un tipo diferente de sitio web. Vayamos a este sitio web en particular, que es el paquete agradeate.com. Y digamos que hacemos clic en este producto en particular aquí. Y se puede ver esto tiene un tipo de diseño de filtro muy estándar. Aquí tienes el estilo, negro, arena y marrón. Y luego tienes la cantidad, derecha que automáticamente se actualiza aquí abajo. Y luego puedes agregar esto a tu carrito real. Entonces vayamos a diferentes aquí. Vayamos a un kit de mercado. Y así para esto parece que sólo hay uno disponible aquí, ¿verdad? Estos están todos agotados y ver si aquí podemos encontrar diferentes tipos de productos que realmente están disponibles. Entonces vamos al kit de viaje aquí. En este típicamente tendrá diferentes colores. No obstante, para éste sólo es uno. Pero se puede ver que éste es bastante sencillo. Y aquí tienes la cantidad, nada demasiado especial al respecto. Si vamos aquí, podemos ver que es sólo un tipo de colores diferente. Y eso es lo que el, lo que vas a notar en los diseños del filtro, vas a ver típicamente el precio, la cantidad, diferentes variaciones de color, diferentes variaciones de tamaño. Amazon.com lo hace está muy bien donde tienes diferentes tipos de características, como mencioné, como tamaño, diseño, maquetación, ¿verdad? Y luego precios. Y luego aquí hay un sitio web de café que es la bombilla de extremo negro. Y echemos un vistazo a algunos de estos también tienen algún diseño de filtro. Entonces echemos un vistazo a este de aquí. Por lo que este se puede filtrar por tamaño, lo general tienen diferentes tamaños aquí. Y luego puedes tener como frijoles enteros o goteo o prensa francesa, ¿verdad? Y luego tienes la opción de tener aquí una compra de una sola vez y un suscrito. Está bien. Y así este es solo un video corto muy rápido. Lo que hice fue subir y busqué en las mejores tiendas Shopify, y luego pasé por las tres primeras y las seleccioné aquí porque quiero mostrarles lo que algunas de las mejores tiendas están usando cuatro tipos diferentes de diseños de filtros y luego buscar diseños de diseños, ¿verdad? Tan muy, muy sencillo aquí. Este tiene una búsqueda en la parte superior. mayor parte de las veces, vas a ver tiendas Shopify donde tienen una barra de búsqueda muy sencilla aquí arriba. O tienen como este pequeño armazón de lupa. Vas a ver que incluso en esta de aquí, la misma parte superior, vas a ver la lupa. Y luego puedes buscar cualquier producto que estés buscando. Este es solo un tipo muy sencillo de diseño de filtro y búsqueda. Aquí en el siguiente video, Arthur te va a guiar a través de otras variaciones y otros tipos de diseño de filtros y diseños de barras de búsqueda también. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 67. Lección de Adobe XD - Mobile y Desktop: diseño de filtos: En este video, vamos a hablar sobre el diseño de filtros. Entonces, empecemos con una simple descripción de qué es el filtro. El filtro es una forma de ahorrar espacio en su interfaz de usuario al mismo tiempo brindando comodidad al usuario. Por lo que el enfoque que se utiliza en el diseño de filtros suele ser simple como menú desplegable que hemos discutido en la lección anterior, pero alguna diferencia. Por lo general vemos un ícono de filtro. Entonces estamos presionando el ícono del filtro y ver algún contenido original. Este contenido es en realidad representación de parámetros de filtro o criterios por los cuales se trabajará otro elemento de interfaz de usuario. O esta será la forma de reducir nuestros resultados de búsqueda de contenido en la página en la que ya estamos. Entonces di que estás buscando zapatos por $18, entonces ves elegir eso, tener los diferentes colores. Y no te gusta el rojo, el verde, o el azul, quieres marrón simple. Este es el lugar donde los filtros pueden ser útiles. En nuestro caso, tendremos los siguientes parámetros. Ahora tenemos cuatro parámetros los cuales somos capaces de filtrar o filtrar adentro. El enfoque aquí se utiliza al incluir estos una vez que se seleccionan. Y si quiero zapatos marrones solo aislar color marrón y tal vez necesito algún otro control que te ayude a cerrar esta ventana después de que acabo de seleccionar. Entonces así es como resolveríamos los zapatos de color marrón. El otro es el filtro y el deslizador que te ayudan a ordenar el valor numérico preciso de tu catálogo u otro contenido. Por lo general, en pantallas más grandes , puede agregar deslizador, que le ayudará a seleccionar un dato numérico preciso, ya sea un precio, tamaño, cantidades de algo, y así sucesivamente. Tengamos un precio aquí. Por lo que esto te mostrará el rango de precio que estás buscando. También podría ser como si estuviéramos hablando de algunos criterios seleccionables. Usaría ilustración más simple. Una vez que una persona decidió seleccionar algún rango de precios, existen varios enfoques para esto. Se puede seleccionar este precio bajo, el precio medio o el precio alto. Por lo que es también puede ser aplicable en tu filtro. Son muchos los elementos modernos que entraron en u i durante el último par de años. Por lo que generalmente no se incluyen en kits básicos de interfaz de la mayoría de los frameworks, sino etiquetas, deslizadores. Entonces uno, hacer la vida del usuario más fácil, representando la misma funcionalidad. Tienen mejor estilo, oso visual por lo que se ajusta a las necesidades del usuario y tendencias recientes de pantallas pequeñas. Por lo que es más cómodo seleccionar uno de estos tres artículos. Aquí tenemos de k. En nuestro caso, este usuario de caso tiene que enfocarse en este elemento, el precio más bajo, luego pensar en el precio más alto y después presionar algunos botones. Entonces contemos. En primer lugar, seleccionamos, esa es la primera interacción que petite. Entonces como ves eso no es el cambio de interfaces de usuario, cambiar al enfoque de los datos. Sabemos que las máquinas son bastante precisas en este caso, pero aquí queremos que sea más fácil la vida del usuario. Tenemos que cambiar el idioma del usuario a un usuario en realidad idioma, no el lenguaje de la máquina. Entonces una vez que veo esta abreviatura, signo de dólar, entiendo automáticamente lo que se entiende por estos tres iconos, ok, y por el contexto de esta app, entendemos que todos los productos lo dividen en tres categorías. En ocasiones no sería aplicable, pero aún así, hay un montón de cosas que puedes repensar y explicar a los usuarios de una manera diferente. Entonces volvamos a sus filtros. Para que veas podemos usar varios tipos de elementos, así como elementos tradicionales como botones de radio. Entonces tenemos cuero o letra igual, una u otra. Y una vez que seleccionamos el cuero, no podremos seleccionar la letra eco o viceversa. No se pueden seleccionar ambos. Entonces es una opción única. Incluso puedes implementar iconos, tu filtro para seleccionar algunos criterios. También es lenguaje de usuario. No estás mostrando una enorme lista de categorías que es aburrida, que son aburridas, sino que les muestras la representación, el soporte visual. Por lo que no están adivinando lo que quieren ordenar para comer, solo mostrándoles iconos. Y eso parece más fácil en lugar de leer entre todas las listas de opciones. Y hay uno más que también se utilizó en nuestra app. Digamos que queremos mostrar solo productos especiales. Por lo que podemos usar un toggle on off aquí. Y ahora vemos que éste está deshabilitado, ¿de acuerdo? Y éste está habilitado. Por lo que no queremos ver sólo productos parciales. Queremos ver sólo en stock previo. Están disponibles en stock de inmediato. Qué más anuncio de altura ocultará y precio, por instancia, añadiría sin salario algunas funciones muy bonitas y acogedoras que son realmente lo aprecian en algunos resultados de búsqueda o algunos catálogos, tal vez algunos sistemas, sistemas complejos. Piensa en qué apreciarías como función de filtro en tus sitios web favoritos y piensa cómo conseguiste esto dentro. ¿ Qué crees que se apreciaría en tus aplicaciones móviles favoritas? Qué cosas se podrían reorganizar. Estas observaciones te ayudarán mucho. De acuerdo, nos vemos en nuestra próxima lección. 68. Lección de Adobe XD - Mobile y Desktop: busca el diseño de la búsqueda: Hola ahí. Bienvenidos de nuevo a nuestro trabajo I clases. Por lo que hoy me gustaría hablar de búsqueda y búsqueda, que es bastante simple búsqueda de cosa. Pero como pueden ver en la pantalla, he ilustrado tres partes de búsqueda que tienen visual completamente diferente sólo por reemplazar los elementos dentro de esta caja. Entonces aquí tenemos ícono de búsqueda, que es zoom. Puedo entonces pequeño espaciado y palabra clave o TI, entonces no tienes nada porque se espera que presione Entrar visualmente este elemento y este aspecto de manera bastante diferente. Y yo diría que eso es por nuestros hábitos. Solíamos tener búsqueda aquí por todas partes. Si quisiéramos buscar algo, nos gustaría tener este modal, a veces también usar así, pero estos elementos en mi opinión, colocados muy lejos el uno del otro. Entonces si quieres que los usuarios lean fácil y rápidamente la función de tu elemento, por favor intenta colocar elementos más cerca de la esquina izquierda, sobre todo cuando trabajas con fuentes y usas un lenguaje más tradicional que es la búsqueda, no palabra clave específica o ID. En algunos dice, entiendo que podría haber algunas cosas, pero estas nos buscan, para mucha gente parece más natural que estos dos, sólo por cambiar el texto en este pequeño campo de texto, búsqueda podría ser búsqueda técnicamente en vivo. Empiezas a escribir y luego podrían aparecer algunas opciones. Después seleccionas de la opción y tal vez vayas. El otro es cuando se utiliza un dato preciso como sordo 25. Ahora quisiera buscar estas ideas. La mayoría de los elementos de la interfaz de usuario tienen los estados y sus estados son más parecidos, los estados de entrada de texto habitual. Entonces recuerda que este es el estado por defecto. El otro motivo enfocado, tercero es el texto del usuario y deshabilitar la búsqueda también podría desactivarse en ocasiones. Por lo que puede considerar este y los demás casos para textos de usuario y pasar el cursor. Por favor considera estas condiciones esto establece en tu UIKit, por lo que tu interfaz de usuario será más interactiva. Los desarrolladores tendrán menos preguntas sobre cómo crees que el hover se verá como un pasado desarrolladores de Estados Unidos fueron quien le dio estilo a estos iconos, ¿quién diseñó estas interacciones? Porque pequeñas animaciones, pequeños elementos de interactividad, no estaban disponibles en Photoshop, era bastante difícil crear diferentes estados para los elementos. Has creado otro a bordo para cada estado y así sucesivamente y así sucesivamente. En x D, tenemos la oportunidad de resaltar fácilmente la interacción del elemento y crear fácilmente para gestionar, pasar y mantener estos objetos entre todos los proyectos. Muchas gracias, organizó un 69. Descripción del kit UI: En este video, vamos a repasar kits de interfaz de usuario. Por lo que los niños de la interfaz de usuario son esencialmente diferentes tipos de componentes, diferentes tipos de características y funcionalidades que normalmente tendrá una aplicación o sitio web en particular. Y en la próxima conferencia, Arthur te va a guiar a través de cómo crear estos. Pero en esta videoconferencia aquí, te voy a guiar por donde puedes encontrar estos si no quieres crearlos por tu cuenta y de donde puedes sacar ideas diferentes. Por lo que los kits de UI, como mencioné, estas van a ser cosas que crees para un sitio web particular, en particular aplicación, en cuanto a diseños de botones, diferentes tipos de textos, diferentes tipos de fuentes, diferentes tipos de iconos, ¿verdad? Así que sigamos adelante y veamos aquí algunos de estos diferentes tipos de kits de interfaz de usuario. Para que se pueda ver este primero aquí. Tiene un montón de diferentes tipos de características y funcionalidades ya integradas que puedes usar para una aplicación en particular en la que no necesitas crearlas desde cero rango. Puedes usar estos y ponerlos en tu portafolio. Y como se puede ver aquí, los diferentes tipos de pantallas que diferentes tipos de vistas, ¿verdad? Este tipo de vistas aquí son muy, muy bonitas y sencillas. Y lo hacen para que sea fácil para el usuario navegar realmente en uno, una compra, ¿no? Y aquí te dejamos algunos de los aspectos más destacados. Capa bien organizada, personalización súper fácil, diferentes tipos de fuente de Google, diseño moderno de interfaz de usuario, ¿verdad? Y puedes comprar esto para, creo $20. Y así puedes ir al tema force, todos estos diferentes tipos de sitios web y realmente solo escribir en kit de interfaz de usuario en Google y encontrarás muchos recursos diferentes. Así que vamos por aquí ahora y vamos al diseño de puntos de la tienda de UI. Y podemos mirar algunos diferentes aquí también. Se trata de diseño de plantillas de página de aterrizaje en Adobe XD, La gaviota. Mira esto, puedes ver todos estos diferentes tipos de diseños de landing page, ¿verdad? Y como dije, puedes comprar estos o puedes descargar forma gratuita dependiendo del sitio web en particular en el que estés. Y luego vamos a subir labs.com. Aquí te dejamos otro recurso donde puedes comprar algo de lectura hecha para ti plantillas. Echemos un vistazo a este azul de aquí. Este se ve bastante bonito. Por lo que este de aquí, puedes comprar por 99 al mes por un costo mensual real, o puedes comprar esto a una cuota única por $29. Está bien. Y creo que esto es más para un tipo de función de chat de mensajería allá y ver si podemos encontrar algunas diferentes aquí. Diseño de app de educación. Esto es para plantillas de página de aterrizaje de moda que ven aquí aplicación de quiz. Echemos un vistazo a este e-commerce aquí mismo. Entonces este es un diseño muy bonito aquí. Nuevamente, estas son diferentes plantillas, niños de plantillas de interfaz de usuario que podrás comprar y tener estos diseños ya configurados y listos hechos para que puedas usar. Y también puedes usar estos y añadirlos a tu portafolio, ¿no? Pero no necesitarás crear estos desde cero si no quieres, porque puedes tomar ideas diferentes de esto. Puedes usar algunos de los diferentes elementos, ¿verdad? Y componentes, y tal vez los cambiaron un poco. A menos que quieras crear un kit de interfaz de usuario desde cero, ya sabes, eso va a ser algo que hagas por tu cuenta donde estés desarrollando, digamos un sitio web o una aplicación. Y quieres crear un kit de interfaz de usuario para los codificadores y para otros diseñadores que pueden estar en el camino trabajando en esa aplicación o sitio web en particular. Pero esto es solo un resumen rápido aquí de mostrarte diferentes tipos de kits de interfaz de usuario, diseños de interfaz de usuario que ya están hechos y disponibles para que los uses, ¿verdad? Al igual que esta es una buena aquí también para una tienda real que vende zapatos o tal vez cualquier tipo de productos deportivos, ¿verdad? Esto va a ser algo que puedes usar como tipo típico de diseño. Y luego también aquí en un Varro elementos, puedes comprar algunos listos para ti, plantillas de UI también. Entonces este de aquí es para una tienda de comercio electrónico, años para sitio web de construcción. Aquí hay otra para como una empresa de marketing. Echemos un vistazo a este de aquí. Disfruta del poder del email marketing. Por lo que viene solo con este trato particular de la página de aterrizaje aquí. ¿ De acuerdo? Entonces, sí, esto va a ser un recurso aquí que puedes ver cuando estás buscando kits de interfaz de usuario, ¿verdad? Simplemente puedes escribir en kits de interfaz de usuario de Google y te van a llevar a muchos recursos diferentes. Puedes usar esos kits de interfaz de usuario y comprarlos y usarlos como referencias o tal vez usarlos para un diseño en particular. Rara vez tienes que crear plantillas de interfaz de usuario desde cero a menos que quieras, a menos que tengas algo muy único y Customer Rank. Y entonces Arthur te va a guiar en el siguiente video cómo configurar un kit de interfaz de usuario. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 70. Lección de Adobe XD - Desktop y móvil: UI Kit: Hola ahí. Hablemos de kit de interfaz de usuario. Uikit es la colección de elementos que podrían ser utilizados en todo tu proyecto. Uikit está relacionado con la interfaz de usuario. Puede incluir colores, iconos, topografía, barras de control, botones, tarjetas, controles, deslizadores, etiquetas, etcétera. Por lo que una vez que necesites crear página adicional para ti, será fácil escoger el color primario, secundario o terciario. Escoge el tamaño de fuente y el estilo de fuente necesarios, icono si es necesario, botón y así sucesivamente, y crea otro nuevo diseño para tu interfaz de usuario. Entonces digamos que tenemos un sistema que tenía una actualización y necesitamos implementar de alguna manera esta actualización para que no se destaque como separado de este concepto de diseño. Por lo que vamos a recoger la tarjeta, vamos a escoger el mismo deslizador si es necesario, botón y así sucesivamente y así sucesivamente. Por lo que podremos preservar el mismo estilo sobre todo proyecto en el que estamos trabajando. En. Otra cosa es UIKit Jesus, para cuando tu proyecto sea pasado al equipo desarrollador. Y estos chicos podrán crear, para generar algunas páginas nuevas, nuevas pantallas sin ningún esfuerzo por parte de ti. Para que no te molesten. Y no tendrán muchas preguntas como qué color debo usar si necesito crear la barra de búsqueda para la página de cuatro categorías, por ejemplo, aquí tendrás las reglas para los colores, tendrás juego de icono T. Definitivamente incluirás la jerarquía tipográfica, los estilos de párrafo, elementos, etcétera. Por lo que escogerán el Color necesario, Fuentes, barras si es necesario, tarjetas de etiquetas de Barton, y crearemos la interfaz necesaria. Además, podrían implementar esta funcionalidad en el sistema en el que trabajas. Por lo que estas nuevas plantillas ahí se generarán automáticamente sin ningún esfuerzo, ni de ti, ni de los desarrolladores front-end. ¿ De acuerdo? Por lo que para pequeños proyectos, una página, varias páginas. sitios web, como los sitios web corporativos, no creen que sea necesario crear kit de interfaz de usuario, pero sería bueno pasar el UIKit junto con tu maqueta a los desarrolladores. Por lo que podrán agregar alguna funcionalidad de antemano usando tu kit de UI que usando los elementos que sugieras. Pero para cosas más complejas como SAS, redes sociales, Cualquier otro tipo que tenga muchas pantallas. Por supuesto, casi se requiere tener este kit de interfaz de usuario porque podrían ocurrir muchos cambios mientras el desarrollo, mientras que el marco de diseño, diseño debe ser flexible. Por lo que se adapta a las necesidades del proyecto, ya sea su escalabilidad o es la capacidad de respuesta u otra cosa. Pero tienes que mantener esto principal dentro de tu kit de UI. Y una vez que tengas este sistema el cual tiene 40-50 pantallas en su interior, claro, usarás el mismo elemento, el mismo estilo en todo tu proyecto. Así que intenta crear kit de interfaz de usuario para proyectos complejos porque los necesitarás tú mismo. Porque podría haber algunas ediciones, podrían haber algunas actualizaciones. Y una vez que tienes todo a mano, ya definiste reglas. No son rígidos, son flexibles. Crearás una nueva página con estos sin romper trabajo de codificadoras femeninas. Nuestros otros chicos dentro del kit de interfaz de usuario del equipo del proyecto es muy similar al libro de marca o guía de marca porque tiene en su mayoría los mismos elementos. Pero en este caso es más técnico y solo puedes pedir prestado el ícono desde aquí. Copiar pegar en su archivo de trabajo. Es posible que algunos UIKit no tengan algunos elementos que se ilustran aquí. Algunos pueden tener algunos elementos adicionales. Cuantos más elementos tengas dentro de este archivo, menos esfuerzo será crear nuevas pantallas. En otra característica útil de UI Kit es que ayuda pasar tu proyecto a otro diseñador en casos en que no eres capaz de continuar el trabajo por algunas razones. Digamos que hiciste el trabajo, completaste el proyecto, pero en algún momento ocurrieron algunas actualizaciones. Es posible que tu cliente trabaje con otro diseñador sin molestar qué elemento necesitamos usar aquí o allá. De nuevo, es como una guía de branding para interfaz de usuario y te anima a pasar tiempo y a crear estas bibliotecas de elementos para proyectos que son complejos, que pueden requerir un nuevo diseño, nuevas características, y te serán de gran ayuda y su equipo. De acuerdo, muchas gracias por su atención. Espero que eso haya sido útil. Muchas gracias por su atención. Espero que haya sido útil y realmente me encanta crear UI Kit y espero que te encantará verte en nuestra próxima lección. 71. Descripción de microinteracciones: En este video, vamos a repasar las micro-interacciones. Ahora bien, las micro-interacciones son muy, muy comunes en diferentes plataformas de redes sociales, en diferentes sitios web, ¿verdad? Probablemente los uses todo el tiempo, sobre todo si eres como en Facebook donde constantemente te relacionas con las publicaciones de la gente, con el contenido de la gente y les das un pulgar arriba, tal vez Harding, un comentario o lo que sea que puede ser. Todos esos van a ser ejemplos de micro interacciones. Y en la siguiente lección de video, Te va a mostrar cómo crear diferentes micro-interacciones y cómo funcionan en Adobe XD. No obstante, para este video, esto va a ser más una visión general. Entonces como puedes ver aquí, las micro-interacciones son realmente esos tipos de compromisos que lo hacen para que sea mucho así y experiencia agradable para que el usuario realmente interactúe con esa aplicación o ese sitio web. Y como se puede ver aquí, las micro-interacciones tienen cuatro partes. El primero siendo el detonante, que va a ser la iniciación, que va a iniciar la micro interacción, ya sea como un like o un corazón que haces en un determinado posts en Facebook. Y luego hay reglas que determinan lo que pasa. Se activa una micro interacción, por ejemplo, una vez que te gusta un comentario en particular o una publicación, ¿no? Eso pasa automáticamente de gris a azul. Una vez te gusta eso, cierto, entonces tienes la retroalimentación, deja saber a la gente lo que está pasando y luego los bucles y el foso, ¿verdad? Esto está determinando esencialmente los minerales de la interacción de microondas. Y entonces lo que realmente micro-interacciones debidas para el usuario real es que hacen que sea emocionante y atractivo para el usuario navegar y usar el sitio web, ¿no? Porque cuando se tiene un sitio web que simplemente pura estática y no es muy único y realmente no hay ningún tipo de tipo dinámico de componentes, entonces se puede poner bastante aburrido. Entonces aquí tenemos algunos ejemplos de un deslizar. También puedes pensar en diferentes apps de citas por ahí como Tinder que también tienen esta característica blanca. Todas esas van a ser micro-interacciones. Y bajemos y veamos algunos otros aquí. Aquí tienes una entrada de datos aquí, donde ingresas los datos aquí. Y luego te da un medidor de fuerza ahí dependiendo de la fuerza del sitio web, muchos sitios web tendrán estos donde debes registrarte como usuario y necesitas crear una contraseña para que puedas pasar la creación su información de inicio de sesión real, ¿verdad? Necesitas poder establecer una contraseña que fuerte y no sea muy fácil y simple de descifrar realmente. Y así este tipo de interacciones macro son geniales porque son dinámicas y también proporcionan al usuario la sensación de seguridad de like, Hey, queremos que crees una contraseña que va a mantener segura tu información personal. Y luego bajar aquí, esto es como un tipo de carga o estado actual del sistema, ¿verdad? Sólo otro tipo de interacción como una micro aquí. Y entonces este va a ser para como subir tus diseños o subir un archivo en particular lo hizo muy, muy bonito y muy atractivo también. Y entonces esto es más un llamado a la acción aquí mismo, donde esencialmente estás invitando a la gente a tomar una acción específica. Estos son muy importantes en un sitio web o aplicación donde quieres que la gente se apoye ahí y que realice una acción específica, que haga clic en un enlace o botón en particular para poder, ya sabes, conseguir que hagan lo que quieres que hagan, ¿verdad? que puedan lograr lo que sea que estés tratando de conseguir que hagan, ¿verdad? mayoría de las ocasiones, vas a ser tú para comprar un producto o programar algún tipo de cita o llamada telefónica, ¿verdad? Y entonces tenemos aquí los botones animados aquí donde entran desde la derecha. A menudo encontrarás los botones animados o como los capellanes. En la parte inferior derecha de un sitio web. Ya las verás bastante. Verás como la función de chat pop up o incluso como un chat de Facebook Messenger que puedes incrustar en un sitio web. Y así es donde vas a ver los que están en una página web también. Y luego el botón animado subir aquí. Esta va a ser otra interacción de microondas aquí, pero las micro-interacciones típicamente van a ser las que ves en diferentes sitios web de redes sociales, en diferentes sitios web donde buscan agregar un poco de funcionalidad dinámica, ¿verdad? E interactividad a la mirada y sensación reales del sitio web o aplicación. Y entonces, ¿cómo diseñas micro-interacciones? Artistas van a entrar en un video de eso en la siguiente lección. No obstante, aquí te presentamos algunas de las cosas que quieres tener en cuenta. Quieres ponerte en los zapatos del usuario. Queremos asegurarnos de que siempre lo estés mirando desde la perspectiva del cliente y asegurándonos de que te estés divirtiendo con lo correcto. Entonces no es como ir a ser intrusivo. No es molesto. Y donde es como no emparejarse con lo que el usuario está tratando de hacer. quiere hacer de ella una experiencia de degustación muy placentera. Y entonces eso es esencialmente lo que son las microinteracciones. Basta con pensar en los gustos de Facebook. Piensa en cualquier momento que estés amando la publicación de alguien o estás interactuando con un sitio web o aplicación específico, ¿verdad? Esos van a ser ejemplos de las micro interacciones y cómo se están volviendo mucho más prevalentes en el día y la edad de hoy en cuanto a las aplicaciones y sitios web. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 72. Lección de Adobe XD: microinteracciones: Bienvenido a las micro-interacciones en XD. Hoy vamos a explorar los elementos esenciales fueron scroll para alterar los tipos de transición de animación en el hover y así sucesivamente. Por buena interacción es cuando se puede modificar el proceso de transición entre los tableros de arte de uno y en otro tablero de arte. Por lo que hacia afuera podría ser pop-up, compré, podría ser página de pantalla, página web, y así sucesivamente. Empecemos con la animación O2. Ya ves creé dos gráficos casi similares, pero a excepción de las ondas de calefacción aquí. Y he seleccionado este elemento también solo hecho en interacción a un tipo de acción, mismo aquí. Por lo que estas dos pantallas están ligadas entre sí y van de ida y vuelta. Y empecemos con el segundo. Por lo que ves hay una ligera animación en este suave balón. Tenga en cuenta que las capas deben tener el mismo nombre y la misma posición. El orden de capas. Porque aquí están, escóndelo detrás del tazón. Si elimino esto, no veremos esta animación como la vemos actualmente. Vamos a intentarlo. Sí. Ver estas capas aparecen instantáneamente como desvanecerse y desvanecerse. Pero no nos da una sensación de movimiento como aquí. Por lo que por favor note que el otro tipo de interacciones es la transición. Transición significa que simplemente iremos a este extraño barco sin ningún efecto. Bueno, hay un pequeño desvanecimiento que se desvanece, pero es como casi nada. Igual para nuestros tableros, que cuenta con elementos de interfaz de usuario. Aquí tenemos auto animación. Déjame intentarlo de nuevo porque logo tiene el mismo nombre, la misma capa. Sube y baja escala. ¿ Qué pasa si selecciono transición? Por lo que no se aplica ningún efecto. Overlay es el tipo de interacción que es útil para pop-ups o para otras ventanas que son más pequeñas que sus tableros de arte base, como en nuestro caso, tenemos icono de filtro selectivo y seleccionando superposición para filtro pop up. Y veamos cómo funciona de nuevo. Sólo para recordarlo. Ya ves que superpone la maqueta principal con esta pantalla. También agregué un pequeño tinte para el fondo, por lo que agrega más enfocado al filtro de búsqueda. Lo exterior que me gustaría explicar es desplazarse a, desplazarse también, es útil cuando se tiene página larga. Y otro, un hecho útil está en el hover, usualmente usado en el Barton's, rara vez usado en los Iconos. En primer lugar, tienes que crear un componente desde tu botón. Y verás que habrá un estado por defecto. Se puede agregar otro estado, que sería estado flotante. Y en estados de flotación dentro del contenedor, puedes ajustar la parte visual de tu fondo y vamos a ver, Lo mismo para tus otros botones. Por favor recuerda crear en efecto de desplazamiento para todos tus elementos que se pueden presionar o colocar el cursor en la aplicación móvil, por favor crea un estado Clicked para tu botón. Se puede nombrar que es conflicto. Hazlo un poco más oscuro. De acuerdo, yo crearía estado hover. Tenga en cuenta que estos efectos deben ser muy leves porque tienen que ser naturales. De nuevo, puedes cambiar el tamaño de tus bots y odiar el color del texto. En el curso de fondo, no veremos efecto flotante en el dispositivo móvil. Es más relevante para las interfaces de escritorio, sin embargo, necesitas crear los estados adicionales. Por lo que tus desarrolladores quieren gas, cómo se verán estos botones cuando se presiona o mueve o arrastra y así sucesivamente. Entonces creo que el CCS lo suficiente para que experimentes con micro-interacciones en XD. Y el último es el tablero de arte anterior, que generalmente lleva usuario de vuelta como aquí, tenemos el botón atrás. Se puede convertir este elemento a componente y asignar el tipo de tablero de arte anterior y copiar eso a lugares donde maqueta ha respaldado. Pero, y cada vez que un usuario haga clic en este botón, le llevará de vuelta. Es útil para tal cosa como aquí para filtro. El filtro se utilizará en al menos dos pantallas, comidas y restaurantes. Entonces en lugar de crear ícono de ropa y asignarlo, bien, imaginemos que tenemos este filtro. Me gustaría tener la transición o lo anterior barco impar y asigné la superposición para sección de restaurantes y comidas. Por lo que ves que el filtro de búsqueda apareció con un botón Causa. Y yo solo vuelvo a las comidas. Una vez que estoy en los restaurantes y presiono Filter, me devuelve a los restaurantes. Por lo que puedes agregar estos dos elementos reutilizables en tu app, como pop-ups, que aparecen aquí y allá en un par de lugares. Si no vamos a tener esta función, necesitarás crear el otro filtro que pop-up, aparece de la sección de restaurantes y asignar, estos no nacen con tiradas deprimidas. Lo mismo aquí. Bueno, tener filtro de búsqueda separado pop up, que tendrá el icono de cierre a las comidas. Es más fácil crear este tipo de elementos que podrían utilizarse en varios lugares de tu app. Creo que eso es todo por ahora por experimento de interacciones de microondas, pruébalo tú mismo y te deseo buena suerte con esto como cosa muy interesante para explorar y tener una buena por. 73. Componentes navegantes de navegación: En este video, vamos a repasar los diferentes tipos de componentes de navegación. Ahora esto es algo que normalmente vas a estar viendo en la parte superior de un sitio web o parte superior de la aplicación donde tienes, digamos, diferentes componentes de barra de búsqueda, diferentes tipos de barras de menús, ¿verdad? Entonces sigamos adelante y saltemos a los componentes de navegación. Ok, entonces los diferentes tipos más comunes de componentes de navegación que vas a ver ya sea en un sitio web o aplicación o cualquier tipo de software que estés usando va a ser la barra de búsqueda. Tienes pan rallado, etiquetas de paginación, slider, diferentes iconos y el carrusel. Entonces vamos a seguir adelante y sumergirnos en estos un poco más. Entonces la primera aquí es la barra de búsqueda, ¿verdad? Y esto es típicamente donde tienes la capacidad de buscar en cualquier cosa en la página web allí si quieres encontrar, digamos un individuo, si quieres encontrar un determinado artículo, cierta publicación de blog, o una cierta pieza de información. Aquí es donde vas a poder utilizar la barra de búsqueda aquí. Y proporciona una tonelada de valor para el usuario final porque son capaces de encontrar algo muy rápido, ¿verdad? Si están encendidos, digamos YouTube, ¿verdad? Quieren poder encontrar un video específico pasando ahí y escribiendo ciertas palabras clave, ciertos nombres ¿verdad? En. Va a ser muchas veces muy sencillo y fácil para ellos encontrar lo que están buscando. El siguiente que vamos a cubrir aquí es el pan rallado. Esto es esencialmente algún tipo de línea que está mostrando la ruta actual a la ubicación real. Entonces ya verás aquí, tenemos el hogar, luego tenemos una barra hacia adelante Sobre Nosotros. Y la barra delantera es realmente la miga de pan porque te está mostrando la jerarquía, ¿verdad? Tienes en la parte superior, tienes casa, y luego tienes sobre nosotros bajo eso. Y luego bajo Sobre Nosotros, tienes historia, ¿verdad? Y está mostrando todos los diferentes niveles dentro de esa sección en particular. Y luego la paginación aquí. Aquí es donde se puede mirar al fondo, digamos, de un blog o tipo de publicación de noticias particular de sitio web donde se pueden ver todas las diferentes páginas e incluso páginas actuales en las que el sitio web tiene contenido, ¿no? Por lo que este es un tipo de navegación muy sencillo para crear y configurar. Es sólo mirar el post anterior y después poder estar al día de la publicación más reciente, ¿verdad? Y luego tenemos las etiquetas aquí. Y este suele ser el nivel más bajo de jerarquía para encontrar contenido preciso. Porque fácilmente puedes simplemente ir a la barra de búsqueda, escribiendo ahí lo que estás buscando. Puedes escribir como diferentes etiquetas como diseño UX, branding, lo que sea. No obstante, en su mayor parte, la forma más fácil y lo que la gente va a usar típicamente y comúnmente es solo la barra de búsqueda y también la navegación de encabezados en el menú para poder buscar exactamente lo que están buscando. Y luego tenemos el deslizador. Y esto se utiliza para establecer valor de organizar o valores y en particular dado conjunto. Entonces normalmente te va a mostrar como, oye, este es el público objetivo entre, ya sabes, 25 a 45, o te está mostrando, ya sabes, lo que prefieres. O aquí en la parte superior, te está diciendo que pongas el peso de tus mascotas. Veinticinco, hasta, digamos un par de 100 libras o lo que sea. O si estás en kilogramos, obviamente eso va a ser diferente. Pero esto normalmente va a ser algo que se muestra horizontalmente. Porque si lo haces verticalmente, va a ocupar mucho espacio y no va a quedar muy bien. Por lo que esto se presenta mejor en un tipo de diseño horizontal. Y entonces tenemos los iconos aquí. Iconos o uno de mis favoritos aquí porque realmente te dan una indicación de qué es esa área en particular, ¿verdad? Al igual que si miras lo más abajo ahí, tienes un e-commerce, legal y de cumplimiento. Tienes unos bonitos iconos ahí con los textos debajo de esos. Y realmente te dan una gran indicación de qué se trata esa sección. Entonces me gustan mucho estos. Obviamente hay un hueso a diferentes tipos de iconos y diferentes diseños. Y lo bueno de estos también es que se pueden diseñar estos de manera vertical u horizontal también. Y ambos van a quedar fantásticos. Obviamente lo que la vertical, quieres tener iconos más pequeños para que no estés ocupando demasiado espacio, demasiado espacio. No obstante, lo que las horizontales, puedes hacerlas mucho más grandes, igual que tenemos aquí en la parte inferior con el e-comm, legal y cumplimiento, y luego las finanzas y la banca. Pero funcionan fantásticos. Se ven geniales también. Y luego tenemos el carrusel. Aquí es típicamente donde vas a ver un portafolio donde tienes muchos proyectos diferentes que has hecho en el pasado. A lo mejor diferentes obras de arte, fotografía diferente. Eso va a ser lo mejor para. Ahí es donde puedes lograrlo. Entonces eso se puede hacer clic. Y digamos que alguien está en tu página web y está buscando tu portafolio. Se puede tener un carrusel ahí que le permita ver diferentes imágenes si soy proyectos en los que trabajaste y luego pueden dar click en esos específicamente y ser llevados a una página específica que les da algo más de información sobre eso proyecto particular. De acuerdo, entonces echemos un vistazo a algunos de los diferentes factores cuando se trata de las especificaciones móviles aquí. De acuerdo, así que recuerda, cuando estás diseñando una aplicación web, es importante que entiendas las diferencias con diferentes fuentes, diferentes elementos, y el tamaño que se va a requerir en un escritorio frente a un móvil, ¿no? Porque va a ser obviamente completamente diferente tipo de diseño, interfaz de usuario para un teléfono móvil. Y hay que ser capaz de estar al tanto de la diferencia ahí. Para que si tienes una aplicación muy bonita que funciona bien en el escritorio, pero puede estar quedando corto en el diseño en las especificaciones móviles. Es necesario tener eso en cuenta en todo momento. Y algunos de los factores clave que se quiere tener en cuenta aquí obviamente es el tamaño de la fuente, diferentes elementos, diferentes formas. Si tienes como personas llenando aplicaciones y en general el diseño y diseño así para que puedas maximizar la cantidad de espacio que tienes y no lo estás llevando todo revuelto. Por lo que es fácil para la persona navegar. Porque recuerden, los teléfonos móviles son esencialmente los líderes en este momento en las fuentes de tráfico. Y así es donde va a venir la mayoría del tráfico para aplicaciones de sitios web. Y así queremos que sea lo más fácil y simple y lo más suave posible que estos individuos estén navegando por la aplicación, ese sitio web, cualquiera que sea lo que pueda ser correcto a través de sus teléfonos móviles. Echemos un vistazo a las especificaciones móviles un poco más profundo. Entonces, ¿cuál es el tamaño de fuente aquí? Queremos asegurarnos de que tenemos al menos 16 píxeles y luego también aumentar el espaciado entre líneas. Se puede ver aquí en esta imagen a la derecha, este es un fantástico tipo de interfaz de usuario. Son agradables, de diseño, agradables y simples. No tienes demasiado, están pasando. Y luego también el tamaño de un elemento, al menos 44 por 44, para que no sea demasiado grande, no demasiado pequeño, pero es muy fácil de mirar y navegar. Y luego el heatmap, Aquí es donde obviamente vas a estar mirando donde la gente está haciendo clic, donde la gente realmente está pasando su tiempo, si están girando a la vez en, digamos, leyendo artículos versus en una página en particular, quieres poder ver qué están haciendo estos individuos en su teléfono móvil cuando están usando mi aplicación, cuando están en mi sitio web, ¿verdad? Tan importante ahí. Y luego los foros, ¿no? Si estás teniendo algún tipo de aplicación que tenga gente llenando su información, estás reuniendo o estás haciendo que la gente se registre como usuario, ¿verdad? Crear un nombre de usuario, tener una contraseña ahí. También quieres considerar tener un mapa de temperaturas aquí y hacerlo para que sea agradable y simple, ¿verdad? Aquí es donde tienen toda la página esencialmente como la forma real en la que eso es todo en lo que realmente se centran, ¿verdad? Porque solo piensa en tener un formulario en una página web en particular, página de aterrizaje o lo que sea, ¿verdad? Y tienes esa forma que solo está en una pequeña pieza de ese sitio web en particular en ese diseño para el móvil, ¿verdad? Va a ser muy distrayente para el usuario. Entonces quieres que hagan clic en un botón y los lleven a que se registren realmente para que eso sea todo lo que tienen delante para que se centren en solo hacer eso y en realidad se inscriban, ¿verdad? Menos distracciones. Y luego echemos un vistazo a algunas cuadrículas de diseño aquí. Se desea preservar la legibilidad. Quieres tener más aire en el espacio, ¿verdad? No quieres tener las cosas agitadas. Se quiere tener tres libros de texto para una columna, cinco ítems por fila. Considera tener un marco que sea específico y personalizado a lo que buscas lograr aquí. Pero este de aquí, se puede ver desde este teléfono móvil aquí es genial porque no hay demasiadas cosas pasando ahí. Es muy fácil mirar lo que está pasando ahí y lo que puedes elegir, lo que puedes seleccionar. Así que realmente piensa en las diferentes rejillas de diseño y las especificaciones en eso. De acuerdo, entonces echemos un vistazo a las especificaciones móviles aquí para un teléfono Android, ¿verdad? Porque van a ser un poco diferentes a como un IOS, un teléfono Apple y varios otros fabricantes de teléfonos por ahí. Por lo que para el retrato móvil, estas son las diferentes especificaciones que quieres tener en cuenta. Lo mismo para el paisaje móvil, un retrato para tabletas, y luego un paisaje para una tableta también. Entonces cuando estás diseñando diferentes elementos, diferentes componentes, ¿verdad? Se quiere tener en cuenta estos para el Android. Y entonces aquí es para el iPhone, quieres asegurarte de tener la columna y 16 margen. Y luego para el iPad, quieres tener una columna y 16 margen también. Y entonces obviamente vas a tener una orientación diferente para el paisaje del iPad y luego también para el diseño del escritorio. Así que asegúrate de tener una comprensión de los diferentes diseños, las especificaciones, ¿verdad? Cuando estás creando diferentes aplicaciones, porque durante la mayoría del tiempo, cuando estás diseñando o creando diferentes aplicaciones que se van a utilizar más o menos exclusivamente en el teléfono o en dispositivos portátiles. Por lo que quieres asegurarte de tener las especificaciones correctas, los tipos correctos de columnas por tipos de margen, para que aparezcan bien en los dispositivos adecuados. Y aquí hay algunas especificaciones para el Bootstrap. Se quiere mirar los teléfonos a nuestros 768 píxeles o a las tabletas. Se desea mirar 768 píxeles, 15 píxeles a cada lado de la columna. Nuevamente, esto es algo que quieres poder mirar y usar y navegar por tu cuenta. Solo te estoy dando aquí algunas especificaciones diferentes que debes tener en cuenta. Y lo que puedes hacer. Muchas veces es solo ir en diferentes aplicaciones, diferentes sitios web, y mira cuáles son las tendencias actuales, ¿verdad? Mira los diferentes reportes y esencialmente poder emular cómo estos chicos han trazado sus diseños actuales y poder mirar, vale, cuáles son algunas cosas que soy ideas, algunos marcos diferentes que puedo quitarle estos individuales, a partir de estas diferentes aplicaciones, estos diferentes diseños. Y entonces puedo usar en mis propios diseños también. Y luego finalmente aquí tenemos la orientación del usuario. Y esto es genial para los nuevos usuarios que introducen nuevas actualizaciones de funciones en una interfaz de usuario. Y entonces esto es típicamente lo que vas a ver cuando alguien entra a una página web que tiene diferentes contenidos, diferentes tipos de información donde quieres que la gente se inscriba, ¿verdad? O tal vez sea un servicio que sea de forma gratuita o tal vez de pago, o tal vez tengan una versión gratuita y luego puedas actualizar. Quieres que sea agradable y simple y fácil para ellos registrarse, introducir su información, y poder registrarse como usuario y ser parte de esa página web o aplicación de software en particular. Y así que eso va a estar aquí para los componentes de navegación de la interfaz de usuario. Y nos vemos en el siguiente. 74. Descripción la sección de Optimización de Optimización: En este video, vamos a repasar la visión general de la sección de optimización. Entonces esta va a ser una sección aquí donde vamos a repasar diferentes cosas como cómo obtener retroalimentación reclamada, diferentes preguntas que preguntan cómo optimizar una aplicación o sitio web en particular después de haber sido creada. Cómo se puede utilizar la analítica, cómo se pueden utilizar los datos y diferentes herramientas para poder maximizar y optimizar el rendimiento de la aplicación del sitio web o cualquier tipo de proyecto que se haya desarrollado. Sigamos adelante y saltemos a la optimización. Entonces una de las primeras cosas que vamos a estar repasando es la retroalimentación de los clientes. Cómo dar retroalimentación del cliente. También obtener referencias y poder conseguir nuevos clientes, nuevos clientes. Y luego lo anterior la regla de pliegue, la importancia de esto, cómo funciona esto, cómo esto va a hacer que el sitio sea mucho más fácil de leer y navegar. Y luego vamos a repasar cómo usar herramientas analíticas. Cómo utilizar diferentes herramientas para poder recopilar datos, para poder ver de dónde viene el tráfico, para poder analizar una demografía y poder utilizar esos datos para optimizar de manera más efectiva el rendimiento del sitio web o la propia aplicación. Y luego vamos a estar repasando el uso de mapas de aire y diferentes colocaciones de elementos. Él los mapas son una gran cosa de tener en una página web, sobre todo cuando estás buscando saber dónde todo el mundo está interactuando con tu sitio a cuáles son los diferentes elementos en los que realmente están haciendo clic? Cuáles son las diferentes áreas que en realidad están visitando más, donde pasan más tiempo en mapas de calor en colocaciones de elementos son muy importantes ahí. Así como las herramientas para optimización van a repasar diferentes herramientas que puedes usar si en recursos para mejorar el rendimiento general del sitio web, ¿no? Porque desarrollaste un sitio web ahí, vas a tener tráfico entrando y quieres poder ver de dónde viene, qué tipo de tráfico es, ¿cuáles son las diferentes fuentes? ¿ También se están ejecutando sus campañas publicitarias? Por lo que quieres poder realmente analizar esos datos, optimizar la aplicación o sitio web Emacs. Y luego vamos a repasar algunas pautas de interfaz humana, algunas cosas que debes tener en cuenta. Y luego finalmente, va a brindarte algunos enlaces útiles que puedes utilizar para poder mirar las diferentes herramientas y recursos que te son proporcionados en esta sección. Por lo que estamos muy emocionados de que empiece y nos vemos en el siguiente. 75. Revisión y obtener referencias: En este video, vamos a repasar recibiendo comentarios y referencias de su base de clientes existente. Esto va a ser un factor muy importante aquí cuando se trata de que hagas freelancing o cualquier tipo de consultoría de clientes porque quieres asegurarte de que tus clientes estén contentos, insatisfechos con los resultados en que puedes conseguir algún tipo adicional de clientes de la relación actual que ya has establecido. Porque conseguir clientes es un reto en sí mismo. Y así cuando puedes aprovechar los clientes existentes con los que has trabajado, que has sido capaz de proporcionar diferentes diseños de aplicaciones para diferentes diseños web para ¿verdad? Se quiere apalancar esos y poder obtener referencias de esos clientes en particular. Entonces vamos a saltar a la retroalimentación y conseguir referencias, vale, así que una de las primeras cosas que quieres hacer aquí después de terminar un proyecto es que quieres pedir retroalimentación y una revisión. Quieres preguntarles, oye, ¿cómo fue tu experiencia? ¿ Estás satisfecho con los resultados finales? ¿ Qué cosas podrían haberse mejorado? ¿ Hay algo que pudiera haberse hecho mejor, verdad? Siempre quieres poder recuperar esa información o tu propia preferencia personal y luego obviamente siempre pidiendo referencias. Oye, ¿sabes de alguien más o de cualquier otra empresa por ahí que pueda beneficiarse también de mis servicios? Y esas son las formas más fáciles de conseguir clientes adicionales, ¿verdad? Y una de las mejores maneras en que puedes recopilar los comentarios de los usuarios y comentarios de los clientes es teniendo algún tipo de cuestionario de salida justo después de terminar un proyecto, enviárselo a un cliente y hacerles saber, oye, escucha, ¿cómo fue tu experiencia? Tener preguntas como el diseño a la altura de sus estándares, ¿qué podría haberse mejorado? Y algo bueno de usar son las formas de Google. Es muy sencillo de usar. Simplemente los envías a través de un enlace que creaste en los Formularios de Google. Y es muy fácil para ellos responder las preguntas. O muchas veces puedes simplemente enviarlos a través de un email y solo tener una lista de preguntas y hacerles saber, oye, escucha, esta es una pregunta dentro o que tenemos y que enviamos a todos nuestros clientes porque queremos conseguir el tipo correcto de retroalimentación. Tan muy importante aquí. Y cuando estás trabajando como freelancer, cuando estás trabajando con clientes, quieres tener algún tipo de salidas, tal vez entrevista o algún tipo de cuestionario de salida para que sepas qué puedes mejorar. Empiezas a ver algunas tendencias en algunas de las cosas en las tal vez puedas mejorar que has estado cayendo el balón. Y yo diría que probablemente lo más grande aquí a tener en cuenta es que pedir remisiones son muchas veces la gente no quiere molestar a los clientes o no quiere pedir referencias porque un, sabes, por cualquier razón tienen algunos especie de miedo detrás de ella. No obstante, Esas son las mejores personas para realmente hablar con nuevos clientes de porque ya han experimentado trabajar contigo. Ya te han pagado, te han pagado tus servicios. Y por lo menos, lo que quieres obtener de estos tipos es algún tipo de estudio de caso o algún tipo de correo electrónico que dice: Oye, trabajar con así y así fue una experiencia placentera. Fueron capaces de diseñar, está a la par. Y el diseño fue increíblemente hermoso. Cosas de esa naturaleza donde puedan brindar algún tipo de recomendación referida, escribir un estudio de caso que les permita saber que hiciste un gran trabajo en que te recomendarían a otros clientes porque entonces puedes usar eso está en tu sitios web, en tus diferentes perfiles, en diferentes sitios web freelance. Y puedes usar eso para apalancarte para conseguir también otros clientes. Pero recuerda siempre, pide referencias de alguien más que consideren o si conoce a alguien que también se beneficiaría de tus servicios. Por lo que va a estar aquí para la revisión de comentarios y te veremos en la siguiente. 76. regla "sobre el Fold”: En este video, vamos a cubrir lo anterior la regla de pliegue. Ahora bien, esto es algo que es muy importante entender a la hora de desarrollar diferentes sitios web, incluso con las propias aplicaciones. No obstante, los sitios web van a ser los más importantes aquí porque esto es lo que normalmente se va a mostrar en la parte superior de esos sitios web. Es el primer tipo de interacción o información que el usuario final real va a ser visto en ese sitio web. Por lo que es muy importante tenerlo dispuesto adecuadamente, tener ahí el tipo de cosas correcto, y asegurarse de que sea súper simple y fácil para el usuario navegar. Pero también obtienen el panorama general y la idea de qué se trata el sitio web o la aplicación. Pero sobre todo por el derecho del sitio web, porque con el sitio web, se quiere poder tener ahí la información muy primera arriba del pliegue. Te diré exactamente de qué se trata este sitio web, dónde se trata este negocio, o cómo pueden ayudarte, ¿verdad? Entonces sigamos adelante y sumergimos en lo anterior la regla de pliegue. Entonces al igual que mencioné, es la primera imagen o pantalla que ve el usuario. Este es el contenido de máxima prioridad aquí. Tan pronto como aterricen en tu página web, quieres que sepan exactamente quién eres, qué haces, y por qué es importante para ellos, ¿verdad? Quieres que puedan ver, está bien. Estoy en este sitio web. Sé exactamente lo que hacen vs. Si te das cuenta vas a algunas webs que no están muy bien dispuestas aunque tienen todo tipo de cosas diferentes en la página de inicio, en la pantalla. Y realmente no sabes de qué se trata el sitio web. Y hay que ir por el sitio para averiguar qué negocio o esa marca o lo que sea que pueda ser o aplicación, correcto, es casi muy importante usarlo sabiamente hasta lo que arriba el área de pliegue y usar diferentes palabras poderosas. Hágales saber exactamente lo que haces, cómo los ayudas o cómo sirves al mercado. Si estás trabajando con los clientes, quieres tomar nota de su particular base de clientes, su mercado, a quién están apuntando, y asegurarte de que está atendiendo a ese mercado específico. No quieres tener muchos tipos de pop-ups ni ningún tipo de distracciones. Quieres que sea directo al grano, muchas veces como imagen o tienes una imagen con un fondo oscuro y luego tienes como texto blanco realmente sacar el texto real que también tiene la imagen en el fondo. Entonces considerar también diferentes tipos de dispositivos, los tamaños, ¿verdad? Y dondequiera que pueda utilizar la interacción, interactividad para involucrar al usuario siempre que sea posible. Por lo que muchas veces hoy en día donde tendrías como un sitio web de diseño moderno, verás, típicamente cuando aterrices en el sitio web, todo saldrá y será interactivo. Por lo que las palabras vendrán como un deslizamiento o desde arriba, desde abajo. Lo mismo para la imagen. Así que asegúrate de usar algunos de esos tipos de elementos también. Y esta es una captura de pantalla aquí para mi sitio web particular para uno de mis negocios. Tengo la anterior la regla de pliegue aquí que estoy implementando Donde tengo en la parte superior, tengo el menú, y luego esta es la página de inicio. Ahí se puede ver que una imagen de fondo, es esencialmente un tipo de imagen de seguridad, y luego también hay una capa oscura detrás de ella. Y cuando aterrizas en mi página web, puedes ver aquí desde el texto y desde el botón allá, te dice exactamente lo que hacemos y cómo ayudamos a las empresas. Y luego tiene un botón ahí para poder aprender más. Por lo que ayudamos a los negocios de seguridad a reservar reuniones, y a asegurar contratos. Entonces si alguien que aterrizó en mi página web, correcto, tienes razón. Obviamente, desde el primer segundo que aterrizan aquí, no sabrían exactamente lo que hago con el negocio hace, cómo ayuda, ya sabes, clientes diferentes y en última instancia lo que se logra el negocio, ¿verdad? Entonces eso es importante saber ahí en notas que cualquier momento estás diseñando cualquier lugar por encima del pliegue y estás usando ese espacio para hacerlo de manera que esté interactuando con el usuario y les esté diciendo exactamente de qué se trata. Entonces está bien, así que eso va a estar aquí para la, encima del pliegue y por encima de la regla de pliegue. Recuerda, quieres hacerlo para que cuando alguien aterrice en esa zona en particular, sepan exactamente de qué se trata el sitio y está consiguiendo que entienda por qué debe quedarse aquí o tomar cualquier acción que tú quieras que decir, ¿Verdad? Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 77. Lección de Adobe XD: diseñar un poderoso Above por encima del doblado: Hola ahí. En este video diseñaremos por encima de la sección de caídas para diseños tanto móviles como de escritorio. Empecemos con una descripción del defecto anterior. Por encima de la falla está la primera zona vista. Estos línea punteada en x D nos muestra dónde está esta sección. Permítanme mostrarles un ejemplo. Este es el nivel al que la maqueta de una escena. Por lo que es la primera pantalla sin desplazamiento. Lo mismo para el móvil. Empecemos a diseñar algo hermoso. Voy a crear la navegación superior por ahora. Déjame poner un poco de logo aquí. Tengo el logo. Algunos enlaces para la navegación. En primer lugar, hay que colocar texto poderoso. No estoy fingiendo ser un mejor CodeWriter por encima del pliegue puede no tener llamada a la acción o tener una llamada a la acción o varias tracción de llamada. Al igual que yo te exhibiré el default Bob con dos CO, dos acciones. Definamos el tamaño del BALTAM. Estos, que ésta será la principal prioridad. Creo que el correcto sería el llamado a la acción de alta prioridad. El otro será botón secundario. Ahora tenemos una estructura de ambos nos gustaría incluir en nuestro arriba el pliegue. Ahora es el momento de definir el fondo, que por supuesto sean llamativos, fascinantes, notables. Uno que usaré sobre salpicaduras Paxos.com porque tienen activos libres. Aquí está la imagen. Por supuesto, la imagen debe ser emocional. El proceso de escoger la imagen es lo más desafiante cualquier cosa. Ahora es el momento de hacer legible el texto. Aquí tenemos Botón Fantasma. Y podemos bajo aficionado que queramos. Por lo que hemos utilizado la falla del sistema operativo todas las tapas. Ahora es el momento de teñir un poco la imagen para que el texto sea adecuado. O hemos mentido a opciones oscuras para etiquetas. Bueno, vamos a hacer es crear otra capa con una capacidad con algún filtro. Bueno, mejor de lo que era, pero aún no perfecto. Eso es cultivo. Algunos casos en los que tienes la oportunidad de invertir tu logo en blanco en lugar de ser negro. Puede hacerlo con el fin de crear una sección sobre predeterminada sin fisuras. Y así se ve así. Por favor, asegúrate de que tu marca admita invertir colores en logo. Por lo que d trabajaré sobre fondo oscuro, se ve mejor. Por lo que me gustaría agregar un poco de énfasis aquí en estos botones, tan atractivos y de moda. Mismo término. Creo que eso es todo. Puedes terminarlo creando el componente a partir de este fondo. Control plus K, n es pequeña animación. Podemos mover un poco la flecha hacia la izquierda. A lo mejor un pasaje es demasiado aquí, puede ir sin él. Vamos a intentarlo. Y para las características, podemos agregar algo de capacidad en puerto. Apenas esta ligera capacidad en flotar. Entonces se siente como interactivo. A lo mejor necesitamos más capacidad. Está bien. Podrás hacer algunos efectos similares para dos de ellos. Ok, ahora, lo que queda es adjuntar el enlace a tus botones para que el Lleva a tu usuario en la dirección correcta. Espero que este video haya sido útil. Muchas gracias por su atención. Nos vemos en nuestra próxima lección. 78. Uso de análisis para su optimización para: En este video, vamos a repasar el poder del uso de la analítica. Por lo que diseñas un sitio web, has diseñado una aplicación en particular, algún tipo de software. Y así ahora estás obteniendo tráfico a través de publicidad de pago o cualquier tipo de búsqueda orgánica o lo que sea, ¿verdad? Estás teniendo visitantes ahí, tienes usuarios interactuando con la plataforma, la aplicación. Y entonces lo que quieres hacer ahora es empezar a analizar esos datos y empezar a analizar a esos usuarios como, ¿de dónde vienen? ¿ Cuánto tiempo se quedan en los sitios web que habían sido fuentes de tráfico, verdad? Entonces aquí es donde vamos a estar saltando, siendo capaces de analizar a todos esos usuarios, todo ese tráfico, y cómo se pueden ver diferentes puntos de datos clave. Por lo que puedes usar esos datos a tu favor. Entonces, sigamos adelante y saltemos a usar la analítica. Entonces con el uso de analítica, correcto, vas a poder descubrir tantas cosas diferentes sobre tu tráfico, sobre el sitio web en cuanto a la proporción de nuevos usuarios frente a visitantes que regresan. Puntos de datos adicionales como pagina una tasa de rebote, lo que significa que cuántas veces alguien irá a un sitio web o a una página de inicio, ¿verdad? Y la proporción o el porcentaje de personas que se van justo después de ir a esa página web porque no es lo que están buscando. Quieres que esa sea una tasa de rebote muy baja porque quieres que la gente vaya realmente a tu sitio web porque te han encontrado en la búsqueda, o han hecho clic en tu anuncio o cualquier tipo de método que hayan elegido o han llevado a en realidad acude a tu página web y que todo sea relevante, ¿verdad? Porque digamos que tienes como un embudo de ventas, tienes un anuncio que está hablando alguna oferta específica o alguna característica específica o lo que sea que sea, ¿verdad? Tu intención es llevarlos a tu sitio web, a tu página de inicio. Ahora, si están pasando por ese embudo de ventas y están dando click en ciertas páginas. Y finalmente, después de unos pasos diferentes, aterrizan en tu sitio web y luego se van rápidamente porque la información que presentaste en el anuncio y en la página de destino no es relevante para lo que están buscando. Ahí es donde vas a tener una alta tasa de rebote. Un gran ejemplo de esto es digamos que tienes como un negocio que es un ladrillo y mortero. Esto es sólo un ejemplo aquí. Y tienes un dentista que está ofreciendo una oferta de implantes dentales 4909, ¿verdad? Uno de los otros ejemplos que hicimos en el embudo de ventas y las páginas de aterrizaje. Entonces si ese individuo hace clic en el anuncio real y esa página de aterrizaje, digamos quizás habla de limpieza o no habla nada de los implantes dentales. Bueno, van a rebotar de esa página muy rápidamente porque no es relevante para lo que eligieron, lo que hicieron clic hasta lo que vieron en el anuncio. Entonces por eso es hiper importante que se reduzca la tasa de rebote. Y tienes los anuncios, tienes tus consultas de búsqueda por ahí. Todos son relevantes a lo que buscan los individuos. El siguiente par de piezas de datos es la fuente de tráfico. Y luego también entendiendo si eres algún tipo de idiomas, ya sabes, a veces es posible que necesites agregar un idioma diferente si estás notando que gente de diferentes países va ahí ya que obviamente lo que gente está usando la mayoría de la época. Y es solo una gran manera de poder mirar el móvil versus el escritorio, pero luego también mirar qué tipo específico de dispositivos están usando. Y otra cosa que puedes averiguar con el uso de la analítica es mirar a las audiencias y mirar al usuario Pat. Entonces, ¿qué tipo de camino están tomando para aterrizar realmente en tu página web? ¿ Vienen de un enlace externo o de los que vienen directamente a los sitios web? ¿ Están viniendo de un anuncio específico, correcto, por lo que realmente se puede rastrear cómo ese usuario terminó en el sitio web, información muy importante. Y entonces también poder ejecutar las pruebas AB, ¿verdad? Las pruebas de ab es esencialmente donde tienes dos anuncios diferentes que tienen esencialmente tipo de material de contenido similar. Pero hay un pequeño componente que se cambia en uno de los anuncios para que estés probando, digamos un titular, digamos una imagen. No obstante, en su mayor parte, vas a estar teniendo que sean iguales con solo un componente en particular que se cambia. Un buen ejemplo de esto es, digamos que tienes dos tipos diferentes de anuncios, uh, estás probando y tienes la misma copia de mensajería en ambos anuncios. No obstante, el único componente que estás probando es la imagen. Entonces quieres ver qué imagen es en realidad la que más resonó con la gente. Entonces eso es lo que considerarías un tipo AB de pruebas split, ¿verdad? Donde estás probando solo un componente ahí y donde vas a poder encontrar todos estos datos es con Google Analytics, algo que es muy recomendable. Es gratis cada uno de los sitios web o aplicación web. Si es salud lo online, puedes adjuntarle Google Analytics y poder mirar todos estos datos diferentes. Por lo que realmente puedes ver qué tipo de usuarios son realmente atractivos e interactuando con el sitio web o la aplicación. Entonces eso va a estar aquí para el uso de la analítica. Y nos vemos en el próximo. 79. Mapas y elementos de calor y elementos de elementos: En este video, vamos a repasar lo importante de usar heatmaps y un montón de otros diferentes recursos que vas a necesitar para asegurarte de que estás analizando el sitio web o cualquier tipo de producto que desarrollado donde se tiene tráfico constante, se tiene interacción constante con diferentes audiencias. Entonces sigamos adelante y saltemos a usar mapas de calor y algunos recursos adicionales. Ahora cuando se trata de experiencia de usuario e interfaz de usuario, heatmaps son una de las formas más poderosas en las que realmente puedes medir el diseño general de esa aplicación o sitio web en particular. Porque se puede ver donde la gente está pasando su tiempo. Si están pasando su tiempo arriba en la navegación del encabezado o en el pasar el tiempo en realidad, ya sabes, jugando con los diferentes factores en el sitio web como el cuerpo del texto o en la barra lateral, o son dando click en un botón específico en el que quieres que click para que puedan entrar en la siguiente etapa de tu embudo de ventas, son la compra un producto, ¿verdad? Digamos que hay una tienda de comercio electrónico. Se quiere asegurarse y mirar hacia dónde va la gente. ¿ Están los realmente seleccionando el agregar al carrito, son los realmente comprobando? ¿ Por qué no están revisando? ¿ Dónde pasan la mayor parte de su tiempo? Y entonces lo que puedes hacer es usar la agrupación para diferenciar u, iv y secciones, ¿verdad? Puedes usar el encabezado y quieres asegurarte, oye, cuántos prestamos su tiempo arriba en el encabezado, qué tan nuevos gastando su tiempo en el pie de página, Holman, en realidad estás haciendo clic en ciertos botones. Por lo que realmente quieres que esto sea muy preciso. Y una de las cosas que puedes hacer también es usar el espacio en blanco bastante ahí para preservar la legibilidad, especialmente en dispositivos móviles, quieres hacerlo para que haya mucho espacio en blanco. Entonces eso es fácil de leer, eso es fácil navegar a través de una experiencia placentera, ¿verdad? Porque si tienes tantas cosas en una página en particular, solo piensa en esta imagen aquí mismo. Obviamente esto no es un sitio web ni una aplicación, solo te está mostrando diferentes elementos. No obstante, imagínate si aterrizaste en un sitio que tenía todos estos botones diferentes, todos estos diferentes componentes y se agruparon así juntos, ¿verdad? No sería una experiencia muy placentera ni emocionante. Estarías confundido. Sería simplemente demasiadas cosas pasando de una vez. Son tan importantes para asegurarte de que estás preservando el espacio en blanco para una mejor legibilidad y estás aumentando el espaciado de longitud en los dispositivos móviles. Y una de las cosas que también puedes hacer es buscar usar piezas de textos más cortas, ¿verdad? Entonces si miras esta imagen aquí mismo, solo tienes pequeños trozos de texto como registro, login. Tienes, digamos tablón de mensajes o último mensaje, cosas que van a ser piezas muy cortas de textos o no están comiendo mucho espacio. Y siempre quieres recordar los fundamentos de la interfaz de usuario, ¿verdad? Quieres asegurarte de tener suficiente espacio para todos los diferentes componentes, todos los diferentes elementos. Y las estás usando apropiadamente y no estás abrumando a un usuario cuando está usando los sitios web, cuando están en el sitio web, o cuando están usando una aplicación específica. De acuerdo, así que ahora echemos un vistazo a un par de herramientas aquí para la investigación que vas a poder usar. Como mencioné anteriormente, un Google Analytics te va a dar una gran, gran visión general de dónde viene el tráfico. Tipos, tráfico que la demografía que localiza, las edades y los dispositivos. Lo mismo con el índice i, sin embargo, Google Analytics es probablemente el más confiable en cuanto a la fuente ahí porque solo puedes conectarlo al sitio web y va a poder jalar en todos los diferentes tipos de fuentes. Entonces lo siguiente que quieres ver es la pauta de diseño de interfaz humana, asegurándote de tener las pautas correctas configuradas para los diferentes dispositivos iOS, ¿verdad? En una laptop, en una tableta real, el reloj real también, ¿verdad? Y esto es algo bastante nuevo en el mercado, y también Apple TV. Y luego aquí hay algunos enlaces útiles que puedes usar también. Por lo que tenemos n un in-group dot com Material, dot au slash design, diseño inspiration.com, y luego un montón de otros recursos diferentes así que puedes consultar en cuanto a la mejora general en la optimización de la la aplicación, o cualquier producto que hayas desarrollado o construido. Entonces eso va a ser aquí para los mapas de calor, las colocaciones, y los recursos adicionales. Y nos vemos en el siguiente. 80. Creación de un informe usabilidad: En este video, vamos a repasar la elaboración de tu reporte de usabilidad. Por lo que este tipo de informe va a ser genial para una auditoría. Digamos que tienes un cliente potencial que está queriendo hacer algo de trabajo y querían obtener una visión general de su sitio actual y su funcionalidad. Una de las cosas que puedes hacer es crear un informe de usabilidad para mostrarlos e identificar diferentes oportunidades, diferentes tipos de diseños que realmente les ayudarían y mostrarles diferentes temas técnicos, diferentes problemas de velocidad del sitio, diferentes temas de SEO, y realmente hablan de diferentes tipos de mejora. Segundo, realmente realzar ese sitio web o la aplicación. Y esto va a recorrer un largo camino, sobre todo en la etapa de licitación inicial donde digamos que estás pujando por este proyecto en particular y el cliente quiere que exhibas tu mejor pie adelante, ¿verdad? Pon tu mejor pie hacia adelante. Bueno, puedes enviarles un informe de usabilidad en particular y mostrarles, oye, esto es lo que encontré en tu sitio. Estos son los problemas, los temas, ya sabes, las oportunidades que he encontrado. Y entonces realmente te pone por delante de la curva. Y te pone en un nivel diferente al de tu competencia porque estás dispuesto a aportar valor por delante antes de que te paguen alguno de los servicios reales. Por lo que una vez más, el reporte va a ser para un cliente y algunos de los objetivos más comunes aquí que vas a pasar y en realidad incluir es identificar las oportunidades, buscar diferentes cambios de diseño que puedan fácilmente aumentar su experiencia de usuario, interfaz de usuario, y luego identificar también diferentes temas técnicos que mencioné. Y luego el número cuatro, se pueden discutir diferentes tipos de mejora. Entonces cuando veas aquí los objetivos de negocio, esto va a ser lo primero que tienes que entender. Tienes que entender lo que en última instancia están tratando de lograr o están tratando de vender un producto? ¿ Están tratando de vender un servicio? O simplemente están tratando de obtener inscritas por correo electrónico, o simplemente están tratando de conseguir que los usuarios se inscriban en una aplicación en particular. Ya sabes, ¿qué es lo que buscan lograr? De verdad quiero poder entender eso. Y una vez que tengas ese objetivo final de tus clientes, y entonces todo lo demás simplemente puede seguir. Para que entiendas los objetivos de negocio, el objetivo final que buscas lograr. Ahora quieres entender los flujos de persona y usuario. ¿ Tienen el tipo correcto de mercado objetivo que van tras? ¿ Entienden su mercado objetivo? Entienden las necesidades, las necesidades, ¿verdad? Y ¿tienen un flujo específico o viaje del cliente o incluso embudo de ventas, derecho, para que ellos sigan y realmente pasen a convertirse en un cliente pagador o para realmente inscribirse en una lista de correo electrónico o lo que sea que sea, cualquiera que sea la acción ellos quieren que se lleven. Y así puedes dibujar eso aquí en Adobe XD, y vamos a tener eso en Adobe X z En la siguiente lección, somos Arthur te va a guiar a través de cómo crear un informe de usabilidad desde cero. No es necesario crearlo desde cero. Se puede obtener una plantilla. Simplemente cambia parte de la información tú mismo, sin embargo, vas a poder ver cómo crear eso en Adobe XD desde cero. En este dibujo particular aquí se crea en sorteo que I0. Esta es una gran herramienta que realmente te da la capacidad maquetar y mapear un flujo de usuario específico, ¿verdad? Y luego yendo aquí abajo, trabajando con datos, aquí es donde has podido acceder a tal vez a su Google Analytics o a cualquier tipo de software analítico que les muestre ¿cuáles son las demográficas de ese tráfico? ¿ Qué tipo de dispositivos están utilizando? Puedes usar sitios como SEMrush que realmente te dan una buena indicación de los visitantes reales del sitio web cuánto tráfico proviene el tráfico, si tienen o no tráfico también. Y así no necesitas tener acceso a su Google Analytics a menos que realmente te hayan dado acceso a eso, ¿verdad? Y luego bajando aquí, revisión de usabilidad, mirándolo caminando, tal vez digamos comprar un producto o registrarnos como email opt-in, ¿verdad? Sea lo que sea, quieres caminar por experiencia de usabilidad y pasar por ella como si fueras un cliente para que puedas tener una buena comprensión de cómo funciona en diferentes áreas para mejorar eso, ¿no? Y luego viajes de usuario, ¿verdad? Se quiere entender de dónde vienen en realidad, cuánta información se les proporciona. Se quiere asegurarse de que el diseño sea consistente en todo el tablero en todas las páginas diferentes, que no haya ningún problema con la alineación, que haya buenos esquemas de color, que no haya ningún tipo de cuestiones lo haría jerarquía de páginas o tasa de jerarquía de contenido. Y luego asegurándose de que sea móvil responsive en que se muestra también en el escritorio en una violación muy agradable. Y eso obviamente se muestra muy bien en el escritorio también. Y aquí hay una cosa que no necesitas incluir todo aquí. Creo que lo más importante, como mencioné en un principio, es sólo darles tan lejos como un análisis desgarro, fortalezas, debilidades, oportunidades, y amenazas, ¿no? Y luego dándoles en última instancia una estrategia o un plan de go-to como, hey, esto es lo que puedes mejorar para realmente aumentar y mejorar tu UX, derecha, tu UX a nueva UI. Y luego aquí mismo, este es el rendimiento de un sitio web al que puedes ir fácilmente, creo que es el faro de Google, o simplemente puedes teclear en Google, herramienta SEO de búsqueda de Google o algo así. Y se puede tirar hacia arriba y se puede poner en la URL de la página web ahí dentro. Y te mostrará lo rápido que carga el sitio web. Seo velocidad, temas con temas técnicos con la página web. Y así es un gran recurso. Y luego aquí abajo, esto es para como diferentes esquemas de color. Y luego la revisión técnica, mencioné el rendimiento del sitio web, asegurándome de que en realidad está optimizando su carga lo suficientemente rápido, ¿verdad? Porque muchas veces están consiguiendo tantas cosas pasando, en un sitio web o hay tantos datos y tal vez las imágenes son muy grandes. Los videos ocupan mucho espacio o lo que sea que sea, que le está costando al sitio web real , ya sabes, mucho tiempo para que se cargue. Y así quieres que sea típicamente dentro de uno o dos segundos, se carga el sitio web. Y así quieres asegurarte de que estás realizando un tipo de análisis de velocidad de sitio web también. Y luego bajando aquí y a las mejores prácticas y haciéndoles saber lo que deberían esperar, lo que deberían tener en su rubro particular, asegurándose de que seguir el tipo correcto de especificaciones para como móvil en diferentes tipos de dispositivos móviles, ¿verdad? Y luego SEO, ¿verdad? Asegurándose de que tengan una buena optimización de motores de búsqueda y que estén usando eso a su favor, ¿verdad? Y luego en última instancia, las oportunidades aquí que quieres mostrarles, oye, esto es lo que te estás perdiendo. Esto es lo que puedes hacer para mejorar y esto es lo mucho que un mejoraría tu sitio web en particular. Entonces este es un video agradable y sencillo aquí, solo te da una visión general de un reporte de usabilidad. Puedes encontrar estos prácticamente en cualquier lugar. Te vas, literalmente solo informe de usabilidad de Google y pueden llegar a ser bastante complejos, pero no los necesitas para ser super-duper complejo. Bien. De cinco a diez páginas debería estar bien. Creo que uno de estos aquí, esta es una de las 43 páginas de aquí. Esta es una experiencia de usuario ADI aquí, informe de muestra. No hace falta ir tanto en profundidad. No obstante, se puede ver lo que esto tiene aquí, ¿no? Tienes una tabla de contenidos y consulta aquí la página de inicio. Y entonces tiene aquí abajo navegación y hallabilidad, ¿no? Y luego el análisis de búsqueda. Y luego muestra la página de más ejes, ¿verdad? Por lo que te muestra esencialmente lo que puedes esperar. Y esto es como dije, mucho en profundidad. No necesitas que sea de cinco a diez páginas. No necesitas que sean 40 páginas. Solo necesitas que sea, ya sabes, buenas 5-10 páginas y darles una visión general de lo que has podido encontrar y luego las oportunidades que les faltan y cómo pueden mejorar la experiencia general en el sitio web. Entonces eso va a estar aquí para esta. Como dije, Arthur te va a guiar a través de cómo crear un reporte de usabilidad en el siguiente video. Entonces eso es todo para este video, y te veremos en el siguiente. 81. Lección de Adobe XD en los informes de creación: creación, en XD: Bienvenido de nuevo. Y esta será la última lección donde te mostraré cómo elaborar tu informe de usabilidad o cualquier otro informe durante tu proceso de UX. Y en primer lugar, me gustaría comenzar con una estructura de datos o una estructura de información sobre el lienzo. Prefiero crear diseño de solución de problemas con una captura de pantalla si éstas están disponibles. Entonces empecemos y traigamos una captura de pantalla de muestra. Por lo que tu lona y tipo problema. Entonces solución. Perdón, importante encontrar uno. Y ésta debería ser la lista de problemas que encontraste. Déjame cambiar un poco el fondo. Por lo que tiene un pequeño contraste. Por lo que el diseño en este momento no es un delta importante, como puede que ya te des cuenta. Y primero irá mal o, o calidad de la imagen principal, entonces el diseño no responde. Es solo que por ejemplo, Adobe.com no tiene nada. Con eso. Surge te está mostrando los ejemplos. Y el tercero será demasiado pequeño. La fuente se utiliza en el cuerpo. Entonces si tu lector, gente que leerá tu reporte, es agradable tener estos puntos de bala para que también se reflejen en el lienzo. Entonces para que éste haga eso, necesitas recoger un color contrastante. Por lo general naranja. Y es agradable tener y pequeño contorno para que no se mezcle con el, con el contenido. Y tenemos algún punto aquí. Será un PIN número uno. Y la mala calidad de la imagen principal irá aquí. De acuerdo, imaginemos que esto no es SVG a esto. Eso es algo muy comprimido. ¿ De acuerdo? Fino, de color más brillante, de acuerdo. Puedes agregar sombra si quisiéramos destacar un poco más. Esta es la bala número uno. El viñeta número dos, el diseño no responde. Puedes ponerlo en algún lugar por aquí. Porque es cosa general. Se utilizan fuentes demasiado pequeñas para el cuerpo. Y aquí va la tercera. Ok. Ahora ya ves, podemos leer, podemos mirar, ver qué se entiende por estos tres puntos. Por supuesto, hay que llegar a soluciones porque lo contrario se cargará sin análisis. Por lo que hay que proponer algunas soluciones. E imaginemos que todo donde escribí es real y la imagen debe rastrearse en SVG. De acuerdo, entonces tenemos que usar la imagen original de like, imaginemos que esta es una imagen JPEG. Construye el archivo vectorial y exórtalo a SVG para que no se produzca ninguna pérdida de calidad. El diseño no es receptivo. Ok, esto es simple, crear en sobre discapacidad a la disposición. De acuerdo, las fuentes demasiado pequeñas se utilizan para el cuerpo. Y el cuerpo usa al menos 60 píxeles. Sans serif. De acuerdo, así que en este momento, no sólo señalas el problema, también das una solución. Lo mismo aplica para una ventana muy, cada pantalla o cada página que estés revisando y cómo puedes enviarla a tu cliente. Si una persona revisa estos en la computadora, es mejor usar el diseño del paisaje. Si desea imprimir este reporte. Quizás puedas considerar el diseño del retrato. A pesar de que es un poco más difícil implementar la estructura al paisaje. Pero si estamos hablando de formato A4 o formato carta, creo que eso es algo cercano a donde tengo, la relación es cercana a lo que acabo de diseñar. Una vez que descubriste todos los problemas, encontró, es posible que empieces a encontrar soluciones. Podrás crear un documento de texto separado para encontrarlos, pero también, por favor ten en cuenta que tienes que hacer. Tienes que hacer capturas de pantalla. Por lo que quieres hacer el doble trabajo. Podrás crear un documento de texto separado donde encuentres. Pones los problemas y las soluciones. También tenemos dos capturas de pantalla para que puedas copiarlas fácilmente a tus barcos impares en XD. ¿De acuerdo? Y por supuesto te puede gustar agregar un poco de estilo. Vamos a escoger un logotipo para nosotros. Contamos con un logo. Ahora hagamos un poco de estilo. Deja un poco de estilo a nuestra fuente. Puede utilizar Layout Create para crear diapositivas consistentes. Añadamos nuestra fecha actual para obtener Sobre el número de página. Y una cosa que me he perdido es la sección o página que estás revisando. Página de inicio debe escribirse aquí. Ahora tenemos algunas dificultades con en aquí vino a algún pequeño icono que traerá algo de diversidad a tu diapositiva. Puede agregar su correo electrónico. Y el fondo si queremos. Otra cosa es que necesitas tener una introducción Larry Page, que mostrará tu introducción, cual te explicará qué factores consideraste mientras diseñaste tu usabilidad te debía. Tratemos de hacer un par de cosas. En primer lugar, necesito crear otra página. Démosle un nombre intro. Puede agregar su nombre personal o el nombre de la empresa dependiendo de cómo se presente aquí. Por. Y las mujeres ponen un ligero fondo para hacerlo más gráficamente interesante. Entonces agreguemos una imagen. Aquí. Yo solo quiero mantener estas luces al estilo. Ahora puedes exportar tu documento a, vamos a ver, exporta todas las embarcaciones. Aquí. Seleccionar PDF. Quieres que sea un archivo pdf múltiple. Por lo que cada página sería archivo PDF separado. Se seleccionan varios archivos PDF. Si quieres. Tu reporte estaría todo en un solo archivo, pero con las múltiples páginas dentro de él, solo Seleccionas solo archivo PDF. Y he abierto este documento y veo que hay dos páginas texto esto se puede seleccionar, se puede copiar, pegar, y por supuesto, se podría imprimir. Nuevamente, si quieres que eso se imprima inicialmente, solo sin mostrarlo en pantallas digitales, es mejor prepararse. El diseño de retrato para formato A4 o carta depende de la región, país, además de la portada y las páginas de contenido, es agradable crear otra página en la que se exponga de qué trata este reporte? Cual es su habilidad o y aquí tengo el texto que estoy usando sobre todos mis reportes solo para que el cliente sepa qué estás haciendo y para qué. Otra cosa que puedes usar es agregar una sección donde comparas la buena y la mala experiencia del usuario. Hagámoslo. Tan bueno Actúa es algo que pone sobre detectados diez desapercibidos. Proporciona a los usuarios relleno de sencillez y elegancia que existen detrás de bambalinas en los pequeños detalles. Pero sí, pero es esencial para tu empresa. Y las personas que usan tus productos. Per UX también se pone indetectado y desapercibido. No obstante, da como resultado frustración desorden, sentimientos de disgusto. La gente va a salvar este producto es confuso o algo simplemente no está bien, o estoy perdido, una mala experiencia y usabilidad puede no alejar inmediatamente a los clientes, pero con el tiempo lo hará. Entonces leamos la descripción. Una experiencia de usuario, oh, hizo es una evaluación de la usabilidad del sitio web o aplicación de software por parte de una experiencia de usuario o diseñador de UX. Tomamos sus objetivos de negocio y sus objetivos de audiencia objetivo en concentración para evaluar si hay algo en su sitio que esté impidiendo que usted o sus usuarios logren esas metas. Todo, desde la tipografía, el diseño y el flujo, se evalúa contra los principios de usabilidad establecidos, investigación científica, las prácticas, y las tendencias actuales para crear sitios web intuitivos que resuenan con la forma en que su usuario. Gracias. Entonces cuando persona abre tu auditoría, por lo que tenemos el título, tenemos información. ¿ Cuál es la experiencia del usuario? Ah, ¿qué es la buena y mala experiencia de usuario? Y el contenido va en cada página que estás revisando tendrá la solución del problema y este fin capturas de pantalla como soporte visual para tus hallazgos. Otra cosa que sugiero que incluya es la puntuación general o conclusión en su informe como última página. Tengo el mismo diseño que tus páginas de texto anteriores, pero tendré la conclusión. Podrán escribir aquí. En general, el sitio web se ve bien, pero sin embargo, impide que los usuarios logren sus objetivos. Por estas razones, las siguientes razones. Debido a la ausencia de fuentes o gráficos adecuados, lo que sea. Debido a la compleja interacción, debido a la estructura compleja, debido a la ausencia de navegación fácil de usar. Estamos navegación tiene que ser repensar y así sucesivamente y así sucesivamente. Y otra cosa es descomponer algunas categorías de productos digitales. Y puede que tengas una partitura de banda para Overview. Y tener una calificación de búsqueda como los tres primeros comentarios y errores. 19 a diez, orientación de tareas. 90 a diez. Entonces 90 es bueno, diez es malo. Digo, 90%. Foros y entrada de datos. Podría ser esa página principal, la puntuación general de Página Principal, y diseño visual, navegación, nivel de confianza, contenido, calidad. Y podemos incluir Page Speed. Por lo que dependiendo del tema de su investigación, puede agregar estas secciones a su puntuación general en el laboratorio en la última página de su reporte. Déjame explicarte un poco. Creo que eso tiene que explicarse con mayor detalle. De acuerdo, he prediseñado pit esta sección. Por lo que la búsqueda es el Lugar. búsqueda corresponde a la posición de este sitio web en los motores de búsqueda utilizando las palabras clave que son relevantes, retroalimentación y errores es cuando un usuario entiende cuando el sistema se comunica con el usuario y proporciona retroalimentación sobre algunos eventos. Ya sea un error, si es todo está bien o así sucesivamente y así sucesivamente. Foros y entrada de datos es la puntuación de la interacción laboral con los formularios y el ingreso de los datos. Bueno, creo que habla por sí mismo. ¿ Qué tan comodidad, qué fácil es la estructura de foros que IQ prueba en este sitio web? Sistema. El puntaje de página principal es solo el puntaje general de la página principal y es abstracto, puedes medirlo. Por supuesto, todo depende de tu experiencia y tus conocimientos y tu juicio, disposición y diseño visual. Esta es también la puntuación abstracta para la modificación general del diseño. Qué fácil es navegar por un sitio web. Y creo que me perdí la orientación de tareas. Este parámetro es la indicación de lo fácil que es entender lo que tengo que hacer para llegar del punto a al punto B. Imaginemos que me gustará comprar entradas al concierto y tengo que saber por dónde empezar mi proceso de compra, donde tengo que presionar, donde hay que hacer click. Imaginemos un gustaría comprar entradas para un concierto. La buena orientación de tareas es cuando habrá una búsqueda de botones muy clara para boletos, por ejemplo, y habrá fácil listado de filtros y así sucesivamente y así sucesivamente con el fin de facilitar el proceso de búsqueda y compra de boletos. Por lo que básicamente la orientación de tareas es el camino que tengo que atravesar del punto a al punto B. Debe estar claro, si no lo es, significa que la puntuación será menor. El nivel de confianza para los sitios web se puede difundir a varias categorías, como usted puede confiar en este sitio web en términos de compartir su información personal, su información financiera, o información comercial en otra información confidencial. Y también requiere tener protocolos adicionales como SSL u otros protocolos que se requieran para procesar transferencias de dinero u otras transacciones financieras. Y si encontraste alguna evidencia de que este sitio web fue sospechoso en fraude o algo así o la otra retroalimentación negativa. Eso significa que el nivel de confianza será menor. calidad del contenido refleja la puntuación general de todo el contenido en conjunto, que incluye etiquetas y contenido multimedia. Si es interesante si imágenes Ford que se utilizan son hechas a medida, no imágenes en stock. Si textos Gran Bretaña es interesante, si el artículo tiene imagen de portada relevante y así sucesivamente y así sucesivamente. velocidad de la página es el servicio traído por Google y calcula la Velocidad de la Página en general y sugiere mejorar algunas partes del sitio web con el fin de aumentar la descubribilidad. Por lo que podría haber algunas cosas técnicas. Podría haber algunas cosas diseñando, arreglando un código o reemplazando imagen, o convirtiendo imágenes a un formato más moderno, citando algunas páginas metapalabras clave. Y muestra claramente cómo este sitio web es visto por Google. Por lo que quieres que tu página web sea amigable con Google. Tienes que corregir estos errores que pulpy encontró en tu sitio web por la velocidad de la página. Por lo que al revisar conclusión son los, digamos una especie de versión extendida del Informe. Y de nuevo, exportarás esto como todos nuestros tableros y solo archivo PDF. Y tendremos todas las páginas en un solo PDF para su revisión por parte de sus grupos de interés. Entonces creo que eso es todo por ahora. Muchas gracias por su atención. Te deseo buena suerte con la elaboración de tu experiencia de usuario visibilidad, informes. 82. Carrera en la sección de UX/UI: En este video, vamos a repasar comenzar una carrera en el campo UX UI. Ahora esta sección en particular aquí va a ser bastante intensiva. Aquí vamos a tener mucho contenido, mucho material. Porque vamos a repasar bastante. Voy a caminar por varias cosas diferentes como cómo construir una marca, branding personal, cómo configurar un sitio web, tenía una red, todas estas grandes cosas que debes entender y saber cuando estás iniciando una carrera en el campo UX UI. Una de las cosas que mencioné anteriormente en una de las otras conferencias y, y a lo largo de este programa en general es que quieres ser multifacético cuando estás entrando en la UX UI sentir, sobre todo si vas a ser trabajando para organizaciones más pequeñas, pequeñas y medianas empresas, o incluso las organizaciones de startups, ¿verdad? Quieres ser alguien que entienda no solo UX UI, sino que también entienda embudos de ventas. comportamiento, psicología del usuario, ¿verdad? Para que no sólo puedas entender tus roles, sino también entender los roles de los demás en la fase de diseño real en la organización en cuanto al diseño, que puedas ser tanto más valioso para una organización. Y por la razón que sea, si hay en cualquier momento que haya despidos que tú vas a ser la persona que se pegue por tu valor fuera de solo tener la UX UI, ¿verdad? Entendiendo cómo escribir copia, copiar marco, embudos de ventas, viaje del cliente, todos esos tipos adicionales de habilidades y conocimientos que no conocería un diseñador típico de UX UI. Así que sigamos adelante y saltemos al inicio de una carrera en UX UI sección resumen. Entonces algunas de las cosas que vamos a estar cubriendo aquí es la consultoría freelance y clientes. Vamos a caminar por varios sitios web independientes diferentes. Te voy a guiar a través de cómo configurar tu página web. Te voy a guiar a través de cómo también empezar con la consultoría de Chang. Te voy a dar algunos ejemplos de Arthur y su particular perfil sobre Upwork y luego también varias otras plataformas diferentes también. Y te daré algunos consejos sobre eso. Y luego voy a caminar por algo que es extremadamente poderoso, que probablemente valga más que un curso completo en y por sí mismo. Y estas van a ser mis plantillas particulares que uso en noción que es para tu vida personal y tu negocio y trabajo reales. Y con estas plantillas en particular, vas a poder correr toda tu vida fuera de esto así como cualquier tipo de proyectos de cliente que trabaje dentro de un equipo o lo que sea, luego a b, vas a ver lo poderoso que es esto. Se trata de unas plantillas prefabricadas donde tienes diferentes secciones. Tienes diferentes áreas para proyectos, tendrás diferentes áreas para clientes. Tengo diferentes áreas para tus cosas personales y solo va a ser algo que podrás usar para toda tu vida o para también tu proyecto. Por lo que estoy muy emocionado de poder presentarte eso y mostrarte justo el verdadero poder de ello. Y luego vamos a estar hablando de construir una marca, marca personal, entender qué es una marca, la importancia de la misma. Y cómo puedes desarrollarte y cómo puedes aprovechar branding personal para sacar tu nombre como diseñador de UX UI. Y esto es extremadamente importante, sobre todo si vas a ir a ruta freelance y quieres conseguir tus propios clientes. Quieres poder estar ahí fuera en la web ¿verdad? En tantos lugares diferentes como sea posible. Especialmente también si buscas conseguir trabajo. Una de las primeras cosas que harán ahora los empleadores cuando obtengan una solicitud es la aplicación para mirar la experiencia y lo que no. Pero también estarán mirando a Google. Habrá Google al aspirante a mirar, ¿están en línea? ¿ Qué tipo de, ya sabes, qué aspecto tienen los perfiles en línea? ¿ Tienen una página de Facebook que tienen una página de negocios, verdad? Todas estas cosas diferentes son, los empleadores van a tomar en cuenta porque quieren en el individuo real ahí dentro que sea único, eso es diferente, que se va a diferenciar del resto de la competencia, que acaba de tener, digamos, una aplicación, escribir un currículum con alguna experiencia, ¿no? Y luego vamos a estar repasando la importancia de tener un sitio web y un blog y cómo realmente puedes mostrar tu portafolio. Escaparate quizá algunos testimonios de trabajar con clientes. Entonces que alguien, tu trabajo, correcto. Esto va a ser algo que es extremadamente poderoso para que tengas, sobre todo si vas a bajar del modo freelancer y luego a hacer networking. Esto también va a ser extremadamente importante para conseguir clientes, pero también conseguiría trabajos ¿verdad? Ser capaz de entender cómo puedes aprovechar tu red existente, pero luego también poder salir por ahí y conectarte con otros y poder tenerlos presentarte a nuestro ponerte en posiciones para poder encontrar ciertos puestos, ciertas personas que pueden convertirse en un cliente o potenciales empleadores. Y luego caminaremos por algunos de los mejores sitios web freelance. Algunos de los top que te recomiendo, algunos de los que deberías estar en, algunos de los que no deberías estar en. Pérdida caminará por algunos de los diferentes sitios para que puedas poner tu portafolio y en realidad puedes conseguir algunos trabajos y conseguir algunos clientes. Y luego repasaremos por algunas de las preguntas que quieres tener en cuanto a alcance un proyecto para UX y UI, ¿verdad? Quieres poder tener un conjunto de preguntas que estás haciendo tu potencial cliente o cuando estás empezando y estás trabajando en equipo. O tal vez estás haciendo una UX UI tú mismo en una organización más pequeña. Se quiere tener configurado este tipo de preguntas para que pueda iniciar el proyecto real y en realidad entrar en la fase de diseño, ¿verdad? Y luego finalmente, lo vamos a terminar con los mejores lugares para encontrar trabajo de UI y UX. Entonces esto va a ser un recurso aquí. Te voy a mostrar sobre el hombro diferentes sitios y puedes ir y en realidad buscar posiciones abiertas. Algunas de las cosas a tomar nota, algunas de las mejores maneras de abrir tus mensajes, ¿verdad? Y así esta va a ser una gran sección aquí. A mí me emociona que empieces. Y eso va a estar aquí para comenzar una carrera en la sección UX de la interfaz de usuario general. Y nos vemos en el siguiente. 83. Tu Hub productivo diario: De acuerdo, entonces en este video, vamos a repasar tu herramienta diaria de productividad, que va a ser a través de la noción. Ahora noción aquí es una fantástica herramienta de productividad similar a una sauna Trello. Algunos de los principales grandes nombres por ahí, sin embargo, la noción tiene una tonelada de características más que están disponibles para ti y es 100% gratis. Y como puedes ver aquí, puedes crear diferentes tipos de espacios de trabajo. Puedes hacer un seguimiento de tus proyectos, tu lista de tareas pendientes. Voy a tener tantas cosas diferentes que puedes hacer. Y lo que he podido configurar para ti es un hecho para ti plantillas donde tiene ahí tu visión, tus metas y tus resultados, tus diferentes proyectos, tu productividad diaria en cuanto a tus tareas, y luego su CRM para sus clientes. Por lo que vas a poder gestionar todo a través de este hub. Vas a poder gestionar a tus clientes, tu lista de tareas pendientes, mirar tus diferentes proyectos con tus clientes. Es solo una herramienta fantástica para poder entrar aquí todos los días. Y en lugar de tus tareas pendientes, actualiza tu CRM, tus diferentes hitos. Entonces sigamos adelante e iniciemos sesión aquí. Todo lo que tienes que hacer es registrarte y solo usa tu suscripción por correo electrónico. Entonces vamos a iniciar sesión aquí. Se va a continuar. Esto es más o menos parpadeo. Hay muchas cosas diferentes que podemos hacer. No obstante, vamos a instalar la plantilla hecho para ti que he creado para ti. Entonces déjame seguir adelante y agarrar eso por aquí. Por lo que vas a obtener acceso a un enlace especial. Entonces hay que hacer es copiar ese enlace, ponerlo aquí. Entonces esta es la plantilla real aquí que vamos a configurar. Entonces vamos a duplicar. Y esto se está agregando a tu particular hub real aquí. Por lo que podemos ver aquí que se ha agregado. Y entonces aquí es donde vamos a estar trabajando todos los días. Entonces, cada día, cuando entras aquí, quieres mirar tus diferentes tareas. Quieres mirar a tu CRM. Y como puedes ver aquí, habla de esbozar tu visión y tus metas y luego tu resultado. Entonces tus metas son esencialmente lo que quieres hacer y los resultados son esencialmente el resultado de lo que vas a hacer, ¿verdad? Cómo vas a lograr eso en realidad. Y luego tenemos los proyectos, después tenemos los hitos, y luego las tareas, y luego un CRM, y luego tenemos las metas y los resultados. Entonces como pueden ver aquí, tenemos los resultados. Y así este es el resultado real de lo que queremos de nuestra meta. Entonces tengo un objetivo aquí para organizarme más. Bueno, ¿cuál es el resultado directo de eso? Correcto. Bueno, necesito planear cada semana en base a una jornada laboral de ocho horas. Está bien. Y luego aquí mismo B encima de mis finanzas, mantén un seguimiento diario de mis finanzas creando presupuestos mensuales justo, aquí mismo. Crea 350 videos de YouTube para este año. Y entonces cómo voy a lograr eso? Bueno, voy a grabar videos por lotes el sábado y publicar videos diarios de YouTube. Y luego iremos justo aquí. Yo quiero pesar 225 libras. Entonces, ¿cómo voy a hacer eso? Bueno, ir al gimnasio por las mañanas y luego enfocarse en ensaladas y verdes. Entonces así es como vas a configurar tus resultados. Recuerda, los resultados son el resultado directo y cómo vas a lograr eso, correcto. Por lo que es importante que tengas tus metas aquí arriba y luego tus resultados ahí mismo, y verás que todo está apegado. Entonces vamos aquí al resultado real aquí. Por lo que planifica cada semana en base a ocho horas de jornada laboral. Y está conectado a este objetivo en particular. Está bien. Y puedes agregar aquí fecha específica si quieres hacer un día real específico en tiempo, fecha de inicio, y hora. Y entonces aquí mismo puedes poner el estatus aquí. Puedes poner en buen camino, y luego también podemos asignarlo a un trimestre específico. Entonces y así digamos que querías hacer todos los trimestres aquí todo el año. Entonces iremos adelante y prepararemos eso y entonces esto te mostrará todos los cuartos aquí, ¿de acuerdo? Entonces quieres que esto se haga y todo el año, así que tienes los cuatro trimestres aquí. Si solo quieres tener uno o dos, puedes hacer eso también. Y luego puedes asignarle diferentes tareas. Puedes bajar aquí y agregar alguna información adicional, sea lo que sea, ¿verdad? Esta es una herramienta muy, muy buena para que puedas configurar tus metas, tus resultados, bien, en esta área en particular aquí. Entonces así es como configuras tus metas, tus resultados, muy sencillos de configurar. Adelante y volvamos aquí. Yo quiero mostrarte una cosa más. Tienen diferentes emojis. Aquí puedes ir al azar y yo solo pondré lo que quieras. O simplemente puedes pasar por aquí y encontrar cualquier emoji que quieras con esa configuración ahí, ¿verdad? Y así sigamos adelante y salgamos de esto. Y luego bajemos aquí. Entonces tenemos proyectos. ¿ De acuerdo? Entonces los proyectos son como para tus clientes, ¿verdad? Si estás trabajando con un cliente en particular, quieres poder configurarlos en un proyecto en particular. Y quieres poner aquí las fechas en cuanto y cuando lo inicies con ellas, ¿ cuándo se termina el acuerdo? Ya sabes, normalmente si estás trabajando con clientes, vas a estar haciendo en cualquier lugar entre 3612 meses acuerdos. Entonces digamos que este de aquí es para un cliente en particular. Aquí ponemos las fechas. Podemos asignarle esto a cierta persona. Podemos poner el más gordo aquí. Y luego bajamos aquí y luego podemos ver el calendario real donde podemos poner en información diferente. Entonces digamos aquí, podemos poner su página de aterrizaje de configuración, ¿de acuerdo? Y esto por hacer aquí en, digamos el décimo, ¿de acuerdo? Y entonces podemos sumar lo que queramos aquí por cara sonriente baja, ¿de acuerdo? Y luego se enfría de nuevo. Entonces tenemos eso ahí mismo. Y luego aquí abajo tenemos las tareas de flujo Kanban donde puedes agregar en diferentes tareas. Puedes poner en diferentes meses aquí. Puedes cambiar estos cuatro días, lo que sea que quieras hacer aquí. Es muy fácil cambiar esto hacia arriba y se puede agregar en diferentes cosas. Entonces vámonos, vayamos incluso así. Entonces básicamente, todo lo que tienes que hacer, si quieres agregar algo aquí, vas a este lugar justo aquí en nuestro show te diferentes elementos que puedes agregar aquí. Entonces si quieres agregar solo texto, si quieres agregar una página, quieres agregar una lista de tareas pendientes. Si desea agregar el encabezamiento uno, el encabezamiento dos. Si desea agregar una lista de viñetas. Está bien, numerado. Alternar este divisor de cotizaciones. Se puede agregar en diferentes mesas, diferentes tableros, un poco como la que tenemos aquí. Y luego, ya sabes, aquí es como una galería. Aquí tienes un calendario de lista simple. que tienes tantas cosas diferentes aquí que puedes agregar y modificar con esta herramienta en particular. Puedes agregar diferentes medios, video, audio, podrías incrustar desde diferentes lugares. Entonces esto es solo una gran, gran herramienta, ¿verdad? Si quería entrar aquí y agregar otro, digamos calendario. Está bien. Esto es ir aquí abajo. Calendario ahí mismo. Boom. Entonces así de sencillo es agregar un calendario, ¿no? Todo esto es muy sencillo, muy fácil de navegar y usar. Y como dije, quieres tener toda tu clase en proyectos separados, ¿de acuerdo? Y aquí es donde puedes manejar todo aquí. Entonces bajamos aquí a los hitos. Y esto es por cada trimestre. Entonces esto sería, ya sabes, oye, para q uno, estos son los hitos que quiero tener en mi agencia. Yo quiero que este ingreso, quiero que se haga esto, y quiero poder lograrlo. Yo quiero que eso se logre, ¿verdad? Todas esas cosas diferentes que quieres lograr cada trimestre en particular, ¿verdad? Podrás armar eso aquí dentro. Y es genial tener porque quieres poder medir lo que estás haciendo y asegurarte de que estás en el camino y que no tienes fechas que estés siguiendo en diferentes hitos que buscas alcanzar justo a través su trabajo diario. Entonces subamos aquí ahora y vamos a Tareas. Ahora. Este es tu rango de tareas diarias. Y esto es tan grande. O sea, ojalá tuviera algo como esto cuando empecé por primera vez a donde literalmente puedes correr toda tu vida por aquí así como tu agencia. Y así digamos que quieres configurar una nueva campaña de email donde pondrías una nueva tarea. Entonces pondrías en la fecha, la persona apegada a cualquiera de estos otros factores aquí que quieres poner aquí. Digamos que queríamos cambiar el estatus aquí a En Progreso, ¿verdad? Y entonces podemos sumar en las notas que aquí queramos. Podemos poner adentro. Todo se necesita. Es la lista de correos, ¿verdad? O puedes simplemente poner eso en notas aquí, ¿verdad? Si solo quieres dejar notas para ti, solo puedes copiar esto. Y luego ve aquí mismo, agrega un comentario, ¿de acuerdo? Y luego boom, y luego ahí mismo, y luego se va a poner en las notas, ¿verdad? Entonces esta es una herramienta tan fantástica. Simplemente no puedo hablar de esto lo suficiente. Esta herramienta es un salvavidas completo. Puedes manejar, como dije, toda tu vida así como tu agencia por aquí. Entonces así de sencillo configurarías esto. Y digamos que pudiste terminar esto. Está bien, genial, hecho. Así de sencillo es. Y luego ahí mismo puedes ver que hay un pequeño comentario ahí dentro, ¿no? Y luego aquí abajo, este es tu CRM. Entonces aquí es donde te pondrías para tus clientes, ¿verdad? Digamos que tenías, ya sabes, para este de aquí, las pistas, correcto. Se puede poner en la página web. Cualquier otra característica adicional aquí que desee agregar y luego los comentarios en la nota. Entonces, ya sabes, digamos que ibas a entrar aquí y ser como, ya sabes, hablaste con el cliente y ellos quieren empezar. La próxima semana. Puedes agregar un como este o simplemente puedes copiar e ir justo ahí y poner eso justo ahí. Y una de las otras cosas que puedes hacer es agregar un comentario a esta línea en particular aquí. Entonces digamos que pones vamos a dar seguimiento. Pero el cliente la próxima semana. Está bien. Y luego hueso. Y así ahora se puede ver que hay un pequeño comentario ahí mismo. Por lo que esta es solo una herramienta fantástica. Es decir, simplemente no puedo hablar de esto lo suficiente. Como dije, esta es solo una de esas herramientas donde deseas que tuvieras esto, ya sabes, cuando empezaste o cuando empecé por primera vez. Ojalá tuviera algo así que me permitiera controlar y armar toda mi vida así como mi negocio. ¿ De acuerdo? Entonces así es como se quiere utilizar el CRM aquí, también se puede adjuntar esto a proyectos específicos, metas específicas, ¿verdad? Entonces aquí mismo, no quiero adjuntarlo a eso, ¿verdad? Porque esto es para este cliente. Digamos que este cliente fue el que en realidad se apuntó, ¿verdad? Entonces ahora podemos ver que esto está apegado al cliente XYZ aparecer, ¿verdad? Y así es como lo pondríamos eso. Entonces así es como vas a poder gestionar el aquí de tus clientes con el CRM, gestionar tu lista de tareas pendientes todos los días en cuanto a tus tareas, tus metas, tus resultados para ti mismo, para tu agencia, rango, y solo poder gestionar todo en un solo lugar. Es solo una herramienta fantástica. Y luego aquí abajo, tenemos nuestra del día, si quieres tener algo específico que tuviste éxito durante todo el día, puedes agregar eso ahí mismo. Aquí la de la semana, si quieres sumar en particular cuando eso tuviste, digamos el domingo y luego tal vez maquetar como un triunfo de la semana. Y luego tenemos una revisión semanal aquí también, tipo de lo que hiciste, cómo fueron las cosas. Aquí se puede ver la efectividad, gratitud, mínimos, retos, gana, ¿verdad? Por lo que una manera fantástica de configurar tus reseñas semanales. Y luego también aquí lo que la revisión mensual, ¿no? Entonces, una vez más, todo lo que tienes que hacer para conseguir esta puesta a punto aquí es conseguir un enlace especial una vez que te inscribas y luego vas a poder copiar esta plantilla y configurarla en tu hub particular aquí. Y este es tu hub diario de productividad. Todo lo que tienes que hacer es venir aquí todos los días en términos de tu visión aquí, ¿verdad? Tan pronto como exponga esto, desea poner en los enlaces aquí para que pueda visitarlo todos los días, correcto, diario. Y luego tus metas y resultados, ¿verdad? Asegurándose de que estás en el camino y de que estás haciendo lo que necesitas hacer. Y lo has configurado todo aquí y luego tus proyectos para tus clientes o incluso proyectos personales o lo que sea que estás haciendo bien? Quieres asegurarte de hacer un seguimiento de tus diferentes proyectos en cuanto trabajar con clientes y estar haciendo en una especie de branding tal vez por ti mismo, ¿verdad? Como dije, puedes manejar no sólo tu negocio, sino toda tu vida aquí dentro, vale. muy, muy poderosa. Y entonces obviamente aquí con los hitos, asegurándose de que tengas números específicos o cosas que estás tratando de lograr, correcto, cada trimestre. Y luego tus tareas aquí, productividad diaria, asegurándote de que estás en el camino hasta donde ¿qué necesitas hacer hoy? ¿ Qué tienes que hacer mañana, verdad? Y luego tu CRM aquí abajo, vale, tan fantástica herramienta. Esto es lo que te va a permitir mantener realmente todo en línea, mantener todo organizado, y ser lo más productivo posible. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 84. Cómo empezar a empezar a bailar freelancer: En este video, vamos a repasar el trabajo independiente. Ahora esto es algo que si apenas estás empezando en tu carrera de UX UI, entonces el freelance es algo con lo que tal vez quieras empezar a trabajar porque te va a dar algo de experiencia. va a permitir que te pongas algo de trabajo debajo de tu cinturón, algunos estudios de caso, ¿verdad? Algunas remisiones, testimonios. Y entonces podrás apalancar eso para conseguir más clientes o incluso para conseguir un trabajo si ese es tu objetivo final, ¿verdad? Así que sigamos adelante y saltemos al freelancing y lo que puedes esperar de ser un diseñador freelance de UX UI. Entonces con freelancing, eres esencialmente autónomo y asumes trabajo por contrato para otras empresas y normalmente vas a estar trabajando dentro como un sitio web freelance a como Upwork, Freelancer o fibra o cualquiera de estas otras unos por ahí que están en el mercado donde tienes clientes viniendo a ti con proyectos y luego vas y esencialmente pujas por ellos. Y pones tu mejor pie adelante y en realidad obtienes estos contratos. Esa es una de las mejores cosas de freelancing en estas plataformas es que no tienes que salir por ahí y gastar tiempo y energía y recursos en la adquisición de clientes, ¿verdad? Porque si eres un negocio independiente y no estás usando estas plataformas en, va a ser todo un reto para ti conseguir clientes. Y sobre todo no tendrías experiencia en conseguir clientes, ¿verdad? Por lo que el freelancing es una gran manera de empezar porque tienes la capacidad de que los clientes vengan a ti, los proyectos vienen a ti y llegas a escoger y elegir para qué proyectos en particular quieres trabajar. Ahora, una de las mejores formas de utilizar estos diferentes sitios web freelance es asegurarte de que al principio, si apenas estás empezando, bien, tal vez hayas pasado por este curso, has tenido algunos capacitación. Quieres empezar a trabajar con los trabajos de diseño UX UI. Bueno, lo que debes buscar cuando acabas de empezar pequeños trabajos UX UI en los que puedes trabajar por costos muy bajos, ¿verdad? No te quieres preocupar realmente por cuánto te están pagando en este momento. Porque a medida que tu experiencia y tu base de proyectos real demuestra y aumenta, entonces podrás subir lentamente tus tarifas por hora o tu tasa de proyecto. Y podrás mandar precios más altos, ¿verdad? Pasaré más adelante en esta lección aquí un ejemplo de Arthur y su perfil, cómo pudo hacer lo mismo donde al principio había empezado algunos trabajos de nivel inferior. Ahora tiene muchos de los trabajos que le llegan directamente y se pone esencialmente recoger y elegir. Y al igual que mencioné, toda la intención aquí es que quieras estar consiguiendo pequeños trabajos que esencialmente puedes obtener alguna retroalimentación. Ancho, consigue algunos testimonios, consigue algunos estudios de caso, construye tu puntaje de perfil, ¿verdad? Y luego poder aumentar tu tarifa por hora. Ahora, aquí está la cosa. Al solicitar trabajos freelance. Quieres asegurarte en tu aplicación que sea atendida y específica a ese proyecto, correcto. Porque yo mismo incluso publico muchos trabajos en Upwork y te sorprendería cuántas veces responderá la gente. Puesto de trabajo con tan solo una placa de caldera tipo de currículum de aplicación. Esencialmente no leen el perfil ni la descripción del puesto, ¿verdad? Y así eso es muy importante ahí y una gran bandera roja para los empleadores. Quieren saber que realmente gastaste el tiempo para leer la descripción del trabajo. Entiendes lo que se requiere, lo que se necesita, y que estás siendo capaz de presentarse como alguien que es, ya sabes, que está calificado. Pero también tiene, ya sabes, lo que conlleva el proyecto en particular porque te tomaste tiempo para leer la descripción real, ¿verdad? Y una de las otras cosas que puedes hacer para realmente llevar tus propuestas al siguiente nivel es poder tener algún tipo de videos. Entonces si puedes crear como un video de valor o un video específico a esa descripción del trabajo y tu tasa de entrevistas se disparará. Porque cuando estás tomando un enfoque muy personalizado enviando un video que dice, oye, ya sabes, le eché un vistazo a la descripción de tu trabajo. Ya sabes, esto es una especie de lo que estoy recomendando esto como mi experiencia. Esto es lo que he podido hacer por otros o esto es lo que estoy recomendando, ¿verdad? Y Reino Unido itera en tu específico a ese trabajo en particular, entonces la probabilidad de que te acepten y te entrevistaran es muy, muy alta porque te estás diferenciando de la competencia. De acuerdo, así que ahora sigamos adelante y volvamos a mi computadora. Vamos a echar un vistazo a nuestro perfil de empuje y Upwork. Y te voy a mostrar un poco lo que hizo, cómo tiene toda su configuración de perfil ascendente. Entonces puedes quitarte algunos punteros de cómo tiene una configuración y luego cómo puedes configurar tu perfil. De acuerdo, entonces estamos de vuelta aquí en mi computadora y como pueden ver aquí, ¿no hay tiene una tasa de éxito laboral del 100%. Obviamente, es el mejor de lo que hace. Es fantástico. Es un diseñador de UX UI extremadamente talentoso. Y obviamente su, la retroalimentación aquí demuestra eso. Por lo que como puedes ver aquí, sus tarifas para tipos específicos de empleos varían. Entonces para el diseño de UI y UX, cuarenta y cinco dólares la hora para el diseño gráfico y 40 dólares hora en para cualquier tipo de diseño de producto que sea muy personalizado, específico, su tarifa sube porque, ya sabes, es el nivel de dificultad, ¿verdad? Y así ha ganado más de 100 mil dólares en su perfil particular aquí al alza. Y así una de las cosas que tiene es un buen video aquí y se repasa algunos datos, alguna información. Otra cosa que realmente ayudaría es tener realmente un video de ti mismo quizás hablando de tu experiencia. A lo mejor hablar de ti mismo, hablar de, ya sabes, lo que traes a la mesa, el valor que eres capaz de proporcionar, ¿verdad? Y eso en realidad iría un largo camino también porque la gente quiere ver tu cara, quiere ver que eres una persona real, ¿verdad? Y ¿tendrías un video ahí que o explicara, sabes, sobre lo que haces, tu experiencia o simplemente tú detrás del micrófono ahí hablando de lo que puedes hacer en el valor que traes definitivamente iría por el camino. Y así como se puede ver aquí, tiene diferentes perfiles, esencialmente cuatro tipos de trabajo diferentes. Para el trabajo de UX UI, tiene aquí un tipo específico de descripción de perfil. Lo mismo aquí para el diseño gráfico, ¿verdad? Tiene una descripción diferente aquí. Y luego puedes seguir adelante y mirar los diferentes tipos de trabajos que tiene. Ahora, si nos sentáramos aquí a mirar UX de la UI, y vuelves a eso por cinco, vuelves a siete aquí. De vuelta cuando empezó por primera vez, creo que lo fue o ni siquiera creo que esto fue cuando empezó por primera vez. Creo que esto es más justo cuando empezó a hacer freelance en Upwork. Pero quieres mirar aquí algunos de estos diferentes tipos de comentarios y volver lo más lejos que puedas. Por lo que éste está de vuelta en 2015. Se puede ver este trabajo que tenía era para un rediseño de marco ¿verdad? De vuelta en 2015, derecha. Entonces esto es un gran problema aquí. Quiero que tomen nota de que Arthur no empezó cobrando $50 la hora, ¿verdad? Esto es algo que construyó y trabaja hasta una orden para llegar a ese porcentaje en particular, ¿verdad? Entonces eso es exactamente lo que quieres hacer también. Se quiere construir un perfil con pequeños trabajos, ¿verdad? Y empieza a mostrarle a la gente que, oye , ya sabes lo que estás haciendo, sabes cómo obtener resultados, y luego puedes traer tu tarifa horaria aquí mismo es 27, 78, correcto. Y creo que lo tiene ahora hasta 45. Así que ten en cuenta que cuando estás empezando en diferentes sitios web de freelancing, que en realidad eres capaz de construir tu perfil primero y luego poder empezar a subir tus precios y mandar mayores cantidades y empezar a conseguir proyectos realmente enviados a ti cuando llegues a escoger y elegir. De acuerdo, así que eso va a estar aquí para la lección freelance, y nos vemos en la siguiente. 85. Consultoría del cliente: En este video, vamos a hablar de consultoría de clientes. Ahora esto es algo que es diferente al freelance. Donde el freelancing es más de proyectos que vienen a ti en varios sitios web de freelancing diciendo donde solo estás trabajando como único propietario, realmente no tienes una empresa, no tienes una organización, ¿verdad? Y con el equipo de Control de Clientes, este es un juego de pelota completamente diferente. Aquí es donde vas a salir. Estás consiguiendo tus propios clientes a través de diferentes esfuerzos de marketing como, digamos publicidad pagada, correo electrónico frío, cualquiera de las diferentes formas de anuncios o promociones o métodos de marketing por ahí, ¿verdad? Pero eres responsable de conseguir a tus clientes. Tienes quizá tu propio negocio, ¿verdad? Es posible que tengas algunos empleados que trabajan contigo son freelancers, ¿verdad? Esto obviamente es por el camino después de que comiences con algo de freelancing, sin embargo, la consultoría de león va a ser una buena ruta por la carretera también si quieres proceder a esta ruta porque podrás ser clientes más grandes, sería capaz de mantener mucho más de las ganancias, cobrar comisiones más altas, ¿no? Porque eres una empresa y estás consiguiendo tus propios clientes frente tener gente que acuda a ti o pujas por diferentes proyectos, ¿verdad? Hay mucha más competencia. Entonces sigamos adelante y pasemos por la consultoría de clientes. Entonces como mencioné, con consultoría de clientes, Aquí es donde estás configurando tu propia empresa o puedes tener el nombre de tu propia empresa, pero típicamente tienes como una LLC o una S corp, las más comunes. Y tienes tu propia página web con tu negocio en su. Y lo que recomiendo en un principio es que hagas algunos proyectos freelance. Tienes algo de trabajo bajo tu cinturón, obtienes un portafolio y luego comienzas a poder salir por ahí y conseguir Klein por tu cuenta. Porque tendrás trabajo que podrás aprovechar. Tendrás testimonios lluvia. Y así una de las mejores maneras en que puedes ir para conseguir clientes por tu cuenta es ir abajo, hacer algunas investigaciones en diferentes negocios, diferentes webs, ¿verdad? Al llegar al departamento de mercadotecnia o al propietario, al mencionarles sobre cualquier tipo de recomendaciones que encontraras o que recomiendes en su página web, en su aplicación, ¿no? Cualquiera que sea el producto que pueda ser. Entonces esa va a ser una de las mejores formas de conseguir realmente clientes para ti es hacer un poco de investigación en su sitio web o tal vez la aplicación, descubriendo algo sobre esos bits individuales, el propietario o el marketing departamento, director de mercadotecnia. Y después poder llegar y decir, oye, me encontré con tu negocio, tu nivel de aplicación de sitio web, que ustedes están haciendo. Y encontré esto justo aquí hasta donde mi recomendación, o noté esto por allá, ¿verdad? Y después poder sumar valor por adelantado, y luego poder obtenerlos a través una rápida llamada de Discovery para enterarse un poco de su situación actual. Entonces la consultoría de clientes va a ser la más gratificante porque se llega a cobrar monturas más altas, ¿verdad? Cómo base tu proyecto, pero aquí está la cosa. Va a ser lo más difícil porque no vas a conseguir clientes viniendo a ti, ¿verdad? Con el freelancing, solo te inscribes como un freelancer en particular en la plataforma. Vas por ahí, llegas a escoger y elegir a qué empleos llegas a solicitar, ¿verdad? Y todo viene a ti. Estás recogiendo cerezas versus Con la amable consultoría. Esto es más un enfoque saliente, ¿no? Estás recopilando datos, estás reuniendo diferentes clientes potenciales y querías apuntar. Y te acercando con tu propio tipo de mensajes de marketing, tu propio correo electrónico, tu propio tipo, diferentes promociones, ¿verdad? Y te estás acercando a ellos para poder trabajar contigo para ver si tienen algún tipo de proyectos en el ducto, ¿verdad? Entonces eso es lo que puedes esperar de clank hasta equipo. Esto es algo que no te recomiendo saltar a una como ya has tenido alguna experiencia con el freelancing, tienes un portafolio, tienes algunos testimonios y casos prácticos que puedes aprovechar para conseguir algunos clientes, ¿verdad? Entonces va a estar aquí para la lección de consultoría de clientes, y nos vemos en la siguiente. 86. Construir una marca: En este video, vamos a repasar construyendo una marca. Entonces esto va a ser muy importante, no sólo para ti, sino también para cuando estás haciendo eso, digamos algún trabajo de diseño gráfico o te fijas en asumir algunos clientes que quieran hacer algún remapeo de la marca actual. Queremos entender qué es una marca, qué representa, cuáles son los componentes clave que rodean lo que representa una marca? Cuáles son algunos de los factores clave a la hora de construir una marca y muchas de las diferentes cosas que necesitas para vigilar y estar al tanto cuando estás desarrollando una marca para ti o para un cliente potencial. Entonces sigamos adelante y saltemos aquí a construir una marca. Entonces una marca no es solo un logotipo, ahí es donde mucha gente se queda corta. Y se confundieron pensando que una marca es solo un logotipo, ¿verdad? No es sólo un logotipo porque un logotipo es sólo una representación visual de una marca. Pero una marca es realmente una promesa. Es esencialmente una propuesta de venta única. Y si no estás familiarizado con esto, esto es esencialmente lo que te diferencia en el mercado. Digamos que tienes algún tipo de proceso único o metodología de diseño única. Y no tiene que ser algo extraordinario, ¿verdad? Esta es una forma realmente sencilla aquí de diferenciarse en el mercado donde puedes hacer conocer tu marca o ayudar a los clientes a que conozcan sus marcas, es ayudándoles a desarrollar una propuesta de venta única, ¿verdad? Y puedes crear algún tipo de proceso simple o tener un proceso y nombrarlo algo único y diferente, ¿verdad? Y que sea tu propio proceso único. No obstante, puede ser algo súper sencillo. No obstante, cuando eres capaz de darle un nombre y eres capaz de sacarlo, entonces ahí es donde la creación de esa propuesta de venta única, porque puedes decirle a otros clientes potenciales o clientes potenciales que quiero iniciar sesión y puedes estar pujando contra alguien más dijo , oye, no tenemos metodología única. Contamos con una metodología de diseño única o tenemos un proceso único que utilizamos para ir a nuestros diseños para asegurarnos de que estamos creando y desarrollando marcas y diseños de clase mundial, ¿verdad? Por lo que todas las marcas tienen un mensaje, muy importante aquí para entender. Es realmente central para cualquier tipo de marca. La marca representa algo. Y cuando creas una marca, la razón por la que estás creando la marca es para entregar el mensaje, ¿verdad? Porque está diciendo algo, está entregando un mensaje. Es transmitir algo sobre ti o la empresa o lo que representa, ¿verdad? Muy importante ahí. Y el branding no se trata de lo que sientes, lo que pensarías, ¿verdad? Sólo piensa en, ya sabes, tratar de darte un apodo, ¿verdad? Realmente no funciona de esa manera. Los apodos los dan típicamente otras personas y así es como se pegan. Porque se trata de lo que otras personas piensan, sienten y dicen de los judíos, no de lo que piensas, ¿verdad? Porque puedes pensar que tu marca es la mejor del mundo y haces esto, haces eso. Pero si el mercado está diciendo lo contrario, entonces hay que prestar atención a eso. Y eso te va a dar toda la indicación de que necesitas saber que, oye, escucha, mi marca, quería que me conocieran para estar de pie por esto. Y así todas mis acciones, todo lo que hago, va a estar de acuerdo con eso, ¿verdad? Y una de las preguntas clave que te quieres hacer cuando estás empezando a definir tu marca es, Hey, para qué quiero que la gente conozca el producto o servicio, para que me conozcas, ¿verdad? Y esto es grande cuando se trabaja con clientes también. Y cuando estás haciendo como un rediseño de logo para un cliente o un desarrollo de branding completamente nuevo, ¿verdad? Redesarrollo de toda su marca. Quieres hacer preguntas como estas, como, oye, ¿por qué quieres que se conozca tu negocio? Cuáles son algunos de los valores clave, características clave, cosas clave por las que desea que su negocio sea conocido en el mercado, ¿verdad? qué quieres que piense la gente, qué quieres que la gente se esté imaginando o pensando cuando están escuchando o viendo tu marca, ¿verdad? Muy importante ahí porque como diseñador UX UI, ya sabes, te inventa en el campo UX. Puedes hacer algunos trabajos de UX desde trabajos de UI, y puedes hacer algún diseño gráfico. Y así vas a ser multifacético Para poder entender, oye, si una marca se está redesarrollando o renovando completamente una marca o desde cero. Se quiere tener estas preguntas clave y entendimientos que Haidt un gran, está entregando un mensaje. Y en cuanto al cliente, ¿por qué quieres que se conozca esa marca, no? Tan importante ahí cuando se trata de construir una marca. Y un buen ejemplo de una gran marca es Starbucks, ¿verdad? Basta pensar en lo que representa. Ya sabes, cuando estás bebiendo café Starbucks y la gente te ve, ¿verdad? Está representando que eres esencialmente de clase alta, por así decirlo, que eres diferente, eres único y estás bien y dispuesto a gastar más por una taza de café que podría costar un par de dólares o dólar, ¿verdad? En Dunkin Donuts, ¿verdad? Entonces se trata de pensar diferente, ser diferente. Y luego también con entrar a una ubicación de Starbucks, ¿verdad? Obtienes cierto campo, vas a sobrevivir. Entras la cierta iluminación ahí dentro, y todo va a ser igual sin importar a dónde vayas a Starbucks en el mundo, ¿verdad? Entonces hay un cierto mensaje que se está transmitiendo aquí. Y siempre que veas gente bebiendo Starbucks, ¿verdad? Es transmitir un mensaje de que son diferentes. Ellos son únicos. Y no me importa gastar de cuatro a cinco dólares en un mocha, en un trago, ¿verdad? Eso podría hacerse fácilmente por dólar, dólar, que se puede hacer fácilmente por un dólar o $2, ¿verdad? Entonces eso es lo que quieres pensar de una marca. Es lo que está representando, cómo está haciendo sentir a la gente, y lo que viene a la mente cuando ven la marca. Y otra gran marca aquí, probablemente la número uno, va a ser Apple, ¿verdad? Porque recuerda, Apple no fabrica un producto que sea superior, muy superior que, digamos, HP o Dell, o cualquiera de estos otros fabricantes de computadoras o computadoras, ¿verdad? Lo que realmente los diferencia va a ser el elemento de branding cuanto a lo que representa y cómo hace sentir a la gente, ¿verdad? La gente va a gastar un par de mil dólares en una, ya sabes, computadora Apple porque es lo que representa para los demás y para el mundo, para la sociedad sobre ellos como hey, creo diferente, soy único. Yo soy, ya sabes, escalón superior. No soy tu promedio Joe, no soy tu pensador promedio. Yo soy alguien creativo, quien le gusta pensar fuera de la caja, ¿verdad? Entonces eso es algo que realmente quieres tomar en cuenta para tomar en consideración porque Apple está transmitiendo un mensaje todo el tiempo, ¿verdad? Porque recuerda la funcionalidad de la computadora de la misma. Realmente hay muy poca diferencia entre una manzana o como un Dell o un HP con las especificaciones similares, ¿verdad? Pero es la marca Apple con la que la gente se está conectando y resonando. Y eso es realmente importante de entender. Se trata de cómo estás haciendo sentir a la gente y el mensaje que está entregando al mercado, ¿verdad? Y entonces repasemos algunas razones por las que construir una marca es importante, ¿verdad? Por lo que tener una marca junto con una presencia en línea inmediatamente te diferenciará de todos los demás aspirantes que acababan de tener currículum con experiencia, ¿verdad? Porque una de las primeras cosas que hacen los empleadores hoy en día es el buscar que arriba en Google para ver si tienes algún otro interés por ahí fuera fuera del trabajo. Si tienes un blog, si tienes algún tipo de presencia, ¿no? Porque hay que recordar, en la era digital de hoy, todo está en línea. Todo es digital. Y así quieres poder diferenciarte. Entonces sólo alguien que tenga, digamos una aplicación que ha experimentado que tiene, ya sabes, un buen currículum, pero tal vez no tengan presencia en línea, ¿verdad? Eso es algo que realmente hay que tener en cuenta cuando estás desarrollando un perfil en línea. Ya sabes, tener perfiles de redes sociales, tener un sitio web, tener un blog, ya sabes, conseguir, estar activo en redes sociales irá en camino. Y vamos a entrar en perfiles de redes sociales en otra lección. Pero sólo quiero darte un poco de visión rápida de eso. Y así cuando combinas experiencia, un currículum con presencia en línea junto con la marca, ¿no? Y tienes todos estos trabajando a tu favor, entonces tienes la fórmula ganadora que buscan los empleadores en la era digital actual, ¿verdad? Porque puedes representar tu marca al mercado y mostrar a los demás hasta los clientes, clientes potenciales que son capaces de hacer por ti mismo y luego hacerles saber, oye, escucha, esto es lo que he hecho por mí mismo y esto es lo que yo puede hacer por ti en especialmente en el espacio patronal, ¿verdad? Pueden ver que sabes desarrollar una marca. Ven que tu acto de online en tu, en el marco espacial de las redes sociales y tienes otros intereses fuera del trabajo, entonces realmente te estás distanciando de la competencia. Y eso es lo que buscan los empleadores. Y sobre todo si vas por la ruta de consultoría de clientes, tu branding irá en camino con clientes potenciales, sobre todo si los estás solicitando, para cualquier tipo de diseño gráfico o cualquier tipo de proyectos. Tú pudiendo mostrarles eso, Hey, he creado mi propia marca. Tengo cartera propia, ¿verdad? Mi marca representa esto. Esto es lo que defiendo, son mis valores, ¿verdad? Esta es mi única propuesta de venta. Por lo que todos esos van a jugar un factor. Y tú pudiendo conseguir un trabajo o pudiendo conseguir clientes en el espacio Freeland, o incluso simplemente salir y conseguir tus propios clanes, ¿verdad? Y así eso va a estar aquí por construir una marca. Y nos vemos en el siguiente. 87. Branding personal: En este video, vamos a repasar el branding personal. Entonces en la lección anterior, pasamos por alto el branding en y por sí mismo. Te repasaste cómo construir una marca. Esta lección en particular aquí, vamos a entrar en los detalles de marcarte como esa marca, ¿verdad? Porque aquí hay una gran diferencia como organización frente a construir una marca personal. Entonces sigamos adelante y saltemos a construir una marca personal. Entonces, ¿qué es el branding personal, no? La marca personal es realmente el mismo concepto que una marca, excepción de una, una marca personal individual real. Tú eres la marca, ¿verdad? Esa es la mayor diferencia aquí. Cuando estás construyendo una marca para un negocio, ¿verdad? Para una entidad fuera de ti, entonces ahí va a ser donde está el negocio, la marca. Cuando estás haciendo branding personal, eres la marca real, ¿ verdad? Tu persona en línea. Ya sabes cómo te representas en línea, cómo publicas en diferentes plataformas, qué publicas, qué se acaba de decir, ¿verdad? Y permite que el mundo exterior perciba directamente tus habilidades, personalidad, y experiencias, ¿no? Y así que el branding personal probablemente va a ser donde estés siendo capaz de sacar el máximo provecho de tus acciones, ¿verdad? Y lo más fuera de tu trabajo porque con branding personal, mayor parte, te vas a estar marcando como la marca. Vas a estar posando en diferentes plataformas de redes sociales, corren diferentes perfiles de redes sociales. Vas a estar en Instagram, vas a estar en Facebook, ¿verdad? Y todas estas otras diferentes plataformas de redes sociales que realmente hacen saber a la gente que estás activo y te estás tomando tu marca en serio. Y en última instancia qué marca personal, esta es realmente la mejor manera de poder ponerte en una posición estratégica para transmitir el valor que traes como diseñador de UX y UI, ¿no? Porque recuerda como diseñador UX UI, a menudo vas a estar haciendo como diseños de sitios web, diseños de aplicaciones, también diseños gráficos para como diferentes gráficos tal vez haciendo, digamos, un diseño gráfico para como tarjetas de visita, logotipos , ¿verdad? Hay un montón de cosas diferentes que están dentro del reino de UX UI, por así decirlo, ¿verdad? Así que veamos algunas de las diferentes formas en que puedes sacar tu nombre por ahí como diseñador de UX UI. Entonces aquí hay una cosa. Puedes ser el mejor diseñador del mundo, ¿verdad? Pero si solo estás sentado solo en tu sótano y nadie sabe de ti eres lo que haces o cómo puedes ayudarlos, entonces realmente no importa, ¿verdad? No vas a tener mucho impacto. Y entonces lo que quieres hacer es que quieras ser alguien que sea bueno en lo que haces. Y eso está mejorando a Wright constantemente mejorando, pero es capaz de aprovechar su presencia en línea, ¿verdad? Y poder poner tu nombre ahí fuera con tener una pequeña cantidad de habilidad que se está desarrollando, ¿verdad? ¿ Va a triunfo tener una tonelada de habilidad con nadie conocido de verdad o de ninguna reputación, verdad? Por eso es importante realmente poder salir por ahí y tener diferentes perfiles de redes sociales y estar realmente actuando sobre esos perfiles, ¿verdad? Piensa en un mercado específico al que quizá quieras apuntar también. Te gustaría apuntar, digamos la industria del entretenimiento, la industria del comercio, tal vez la industria del software, software como servicio, ¿verdad? Entonces realmente pensando también en el tipo de mercados que quieres apuntar y entender que puedes ser el mejor diseñador del mundo, pero si nadie sabe de ti, entonces va a estar apagado o no, ¿verdad? Entonces aquí te dejamos un factor clave para poder construir tu marca personal es tener activos los perfiles de redes sociales y no necesitas estar ahí todos los días, ¿verdad? Pero puedes estar ahí, ya sabes, una vez a la semana más o menos, post y cosas diferentes. Y como mínimo, deberías tener LinkedIn, Facebook, e Instagram, ¿verdad? Y como dije, no tienes que publicar todos los días, solo asegurándote de que estás ahí y que estás demostrando que realmente lo estás tomando en serio. Y lo que también puedes hacer si no quieres hacer nada de la publicación tú mismo, puedes inscribirte en un programa llamado buffer y Q. Y juntos son unos 20 dólares al mes. Y lo que hacen es buffer te permite conectarlo a tus perfiles de redes sociales y poder automatizar la publicación, ¿verdad? Todos los días o incluso meses fuera y adelantado, días de anticipación. Y luego que todos tus posts salgan automáticamente sin que tengas que tocarlo. Y luego q te da la capacidad de buscar diferentes contenidos que estén relacionados con tu tema, ¿verdad? A su mercado, a su industria, al diseño, a UX UI. Y luego poder tomar ese contenido y poder publicarlo en tu perfil que tengas contenido relevante que se está publicando en tus perfiles. Y así está demostrando que estás activo en, en realidad lo estás tomando en serio. Y eso va a recorrer un largo camino con tu branding también. Y así eso va a estar aquí para la construcción de una marca personal. Recuerda, quieres ser muy activo en las redes sociales. Quieres asegurarte y entender que eres la persona que está detrás de la marca. Eres tú quien es la marca. Y quieres poder ponerte ahí fuera. Y aunque no tengas una tonelada de habilidad, bien, solo poder mostrar que tienes alguna habilidad y que estás queriendo sacar tu nombre por ahí irá en camino contra que seas el mejor del mundo y no tener que nadie sepa de ti, ¿verdad? Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 88. La importancia de tener un sitio web: En este video, vamos a repasar la importancia de tener un sitio web y un blog. Por lo que pasamos en las otras lecciones, la importancia del branding, la importancia del branding personal. Y aquí vamos a hablar de por qué es importante si estás desarrollando tu propia marca, si estás haciendo branding personal, tener tu propio sitio web y potencialmente tu blog, para que realmente puedas diferenciarte del resto de los aspirantes por ahí si estás buscando conseguir un trabajo o si estás haciendo freelance, consultando Clang, sigamos adelante y saltemos a la importancia de construir un sitio web. Entonces al tener un sitio web, le agregaremos credibilidad instantánea a tu marca personal, ¿verdad? Al igual que mencioné, si tienes una marca y la tienes en todas las redes sociales. obstante, si no tienes un sitio web o al menos un blog, y esto va a hacer mucho más daño que bien. Quieres algo de consistencia. Si tienes marca, tienes que tener un sitio web, ¿no? Es sólo un dado, sobre todo ahora en la era digital de hoy. Y así lo que puedes hacer es configurar un sitio web para tu empresa o para ti mismo. Nos gusta una rampa de marca personal. Puedes hacer cualquiera o eso va a funcionar. Y luego para un sitio web, es súper barato. Es decir, realmente, todo lo que necesitas es un dominio, digamos por $10 y luego $5 al mes por hosting. Puedes ir a nombrar barato, y luego WordPress es gratis. Y creo que te dan un certificado SSL gratuito de un año, por lo que muy barato. No debe haber razón por la que no tengas sitio web, ok? Y lo que puedes hacer es ir a, digamos equipo bosque o sobre mercado y conseguirlo tema para, digamos 30 o 40 dólares. Y puedes conseguir un sitio web bastante rápido yendo a fibra y dolor a alguien $10 y diciendo: Oye, escucha, acabo de comprar este tema del mercado, del bosque temático. Yo quería parecerme igual a la demo, ¿verdad? Y entonces lo que harás es ir a la fibra y luego gastarás $10 o así y podrás instalar el sitio web igual que se muestra en la demo. Y luego tener un blog también te permitirá poder escribir algún contenido y lo hizo recogido por Google. Y realmente muestra tu credibilidad y pericia. Entonces tus visitantes, ¿verdad? Entonces es un, tienes un cliente potencial y aterrizan en tu página web y ven que tienes alguna publicación de blog ahí y sabes de qué estás hablando, ¿verdad? Estás aportando un valor que va a sumar a tu credibilidad, ¿verdad? Y así sigamos adelante y vayamos a mi computadora. Te voy a guiar a través de algunos recursos. Te voy a guiar por eso se haga cumplir y mercado de botellas para que puedas ver diferentes tipos de plantillas por ahí. Y luego también te mostraré algunos recursos en fibra donde puedes conseguir a alguien por $10 más o menos. Y luego donde puedan tener tu sitio web en funcionamiento en poco tiempo. Ok, entonces estamos aquí de vuelta en mi computadora y estamos en el tema del mercado de autos para us.net. Y lo que esta plataforma es aquí es donde puedes encontrar diferentes tipos de plantillas de sitios web que puedes usar para diferentes proyectos, para diferentes cosas que estás buscando crear un, digamos que quieres desarrollar un tipo específico de sitios web o tal vez cierto tipo de diseño gráfico. Este es un gran lugar años lejos mercado Zimbardo para obtener un montón de recomendaciones en cuanto a lo que está caliente ahí fuera en el mercado. Podemos tomar ideas diferentes, ¿verdad? Puedes mirar aquí mismo diferentes plantillas de UI. Puedes mirar cosas que son populares, cosas que son, ya sabes, top sellers en cuanto a los diferentes tipos de plantillas. Pero realmente este video aquí va a ser más para un sitio web y vamos a buscar un sitio web para tu negocio en particular en cuanto a si vas a estar yendo en él desde el punto de vista de la marca o donde quieres ser la marca a ti mismo. De acuerdo, así que vamos a WordPress aquí. Y esto es lo que vamos a estar usando en lo que respecta al CMS. Y entonces lo que podemos hacer aquí es escribir, digamos agencia digital. Y esto va a traer un montón de diferentes tipos de plantillas que podemos usar para nuestra página web. Entonces lo que queremos es que queremos WordPress. Queremos asegurarnos de que esté en WordPress. Entonces lo que haremos es ir a WordPress aquí mismo, ¿de acuerdo? Y luego miraremos a dos aquí. Creativo. Tenemos tecnología, tenemos en comercio, tenemos corporativos. Podemos desglosar esto por bestsellers son los más valorados. Echemos un vistazo a los bestsellers aquí. ¿ De acuerdo? Para que podamos ver algunos de los top sellers aquí. Podemos ver que ella es casi 646,000 testimonios aquí. Entonces queremos ver algo que está caliente, eso es estallar, ¿verdad? Y luego echemos un vistazo a este de aquí, el primero. De acuerdo, esta es una gran segunda mirada a esto. De acuerdo, así que esta es una plantilla muy bonita aquí, bonita y sencilla y tiene muchos de los diferentes elementos que estamos buscando. Está bien, genial. Y entonces este es tipo de proceso por el que vas a pasar por aquí en cuanto a mirar diferentes tipos de plantillas web, diferentes tipos de temas, ¿verdad? Porque lo que harás es instalar el WordPress y luego podrás instalar estas plantillas en la plataforma WordPress real en la que está alojada tu sitio web. Y luego podrás personalizar manualmente esto al igual que la demo. Entonces volvamos aquí y veamos si podemos encontrar otro aquí. Veamos tu multipropósito receptivo total. Veamos aquí, vayamos a agencia y también traigamos algunos de ellos aquí. Entonces esto es multipropósito aquí mismo. A mí me gusta este de aquí. Sólo echa un vistazo. De acuerdo, Live Preview. Y así tienen diferentes tipos de previsualizaciones aquí que puedes utilizar para tu sitio web en particular. De acuerdo, así que aquí está este es para hosting. Por lo que obviamente querrías cambiarlo por lo que estás buscando hacer ahí. Pero esto es más de la interfaz de usuario aquí, el diseño, el diseño. Esto es algo que te gusta y obviamente puedes usar algo como esto también. Y así acaba de pasar algún tiempo aquí mirando a través de los diferentes tipos de temas. Y si alguno de estos resuena contigo y conecta contigo para tu agencia digital, si estás dirigiendo algo donde vas a crear una marca como negocio real, ¿verdad? Esa es una entidad separada. O vas a hacer branding personal y tener tu marca realmente centrada a tu alrededor, ¿verdad? Por lo que quieres tener como agencia XYZ o XYZ creativo o cualquier marca que quieras. Si vas a ir por esa ruta y si vas a ir por la marca personal, entonces bien podrías simplemente registrar tu nombre personal Azure domain, ¿verdad? Entonces este es un recurso rápido aquí donde vas a poder encontrar diferentes plantillas de sitios web, diferentes temas para tu sitio web en particular. Y luego también si quieres mirar aquí algunas plantillas diferentes para diferentes ideas, ¿verdad? Y así pues vamos a ir aquí a fibra en esto es donde irías a tener realmente el tema instalado en tu página web. Por lo que comprarías los archivos reales desde aquí, del mercado invitado. Y luego irías aquí a fibra y le pedirías a uno de estos chicos $510 para instalar el tema real en la página web que tienes ahí, al igual que la demo, ¿no? Y así como puedes ver aquí, a cinco a $10 en su mayor parte van a ser, ya sabes, $10 más o menos. Y solo tienes a estos chicos instalado el tema en tu sitio web de WordPress, igual que se ve tan lejos como el tema aquí, ¿verdad? Y luego puedes personalizar eso manualmente ahora. Y si no quieres ir y pasar todo el tiempo buscando a través de diferentes plantillas, diferentes temas. Y quieres simplemente renunciar a algo y correr muy rápido, muy fácilmente, para luego poder modificar y ajustar por el camino. Y luego te voy a mostrar en otro video. Ahora te paseamos por todo el proceso de registrar un dominio, obtener hosting, obtener tus certificados SSL, y luego también instalar un tema gratuito en particular en tu sitio web para que puedas ponerte en marcha. Entonces eso va a estar aquí para este video y te veremos en el siguiente. 89. Crear un logotipo: De acuerdo, entonces en este video, vamos a caminar por la creación de un logotipo muy rápido y fácil. Entonces esto va a ser a través de canva.com aquí, Canadá es una gran herramienta para usar para diferentes tipos de diseño, diferentes tipos de presentaciones. Se pueden crear logotipos, se pueden crear diferentes tipos de animaciones y muchos tipos diferentes de diseños que se crean fácilmente a través de Canvas. No obstante, esto es más para un principiante. Y si quieres jugar con Canva, te recomiendo encarecidamente que lo hagas para que puedas empezar y aprender a hacer algunos diseños diferentes porque también tienen un montón de plantillas aquí. Así que sigamos adelante y saltemos aquí y creemos un logotipo para nuestra página web. Por lo que puedes entrar aquí y escribir diferentes tipos de logotipos. Se puede ver aquí hay algunos juegos de PR, hay alguna profesión. Aquí hay algunos para diferentes marcas. Incluso vayamos a algo como esto. Y lo que podemos hacer, podemos cambiar en torno a algo de este texto. Entonces déjame ir así. Yo quiero un tipo diferente de fondo aquí. Yo quiero que sea blanco. Y luego quiero que se lave esto. Hagámoslo primero. Yo quiero cambiar estos colores y quiero que sean morados. ¿ De acuerdo? Entonces eso ha cambiado. Ahora cambiemos esto a blanco aquí. ¿ De acuerdo? Y entonces vamos a mover esto. No me gusta este texto de aquí, así que vamos a cambiar este texto aquí. Vamos a eliminar. ¿ De acuerdo? Y luego me gusta esto aquí mismo. Entonces lo que haremos es mover esto aquí, ¿de acuerdo? Y entonces cerraremos esto así, ¿verdad? Y probemos algo aquí. Vayamos a un dentro del grupo. Y yo sólo quiero mover esto por aquí. De acuerdo, ahí vamos. Entonces así como esto aquí mismo. Y quiero que eso sea un poco más grande. Y entonces ahora traeremos ahora algún texto. Veamos aquí, aquí mismo así. Y a la compañía se le llama el diseño de la bomba, así que el diseño de bonos, vale, algo así, es borrar eso. Entonces podemos arrastrar esto, hacer este k más pequeño y veamos si podemos hacer esto. ¿ Hay alguna manera de hacer esto más grueso aquí? Seguro que sí lo hay. Pero ver aquí. De acuerdo, ahora esto debería estar bien, sólo bien. Y entonces podemos usar un tipo de texto un poco más delgado. A lo mejor algo como esto o como esto. A ver si podemos cambiar esto aquí. Algo de eso. Ok, así que vamos a ver aquí, vale, así que algo como esto se vería bastante bien. Volvamos atrás y vayamos a algo un poco más grueso. Entonces vayamos a algo como esto. Diseño de bomba. ¿ De acuerdo? Queremos algo un poco más grueso como éste. Y así podemos hacer SQL como este. Hazlo más grande. De acuerdo, algo así, bonito y sencillo. Tenemos ese negro ahí mismo, y esto puede ser mucho mejor. Solo estoy creando esto con fines de muestra para que puedas ver cómo se vería esto. Para que puedas ver cómo configuraríamos un logotipo en particular y qué fácil en símbolo es crear uno. ¿ De acuerdo? De acuerdo, así que vamos a ver cómo se ve esto. Si fuera a capitalizarse. El diseño de la bomba. Creo que el que podemos ir así, el diseño de bonos. O podemos ir así. El capital se ve un poco mejor, vale, así que vamos a ir así. Agradable y sencillo. Saquemos esto un poco más. De acuerdo, así que vamos a descargar PNG, descarga esto aquí mismo. Y así ahora estamos listos para irnos, listos para subir el logotipo a la página web en particular. Entonces vamos a seguir adelante y saltar a la página web y en realidad configuramos todo. En el siguiente video, instalaremos el logo y tendremos listo el sitio web. Entonces eso va a estar aquí para esta, y nos vemos en la siguiente. 90. Configuración del sitio web paso a paso: De acuerdo, entonces en este video, te voy a guiar a través de cómo registrar un dominio, cómo configurar tu hosting, cómo obtener el certificado SSL para tu sitio web, y cómo conseguir todo configurado para que puedas tener un sitio web ya hecho que no tienes que pagar hasta donde tener que comprar tema, vas a poder obtener acceso a un decano gratis aquí. Y te voy a guiar paso a paso cómo configurar todo. Entonces lo primero que vas a necesitar es un dominio. Un dominio es esencialmente una dirección web. Esos son tus sitios web en realidad van a estar alojados, ¿verdad? Entonces lo primero que tenemos que hacer aquí es ir a la búsqueda de nombres de dominio aquí, ¿de acuerdo? Y entonces queremos teclear aquí uno que ya he montado la bomba designs.com. Y así vamos a ir aquí y vamos a sumar este el auto y se puede ver que son 9 dólares al año. Y luego pasaremos y en realidad compraremos esto aquí se llama checkout. Y entonces voy a seguir adelante y rápidamente pasar por esto aquí. De acuerdo, así que hemos pasado y hemos pasado por la página de pago hasta donde comprar el dominio, quieres ir a eso. Eso puedes hacerlo por tu cuenta, pero solo sigue los pasos. Agregando tu información de pago y luego podrás comprar ese dominio. Entonces una vez que compras ese dominio ahora necesitas hosting, ¿verdad? Es necesario poder hospedar ese sitio web en línea. Y así el paquete que recomiendo va a ser éste aquí mismo. El 488 al mes, muy barato. Eso significa $5 al mes no es nada correcto para poder hospedar tu sitio web en línea. Y esto se requiere, ¿verdad? Porque cada sitio web que hay en el mercado tiene hosting, ¿verdad? Están alojados en un servidor para que estén en vivo. Así que sólo coge este de aquí. Se lo recomiendo por 88 llamado Chip tiene un gran servicio al cliente para guiarte y ayudarte a salir cualquier tipo de problemas o problemas que estés enfrentando. Y entonces deberías estar bien para ir. Por lo que quieres recoger esto aquí. Y luego también quieres recoger el certificado SSL, ¿no? Eso lo necesitas en tu página web y eso es esto aquí arriba. Si miras esto, ves que hay un certificado ahí y no hay uno ahí, entonces lo va a mostrar como no seguro. Por lo que este es el HTTP aquí mismo que permite que el sitio web esté protegido en cuanto a cualquier tipo de intrusión. Y también protege a los usuarios cuando están aterrizando en la página web para que se sientan más protegidos y seguros, ¿verdad? Por lo que puedes escoger uno de estos aquí también. Yo iría con el certificado SSL positivo aquí mismo. Y puedes comprar esto solo por un año. Y cuando vienes aquí, esto se establece automáticamente en cinco años. No obstante, quieres desglosar esto por 234 lo que sea, ¿verdad? Simplemente puedes ir con uno aquí y luego hacerlo bonito y sencillo. Confirmar pedido. Y luego voy a pasar por el proceso de pago aquí. De acuerdo, Así que has comprado el dominio, has comprado hosting, y ahora realmente has comprado el certificado SSL, ¿verdad? Entonces ahora lo que quieres hacer es entrar aquí y asegurarte de que tu dominio esté configurado en los servidores de hosting Name Cheap. Y te mostraré cómo hacer eso aquí. Por lo que quieres ir a tu cuenta aquí quieres ir a dashboard. Y luego quieres ir aquí a tu dominio justo ahí, ve a gestionar. Y luego baja aquí a los servidores de nombres y ve a Name Cheap web hosting. Da clic en Aceptar, y deberías estar bien para ir allí. Entonces ahora esto es decirle a los servidores de hosting Name Cheap que quieres que tu dominio esté alojado en los servicios de hosting o que acabas de comprar, ¿verdad? Y si tienes alguna pregunta en cuanto al hosting, cómo configurar eso, cómo configurar el cPanel, todas esas cosas. Podrás contactar con el soporte vital que tienen para renombrar barato y te ayudarán. Te guiarán por todo paso a paso. Ok. Entonces una vez que configuramos esto aquí, ahora queremos ir al cPanel y queremos instalar WordPress. De acuerdo, entonces lo que van a hacer es que te vas a dar un tipo específico de enlace que te va a mostrar y decirte, oye, escucha, aquí es donde se va a configurar tu hosting real en el cPanel. Y lo que se puede hacer una gran cantidad de las diferentes modificaciones y donde se puede instalar el tema real de WordPress. Entonces sigamos adelante y firmémonos en este de aquí. De acuerdo, Entonces esta es la pantalla que vas a ver. Una vez que inicies sesión en el cPanel, vas a obtener la información de inicio de sesión de nombre barato. lo van a enviar y correo electrónico. Tienes toda esa información ahí disponible. Entonces aquí es donde vamos a instalar el CMS de WordPress y también el certificado SSL. Entonces lo primero que queremos hacer aquí es que queremos bajar aquí e ir a WordPress, y es ir a la instalación del cliente. ¿ De acuerdo? De acuerdo, entonces vamos a seleccionar nuestro dominio aquí. A ver aquí, justo aquí, justo ahí. De acuerdo, entonces queremos dejar este HTTP porque automáticamente reenviará al HTTPS cuando instalemos el certificado SSL. Entonces lo dejaremos aquí así. Y podemos dejar esto, digamos la compañía de diseño de bombas. Nosotros, vamos aquí abajo. Proporcionamos UX, UI y diseño gráfico, ¿verdad? Algo bonito y sencillo. Y luego aquí mismo, lo que puedes hacer es establecer tu nombre de usuario y tu contraseña. Esencialmente voy a crear uno aquí desde cero. Ahora puedes tener estos cambiados aquí. Puedes ir así y automáticamente creará uno para ti. Voy a esconderme aquí, y voy a teclear entré aquí. De acuerdo, así que eso debería ser bueno ir ahí mismo. Y luego bajaremos aquí. Y luego iremos a Instalar. Ahora desea que esto se envíe a su correo electrónico en lo que respecta a los detalles de instalación. Ok. Por lo que sólo lo pondré aquí, mi correo electrónico y tener este Go Install aquí. De acuerdo, entonces parece que necesito que la contraseña sea más larga, así que agregaremos aquí una contraseña diferente. De acuerdo, eso debería estar bien ahí mismo. De acuerdo, entonces ahora estamos listos para irnos. Entonces ahora este CMS, correcto, el WordPress está instalado en nuestro dominio. De acuerdo, acabo de recordar antes de instalar realmente esas plantillas, donde queremos hacer es que queremos configurarlo para el certificado SSL. De acuerdo, así que por aquí a Nombre SSL barato, vamos a dar click en eso. Y luego vamos a agregar en el certificado al dominio. Entonces vamos a instalar aquí. Y luego queremos seleccionar el dominio. Perfecto. Y luego iremos a instalar certificado. Y luego se reenviará automáticamente al HTTPS. De acuerdo, entonces no deberíamos tener ningún tipo de problema con eso. Este es el backend de WordPress. Puedes ver aquí es solo un tipo de plantilla simple aquí. Y entonces lo que queríamos hacer era ir a, hay un par de cosas que queremos hacer aquí. Queremos ir a la configuración y queremos ir a la lectura. Queremos hacer una estática, la página de muestra aquí. Y luego queremos ir a permalink. Yo quiero ir a nombre del puesto. De acuerdo, y entonces lo que haremos es ir a plug-ins y agregaremos aquí un plug-in gratuito, astra. Y entonces esto va a ser esencialmente donde tenemos el elemento arrancó instalado aquí hasta donde un constructor web y también tipos libres de plantillas que podemos usar también. Entonces vamos ahora a la aparición es ir a temas. Se puede ver que este es el equipo que tenemos aquí mismo. Entonces ahora si bajamos a las plantillas de inicio, está bien, seleccionamos un tipo de constructor de páginas. Se puede ir al elemento dos están aquí. Y entonces ahora tenemos acceso a un montón de plantillas diferentes a las que podemos pagar o a las que podemos acceder de forma gratuita. Bajemos aquí. Echemos un vistazo a algunos de estos. El C aquí, ahí está éste de aquí. Aquí hay uno que me gustaría en cuanto al diseño, cuanto a ser libre y, y definitivamente podemos modificar esto y ajustarlo para el negocio. Entonces bajemos aquí. Creo que fue por diseño. Entonces algo así. Esto es perfecto aquí mismo. Por lo que todas estas páginas aquí se van a instalar. El homepage, el about page, y luego los servicios y el Contáctenos. Entonces todo está literalmente dispuesto para nosotros. Todo lo que necesitamos hacer es agregar en nuestra propia información. Por lo que esto es extremadamente poderoso aquí. Y entonces lo que vamos a hacer aquí, vamos a instalar esta plantilla aquí. Y luego vamos a crear un logo. Y lo vamos a montar como si se tratara de un negocio real y real. De acuerdo, así que sigamos adelante e importemos sitio completo. E importar todo aquí. De acuerdo, entonces el sitio está instalado aquí. Sigamos adelante y echemos un vistazo a cómo se ve el sitio. De acuerdo, ahí vamos. Este es el sitio. Y es increíble cómo esto se instala automáticamente por sí mismo. Y donde tenemos todas estas diferentes páginas aquí ya listas para ir. Y así tenemos el hogar sobre servicios contacto tendría el Solicitar Cotización aquí arriba. Entonces sigamos adelante y editamos este año. Vamos a editar con un mentor. Y esta va a ser la página de inicio aquí. Y lo que queremos hacer es que queremos sumar un poco de espacio aquí arriba para que podamos poner en nuestro logo, así va a ir así ahí mismo. Y luego vamos a ir a avanzado aquí. Y nos vamos, digamos alrededor de 115. Ok, fíjate cómo en el extranjero por esta pequeña zona justo ahí. Y entonces podremos poner nuestro logo por aquí. Entonces vamos a Guardar o actualizar aquí. De acuerdo, entonces estamos bien ahí. Y entonces ahora lo que haremos es seguir adelante y cambiar algunas cosas aquí. Eliminaremos esto aquí. Irá a borrar así. Y no necesitamos esto aquí también. Como se puede ver aquí. Este es un arrastrar y soltar muy simple. Digamos que aquí creamos increíbles sitios web de negocios, ¿verdad? O digamos aquí, diseño gráfico. De hecho, vamos a seguir adelante y dejarlo así. Creamos increíble Lee, hermosa. Como cambiar esto aquí. Kay? Justo así. De acuerdo, creamos sitios web increíblemente hermosos, ¿de acuerdo? Agradable y sencillo. Como borrar esto aquí mismo. Y vamos a mover esto al medio, así como así. Y en realidad podemos mover esto un poco más alto. Déjame ir a actualizar aquí abajo. De acuerdo, Entonces lo que podamos hacer, podemos ir aquí mismo y podemos subir esto así. Ok, bonito y sencillo. Y luego vamos a Guardar. De acuerdo, queremos ir a actualizar. Y entonces así es como se va a ver. Y así si vamos a duplicar aquí, podemos ver cómo se va a ver. O simplemente podemos ir así. Así es como se ve el sitio web. De acuerdo, entonces lo que queremos hacer aquí es que queremos ir a personalizar. De acuerdo, entonces queremos ir al encabezado aquí, y queremos ir a la identidad del sitio. Y queremos agregar aquí un logo, ¿verdad? El logo que pudimos crear en Canvas o simplemente arrastrarlo aquí. Y lo que queremos hacer es que queremos editar esto y queremos recortarlo. Entonces irá así. Justo así. Y vamos a dar click en eso. Y qué se actualiza. Está bien. Y luego iremos a Select. Y nos va a pedir que lo hagamos de nuevo. Vamos a recortar imagen. De acuerdo, así que vamos así. Y eliminemos este error. Vamos, quitamos eso. Y así podemos hacer esto un poco más grande. Volvamos a la identidad del sitio. Aquí vamos. Hagámoslo un poco más grande. Ahí vamos. Algo así ahí mismo, el diseño de la bomba, ¿verdad? Y tiene que publicar. Y ahora tenemos nuestra página web con nuestro diseño aquí, con nuestro logo. Contamos con el sobre servicios de contacto. Y luego solo entras aquí y esencialmente haz clic en cualquier área que quieras actualizar. Entonces salgamos de esto y volvamos a donde lo teníamos, las páginas. Y así la página de inicio aquí edita con Ella mentor. Correcto. Entonces entrarías aquí y editarías todos los diferentes lugares hasta aquí abajo, ¿cómo podemos ayudar? A lo mejor quieres solo tener diseño, desarrollo y marketing o e-commerce o lo que sea que sea, ¿verdad? Aquí puedes usar estos diferentes iconos. Se puede cambiar esto. Se puede quitar esto. Puedes agregar una información aquí abajo, y ahí es donde vas a encontrar esa información ahí. Está bien. Y así aquí mismo, estos son los diferentes tipos de áreas que puedes personalizar para este tema. También puedes bajar aquí, cabecera, pie de página y bloques. Y esto te va a permitir ajustar los bloques al pie de página. Entonces vamos a echar un vistazo a esto aquí ahora mostrarte tan como aquí mismo, cambia esto aquí mismo, el logo, poner en la dirección de la empresa, información de la empresa, ¿verdad? Es así como vas a editar eso ahí mismo, y también esta zona aquí mismo. Entonces eso va a ser un aquí para la página web. Nuevamente, este es un sitio web agradable y sencillo que es literalmente gratis. Tienes todas estas páginas. Todo lo que tienes que hacer es poner en esta información que quieres para tu negocio en particular, para ti mismo, ¿verdad? Y luego cambiar y modificar algunas de estas secciones. Es realmente solo hacer clic, arrastrar y soltar. Y ahora tienes todos estos elementos diferentes por aquí. Literalmente solo tienes que hacer clic en una de estas áreas y puedes editar el contenido, ¿verdad? Se puede mirar diferentes cosas que se pueden arrastrar en sus diferentes elementos, ¿verdad? Y todo súper sencillo. Basta con dar click en él. Puedes editar, puedes quitar cosas, puedes agregar cosas, ¿verdad? Entonces esta va a ser una bonita página web aquí que puedes diseñar y configurar, ¿verdad? Para su negocio en particular. Si lo estás haciendo en lo que respecta a crear una marca, o si lo estás haciendo por, ya sabes, en realidad configurándolo para ti mismo como una marca nueva personal. Recuerda, cada página que vas a necesitar hacer esto aquí en cuanto a tener el menú allá arriba para tu logo donde vas a ir a estilo o realmente a vance aquí. ¿ Y quieres ir a cerca de 151? Creo que fue o 150, algo así. ¿ Verdad? En base a lo que hicimos anteriormente. Y quieres tener aproximadamente la misma cantidad de espacio aquí que lo haces en la página de inicio para que puedas tener tu logo aquí, ¿verdad? Entonces esa va a ser toda la sección aquí para la página web. Juega con esto. Puedes diseñar así como quieras. Aquí se puede ver muchos de estos elementos ya están incluidos aquí. Por lo que solo puedes agregar en tu propio contenido a estas páginas. De acuerdo, entonces eso va a estar aquí para la configuración del sitio web en diseño, y nos vemos en el siguiente. 91. Plantillas de UI: Ok, entonces estamos aquí en el enforced.net. Y en el otro video, pasamos por buscar un sitio web para nuestra marca. Si estamos haciendo marca personal para nosotros mismos, ¿verdad? O si estamos haciendo el branding empresarial real donde vamos a tener un negocio real ser la marca versus nosotros mismos. Y así ahora en este video, quiero repasar los diferentes tipos de plantillas aquí que puedes usar como marcos de referencia para tus diseños particulares. Y específicamente entrar aquí en las plantillas de UI. Porque lo que puedes hacer aquí es esencialmente mirar cuáles son los tipos más calientes de plantillas de interfaz de usuario que están ahí fuera en el mercado. Para que puedas hacer tu proceso de diseño mucho más fácil y mucho más suave, ¿verdad? Porque no tienes que reinventar la rueda. Solo tienes que mirar lo que está caliente, lo que está saliendo por ahí y poder agregar tu propio giro único a estos diseños en particular que ya sabes son realmente calientes en el mercado, ¿verdad? Entonces vamos aquí a las plantillas de UI. Y puedes mirar todos los diferentes tipos de plantillas de Photoshop, Sketch sigma, Adobe XD, ¿verdad? su mayoría estamos trabajando con Adobe XD. Y así puedes bajar aquí y mirar diferentes tipos de plantillas en todo el tablero si quieres buscar, digamos, entrega de alimentos, UIKit para móvil. Digamos que tienes un cliente potencial o tal vez quieres meterte en el tipo de diseño de interfaz de usuario para diferentes tipos de aplicaciones móviles, justo entonces puedes tomar este kit en particular aquí mismo y poder usarlo como referencia, tal vez diseñar una marca confeccionada o tipo de aplicación conformada. Y en realidad puedes usar esto como tu cartera de diseño. Muy, muy poderoso aquí, vale, entonces lo que podrás hacer es mirar algunas de estas diferentes capturas de pantalla y poder, digamos, comprar este marco en particular, correcto, este tipo de diseño y poder usar para su trabajo real con sus clientes. Y también poder crear tal vez algo desde cero hasta que una marca usando este tipo de interfaz y diseño y poder usar eso como tu portafolio real, que te irá mucho camino porque y esa es una de las cosas más grandes que los clientes quieren mirar antes de ellos, ya sabes, eligiendo trabajar con nosotros. Oye, ¿qué has hecho en el pasado? ¿ Cuál es tu experiencia? Sumando algunos diseños. Y así esta es una gran manera para que puedas mostrar tus habilidades de diseño aprovechando los tipos existentes de interfaces de usuario, ¿verdad? Entonces bajemos aquí y veamos algunos de los diferentes diseños aquí. Se puede ver todo aquí ya está configurado en diseño. Simplemente puedes usar estas plantillas en particular y poder ingresar información diferente. Entonces es muy, muy poderoso, ¿verdad? Y es solo algo que puedes usar en tu portafolio particular que es tan poderoso. Entonces, tan poderoso, no puede recalcar eso lo suficiente. Por lo que puedes ver aquí esto es desde el lado del cliente. Veamos aquí. Selecciona la comida de los restaurantes. Porque ten en cuenta, muy, muy pocas empresas. O, ya sabes, los negocios por ahí en realidad vienen con algo único y creativo desde cero. Hay muchas plantillas prefabricadas, diseños que ya están configurados y un poco estándar. Y entonces el diseñador irá y modificará y ajustará le agregará su propio giro único y podrá hacerlo propio. No obstante, en su mayor parte, muchos de estos diseños ya están disponibles, 30 hechos. No obstante, un cliente obviamente no va a venir aquí y mirar todas estas diferentes plantillas de interfaz de usuario, buena tasa de marcos de diseño de interfaz de usuario. Van a ir con un especialista como tú, ¿verdad? Un diseñador de UX UI para hacer todo esto por ahí podría porque entiendes esto. Y así más o menos, ya sabes, puedes mirar todas las diferentes características aquí, funcionalidades. Y luego poder comprar esto por 60 dólares y poder tener esto, ya sabes, en tu cartera, ¿verdad? Y así volvamos aquí. Echemos un vistazo a otro aquí. Se trata de Adam y UI Kit plantilla para sitio web. Entonces esto es para el diseño de sitios web aquí. Y puedes echar un vistazo a algunos otros tipos diferentes de sitios web configurados aquí donde tienen los componentes aquí, la navegación que puedes ver, luego tienen los diferentes elementos también. Y luego el encabezado aquí y todos los diferentes tipos de elementos. Y recuerda, no estás creando cosas desde cero muy pocas veces una U realmente creando algo que es original, completamente nuevo, indiferente, ¿verdad? Muchos diseñadores, lo que van a hacer es van a conseguir un trabajo en particular que va a venir a su manera sin embargo, tienen una idea en cuanto a lo que están pensando. Pero siempre están, en su mayor parte, van a estar saliendo por ahí y mirando lo que ya está disponible en el mercado y consiguiendo algunos marcos de referencia, mirando lo que hay ahí fuera que ya está funcionando, que se ve muy bien, eso se ve fantástico. Y entonces habrá posibilidad de modificar y ajustar y hacerla suya, pero realmente no es necesario, como dije, reinventar la rueda. Puedes tomar muchos de estos diseños y hacerlos tuyos. Entonces estos son los, todos los diferentes tipos de imágenes y páginas. Si vas a ponerte bien, aquí tienes un tablero, así que este es un lugar fantástico para que vengas aquí, obtén algunas plantillas en cuanto diseño de la interfaz de usuario y puedas crear algunos de sus propios diseños tú mismo, tal vez componen algunas marcas o lo que sea, y luego poder usar esto como tu portafolio porque es solo un potencial masivo, masivo aquí para que puedas tener muchos proyectos diferentes bajo tu portafolio justo fuera de las puertas para que puedas empezar a conseguir algunos trabajos, ¿verdad? Porque como dije, mucha gente que está buscando diferentes trabajos de diseño gráfico UX UI quieren ver tu trabajo anterior, y esa va a ser la mejor manera en que puedas hacer eso, ¿verdad? Y exhibir eso. Aquí hay algunos tipos diferentes de plantillas de interfaz de usuario también. Podrás pasar algún tiempo buscando en estas escenas que una de las que más resuena contigo y poder tomarlas y añadirlas a tu portafolio. Entonces eso va a estar aquí para las plantillas de UI y te veremos en la siguiente. 92. Plantillas de logotipos: De acuerdo, entonces en este video vamos a repasar las plantillas de logotipos. Entonces estamos de vuelta aquí en el bosque, igual que mencioné en los otros videos, este es un recurso tan grande para que puedas conseguir diferentes referencias, diferentes tipos de ideas de diseño, y especie de ver lo que el marketplace está, ya sabes, hasta el momento en lo que está apareciendo y lo que es muy popular. Entonces vamos por aquí y quiero mostrarles aquí la herramienta de fabricante global, que automáticamente escupirá un logotipo para usted basado en su mercado o su nombre comercial en el tipo de diseño en. Podrás usar esto como referencia para poder crear tus propios logotipos desde cero, o algunos de estos como referencias de diseño. O tal vez solo tener este logotipo creado solo con el uso de esta herramienta. Muy, muy sencillo. Entonces sigamos adelante y saltemos justo aquí. De acuerdo, así que como ves aquí, todo lo que necesitamos hacer es escribir una marca, digamos ABC, UX, diseño de UI. ¿ De acuerdo? Y luego vamos al siguiente. Y luego bajamos aquí. Elegimos diseño, ¿verdad? Somos empresa diseñada. Y luego vámonos. Y entonces lo que hace esto es que escupe un montón de diferentes tipos de recomendaciones locales con el nombre comercial, ¿verdad? Y puedes elegir diferentes tipos de gráficos aquí. Se puede agregar en diferentes elementos. Y elige para tu tipo de diseño particular. Digamos que tiene un cliente que puede estar en una industria diferente. A lo mejor están en el campo médico, mejor hay panadería, mejor son un salón de belleza o, o algo diferente obviamente a lo que eres en cuanto a una agencia de diseño digital, ¿verdad? Para que puedas mirar por aquí abajo, mirar diferentes tipos de plantillas de logotipos, diferentes ideas de diseño. Puedes llevarlos y correr con ellos. Por lo que no estoy realmente seguro en cuanto al precio aquí. Creo que puede haber un pequeño costo, sin embargo, poder conseguir este tipo de plantilla aquí por 5.20, $10 dólares como máximo, diría que sigue siendo completamente valioso. Entonces, ven aquí. Se puede editar el texto. Se puede editar un diferentes tipos de esquemas de color. Se puede agregar otro gráfico, se puede cambiar el fondo. Aquí puedes hacer tanto con esta herramienta en particular. Y sigamos adelante y solo probemos un tipo diferente de negocio que decía que estábamos trabajando con un salón de belleza y querían un completo reacondicionamiento del logotipo aquí. Entonces vamos a XYZ y salón de belleza, está bien, y luego vamos aquí abajo. Sco belleza. Y luego se va a aplicar. Y luego veremos el tipo de diseños diferentes que este Recomienda. Tan perfecto ksi, solo toma en cuenta el nicho, ¿verdad? El mercado, la industria, y es capaz de crear diferentes logotipos basados en lo que se centra la marca. Entonces esto es tan fantástico aquí. Esta es una gran herramienta. Puedes usar esto para tus propios diseños. Puedes vender logotipos fácilmente empezando en fibra para, ya sabes, 102040, $50 el pop y ser lo que es un buen diseño aquí? Y ya sabes, empieza fácilmente a construir tu portafolio, ¿verdad? Porque recuerda, todo se trata de darte un portafolio construido para que tengas algo de trabajo para mostrarle a la gente. Y sobre todo si quieres conseguir un trabajo o solo buscas conseguir un puesto en una organización. Quieres poder poner en tu currículum que has experimentado, que tengas diferentes proyectos de diseño. Tienes un portafolio, y obviamente lo mismo con trabajar con clientes. Quieren asegurarse de que has sido capaz de hacer algo en el pasado y sabes lo que estás haciendo, ¿verdad? Entonces solo un video rápido aquí repasando las diferentes plantillas de logotipos a las que puedes tener acceso en el mercado. Y qué rápido y sencillo puedes crear logotipos muy hermosos, sorprendentemente hermosos en cuestión de minutos. Entonces eso va a estar aquí para plantillas globales, y te veremos en la siguiente. 93. Cómo crear un correo electrónico empresarial: Vayamos por delante y saltemos. La plataforma número uno que te recomiendo que uses para configurar tu email empresarial va a ser G Suite muy económica y muy fácil de configurar. Entonces te voy a guiar paso a paso cómo hacemos esto. Entonces lo primero que quiero mostrarles aquí es el precio. El mejor aquí que vas a usar si apenas estás empezando, va a ser el año básico, 6 dólares al mes. Se obtiene el correo electrónico del negocio, se obtiene videoconferencia, calendarios de mensajería en equipo, 30 gigs de almacenamiento en. Después obtienes apoyo y obtienes diferentes controles de seguridad y administración, lo cual es totalmente, totalmente vale la pena. Por lo que también obtienes una prueba gratuita de 14 días. Te recomiendo encarecidamente configurar, voy a seguir adelante y te guiaré a través de cómo conseguir que este rodando. Entonces lo primero que vamos a hacer aquí es ir a G Suite dot google.com. Y luego vamos a ir a empezar. ¿ De acuerdo? Y luego queremos poner en el nombre del negocio aquí y esto se pone empresa ADC. Y luego si quieres ponerte solo a ti o negar empleados dependiendo de cuántos empleados tengas. Entonces iremos ahí, solo tú a continuación. Quieres poner tu nombre. Voy a tirar de Kuan Galvin y pondré mi dirección de correo electrónico en un hongo upon.com. Y luego siguiente. Y luego pones sí, tengo uno que puedo usar. Ahora si no tienes dominio y quieres comprar uno, puedes seguir adelante y hacerlo a través de ellos. Pero te recomiendo encarecidamente que vayas y compres un dominio a través de Name Cheap, muy fácil, muy simple configuración. Entonces Tenex, tu clients.com. Siguiente. Está bien, genial. Y luego vamos a ir al siguiente. Y entonces aquí es donde vamos a crear nuestro nombre de usuario. Entonces vamos a ir a, vamos uno en lo que sea que nuestra URL esté ahí y luego contraseña. ¿ Quieres establecer una contraseña? ¿ No puedo ser robot? Vayamos a lo que tenemos para hacer esto aquí muy rápido. Estoy de acuerdo y sigo. Lo vamos a necesitar, verificar el dominio. Y te voy a mostrar cómo hacer eso también. De acuerdo, entonces aquí es donde necesitamos seleccionar el plan flexible o el plan anual sobre plan flexible va a ser el mejor. Ahora con esta página, es necesario introducir la información de su tarjeta de crédito. Voy a seguir adelante y hacer eso muy rápido. Está bien. Por lo que hemos presentado nuestra información de pago y estamos listos para ir al siguiente paso. Entonces aquí es donde vamos a verificar nuestro dominio en configuración nuestros registros MX. Ahora, cuando estás verificando tu dominio, recomiendo que la forma más rápida y sencilla de configurar esto es agregar un registro TXT. Te voy a enseñar cómo hacer eso. Así que asegúrese de que ha nombrado configuración de hosting barato. Y les voy a mostrar dónde van a agregar ese disco TXT en particular. Por lo que queremos bajar aquí e ir a He ingresado exitosamente en su cPanel. Siempre que obtienes hosting con nombre barato, vas a recibir un correo electrónico. Y te van a proporcionar los detalles de inicio de sesión a tu publicación barata sin nombre. Y luego a partir de ahí vas a ir a tu Editor de Zona y luego vas a sumar el disco. Te voy a enseñar cómo hacer eso. Entonces te está diciendo aquí que vayas al nombre particular t publicando cPanel. Está bien, genial. Y luego vas a conseguir este código de verificación del sitio de Google en particular. Y vas a querer agregar esto como un registro. Y déjame mostrarte cómo harías eso. Entonces estamos aquí en el cPanel y quieres ir al Editor de Zona. ¿Está bien? Y tu cPanel de mi Nombre, Barato. De acuerdo, así que estamos aquí en el editor de zona de 10 pulgadas o clientes y queremos agregar este código aquí ahora. Este es un Caudell anterior fue agregado. Entonces vamos a seguir adelante y sumar el nuevo. Vamos a copiar que vamos a ahorrar aquí. Está bien, genial. Entonces vamos a ver esto registros, Verificar dominio y configurar. Ahora esto va a tardar un tiempo en cargarse, pero ese es el proceso al que vas a ir. Ahora, te voy a mostrar ahora lo que vas a hacer a continuación, que es agregar los registros MX y, y esto es realmente importante porque va a atar tu correo electrónico de G Suite a tu hosting en particular. Entonces déjame mostrarte cómo vas a armar eso aquí. Por lo que aquí en el Editor de Zona hemos agregado un registro TXT y queremos ir al registro MX. Y vas a querer agregar estos códigos en particular aquí también sobre ella es la prioridad uno, la prioridad cinco. Ahora puedes encontrar fácilmente estos registros MX literalmente simplemente yendo a Google. Si vamos a los registros de Google MX, ahí vamos. Entonces fácilmente puedes simplemente copiar esto aquí, pero esos son los que van a ir en el cPanel particular aquí, ¿verdad? Vas a ir al amex para agregar estos registros MX en particular. Y luego quieres ir al TXT y verificar el dominio aquí abajo. Entonces así es esencialmente como vas a querer tener esa configuración y vas a ir a, vuelta a tus dominios aquí. Esto, dice MI digital, pero realmente voy a querer asegurarme de que estás seleccionando DNS de alojamiento web barato llamado, o que se propaga correctamente ahí. Entonces ese es esencialmente el proceso ahí para que puedas crear un correo electrónico empresarial para tu negocio en particular a través de G Suite solo $6 al mes, altamente, altamente recomendable. Entonces eso es todo para este video aquí, y te veremos en el siguiente. Gracias. 94. La red lo lo lo y las no las las no: En este video, vamos a repasar el networking. Ahora, el networking es extremadamente importante, ya sea que vayas por la ruta de freelance o si vas a buscar un trabajo ahora mismo, trabajar puede abrirte una tonelada de puertas. Y así en esta lección, vamos a caminar a través de cómo aprovechar su red existente, cómo seguir trabajando ahora de la manera correcta. Algunas de las cosas que hacer y no hacer, cómo asegurarse de que te estás presentando la manera correcta cuando estás tratando de involucrar y hacer networking actividades y cómo evitar representarte en el tipo equivocado de peso. Entonces, sigamos adelante y saltemos a la creación de redes. Entonces aquí te dejamos algunos puntos clave cuando se trata de networking. Construir una red es una de las cosas más importantes que puedes hacer para tu carrera. Y esto es si vas o no a trabajar como freelance, vas a buscar trabajo. Siempre se trata de conocer el tipo correcto de personas que te pueden ayudar a que te apunten en la dirección correcta, ¿verdad? Y LinkedIn es, con mucho, el mejor lugar en línea a la red. Se pueden tener diferentes conexiones. Se puede tener diferentes personas que pueden estar conectadas con personas a las que se quiere poner frente. Y puedes aprovechar tu red existente para ayudarte a meter ese pie en la puerta, por así decirlo, ¿verdad? Y como dice el viejo refrán, no es lo que sabes, es a quién conoces, ¿verdad? Y obviamente quieres poder tener habilidades. Se quiere poder tener el conocimiento, la pericia, ¿no? Muchas veces es la gente con la que puedes conectarte y involucrarte y la red que es capaz de abrir muchas puertas para ti que quizás no hayas tenido antes. Y así una de las cosas clave a tener en cuenta aquí con networking es en, mucha gente lo hace de la manera equivocada. No sé si alguna vez has estado en algún tipo de eventos de networking o has hecho o probado networking antes. veces que no las personas, lo que harán es que siempre vengan a algún tipo de evento o van a hacer networking de una manera muy egoísta. Entonces habla de, oye, esto es lo que quiero que hagas, o puedes hacer esto por mí o todo sobre sus propios intereses egoístas? Bueno, realmente necesitas tomar el enfoque opuesto a eso porque eso es lo que te va a permitir llevar tu juego de networking al siguiente nivel. Quieres buscar para encontrar donde puedes agregar valor al individuo, ¿verdad? Digamos que estás intentando conectarte con alguien de tu red o con alguien fuera de tu red que tal vez tenga una conexión con alguien dentro de tu red, ¿verdad? Siempre quieres tomar el acercamiento de, oye, ¿qué puedo hacer por ti? ¿ Cómo puedo agregarle valor y luego poder pedirles un favor, verdad? Porque a pesar de que quizá no hagas lo que les dices que estás recomendando o que estás ofreciendo, ¿verdad? Apenas la oferta por sí sola va a recorrer un largo camino. Y sobre todo con que pudiste ir en su perfil, tal vez buscarlos en línea y mencioné, oye, escucha, me di cuenta de que haces X, Y, y Z. te busqué, ¿verdad? Dejarles saber que en realidad pasas algún tiempo para investigarlos, mirar sus antecedentes realmente va a recorrer un largo camino. Se quiere alejarse de sólo enviar mensajes que tengan puro interés propio. O no hay nada a cambio porque nadie quiere sentirse acostumbrado, ¿verdad? Y cuando vas a entrar con tu propio interés egoísta, entonces eso es realmente alejar y ahuyentar las relaciones potenciales y las oportunidades de networking que pueden estar viniendo en tu camino. Por lo que este es un resumen rápido aquí de las redes. Recuerda siempre mirar el valor cuando estás conectando con las personas y cuando estás haciendo networking, haciendo preguntas sobre ellas, sobre lo que tratan, sobre su negocio. Y luego inevitablemente, te harán preguntas sobre ti y tu negocio también. Y en su mayor parte, si realmente quieres llevar tu juego de networking al siguiente nivel, concéntrate puramente en LinkedIn y empieza a construir tu perfil. Empieza a publicar un montón de contenido relacionado con tu tema y realmente busca desarrollar una gran red en LinkedIn. Entonces eso va a estar aquí para hacer networking, y nos vemos en el siguiente. 95. Principales sitios web de Freelance: En este video, vamos a repasar algunos de los mejores sitios web freelance en los que puedes inscribirte. Empieza a conseguir algo de trabajo bajo tu cinturón, empieza a construir tu portafolio. Y lo grandioso de estos sitios web freelance es que todos los proyectos van a estar ahí para que puedas pujar, ¿verdad? No tienes que salir por ahí y en realidad buscar empleo. Todos los trabajos estarán en la plataforma. Y consigues esencialmente inscribirte como usuario, poder verificar tu identidad, y luego poder conseguir que te presenten trabajos. Y entonces en realidad puedes pujar por esos trabajos justo fuera de la puerta. Entonces sigamos adelante y saltemos a la cima. Diferentes sitios web freelance con los que puedes inscribirte para un diseñador de UX UI, ¿verdad? Así que sigamos adelante y veamos algunos de los mejores sitios web freelance. Entonces como puedes ver aquí, tenemos la primera que es Upwork.com. Este va a ser probablemente el más grande, el mejor al que te inscribas porque es esencialmente uno de los top del mercado. Vas a tener una tonelada de empleos, tonelada de oportunidades para escoger y elegir. Y luego el segundo es Fiverr.com. Esto es más de un tipo de plataforma de trabajo o slash. No obstante, hay algunas oportunidades ahí dentro para pujar por los gigs personalizados que la gente coloca ahí. Y luego está freelancer.com. Esto es probablemente comparable a Upwork en lo que respecta a ser el número dos en el mercado para los freelancers. Y luego tenemos las dos plataformas específicas para diseñadores, que es dribble y Behance. Ambas plataformas son fantásticas para exhibir tu trabajo y para poder además conseguir trabajos específicos viniendo a tu manera. Y entonces las fuentes adicionales aquí son personas por hour.com. Este es uno en el Reino Unido. Esta también es buena. No obstante, típicamente vas a tener más éxito por lo que he visto, lo que he experimentado en la máxima libertad, eso son los sitios web también. No obstante, si estás en el Reino Unido, tal vez esta pueda ser una buena fuente para ti. Y luego tenemos google.com, que también está en otro sitio web freelance también. Entonces sigamos adelante y saltemos a estos individualmente. Entonces el primero aquí, freelancing en Upwork, Escribe una gran, gran plataforma, muy recomendable. Está mirando a algunos de los pros. Los pros son que tienen un proceso de cribado y tienen tanto fijos como nuestros los contratos. Y luego miniproyectos que están disponibles. Escala diferente, ¿verdad? Podrás empezar con tu carrera y tener un pequeño proyecto por tal vez 40, $50 solo para mostrar tu trabajo, conseguir esa experiencia bien. Y luego tienes protección contractual por hora, que te protege como una hora el asalariado. Y algunos de los contras aquí son que es un reto conseguir tu primer proyecto. No obstante, si estás usando muchos de los diferentes consejos que se explican en este curso, ¿no? Donde realmente quieras leer la descripción del trabajo. Quieres asegurarte de que estás presentando tu oferta y la presentas de una manera que permita al cliente final saber que realmente lees la descripción del trabajo. Estás familiarizado con el que tienes las habilidades para poder hacer el proyecto. Y agregar un video hará un tremendo largo camino. Entonces piensa en eso también. Y así para mucha gente, sí, puedes decir que va a ser un reto, pero como tienes este curso, tienes acceso a este contenido, a este material, a estos consejos. Va a ser mucho más fácil para ti poder conseguir tu primer proyecto, ¿verdad? Y así obviamente hay competencia. Ahí hay mucha gente diferente con tarifas más bajas que tú. Y por eso quieres tener algo donde tus tarifas sean muy bajas al principio. Entonces metes el pie en la puerta con los trabajos, ¿verdad? Y luego otra estafa aquí es que la puntuación de éxito laboral baja automáticamente si no trabajas en Upwork por un tiempo. Entonces asegurándose de que tu perfil esté actualizado. Estás constantemente, ya sabes, obteniendo nuevos trabajos y estás trabajando mantendrá tu puntuación en lo más alto, y luego freelancing en freelancer. Y esta también es una gran plataforma. Tienen un proceso de cribado. Tienen un proceso can get verificado también donde creo que pagas unos $100 y verifican tu identidad, verifican tu antecedentes y verifican un par de cosas más para asegurarte de que eres un freelancer vetado y verificado . Y entonces tienen escenario fijo los contratos también, muchos proyectos diferentes o diferente escala, ¿no? Realmente puedes construir tu portafolio también consiguiendo un pequeño proyecto y luego trabajando desde ahí. Y luego tienen un programa de freelancer preferido también. Donde si eres un freelancer que es preferido, tienes una puntuación alta, vas a conseguir muchos de los trabajos no te actúes de freelancer mismo. Y así vas a tener la oportunidad de ganar muchos de estos trabajos, sin embargo, tienes que construir tu perfil y conseguir que esa experiencia sea correcta. Y luego los contras aquí, desafiando a conseguir tu primer proyecto. No obstante, obviamente entrar en este material, no va a ser un reto tan grande para ti. Y luego un montón de rivales por ahí, mucha competencia bajaría tasas. Pero de nuevo, es una de esas cosas donde, ¿cómo puedes separarte, no? ¿ Cómo se puede crear tal vez algún tipo de proceso o metodología que sea única en el mercado. Y tienes que estar encima de los trabajos. Tienes que estar siempre buscando nuevas oportunidades, nuevos proyectos viniendo a tu manera. Y luego tenemos Fiverr.com. Fiverr.com es una gran plataforma también. Es muy fácil y sencillo empezar con. Y luego tienes dos tipos diferentes de proyectos aquí. Tienes gigs, y luego tienes proyectos que esencialmente están hechos desde cero. Para que alguien pueda entrar ahí y poner un trabajo o proyecto en particular, ¿verdad? Y entonces la gente puede pujar por ahí. O puedes establecer como tus propios gigs select, digamos, para un diseño UX para una aplicación móvil, puedes tener un gig para eso con un precio determinado. Y entonces tal vez digamos por un diseño de logotipo. Y puedes tener eso como un gig y puedes tener un precio fijo para eso. Entonces es como montar tu propia tienda, ¿verdad? Donde tienes diferentes gigs, diferentes proyectos, y luego están todos a ciertos precios fijos. Y luego tienes al pro de la fibra para el mejor talento. Hay un proceso de cribado para esto. Y si tienes mucha habilidad y realmente habiliza bien, entonces puedes pasar por este proceso aquí y obtener acceso a muchos de los diferentes clientes que están dispuestos a pagar el nivel superior. Y luego de nuevo, esta es una gran manera de construir tu portafolio, construir testimonios. Y algunos de los contras aquí es que los proyectos inician un $5, que va a ser de bajo costo. Y se puede ver esto de manera positiva o negativa. Sí, es lamentable que el precio sea bastante bajo. No obstante, es una gran manera para que tú también puedas conseguir que algunos trabajen tu cartera y empezar realmente a obtener algunos comentarios, algunos referidos, algunas recomendaciones, testimonios, ¿verdad? Y así algunas columnas adicionales aquí, los pedidos se pueden colocar sin ninguna comunicación. Entonces digamos que alguien quiere algún diseño o logotipo ridículamente complejo o lo que sea, pueden hacer un pedido sin contactarte porque tienes un trabajo ahí como en tu tienda, ¿verdad? Y luego si necesitan cancelar el pedido, entonces va a contar contra ti en tu puntuación. Entonces no hay una gran cosa ahí, es desafortunado, pero siempre te recomendaría que pongas hey, contáctame antes de cada pedido. Correcto. Y así como mencioné, si se cancela el pedido, vas a conseguir una huelga en tu cuenta y luego los precios se fijan por proyecto. Por lo que hay muy poco espacio de movimiento ahí, o espacio para la negociación. Cuando tienes un precio de como digamos $30 o $20 por un logo brillante, realmente no puedes volver atrás y tratar de negociar eso. Realmente no puedes volver atrás y tratar de negociar eso con el comprador porque eso es en lo que se establece tu precio. Entonces, sin importar, esta es una gran plataforma para empezar por el bajo costo, puedes empezar a construir tu portafolio y poder usarlo para conseguir clientes adicionales por el camino. Y entonces tenemos regate aquí. Esta es una plataforma específicamente para diseñadores. Y así el enfoque aquí es que es, es fácil publicar tu trabajo gratis para usar. Ahí hay diferentes empleos y tableros de proyectos. Bueno, puedes seguir ahí y buscar diferentes proyectos que puedan figurar criterios o diferentes trabajos que quizá quieras poder buscar. Y lo grandioso aquí es que tienen trabajos remotos donde puedes trabajar tú mismo como freelancer o trabajar desde casa, o tienes la oportunidad de encontrar trabajos ahí dentro. Van a estar internamente, dentro de una agencia o dentro de algún tipo de grandes organizaciones corporativas. Y algunos de los contras aquí son esencialmente muchas de las características que hacen que esta plataforma funcione. Muchas de las diferentes cosas solo están disponibles para las cuentas pro. Y así si querías exhibir tu trabajo, si quieres hacer muchas de las diferentes cosas que hace esta plataforma, vas a necesitar pagarlo. Por lo tanto, ten eso en cuenta. Y entonces tenemos el Behance aquí. Esta también es una plataforma muy sencilla y fácil también. Eso es fácil crear cartera de Adobe, diseños personalizados para cada uno de tus casos. Estadísticas de perfil útiles, cuántas personas han visitado tu perfil, ¿verdad? Y luego tienes un área para buscar prácticas de tiempo completo, freelance o incluso también. Entonces solo piensa en esto. Esto podría ser algo que usted busca también. A lo mejor estás empezando. Has pasado por este curso, has conseguido mucha educación aquí, muchos desarrollos de habilidades en el espacio de diseño UX UI. Y quizá quieras conseguir una pasantía, ¿verdad? Y sólo aprende en el trabajo. A veces esto se puede pagar, a veces puede ser gratis. No obstante quieres buscar uno pagado que incluso te pueda dar solo una baja cantidad de pagos, sin embargo, eres capaz de aprender en el trabajo. Y entonces los contras aquí es que esto no es necesariamente una plataforma de trabajo. Esto es más bien una plataforma para mostrar tu trabajo. ¿ De acuerdo? Otra estafa aquí es que algunos empleos sólo se pueden solicitar para usar un formulario de terceros, lo que lleva mucho tiempo llenarse y mucho tiempo, ¿verdad? Por lo que no va a ser agradable y sencillo para ti llenar la solicitud de empleo. Y no hay salario indicado en muchos de estos puestos aquí, por lo que van a tener un pulimento ahí. Al igual que hey, busco diseñador XYZ. Busco este tipo de trabajos, pero no te están mostrando cuánto te van a pagar. Entonces eso es un, ya sabes, Khan lamentablemente, pero sigue siendo una gran plataforma para poder exhibir tu trabajo y dar algún trabajo potencial. Entonces eso va a estar aquí para los mejores sitios web freelance. Y nos vemos en el siguiente. 96. Preguntas del alcance del proyecto de UX/UI: En este video, vamos a repasar las preguntas típicas y comunes del proyecto UX UI. Estas son algunas de las preguntas que quieres estar al tanto y estar haciendo a tu cliente o cuando estás trabajando con miembros del equipo, ¿no? Esto es algo donde se quiere poder entender el alcance del proyecto, los entregables, la línea de tiempo, las finanzas escriben todo lo que se necesita saber antes de iniciar un proyecto. Entonces que digamos si estás trabajando con un cliente y es capaz de ser entregado en el momento adecuado que están esperando al costo más asequible, ¿verdad? Por lo que poder entender el tipo de preguntas, la conversación inicial que necesitas estar teniendo con los clientes te hace sonar mucho más creíble para que realmente te encontraras con que sabes lo que estás haciendo. Ya lo has hecho antes y esto es sólo otro día en el barrio, ¿verdad? Está bien. Entonces, los tipos de preguntas que vas a estar haciendo típicamente, puedes mirar diferentes tipos de preguntas de alcance del proyecto para entender qué es exactamente lo que buscan lograr, ¿verdad? ¿ Qué aspecto tiene ese objetivo final? ¿ Cómo será ese producto terminado? Y luego línea de tiempo tipo de preguntas, ¿verdad? ¿ Quieres saber cuál es su cronología para terminar este proyecto? ¿ Tienen diferentes hitos en su deseo o necesidad de cumplir realmente? Y luego la comunicación, ¿vas a estar comunicándote con un adolescente o te vas a estar comunicando con un individuo que va a ser tu punto de contacto y con qué frecuencia esperan que estés en contacto con ellos justo hoy? Requiere cualquier tipo de actualizaciones diarias, semanales, quincenales. ¿ Qué aspecto tiene eso? Correcto. Y luego el derecho financiero. Entendiendo, ¿cuál es su presupuesto, cuánto están dispuestos a gastar? ¿ Con qué se puede trabajar? Y entonces obviamente poder asegurarte de que te estén compensando de manera justa. Entonces si miras el gráfico a la derecha ahí, eso te va a dar una muy buena indicación de los diferentes tipos de tareas, y luego los entregables, y luego el tiempo de estimación, y luego la línea de tiempo real fecha de entrega. Entonces es solo algo que realmente puedes mirar y usar para cuando buscas construir diferentes proyectos y cuando estás llegando a esa etapa de entrevistas para que estés hablando con tus futuros clientes tu esencialmente un médico y eres capaz de analizar y entender su situación actual. Y luego B, qué prescribirles el tipo correcto de medicación, por así decirlo, correcto. Donde estás diciendo, oye, basado en lo que estás buscando lograr y lo que quieres hacer aquí con esto es lo que estamos recomendando en cuanto al alcance del proyecto, cuanto a lo que vas a necesitar, cuanto a toda la etapa diferente. Aquí está el tipo de entregables, aquí está la estimación, y luego aquí está esencialmente una línea de tiempo estimada para que podamos completar estos. De acuerdo, así que veamos ahora algunas del tipo específico de preguntas que quieres estar haciendo antes de iniciar un proyecto. Entonces algunas de las preguntas aquí son, ¿cuáles son los hitos y plazos, no? Quieres saber qué es exactamente lo que quieren que se complete en cada hito en particular, y ¿cuál es exactamente esa fecha? Y entonces qué entregable es necesario para cada hito, ¿no? quiere saber lo que en realidad están queriendo ser entregados ya que va a ser un prototipo. Son sólo algunos diseños, ¿verdad? ¿ Algunos gráficos? ¿ Qué aspecto tiene eso? Y entonces, ¿cuántas revisiones te gustaría incluir? Ya sabes, normalmente cuando estás haciendo un proyecto va a haber múltiples revisiones y un montón de ida y vuelta obteniendo comentarios de los usuarios, obteniendo datos de los usuarios, y poder modificar y ajustar para que quieras asegurarte de que entiendes ¿qué les parece eso para que les des exactamente lo que quieren, verdad? Y entonces, ¿qué es un presupuesto para este proyecto en particular, no? Bastante simple ahí. Y entonces quién tomará parte en una discusión o quién va a estar en el equipo, ¿verdad? Si estás trabajando en un entorno basado en equipos, quieres poder colaborar con el tipo adecuado de personas y asegurarte de que no estás sobrepasando los límites de alguien y entender tu rol en todo este proyecto, ¿verdad? Y luego la comunicación, ¿cómo les gusta ser comunicados? Prefieren sólo trabajar a través de la plataforma si estás haciendo como freelance o les gusta usar Slack, eso actuará para usar Facebook, sea lo que sea, ¿verdad? En cuanto a un método de comunicación, quieres poder entender cómo se ve eso y por qué es importante para ellos y después ¿quién aprueba un proyecto? ¿ Va a ser la persona con la que estás trabajando? Es alguien más arriba, ¿verdad? Se quiere poder entender aquí estas preguntas importantes. Y luego estas son algunas preguntas de muestra aquí de Mike Montero. Creo que su nombre es de Mule Design. Entonces aquí están algunas de sus preguntas específicas aquí que suele hacer. Donde tiene aquí, el, ¿cuáles son los requisitos de negocio que deben cumplirse? ¿ Cómo se podrían atender mejor las necesidades del usuario? ¿ Quiénes son tus audiencias y qué quieres hacer con ellas? Ya sabes, lo creas o no, a muchos negocios diferentes les costará mucho poder explicar en un proceso específico o declaración muy detallado quién es su público real, qué aspecto tiene. Son avatar real. Entonces eso va a ser parte de tu investigación y análisis, ¿verdad? Entender quién es el público real, quiénes son los usuarios, ¿cuáles son los demográficos? Qué no les gusta y poder crear una persona de usuario real a partir de esa información. Y entonces quién mantendrá el sitio después de lanzamientos? O, ya sabes, lo mismo para como una aplicación. Y entonces cómo medirá el éxito? Esto es crucial aquí. Esta es una pregunta muy importante. ¿ Cómo medirá el éxito? ¿ Cómo supiste que después de que diseñamos esto o construimos esto o creamos esto, que en realidad es exitoso y que en realidad se ha conseguido, ya sabes, buenos resultados. Por lo que hay que poder entender cuáles son esas métricas y cuáles son los KPI también. Para que puedas entender y ver cómo se ven los exitosos para ellos. Y entonces cuáles son los riesgos del proyecto donde ven, ya sabes, cuanto a cualquier tipo de cambio o riesgo potencial que puedan enfrentar. Y luego después de lanzar el nuevo sitio o aplicación, ¿qué cambiará para su organización? Will, cambiará para tus usuarios, ¿verdad? ¿ Va a ser una experiencia completamente diferente a la que no están acostumbrados, tal vez va a llevar algún acostumbrarse a lo exactamente va a cambiar para que puedas entenderlos desde su perspectiva real de Organización de Benin y luego también desde el punto de vista del cliente también. De acuerdo, entonces ahora echemos un vistazo a algunas preguntas que nos gustaría estar haciendo cuando estamos haciendo un rediseño completo. Entonces esto es algo donde hay una marca ya son derechos existentes. Ya tienen un sitio web, tal vez tienen una aplicación, y quieren hacer un reacondicionamiento completo o cambiar su logotipo o cambiar el sitio web real, sea lo que sea, correcto, pero es un rediseño. No es necesariamente algo desde cero. A veces puede ser algo desde cero, pero en su mayor parte, es solo un rediseño, ¿verdad? ¿ Por qué estás rediseñando el sitio? ¿ Qué hace el sitio actual? Bueno, ¿dónde le falta? ¿ A qué retos has enfrentado en su trabajo anterior con socios de diseño, verdad? Entonces quieres ver por qué están rediseñando el sitio. Eso es importante. Es porque simplemente falta en unas áreas particulares hasta donde la experiencia del usuario, o es solo una mala interfaz, ya sabes, cualquiera que sea esa, quieres entender por qué en realidad buscan hacer un rediseño, ¿verdad? Y tal vez algo desde arriba que solo quieren conseguir todo el sitio web y empezar de nuevo, ¿verdad? Y entonces qué hace el sitio actual? Bueno, ¿cuáles son las cosas que actualmente hacen bien, que podamos buscar implementar y mantener algunas de las que están funcionando bien. Y entonces podemos arreglar esas zonas donde falta, ¿verdad? Y entonces esto es algo donde realmente quieres poder mirar hacia arriba y poner atención a estas respuestas, ¿verdad? Porque te vas a decir por qué lo están haciendo, por qué es importante para ellos, y cuáles son algunas de las cosas que puedes implementar en este nuevo diseño, ¿verdad? Y luego la tercera pregunta particular aquí, esto es más para entender cómo los electos trabajar con diferentes socios en algunas de las cosas que enfrentan previamente, que puedas diferenciarte en cuanto a por qué estarías una mejor pareja, ¿verdad? Y luego finalmente, tenemos aquí la autodisciplina y en realidad poder hacer el trabajo justo después de que hayas conseguido un cliente, tienes algunos proyectos ¿estás trabajando? Se quiere poder realmente entregar y cumplir. Y así algunas de las cosas que consideran aquí, en realidad estás haciendo tu trabajo y realmente estás creando tus diseños es tener como brain dot fm o algún tipo de música en el fondo que te permite enfocarte y estudia y mantén tu atención en lo que necesitas estar haciendo, ¿verdad? Puedes usar como un rastreador de tiempo, como un temporizador de tomate. Puedes usar la meditación para ayudarte a relajarte y calmar las cosas. Puedes hacer algo de meditación antes de empezar a trabajar para poder calmarte y meterte en ese estado de solo enfoque. Y en lo que respecta a las aplicaciones de programación, vas a poder ponerte eso y la noción con la madera que se proporciona en este curso. Por lo que realmente quieres entender que una vez que consigues al cliente y obtienes los proyectos, necesitas ir a trabajar. Y quieres poder trabajar lo más efectivo posible con distracciones mínimas realmente no son distracciones en absoluto. Y poder tener algo de música en segundo plano mientras estás trabajando, tal vez tener algún tipo de temporizador realmente te ayude. Y así que eso va a estar aquí para las preguntas del proyecto UX UI y nos vemos en la siguiente. 97. Enfoco láser y herramientas de productividad: De acuerdo, entonces en este video, te voy a guiar a través de algunas herramientas de productividad que puedes usar para ayudar a incrementar tu enfoque para asegurarte de que no te estés distrayendo, yendo a YouTube, navegando por la web, y no haciendo lo que no necesitas hacer. Y realmente sólo enfocándonos en lo que se supone que están haciendo, lo que es hacer el trabajo, ¿verdad? Y entonces lo que esto te permite hacer es seleccionar diferente tipo de música de enfoque que puedas escuchar que te ayudará a aumentar tu enfoque, tu productividad, y minimizar tus distracciones. Entonces déjame mostrarte aquí cómo se ve esto por dentro. O sea, utilizo todos los días, extremadamente poderoso. Por lo que tienes aquí diferentes bloques de tiempo. Tienes cuadra de 30 minutos cuando nuestra cuadra a nuestra cuadra, ¿verdad? Y si te escuchan una de estas tocar y no te gusta cómo suena, Puedes seguir adelante y saltarte eso, ¿de acuerdo? O puedes subir aquí y puedes ir a más música. Para que puedas ir con enfoque lo-fi, enfoque clásico. Puedes ir a la relajación, a dormir. Obviamente no quieres a estos dos aquí a menos que estés queriendo relajarte. No obstante, esta herramienta va a ser mayormente para enfocar, ok? Y así realmente lo que haría es cuando estás tratando de hacer algo, ponerte algo de música enfocada aquí, yo diría que por bloque de dos horas y ponerte a trabajar. Y esto está científicamente probado para realmente ayudarte a aumentar tu enfoque. Entonces no es sólo la gente diciendo: Oye, escucha esta música y vas a ser diez veces más productivo. Te mete en el estado de ánimo donde estás en flujo y estás completamente relajado. Estás enfocado en lo que necesitas hacer y no hay distracciones. Y así recomiendo altamente esta herramienta para que puedas incrementar tu enfoque, ¿verdad? Aumenta tu productividad y ten bloques de tiempo específicos de, digamos dos horas. O si tal vez quieres ir duro en la pintura y quieres poner esto en un limitado Bueno, puedes ir a trabajar por, ya sabes, cuatro o 56 horas. Eso no lo recomendaría. No obstante, esta herramienta aquí es sumamente importante. Por lo que te recomiendo encarecidamente que recojas esto. Creo que son alrededor de cinco a $10 al mes. No obstante, como dije, quiero decir, valdrá totalmente la pena con tu aumento de productividad y tu incremento de enfoque, ¿de acuerdo? Y así lo siguiente que quiero compartir con ustedes aquí es el método Idealmente, ¿de acuerdo? Y esto es más una rutina diaria. Y lo que esto es aquí es que te da un conjunto de pasos para hacer cada noche. Entonces básicamente al final de cada jornada laboral, quieres apuntar las seis cosas más importantes que necesitas lograr mañana, al día siguiente. Ahora bien, aquí es importante que no escribas más de seis porque se puede conseguir bastante abrumador. Y así entonces quieres priorizar esos seis elementos con el fin de ya sea Verdadero y puertos. Y entonces, ¿qué es lo que necesitas hacer primero? Y luego, ya sabes, número esos del uno al seis. Y luego cuando te levantas por la mañana o cuando comienzas tu día, ¿verdad? Quieres enfocarte en esa primera tarea y trabajar en ella hasta que en realidad esté completamente terminada antes de pasar a la siguiente, ¿verdad? Y así quieres acercarte el resto de tu día de esa manera, bien, donde estás haciendo tu primera tarea, estás haciendo lo que tengas que hacer para terminarlas, y luego estás pasando a la siguiente. Entonces esto es enorme aquí. Entonces todas las noches cuando te vayas a la cama o antes de irte a la cama, anota las seis cosas que necesitas hacer al día siguiente, y luego prioríalas en, ya sabes, hasta lo más importante a lo menos importante, ¿verdad? Y haz esto todos los días para que sepas lo que necesitas hacer al día siguiente, ¿verdad? Planificar para mañana. Hoy, bien, muy, muy poderoso. Y luego lo siguiente que te recomiendo que hagas es instalar el feed de noticias erradicado para tu perfil de Facebook, ¿de acuerdo? Porque esto va a limitar tus distracciones. Entonces si ven aquí en la mía, tengo esto instalado aquí, lo que significa que no puedo ver ningún anuncio. Y así me limita de ir a Facebook en mi computadora. Sí, así que tenlo en mi teléfono. No obstante, otra cosa que hago con mi teléfono es que lo escondo, que es otra cosa que recomiendo. Si estás trabajando y estás tratando de hacer las cosas, estás escuchando brain dot fm, consigue tu teléfono y lo escondes en algún lugar, o lo pones en algún tipo de alacena y algún tipo de sorteo o algún tipo de escritorio para que está lejos de ti. No es de fácil acceso, ¿verdad? Todo lo que tienes que hacer es ponerlo en la extensión de Chrome aquí, instalarlo aquí arriba. Y así te permite bloquear todo tu feed de noticias. Muy, muy poderoso. Y entonces la otra cosa que quería compartir contigo aquí es el concepto de batching, ¿de acuerdo? Aquí es donde esencialmente estás bloqueando a un gay o cierto conjunto nuestro donde te dedicas a solo trabajar en lo que necesitas hacer. Y así por ejemplo, aquí, para mí mismo, creo videos de YouTube y trato de publicarlos, ya sabes, tres o cuatro o cinco veces a la semana. Ahora bien, no creo mis videos. En el día de wright. En realidad por lotes graba mis videos todos en un solo día. Entonces el sábado, lo que haré es bloquear todo el día para sólo grabar videos de YouTube. Y nuestro récord cinco o seis videos son ese. Entonces a lo largo de la semana los puedo tropezar, ¿verdad? Y entonces lo que me permite hacer es en lugar de tener el trabajo, reenfocar el trabajo, reenfocar el trabajo, ¿no? Reenfocar el trabajo. En lugar de pasar por todo ese proceso, ahora puedo simplemente bloquear un día, conseguir que todo derribado a la vez, y después poder tener tiempo libre para hacer lo que yo quiera. Entonces piensa en cómo puedes usar esto a tu favor. Cómo puedes bloquear el tiempo o incluso días donde solo te enfocas en una cosa y eres capaz de noquear eso y ejecutar en otras tareas. Entonces eso va a ser aquí para las herramientas de productividad, y nos vemos en la siguiente. 98. Lugares para encontrar trabajos de UX: En este video, vamos a repasar los mejores lugares para encontrar trabajo de UX y UI. Entonces esto va a ser aquí una lista de varios recursos diferentes que puedes usar para encontrar un Java real. Eso es lo que estás buscando. No necesariamente vas por la ruta de la consultoría de clientes o el trabajo independiente. Se desea comenzar a trabajar en equipo y en un negocio en una empresa en particular que tenga buen historial que sea capaz de brindarle un trabajo estable y estable. Y así sigamos adelante y saltemos a los mejores lugares para encontrar empleo. Por lo que el primer lugar recomendado aquí va a ser glassdoor.com. Esta va a ser una fuente fantástica aquí porque en realidad puedes mirar diferentes trabajos por su salario. Se pueden mirar diferentes posiciones. Se puede ver cuáles son algunas de las tendencias en cuanto esa posición en particular o incluso posiciones de nivel de entrada, ¿verdad? Mucha configuración de perfil diferente. Se pueden ver diferentes trabajos. Tienen un fantástico filtro de búsqueda de empleo y es muy fácil aplicar a los diferentes puestos. Se pueden ver las opiniones de la empresa. Esto es fantástico porque te da una visión general del tipo de entorno en el lugar de trabajo que puedes esperar trabajar, que puedes esperar ver en esa empresa, ¿verdad? Dándote una muy buena idea de la cultura de esa empresa para que no vayas a entrar en una cultura donde acompañar tipo de ambiente que puede no tener el mejor tipo de ambiente para ti, sobre todo si apenas estás empezando y estás a estrenar. Y esta es la herramienta que está disponible en muchos países. Por lo tanto, independientemente de dónde te encuentres, deberías poder usar glassdoor.com. Y te muestra el salario real por puesto. Para que puedas mirar, de acuerdo. ¿ Qué aspecto tiene esta posición aquí mismo en cuanto a los requisitos, la descripción, cuáles son las tasas salariales reales o podrás ver todo eso justo en la página real. Entonces el siguiente aquí va a ser simplemente Hired.com. Esto es similar a la Puerta de Vidrio. No obstante, no tienes tantas características. No tienes como calificación de empresa, opiniones de empresas. Esto es más bien como una mesa de trabajo real aquí, sitio web de empleo donde estás mirando diferentes filtros de búsqueda, donde tienes diferentes posiciones, diferentes empleos, y puedes usar el filtro de búsqueda ahí para pasar por esos puestos. Y en su mayor parte, sí tienen el salario real. No obstante, a veces no tienen salario. Y una de las cosas que tienen en cuenta es que esto solo está basado en Estados Unidos, ¿de acuerdo? Por lo que si estás en otras partes del país, no podrás usar Simply Hired.com. Y el siguiente aquí es indeed.com. Este es otro gran recurso también. Mucha configuración de perfil diferente, filtro de búsqueda de empleo detallado, fácilmente capaz de aplicar. Esto va a estar basado en Estados Unidos, y así hay que tenerlo en cuenta. No obstante, normalmente te muestra los salarios reales de cada puesto. Y luego tenemos el angel.com. Este va a ser uno de los mejores lugares para que vengas aquí y busques trabajos en startups. Porque no sólo podrás obtener experiencia en un amplio abanico de diferentes áreas, ¿verdad? Pero también podrás obtener algo de capital en estas empresas y poder hacer potencialmente una cantidad significativa cuando esa empresa realmente se venda o cuando esa empresa salga. Tanto así que una gran oportunidad para que empieces como alguien cuyo flamante, apenas de empezar tiene algo de experiencia. Habías pasado por este entrenamiento. Has pasado por los ejercicios, has creado un logotipo, has creado un sitio web, todas estas cosas diferentes que has podido hacer. Esta va a ser una gran experiencia para que puedas entrar aquí, buscar una start-up que necesite algún tipo de diseñador, alguien en el departamento de marketing. Y puedes entrar aquí y poder obtener potencialmente una participación de capital en la empresa, además de poder trabajar con una amplia gama de individuos diferentes y también hacer muchas cosas diferentes dentro de la organización. Y entonces el último aquí que no figura en la lista, que debería ser bastante común en ya conocido, es Linkedin.com. Eso probablemente va a ser un año los mejores lugares para ir y realmente encontrar puestos porque Va a haber casi todas las empresas del mundo que están en LinkedIn en el espacio profesional, ¿no? Y por lo que muchas veces no tienen todos los empleos publicados ahí también. En ocasiones no tendrán los trabajos en LinkedIn y luego tendrán como, digamos puerta de cristal, aunque tengan Amman como Simply Hired o otra plataforma diferente. Por lo que para el LinkedIn, se asegura de que seas capaz de entrar ahí y mirar diferentes empresas, salir y mirar diferentes revisiones antes de que realmente estés enviando solicitudes para que te encuentres con la empresa que tiene un buena reputación. Entonces eso va a estar aquí por los mejores lugares para encontrar empleo. Y nos vemos en el siguiente.