Creativa UX/UI Diseño con Figma

1. Introducción a la clase: Hola, chicos. Mi nombre es Ran Siblhh, soy diseñador XI, artista conceptual, coder creativo y diseñador gráfico, y muchas otras Tengo 20 años de experiencia trabajando en el campo con muchos clientes. Creé esta clase, el creativo UHI Design Master con FIGMA para ayudarte a transformar tus ideas de diseño en digitales fáciles En este curso integral, iremos más allá de lo básico que te guiará a través todo el proceso de diseño desde concepto inicial hasta un PolgptoType Dominarás Figma, la herramienta líder en la industria, ya que cubrimos escritos creativos, investigaciones en profundidad, análisis de competidores, mood board, estrategia de contenido y Luego te sumergirás habilidades prácticas como encuadre de alambre, diseño de maquetación, trabajo con tipografía Bloqueo de contenido e incluso diseño de movimiento listo e interacción. Aprenda a recibir comentarios de manera efectiva y presentar con confianza en su trabajo y cree guía de estilo robusta para una consistencia profesional Para mejorar aún más tu aprendizaje, te proporcionaré archivos HTML detallados equipados para este curso para ayudarte a obtener la mayor información que puedas tener, junto con los cuestionarios para poner a prueba tus conocimientos en cada paso del Prepárate para desbloquear tu potencial creativo y construir un diseño que realmente destaque. 2. Lo que me influye: A Para el diseñador, reconocer la importancia de la influencia se extiende más allá sus propias creaciones para abarcar el vasto paisaje de diseños existentes. Observar y analizar el trabajo de otros, no se trata de replicación, sino de discernir el principio influyente subyacente que hace que esos diseños sean efectivos o efectivos Al deconstruir una interfaz exitosa, un diseñador puede identificar las señales sutiles Patrones intuitivos y técnicas persuasivas que guían el comportamiento del usuario, permitiéndoles interiorizar esta visión y aplicarla a sus propios Los diseñadores críticos y menos efectivos revelan trampas en áreas donde la influencia ha sido mal aplicada aprendizaje discontinuo de la conciencia colectiva del diseño alberga la capacidad del diseñador para ejercer influencia intencional y éticamente, finalmente conduce a más impactante y Echemos un vistazo a algunos de mis influencers. El portafolio de Colin Moy es un gran ejemplo para ver. Es especial debido a su interfaz de usuario Ux altamente interactiva y atractiva. Una característica destacada es el uso creativo de ojos que deletrea su nombre en la sección de héroes Estos ojos no son sólo una sorpresa visual sino que también sirven para un propósito funcional. Haz clic en ellos, activa en modo claro y oscuro, Tuggle, y activa la animación donde los ojos siguen al visitante Sutilmente invitando a una mayor exploración del sitio. Esta estrategia inteligente combinada con un estilo de play pool consistente, donde O está en la navegación como sobre cartera y el contacto se puede hacer clicar para revelar más información, contribuir a una experiencia de usuario única y memorable que mantenga a los visitantes comprometidos y los anime a profundizar en su trabajo Otro sitio de Justin Solly el diseño destacan por su excepcional interactividad, dinámica mezcla visual de estética, que se han ganado sus reconocimientos como sitio del mes y sitio de premios del El sitio cuenta con animación interactiva cautivadora , un encabezado interactivo y WebGL, interacción con el mouse que crean altamente atractiva e inmersiva La interacción dinámica del elemento mantiene al usuario activamente involucrado Utiliza el menú Brutal Style con el toque lúdico cuando se cierne sobre él. Este menú revela resúmenes de proyectos, acompañados del distintivo efecto de pantalla de retraso de Windows, agregando un elemento memorable e interactivo a la navegación El diseño incorpora una evolución continua de la tipografía de color y la animación, lo que lleva a una experiencia, gusto por jugar en un Esto se ve mejorado aún más por transición de página única y los estudios de casos horizontales que ofrecen un nuevo enfoque para la visualización de contenido. Otro sitio también por Carlos Carr el sitio está construido con un enfoque en el contenido dinámico y el sistema de diseño, mostrando una comprensión avanzada de cómo las experiencias digitales pueden adaptarse y Esto sugiere un enfoque de corte y borde para el desarrollo y diseño web. Rompiendo con las estructuras tradicionales de cartera, el sitio web actúa como un archivo interactivo donde cada pieza de trabajo es tratada como una entidad separada en lugar de ser agrupada temáticamente La navegación se maneja de manera única a través de la barra de búsqueda y etiquetas específicas, que redefinen fundamentalmente cómo el usuario interactúa con cartera al voltear la navegación habitual en su El uso de plataformas como Webflow y spline indica fuertes intersas y sofisticado diseño gráfico y sofisticado diseño gráfico y Esta combinación probablemente resulte en una experiencia visual rica y altamente atractiva para los visitantes. Otro sitio interesante de la agencia Milly, el diseño del sitio web se considera especial debido a su experiencia de usuario altamente interactiva y única, que ha cosechado reconocimientos como Awards Mobile Excellence Y cuentan como uno de los flujos web diez portafolios estándar El sitio ofrece una experiencia distintiva y atractiva, resaltada por un modo de rayos X y un extenso código personalizado. Este elemento contribuye a una interacción dinámica y memorable para los visitantes. Acordes desde plataformas como palabras subrayan el alto calibre de su diseño y desarrollo, señalizando UXI innovador e impactante El diseño incorpora diseños interesantes y sutiles detalles personalizados a lo largo de esto indican un enfoque meticuloso y creativo que va más allá de la estructura convencional del sitio web Este es uno de mi sitio favorito, que llamó copos. Es muy aclamado y considerado especial debido a su innovadora mezcla de minimalismo y maximalismo, interactividad excepcional y sofisticada ejecución técnica y Ha recibido múltiples premios y largometrajes de prestigiosa plataforma de diseño, incluyendo premios. El sitio equilibra magistralmente una base minimalista con los elementos maximalistas Utiliza una fuente variable de animación grande, una paleta de colores vibrante pero poco convencional y luego para recrear detalles esa experiencia visual rápida y rica sin Cuenta con una extensa animación basada en desplazamiento, complejo elemento tres D, que incluye un desafiante logotipo de tres D y transición suave impulsada por tecnologías modernas como nm dot Gs, Vlt y web DO Las interacciones subt, como la transformación del cursor en una fuente de luz en un escritorio mejoran aún más la participación del usuario Rompiendo con los menús convencionales de varias páginas, play.com ofrece un viaje perfecto de una sola página Los proyectos se muestran a través del screencast de Concess, lo que permite a los visitantes captar rápidamente la obra sin sentirse abrumados por el contenido excesivo, centrándose Uno de mis dos favoritos es un píxel extraño. El sitio enfatizó mucho el uso de la animación para crear un diseño visualmente impresionante e innovador. Este enfoque en el movimiento mejora el compromiso y agrega las capas dinámicas a la experiencia del usuario. Los píxeles de trinchera emplean el uso creativo del color a menudo con esquemas de alto contraste con acentos vibrantes, como un toque de amarillo contra blanco y base negra Esto se combina con un uso estratégico de gran tipografía audaz para hacer una declaración fuerte y mejorar la identidad visual El diseño a menudo logra un equilibrio entre el minimalismo y el impacto Se encuentra en líneas limpias, diseños fracturados y una paleta de colores limitada para lograr el máximo efecto Los píxeles franceses se centran en cractar experiencia digital que va más allá de la funcionalidad meri, aven para provocar lanzamiento y emoción en cada proyecto Su portofoo muestra diversos trabajos incluyendo web ap y diseño de comercio electrónico El diseño del cursor es uno de mis mejores elementos de este sitio web. Hace que la interactividad muy hermosa y muy atractiva Este elemento contribuye colectivamente a la repetición de píxeles extraños para crear un borde recortado y un diseño web memorable. Nuestro último en la lista es Dennis Snellenberg. Dennis ha recibido múltiples reconocimientos de premios, entre ellos Rona Bal mencionado y sitio del Día Este reconocimiento subraya la alta calidad, innovación e impacto del diseño y desarrollo de este sitio web Sus diseños son notables por su sutil pero sofisticada animación necro, transiciones suaves y atractivo elemento interactivo Estos detalles contribuyen significativamente a una experiencia de usuario pulida e inmersiva haciendo que el sitio se sienta dinámico y receptivo Como diseñador y desarrollador freelance, Dennis Kraft sitio web escalable desde cero que encaja perfectamente con el diseño Este enfoque holístico asegura que la funcionalidad y la estética estén perfectamente integradas, dando como resultado un alto proyecto efectivo y excelente. Su dominio en herramientas modernas de desarrollo web como Webflow, HRB CMS biblioteca de animación como Framer motion y gSap le permite abandonar experiencia visualmente rica y altamente interactiva que empuja En esencia, el sitio web de Dennis es especial porque encarna una fusión armonizada de habilidades estéticas, brillantes y técnicas y un profundo conocimiento del usuario y la producción, todo validado por el reconocimiento de usuario y la producción, todo validado Entonces como ustedes así, chicos, esta es la suma de mi influencer Siempre debes encontrar a las personas que te influyen y además tratar de actualizarte con todo lo nuevo en el campo. Esta es la manera de asegurar que estás en una página como diseñador. 3. Aprende sobre el resumen creativo: A el resumen de diseño es un documento importante para nuestro proceso. Ya que con ello, determinaremos cuáles son los objetivos del proyecto. Es importante recopilar tanta información por parte del cliente ya que esta información, nos ayudará a definir el objetivo de nuestra oportunidad de diseño de producto, y cuáles son los riesgos que podemos tener en nuestro diseño Para nuestro proyecto, vamos a crear una marca TikOCDEN. Vamos a leer muy bien el brief que obtenemos del cliente y entenderemos todo lo necesario que quiera para su diseño. Como viste toda la información aquí, como la esencia de la marca, los objetivos crean un sitio web inmersivo visual strike que embdedtKubnds Como ves también el público objetivo, la dirección del diseño, la paleta de colores, la tipografía, todos los elementos que necesitamos para el diseño de nuestro sitio web Este es otro tipo de brief creativo que yo mismo creé. Este es tu propio brief creativo que puedes enviar a tu cliente para representarte a ti mismo o a tu trabajo. No es necesario hacer esto, pero es algo que deben considerar. Como viste, tenemos antleducción, un ejemplo de pregunta como ¿por qué El proceso de diseño del sitio web, lo que hacemos ejemplo, como entender la marca, el concepto, la revisión y la revisión, lo que nuestros clientes tienen que decir si ya tienes comentarios de clientes de tu trabajo anterior, el precio de cada uno de tus trabajos. Este es otro breve creativo que creé yo mismo también con el archivo HTML. Se puede ver, es más detalle. Cuenta con todos los elementos necesarios para que un breve creativo lo entienda. El sitio web va, el público objetivo, la identidad de la marca, el requisito de contenido, la especificación técnica, tiempo y entregable Ves toda la pregunta necesaria se puede hacer. Si recibió un brief de su cliente y no tiene alguna pregunta que necesite ser respondida, puede crear otro brief de usted y se lo envía al cliente toda la pregunta y la información que necesita más para recopilar de él. ¿Cuál es el propósito principal del sitio web de tu marca de ropa? ¿Cuáles son los tres principales competidores en su mercado? ¿Qué hace que tu marca de ropa sea única de la competencia? ¿Quién es tu público objetivo principal, edad, sexo, interés y nivel de ingresos? Aquí es donde va a rellenar. Como viste, acabo de crear archivo HTML, pero este debería ser un archivo PDF para que el cliente lo llene. Requisito de contenido aquí, la necesidad de integración es. Solo mandas la pregunta que no recibiste en el brief creativo de tu cliente. No preguntes las mismas respuestas que ya te entregó. Después de leer el brief, siempre debes alinearte con el objetivo del cliente. Entonces te mantienes en comunicación con el cliente enviando conceptos y tomando sus propios comentarios. En definitiva, el breve es la forma de hacer la pregunta correcta. Primero debemos entender quiénes somos como diseñadores y quién es nuestro cliente. Somos diseñadores para el usuario o estamos diseñando para nosotros mismos. Esta es una pregunta importante que debes hacerte en cada proyecto. Una vez que hayamos entendido quiénes somos como diseñadores, para este proyecto, debemos saber que el cliente nos está buscando para cumplir metas y objetivos. Estos objetivos pueden ser vender un producto, crecer en tu negocio, contratar a un nuevo personal, darte a conocer o explicar tus servicios. E incluso pueden ser todos estos en el mismo sitio web informativo. Por lo que nuestro objetivo como diseñador es lograr estos objetivos, y para ello, debemos alinearnos con la marca, con sus valores, y su forma de comunicar. Volvamos al resumen. El escrito es un documento que obtendrá información de los clientes. Esta información se utilizará para entender el proyecto, la marca para la que estamos trabajando, el sector en el que se encuentra la marca y los productos relacionados con el proyecto. Estas son algunas de las preguntas que podemos hacer en el breve. ¿Qué esperas lograr con el sitio web? ¿Cuál es la historia detrás de la marca? ¿Cuál es tu diferencial? ¿Cuál es su posición en el mercado? ¿Hay o no limitación en términos de presupuesto y tiempo? ¿Cuál es tu público objetivo? Eso ya lo vimos. ¿Cuáles son sus servidores y productos? La respuesta a nuestra pregunta que puede venir de otra manera. Podemos obtenerlos a través de una reunión, una videollamada, un documento escrito, o incluso en el propio manual de marca. Puede haber respuestas a nuestras preguntas. Debemos saber que no todas las respuestas, van a venir de primera mano. Por eso es importante hacer la pregunta correcta. Esto nos dará una información relevante para nuestro producto. Alguna recomendación a tener en cuenta, cuando hagamos una breve fase y queramos obtener la mejor respuesta de los clientes, la pregunta que hacemos nos puede ofrecer diferentes posibilidades creativas. Cuando preguntamos lo que realmente esperamos es ampliar el campo de acción de nuestro proyecto No queremos limitarlo. No tengas miedo de hacer toda la pregunta que nos damos valiosa información para construir nuestro producto. Estas son algunas preguntas que también puedes generar para recibir más información de tu cliente. ¿Qué los inspiró? Si la marca fuera una persona, ¿cómo se comportaría? ¿Tienen un estilo que los identifique? Esta es nuestra primera fase para iniciar nuestro producto. Es importante leer muy bien el brief creativo, tomar los elementos clave y todas las cosas que te alineen con el objetivo de tu cliente. 4. Aprender sobre investigación y competencia: Yo el proceso de investigación y descubrimiento es fundamental para crear un proyecto exitoso, ya que nos da mucha información sobre el sector en el que vamos a desarrollar el proyecto. Además de mostrarnos oportunidades creativas, el riesgo es que el proyecto pueda tener entre otras cosas. Siento que este es uno de los procesos más importantes que hago como diseñadora. Veamos un poco más en detalle. En este paso, realizamos nuestro propio proceso de investigación para encontrar información relevante, oportunidad y riesgos que pueda tener el proyecto Es importante alinearnos con el cliente en este proceso para asegurarnos de que entendemos el proyecto de la misma manera, el objetivo a cumplir para nosotros como diseño, crear un sitio web informativo de una marca TCO donde la gente pueda explorar fina colección de ropa de una manera amigable e interesante Oportunidad de diseño. Exploraremos diferentes efectos en las imágenes para crear una experiencia más interactiva. Queremos introducir interesante manera de filtrar el proyecto también que son diferentes a la categoría tradicional. Recomendación tecnológica, debemos contar un gestor de contenidos, optimización de imágenes, un sitio web optimizado para dispositivos móviles, animación y transiciones que están diseñadas para dispositivos móviles. Consideraciones de marca. Gran parte de la propuesta gráfica del sitio web se basará en la imagen que ha creado el portafolio. Por otro lado, tenemos retos para comunicar los aspectos de la marca. Observación sobre el usuario. Se trata de jóvenes con acceso a Internet de alta velocidad para navegar por el sitio. Gran parte del tráfico que llegará a la página, será a través de Instagram. Es por ello que más del 50% de los usuarios verán la versión móvil del sitio web. Las personas que van a visitar el sitio son personas con sensibilidad al diseño, y por eso cuidaremos mucho los detalles de la página. El proyecto también puede tener riesgos a considerar. En este caso, las navegaciones y la funcionalidad básica de la página, pueden ser difíciles de usar Alta carga visual al número de imágenes, falta de información sobre el sitio del proyecto una vez que el sitio web ya está en vivo. ¿Cuál es la función del mapa de navegación? Definir la sección final que conformará el sitio web. Entender los flujos de navegación entre la sección que conforman el sitio. Entender el tipo de contenido que cada sección puede contener. Al principio, necesitamos echar un vistazo a algunos de otros competidores que tienen un gran diseño de sitios web. Como puedes ver aquí, igual que este sitio web de Gucci, está muy cargado de imágenes, muy buenas calidades La experiencia es tan simple y minimalista. Uno también de los sitios web importantes a considerar es Zara. El sitio también es muy sencillo. Es fácil de navegar y es fácil de entender. Se ve la estructura del sitio donde se puede encontrar toda la información necesaria. Un paso importante que siempre hago también es echar un vistazo a las reseñas de cada sitio que uso. Aquí puedes conocer los pros y los contras de este sitio web. Leí bien las críticas negativas de la gente para entender qué errores no debo cometer en el diseño de mi sitio web. En mi proceso, esto es muy importante para echarle un vistazo y estudiarlo muy bien. Leí todo el mal comentario y el buen comentario y entiendo cuál es la debilidad de ese sitio. Como ves aquí, en un medio, podemos leer un estudio de caso del sitio web de Zara, cómo el diseño estético, cómo puede influir en la intención de compra. Como pueden ver aquí, tengo un PDF muy detallado sobre el sitio web. Como se puede ver el tamaño thesise en estilo vía sitio el riesgo de velocidad es Por lo que siempre debes encontrar un equilibrio entre estos tanto el impacto del sacrificio usabilidad y accesibilidad para el diseño. Esto es muy importante, como dijimos antes, que el sitio tenga un gran diseño, pero también muy fácil de navegar y muy fácil de leer. Los obstáculos de navegación interrumpen el flujo estándar de comercio electrónico, la funcionalidad de búsqueda efectiva erosiona Las opiniones de los clientes que faltan, disminuyen la confianza e interrumpen el viaje de compras Entonces esto es algo que puedes considerar. Si tu sitio es ecommerce, será muy efectivo poner una sección para las revisiones de tu cliente. Aquí tengo un archivo HTML que creé para que entiendas más elemento de soporte y mejora de tu sitio web. Aquí podrás entender todas las cosas que siempre debes considerar para hacer un gran sitio web. Los esquemas de color, la tipografía, las imágenes y gráficos, las pautas tipográficas, la accesibilidad, el ejemplo de contraste de color. Las secciones de seguridad y mantenimiento, la sección no es para ti como diseñador, sino para el desarrollador. Puedes leer toda esta información aquí para entender más sobre el diseño del sitio web y cómo debe ser efectivo. Habitamos cada uno de estos elementos y lo entendemos muy bien. Cada paso que das antes de comenzar en tu diseño, te da una hoja de ruta y te facilita mucho tu trabajo Por último, esta vez de las herramientas que recomiendo utilizar para el mapa de navegación, Mero Whimsico y Tig Es importante entender que mapa de navegación es el punto de partida para organizar nuestro proyecto. Vamos a ver más en la siguiente lección. 5. Recopilación de referencias para el panel de inspiración: En esta lista, hablaremos de búsqueda inspiración y referencias para nuestro proyecto Este es un paso muy importante antes de comenzar que nos permitirá buscar diferentes ideas para que nuestro proyecto sea más interesante. La inspiración puede venir de cualquier parte, pero con un proceso claro, será mucho más fácil encontrar idea interesante que podamos usar más adelante en nuestro producto. En este proceso de diseño, nos aseguramos de crear el mood board donde reunimos todas las referencias e inspiración que encontramos para más otros proyectos en la web, en los libros o incluso en la exposición de arte. De esta manera, nos aseguramos de crear algo que comunique lo que queremos y que destaque de otros privados. Para iniciar la búsqueda de referencias, nos gustará comenzar a buscar proyectos o empresas que se encuentren en la misma categoría que nuestro cliente. Por ejemplo, si nuestro cliente es una empresa que produce vidrios, podemos buscar compañía similar en la región. Empresas que sean competidoras directas de nuestros clientes o empresas en otros lugares que caigan en la misma categoría De esta manera, nos aseguramos de saber qué ideas interesantes hay en la categoría, cómo se comunican otras empresas y qué debemos evitar. Para asegurarnos creamos un proyecto que destaque del resto. Después de esto, podemos ampliar nuestra búsqueda a categorías similares a nuestro proyecto. Por ejemplo, la marca Tiko va a ser un sitio web. El uso de imágenes será muy relevante. Por lo tanto, podremos buscar un proyecto donde utilicen imágenes. Por ejemplo, en arquitectura, donde cada día buscamos un proyecto que nos interese. Entonces tal vez mirando un proyecto de otra categoría o industrias. Busquemos ideas. Como puedes ver aquí, este sitio web llamado Word. Puedes encontrar luz de ejemplos por los que puedes pasar y encontrar muchas ideas. Este es uno de los sitios que utilizan imágenes para su propia creación. Hay muchos de ellos que puedes consultar por todas partes. Esto no está en nuestra categoría, pero me pareció importante mirarlo porque quiero conocer alguna nueva identificación creativa. Echemos un vistazo a uno de los ejemplos aquí. Como viste, este sitio web utiliza un bonito diseño de imágenes. Puede ser una idea para nuestro sitio web. Entonces voy a revisar más sobre cómo funciona y cómo navega. Como viste el sitio web es muy bonito, consulta estos sitios web para obtener algunas ideas sobre ejemplo de interactividad Aquí, el cursor interactuar es muy bonito al mostrar muchas imágenes mientras estás arrastrando. Otro estilo también a considerar es el estilo de un blanco y negro. Tiene mucho gráfico, pero sale sobre todo sobre formas geométricas y la tipografía La interactividad es algo especial que nunca antes vi Al dar clic aquí, ves que el elemento cuadrado aparece con el cursor. El estilo tipográfico y las líneas lo hacen tan especial y muy diferente de otros Esto es algo que podemos considerar para nuestro sitio web. Podemos crearlo de una manera diferente. No creo que de todos modos voy a ir con algo como estos chicos porque ni siquiera puedo hacer más diseño sobre la marca de ropa, pero con un trasfondo diferente. Por ejemplo, voy a hacer switch style urban brand, puedo considerar algo como esto. El awa.com también es un gran recurso de inspiración. Este sitio web con mucha experiencia y reconocimiento, que lleva muchos años publicando y premiando proyectos digitales. Recomiendo encarecidamente este sitio web para encontrar proyectos digitales, un poco más experimentales y que salgan de un diseño de sitio web tradicional. Otro sitio que me pareció muy importante también es Ana. No es un sitio web enfocado al diseño o un proyecto digital, ya sea que este sitio web permita a los usuarios crear dashboards y subir imágenes y enlaces sobre cualquier tema Similar a Pintors y se está volviendo muy popular hoy en día Tiene muchas categorías por las que puedes pasar y aprender pro. Al igual que este ejemplo de Ilustración general, tiene un hermoso diseño que puedes considerar en tus obras. Este sitio web piadoso, encuentra constantemente una nueva página web donde puedas buscar nuevas referencias e inspiración Porque podemos ver fácilmente nuevas ideas en movimiento y animación. Hay muchas referencias para comprobar y darte grandes ideas. Como este de aquí cuando hago clic en ejemplo, dame toda la información para el diseño del sitio web, de los elementos que utilizan en el diseño de su sitio web, como el fonk, el framework, el hosting, el estilo, y todo eso Y también, por la parte inferior, encuentras otro sitio similar. Sigue revisando aprender y recopila más información y referencias hasta que encuentres las cosas que se alineen con la idea en tu mente. Load More es muy interesante porque está enfocado en proyectos para dispositivos móviles y tiene un enfoque de diseño muy experiental Parece importante crear categorías para nuestras referencias porque de esta manera, será mucho más útil a la hora de diseñar. Por ejemplo, para nuestro proyecto, podemos dirigir la decisión que tomemos respecto a la tipografía Como pueden ver en este ejemplo aquí, voy a ir con algo así como son ser. Se veía moderno y limpio. Puedo considerar también otro tipo de tipografía. Esto tiene más formas geométricas en los bordes. El error tipográfico es muy bonito, pero no creo que no se alinee con la identidad de marca Esta es una tipografía muy bonita y limpia que puedo considerar también Aquí echamos un vistazo a algunos de los colores que podemos usar en nuestra página web. Los colores son muy interesantes. No quiero ir más de cinco colores en este sitio, y puede que vaya con algunos grados de cada color. Este color está justo aquí, el coral rojo y el bosque verde, se ve muy bonito. Ya creo que podría considerar esto para mi producto. Aquí podemos echar un vistazo a algunas de las interacciones del layout de las imágenes. Esto es muy importante y dame la idea del efecto de paralaje ya Cómo podemos filtrar el contenido que vamos a tener en nuestra página web. Podemos filtrar el contenido por color o por categoría. También encontré ideas por las que puedo ir y puede que no, todavía no estoy segura. Aquí expongo todas las referencias para el diseño de mi sitio web para verificar por categoría. Puse el error tipográfico solo, los colores, las imágenes, los gráficos, los enlaces y la interacción Todo este elemento va a funcionar como borrador de hoja de ruta para mi creación Siempre buscaré ideas aquí mismo y volveré a consultar la referencia para realzar mi imaginación. Ahora bien, esto es todo para nuestra referencia. Vemos cómo crear un mood board y cómo empezar a pensar en ideas. Sigamos en el siguiente menos. 6. Aprende sobre estrategias y arquitectura: I Estrategia y arquitectura, es la clave para entender el contenido que tenemos en nuestro sitio web. Por eso lo vamos a organizar de manera clara para que nuestros usuarios consuman de buena manera Dos disciplinas son responsables de este contenido, la estrategia de contenido y la arquitectura de la información. Por eso queremos hablar un poco de ellos. Ahora, comencemos. Para entenderlas, debemos saber que cada uno de estos temas resuelve por su parte, la estrategia de contenido. Entonces, ¿la cuestión del contenido debemos diseñar para sitio web? Un consejo a tener en cuenta para la estrategia de contenido. Como diseñador, debemos aligerar la carga del cliente tanto como podamos Esto significa un soporte y el cliente con los contenidos. Muchas veces nuestro cliente conoce muy bien nuestro producto o servicio, pero lo que sucede la mayor parte del tiempo es que no tienes tiempo para dejarlos específicamente para nosotros y tu sitio web. Es por eso que aquí como diseñador vamos a entrar y vamos a cuate el contenido para ayudarnos a comenzar y darle intracción a nuestro proyecto Vamos a crear un contenido inicial que sea marcador de posición, para que posteriormente tengamos una conversación con nuestro cliente Y podemos refinarlo junto con él. La arquitectura de la información resolvió la pregunta, ¿cómo debemos estructurar el contenido del sitio web? Para comenzar con la fase de estrategia de contenido, arquitectura de la información, debemos entender muy bien nuestro proyecto. Por eso hemos hecho una fase de descubrimiento de investigación. Esta fase nos ha dado todas las herramientas para entender el propósito y estructurar nuestro proyecto correctamente. Ahora que hemos entendido nuestro proyecto, ahora es el momento de comenzar a proponer nuestro contenido. Podemos hacerlo de dos maneras. Podemos discutir una posible lista. Entonces imaginamos lo que puede contener el sitio web. Para comenzar, tenemos un ejemplo de lo que nuestro sitio web puede contener como opción. Puede tener casa sobre look book, tienda y tarjeta. Esto es si es ecommerce. Pero para nuestro sitio web, solo necesitamos considerar casa sobre contacto y soporte M. Para empezar, voy a abrir la mente aquí mismo. Voy a crear una arquitectura para mi sitio web. El elemento que mi sitio web puede necesitar es el hogar, contacto, Look Book y soporte. Agrego otro tema tal vez tienda para el hogar necesita filtros. Diapositiva inversa síguenos otro tema para el contacto, el correo y el número. Voy a agregar otro que es sobre nosotros, y va a tener dos subtemas, que son charlas de equipo y publicación También puedo agregar servicios. Todo este elemento puede estar en una de cada opción. Ejemplo de agente de IA para soporte y soporte telefónico. Esta tienda cuenta con piezas de colección, los métodos de pago seguro, y el precio. También puede tener medidas Ahora para el libro, debería tener maquetación. Debería tener colección, y también imágenes, imágenes fotografía. Entonces como vimos aquí, tenemos subtema en cada uno de nuestros temas Ahora bien, esto también me creé con un HTML sobre una arquitectura con notas. Como ves, cada uno tiene también un subtema, como ejemplo, portafolio de casas, proyectos de filtro síguenos. La fase del proyecto puede tener estudio de caso sobre nosotros, puede tener plática, publicación en equipo, palabras, servicios, y también tenemos el contacto. Esta es la arquitectura de hub principal de mi sitio web. Puedo cambiar muchos elementos si quiero. Otro archivo también que creé te puede ayudar con tu trabajo. Se trata de la arquitectura. Como veis cuentan con información informativa. En cada maquetación que hagas clic, se escala hasta poder cuadrículas muy fácilmente con muy bien toda la información que tienes aquí mismo. Eso sería muy útil para entender cómo crear tu propio sitio web. Este archivo lo puedes tener contigo en cada proyecto que estés haciendo. Te doy aquí opción de cambiar el color y agregar más maquetación y más información. Para que como veas, puedo elegir o crear uno nuevo. Este me pareció muy útil para cada uno de mis proyectos. Tengo toda la información e idea necesaria para ponerme frente a mí antes de comenzar mi diseño. Intentar usarlo va a ser muy útil para usted. Entonces como vieron chicos, para dejar nuestro proyecto, pasamos por muchos procesos antes incluso de comenzar el diseño perse Empezamos con la raza creativa. Hicimos una investigación, reunimos referencias y preparamos la arquitectura y la estrategia. Y cada uno de estos procesos me pareció muy importante con este método, aseguramos la efectividad de su diseño. 7. Aprende sobre WireFraming: El proceso de encuadre de alambre es esencial para alinearnos con nuestro cliente sobre la estructura y navegación de nuestro sitio web Además, es el punto de partida para encontrar solución creativa, problemas que a menudo se resuelven de manera aburrida. Empecemos por crear nuestra propuesta visual. wireframes son esquemas muy generales donde mostramos cómo vamos a organizar el contenido en cada página Lo primero que haremos es crear la mesa de trabajo. Podemos ver toda la opción de tamaño disponible. Voy a elegir el de escritorio. Ya tenemos la mesa de trabajo. Voy a cambiar un poco el tamaño para mejorar un poco la proporción y le cambiaremos el nombre. Ahora puedo cambiar el color a blanco. Entonces vamos a poner el nombre del logo. Seguro, si tienes un logo, ya lo creas, puedes ponerlo en lugar del Tikkuname Esto es sólo un ejemplo. Ahora vamos a dejar todas las demás opciones para la estructura de nuestro sitio web. Contacto sobre nosotros. Copiar y pegar. Entonces mira libro. Después los arreglamos en la parte superior e intentamos cambiar el tamaño del errateo. Siempre necesitamos crear un balance de escala para eso necesitamos que el logo sea más audaz que todas las demás opciones Trato de arreglarlos cuál viene en el primero, cuál viene en el segundo. Sigue la guía de Figma para poner el espacio correcto. Bien. Ahora con una herramienta rectangular, voy a crear algún layout. Quiero crear algo diferente, así puedo crear rectángulos más pequeños y otros más grandes. Bien, aquí creé cuatro rectángulos con diferentes formas y un color diferente En la parte inferior, voy a agregar otras opciones. Puedo agregar, ejemplo, colección, categoría, y comenzar. Agrego también con color y todo. A ahora intenta organizarlos y cambiar el tamaño de la fuente. Aquí estamos renunciando a nuestra opción navegar por nuestro sitio web de una manera diferente, como ejemplo con un color Podemos pasar por colección con color o con el estilo o ejemplo con categorías como pantalón, chaqueta o abrigo o cualquiera que sea la categoría. Ahora voy a enmarcar cada uno de estos. Doy click en cada una de ellas y hago selección de fotogramas. Y darles un trazo también. De esta manera, quiero que se vean como un boton. Entonces vamos a crear maquetación automática. Y tratar de cambiar el patrón y el tamaño. ¿Bien? Bien. Heap tweaken el patrón. Mantener ramita. Voy a hacerlo redondeado. Y voy a hacer lo mismo con las otras botellas. Bien. Haz lo mismo para las categorías y estilo y con colores. Haz lo mismo, hazlos redondeados. Hacer el patrón y la dimensión del diseño. Ahora, como ve aquí, tenemos cinco botones fragantes y con diferentes formas. El viejo botón, quiero llenarlo con el negro y cambiar también la fuente y hacerlo blanco. Quería hacerlo diferente de los otros botones y hacerlo más especial. Entonces estoy pensando también en cambiar la forma en que organizamos nuestra opción en la parte superior, la forma clásica del núcleo. Para este, quiero cambiar un poco y dejar de manera diferente de exponer nuestra opción. Entonces voy a poner cada uno en un cuadrado. Bien. Bien. Ahí está. Ahora vamos a copiar y pegar la mesa de trabajo y eliminar todos los elementos Vamos a crear otra página. Cambio la colocación de la opción y pongo a cada una en una esquina. Ahora quiero enmarcar toda la mesa de trabajo. Bien. Ahora en la cuadrícula de diseño, creamos una. Y entonces vamos a elegir no una grilla sino una columna. Elegimos un número de una columna, que es 12. Es uno de los números famosos que utilizan en el diseño del sitio web. Entonces cambio el color y hago que se desvanezca un poco. Bien. Ahora voy a cambiar el valor del margen a 20 píxeles, que es el espacio entre la columna y el borde de la página. Y la cuneta va a ser de 32 píxeles. Con esto, podemos ajustar todos nuestros elementos a este margen para darle más espacio a la imagen. En la maquetación, escucha, vamos a profundizar más en cómo decidir los valores para una buena cuadrícula y una buena disposición. Lo siguiente que vamos a hacer es crear el título para el proyecto. Este es uno de los elementos más importantes en la página interna del proyecto. Por lo tanto, la jerarquía que vamos a dar en la tipografía, debe ser muy grande con respecto a los demás elementos Necesito hacerlo también más grande. Vamos a nombrar el título, el camino dos estrellas. Hazlo audaz, alinéalo muy bien. Para este proyecto, queremos crear unas imágenes muy grandes y navegar por las diferentes imágenes del proyecto. Para este proyecto, queremos utilizar imágenes grandes y pequeñas y que ocupen varias columnas. Creamos cuadrados lunares con diferentes formas y tamaños, cambiamos el espaciado, donde los marcos también están espaciados para explorar la creatividad. Con esta columna, es muy fácil caer en una solución que vemos muy fácilmente en otros sitios web. Por ejemplo, usando layout donde la imagen ocupa tres columnas, etcétera No obstante, lo que queremos crear aquí es un sistema interesante donde las personas sientan que pueden interactuar con la página a medida que se desplazan. Para ello, vamos a utilizar imágenes de una proporción diferente, y vamos a utilizar un poco de maquetación que tenemos para arreglar las imágenes en diferentes lugares. Además de esto, voy a crear la prueba, podremos ver toda la información. medida que se desplazan por el proyecto y ven las imágenes, también pueden leer la descripción aquí mismo. Agreguemos un titán y también un subtítulo. Vamos a decir descripción por ahora y agregamos cualquier párrafo que nos guste. Se puede poner cualquier cosa porque esto es sólo un ejemplo. No va a ser el sitio web final. Entonces vamos a hacer el título de manera audaz y el otro de manera media o regular. Puedo cambiar también el color pequeño, los cuadrados pequeños, darles algo de color, para darle algo de estilo a mi página y consistencia a la otra página. Entonces como vieron aquí, chicos, usamos las columnas para crear la página de la colección, y además creamos la página principal. Vamos a seguir adelante en la siguiente lección. 8. Conoce la diferencia entre los tipos de WireFraming: Y ahora, para terminar, vamos a crear el pie de página y vamos a agregar algunos detalles de contacto para que las personas puedan comunicarse con ellos cuando quieran. Puede ser una forma inteligente de agregar los datos de contacto en cada una de las páginas en la parte inferior. Allí las personas pueden acceder fácilmente a los datos de contacto siempre que lo necesiten. Tenemos que tener en cuenta que podemos utilizar este pie de página y el resto de páginas que lo requieran. Los datos de contacto van así. El número, la calle la ciudad el correo electrónico seguro. Y también, puedo agregar las plataformas de redes sociales y vincularlas con la flecha. Cada vez que el usuario hace clic en una de estas flechas, toma esa red social específica. Sigue comprobando que el espaciado sea correcto para los tres de ellos. Con esto, terminamos nuestra foto y la página interna del proyecto. Algo muy importante a tener en cuenta a la hora de diseñar wireframes es que esto se puede hacer con una fidelidad diferente Por ejemplo, wireframes de baja fidelidad. No contienen tantos detalles. Se pueden hacer a mano incluso, y se utilizan cuando queremos validar una idea muy rápidamente. Por otro lado, wireframes de alta fidelidad están mucho más cerca del diseño, contienen muchos más detalles del contenido que irán en el sitio web Por lo general, estos tipos de wireframes están utilizando proyectos mucho más complejos Nivel de fidelidad elegido, lo que queremos lograr en nuestros wireframes Tiene mucho que ver con la industria en la que estamos trabajo y preferencia del cliente entre otros aspectos. Como diseñador, creo que este nivel de fidelidad que estamos logrando aquí es suficiente para continuar el proceso e iniciar la etapa de diseño visual. Por último, en esta etapa es muy importante, cómo representamos las ideas a nuestro cliente. Además, que nos alinearemos con ellos y que se sientan muy seguros con nosotros a la hora de pasar a la siguiente etapa, que es el diseño visual. Para ello, recomiendo siempre representar el marco de alambre como un prototipo Figma Para dejar el prototipo, voy a traer los wireframes En estos wireframes, organizamos el contenido de las dos páginas que necesitamos La primera es la página A donde organizamos toda la información que tenemos sobre la marca. La información es muy fácil. Nosotros solo agregamos y ponemos la información necesaria sobre la marca de una manera muy creativa y organizada. Aquí podemos agregar algunas imágenes de la marca, ejemplo de Tipo más importante. Podemos poner un párrafo sobre la marca y su historia, y tal vez también alguna colaboración que hicieron o alguna noticia de medios famosos hablaron si ya tienen, porque como marca nueva, no van a tener una portada mediática para ellos. ¿Dónde también toda la ciudad en la que se encuentra la marca? Y en la parte inferior, agregamos la misma información de contacto. La última página va a ser la página de contacto donde ponemos diferentes datos que tenemos para que la gente pueda ponerse en contacto con la marca. Lo último que vamos a hacer es crear un prototipo muy sencillo, para poder representar los bastidores de alambre y poder navegarlos de una manera que sea muy clara para nuestros clientes. Para crear el prototipo, hacemos clic en el lado derecho de la pantalla donde dice prototipo, y comenzamos a vincular los elementos que queremos usar. Golpea el elemento que queremos usar a la hora de representar a nuestro cliente. Por ejemplo, quiero que esta imagen me lleve a la página de colección o a la página interna del producto. Para ello, selecciono este círculo con el botón más que aparece en el borde derecho. Lo arrastro a la página siguiente. Por ejemplo, quiero que esta imagen me lleve a la página A como. En la subasta, elegimos un click on click, navegamos a A como página, y elegimos Disolver. Y luego déjelo en 300 miliseg. Entonces déjelo en 300 miliseg. Ahora vamos a vincular otras opciones como contacto. Primero, quiero agregar Autoayout y después lo voy a vincular a la página de contacto Tenemos la misma opción al hacer clic y también Disolver. Vinculamos todas las opciones de contacto a la misma página de contacto. Todas las A S que tienes en cada página, vinculas a la misma página AS. El TICO lo vincula de nuevo a la página de inicio y el Lookbook lo vincula a la página del libro Entonces seguimos haciendo lo mismo, vinculando todas las opciones a sus páginas. Entonces vamos a crear el flujo en la primera página. Estas herramientas nos permiten crear prototipos mucho más liberados Pero para nuestro caso, estas opciones son suficientes. De esta manera se crea nuestro prototipo que podremos navegar y representar a nuestro cliente. Por último, nos aseguramos de que el enlace también lleve a la página principal, como dijimos antes, y todo en su lugar simplemente siga revisando y torciendo Ahora ya tenemos un prototipo para compartir con nuestro cliente. Voy a ir a la vista del prototipo haciendo clic en el botón de visualización y comprobar si todo está funcionando. Si hago clic en el contacto, llévame a la página de contacto. Si hago clic en la colección, llévame a la página de la colección. Sobre nosotros, llévame a la página Acerca de nosotros con una agradable animación de disolución. Explóranos. También llévame a la página de la colección. Contáctanos. Da click en Teco llévame a la página principal. Al final del proceso de diseño de wireframe, es muy importante tener en cuenta algunas recomendaciones para asegurarnos que estamos correctamente alineados con nuestro cliente Y de esta manera, para poder usarlo con la etapa de diseño visual sin problemas. Te contaré de todo en esta próxima lección. 9. Qué recomendaciones de WireFraming: Y recomendación Wireframing. Al final de la etapa de estructura alámbrica, es importante saber cómo nos presentan a nuestro cliente, así como alinearnos con nuestro cliente para que entiendas la importancia de esta estructura de fase, contenido y navegación En esta lección, te daré algunas de las recomendaciones para asegurar el éxito de la fase wireframe Entonces comencemos. La recomendación que tengo perpetración de los wireframes está alineada primero con los clientes Lo que debemos revisar en el proceso de estructura alámbrica, estructura, navegación y contenido Aquí es importante que no definamos qué es el diseño porque esta es una fase muy importante para definir qué es la estructura. Me gusta pensar que los wireframes son una casa gris. Esta casa en construcción gris, ya sabes cómo navegar por ella. Entras a la casa, sabes que la cocina está aquí. Sabes que el sofá, el baño y la habitación están ahí. No obstante, aún le falta la capa de diseño, la obra blanca, por así decirlo, ante el trabajo gris o los marcos de alambre es donde nosotros como usuarios, podremos navegar por cada una de las secciones. Podemos entrar y navegar por nuestra casa de una buena manera. Por esta razón en esta fase de wireframe que queremos decidir qué necesita nuestra casa para determinar qué necesita para llegar a obra blanca o diseño final segunda recomendación es que los wireframes son el punto de partida para definir el contenido que vivimos con el sitio web Por eso es importante alinearnos con el cliente en el que estará el contenido ya que es el que organizaremos para que se pueda consumir de buena manera. Entonces, cuando le presentemos los wireframes al cliente, él podrá determinar si estamos arreglando la información de la mejor manera La tercera recomendación tiene que ver con el diseño. Eso es entender que los wireframes, no son una limitación para nuestro diseño Es en sí misma una oportunidad para explorar las diferentes formas de mostrar nuestro tipo de contenido. Cuarto, los wireframes, son solo el punto de partida de nuestro proyecto Entonces con el cliente, estamos de acuerdo lo que podemos tener en cuanto a contenido. No obstante, podemos seguir ajustándolo en el futuro. ¿Cuál sería la mejor manera de organizar todos estos contenidos? Aquí, como ve, mientras estamos hablando de nuestra recomendación, estamos comprobando ejemplos muy importantes. Te dejaré los enlaces para cada uno de estos sitios web. Todos estos sitios web por los que nos desplazamos. Todos utilizan el mismo método de encuadres y la columna. Ves la forma en que organizan su contenido a partir de imágenes y error tipográfico e información Todo se ve equilibrado y bien organizado y se puede navegar de buena manera Cuando terminamos nuestra estrategia de contenido y proceso de estructura alámbrica, es hora de comenzar nuestra fase favorita, que es la fase de diseño visual Uno de los elementos importantes de esta fase es el layout. Entonces comencemos. 10. Aprende sobre cuadrículas y diseños: El primer elemento que tomamos en cuenta es la elección de una cuadrícula y un layout, donde organizaremos todo nuestro contenido. En esta lección, vamos a hablar de lo diferente que utilizamos para diseñar además de la oportunidad creativa que tenemos con el uso de esta. Estas son herramientas que tenemos a nuestra disposición para organizar y componer el contenido de nuestra página web. Uno de los dos tipos que utilizo en mi trabajo es el primer tipo que es layout que vamos a explorar ahora mismo. Es el más utilizado en diseño web, y este sobre el mejor consiste en una columna. Para usarlo, solo equiparas una mesa de trabajo en blanco, luego agregas Y en esta opción de cuadrícula de salida, por defecto, Figma grid esta cuadrícula basada en cuadrados de diez píxeles Pero voy a cambiar la opción haciendo clic aquí y cambiando la columna de la cuadrilla. Como podemos ver por defecto Figma crea cinco cols, cambiaría los números de una columna a 12 ya que el diseño de 12 columnas es uno de los más utilizados en el diseño web, ya que esto se puede dividir fácilmente en 64, tres, y dos, y también muy flexible para trabajar en diferentes tamaños de pantalla. La opción que puedo establecer rápidamente aquí es el margen, que es la distancia entre nuestro diseño y el borde de nuestra pantalla. Y el canalón, que es la distancia entre nuestro frío y el diseño se adaptará al tamaño que queramos Para adaptar este diseño a diferentes tamaños de pantalla, voy a duplicar mi mesa de trabajo y voy a cambiar el nombre Voy a cambiar el tamaño de mi mesa de trabajo a 800 píxeles, ya que es un tamaño que se suele utilizar para diseñar por tablets Y es la misma opción, voy a cambiar el número de columnas. El margen entre el diseño y el borde de la pantalla y el espacio entre la columna. Y para ajustarme al dispositivo móvil, voy a hacer lo mismo. Primero, cámbiese el nombre. Voy a cambiar el ancho de mi mesa de trabajo a 300 píxeles ¿Cuáles son los tamaños que solemos utilizar para diseñar los dispositivos? Esta medida puede variar un poco dependiendo del producto. Y por último, voy a cambiar el número de columnas. Por lo general, se utilizan cuatro o seis columnas para móvil, el margen entre las columnas y el borde, y voy a dejar, en este caso, el mismo espacio entre columna. Los que hemos creado son uno de los maquetados más utilizados en diseño web que nos dan muchas oportunidades creativas para explorar. Por ejemplo, en este proyecto que diseñé, usé la misma cuadrícula de 12 columnas, pero siempre busco una forma mucho más creativa de jugar con el espacio. Por ejemplo, busco crear un ritmo diferente con el espacio ocupado por cada uno de los modelos. De esta manera, la navegación se volvió mucho más interesante. En esta página como el detalle de cada proyecto, busco generar momentos donde a través de elementos que ocupan más o menos columna, jerarquía y contraste se crean. Además, utilizo elementos que ocupan todas las columnas. Elementos que ocupan cada uno el 50% de la mesa de trabajo, o busco explorar nuevos usos del layout De esta manera, buscamos el layout de 12 columnas, no ser un impedimento para explorar nuevas soluciones creativas Por ejemplo, estamos buscando que la disposición del texto, imagen y el espacio en blanco fuera mucho más cara. Y aunque nos guían el mismo layout de 12 columnas, nos damos mucha más libertad creativa para proponer cosas más riesgosas. En el detalle del proyecto, podemos ver que el uso de las columnas le da mucha más importancia al espacio en blanco, y por eso, creó una lectura muy interesante. Además, estamos tratando de crear un equilibrio entre imágenes, texto y espacio en blanco para dar una sensación muy agradable a los usuarios que visitan la página. Volviendo a nuestro proyecto, podemos ver cómo el diseño de 12 columnas guió muchas de las decisiones de diseño que tomamos a lo largo de las páginas. Y podemos ver cómo buscamos explorar diferentes arreglos de textos e imágenes en cada uno de los modelos. El otro tipo de maquetación que utilizo se llama gráfico Vander. Utilizo esto si veo la oportunidad de crear algo mucho más visual, impresionante o experimental, ya que nos permite hacer un uso más libre del espacio Para crear este layout en figma, tienes que hacerlo manualmente, y te vamos a mostrar cómo Lo primero que tenemos que hacer es crear líneas diagonales de esquina a esquina en toda nuestra página. Luego creamos una línea vertical a través de la mitad de la página. Y después de las esquinas inferiores hacia el centro superior de la página. Entonces todo lo contrario. Y repetimos lo mismo desde las esquinas superiores. De esta manera, vemos que se quitan las intersecciones entre todas estas Y a partir de ellos, vamos a empezar a crear líneas verticales y horizontales. ¿Bien? Bien. Bien, acelere copiando y pegando. Bien. Este proceso se puede repetir varias veces ya que entersearching sale con las líneas que hacemos Aquí creamos otra horizontal que replicamos en el bor Y esta última vertical mucho más cerca del borde. Bien. Seguir adelante. Sigue, dejando más líneas. Más líneas. Podemos repetir esto tantas veces como queramos de acuerdo a los números de guías que necesitábamos para nuestro diseño. Una vez que tengamos toda la orientación, voy a bajar un poco la opacidad Voy a agruparlo y voy a bloquear la capa para poder crear nuestra propuesta de diseño en un top. De esta manera, tenemos un layout que nos permite tanta más libertad creativa y que podemos usarlo en momentos en los que queremos impactar eso también que no queremos depender tanto de la columna 12. Este tipo de maquetación se ha utilizado en un proyecto como este sitio web. Como puedes ver la disposición del elemento, es muy diferente al proyecto que te mostré anteriormente. Esto hace más uso de un espacio de esquina. Además, es muy útil tipo de maquetación para sitios web donde la navegación es un poco más experimental. Como dije antes, este tipo de layout, lo usamos cuando queremos crear un impacto visual muy fuerte y también atraer. Otro proyecto al que se ha utilizado este tipo de maquetación también, es este sitio web. Se ha dispuesto el elemento en la esquina a los lados. No obstante, el proyecto es muy progresivo, que la dirección iba a ser mucho más gratuita e interactiva. Servirlo muy bien al inicio del proyecto para darle la primera decisión de diseño. El último tema que quiero tocar en esta lista es el espaciado vertical entre elementos Normalmente me aseguro de que el espacio por encima y por debajo de cada elemento, también hay múltiplos de ocho píxeles. De esta manera, podemos crear consistencia en nuestro diseño independientemente del tamaño de la pantalla en la que se vaya a visualizar. Y también hacemos mucho más fácil el trabajo de desarrollador que van a trabajar en nuestro proyecto. Una manera fácil de crear este espaciado vertical en nuestro proyecto con los diferentes tamaños que vamos a usar y que hay múltiples de ochos Con las herramientas de rectángulo, creamos estas barras. Seguimos multiplicando cada uno por ocho. ¿Bien? Bien. En este caso, creé 4-56 pixeles. Y luego podemos usar estos bloques para asegurarnos de que el espaciado de nuestro proyecto sea correcto. Sin embargo, la forma más fácil de hacer esto en FDM es seleccionando cualquier elemento y usando la tecla de opción en Mac o la tecla Alt en Windows para medir la distancia entre varios elementos De esta manera, podemos ajustar el espaciado que hay. Y con esto, nos aseguramos de que nuestro diseño sea mucho más consistente. Y que los espacios estarán mucho más organizados medida que el usuario se desplaza y se encuentra con unos elementos diferentes de la página Ya hemos definido nuestras rejillas claras y el diseño para nuestro diseño, y la siguiente lección, vamos a comenzar a bloquear nuestro diseño final 11. Preparación de recursos en Photoshop: Bien, antes de comenzar a bloquear nuestra página web, vamos a comenzar preparando algunos activos que necesitamos para nuestras jaulas Vamos a abrir Photoshop. Vamos a crear cualquier documento, y luego vamos a importar algunas imágenes que necesitemos. ¿Bien? Como ves aquí, tenemos diferentes imágenes. Lo primero que tengo que hacer es eliminar un fondo. Después de quitar el fondo, necesito hacer más limpieza a la imagen. Entonces después de quitar el fondo, vamos a seleccionar la máscara y dar clic en seleccionar Máscara. Aquí vamos a ingresar algunas opciones donde tenemos muchas diapositivas para retocar para mejorar nuestra máscara Entonces apenas empezamos por el radio, el liso, la pluma. Intenta retocar hasta que veas que tu máscara es mejor. Bien. Como ve aquí, puedo ver que yo ya esto era tanto, así que me borró parte de la cara Entonces necesito volver a debilitar. Esto se ve bien, pero todavía tengo algo que necesito limpiar en los igualados. Bueno, voy a hacer esto por el pincel. Simplemente selecciona la masa, y luego con el color negro, voy a borrar algunas partes que no necesito de los aretes. Bien, las cosas se ven mejor, supongo. A lo mejor juego un poco con los bordes de cambio. Más radio. Creo que esta vez se ve mejor. Bien. Ahora vamos a hacer lo mismo por otra imagen. Retire el fondo, luego seleccione la máscara y ajuste las diapositivas Bien, el radio, B. Creo que se veía bien. Hay algo más que necesitas retocar, puedes hacerlo más tarde Ahora solo quiero guardarlo en PNG. Lo último que tengo que hacer es crear un cartel en un coral rojo, y luego en el frente, voy a crear Earthtones ¿Bien? Ahora, la idea aquí, quiero hacer parte separada. La parte superior y la parte inferior significa capa separada. Entonces desde el medio la herramienta de mercado para seleccionar, voy a seleccionar la parte superior, y luego con Control G, dejo en una nueva capa. Entonces le ruego a la capa principal y borre la parte superior. ¿Bien? Ahora, como ves, tengo las dos y una capa diferente. ¿Bien? El Ahora, lo que queda es sólo exportar cada capa sola. Puedes exportarlo en GPEG o puedes exportarlo como PNG. Bien, ¿es tan simple? Acabamos de crear algunos activos para nuestra página web, un diseño. Si no necesitas cosas como las que necesito ahora mismo para mi diseño web, esto no es necesario hacer. 12. Inicia el bloqueo del sitio: Yo Bien, ahora vamos a empezar a bloquear nuestro sitio web. Lo primero que tenemos que crear es la página principal. Entonces con la herramienta métrica, voy a crear un rectángulo y le doy una dimensión. La dimensión va a ser 1440 por 900. Entonces voy a cambiar el color a blanco. Bien. Bien. Bien. Ahora creo tao convirtiéndolo en un marco. Entonces seguro cambio el nombre y lo nombro como casa. La dimensión que tenemos aquí es la dimensión que va a aparecer en el escritorio del usuario. En la guía de diseño, vamos a usar el principio de columna. Ya vimos en las lecciones anteriores. Entonces de grado, vamos a cambiar a columnas. Cambiar la columna a 12, el margen 22 y el canalón 20 ¿Bien? Ahora necesito bajar la opacidad Entonces. La dimensión, puede cambiarla como la forma en que desea que su sitio web busque el. Puedo hacer ejemplo horizontalmente más grande. Yo solo hago un rectángulo como el que tenemos aquí. Puedes jugar con una dimensión diferente según el diseño de tu sitio web. Ahora, quiero darle otro color a mi rectángulo. Estoy tratando de acercarme al color para el sitio web. Vamos a tener una lección separada para eso. Vamos a ver más cómo hacer eso. Bien, dale una placa de color y dale más ligero. Ahora voy a dejar mi maquetación. Entonces, lo primero que necesito crear es un rectángulo en la esquina de aquí mismo. Quiero hacer rectángulo pequeño. Quiero tener diferentes tamaños. Lo hago redondeado seguro y cambio el color. Haz que el color sea más oscuro para el contraste, claro. ¿Bien? Ahora voy a dejar otro rectángulo. Esta vez, voy a salir otro rectángulo copiando s uno. Copio el mismo rectángulo aguantando y arrastrando. Después, salga del rectángulo medio más grande. Haz lo mismo cuando quieras hacerlo más grande, simplemente mantén el control y arrastras también. Ahora sigo copiando sin y droga. Siempre siga mirando a la guarda del producto para hacer el espaciado correctamente Quiero hacer esto más grande. Entonces por eso en la página principal, quiero tener cuatro maquetaciones con diferentes formas con diferentes tamaños. Esta es la forma en que creamos el equilibrio. Usted ve aquí mismo. Estoy tratando de agrandar un poco mi rectángulo para crear un balance en la página principal. Bien. El espaciado debe ser siempre el mismo debe ser correcto. ¿Bien? Droga por la flecha. Sigo ajustando los tamaños de mi rectángulo. El rectángulo medio aquí mismo, quiero cambiar su color. Quizá naranja. Por qué ahora, voy a dejar que sea naranja. Ahora, lo que quiero hacer, voy a cambiar también el color del rectángulo más grande. Este es el primer bloqueo chicos para ver cómo va a quedar la cosa antes de pasar a las imágenes. Quiero ver al principio cómo va a quedar todo. Ahora quiero agregar imagen al rectángulo más grande. Quiero agregar una imagen. Tengo una imagen aquí mismo. Me gusta el color de esta imagen porque es mucho lo que tengo en mi mente. Así que ve a la imagen, luego sube desde la computadora. Como ves como la imagen encajaba en el rectángulo, así que necesito moverla hacia abajo para mostrar las caras de la niña. Entonces para hacer eso, en vez de llenar, nos vamos a la basura. Bien. Vete a la basura, luego baja tu imagen. Creo que esto se ve bien. Bien. Las cosas se ven lo suficientemente bien. Sólo los pones en el medio. Bien. Entonces así fue como se veía nuestro primer layout. Creo que el color correctamente cuando lo necesite, así que voy a hacer lo mismo para otro rectángulo aptiMaget time, solo lo dejo sentir Ahora, claro, vamos a crear las opciones. Esta es la arquitectura de mi página principal. Cuando esté en casa, cambie el color a blanco. ¿Bien? Bien. Estas son nuestras primeras guías de bloqueo, pero aún así vamos a ver más adelante sobre la tipografía y el color más en profundidad Entonces necesito cambiar el tamaño de mi opción aquí mismo. Intenta colocarlo correctamente. Ahora necesitamos crear las otras opciones. Sostenga Alt y droga para crear más copias. Bien. Bien. Verifique el espaciado. Bien. Bien. Intenta revisar el espacio y siempre con la guía de Figma. Eso es muy útil. Bien. Ahora voy a nombrar cada opción. El primero que tenemos aquí mismo son las colecciones. El segundo sobre nosotros y contacto tan sencillo. Esta es la opción sin pecado que puedes tener en el sitio web, pero tu sitio web puede ser más complicado y tener más opciones Es de acuerdo con el diseño, hay que hacer. Ejemplo, si este era el ecommerce, seguro que va a tener más opción. Vamos a tener categoría, vamos a tener la tienda, vamos a tener la tarjeta. Vamos a tener muchas, muchas cosas, chicos. Esto es como un portafolio para una marca. Entonces después de cambiar las tallas, tratando de colocarlas muy bien. Ahora, si tienes un logo como B&G, puedes importarlo y ponerlo en la esquina Mi logo va a ser solo un error tipográfico, así que voy a crearlo solo escribiendo el nombre en el color Otra cosa que tengo que hacer aquí es este diseño naranja. Necesitamos crear una opción aquí un fra tonos tierra y símbolo. Voy a hacerlo más audaz y cambiar el color a blanco Este diseño, estoy creado aquí mismo va a ser el diseño para el color del filtro. Por eso quería crearlo de otra manera. Mientras diseñas tu sitio web, siempre debes pensar en cada opción a dónde va a llevar y cómo se verá la página a la que enlazamos. Y también otra cosa en la que siempre piensas mientras estás diseñando sitio web es la animación. Qué elemento necesitarás animar y qué cosas los dejarás estáticos. Así que ahora he creado aquí tono y caída y luego Así que aquí tenemos que crear un contraste tipográfico por tamaños. Entonces voy a cambiar el tamaño de arraigada en la naturaleza, estilízala para ti. Este fra quiero que se vea más pequeño. También puedo cambiar el espaciamiento de la Tierra hace y muestra. Tratando de encontrar la mayor estructura para este producto. Nos mantenemos en la siguiente lista. 13. Crear la página de colecciones: Así que ahora vamos a seguir creando la página de colección. Como ven aquí, lo primero que tenía que hacer es que me guste la guía gobernante. Simplemente eliges la opción de rodillo Guía, y luego desde arriba, tiras de una línea para ponerla en la parte superior, y otra línea, la pongo en la parte inferior. Por eso seguro que tengo el mismo tamaño para cada página. Bien. Ahora, solo créalo un rectángulo, poco más grande y pongo en el primer rectángulo, agrego una imagen. Entonces traje mi póster que lo crearía en Photoshop y lo puse sobre la imagen. No es gran cosa, chicos, es igual que lo hicimos antes. Lo único nuevo que hicimos aquí es que agregamos este cartel recluta en photoshop sobre la imagen. Ahora quiero bajar la opacidad para poder ver mejor cómo encajar sobre la imagen y luego recortarla Voy a la basura y a la basura. Cuando la recortamos, simplemente la cagamos de una talla, así que necesito hacer lo mismo por el otro lado P aquí. Bien. Ahora selecciono el uno y me voy a la basura y luego lo corto de esta manera Vuelvo a ir a A crap. Esto es para decir. Bien. Ahora de esta manera y asegúrenme seleccionar solo la parte que necesito. Ahora voy a tratar de ponerlos correctamente para asegurar que no aparezcan igual. ¿Bien? Así que trata de arrastrar sosteniendo el arrastre de control y tratar de recostarnos muy bien el uno sobre el otro. Bien. Bien. Sigue ajustando hasta que lo hagas correctamente. Ahora, volvamos a la opacidad. Hagamos la opacidad al 100%. Ahora, como viste, vamos a traer la imagen que creamos en el Photoshop. Bien. Lo colocamos en el fondo. Después con la herramienta rectángulo, voy a crear a rectángulo. Intenta ponerlos en el medio. Bien. Bien. Así es como Intenta modificar para que encuentres la posición correcta Ahora seguro necesito cambiar el color. Así que puedo cambiar a verde. Vamos a probar el verde y el naranja. Entonces así que finalmente, decidí hacerlas naranjas. Ahora voy a crear en cada uno para cuadrar una frase. Hazlo audaz. Bien. Poner lo nuevo lo hago más bajo capital, supongo. Voy a hacer ningún capital Ntor entonces tomar el tamaño en la posición Ahora, ya estoy pensando también que voy a animar esta parte Entonces cada vez que agrego algún elemento, estoy pensando en cómo va a ser animado. Y según eso, puedo posicionarlo de otra manera. Aquí, voy a decir que hay paleta. Como tenemos aquí mismo. Ahora necesito arreglar la imagen en la parte superior. Así que solo elijo. Ahora voy a traer estas dos imágenes. Ya lo dejé. Simplemente creo un rectángulo con un tamaño mayor y luego lo hago redondeado y además subo imagen desde la computadora como hicimos antes en la lista anterior. Entonces los empujo hacia abajo hasta el fondo. Bien. Ahora, necesito cuate un bot Con un rectángulo y solo haz una pequeña maraña y luego hazla redondeada, alinéala en el medio Bien. Después empújelo en la parte inferior, dale un color. El botón siempre tiene que estar en color de alto contraste. Así que sólo voy a nombrar el botón. Explora más. Bien. Creé este rectángulo verde y lo llamo paleta natural y agrego cualquier congelamiento no importante Podrías agregar cualquier congelamiento que pudieras tumbar no es importante. No, copio estas imágenes, y voy a ver si dejo o hago algo. Bien. Bien. Voy a posicionarlos con una forma diferente de crear un equilibrio, pero con otra manera. Dam está seguro que los vamos a cambiar porque no vamos a tener las mismas imágenes. Voy a cambiar el tamaño de mis rectángulos, empuja hacia arriba Algunas ideas van y vienen mientras estoy diseñando la guía del sitio web. Así que no siempre me quedo con las cosas que tengo en mi mente cuando empiezo. Siempre cambia de acuerdo a lo que pienso de la animación y del diseño. Ahora, lo cito más rectángulos. Y en la parte inferior, voy a tener también este pequeño rectángulo verde. Vamos a tener el sitio web. A estas alturas ya tengo estas paletas. Lo puse a mi lado para elegir algunos colores de. Estos son el color primario. Entonces más adelante vamos a ver cómo vamos a hacer que la tabla de colores sea perfecta para el sitio web. Ahora, lo que hice es simplemente cambiar las imágenes de cada rectángulo. Ya tengo una idea de cómo voy a animar eso. Vamos a ver más tarde. Ahora, con cada imagen, necesito agregar alguna descripción. Ellos o el primero. Puedo decir blazer, chamarra, chamarra usada como parte de una captura inteligente. Esto es sólo un ejemplo, chicos, así que no tratando de cambiar el tamaño de mi texto. Hazlo también más pequeño, entonces voy a posicionarlo mejor. Bien. Vamos a hacer lo mismo con las otras imágenes. Ponlo aquí. Y la helada tal vez otras dos cosas como traje. Blazer casual y pantalón tal vez como el verde, lo mismo que hicimos antes, cambiamos la talla, cambiamos el peso de la fuente. Media media o regular o negrita. Seguimos haciendo lo mismo para la tercera imagen. Bien, entonces decimos blazer elegante y casual, vibrante, y llámalo blazer y pantalón. A lo mejor deberíamos llevar traje casual solo Te Qué más podemos hacer por nuestra página de colección. Vamos a ver. Primero, necesito posicionar muy bien la descripción. Bien. Puedo cambiar el color del rectángulo también aquí mismo. No quiero tener el mismo color, o puede que haga algo mucho mejor haciendo una imagen como fondo. Ahora para los dos últimos rectángulos, hice imagen como fondo. Sólo sabes cómo hacer a ese tipo, así que no es importante. No es importante saber ya cómo hacer eso. Esto también es muy sencillo. Acabo de dejar seis rectángulo pequeño. Los hago un poco redondeados, y luego hice lo mismo seleccionando cada cuadrado y agrego en cada cuadrado una imagen. Agrega una imagen en cada cuadrado. Estoy tratando de cambiar el tamaño del cibt aquí mismo. Bien. Hazlo más grande. Entonces voy a posicionar tres imágenes en el medio y la otra va a estar fuera de la página. ¿Por qué hice eso? Eso lo hice porque voy a animar esta parte, y para animarla, necesito seis imágenes, y solo necesito tres imágenes para que aparezcan cada vez Entonces como les dije, chicos, cuando están trabajando en el diseño, ya están pensando en la animación. Según eso, posiciona su contenido. Ahora tenemos que acercarlos y alinearlos uno cerca del otro con el mismo espaciado, ¿de acuerdo? Bien. Bien. Bien, genial. Pensando en agregar más imágenes. Bien, puedo crear más imágenes si necesito animar más esta parte Después de pensarlo, decidí poner las imágenes en el bor. ¿Bien? Entonces los pongo en el bob y cambio las imágenes. Ki. Es tan sencillo. No es complicado. Ahora tengo esta textura de papel que se ve doblada, solo le dan efecto a mi última imagen de fondo. Entonces lo puse sobre la imagen. Bien. Yo ya como hacer eso. Ahora voy a ir aquí a la gota donde está la opción de mezcla. Entonces voy a elegir un blending. Voy a elegir multiplicar. Entonces así es como se ve. Estoy pensando en bajar la opacidad de la textura. No quiero tener ese gran efecto, solo necesito un poco de él. Por lo tanto, baja la opacidad. Después receso la textura. Control de frío y drogas. Bien. En la parte inferior, creé este rectángulo verde, y dije, 2025, bien, resérvalo o puedes llevarte lo que necesites. En la parte inferior aquí, incluso puedes poner la información de contacto de la marca. Square va a estar en cada página. Llevar al frente o al rectángulo y la rana porque quiero que estén sobre la imagen. Bien. Ahora, quería crear otro rectángulo, hacerlo más grande, y también voy a aplicar una imagen para ello. ¿Bien? Simplemente lo seleccionas y vas a la imagen y seleccionas una imagen del cómputo. Tan simple ya, ya lo hicimos antes. Esta es la imagen que tenemos. Necesito hacerlo más grande. Ahora me vienen a la mente otras cosas en el momento. Tengo esta paleta de colores justo aquí y estaba pensando en usarla al final de la página. Le doy un nuevo toque. Bien. Voy a redimensionarlo y ponerlo en la parte inferior Lo necesito justo en la esquina. Redimensionarlo de esa manera. Bien, entonces voy a crear un rectángulo y darle una gama de colores, lo hago más pequeño, luego copio y hago otro rectángulo más grande. ¿Bien? Ahora decidí poner el otro rectángulo en la parte inferior, y el otro, le agrego una pulgada. En el rectángulo inferior, agregué la paleta de colores. Después lo redimensiono, lo hago más pequeño y lo pongo en la esquina inferior Ahora tengo aquí mismo un sello que yo mismo creé. Este sello, necesitaba ponerlo en la parte inferior. Simplemente adjunto para que mi página sea más creativa pensando fuera de la caja, por ejemplo, agregando esta textura, agregando un sello, agregando esta paleta de colores. Algunas ideas, pueden aparecer mientras estás trabajando en el diseño. Algunas ideas, es posible que las tengas antes. Simplemente combina todas las ideas que tengas en tu mente e intenta llegar a algo más creativo y no pienses siempre de la manera clásica como todos los que intentan ser más creativos y abiertos a probar cosas nuevas. Ahora, trata de arreglar esto en la parte superior. Ahora tengo otros sellos aquí mismo. Voy a cago y elijo uno para ponerlo en la parte inferior de la MyPage también Seguimos en la siguiente guía de lecciones. 14. Crear las páginas finales: Entonces, hola chicos, ahora vamos a crear la página principal final para nuestro sitio web. Acabo de crear otra página, hacerla más grande y enmarcarla. Entonces acabo de poner en la cima sobre Tiko y luego va a estar en negrita Entonces lo dejé NIIF, hablando de la marca. Cualquier cosa que puedas decir, un ejemplo. No hay problema. Y también lo puso en el color blanco. Esta va a ser la página A us. Ahora en la parte inferior, voy a poner el cuadrado que necesitaba para estar en cada página que pudiera ser un contacto o en mi caso, pongo 2025 todos los derechos reservados. Entonces esto es tan sencillo. Ahora vamos a crear un rectángulo. Voy a hacerlo redondeado, luego hacerlo más grande. Hago parte de ello fuera de la página. Luego crea otro rectángulo sobre él. Lo pongo solo sobre la parte que necesito borrar. Seleccione ambos, y luego vaya a la opción aquí mismo en la parte superior y seleccione substract De esta manera eliminamos la parte que no necesitamos fuera de la página. Dejamos sólo la mitad del rectángulo. Ahora selecciona el rectángulo, y voy a elegir una imagen de mi cómputo. Ahora pon basura y trato de posicionar esta imagen. Sobre nosotros Paige, quiero que sea más sencillo. No necesito tener mucha información como la que vimos en las clases de Pergus Aquí vamos tan simples, pero creativos y elegantes. Ahora sólo estoy tratando de alinear la imagen. La mejor manera que tengo que hacer. Voy a ponerlo al fondo. Entonces alineo también el texto. Ahora lo que voy a hacer, voy a copiar la misma página y luego borrar algunos elementos que no necesito. Copia el 2025 el derecho reservado, póntelo en la parte inferior, y luego voy a cambiar el color del cuadrado. Tan sencillo. Esta va a ser la página de contacto. Entonces con la herramienta rectángulo, voy a crear un rectángulo grande. Le doy un color. Va a ser quizá de color rojo. Bien. Después creo un pequeño rectángulo horizontal. Yo creo el primero. Después copia y crea otro y otro. El tercero, quiero que sea más grande y luego crear otro, ponerlo en la parte inferior. Esto va a ser más pequeño en tamaño porque va a ser el fondo. Bien, le doy más contraste de color porque quiero que sea el elemento más importante el usuario pueda ver cuando vaya a la página. Voy a darle un nombre a cada caja. El nombre va a estar en negrita y en color contrastado Voy a decir nombre completo, dirección de correo electrónico y su mensaje. Esto es lo que va a ser la caja para e tarea. En la parte inferior, voy a decir enviar mensaje. Este va a ser mi trasero, ¿de acuerdo? Bien. La idea aquí es que el cliente pueda enviar un mensaje poniendo su nombre, dirección de correo electrónico, escribir cualquier mensaje que quiera comunicarse con la marca, y luego haga clic en Enviar mensaje y la marca va a recibir su mensaje. Bien, hago el contacto más fácil. Ahora en la parte inferior, voy a traer lo escrito en las lecciones anteriores, el correo electrónico, el número, la ciudad y los enlaces para la página de redes sociales. Intenta alinearlos muy bien. Bien. Bien, tan simple. Las páginas no son complicadas. Tienen todas las cosas necesarias, pero de manera elegante. Ahora voy a cambiar el color de esta información. Bien. Bien. Bien, eso es lo que ya necesitábamos. Entonces los puse ahí mismo. Y eso es todo. Estas son las páginas principales que necesitábamos para nuestro sitio web. Ya los creamos. Queremos ver más con el errateo, el color. Vamos a ver cuál es la interacción. Hay mucho más por cubrir en nuestra clase. Así que sigamos. 15. Trabajar con tipografía en UI: La tipografía es la parte más fundamental de un proyecto de diseño. Por lo tanto, es muy importante que tengamos un proceso claro para la elección del teléfono. Además de tener reglas muy claras para la creación de la paleta tipográfica, todo esto va a hacer posible que podamos crear una propuesta mucho más fuerte Necesitamos que esté alineado con el objetivo de nuestro cliente y destaque del resto. La tipografía es una de las partes más fundamentales de la propuesta de diseño Así que ir tan lejos como para afirmar que es más del 90% del éxito del proyecto Por lo tanto, existen ciertas reglas básicas que debemos seguir para asegurar el éxito de nuestro producto. La primera de estas reglas básicas es tratar cada uno de estos proyectos de una manera diferente. Cada proyecto es una palabra diferente. Eso significa que cuando cada producto llegue para que trabaje, no voy a querer aplicar la misma estrategia que implanté en un producto anterior en este nuevo producto. Con cada producto, estamos resolviendo un problema de comunicación. Esto se reflejó a través del texto. Cuando hablamos de textos, estamos hablando de tipografía Para hacer una selección de tipografía para cada uno de nuestros proyectos, lo que hacemos es tener comunicación con nuestro usuario La segunda de estas reglas básicas es que debemos tener un propósito muy claro o la elección de la fuente. La segunda de estas reglas básicas es que debemos tener un propósito muy claro para la elección de la fuente. La decisión debe nacer de la alineación de nuestro cliente y con nuestra marca. Dado que cada una de las decisiones que tomamos sobre la tipografía, es particular de cada uno de los problemas que estamos tratando de resolver Por lo tanto, decidir sobre la fuente trae consigo muchas consideraciones. Lo que debemos considerar. Parte de la consideración es que la tipografía debe ser un equilibrio entre algo emocional que conecte con el usuario y también natural Al mismo tiempo, debe tener una personalidad que sea característica, pero también práctica que podamos usar en diferentes momentos. Por último, debe ser legible para que los usuarios no tengan problemas para leer el texto de la página web. Pero también necesitamos que sea flexible que nos sirva en un contexto diferente. Otra consideración que debemos tener a la hora de elegir nuestros teléfonos que las fuentes deberían ayudarnos a optimizar la legibilidad, es decir que nuestro usuario pueda leerlo correctamente para mejorar la accesibilidad Es decir, a la hora de elegir este tipo de letra, no tendrán problema de lectura para que todos puedan leer el contenido Lo último es optimizar la usabilidad. Que a través de esta selección tipográfica, usuario navega por la página para encontrar contenido de una manera muy fácil La tercera de estas reglas es que debemos conocer bien la característica principal de la fuente. Por ejemplo, su clasificación principal, sus rasgos más característicos y la diferencia entre ellos. Además, cuando seleccionamos una fuente, hablamos de varias cosas que tienen una reacción en cadena. Por ejemplo, seleccionar la fuente, y al hacerlo debemos tomar en cuenta el tamaño. Al seleccionar el tamaño, tomaremos en cuenta el interlineado. Y con este espaciado, tendremos que decidir cuál es el color de fondo y fuente. Otra característica importante a la hora de seleccionar la fuente es la altura de la X. Podemos tener dos fuentes distintas, pero están en la misma partitura, y cuando las comparemos, vamos a ver que el cuadro tipográfico Después de seleccionar una fuente y el tamaño que vamos a utilizar para el texto, una de las relaciones y decisión más importantes que tomaremos es el tamaño del lead. Un buen punto de partida es multiplicar el tamaño de fuente por 1.5, y a partir de ahí ir modificando los valores según la fuente que estemos usando. Al igual que en el diseño editorial, es importante que tomemos en cuenta el número de caracteres que utilizamos por línea. Ya que un párrafo con una línea de contexto muy corta o muy larga puede entorpecer la legibilidad Esta es una guía que podemos usar como base con diferentes puntuaciones que nos ayudará a asegurarnos de que el texto principal de nuestro sitio web permanezca legible en todos los dispositivos. Por último, una de las características más importantes a tener en cuenta a la hora de seleccionar un teléfono es su formato. Por lo general, encontramos dos formatos, TTF y WOFF. La gran diferencia entre estos dos formatos es que el WFF se equipara y pretende ser utilizado en un producto digital mientras que el TTF está conteniendo información para una impresión y una pantalla Ahora quiero compartir algunos consejos para una buena selección de fuentes. Lo primero que recomiendo es buscar directamente las fuentes en la página web de una casa de fundición, que son las empresas que se encargan de dejar de fumar y distribuir los fondos Algunas de mis casas de fundición favoritas son Pen gram Pen gram, clean type, snopon y tipo Grilli El segundo consejo es usar tres tamaños de fuente muy diferentes como base. Esto te ayudará a crear momentos de lectura para que el usuario pueda tener contraste entre las fuentes y así poder resaltar cada uno de los textos. También hay que tener en cuenta que estas bases tipográficas que seleccionamos, podemos modificar a medida que diseñamos nuestro producto El tercer y último consejo que quiero compartir contigo es limitar el número de fuentes que usas en el producto. Es muy importante tener una fuente como base y agregar más fuentes en caso de que sea esencial o que generen valor en el producto. Debemos tomar en cuenta el número de pesos tipográficos disponibles que tenemos en nuestra tipografía base y utilizarlos antes de buscar Por ejemplo, trabajando en un proyecto, el cliente puede enviarte un manual con diferentes fuentes. Pero para nuestro proyecto, vamos a buscar nuestro errateo y limitarnos a una o dos fuentes El primero que tenemos en el menú es la bahía de fuentes. Simplemente puedes descargarlo y luego abrirlo y hacer que se ejecute en segundo plano. Como ves, tiene muchos fones diferentes. Cada fuente tiene diferentes pesos y sip. Puedes elegir el ejemplo uno para trabajar, y va a estar activo en tu computadora. Ahora, otro en la lista es Google Phones. Desde aquí, podemos buscar fuentes que puedan ir bien con nuestro proyecto. Como veis, estoy buscando algo así como ejemplo, mocerf y también limpio Otros quizá tengan algunas formas geométricas. Ya elegí algunas de las cosas con las que quiero trabajar, y después voy a hacer clic para descargarlas. Bien. Otro también a verificar es compartir fuente. Puedes elegir una fuente y luego ver toda su familia. Veamos ejemplo, tienes regular cursiva media negrita, K. Incluso puedes comprobar los números cómo se ven y las letras como se ven. Te da la opción también de jugar con el tamaño, ver cómo va a quedar el texto cuando está mojado y ya. Cómo va a verse el texto con diferentes tamaños y diferentes pesos de fuente. Este es un sitio web muy agradable para comenzar a filmar. Otro también puedes consultar es mplust.com. Aquí puedes ver también hay muchas opciones diferentes defectuosas y cada fuente como una elección o incluso cómo se ve ejemplo en un tipo diferente de producto. Aquí puedes comprar o puedes encontrar un teléfono gratis, pero tiene 1 millón de opciones mayores. Mi teléfono también es otro lugar para pasar. También encuentras opciones de hombre que puedes comprar o algunas de ellas son gratuitas. Ya te muestro también cómo se ve en tu proyecto gráfico. Entonces después de descargar tus teléfonos y necesitas usarlos en el FeGma en línea, necesitas descargar el instalador de fuentes Simplemente descárgalo y lo abres e instálalo y haz que funcione. Ahora vamos a ir por nuestro proyecto y vamos a aplicar las fuentes que escojamos. Lo primero que necesito es que voy a crear diferentes tipos de fuente y comprobar las mejores opciones. Entonces el primero que escribo aquí voy a elegir es Donser ¿Bien? Voy a tratar de revisar diferentes pesos familia que funcionan y copiar y tratar de elegir diferente tipo de peso. Así se veía en un bol como se veía en un medial, y así se veía en regular. Creo que ya puedo ir con esta elección. Entonces, eliminemos y apliquemos este errata a mi trabajo. Puedo verificar antes de algunos de otros tipos. Pero no, voy a coser con sentido abierto. Este es el lado. Necesito que seas extra audaz aquí mismo. No me parece audaz o extra audaz y voy con extra atrevido. Para el siguiente texto, voy a elegir la misma fuente pero de diferentes maneras. Lo voy a poner en medio o regular. O tal vez Seibold el médium. Después de ella. Entonces elijo un medio. Ahora, hacemos lo mismo para el otro también texto. El logo va a abrir videntes, también extra negrita. Las otras opciones, voy a elegir un me gusta. Para abrir bolígrafos, y después voy a ver si elijo medio, en negrita niños medianos. Haz lo mismo con los demás. Tengo dos páginas principales aquí porque tengo algunas ideas sobre animación, puede que necesite dos páginas, pero vamos a ver tarde. Entonces hacemos lo mismo para la misma página. Bien. Para la página de colección, también haré lo mismo, elegiré tablero extra, para el título, y luego volveré a elegir. Entonces como vieron aquí mismo, chicos, estoy trabajando solo con una fuente y con pesos diferentes. Así que elegí aquí mismo. No les importa, chicos, si algunas estructuras se ven diferentes. Esto es sólo un ejemplo. Vamos a ver más tarde la estructura correcta cuando estemos animados. Aquí sólo estoy tratando de experimentar con Santa. ¿Bien? Pero viste el diseño de la página de colección ya en la página de bloqueo. Esto es solo un experimento. Bien. Así que seguimos eligiendo las fuentes que necesitamos y aplicamos a nuestra página. Esto no es algo que veas chicos que va a hacer lo mismo. Algún título va a estar en la misma fuente, pero con diferentes pesos como negrita y regular o medio, hacer lo mismo por sobre nosotros. El título seguro que va a estar en negrita y el texto va a ser medio o regular. Ahí está. Bien, cambio los de aquí por minúsculas. Bien. Bien. Bien. Bien, haz lo mismo para el resto. Decir informado con los mismos rasgos diferentes. Me limito tanto aquí mismo trabajando solo con un tipo de letra Esta es la mejor manera de trabajar en mi opinión. Nunca voy a ir más allá de dos fuentes. Siempre prefiero trabajar solo con una fuente o dos máximos. Esta es la forma más limpia de trabajar, pero de todas formas, puedes ir más con cuatro o tres Estas son tus ideas. Pero en fin, nunca te aconsejo que vayas más de cuatro teléfonos como máximo, ¿bien? Y la mejor manera de trabajar es con una fuente o dos. Eso es crear consistencia y no crea caos para el diseño. Bien, así que eso es todo, chicos. Esto es lo que necesitamos saber sobre el errateo. Espero que entiendas muy bien cómo trabajar. Nosotros no complicamos. Vimos todo lo necesario para hacer un gran diseño exitoso. Entonces seguimos adelante. Siguiente lección, vamos a ver cómo trabajar con Cool. 16. Trabajar con colores en UI: Por lo general, el color en un sitio web es funcional indican las acciones que podemos realizar en el sitio web. Además, destaca qué color están relacionados con la marca. No obstante, creemos que podemos darle demasiada juventud creativa. Si los usamos de la manera correcta, en esta escucha, hablaré sobre el uso del color y página web y cómo aplicarlo de una manera más creativa. Esto es declive breve creativo. Supuestamente, me creé a mí mismo. Podremos entender cuáles son los usos correctos y la paleta de colores que tienen en su marca. Como ves aquí, la paleta de colores es muy rica. Tiene crema cálida, verde bosque, arena dorada, rojo coral y beige suave. La información que tenemos aquí mismo para cada color, el código de la g, RGB y el CMYK. Esto es lo que la marca quiere que sea su paleta de colores. En la parte inferior, podemos tener la aplicación de color, los colores de fondo, primer plano y el color del texto y el elemento del sitio web Te doy ejemplo como el color puede ir con cada ejemplo, el color del texto y el color del fondo. Esto es muy importante para pasar y aprender sobre cada uno de ellos. Elemento muy importante es la combinación de contraste. Tenemos alto contraste y contraste medio. Esto es todo lo que garantizo la legibilidad y accesibilidad óptimas en todo el material de la marca La guía de color de la marca. Aquí también hay buena información para conocer sobre el uso primario, el color de soporte y la accesibilidad. Entonces como puedes ver aquí está toda la información. Se trata de la aplicación de color para la marca. Entonces, cuando estoy trabajando en la página web, necesitamos alinearnos con este breve aquí mismo. Ahora quiero mostrarles algo también muy interesante es este sitio web llamado Colores. Aquí, podemos comenzar generando una paleta de colores. Vamos a tratar de reclutar la paleta de colores de lo que tenemos en el brief. Si quieres hacerte una idea sobre las paletas de colores aquí puedes trabajar con, simplemente generas rápidamente paleta de colores y sigues dando clic en el espacio para tener una paleta de colores diferente Siempre haga clic en el espacio para tener una paleta de colores diferente. Si encuentras ejemplo, un color importante y quieres dejarlo y cambiar los otros colores, solo tienes que registrarte. ¿Bien? O si quieres deshacerte de un color, solo tienes que hacer clic en X. Ahora, como ves aquí, cuando haga clic en el espacio, hazme tener un tipo diferente de color. Toda esta opción que tenemos aquí mismo es bloquear y cambiar. Así que para tener el mismo color sólo vamos a traer el código e insertarlo en cada una de estas paletas de colores. Entonces lo bloqueamos con lo mismo para el otro color. Hasta que tengamos esta paleta de colores, tienes justo aquí frente a la vista. Ahora sólo voy a descargar. Bien. También puedes consultar la paleta de colores de tendencia. Te dan idea de algunos de ellos que puedes usar para tu trabajo. Otra opción también para verificar el contraste de esquina para verificar. Aquí, vas a poner el fondo y el texto de primer plano que vas a usar y ver si el contraste es legible y es bueno Entonces como viste aquí, solo respondemos el código del color del texto y el color de fondo. Queremos elegir entre el brief, queremos elegir los códigos. Como ve aquí, prueba muy bien. Entonces de esta manera, sabemos que podemos trabajar de manera muy segura con este color. Puedes seguir comprobando otro color. Y previo a ver. Este es un ejemplo, el color del fondo es el primer verde y el color es beige suave. Entonces dice muy bien y dale un buen número. Entonces sé que puedo usar también este tipo de combinación. Este es otro sitio web de un texto en color. También puede querer dejar todo el enlace de todas las fuentes en el material de la clase. A lo mejor tengo diferente tipo de paleta de colores, y también tengo diferente tipo de color de contraste. Como vimos, le puse algunos colores de fondo y primer plano y puse cómo contrastan entre sí ¿Esta va a ser una guía que pueda usar en mi obra? Y también creé un grado de cada color que vimos ahí. Ahora voy a aplicar los colores a mi página web y para ello, quiero elegir con el dejo caer el color seleccionando cada objeto. Seleccionaré la insignia suave para el fondo del color de la página principal. Entonces voy a elegir el colal rojo para este diseño. El mismo rojo para este diseño. Manguéelo. Se ven más interesantes. Ahora voy a elegir el color también rojo para el logo. Voy a elegir el color para la opción. Siempre, te mantienes alineado con el brief del color de tu cliente. Forzado a verde, el nacido va a ser también fuerza a verde, los cuadrados en la parte inferior van a ser forzados a verde, y el color del texto va a ser suave el color tiene rollos en cada una de las páginas web. Entonces algunos de los colores en las caras, algunos de los elementos que necesitamos que dominen y los necesitamos para atraer la mirada del usuario. Entonces estos elementos necesitamos crearlos en el alto contraste, como ejemplo, los contrafuertes o información muy importante Bien. Entonces sigo agregando el bosque verde para el elemento en la parte inferior. Esto es menos contrastado quiero que sean. Entonces ahora aquí como veo, creé otra página, este va a ser el seleccionador de color Yo solo hago un rectángulo, le aplico una imagen. Puse la información en la parte inferior, y luego creo un pequeño cuadrado. Otra página, tiene imagen y cada imagen tiene cuadrado pequeño y también un poco de descripción. Ahora quiero elegir el color de cada imagen y ponerla en ese cuadrado. Entonces por ejemplo, el primer color, tiene estos signos oscuros, ponlo a eso y también este pequeño cuadrado de aquí mismo, va a ser naranja florecer, agrégalo a ese cuadrado Y aquí también, voy a añadir el mismo color del marrón. El mismo color del marrón. Estas páginas van a estar enlazadas entre sí. Vamos a ver más adelante en la acción de ancla. Es tan simple, no es complicado. Vías cómo las creamos con Dios para que coincidieran el color de las imágenes con el color del cuadrado. Ahora sigo cambiando los colores del texto a antes como contrastarse Bien. Seguimos agregando al otro mismo elemento, mismo color. Bien. Bien, ahora esa página un poco. Bien. No se preocupen, chicos, si ven algo que no entienden en las páginas de aquí mismo, estas no son las páginas que vamos a usar. Como te dije, esto todas las páginas experimentales. Las páginas que vamos a utilizar para nuestra interrupción son las páginas que ya creamos en nuestras lecciones. ¿Bien? Así que sigamos. A lo mejor también cambio el color de esta página y elijo el color de envío. Seguro, el color rojo ahora no contrasta con el color de envío que hicimos, así que puedo cambiarlo a un color más contrastado, que es el bese suave Después las cajas, las voy a cambiar para enviar color. Y seguro necesito el elemento más contrastado en mi página aquí está el botón Lo haré en colon rojo yo todos los botones de mi página web aquí, van a estar en un color rojo, que es el color más contrastado Puedo cambiar también este texto a bosque verde. Texto también aquí a bosque verde, y también el otro texto. ¿Bien? Bien. Prueba y experimenta más con el color. Entonces decidí cambiar el color de la página a bedge y el cuadrado para enviar, ¿de acuerdo? Creo que esto es mejor. Cada color tiene su papel en esta página web, intenta aplicarlos de la manera correcta y acuerdo a cada rol y cómo vas a guiar los ojos del usuario. Por último, hablaremos de accesibilidades y colores. Cuando diseñamos una página web, una aplicación o un producto digital, es muy importante que tomemos en cuenta el contraste y la accesibilidad de los usuarios. Accesibilidad significa tomar en cuenta a todas estas personas que puedan tener baja visión. Entonces por eso debemos tener cuidado en la selección del color y cómo la revisamos. Para eso, te voy a mostrar dos herramientas dentro de figma. Es lo mismo que vimos antes al principio los que para el contraste. Aquí, también, podemos tenerlo en figma. Este plugin llamado contraste. Y nos mostrará si los esquemas de color seleccionados son accesibles o no Lo que significa la A es cuando hay un texto muy grande, y la A es si funciona cuando hay texto largo. Por ejemplo, en este caso, cuando tenemos un fondo rojo con la tipografía negra superpuesta, o verde oscuro, funcionará No obstante, cuando tenemos un fondo negro con un error tipográfico rojo, no va a funcionar Cuando hay texto largo, puede que no funcione. Podemos hacer lo mismo con otro examen. Te muestro que aquí demuestra que trabajas muy bien. Como vimos antes en la primera de la clase, pero quería mostrarte también cómo usar el plugin en fegma Entonces eso es todo, chicos, así es como aplicas el color para tu diseño. Espero que entiendas muy bien, y sepas usar el contraste y guiar los ojos del usuario y hacer también las cosas muy legibles para el usuario. 17. Añadir los elementos gráficos: Bien, chicos, aquí vamos a revisar algunos elementos gráficos que vamos a necesitar para nuestro sitio web. Elementos gráficos, los utilizamos para mejorar nuestra página web. No hagas un lío creando elementos abrumadores. Usamos solo cosas que creemos que va a agregar a nuestro diseño. Podemos comenzar aquí ejemplo en SVG en este sitio web de SVG. Puedes descargar muchos elementos como cuadrados ARO o donde sea, o puedes usar el Illustrator para crear tu propio elemento por ti mismo, por ejemplo con la herramienta geométrica, y luego los guardas como SVG o PNG. Prefiero siempre SVG porque puedo cambiar el color directamente en la Figma. Aquí también gratis peek, este es otro sitio web que también puedes descargar de algunos gráficos, alguna textura o lo que necesites Ahora, volviendo a nuestro proyecto aquí, tenemos todos los elementos que necesito. Voy a cambiar el color de esta flecha. Directamente aquí, puedo cambiar el color rojo. Lo primero que voy a añadir es esta flecha que creé por mí mismo. Quiero aplicar esta página de coral rojo. Después otro sello, también lo aplico en el otro diseño en un lado pequeño. Lo primero que tengo que hacer es aplicar las flechas de gota. Esto va a estar en cada página en la parte inferior. También las flechas cuadradas, quiero editar en la página del seleccionador de color Así que edita aquí mismo y le doy una col. Algunos elementos pequeños también pueden ser animados si quiero. Puedo animar estas flechas cuadradas porque va a funcionar para mí como guía Sigo aplicando las flechas de gota a las otras páginas. Bien, arrastra algún elemento frente a mí aquí para ver qué voy a agregar y qué no soy. Esta es la colección de colores. Voy a añadir otro sello aquí mismo en la parte inferior. Bien. Bien. Ahora voy a agregar este patrón de los puntos. Quiero editar delante de cada una de estas imágenes. Entonces como viste, siento un poco más el espacio con la manera elegante al agregar este elemento. Hacer por cada una de estas imágenes? No, él también otro sello. Lo cago, y lo voy a poner en el fondo donde es más pequeño Bien. Bien. También tengo esta plaza. Tengo que ponerlo en el medio. Voy a agregarlo a mi llave. En la parte inferior de los colores de la colección, cuando tengo la página de colección, agrego este otro rectángulo. Agrego este otro rectángulo en la parte inferior. Agrego esta imagen, y agrego también esta paleta de colores en la parte inferior, y luego voy a crear dos rectángulos y una pvision diferente Bien. Ahora voy a agregar imágenes a la sobre una de la imagen, voy a crear dos rectángulos pequeños Después agregaré un color de la misma imagen. Quiero cuando el usuario visite la página del seleccionador de color. Al hacer clic en Explorar Moe, lo llevas a esta parte de la página Ahora voy a agregar color a estos pequeños rectángulos. Con la gota para los ojos, elige el color de la imagen. Tan sencillo. Ahora voy a añadir una pequeña descripción aquí mismo. Ahora, como ven, he creado este pequeño extractor de color aquí mismo por HDML Aquí, cuando abras este archivo, puedes tener este extractor. Simplemente arrancas cualquier imagen que quieras, y por defecto, va a crear una paleta de colores y agregar esos círculos sobre Puedes mover los círculos para tener diferentes colores y darte un tipo diferente de paleta de colores. Como también puedes hacer clic en el botón más y agregas más color a tu paleta de colores, o arrastras lejos y te deshaces de parte de la paleta de colores. Con cada color, también te damos el código hexadecimal. Entonces esto va a ser muy útil para cualquier trabajo de cualquier proyecto que hagan, chicos. Entonces voy a dejártelo para ti y el material para la clase. Seguimos aplicando algunos elementos a nuestras páginas. Añadimos estos pequeños También círculos a la página de color de la colección. Ir a sumar y llenar los espacios, pero el equilibrio y la manera creativa. Como vieron aquí mismo, chicos, algo que pueden notar como esta página de color, le puse este archivo PNG que creamos en Photoshop. La imagen simplemente la puso sobre el lado de fondo para hacerla más grande también y se convirtió en parte del fondo de la página. Rellenas los espacios con este elemento gráfico. Y como viste, creamos el seleccionador de color y creamos la página para eso, y también se veía muy bien Estas son páginas opcionales que puedes crear, pero también es una forma muy agradable y creativa para que el usuario explore la colección de una manera diferente y le brinde un tipo diferente de experiencia. Ahora, terminamos todo el proceso de diseño, y vamos a iniciar el proceso de animación. 18. Aprende sobre el diseño de movimiento: I En medio del diseño digital, incluir la animación en una propuesta de diseño visual puede marcar la diferencia entre un excelente sitio web y uno regular. Por lo tanto, en esta lección, hablaremos sobre el diseño de movimiento. El principio fundamental a tener en cuenta y la oportunidad y las herramientas disponibles que tenemos hoy en día para crear animación para la web. Empecemos. Una vez que terminemos la etapa de diseño visual de nuestro proyecto, podemos comenzar a agregar interacción de animación y otros elementos gráficos. Eso agregará mucha interactividad a la propuesta, y eso hará que nuestro diseño sea mucho más interesante En esta lección, hablaremos sobre el diseño de movimiento, que abarca toda la propuesta de animación que vamos a crear en nuestro sitio web. Para comenzar, hablaremos varios principios básicos de animación, que nos permitirán dejar de animar propuestas que son muy innovadoras y que tienen mucha personalidad El primer principio a tener en cuenta es la velocidad, que se refiere a la duración de la animación desde el principio hasta el final. Si la duración es corta, digamos menos de un segundo, haremos que el elemento se mueva muy rápido. Pero si la duración es mucho más larga, haremos que la animación se vea mucho más lenta. Y el segundo principio a tener en cuenta es Ethen. ¿Cuál es la aceleración o la aceleración de los elementos? ¿Por qué sucede la animación? Muchas animaciones por defecto son lineales, lo que las hace parecer un poco duales y serias. Pero jugando con este elemento, podemos crear animaciones que sean mucho más expresivas y con mucha más personalidad. Para entender este principio, con mayor claridad, existen herramientas que nos permiten visualizar el cambio en velocidad y flexibilización y así entender cómo cada uno afecta a nuestra animación Por ejemplo, este sitio web llamado eins.com, nos permite jugar con diferentes valores para entender los cambios entre uno y otro Para iniciar la duración o velocidad, que se refiere a cuánto tiempo puede tomar una animación desde el principio hasta el final, en este caso, el valor predeterminado es de 1,000 milisegundos. Eso es 1 segundo. Si cambio este valor a algo mucho más pequeño, podemos ver que la animación pasa mucho más rápido. Voy a dejar el valor en mil. Y en el lado izquierdo, podemos explorar la flexibilización. Esta es la aceleración o la aceleración de los elementos. La flexibilización se visualiza con las curvas que son equivalentes al valor matemático Fácil en significa que nuestra animación se va a acelerar hacia el final. Y a medida que cambio el valor de lo fácil en, vemos que esta aceleración se vuelve mucho más evidente. Y a la inversa, la salida fácil significa que nuestra animación se acelera al principio. Y luego se desaceleró a medida que llega el final. Como podemos ver en este ejemplo, cada una de estas opciones de aceleración obtuvo un valor diferente en la curva segura. Este valor se puede entregar al desarrollador del proyecto para asegurarse de que la animación es como la estamos imaginando Por último, lo fácil de entrar hace que la animación se acelere al principio y también al final, lo que permite una comprensión más profunda de la flexibilización y la velocidad Podemos empezar a generar animaciones que sean mucho más interesantes y tengan mucha más personalidad. Por ejemplo, jugando con los valores de flexibilización y velocidad, podemos lograr una propuesta de animación como esta Podemos ver cómo se mueven la propuesta de animación y otros detalles. A medida que la persona se desplaza, intentan ser reflejo de la marca. Bien. Esto nos lleva a un punto muy importante, lo que vamos a utilizar en nuestra animación. Es a través de los atributos de la marca con la que estamos trabajando. Esto guiará a muchas de las decisiones que tomemos a la hora de la animación. Y entonces sucederá lo mismo si la marca es irreverente. Por ejemplo, esta marca de los dispositivos de ayuda se comunica de una manera muy clara y muy directa con el usuario, lo que se refleja en esta propuesta de animación que utilizan una velocidad muy baja y movimiento muy acelerado para animar el elemento de la página, como el texto y la ilustración Otro caso diferente es este sitio Melhip entrega de dumpling Este sitio web quiere crear una experiencia cercana a la ganancia de video. Por lo tanto, usa una animación mucho más expresiva. Y con los recursos como rebotes y otro elemento para que tu animación sea mucho más entretenida y no simplemente para comunicar el mensaje de manera directa Y por último, esta marca de artículos para el hogar, intenta ser mucho más delicada y sutil en la forma tal como se presenta en su página web. Lo que también se refleja en la animación, que tienen una velocidad mucho más lenta y movimientos muy sutiles que van de acuerdo con la personalidad de la marca. Para nuestro proyecto, vamos a utilizar animaciones más interesantes. Se llama Parallex Animation. La animación Parallex es una técnica de diseño de sitios web cual las imágenes del suelo se mueven a un ritmo más lento que para la imagen del suelo, creando una ilusión de profundidad e inmersión, como mirar por la ventana de un automóvil cerca del objeto, difuminar rápidamente y paisaje parece moverse mucho más lento Vamos a ver cómo hacerlo y aplicarlo. Por ejemplo, para un proyecto como este, es necesario compartir referencias de ejemplo con el cliente. Para alinearse para el tipo de animación que van a implementar en el desarrollo. Por lo tanto, es muy importante alinearnos para las personas que se encargarán de implementar la animación. Desde las herramientas, la cantidad de animaciones o el esfuerzo por implementarlas, puede variar según el proyecto y el tiempo que tengamos. Por último, estos son los programas que más uso y recomiendo para crear animación para página web. En primer lugar, está después del efecto, que es uno de los programas más utilizados en el mundo. En segundo lugar, hay un ate que es una herramienta que permite exportar la animación que hemos realizado después del efecto en el formato que facilitan la implementación de esta animación en la página. Por último, está el SOC verde, que es una biblioteca de códigos cuada para la animación y muy vale la pena aprender Si estás interesado en el desarrollo de la página seguro. Una vez que terminamos la propuesta de animación, avanzamos en la creación de la interacción y la micro interacción en el sitio web. 19. Creación de la animación de paralelo vertical: Oh Para crear una micro interacción en la interacción del usuario, debemos entender qué podemos implementar con nuestro sitio web, qué son y cómo crearlos. Aquí entramos en detalle sobre el tema esencial para el diseño web. Empecemos. Una micro interacción en un producto es una interacción que permite o ayuda a los usuarios a completar la tarea, ya sea yendo desde la página de inicio a través del proyecto hasta llegar y sobre. micro interacción se presenta en todas partes en el celular, en la computadora, en nuestro electrodoméstico, o incluso en el entorno En el diseño digital, tenemos varios ejemplos. En botones, el scroll o en la barra de navegación. Las micro interacciones juegan un papel muy importante en la experiencia del usuario ya que nos ayudan a mejorar a través de la interactividad, la usabilidad de un producto Te voy a mostrar algunos casos para el estudio de trabajo. Su diversa micro interacción, se habían implementado bien. Por ejemplo, este sitio web, los elementos aparecen de una manera hermosa hace que el usuario sienta ya la experiencia. Parece que tienes que explorar más el sitio web. En este sitio web, la micro interacción de cómo detecta enter. Se tuvo que dar la idea a los usuarios de que va a ver algo muy interesante. En este sitio web, también tienes micro interacción donde invitas al usuario a abrir el menú, para poder navegar por las otras secciones tal y como se han implantado. El logo está bien parado y el elemento comienza a pasar por encima. Da una muy buena legibilidad del proyecto y también una forma de pantalla para interactuar con él. Ahora vamos a iniciar el proceso de nuestra interacción. Lo primero que necesitamos crear aquí es la animación de paralaje vertical Y para eso, vamos a tener muchas partes y marcos separados de la página de colección. Cosa que hice, copio pegar la parte donde tenemos tonos tierra, que incluyen un rectángulo con la imagen y este gráfico de tono tierra. Lo pongo solo en un marco, luego copio y pego otro marco también. Y esta vez, voy a hacerlo más grande en la parte inferior. Entonces saco el gráfico abierto. Un lado va a ir a la cima y el otro va a apretarlo hacia abajo. Y como ves aquí, coloco el cuadrado de la naturaleza afuera así y el cuadrado de paleta afuera también y la imagen en la parte inferior. Entonces hay cosas importantes que hacer es verificar el contenido del clip. De esta manera, haces que todos los elementos que tengas fuera de la página no sean visibles. Ahora voy a ir a la opción prototipo, y voy a empezar a crear la interacción. Entonces ahora vamos a crear la interacción. ¿Bien? Así que vamos a hacer clic en Navegar a la colección dos , Animar inteligente, y ya vamos a dejarlo en 600 milisegundos Vamos a hacer una interacción de vuelta igual. Entonces la idea aquí es cada vez que hacemos clic en gráfico abierto y revelamos la imagen en su interior. Entonces como vieron justo aquí, chicos, eso es lo que tenemos la posición de cada uno de nuestros elementos. Vi aquí la parte gráfica nacida, necesito exprimirla más. Entonces yo también lo hice. Además, al inicio del marco, siempre necesitas crear flujo. Así que ya creé el flujo. Ahora, hagamos clic en el botón Reproducir y veamos cómo se ve nuestra animación. Entonces hacemos clic. Entonces hacemos clic y luego revelamos la imagen. Ahora como vimos tenemos esta posición aquí mismo, vamos a copiar también esta colección, y luego como viste la posición aquí mismo, posicioné en la parte inferior afuera como vimos en la anterior, como viste antes. Ahora, en la colección tres fotogramas, voy a empujar el gráfico y la imagen revelada hasta arriba, hacerlos desaparecer. Y la cima. Los puedes ver ahora mismo porque es un contenido de clip. Comprobado hazlo y comprueba. Vas a ver lo que hice. Lo empujo todo hacia arriba luego coloco el marco inferior en lugar de él y lo coloco de esta manera. Entonces idea que hice es que los posicioné afuera. Entonces cuando aparezcas en el marco, van a hacer así. Entonces van a animar ingresando cada cuadrado desde un lado y la imagen va a aparecer. Entonces voy a crear otro flujo, y luego voy a crear la interacción del segundo y el tercero. Vamos a tratar de ver qué tenemos a estas alturas. Entonces como viste aquí mismo, solo hago clic en Cerrar, haz clic de nuevo y arriba. No, voy a crear re interacción de los dos. Entonces de la colección dos, la Colección tres, Crear el flujo, y luego de la colección dos a la colección tres. Voy a hacer que en arrastre navegue a la colección tres, Smart Animate lento a 600 Esta vez, la animación va a funcionar por dragón. Bien, entonces viste ahí mismo, la posición en el cuadro anterior y la posición en el mainframe Esto va a crear nuestra animación y va a iniciar por arrastre. Así que vamos a comprobar. Bien, así que haz clic en Revelar arrastrar, y así es como va a aparecer la animación cuando arrastremos. Haga clic, haga clic de nuevo para cerrar. Haga clic para abrir, arrastrar y así es como va a aparecer la animación. Bien. Al fondo de esto también, tenemos este marco más largo porque vamos a posicionar como viste. Entonces en la parte inferior de este marco, no vimos esto como antes, pero en el mismo fotograma en la parte inferior, tenemos estas dos imágenes en la parte inferior. Entonces vamos a copiar este marco y ponerlo primero, necesito empujar esto aquí. Tengo que empujar esto. Entonces la siguiente colección de fotogramas f, vamos a hacer lo mismo, empujar el fotograma anterior a la parte superior y en su lugar hacer que solo aparezca una imagen aquí mismo. ¿Bien? Entonces así cuando reviso el contenido del clip, voy a mostrarte cómo se ve. Así que viste. Entonces como viste el fotograma anterior, lo empujo hacia arriba, lo hago desaparecer, y luego pongo esta imagen en su lugar, y la otra imagen, la dejo en el agujero. No quiero que aparezcan juntos. Quiero que aparezcan uno por uno, ¿de acuerdo? Entonces voy a tener distintos tipos de marcos. Va a revelar la primera imagen. Y el segundo fotograma va a revelar la segunda imagen. Hacer crear pelea de colección copiando la colección fd. Y esta vez, no vamos a empujar nada a la cima. Sólo voy a hacer que la otra imagen aparezca en el otro fotograma. Ahora en el siguiente fotograma, vamos a tener dos imágenes. Al otro marco, vamos a hacer que aparezca el botón. Entonces comencemos, haga clic en arrastrar una imagen aparece, arrastre de nuevo, aparecerá otra imagen. Lo que vamos a hacer, vamos a crear lo mismo copiando y pegando y trayendo de la página principal de la colección la otra parte, que son esas tres imágenes. No te olvides siempre de crear el flujo. Aquí ejemplo crear flujo cuatro. La animación, como viste, fue la misma que hicimos con el arrastre anterior. Navega dos, colección cuatro, y también de la colección cuatro a la colección cinco va por arrastre. Drug Navigator y Smart Animate. Y esto es que lo hicimos un poco más rápido ocho milisegundos por segundo en lugar de 600, 800, hacerlo más lento. Vamos a probarlo ahora. Yo me parece y más lento. Verifica todo. A estas alturas, esto es todo lo que tenemos. Siguiente fotograma, solo voy a copiar y pegar, y luego haré que el botón aparezca en este seis un fotograma. Hazlo más largo y trae el otro elemento de la página de colección, trae otro elemento, copia y pega y colócalos en la parte inferior del marco seis. Vamos a animar esos elementos en el siguiente fotograma. Entonces en el marco siete, primero vamos a empujar hacia arriba todo el cuadro anterior hasta la parte superior. Después lo reemplazaremos dividiremos el siguiente fotograma. Así que sigamos en el siguiente li. 20. Crear la revelación de la imagen: Entonces en esta escucha, vamos a crear la imagen revelando animación por la máscara. Entonces lo primero que tengo que hacer es crear un rectángulo del mismo tamaño de la imagen. Voy a arreglar la plaza detrás de la imagen. Sólo vamos a hacer eso tirando hacia abajo del cuadrado sobre las capas detrás de la imagen. Después selecciónalos. Deberían estar el uno sobre el otro, chicos, ¿de acuerdo? En la sección de capa. Esto es muy importante. Después selecciona ambos. Primero, quiero agruparlos. Puedes nombrar al grupo a donde yo quiera. Bien. Ahora selecciono ambos. Selecciono el rectángulo y la imagen. Después ve a la opción aquí y haz clic en Usar como máscara. Entonces como viste en la capa de aquí mismo, creó la máscara para mi imagen. Ahora lo que tengo que hacer es apretar la imagen hacia abajo. Selecciono el rectángulo, no la imagen, el rectángulo, y luego lo empujo hacia abajo para que desaparezca. Bien. Ahora también para animar el texto, así que lo voy a posicionar afuera También quiero animar este elemento gráfico, así que voy a hacer primero la opacidad cero Ahora copia el marco. Empuje hacia la parte superior el marco anterior y luego presione el otro marco en su lugar a la página. Al mainframe, aquí mismo. Ahora, lo que quiero hacer es corregir la posición del Hno. Quiero que aparezcan en el mainframe. Yo los coloco hacia abajo. Ahora hago aparecer alguna parte de la imagen. Hago que el 50% de la opacidad también aparezca del gráfico, y también empujo un poco dentro del texto Corta otro marco. Y esta vez, voy a revelar, voy a hacer la opacidad 100 y empujo el texto a la posición final Bien. Ahora voy a crear la interacción. Así que al arrastrar, Navega dos Colección siete, animación inteligente. Voy a hacerlo lento. 600 milisegundos. Haz lo mismo. Esta vez, voy a elegir la opción tras retraso, un milisegundo, un milisegundo Navega a la colección ocho, animación inteligente y lenta. Fácil de salir. Ahora voy a dejar de fluir. Empezar desde la colección seis. Vamos a Prototipo. Hagamos clic en Reproducir y veamos qué tenemos. Ahora, arrastre, aparezco, arrastre, cinta los botones, arrastre, drogo, y ahora la revisión de la imagen. Bug tiene esta animación de revelación de imágenes y animación de texto. Bien. Necesito cambiar algo en la interacción voy a cambiarlo a lento y hacerlo 600, ¿bien? Entonces esto es mejor. En lugar de salir fácil, lo cambio a lento. Ahora, simplemente vamos a copiar el mismo método para las otras dos imágenes. Antes de eso, quiero exprimir esto más abajo y ver la animación ahora. Me veo bien. ¿Bien? Entonces vamos a hacer lo mismo con las otras imágenes. Vas a copiar el fotograma ocho y luego empujar el anterior a la parte superior y luego crear las otras imágenes como hicimos antes. Entonces veamos Bien. Esta es la imagen que necesitas copiar para los demás, ¿de acuerdo? Así que sigamos. 21. Creación de la animación horisonal paralela: Yo Ahora, después de que creamos la imagen revelando con la máscara para las tres imágenes y creamos para cada imagen dos fotogramas, ahora por defecto, vamos a tener 12 fotogramas. Entonces este es nuestro cuadro 12. En la parte inferior, vamos a tener esta imagen aquí mismo como fondo, la imagen del fondo, que copiamos de la página de la colección. Ahora en la parte inferior, ponemos esta parte de nuestra página de colección aquí mismo que vamos a animar paralaje horizontal Entonces en este marco, coloco las imágenes afuera así y también la plaza afuera. Empujé el anterior un marco a la parte superior con los demás. Bien, así es como lo ves. Entonces vamos a copiar el mismo fotograma. Ahora, antes de que me pusiera a hacer clic para volver a consultar , contenido de clip, quería , contenido de clip, quería mostrarles de donde traje, chicos. Esta es la parte donde la traje toda esta parte. Todavía tenemos más partes que hacer para animar. Pero a estas alturas, vamos a animar esta parte. Contenido del clip. Entonces coloco mi elemento así, contenido del clip para hacer invisible el elemento. Vamos a empujar este marco hacia arriba. Para que puedan empujar también el fondo. ¿Bien? Empujamos poner el otro a la parte superior. Ahora colocamos las tres imágenes en su interior. Bien. Copie el mismo marco y empuje diferentes imágenes dentro y haga que la otra se deslice hacia afuera. Copia de nuevo el mismo fotograma. Esta vez vamos a empujar este marco a la cima. En cambio, vamos a hacer que primero este cuadrado aparezca por dentro, posicionarlo de esta manera. Nuevamente, copia, voy a empujar también más el fondo a la parte superior en otros fotogramas y hacer que también aparezcan las otras tres imágenes. Bien. Entonces esta es la posición final de la animación. Lo ponemos aquí mismo. En la parte inferior, quiero poner todos estos elementos finales aquí mismo. Yo sólo los colocaré ahí mismo. Tan simple, chicos, posicionen en el cuadro anterior, luego reposicionen a la forma en que quieran que aparezca Ahora para este de aquí mismo, quiero crear también una máscara como lo hicimos antes, crear una retención en el mismo tamaño de la imagen. colocas en la parte inferior, colocas detrás de la imagen, luego la aprietas hacia abajo para que desaparezca. Copia el marco, empuja el marco anterior hacia arriba. Toma el otro y luego revela la imagen. Simplemente revela la imagen. Esta vez, no creé dos marcos para lo revelador. Acabo de crear un marco. Empuja también ahora todos a la cima y ahora haz simplemente que la imagen tome su lugar en el marco principal. ¿Bien? Después haz otra copia del marco, luego haz el último elemento de la página de colección aquí arriba en el astafray Puedo ir más allá incluso y animar este animar también la paleta de colores, pero no voy a hacer eso por esta Entonces vamos a crear la interacción tan simple, ¿de acuerdo? Sigamos en la siguiente lección. 22. Creación de animaciones de componentes: Y hola, chicos. En esta clase, vamos a hacer cosas diferentes. Vamos a crear una animación de componentes. Entonces voy a tomar este diseño y luego lo voy a enmarcar en Autoayout Entonces aguantaré y arrastraré para dejar de fumar. Ahora lo primero que tengo que hacer es seleccionarlo. Selecciónelo, selecciónelo, luego vaya a Restricción aquí mismo y póntelo en el medio. Y luego simplemente copiar y pegar. Verifique la restricción en el mismo en el medio. Entonces voy a elegir la escala dos y escalarla a 1.3. Puedo cambiar la escala un poco menos como 1.2. Como 1.2, ¿bien? Ahora selecciona ambos. Vaya a la opción aquí mismo y cree un conjunto de componentes. Cambiar el nombre del componente. Voy a llamarlo layout uno. No, crea la interacción. Entonces la interacción va así. Necesitamos cada vez que pasamos el cursor sobre la imagen, necesitamos escalar. Entonces para eso, vamos a poner mientras se cierne, cambiemos a frame 23, smart animate, y luego ajustamos esta curva. ¿Bien? Ajusta esta curva así Yo creo la interacción de nuevo. Lo hice así, luego voy a los activos y busco maquetación uno. Los activos, lo encuentras a la izquierda de la página, vas a activos y buscas maquetación uno. Entonces lo sueltas y lo reemplazas con el diseño estático. Bien, ahora lo posiciona muy bien. Ahora, vayamos al prototipo y veamos qué tenemos. Entonces como ven aquí, mientras colocamos el cursor sobre la imagen, es escalar hacia arriba. ¿Bien? Así que cada vez que pasamos el cursor, la imagen aumenta de escala. Hay algunas cosas que hay que ajustar. Fue lo mismo para el otro diseño. Entonces lo que hicimos primero, agrupé la imagen y el sello juntos, y luego hice lo mismo que hice con el anterior. Yo hice lo mismo con el otro, creé la restricción central. Después lo escalé hasta 1.2. Ahora, creamos la interacción de la misma mientras se ciernen, animamos inteligentes después de que creamos el conjunto de componentes seguro Ahora, vamos a ir a los activos, traerlo de ahí y reemplazarlo con el trazado estaditico Reemplázalo ahí. Y cada vez que pongo el cursor sobre uno de estos, escalan. Necesito ajustar el tamaño y la posición. Entonces voy aquí a la página principal y trato de modificar su posición Tratando de ajustar un poco su posición. Así que arregla la posición cambiando los tamaños de mi diseño un poco ahí para que parezca manera más limpia. Bien. Bien, eso es. Sigamos con la siguiente chica. 23. Creación de la animación de transición de página: Y hola, chicos. Ahora vamos a trabajar en nuestras transiciones de página. Entonces lo primero que vamos a hacer, vamos a volver a nuestros marcos y dejar la interacción. Al arrastrar, navega a la colección 13, smart animate slow 600, podemos cambiarlo a otro número o dejarlo que digan Vemos nuestra animación, y según eso, decidimos. Entonces ahora, haz lo mismo 13-14 en drag. Mismo lento y 600. 14 a 15, lo mismo en drogas, navega a 16. Ahora en la droga, Navega. Ragate también, y luego en la droga, los mismos chicos hasta la última página Ahora lo que voy a hacer, voy a cambiar el tamaño de cada página. Así que sigue saludando el flujo y luego revisa. Creo que volver a crear el flujo. C en el piso justo aquí. Entonces, antes de limpiar nuestro trabajo, necesito revisar lo que tenemos a estas alturas. Haga clic en arrastrar, arrastrar La imagen revela paralaje horizontal, arrastre de nuevo, paralaje horizontal, luego la imagen revela aquí mismo Después también el sello upear. Bien. Entonces eso es lo que ya tenemos. Así que vamos a trabajar sobre nuestra transición de página. La flecha lo vinculará a la página principal. Toda la flecha que tengo en cada página, quiero vincularla a la página principal. Así que cada vez que haga clic en la flecha, llévame de vuelta a la página principal. Vamos a hacer click en click, Navegar a la página principal, Disol y lento Bien. Bien. Ahora, haga clic. Me llevo de vuelta a la página. No se preocupen, chicos. Hay algún elemento que no está en la misma capa. Yo voy a arreglar eso. Entonces necesito hacer lo mismo por cada flecha en la parte inferior de la página. Ahora vamos a vincular la opción de colección a la página de colección. El primer fotograma al hacer clic y disolver y los mismos vals. Ahora sigue vinculando las otras opciones. Así que vincula AS al AUTSpageo aquí mismo . Misma opción al hacer clic. Navegar, disolver y todos la misma opción. Ahora sigue vinculando los demás elementos. Ahora póngase en contacto. Si haces clic en cada opción y no aparece el botón más, eso significa que tu opción no está enmarcada. Tienes que volver a la fase de diseño y hacer clic en ella y seleccionar fotogramas antes de poder aplicar la interacción a. Bien, entonces aplico el contacto en la página de contacto y sobre nosotros a acerca de nosotros página, la colección a la página de colección. Ahora, quiero vincular este diseño a la página de selección de color. Así que cada vez que alguien hace clic en ese diseño, se lleva a la página de Color Picker Bien. Bien. Entonces también vincula de nuevo la flecha a la página principal como hicimos antes. Lo mismo para las otras flechas. Bien. Entonces intentemos ver lo que tenemos a estas alturas. Haga clic. Llévame al recogedor de color Bien. Haga clic en Cóndor Llévame de vuelta. Ahora en la página de la colección, una droga, una droga. Bien. Bien. Consulta lo que tenemos a estas alturas, pero vamos a ver más en la lista final de interacciones. Y vamos a arreglar subsff. Entonces la transición de página funciona muy bien. Cada uno lo vincula a cada página de destino. Sigamos con la última lección para la interacción. 24. Crear la interacción final: Estamos a punto de terminar nuestra lección de interacción. El paso final, vamos a retocar y arreglar algunas cosas, y también vamos a trabajar en la página del picker de color ¿Bien? Así que vamos a ver qué tenemos a estas alturas. Le hago clic en algunas cosas. Como veo, puedo hacer clic y escalar correctamente. Esto es muy bonito. cambiar la escala de los componentes. Hazlo menos. Puedes hacerlo uno por uno, 1.1 ejemplo o donde quieras. ¿Bien? Entonces, como ves ahora, funciona mejor. Ahora lo que le hice a todas mis páginas, lo arrastro desde abajo hasta que alcance el tamaño principal. Cuando tienes contenido de clip, puedes hacerlo muy fácil. Pero ahora voy a crear esta interacción de flecha voy a crear conjunto de componentes aquí mismo. Voy a hacer la primera flecha Opacidad cero, enmarcarla al principio Necesito enmarcarlo y luego copiarlo. La restricción debe estar también en el medio, y entonces la primera debe ser opacidad cero y la segunda opacidad 100 A continuación, seleccione tanto crear conjunto de componentes renombrarlo. Bien. Después después de cambiarle el nombre, voy al prototipo y creo la interacción. La primera introducción será después de retraso, un milisegundo, smart animated gentle, y hacer lo mismo para la otra Entonces es comenzar en opacidad cero luego convertirse en 100 y luego volver a opacidad cero y luego seguir así El bucle animado nunca terminará. Bien. Ahora lo reemplazaremos con el StatticerRW Iremos a los Activos y buscaremos Arrow. Así que eso es todo, ahora todo se ve limpio. Como vieron aquí mismo, lo que hice, chicos, olviden decirles aquí mismo pero la página de colección de colores, creé muchos marcos de la misma. Cada imagen, la pongo en un fotograma. Simplemente copiamos y luego hacemos lo mismo, empujamos el marco hacia arriba y lo reemplazamos por el otro marco y así hasta que el marco lasa se va a quedar así ¿Bien? Entonces, entonces agregué esta flecha en cada uno de los fotogramas. Nosotros hacemos lo mismo que antes. Crea muchos marcos. Cada fotograma debe tener una imagen diferente. Simplemente copie el marco, coloque los demás elementos en la parte inferior del marco principal y siga el mismo procedimiento. Hasta que tengas cada imagen en un marco diferente. Sólo la parte inferior de la página, dejo así más grande que la otra. Entonces, eso es todo. Limpia todas las páginas y ponlas en la posición correcta. Bien. Lo que hice por el recogedor de color es muy sencillo Enlazo cada cuadrado con el marco de la imagen que tenga el mismo color. Este es el botón de aprender más. Lo vinculo a la parte inferior de la página de la universidad de color. ¿Bien? Entonces vamos a ver yo voy a ver eso. Entonces veamos la animación. Como veis, damos click, escaneamos hacia arriba. Ahora vamos a la página de colección, arrastramos, arrastramos, arrastramos. Bien, Revisión de imagen, revisión de imagen, revisión de imagen aquí también. Parallax horizontal. ¿Bien? Bien. La revisión de imagen de esto. Bien. Ve, eso es todo. Ahora, da clic en la flecha, yendo a volver a la página principal. Haga clic en el seleccionador de color, haga clic en cualquier cuadrado Primero, vamos a revisar. Este es el componente que creamos. Ahora hago click en esto. Yo me llevo a esta imagen. Da click en la flecha, llévame de vuelta. Llévame de vuelta, elige otro color. Llévame de vuelta. La animación es la misma, disuelve y se ralentiza. Haz clic y llévame de vuelta. Ahora si hago clic, ahora puedo arrastrar hacia abajo y ver, clic en Más información y llevarme a esta página. Bien. Haga clic en la flecha y vuelva a la página principal. Ahora, sobre nosotros llévame de vuelta. Llévame a la página de sobre nosotros, flecha, contacto. Haga clic en los enlaces que van a vincularse en la fase de desarrollo. Bien, entonces eso es todo. Esta es toda nuestra interacción. Que creamos para nuestro sitio web. Se ve hermosa, creativa y ordenada. Podríamos navegar por nuestro sitio web muy fácil y todo es legible. 25. Aprende sobre gestos e interacciones: Gester y detalles gráficos en proceso de diseño nos dan la oportunidad de crear detalles que sorprenden a nuestros usuarios En esta escucha, vamos a hablar diferentes formas de agregar detalles gráficos y gester a nuestra propuesta de diseño y crear también otro nivel de interacción con los usuarios Empecemos. Estos detalles adicionales o interacción incluyen cambiar los cursores predeterminados cuando visitamos la página del sitio web y otra interacción adicional que agrega mucha interactividad con los usuarios y que además hacen que la experiencia sea mucho más divertida para El único límite que tenemos en este punto es que los gester suelen ser difíciles de implementar, ya que requieren tecnología avanzada y mucho conocimiento de desarrollo Pero por otro lado, los detalles gráficos, son mucho más simples y pueden agregar mucha personalidad al diseño que hemos realizado. Para dar un ejemplo de estos detalles gráficos, voy a mostrar varios ejemplos. Y este ejemplo de página web lo primero que ves es la barra negra en la parte inferior con el mensaje que animaba y repitiéndose. Y los usuarios lo ven mientras visitan la página web. El segundo detalle gráfico es el cursor. Cambiaron el cursor que tenía por defecto por un poco más grande y con un pixeladotyp Eso va muy bien con la personalidad de la página. Además, el cursor cambia a medida que interactuamos con un elemento diferente de la página. Por último, quisieron agregar esta sección, podremos arrastrar las tarjetas por la página. Este detalle que siente que le da mucha personalidad al proyecto, y ese es el usuario lo encuentra muy interesante. Otro También sitio web, agregan detalles que encuentran muy interesantes y también agregan personalidad al proyecto. Este detalle es una máscara que se mueve con un ratón donde se puede ver en la construcción posterior de los nodos tipográficos, y es un detalle relativamente fácil implementar en desarrollo Y además el usuario lo encontrará muy divertido. Aquí quiero mostrarte varios ejemplos de un sitio web diferente donde tirar detalles gráficos y otra interacción, hacer que la experiencia del usuario al navegar por la página sea mucho más divertida. Por ejemplo, este sitio web de Feldman Studio está lleno de interacción que permite a los usuarios crear la experiencia a medida que navegan por la página Usando la acción como un clic y arrastrar, permite a los usuarios crear la experiencia. Por ejemplo, en esta sección, los círculos en el fondo reaccionan al movimiento del ratón. También como un clic en la página y añadiendo círculos que se integran en el fondo. También crea una experiencia muy interesante. El siguiente modelo, donde a medida que muevo el ratón, voy añadiendo huecos de luz al fondo de la página Además, los detalles, aunque no forman parte de la propuesta de diseño visual como tal, son elemento que podemos proponer y agregar a la página y que hacen que el resultado final sea mucho más interesante, que lo que hacemos destaque mucho más de otra página web. Otra página web que encontré también llena de interesantes detalles e interacción Nathan Tokyo, donde cada uno de estos modelos reacciona de una manera diferente a la acción que hace el usuario con el ratón. Por ejemplo, en este modelo, la letra cambia. A continuación, hay animaciones muy divertidas. En general, cada uno de los modelos reacciona de manera diferente a la interacción del usuario. Lo que hace que la experiencia de visitar el sitio web sea muy interesante y muy divertida. Y sin duda, es una página web que siempre recuerdas. Cada uno de los modelos puede de manera diferente como ves aquí. Y algunos de estos son muy fáciles de implementar en el sitio web, y harán que lo que creemos sea mucho más divertido para los usuarios que además nuestras propuestas de diseño destaquen de las demás. Y lo que pasó en este sitio web, donde muevo el ratón, genero diferentes imágenes, además de la imagen en el centro. Sigue el movimiento del ratón para crear un efecto muy interesante. También con este sitio web, ejemplo aquí mismo como portafolio de diseñador, estás combinando animación y otros detalles gráficos más simples como el cambio del cursor o estos cambios del color en el fondo. Podemos crear una propuesta que aunque no tenga mucho contenido, sí que destaque visualmente. En este tipo de sitios web, la experiencia se crea a medida que el usuario interactúa con él, y esto es algo que nos pareció muy interesante. Otro sitio web así podemos comprobar este de Daniil Spedzek el elemento céntrico para que la televisión juegue un papel importante para la introducción Cada vez que elijo una opción, nos muestra secuencia animada en la televisión, y eso es hacer que se vea tan diferente y tan hermosa. Y cada vez que hago clic, se muestra el proyecto de trabajo en el sitio. Otro ejemplo en este sitio web donde tiene un globo iFrame, puedes interactuar, como una nave espacial dando la vuelta a este Y cada vez que equiparas para ti una opción de clic u Bola, mientras haces clic en ella, la llevas a otra página, tiene ese trabajo Esta es una forma muy interesante y creativa de comprobar las obras. Y para este sitio web, el elemento céntrico de la misma es este elemento tres D donde puedes interactuar y desplazarte para ver la obra. Parece tan simple, pero todos estos elementos le dan personalidad a este sitio web. Aquí, también el sitio web final que quiero consultar es este sitio web que te dan instaga de las personas que nacieron en los 90 o en los 80, donde puedes ver un producto antiguo, lo pone sobre una mesa, y con el que puedes interactuar Al hacer clic en cada uno de estos proyectos, te da el nombre del mismo y además te mostró video animado sobre esto es un alfabeto de nostalgia. Esta es una experiencia muy creativa y muy hermosa de tener y provocará mucha emoción para muchas personas. Este sitio web también puede crear un vínculo con los usuarios que cayeron en este error. También en la parte inferior, tenemos este teclado con las teclas clicables Cada vez que haces clic en uno de estos, te lleva a un sitio de redes sociales diferente como X o Instagram. De lo general, la experiencia de este sitio web dan mucha diversión y dan mucha felicidad a los usuarios. Así que siempre se quedó con él y puede visitar muchas veces. Por último, quiero invitarte a estar siempre muy abierto a la posibilidad que te permita diseñar y desarrollar una web ya son más las nuevas tecnologías muy interesantes y también vale la pena estudiar. Y eso también nos permitirá crear un proyecto de diseño y desarrollo web de la manera más fácil, junto con otros recursos como videos y sonido y también inteligencia artificial. Estos límites de lo que podemos lograr son cada menos con el tiempo con la nueva tecnología aparecen. Nos abre más posibilidades para hacer nuestros trabajos más creativos y más fáciles. En este punto, deberíamos haber terminado la propuesta de diseño de nuestro sitio web. Sin embargo, hay procesos que son tan importantes como el diseño para garantizar el éxito de nuestro producto una vez que finalizamos el diseño de nuestro proyecto 26. Aprende sobre la representación y los comentarios: Representación y retroalimentación. Presentación al cliente en un proceso de diseño, es importante tener una comunicación asertiva con nuestro cliente Ya que nos ayudará también a aclarar nuestras ideas y así continuar con el proyecto. Esto escucha hablaremos sobre cómo presentar una propuesta de diseño a nuestro cliente. Una buena relación con nuestro cliente, permitirá que el proyecto siga avanzando y vea la luz. Algunas de las recomendaciones para presentar al cliente son las primeras, es importante que nuestro cliente entienda cómo las decisiones de diseño respaldan sus objetivos. Además de hacerles entender el proceso detrás de cada decisión. Esto nos va a ayudar a mostrar al cliente que todos los elementos que hemos decidido, están justificados por alguna razón. Segundo, para cada punto de decisión, demostraremos que decidimos acuerdo con el brief y el proyecto de investigación. Esto quiere decir que si decidimos tomar un color, este es, por ejemplo, el rojo, vamos a mostrarte de dónde vino esa información de ese breve. Tercero, cuando se nos ocurren ideas de diseño arriesgadas más creativas, podemos mostrarle a nuestro cliente cómo las cosas los acercan a empresas que son mucho más innovadoras y además los distancian de su competencia. Cuarto, para que el cliente se dé una idea de lo que va a recibir al final. Lo que nos gusta hacer y es una buena práctica es dejar prototipo de Figna en su versión de escritorio y móvil Esto te va a acercar mucho a lo que recibirás cuando la página ya esté desarrollada. Quinto al llegar a tema de interacción y movimiento. Algo que nos gusta hacer y es una buena práctica es avanzar o mostrar el progreso de esta animación realizada en después del efecto. O también utilizamos árbitros de otros sitios web para que nuestro cliente entienda de manera mucho más clara lo que queremos lograr con el producto Seis, al final de cada una de las etapas de diseño, es importante recibir una aprobación del cliente. Esto evitará retrasos y contratiempos en el futuro. Esta otra recomendación para representar su trabajo para el cliente, otra parte importante de la comunicación con nuestro cliente es poder recibir los comentarios de ellos. Muchas veces, vemos que el proceso de retroalimentación es algo que nos limita a crear una propuesta de diseño que sea interesante y creativa. Pero si creamos este proceso manera organizada y clicamos, nos puede ayudar mucho a mejorar nuestra propuesta y a crear también algo que sea cada vez más interesante. El buen proceso de retroalimentación es muy importante para poder avanzar en el proyecto de manera organizada. Además, es fundamental crear una buena relación con nuestros clientes. Y para ahí, es muy importante. Los comentarios son precisos, procesables y visibles para todo el equipo Es muy importante que no veamos al cliente como una persona que mata la creatividad en el proyecto. Por el contrario, debemos verlo como un aliado y como parte del equipo de diseño. Recomiendo evitar retroalimentación inmediata y variable. Algunos de los comentarios pueden provenir de una reunión o de una presentación, pero es muy importante que al final, consolidemos todo por escrito. Estos son algunos puntos que consideramos muy importantes. La retroalimentación tiene que ser visible. Es importante tener los comentarios por escrito y una herramienta que permita a todo el equipo visualizarlo. La retroalimentación también tiene que ser clara. Es importante detallar en el proceso de retroalimentación, qué parte del diseño nos estamos refiriendo, por ejemplo, a qué página, a qué sección o a qué dispositivo. La retroalimentación también debe ser procesable. Es importante evitar ambigüedades y señalar lo que debería ser diferente y cómo debería ser diferente Y finalmente, hay muchas herramientas que nos permiten organizar los comentarios, como Notion, Asana o Trello Lo importante es que son herramientas que todo el equipo puede utilizar. Al final de la etapa de diseño y retroalimentación con el cliente, el último paso es asegurarnos de que lo que creamos a lo largo la etapa de diseño se refleje de la misma manera en el desarrollo. Como viste aquí mismo, todas las cosas de las que estamos hablando. Está escrito muy detalles en este archivo HTML de la guía UX UI, me creé para ti y para esta clase. Lo dejamos en la fuente material de la clase para que la abras y la uses. Es tan simple como los otros archivos HTML que creé, solo tienes que hacer doble clic sobre él y vas a aparecer en el navegador y podrás pasar por él. Ahora, en la siguiente lección, vamos a hablar de Style Guide. 27. Aprende sobre la guía de estilo: Es muy importante asegurarse de que el diseño que creamos, se implementará en el producto final. Una muy buena herramienta para estas son las guías de estilo. Aquí podemos generar reglas claras sobre el estilo de diseño de sitios web, como tipografía, color y componente entre otras cosas, que son muy útiles para iniciar el proceso de desarrollo Veamos por qué estas guías de estilo son importantes para nuestro proyecto y cómo podemos crear una. En esta guía de estilo, lo ideal es poder organizar fuentes, colores y espaciado, otro componente que utilizamos en nuestra etapa de diseño de sitios web, asegurar que el resultado final del proyecto sea tal y como lo imaginamos y diseñamos. Como recomendación, es muy importante acordar antes de dejar la guía de estilo con las personas que se encargarán del desarrollo del proyecto En las válvulas van a utilizar en temas como tipografía, color, espaciado, y De esta manera, nos aseguramos que si la tipografía se implementa en píxeles, por ejemplo, de igual manera, lo haremos en la guía de estilo De igual manera, también si los colores van a ser utilizados en hexadecimal en GB, entre otros. En Internet, podemos encontrar muchos ejemplos de guía de estilo y sistema de diseño que lo utilizamos por las empresas más grandes del mundo. Uno de los más famosos e importantes se llama Material Design by Goog Y en su página web, podemos encontrar todos los acabados y todas las recomendaciones para usar estilo y componente que utilizan en sus proyectos. Es muy buena guía para comenzar y darnos una idea de cómo construir una guía de estilo y tarde o más para completar un sistema de diseño. Por ejemplo, podemos ver la definición alrededor del color. Cuál es el uso sugerido de colores, combinaciones, el acento, los colores principales y secundarios entre otros. Esta guía integral incluyó recursos como archivo Figma, documentos técnicos para su implementación en desarrollo Como podemos ver, es guía muy extensa y muy completa, ya que hay muchos proyectos digitales que se basan en el diseño de materiales. También podemos encontrar definición, tipografía, recomendación de uso y también escala tipográfica Recomendado por Google, basarlo en sus fuentes roboto y noto Además de la sección principal de un estilo, que son color y tipografía, podemos encontrar una sección completa dedicada al componente que se rechaza en el proyecto Por ejemplo, una de las más importantes son la botella. Aquí podemos encontrar ejemplo de uso, recomendación, restricción entre otros. También contamos con sección dedicada a componentes muy importantes, que incluyen especificación de diseño para todos los conjuntos. Los ejemplos también incluyen geogs, menús, barras de navegación y muchos más recursos técnicos para No todos los proyectos digitales requieren una guía de estilo integral. Mi recomendación es comenzar con los estilos y componentes más importantes que sabemos que se utilizan a lo largo del proyecto y crecen paso a paso a medida que el proyecto escala. Otro ejemplo que también me pareció muy interesante es el sistema de diseño de IBM, que se llama carbono. Podemos encontrar los diferentes lineamientos del principio de diseño más importante que utilizan para crear a todos sus proyectos digitales. Al igual que en el diseño de materiales, hay recomendación y explicación sobre el uso del color además del uso de la tipografía, que en el caso de ABM se llama La escala tipográfica, el uso de diferentes estilos de restricción entre otros A partir de este sistema de diseño, cabe destacar la sección de movimiento, ya que refleja muy bien cómo podemos dar vida a los valores de las marcas como productividad y expresión en propuesta de animación. Además, incluye otros temas importantes, que es el espaciado también definimos la escala de espaciado basada en píxeles. Por último, podemos ver que tienen secciones completas. Para muchos componentes, por ejemplo, formas en cada uno de los campos, barras de progreso que se pueden utilizar en un proyecto digital diferente. Este sistema de diseño es muy completo y está muy bien explicado. Por lo que recomiendo echar un vistazo, entender cada uno de los componentes que proponen tomarlo como ejemplo a la hora de crear un sistema de diseño. Para nuestro proyecto que sea fácil de entender, que pueda ser utilizado también por todas las personas en vacío. Último ejemplo del que quiero hablar en el sistema de diseño de chimpancé de leche, aunque es mucho más sencillo que los demás que acabamos de ver, contiene imprescindibles para entender cómo crear un proyecto digital basado en la marca Por ejemplo, definición de color, comienzan con el color principal de la marca, y agregan color funcional y color de retroalimentación para dar un mensaje de éxito o error de color de acento para aquellos momentos en los que queremos llamar la atención. Como podemos ver la definición de cada color contienen lo esencial para poder utilizar en el proyecto. Por ejemplo, el valor higadisimal definición de inaccesibilidad para saber si cada color se puede utilizar con un texto en blanco o negro o con un Este sistema de diseño también explica de manera muy clara el uso de las calificaciones para que los equipos de diseño y desarrollo puedan utilizarlas. Y para la tipografía, también se explica muy fácilmente cómo usar cada uno de los pesos y sitio, tanto en titulares como en párrafo Y también incluyen el componente más común como botones en sus diferentes estados, tablas y elementos más globales como la navegación. Como podemos ver, este sistema de diseño es mucho más concreto que los otros que vimos. Pero es muy buena guía para el equipo de diseño y desarrollo, incluye lo necesario para poder crear un proyecto digital utilizando la marca chimpancé macho Además, es una gran herramienta para ahorrar tiempo en el proceso de diseño y desarrollo. De esta manera, también nos aseguramos de que el resultado de nuestro proyecto, sea lo más consistente posible. Para continuar, creo que es muy importante mirar sobre la diferencia entre la guía de estilo y el sistema de diseño. Dado que estos términos, a menudo se utilizan para referirse a temas similares. En resumen, la guía de estilo es una definición básica de elemento, como la tipografía, el color, espaciado y los componentes básicos para ser utilizados en el desarrollo Por otro lado, el sistema de diseño se utiliza en proyectos mucho más complejos y robustos se suele crear cuando hay un proceso constante entre el diseño y el desarrollo de agregar, editar y eliminar componentes. Hay mucha información sobre el sistema de diseño en Internet. Ya que es tema muy relevante hoy en día, sobre todo en la empresa de tecnología que este proyecto requiere una actualización constante y mucha consistencia a medida que un proyecto se hace más grande. El componente que nos permite utilizar elemento que se utilizará en otras páginas, toda variación del mismo componente para ser utilizado en nuestro proyecto de diseño. Un ejemplo de esto, estos son todos los estados que puede tener el arranque Y la última herramienta que recomiendo para aprender es el autoayout que permite crear un grupo de diferentes elementos y los significa de una manera muy fácil Para mi proyecto, suelo usar estos sitios web para tipografía Ejemplo, A tipo de fundición. Este es un sitio web muy interesante para el peso tipográfico Comprobamos cómo se ha aplicado el teléfono. Hay muchas opciones, y además se representó de manera muy hermosa. La definición principal me parece muy importante para entregar el proyecto de desarrollo. Por ejemplo, lo primero es hacer una guía sobre tipografía, y definir todos los estilos que van a utilizar para los titulares, párrafo y otros elementos de texto que puedan ser utilizados en la propuesta de diseño Cada una de estas definiciones incluye el uso que pretendiste darle a cada uno de los tamaños y pesos de fuente. Por ejemplo, se trata de grandes titulares como H uno, H dos y H tres, que luego definirán los valores de estos teléfonos. De esta manera, la persona que va a desarrollar el proyecto puede encontrar la definición exacta de la tipografía para cada uno de estos usos que están Esto es muy útil y ahorra mucho tiempo en el proceso de desarrollo. Asegúrate también de que el estilo se va a implementar tal como nos estamos imaginando. De la misma manera definimos los estilos de los párrafos e incluimos desde el tamaño como espaciado, los pesos de la fuente entre otros. Y en esta parte, quería incluir otro estilo de texto que usamos a lo largo de la página, pero no entran en la definición de titular o párrafos. Por ejemplo, números, enlaces, ya sean internos o externos. Creo que con una definición tan clara de fuente como esta le hará la vida mucho más fácil a la persona que va a estar a cargo del desarrollo del proyecto. Y además, se puede crear consistencia en el diseño para pantallas como móviles o una tableta o pantallas mucho más grandes. Y este intestino también incluye alguna definición de color. Ejemplo, el color principal de la marca con sus respectivos cerdos un código decimal, lo que hace que sea mucho más fácil de implementar en el desarrollo del proyecto y también los colores complementarios, que utilizamos más que nada en los filtros de la clavija. De igual manera, esta sección de un color se puede seguir complementando, por ejemplo, con diferentes tintes o tonalidades para cada color que podemos usar en diferentes acciones como el Hover sobre los botones o en elemento complementario como ilustración o iconos Antes de continuar, quiero mostrarles algunos ejemplos de mi trabajo anterior. En este ejemplo de sitio web, lo uso elemento muy sencillo para hacerlo especial. Jugué con un errata y creé este círculo geométrico que siguen dando vueltas. Y también la transición la hago tan hermosa cada vez que hago clic en la parte inferior, muestra el color y me lleva a una página diferente. Otro sitio web de A que creé también es más sencillo, haciendo que esta barra en la parte inferior esté animada en bucle, y el usuario pueda interactuar con el spher con el que están asentidos el uno al Se puede ver si hago clic en el trabajo. No tengo imágenes aquí mismo, pero así es como te vuelves platillo entre es muy sencillo, pero también muy creativo. Este sitio es muy agradable porque trabajé en la interacción de las barras de colores aquí mismo. Cada vez que flojo, puedo interactuar con estas barras Ellos son el elemento céntrico de mi sitio web. Y luego cuando elijo cada una de estas opciones, se puede ver cómo funciona la transición. Conté tanto con los colores en este sitio web para dejarlo de esta manera. Ahora, como ve aquí para entregar nuestro proyecto de desarrollo, siento que su definición básica de color es más que suficiente. Y por último, también quería agregar, puse una guía para un color aquí mismo. Se puede verificar. Y por último, también, quería agregar una guía sobre espaciado, donde definamos los espacios que tiene que estar entre todo el elemento de la página. Para esta guía de espaciado, confío en ocho píxeles que ya se explicaron en las lecciones anteriores y también defino la relación entre espaciado de diseño en escritorio y móvil. Por eso es mucho más claro para el desarrollador, cómo definir este espaciado en la hoja de estilos. Y también podemos seguir completando esta guía de estilo con el componente que utilizamos siendo reutilizado a lo largo de la página web Por ejemplo, botones enlaces entre otros. Sin embargo, es un muy buen comienzo. Alinearse con el desarrollador del proyecto y aquellos que garanticen que el estilo que estamos proponiendo en Figmre se refleje la misma manera en la etapa de desarrollo del Y también creo que más importante guía de estilo es tener una muy buena comunicación con las personas encargadas del desarrollo, todo estilo y componente de nuestro proyecto. Al finalizar todas las etapas de diseño, el siguiente paso es el desarrollo del proyecto. Por aquí, terminamos todo el diseño del sitio web que partimos del brief creativo y la investigación y la estrategia para ir a lo largo del wireframing, la etapa de diseño, y también los elementos gráficos, la interacción, el diseño de movimiento Todas estas lecciones por las que pasamos te hacen crear un diseño de sitio web bueno, limpio y legible para cualquier cliente, para cualquier proyecto. Espero que hayas aprendido todo lo necesario para iniciar tu viaje. Eso es todo y espero que esto sea muy útil para usted. Gracias por tomar la clase. 28. Proyecto de clase: En la culminación de este curso, aplicará todas las habilidades y técnicas que haya aprendido para diseñar un sitio web completo centrado en el usuario para un concepto a prototipo interactivo Tu reto es seleccionar cualquier nicho de negocio o idea que te inspire, ya sea una cafetería local, una marca de moda sostenible, una startup tecnológica única o incluso una cartera personal. Luego creará un sitio web receptivo , atractivo y altamente interactivo que sirva perfectamente a su propósito y público objetivo. Este proyecto no es sólo un ejercicio. Es su oportunidad de construir una poderosa pieza de portafolio, mostrar en caso de que su capacidad para enfrentar un desafío de diseño FOUXUI de principio a fin para un escenario del mundo real de su elección