Teoría del diseño gráfico: diseño web y digital

1. Introducción: Alguna vez te encuentras admirando el menú principal de un sitio web, una barra ta única en una vuelta móvil, un ícono divertido o una animación genial de un logotipo Si ese es el caso, te va a encantar este curso. Todo lo que no se imprime y aparece en forma digital cae en b y el diseño digital, que es un subconjunto del campo más amplio del diseño gráfico. En este curso, cubriremos todo lo que necesita saber sobre diseño web, interfaz de usuario y diseño de experiencia de usuario, tamaños de pantalla, formatos de archivo y mucho más. También profundizaremos en todas las áreas especializadas dentro de este campo como el diseño de Ab, el diseño de iconos, el diseño redes sociales, el diseño presentaciones, la publicación digital, diseño de movimiento y aprenderemos cómo funcionan los sistemas de diseño y las campañas publicitarias de banner. Analizaremos cientos de proyectos de diseño ab y digital para darle una comprensión sólida de las reglas y términos importantes con los que necesita estar familiarizado si planea ingresar al sector. Junto con el emocionante proyecto de clase que espero que completes al final del curso, también tienes la hoja de trabajo de análisis y el glosario de términos para ayudarte a practicar todo lo que has aprendido Espero que estés tan emocionado como yo de comenzar y sumergirte en el mar del conocimiento y hermosos ejemplos de diseño gráfico. 2. Roles en este sector: De igual manera al diseño de impresión, en caso de que esté planeando especializarse en diseño web como diseñador gráfico, también tendrá que conocer un par de términos esenciales. Estos te ayudarán a comunicarte mejor con otros profesionales de la zona, con desarrolladores y también con tus clientes. Pero ante todo, intentemos definir lo que en realidad es el diseño web. Si bien mucha gente prefiere usar este término para todo lo relacionado con el laboratorio y la creación de sitios web, incluyendo la codificación y el desarrollo de los mismos, se usa con mayor precisión cuando se refiere al usuario experiencia y todos los demás aspectos frontales de un sitio web. Un diseñador web normalmente trabajaría en la apariencia, diseño, la estructura y el contenido de un sitio web. Un diseñador web no es el principal responsable de codificar un sitio. No obstante, algunos conocimientos de HTML, CSS, JavaScript, y otros lenguajes de codificación pueden ser muy útiles en este campo. Ahora en caso de que quieras ser muy específico y quieres asegurarte de que nadie confunde tu rol con alguien que también está haciendo codificación. También puedes llamarte diseñador visual que es puramente responsable de la estética de nuestro sitio web, que puede incluir botones, menús, fondos, etcétera. En este curso, también estaremos hablando mucho sobre diseño digital y el papel de un diseñador digital. Y la principal diferencia entre un diseñador web y el diseñador digital es que si bien un diseñador web se centra puramente en diseñar sitios web, y el diseñador digital tiene un conjunto más amplio de habilidades y conjunto de responsabilidades, que pueden incluir el diseño y creación de banners y banners campañas y emisiones, motion graphics, elementos interactivos, videos, y también sitios web. Por lo que hay una superposición entre estos dos roles y siempre vale la pena aclararlo. Siempre que estás solicitando un empleo, ¿cuáles son las responsabilidades reales que esperan que cubras? Ahora para entender mejor los roles dentro del sector del diseñador web hace un par de términos adicionales que pueden ayudarte. Probablemente hayas oído hablar de front-end y back-end y simplifican las cosas, cualquier cosa que ver con el diseño y el aspecto de un sitio se consideraría parte del desarrollo front-end. Pero esto también incluye HTML, CSS, codificación JavaScript, optimización de motores de búsqueda, accesibilidad, problemas entre navegadores, etcétera y así sucesivamente. Y de nuevo, como diseñador web, es posible que deba involucrarse en todas estas cosas. Entonces cualquier cosa que se relacione con el aspecto front-end del desarrollo de un sitio, Lo que rara vez es una tarea de un diseñador web es manejar también tareas de desarrollo back-end. Por lo que esto se trata más de administración de bases , arquitectura de servidores, seguridad, transformación de datos, backup y así sucesivamente y así sucesivamente. Ahora bien, si vienes desde un punto de vista de diseño visual y gráfico, esta es probablemente la parte menos atractiva del diseño web, pero esto obviamente también es crucial para que las cosas funcionen. Y aunque tengas un blog sencillo, por ejemplo, aún tendrías que tener un sistema de gestión de contenidos funcionando en segundo plano. Por lo que aunque no sea manejado por un profesional que todavía son cosas corriendo en el back-end que están manejando todos los datos e información que se muestran o las cosas que son los usuarios interactuando con. Hay un término adicional que puede haber escuchado, el desarrollo completo de la pila, que incluiría tanto el frente como el backend juntos. Ahora, la experiencia del usuario es otro tema grande y en realidad lo estaremos cubriendo con más detalle en un video separado. Pero en cuanto al diseño web, los tres términos y tareas esenciales en los que se requiere trabajar y mejorar tanto como sea posible. En primer lugar, es la navegación para la que tenemos menús, botones, elementos desplegables, y todo tipo de elementos interactivos en un sitio. Y mientras que en el diseño de impresión, esto suele ser algo bastante sencillo y bastante lineal. Por ejemplo, de una revista, tendrías la Tabla de Contenidos que ayuda a la navegación. Y luego tendrás números de página en los hilos. Pero además de eso, realmente le toca al lector pasar las páginas físicamente y pasar de un artículo a otro. Comprador con un sitio web, hay opciones y posibilidades casi ilimitadas o caminos que un usuario puede tomar. Y tú como diseñador web, que pensar en formas de asegurarte de que los usuarios puedan encontrar fácilmente todos los elementos de navegación y que toda la experiencia en el sitio sea perfecta y conveniente. Ahora hay un término aún más amplio cuando se trata de la experiencia de un usuario con un lado que es usabilidad. Y esto es algo que incluye la navegación, pero también cualquier otro aspecto que haga que un sitio sea utilizable. Entonces, por qué la navegación se centra más en pasar de una página a otra, por ejemplo, la usabilidad incluiría también el diseño general de una página web. Qué tan grandes se comparan ciertos elementos con otros, o qué tan alto es el contraste entre elementos. Pero en general, se trata principalmente eliminar cualquier posible obstáculo que pueda impedir que el usuario encuentre la información relevante que está buscando. Y por último pero no menos importante, la accesibilidad también es muy importante, lo que asegura que las personas con discapacidad auditiva o de visibilidad. También podremos utilizar el sitio sin ninguna frustración o dificultad. 3. Términos básicos de diseño web: Ahora que hemos cubierto las principales responsabilidades de un diseñador web, podemos enfocarnos en un par de términos adicionales antes de saltar a hablar de cosas más complejas. Empecemos con algo sencillo. Por encima del pliegue hay algo que usamos para referirnos a las partes o elementos de un sitio que aparecería al principio visible en la pantalla del usuario, ya sea que estén usando un escritorio o laptop computadora o un dispositivo móvil. Y debajo del pliegue se referiría a todos los contenidos adicionales de la página por la que los usuarios tendrán que desplazarse hacia abajo. Ahora bien, aunque esto sería más comúnmente separación vertical en caso de una navegación horizontal dentro de un sitio, también podría tener por encima del pliegue la izquierda y luego por debajo del pliegue más allá del derecho. Pero en general a lo que siempre debes prestar atención es que lo anterior la sección de pliegue de tu diseño tiene que ser ya muy atractiva e informativa para asegurar a quien esté visitando el sitio se irá inmediatamente y pasarán un poco de tiempo explorándolo y ojalá se queden lo suficiente para encontrar lo que están buscando. Se puede considerar por encima del pliegue de un sitio como el frente de la tienda, que tiene que ser lo suficientemente emocionante para que los clientes realmente decidan entrar a la tienda o a la portada de una revista o un libro, que una vez más tiene que ser lo suficientemente emocionante para que los usuarios comiencen a interactuar con el producto y eventualmente tomar la decisión de comprarlo. Ahora puede que te estés preguntando cómo podemos especificar la ubicación exacta de esta carpeta, donde el desplazamiento real está empezando por el lateral cuando hay tantos tamaños de pantalla diferentes. Esto es en realidad algo que cubriremos con más detalle cuando hablamos específicamente de tamaños de pantalla. Pero ya que estamos hablando por encima del pliegue y de lo importante que es esta sección en cuanto a la retención o compromiso de un visitante. El elemento o componente más común que ocuparía la mayor parte de esto por encima del área de plegado es a lo que nos referiríamos como la sección de cabecera o héroe. Y esta información necesita realmente introducir el lado para que pueda tener el título o logotipo, también un eslabón, una imagen o ilustración convincente, elementos de navegación, tal vez testimonios y cualquier prueba adicional o puntos de venta únicos que valga la pena mencionar directamente al principio. Ahora además de hacer que esta sección de héroes realmente destaque y atractiva, también es una buena idea indicar que hay más contenido para el down, lo que hará que la gente quiera desplazarse hacia abajo y explorar el resto de los contenidos. Recuerda que al igual que en el diseño impreso, la primera impresión es extremadamente importante. Y por eso es tan importante conseguir la cabecera o sección de héroes ¿verdad? Ahora, en caso de un sitio web complejo, como con Adobe, al principio, podría parecer que la sección de encabezado o héroe es bastante simple y no tiene muchos elementos. Pero esto es sólo para mantener las cosas simples y se asegura de que la gente encuentre lo que busca rápidamente sin abrumarlas. Y observa cómo aquí en el área principal de navegación, además del logotipo, tenemos estas cinco categorías principales, por lo que 12345 y luego algunas opciones adicionales aquí en la búsqueda correcta, la información de la cuenta, y un menú de acceso rápido, que puede llevarte directamente a una herramienta específica. Pero veamos qué pasa si hacemos clic en, por ejemplo, la creatividad y el diseño. Ahora ves que la mayor parte del área de cabecera es tomada por este elemento al que nos referiríamos como un mega menú, cual abre muchas más opciones de navegación para los usuarios. Ahora dando todas estas opciones al principio donde han sido extremadamente abrumadores. Por eso era importante mantener todos estos ocultos bajo un solo botón. Generalmente, lo que es una buena práctica es limitar las partes principales que un usuario puede tomar de un área de cabecera a alrededor de siete, dar o sacar de las cuales se deben colocar las más importantes en algún lugar del centro, como en este caso, administrar su cuenta es probablemente la más importante y realmente se destaca. Por lo que nos hace querer hacer click sobre él. Entonces este es probablemente el segundo más importante. Y luego todo el resto de las opciones de navegación que tenemos aquí arriba, una vez más, categorizar y facilitaron el acceso a través de estos mega menú. Otro buen ejemplo es el sitio de Apple, donde una vez más, tenemos un diseño muy sencillo enfocándose en el producto que se promueve en este momento, dando dos opciones principales de navegación para conocer más, descubrir más sobre el producto, o para ir a comprarlo de inmediato. Y todas las opciones adicionales que puedes encontrar en el lateral están todas categorizadas y ocultas bajo estas opciones aquí en la parte superior. Ahora, recuerda, solían ser sólo como cuatro o cinco elementos aquí, pero simplemente sigue creciendo porque Apple está haciendo cosas muy diferentes. Pero aún así es un menú bastante simple para pasar. Y una vez más, si hago clic en alguna de estas opciones, como Mac por ejemplo, obtendremos muchas opciones adicionales para elegir. Ahora probablemente ya sepas que los elementos de navegación más importantes de un sitio o los botones. Y a la hora de diseñar un sitio, también hay un par de términos específicos que usaríamos para definir un botón que mayoría de las veces tendría una etiqueta, tal vez un icono, el fondo, que también podría tener un borde a su alrededor, dependiendo de la estética del sitio, también podría tener esquinas redondeadas, que se define con el radio fronterizo. Y luego para especificar la distancia entre el ícono y la etiqueta y el borde del botón, nos referiríamos como relleno. Entonces tendrías encabezados superior, izquierdo , derecho e inferior. Y el padding es en realidad un término general que se usa no solo con botones, sino con casi todos los elementos que tendrías en un sitio web, definiendo el espacio directamente alrededor del contenido en sí. Y lo que sigue al relleno es lo que denominamos frontera, que nuevamente se define por las cuatro direcciones. Entonces arriba, abajo, izquierda y derecha. Y luego finalmente, la mayoría de los elementos también tendrían un margen, que se puede pensar como el espacio negativo o espacio en blanco en el diseño web. Entonces esto es algo que se define para mantenerse vacío, asegurándose de que haya suficiente distancia entre todos los demás componentes o elementos del costado. Volviendo a hablar un poco más sobre botones, también están los estados que necesitarás estar diseñando individualmente. Y la mayoría de los botones tendrían un estado normal o estado de reposo. Hay un estado de flotación, que es principalmente importante en el escritorio y en los dispositivos móviles. Pero las interacciones están sucediendo tocando en lugar de hacer clic con el ratón y el estado activo cuando la interacción real está sucediendo dependiendo del botón, también puede tener mucho de opciones adicionales, como las que puedes ver aquí. Puede tener un enfoque de carga de progreso estados deshabilitados también. Y además del tipo genérico de botones que hemos visto hasta ahora, hay muchos tipos adicionales de botones como casillas de verificación, botones de radio, radio, interruptores, chips de elección o multi-selección chips. Y tú como diseñador, siempre debes usar esto siempre que sean más aplicables. Por ejemplo, con botones de opción, querría que el usuario seleccione una opción específica. ¿ Por qué marcamos casillas? Los usuarios esperarían poder seleccionar múltiples opciones. Otro término común que utilizamos principalmente para botones es llamado a la acción o CTA. Estos en realidad pueden significar cualquier elemento del lado que ayude a los visitantes a tomar una decisión, ya sea sobre comprar un producto o inscribirse en un boletín informativo, sea lo que decida utilizar como un elemento llamado a la acción, siempre debe destacarse y ser muy prominente a un costado. 4. Términos adicionales de diseño web: Ahora cuando se trata de referirse a los colores en diseño web, usaríamos los códigos hexadecimales o números hexadecimales, que es un sistema base de 60 números, lo que significa que hay 16 símbolos incluyendo números y letras a definir colores. Entonces, por ejemplo, si muestro uno de estos colores de este lado y vengo al selcionador de color en Photoshop, podrás ver este código hexadecimal aquí en la parte inferior. Entonces éste, por ejemplo, es d 27643. Pero antes de tratar de entender exactamente lo que esto significa, también hay una pequeña advertencia importante aquí en Photoshop. Este pequeño cubo se refiere a cualquier problema para Vab con un color particular. Esto en realidad no es un color seguro para la web. Ahora, ¿qué significa eso? Esta es en realidad una paleta muy limitada de solo 216 colores que se estandariza y se muestra consistentemente en todos los navegadores. Y en caso de que quieras encontrar el color similar más cercano que se considera sitio web para que tengas que hacer es hacer click en este cubo y puedes verlo desplazado ligeramente hacia la derecha. Y podemos comparar la selección original y esta nueva entre sí. Pero si queremos ver en los colores web, también podemos dar click en esta opción aquí a la izquierda. Y como se puede ver, es muy limitado porque cualquier color que yo escoja alrededor esta zona resultaría en los mismos valores y el mismo código hexadecimal. Entonces si vigila ese código hexadecimal, no importa donde haga clic dentro de esta región, siempre nos va a dar el mismo código. Pero si apago los únicos colores web, podremos movernos y ver cómo se está actualizando ese código hexadecimal. Ahora, la buena noticia es que ya no tienes que preocuparte por los colores seguros web porque sería una fracción muy pequeña de usuarios que podría experimentar cualquier problema con no web safe colores. Y se reduce principalmente a las pantallas son monitores que están utilizando. Y si son mayores de, digamos, diez o 15 años. Pero a pesar de que los colores seguros web no son importantes, los códigos hexadecimales siguen siendo muy importantes de entender porque esa es la forma en que cada lenguaje de codificación se referiría a los colores. Y en caso de que te interese, los dos primeros símbolos dentro de un código hexadecimal sí harán referencia a la intensidad de los rojos fuera de RGB que el segundo set, que es el tercero y el cuarto símbolos, sería el intensidad de greens. Y por último, estos dos al final serían la intensidad del azul. Entonces estos son los canales RGB o rojo, verde, azul. Y cuando el código hexadecimal muestra un 00, eso no es intensidad, lo que significa que no hay color usado. Si bien si los dos símbolos que F, F, Eso significa que es plena intensidad. Para que así tuvieras el color real en sí. Y como RGB es un modelo de color aditivo, cuando tienes todos los tres canales vacíos o configurados en 0, entonces te pondrías negro ya que el color y valor tendrían todos ellos son de intensidad completa, por lo que los tres colores totalmente visibles, entonces sumarían siendo blancos. Ahora, no te preocupes, en realidad no tienes que aprender ningún código hexadecimal o cómo describir colores específicos con estos códigos, solo es útil saber cómo funciona. Pero la mayoría de las veces sería capaz de seleccionar colores con una herramienta similar como el selcionador de color en Photoshop, sin importar qué aplicación esté utilizando para diseñar un sitio. Y por último pero no menos importante, solo hay un par de términos adicionales que vale la pena mencionar a la hora de desplazarse. En primer lugar, ¿qué es un elemento fijo o pegajoso? Esto es en realidad algo que permanecerá en la pantalla mientras todos los detalles adicionales se desplazan hacia arriba y hacia abajo. Si bien este ejemplo está mostrando un teléfono, por supuesto esto también se aplica a las versiones de escritorio de los sitios. Entonces, por ejemplo, en nuestra página web, si me estoy desplazando hacia abajo, se puede ver que el área de navegación principal permanece visible. Entonces eso sería un elemento pegajoso o fijo. Ya que estamos de este lado, también hay otro detalle interesante aquí que podemos ver. Esto es algo que se llama scroll de paralaje. Cuando se pueden ver detalles moviéndose en diferente velocidad en el lateral. Por lo que la sección real sobre la membresía Pro se desplaza a cierta velocidad. Pero los detalles de fondo o el gráfico en el fondo de la misma es, parece estar estacionario o fijo. Por lo que casi se siente como que hay dos capas dentro la composición y se están moviendo a diferentes velocidades, es genial para crear la ilusión de profundidad y general simplemente hacer que la ciencia sea más interesante. Y por último pero no menos importante, ya que estamos hablando de desplazamiento, también hay un desplazamiento infinito con sitios como Pinterest donde se puede desplazar hacia abajo en el feed home y nuevos pines simplemente seguiría apareciendo constantemente. Entonces es como una página interminable. Pero ahora que hemos cubierto algunos de estos términos esenciales en el siguiente video, podemos enfocarnos hablando más específicamente sobre la estructura de los sitios web. 5. Estructura de un sitio web: Si bien hay muchos tipos diferentes de sitios web que siguen siendo un par de términos que se aplican a casi todos ellos. Un término comúnmente utilizado es contenedor o envoltorio, que esencialmente significa lo que mantiene unido la estructura o el contenido de un sitio. Entonces esta es una región que normalmente tiene un ancho fijo, que podría ser de 1280 píxeles, por ejemplo. Y la altura de la misma, por supuesto, depende de la cantidad de contenido de una página. La mayoría de los sitios web están alineados con el centro, lo que significa que a lo que significa que ala izquierda y a la derecha de la envoltura, normalmente tendrás fondo, ya sea solo espacio en blanco o tal vez un color o patrón. Mientras que dentro del contenedor tendrías un par de elementos muy distintos, como el área de cabecera, que ya cubrimos en el video anterior. Y normalmente el menú principal de navegación es parte del encabezado. También puede ser dos elementos separados, y el menú puede estar por encima del encabezado o viceversa. Pero esencialmente estos son los primeros elementos que la visitante vería cuando vaya a su página web. Y estos dos juntos ocuparán la mayor parte de lo que consideramos lo anterior, doblar sobre lado. Más abajo llegarás al contenido de la página principal que puede ocupar todo el ancho del contenedor. O opcionalmente, puede tener la barra lateral ya sea a la izquierda o en el lado derecho de la página. En raras ocasiones en ambos lados. Y de igual manera, la forma en que empezamos con el encabezado de ancho completo, también terminaremos con un pie de página de ancho completo, que normalmente tendrá información de contacto, pequeño sitemap, y un par de enlaces adicionales como las redes sociales y así sucesivamente, etc. La mayor parte del sitio normalmente es el área de contenido que ya discutimos. Y para facilitar la navegación y separar el contenido en trozos más pequeños. Cuando los usuarios se desplazan hacia arriba y hacia abajo, se recomienda crear secciones distintas, o como a veces se refiere, campos que también se pueden ver aquí. Las áreas que estoy destacando y cada una de estas secciones deben tener un rol distinto. Uno podría ser sobre el boletín donde la gente puede inscribirse y recibir información sobre ese sitio en particular. Una buena para analizar un sitio web y cuántas secciones se utilizan es simplemente usando el Comando o Control menos los atajos cuántas secciones se utilizan es simplemente usando el Comando o de teclado en cualquier navegador que estés usando, debería funcionar, que lo hará te ayuda a alejar y obtener esta vista de pájaro donde puedes ver toda la estructura desde la distancia. Por lo que aquí podemos ver con claridad que el contenedor o envoltorio está alineando todo el contenido al centro. Y hay estas distintas secciones separadas por color como aquí tenemos este telón de fondo negro o tenemos el gris para esta sección aquí. Y también tenemos esta bonita línea de degradado que divide el pie de página del resto de la página. Cuando estés mirando el sitio desde esta distancia, también notarás alineación vertical entre elementos. Entonces, por ejemplo, podemos ver que el borde de estas imágenes están alineadas. Pero si vengo más abajo, también hay una alineación a estos componentes. Y lo mismo será cierto al borde derecho de estos elementos. Y los dos bordes de la izquierda y la derecha normalmente definen el envoltorio o contenedor en sí o el ancho de la página. No obstante, puede ser engañoso si solo te estás concentrando en los contenidos, siempre es mejor echar un vistazo a la página completa, como en este caso, el menú principal en la parte superior o el pie de página en la parte inferior. Y con eso, podemos ver que en realidad también hay este espacio a la izquierda y a la derecha aquí, que se considera el margen dentro del sitio. Por lo que podemos verlo aquí a la izquierda, y también lo podemos ver en el lado derecho. Y eso en realidad sigue siendo algo que se consideraría parte del contenedor. Ahora en cuanto a los componentes reales o bloques de construcción de un sitio, nos referiríamos a elementos visuales y funcionales y una copia, las fuentes, los colores, las imágenes, videos, animaciones, lo jurídico mismo, incluso el espacio entre los elementos se consideraría todos los elementos visuales. Si bien todo lo demás que se utiliza para la navegación o las interacciones, incluyendo botones, desplegables, y los menús se considerarían elementos funcionales. Una tarea de diseñadores web es asegurarse de que exista un buen equilibrio entre estos elementos. Un buen sitio web siempre debe dejar claro si solo estamos mirando un elemento puramente visual o algo que también tiene una función. Entonces, por ejemplo, cuando pase el cursor sobre esta imagen, puedo ver que mi cursor está cambiando, lo que significa que cuando hago clic en esto, algo va a pasar. Pero además del cambio de cursor, eso no fue nada más que indicara que este es un elemento clicable que puede ser un montón de formas de hacer las cosas más obvias. Entonces en caso de una imagen, por ejemplo, que puede ser un efecto de hover o podría haber una pequeña leyenda en algún lugar aquí de la imagen diciendo pincha aquí para saber más. Por en general, recuerda que buena navegación tiene tres características principales. Simplicidad, claridad y consistencia. Y seguiremos refiriéndonos de nuevo a esto a lo largo de este curso. Pero también hay otro término que podrías encontrar y eso es arquitectura de la información o IA, que de nuevo se refiere a organizar la información y mostrarla en nuestro sitio web de una manera que es clara, intuitiva y sensata. 6. Cuadrículas, mapa del sitio, wireframes y patrones de escaneo: Al igual que en el diseño impreso, jerarquía visual también es extremadamente importante en el diseño web. Y una de las principales formas en que se puede crear esta jerarquía es mediante el uso de una cuadrícula. Por lo que una cuadrícula de sitios web puede ayudar a mantener visual o están dentro del sitio y entre los elementos. Al igual que en el diseño de impresión, una rejilla se compone de columnas. O en caso de diseño web, estas también se denominan unidades. Por ejemplo, en la cuadrícula de 12 unidades se referiría a 12 columnas, que es por cierto, la más común utilizada en el diseño web. Y aquí hay un ejemplo de este uso por parte del sitio web de la BBC. Ahora los espacios entre columnas a los que nos referimos como canalón y donde se utilizan múltiples unidades juntas para ciertas secciones dentro de un sitio, nos referiríamos a estos como columnas. Entonces aquí, por ejemplo, se trata de una columna de tres unidades, u otra aquí a la izquierda, que es el doble de deudas grandes, seis columnas unitarias y múltiples columnas juntas pueden formar un campo que suman estas divisiones horizontales dentro de una página, que también se puede referir como sección S. Éste es uno aquí en la parte superior, y esta sería considerada otra, nuevamente, en este caso conformada por tres columnas y cada columna compuesta por cuatro unidades. Para ir más allá de la estructura de una sola página dentro de nuestro sitio web, normalmente utilizaríamos un mapa del sitio, que es una representación diagramática de todas las secciones y páginas y también de la conexiones entre ellos. Y es una gran manera de visualizar las principales unidades de navegación y relaciones dentro de un sitio web. Otro término muy común y algo a lo que vamos a seguir haciendo referencia en este curso es el wireframe, que nuevamente se utiliza principalmente en la etapa de planeación de un sitio o aplicación, que se simplifica boceto o borrador de la estructura final de la página que representa principales bloques de construcción como imágenes o videos de la misma, rectángulos y copia generalmente con un par de líneas horizontales. Es posible que hayas oído hablar también de patrones de escaneo, que en caso de diseño web también afecta realmente la jerarquía visual de asignada. Aquí hay un par de ejemplos de estos mapas de calor donde podemos ver donde los ojos de los visitantes tienden a moverse y se queda por más tiempo. Las zonas más frecuentemente vistos son de color rojo. Y podemos ver de inmediato un patrón particular que muy comúnmente se conoce como el patrón F. Por lo que podemos ver eso aquí también. Esto es cierto para la mayoría de los sitios donde hay mucha información o copia específicamente. Si bien otra forma muy común de escanear a través de una página se conoce como el patrón Z. Z, que de manera similar al patrón F, comenzaremos en la parte superior izquierda. A partir de aquí, se iría a la derecha y luego cruzaría al lado inferior izquierdo de la pantalla y luego finalmente iría a la parte inferior derecha. Podemos ver en caso de este lado, funciona muy bien para este patrón de escaneo porque este es exactamente el orden en el que se muestra la información y tendrá sentido para las personas. Por lo que una estructura simplificada utilizando este patrón de escaneo puede ser donde tenemos el logotipo para empezar o el nombre de la empresa que las opciones de inscripción o inicio de sesión a la derecha. Entonces tenemos la principal imagen de héroe o sección héroe con algunos textos útiles debajo de ella. Y luego finalmente el CTA o el botón de llamada a la acción o enlace. Y toda la idea es cuando alguien llega a este punto aquí, saben exactamente para qué se están inscribiendo o qué están comprando. Es una locura, Pero estadísticamente, solo se necesitan 50 milisegundos para un visitante promedio del sitio web decida si están en el lugar correcto o no. Entonces básicamente eso es el tiempo que les lleva tomar una decisión, les guste o no una página. Y por eso es tan importante utilizar la jerarquía visual a la hora definir la estructura de un sitio y asegurarse de que los visitantes no se frustren. Y siempre encontrarán lo que buscan. 7. Tamaños de pantalla y diseño adaptable: Una de las cosas más difíciles en el diseño web es que la experiencia de un usuario es difícil de predecir porque realmente puede variar dependiendo de muchos factores. Pero probablemente lo más importante, el tamaño de pantalla del dispositivo que están utilizando para acceder a Internet. Ahora, dado que no se puede predecir cuál será el tamaño de pantalla más comúnmente utilizado, técnicamente, hay que asegurarse de que un sitio va a funcionar y funcionar correctamente en cualquier tamaño de pantalla. Y para lograrlo, existen varios métodos como diseño receptivo o el diseño adaptativo, y los discutiremos con más detalle en este video. En primer lugar, comencemos con este interesante gráfico que muestra que en los últimos diez años más o menos, hubo un cambio enorme y cambiar cómo las personas interactúan con los sitios y cómo ahora más comúnmente estarían usando sus teléfonos móviles. Por lo que más del 50% del tráfico web global está sucediendo en los teléfonos de las personas. Es por ello que hoy en día la mayoría de las empresas considerarían el primer enfoque de diseño web móvil, cual es una filosofía diseñada que se concentra haciendo el cual es una filosofía diseñada que se concentra haciendoque la experiencia del usuario sea la mejor en las pantallas más pequeñas, móviles primero, y luego adaptar el diseño y el diseño a pantallas más grandes como un segundo paso, este enfoque se alinea muy bien con optimización de motores de búsqueda de Google, lo que también favorece móvil primer diseño o sitios web amigables para móviles. Para ello, en realidad existe una herramienta oficial en línea de Google donde puedes escribir una URL y después de unos segundos obtendrás el resultado. Y en este caso, acabo de hacer una prueba con nuestro propio sitio y salió como una página amigable móvil. Ahora hay otro aspecto de los dispositivos móviles que también debes tener en cuenta cuando estás diseñando sitios. Algunas personas podrían realmente ver el sitio en formato retrato, mientras que otras podrían mirarlo en formato horizontal. Y puede complicarse aún más cuando también consideran tabletas o varios tamaños, que de nuevo pueden tener ambas orientaciones. Pero este gráfico nos ayuda a entender que otro comportamiento o estadística muy interesante que dependiendo del tamaño de pantalla de un dispositivo móvil, la orientación preferida cambiará drásticamente. Y podemos ver claramente que cuanto más grande sea la pantalla, más probable es que la gente use en formato horizontal. Si bien en estos tamaños más pequeños, que son los tamaños de teléfonos móviles más comunes, es más probable que la gente los use en formato retrato. Ya hablamos del primer enfoque de diseño móvil, donde primero consideramos la pantalla más pequeña y luego la adaptamos a pantallas más grandes. Y aunque invierte, el orden de prioridad sigue basado en el mismo principio que el enfoque de diseño web responsive, lo que de nuevo significa que el diseño del sitio se adaptará automáticamente a la tamaño de pantalla disponible. Pero lo importante es que siempre vas a mirar el mismo sitio solo se va a renderizar de manera diferente. Y más comúnmente, la distinción entre los diferentes tamaños de pantalla dependería de los puntos de corte definidos en el código CSS en un sitio. Y aquí podemos ver un ejemplo de un par de puntos de corte de uso común que se referían al ancho del sitio basado en el tamaño de pantalla disponible. Entonces 1920 píxeles, por ejemplo, serían del tamaño más grande para el que necesitarías diseñar. 320 píxeles es un estándar para el tamaño de pantalla más estrecho o más pequeño. Y podemos ver que cuando estás sosteniendo un teléfono, tener solo este tanto espacio disponible que el área de contenido real sería incluso menor. Por lo que sería alrededor de 280 píxeles con los márgenes en el lado izquierdo y derecho. Ahora para la mayoría de los dispositivos móviles, tendrías estos puntos de corte más pequeños y todos estos usarían normalmente una sola columna. Por lo que la estructura sería bastante uniforme y solo estarías desplazándote hacia arriba y hacia abajo para acceder a ciertas partes del sitio. Si bien cuando tengas tamaños de pantalla más grandes, comenzarás a poder introducir más columnas, divisiones horizontalmente en el lateral hasta llegar a tal vez tres o cuatro columnas. Incluso cuando estés usando tu navegador en tu computadora, realmente puedes probar un sitio y cómo se adapta a diferentes tamaños de pantalla. Entonces podemos ver cuando llego a cierto punto sin bando, va a empezar a cambiar los contenidos. Hubo un punto de ruptura para que pueda saltar de ida y vuelta. Y podemos ver entre los dos puntos de ruptura cómo algunos de los elementos están desapareciendo. O el menú aquí en la parte superior se está simplificando en un simple ícono de hamburguesa como ese. Entonces si voy más allá a la izquierda otra vez, ese fue otro punto de ruptura. Por lo que las dos columnas ahora se simplifican en una sola columna. Y luego aún más abajo aquí, todo está ahora en una sola columna. Y luego si voy más allá, solo se acerca y más cerca lo que veríamos en un teléfono móvil. Aquí hay otro gran ejemplo de un sitio receptivo. Nuevamente, si empiezo a cambiar el ancho de mi navegador, inmediato todos los elementos se están actualizando y hubo un punto de ruptura. Podemos ver claramente cómo se reordena todo. Y luego a medida que vaya aún más abajo, tendremos otro punto de ruptura visible ahí mismo. Y ésa probablemente sea la última. Por lo que de nuevo, dos grandes puntos de ruptura. Uno aquí mismo y luego otro justo ahí. Lo bueno de este sitio es que usa estos bloques muy bien y mantiene todo sigue siendo muy fácil de acceder y encontrar sin importar el tamaño de pantalla que esté utilizando. Aquí también hay un ejemplo de ver lado a lado el móvil y la versión de escritorio de la misma página web. Y aunque la usabilidad debe ser la prioridad, y además de usabilidad, la similitud entre las diferentes versiones del sitio también es importante. Quieres que los usuarios obtengan una experiencia muy similar sin importar qué dispositivo estén usando para acceder a un sitio. diseño fluido y el diseño fluido es también otro término que probablemente estuvieras aquí, lo que significa que en lugar de referirse o usar píxeles para definir el tamaño de una pantalla. Entonces, por ejemplo, el ancho de un sitio, calcularía todos los componentes dentro del sitio utilizando porcentajes. De manera que a medida que la vista se está haciendo más pequeña o más grande, el Diseño de Fluidos ajustaría automáticamente y dinámicamente todos los valores, nuevo usando porcentajes. 8. Diseño adaptativo y densidad de píxeles: Ahora también hay otra gran categoría en diseño web llamada diseño adaptativo en lugar de diseño responsive, aunque el objetivo sea el mismo, para asegurarse de que los usuarios puedan experimentar un sitio de la manera más cómoda dependiendo del dispositivo que estén usando. Pero a través del diseño responsivo solo fue adaptar un diseño universal a los diversos tamaños de pantalla. En caso de diseño web adaptable, eso serían diseños completamente únicos e independientes creados para diversos tamaños de pantalla. Y la principal ventaja del diseño web adaptable es que siempre va a mejorar la velocidad del sitio. No obstante, es mucho más largo y costoso desarrollar un sitio como este, porque obviamente tendrás que crear múltiples versiones y además tendrás que mantener y actualizar cada una de estas versiones lado a lado. Ahora para empeorar las cosas, en caso del diseño web no es sólo el tamaño de pantalla que hay que tener en cuenta, sino también la densidad de píxeles de un dispositivo. Y no confundas esto con la resolución de una pantalla. Entonces por ejemplo, con este iPhone en particular, la resolución de la pantalla en formato horizontal es de 1136 píxeles por 640 píxeles a 326 PPI. Densidad de píxeles, PPI significa píxeles por pulgada, manera similar a lo que usamos en la impresión, donde 300 PPI se considerarían una impresión de alta resolución, donde los píxeles originales de una imagen o impreso en tal densidad que no podrás distinguir esos píxeles aparte unos de otros y simplemente verás una imagen continua. Y la densidad de píxeles nuevamente, funciona de manera similar. Cuanto mayor sea este número, finos serán los detalles en la pantalla. Y en general, mejorará la experiencia de visualización. Ahora probablemente hayas oído hablar de las pantallas Retina de Apple. Y estas son esencialmente estas pantallas de mayor densidad de píxeles. Pero hay muchos otros estándares utilizados para estas pantallas de mayor densidad. Y desde el punto de vista del diseño web, sólo hay que asegurarse de que siempre haya un retroceso para las imágenes que puedan funcionar para estas pantallas de mayor densidad. Ahora por supuesto, esto sólo es importante para las imágenes de píxeles o ráster porque en caso de gráficos vectoriales, pueden escalar a cualquier tamaño que sea necesario sin perder calidad. Y en realidad hay un formato de archivo vectorial específico que se utiliza en el diseño web, que estaremos cubriendo con más detalle en el siguiente video. 9. Formatos de archivo de uso común: Los cuatro formatos de archivo más importantes cuando se trata de diseño web son jpegs, PNGs, SVGs, y regalos. En este tablero se puede ver una gran comparación explicando las principales diferencias entre ellas y una gran explicación que te ayudará a decidir qué formato de archivo es mejor para la imagen con la que estás trabajando. La forma más fácil de comparar estos formatos phi más comúnmente utilizados son en diseño web es mediante el uso de photoshops, opción Guardar para Web, que puedes encontrar en el menú Exportar archivos. Una vez que selecciones éste, podrás elegir dos aquí arriba en la esquina superior izquierda con la que podrás comparar la calidad de imagen original, el formato de archivo específico o preset que vas a elegir aquí del lado derecho. Entonces en este caso, por ejemplo, si selecciono el formato de archivo JPEG, podemos ver que el tamaño actual del archivo sigue siendo realmente alto. Son casi tres megabytes. Pero al reducir las dimensiones reales de píxel, ya podemos mejorar eso. Entonces en lugar de tener esto más de 2 mil píxeles, podemos bajar tal vez a un ancho de mil píxeles. Y al acercarnos un poco más, podremos vigilar la calidad. Pero lo más importante, con el formato de archivo JPEG, cuando se quiere cambiar es esta opción aquí, la configuración de calidad real que podemos establecer en 0, lo que conducirá a la mayor cantidad de compresión artefactos. Entonces son básicamente estos pequeños bloques que podemos ver aquí a la derecha. Pero al usar la calidad más baja, también obtenemos el menor tamaño posible de fuego, que en este caso es inferior a 50 kilobytes. Ahora claro, esto es algo que puedes ajustar y encontrar la mejor opción para lo que estés haciendo la mayor parte del tiempo configurando esto alrededor de 50 te daría un muy buen resultado donde la compresión apenas se nota, pero el tamaño del archivo todavía se va a reducir radicalmente en comparación con el original o en comparación con la configuración JPEG de más alta calidad. La principal ventaja de usar PNG sobre formato de archivo JPEG es que con estos, también podrás incluir información de transparencia. Y este es en realidad un escenario que se puede ver de inmediato aquí en la parte superior. Pero en caso de que estés utilizando este formato de archivo para fotografía, debes asegurarte de que esté configurado en PNG 24, lo que significa 24 bits de profundidad, en comparación con PNG ocho, que es una versión más limitada de el mismo formato de archivo usando solo 256 colores u ocho bits de profundidad. Ahora, incluso con esta versión limitada en color de PNG, el formato de archivo seguiría siendo mucho mayor que el jpeg de compresión media. Podemos ver que es casi el doble , alrededor de 400 kilobytes. ¿ Por qué somos de mayor calidad? Entonces PNG 24, sería el más grande, en este caso, que serán 1.2 megabytes, casi diez veces más grande que el JPEG comprimido. Pero cuando se trata de ilustraciones de gráficos en lugar de fotografías, normalmente querría usar PNGs en su lugar. Entonces aquí podemos ver un JPEG resultaría en 41 kilobytes usando el ajuste de calidad 50. Y si cambio a PNG 24, el tamaño del archivo será exactamente el mismo. No obstante, aquí ya podemos utilizar la ventaja de tener transparencia incluida en el archivo, lo que facilitará el uso de este gráfico encima de diferentes colores de fondo, por ejemplo, en nuestro sitio web. No obstante, cuando cambio a la opción de profundidad de color inferior PNG ocho, inmediato obtenemos un tamaño de archivo mucho más pequeño, por lo que eso es solo 15 kilobytes. Y debido a que no hay gradientes, efectos de desenfoque, ni detalles fotográficos, los 256 colores serán más que suficientes para representar la imagen y darnos exactamente el mismo resultado lo que tenemos visto en la versión original. Ahora, un archivo GIF es muy similar al formato PNG. Nuevamente, se limita a 256 colores y ese es en realidad el máximo que puedes ahorrar. No obstante aquí puedes ir incluso por debajo de eso. Para que podamos ir todo el camino hacia abajo a dos colores, lo que por supuesto resultará en el tamaño de archivo más pequeño. No obstante, en este caso, sólo podemos ir a tal vez ocho colores. Y al igual que con P&G aquí, también puedes decidir si quieres incluir o no la transparencia. Cuando lo habilites, en realidad se va a considerar como un color dentro de la tabla de colores. Ahora una de las principales ventajas de un GIF sobre PNG es que soporta animación de fotogramas. Entonces aquí hay un ejemplo de un archivo GIF que tiene 12 frames. Y en realidad podemos tocar la animación aquí. Y también podemos decidir cuántas veces queremos que esto bucle por defecto esté configurado para siempre. Pero por supuesto que podemos cambiar eso fácilmente. Y todos estos fotogramas combinados en conjunto resultarían en un tamaño de archivo de 32 kilobytes. La mejor manera de estudiar estos diferentes formatos de archivo es guardar algunos ejemplos de diversos sitios web. Ábrelos en Photoshop. Utilizando la opción Guardar para Web, podrá ver los ajustes que se utilizaron cuando se guardaron. Discutiremos Frame Animation con más detalle y cómo configurarlo en Photoshop. Una vez llegamos a la sección de diseño de banner en este curso. 10. SVG, WebP y JPEG 200: Ahora cuando se trata de guardar archivos SVG o Scalable Vector Graphics, se recomienda utilizar Illustrator. Y a partir de aquí, sólo hay que ir a Archivo, Guardar como. Y luego desde el formato, puedes seleccionar dos tipos de SVGs. Esa es la versión normal o comprimida. Y en general, la opción comprimida te dará un tamaño de archivo un poco más pequeño. No obstante, este formato no es tan ampliamente soportado como el SVG estándar. Así que sólo voy a elegir eso. Y una vez que hago clic en Guardar, obtenemos las opciones adicionales aquí. En realidad hay un par de perfiles diferentes y también más opciones si quieres sumergirte más en él. Pero lo más interesante es que al hacer clic en el código SVG, realidad se convierte en código que se puede usar en sitios web. Por lo que se puede copiar y pegar desde aquí directamente en el código de un sitio. Y eso ya será capaz de representar la imagen en un navegador. Y al igual que con los gráficos vectoriales en diseño de impresión, cuando se tiene un archivo SVG en un sitio como éste, la principal ventaja además del bajo tamaño de archivo es que es completamente independiente de resolución. Así que incluso cuando estoy acercando muy cerca, siempre veremos bordes nítidos y afilados. Por lo que nunca veremos pixelación alguna. Pero hay mucho más que puedes hacer con SVGs. Incluso puedes incluir animación en ellos. También puedes utilizarlos para fuentes. Aquí hay otro ejemplo genial de un archivo SVG, que incluye no solo animación, sino incluso interacciones. Para que pueda controlar el círculo y los números también siguen los cambios que estoy haciendo. Y toda la información requerida para esto es realmente devolver el código en la escritura en los lenguajes HTML, CSS y JavaScript. Y por último pero no menos importante, también vale la pena mencionar otro formato de archivo que se está volviendo cada vez más ampliamente utilizado en los sitios web. Este es el formato WebP que fue desarrollado por Google. Desafortunadamente, todavía no es compatible de forma nativa en Photoshop. Pero puedes encontrar un plugin oficial de Google que podrás descargar desde el enlace que aparece en el tablero. Una vez que instale esto, podrá abrir archivos web Py en Photoshop. Pero lo más importante, también podrás guardar en este formato de archivo. Así que sólo para mostrarte en mi computadora, ya tengo esto instalado. Y si voy al menú Archivo y elijo Guardar una copia. En aquí en la parte inferior, encontraré la opción VAB p sharp. Entonces este va a ser el formato de archivo web py que podemos ver aquí en la parte superior. Una vez que haga clic en Guardar, obtendré estos ajustes e incluso puedo ver una vista previa de ciertos detalles. Y al igual que con un JPEG, podrás controlar la calidad. Entonces, ya sea guardando algo completamente una manera sin pérdidas o mediante el uso de la configuración de pérdidas, se puede reducir el tamaño del archivo. Este formato de archivo admite tanto la animación como la transparencia. Entonces de alguna manera, combina todas las ventajas de los archivos jpegs, PNGs, y GIF es ampliamente soportado ahora por la mayoría de los navegadores. Por lo que recomiendo encarecidamente comenzar a utilizarlo en proyectos de diseño web. Así como nota final, vale la pena mencionar que hubo un intento de introducir un nuevo estándar para archivos JPEG llamado JPEG 2 mil, que en realidad se admite de forma nativa en Photoshop, que puede lograr una mejor calidad de imagen a un tamaño de archivo más pequeño en comparación con los estándares JPEG originales. No obstante, desafortunadamente, este nuevo estándar realmente no se puso en marcha. La mayoría de las plataformas, no soportan su cola. Y por eso prefiero recomendar el uso estos formatos de archivo originales o el nuevo formato web del que hablamos. 11. Diseño de UX e IU: Lo más probable es que haya oído hablar de los términos Diseño de UX e UI, o experiencia de usuario y diseño de interfaz de usuario. Y la mayoría de las veces surgirían estos términos cuando hablamos de desarrollo de una aplicación y herramienta online, una aplicación móvil. Pero también se puede referir en caso de proyectos de diseño web. Esencialmente, siempre que estés creando algo donde habrá usuarios interactuando con tu producto, debes pensar en la experiencia del usuario y asegurarte de que sea lo más suave posible. Ahora, los diseñadores de UX y UI son dos profesiones separadas, pesar de que trabajan juntos y tienen responsabilidades compartidas. En realidad no tienen que poseer el mismo conjunto de habilidades. Un diseñador de UX se concentraría en la estrategia, la planificación, las pruebas, y en general tratando entender el problema que hay que resolver y encontrar una buena solución para ello. Mientras que un diseñador de interfaz de usuario se concentraría en cosas como la topografía, diseño visual, los gráficos, iconos, la ilustración y el color. Pero lo más importante, estas dos reglas están conectadas entre sí. Por lo que el diseñador de UI no podría hacer un buen trabajo sin el trabajo inicial de un diseñador de UX. Por lo que la mayoría de las veces el trabajo está empezando aquí con la planeación. Entonces al final, puede llegar a la etapa de diseños visuales reales. Una de las mejores formas de imaginar estos dos roles y responsabilidades y cómo pueden construir sobre el trabajo del otro es estos cinco elementos de ejemplo de experiencia de usuario, donde el trabajo siempre comienza con la estrategia. Esa es la primera capa o fundación. Y esta es en realidad la etapa más abstracta. A partir de aquí, todo se está volviendo vez más concreto a medida que vamos subiendo cada capa después de la estrategia, alcanzando el alcance. Por lo que estos son los requisitos reales que el proyecto tiene que cumplir. partir de aquí, se puede crear una estructura, luego que se puede refinar aún más en los esqueletos o alambres. Y luego finalmente, la etapa de diseño viene al nivel de la superficie cuando nos estamos concentrando en realidad lo que los usuarios estarán viendo. Ahora podría estar preguntándose dentro de estas cinco capas, ¿ esa sería la separación entre una UX y las responsabilidades de los diseñadores de interfaz de usuario? Yo diría que las dos capas superiores es algo en lo que el diseñador de la interfaz de usuario se estaría enfocando. Si bien las tres capas inferiores serían más de un rol de diseñadores de UX, pero por lo general siempre hay una superposición. Por lo que yo diría que todas estas tres capas aquí en el medio podrían ser responsabilidades compartidas. Ahora una cosa que definitivamente está entre estos dos roles es que ambos profesionales necesitarán confiar en el pensamiento de diseño. Y este es en realidad un término que se utiliza principalmente en este campo. No obstante, el pensamiento de diseño también se puede aplicar a cualquier otra área del diseño gráfico. Y es como un método o proceso donde puedes seguir los pasos más importantes para llegar al producto final. Entonces todo está siempre empezando por el reto de diseño, identificando cuál es el problema y qué hay que resolver. Después viene la fase de empatía, que se trata principalmente de entrevistas y observar a los usuarios haciendo ciertas tareas. Entonces con base en estas observaciones y definiendo exactamente cuál es el problema, puede comenzar la ideación, que luego puede pasar a crear prototipos reales y luego finalmente, probándolos. Ahora en caso de que quieras entrar en este campo, ya sea como diseñador de UX o UI, tienes que aprender un par de términos esenciales. De igual forma a todas las demás áreas dentro del diseño gráfico. Así que solo cubramos algunos de estos en este video. Primero de una persona de usuario es una persona ficticia confeccionada que es un arquetipo o usuario de un producto cuyos objetivos y características representan al grupo más grande de usuarios del producto. Definir estas persona de usuario está en el inicio de un proyecto, es muy útil. Y es algo a lo que volverías a referirse como similar a referirse al resumen del proyecto. Una vez que tengas tus personas de usuario, también llegarías a escenarios que definirían cuándo y cómo se lleva a cabo una historia de usuario. Y es más como narrativa, que describe cómo se comportaría esta música en una cierta secuencia de eventos. Y por último, también es importante definir el objetivo u objetivos de un usuario, que es la principal motivación por este usuario está tomando medidas. Una vez que alcanzan sus metas, es entonces cuando termina el escenario. Ahora, una vez que las personas de usuario, escenarios y objetivos estén todos definidos, puedes seguir explorando formas de definir las funciones más importantes de tu app o herramienta en la que estás trabajando. Uno de estos métodos se llama User Story Mapping, donde se enumeran todas las tareas potenciales. Por lo que está categorizando todos los requisitos de la característica desde el punto de vista del usuario, comenzando con las tareas más importantes que están planeando realizar, y luego moviéndose sobre tareas o características adicionales en el orden en que lo más probable sería que quisieran realizarlas. Esta es una gran manera de filtrar cuáles son las características más importantes de un producto y asegurarse de que sean realmente perceptibles y fáciles de acceder. Ya discutimos en un video anterior qué son los wireframes. Entonces no voy a pasar demasiado tiempo en ello. Pero por supuesto, estos son extremadamente importantes para el diseño de UX y UI. Y a esto es lo que normalmente nos referiríamos como una visión general de baja fidelidad de herramienta o aplicación. El objetivo principal de estas simples ilustraciones o bocetos es establecer la estructura y el flujo de la posible solución de diseño. Crear diagramas de flujo de usuario también puede ser muy útil en la etapa de planeación para entender las acciones y en qué orden los usuarios que las llevarán. Y dependiendo de la complejidad y escala de la herramienta, aplicación o sitio web, estos diagramas también pueden escalarse y terminar siendo bastante complejos con muchas rutas diversas. Y por último, también puedes combinar tu flujo de usuario con wireframes, que simplemente llamaríamos vía flow. Y este es un gran ejemplo. Una vez más, podemos ver los wireframes de cada una de estas páginas o pantallas. Y luego en lugar de mostrar la estructura real de la herramienta, se está concentrando en los flujos del usuario, así que cómo están pasando por la app y cuáles son los posibles pasos siguientes que podrían tomar de una página o pantalla específica. 12. Normas de UX: Además de los términos básicos que cubrimos en el video anterior, también es importante hablar de algunas de la experiencia del usuario, leyes o principios. Y en caso de que ya hayas visto los principios Gestalt o el tema de la psicología del diseño en este curso, probablemente reconozcas algunas de estas reglas porque de hecho son las mismas reglas solo aplicado en un contexto diferente. Pero además de esto, hay un par de leyes que fueron utilizadas específicamente para el diseño de UX. Permítanme mostrarles algunos ejemplos de estos. Entonces, en primer lugar, Fitts Law está a punto de asegurarse que los artículos procesables sean de fácil acceso. Y en caso de que existan múltiples elementos procesables, no están demasiado cerca el uno del otro, asegurándose de que los usuarios no presionen accidentalmente o hagan clic en algo que se suponía que no debían. Ahora bien, esta es una ilustración muy interesante que muestra que cuando alguien está sosteniendo un teléfono, que son aquellas regiones a las que son más fáciles de acceder, y en este caso particular es el uso de una sola mano. Entonces es solo el uso del pulgar en la pantalla. Y podemos ver que los usuarios de la derecha tendrían una región ligeramente diferente en comparación con los usuarios de izquierda. Lo más importante es que estas esquinas serían mucho más difíciles para un usuario de izquierda acceder, mientras que para nuestros usuarios de la derecha es la esquina opuesta. Pero para el diseño universal, por supuesto, siempre es bueno considerar tanto a personas zurdas como diestros. Por lo que aplicar la Ley Fitts, significa que esta es la zona donde sería más fácil llegar a los artículos procesables más importantes. La ley de Hicks se trata de la simplicidad, manteniendo al mínimo las elecciones que un usuario puede tomar. Y este ejemplo muestra una comparación entre dos tipos de controladores remotos y cómo un diseño muy minimalista como controlador de manzanas sigue realmente bien la ley de Hicks. Pero el mismo principio aplicado a una forma o interacción en un sitio web se vería así. Donde una vez más, en lugar de enumerar tantas opciones diferentes, tendría un conjunto limitado de opciones. Y tal vez uno de ellos ya pueda ser seleccionado como el resultado óptimo o elección del foro. Por supuesto, el usuario podrá cambiar esto. No obstante, tener algo ya seleccionado aún hace que el proceso de decisión sea un poco más rápido y más fácil. La ley de Jacobs está afirmando que siempre debes usar escenarios familiares y lógica para cosas que los usuarios encuentran de forma regular. Y un buen ejemplo es el letrero en forma, que podemos ver en un par de sitios diferentes se vería muy similar. Así que solo estoy pasando por tres de estos y como se pueden ver todos primero, comenzaremos con las formas más rápidas o más fáciles de iniciar sesión, confiando en una cuenta existente con Google, Apple, o Facebook. Y después de esto, dando al usuario la opción de iniciar sesión con su dirección de correo electrónico o contraseña, seguido de la misma configuración exacta, nuevamente, concentrándose en iniciar sesión. Entonces ese es el principal llamado a la acción aquí. Y luego tareas adicionales que el usuario podría requerir en caso de que olvidara su contraseña o en caso de que aún no haya creado una cuenta y esté planeando inscribirse. Así que una vez más, si cambio entre estos, se puede ver que a pesar los diseños son ligeramente diferentes, la estructura general es más o menos la misma. Ley del embarazo también se trata de la simplicidad. Y en este caso particular, se trata de usar formas más simples siempre que sea posible. Y esto es algo que podemos ver aplicar los diseños más exitosos. Entonces, por ejemplo, las imágenes de avatar siempre estarían en círculo. Los iconos serían muy claros y simplificados. Elementos funcionales como botones también tendrían forma simple e incluso la información que está conectada está normalmente contenida o agrupada vid como elemento visual simple como un rectángulo. 13. Normas adicionales de UX: Esta sección de una página del sitio web de Amazon muestra dos de las otras leyes en acción, la ley de proximidad y región común, que son ambos principios Gestalt. Entonces, en primer lugar, la Ley de la región común significa que debes mantener las funciones o características relacionadas en áreas comunes. Por lo que podemos considerar esta agrupación aquí ya un área común. Pero si miramos juntos a estos seis grupos, esto también está formando región común, que separa estos de los que podemos ver aquí en la parte superior. Por lo que de nuevo, podemos considerar esta como una región. Y debido a que estas opciones son más altas en la página, el texto dentro de ellas son más grandes y también tienen visuales dentro de ellas. De inmediato se sienten más importantes. Por lo que va a ser más fácil para el usuario encontrar estas opciones más comúnmente buscadas. Y en caso de que necesiten algo más, podrán trasladarse a la siguiente región dentro de la página. Y la forma en que se aplica aquí la ley de proximidad es manteniendo a estos dos grupos más separados unos de otros. Entonces hay un espacio más grande creado aquí, incluso una línea de división muy sutil entre estos dos grupos. Y otro ejemplo para la ley de proximidad serían menús en caso de la web de Adobe, de nuevo, podemos ver que estas opciones se mantienen más cerca unas de otras y están más relacionadas en comparación con la opciones adicionales que podemos encontrar aquí en el lado derecho. Entonces ese gran espacio vacío que tenemos aquí es el que separa a estos dos grupos el uno del otro. Ahora también está la Ley de Miller que podemos discutir aquí con este ejemplo, que se trata de dividir tu contenido en trozos más pequeños para que sea más digerible para tus usuarios. Por lo que se quiere limitar la cantidad de opciones que necesitan percibir en un momento dado. Y ya vimos en un video anterior que hay un mega menú masivo que se abriría por si hacemos clic en alguna de estas opciones aquí arriba, pero esas están todas escondidas al principio. Entonces entonces podemos concentrarnos en estas cinco opciones aquí a la izquierda y las tres opciones adicionales a la derecha. En el caso del menú principal de navegación, eso son ocho opciones para que los usuarios elijan, que en realidad se alinea perfectamente con la Ley de Miller, que también establece que siete es el número mágico. Es la cantidad de cosas que una persona promedio puede guardar en su memoria a corto plazo. Y los siete es el promedio. Siempre es bueno considerar más menos dos. Entonces cualquier cosa entre cinco y nueve, debe ser una buena cantidad de información para mostrar. Derecho de similitud es otro principio Gestalt por el que podemos ver aquí un gran ejemplo. Por lo que los objetos similares siempre serán percibidos como relacionados o conectados entre sí. Y en caso de un simple chatbot o herramienta de mensajería, siempre podrás distinguir de inmediato a las dos personas que participan en la conversación. Entonces tenemos una persona aquí a la izquierda y la otra a la derecha. Y en este caso, la similitud entre estos ítems proviene del color de estos bloques, pero también esa alineación hacia el lado derecho de la pantalla. Y estos aquí alineados al lado izquierdo de la pantalla. Y cada vez que veas tu progreso siendo rastreado, cuando estés revisando, por ejemplo, comprando algo en línea, verás en acción la ley de la conexión uniforme. Entonces las líneas entre estos ítems, ya sean que tengan algunas brechas entre ellas o completamente conectadas, nos aseguraremos de que percibas estos detalles como una sola unidad. El efecto de posición serial también es interesante, lo que significa que el primer y el último ítem de la serie siempre va a ser mejor recordado. Entonces en cuanto a tu diseño, aquí es donde debes mantener siempre tu información más relevante o clave. Pero además de estas leyes más comunes que discutimos como también muchas otras adicionales utilizadas en el diseño de experiencia de usuario. Y este gráfico muestra algunos de ellos. Así que siéntete libre de comprobarlo, está en el tablero. Pero ahora que entendemos mejor qué significa UX e UI, en el siguiente video, nos enfocaremos específicamente en el diseño de aplicaciones. 14. Diseño de aplicaciones: Está loco por pensarlo, pero hoy en día se puede hacer prácticamente cualquier cosa simplemente usando su teléfono móvil sin depender de una computadora portátil o computadora de escritorio. Todavía recuerdo que comprar algo en línea era realmente complejo y es algo para lo que definitivamente no habría usado mi teléfono móvil. Pero ahora esto es todo lo contrario. E incluso la banca es algo que preferiría hacer en mi móvil en comparación con usar mi computadora. Y la razón principal de eso es porque los dispositivos móviles y las aplicaciones móviles en particular mejoraron tanto en los últimos dos años. Y sobre todo en cuanto a su usabilidad, que en realidad están superando, están funcionando mejor que la mayoría de los sitios web. Ahora en este video, solo me gustaría darte algunos ejemplos o cosas interesantes que un diseñador de aplicaciones necesitaría considerar en su trabajo. Pero por supuesto, este es un tema enorme. Y para poder ver el diseño de AB en acción, realidad te voy a mostrar un proyecto específico de principio a fin en un par de videos después de éste, usando proyectos de diseño de aplicaciones Adobe XD como generalmente todos los demás proyectos de diseño gráfico comenzarían en la fase de investigación. Y aquí es donde es más fácil hacer cualquier cambio en la dirección de sus proyectos. Y luego recibir esta para tender a la regla 100 para el cambio, lo que significa que se puede gastar $1 dólares al principio esta fase de investigación para enmendar el proyecto. O no estarías gastando diez veces más que eso si ya estás en la etapa de diseño, o peor aún, puedes gastar 100 veces más que eso si tu proyecto ya está en desarrollo. Y es por eso que es tan importante comenzar primero en una planificación de alto nivel, que discutimos ya sería una tarea de diseñadores de UX. Entonces esa es la fase de estrategia y la identificación del problema. Y una vez que se identifican todas las funciones y características importantes de una app, los diseñadores de la interfaz de usuario pueden comenzar a trabajar en diversos prototipos. Ahora, normalmente comenzarían con estos prototipos de baja fidelidad, que son simples bocetos concentrándose en el diseño y estructura de cada pantalla. Y una vez que estos son probados y aprobados, pueden pasar a crear prototipos de más alta fidelidad, que se ven muy parecidos a la versión final. Pero en la mayoría de los casos, también funcionarían ya de manera similar al producto final. Por lo que puedes considerar esto como versiones piloto del producto final. Estos son extremadamente útiles para todos los involucrados en el proceso de diseño, incluido también el cliente. Por supuesto, lo más importante, también va a ayudar mucho a la hora de pasar del diseño al desarrollo real. Por lo que los diseñadores tienen que pausar su trabajo ante los desarrolladores. Y tener un prototipo funcional como este, donde todas las interacciones se hagan visibles va a hacer todo mucho más claro. Y puede ahorrar mucho tiempo y dinero consiguiendo todo bien en mucho menos etapas. Así que aquí hay un ejemplo de un prototipo de alta fidelidad creado en Adobe XD. Y esto es en realidad algo que vamos a echar un vistazo más de cerca en el próximo par de videos. Pero sólo para mostrarte cómo funciona, solo voy a presionar Comando o Control Enter. Y eso nos da la versión final de esta app en Adobe XD. Por lo que aquí ya podemos iniciar la interacción y dar click en diferentes elementos y podemos ver cómo va a afectar a todos los elementos en el diseño. Podemos saltar a otras páginas. Podemos cambiar entre estas páginas. Incluso tenemos un menú donde podemos volver a saltar a diferentes páginas o pantallas dentro de la app. Y luego también podemos volver a la pantalla de inicio e incluso hay un poco de información aquí arriba. Lo bueno de Adobe XD es que incluso puedes probar cada diseño que estés haciendo directamente en tu dispositivo móvil, siempre y cuando esté conectado a tu computadora. Y este tipo de retroalimentación inmediata puede ser extremadamente útil cuando se quiere hacer las cosas más fáciles de usar. Para que puedas probar las cosas tú mismo tan pronto como creas algo en la aplicación. Ahora es posible que haya oído hablar de software o economía, y este es en realidad un campo especializado que se ocupa principalmente las interacciones de un usuario al usar un software o aplicación, o en este caso, una aplicación en un dispositivo móvil. Hemos visto algunos ejemplos de usabilidad, y también discutimos que las áreas más cercanas al pulgar de alguien va a ser colocación ideal para los elementos primarios de navegación. Por otra cosa importante, esencial que debes tener en cuenta es que la mayoría de los elementos tu diseño con los que quieres que el usuario interactúe necesita tener alrededor de diez milímetros de tamaño. Cualquier cosa más pequeña que eso sería bastante complicado para mayoría de la gente poder aprovechar con precisión. Puede ser extremadamente frustrante cuando no se puede hacer que algo funcione. Entonces esto es definitivamente algo que todo diseñador de aplicaciones tiene que tener en cuenta. Y por ello, limitando la cantidad de opciones, por ejemplo, en el área principal de navegación, a la que normalmente nos referiremos como barra de pestañas a un mínimo. Entonces en este caso sólo hay tres de estos. Y hay estas animaciones realmente bonitas que por supuesto, en algunas apps verías, que solo pueden hacer que la estética de una app sea más única y más atractiva. Aquí hay otro gran ejemplo de una barra de pestañas aplicando uno de los principios de los que hemos hablado en el video anterior. Por lo que podemos ver que solo mostrando ya sea el nombre de una función o el ícono, podemos simplificar la interfaz. Y en lugar de tener ocho elementos, si sólo hay cuatro en cada momento que podemos ver. Esta es una forma muy inteligente de indicar la pestaña o pantalla seleccionada en la que está el usuario. Entonces ese es el que surge en forma escrita o el otro estado en forma icónica. También podrías recordar ley de Jacobs estaba diciendo que debes atenerse a escenarios familiares y eso también se aplica a iconos o formatos familiares de ciertos elementos de diseño. Y el ícono de la hamburguesa para menús puede considerarse uno de estos elementos estándar que todos sabrán usar. Y esperaremos ver una superposición como esta apareciendo cada vez que estén tocando sobre ella. La forma en que operará la barra de pestañas o el menú de hamburguesas. Y a igual puede ser todo perfectamente recrearlo en un prototipo utilizando herramientas como Adobe XD. Y veremos ejemplos de esto en breve. Y hay un último aspecto muy importante del diseño para dispositivos móviles en comparación con diseñar un sitio web, por ejemplo, y ese es el uso de gestos. Ahora estos se volvieron más estándar de lo que casi todos los usuarios esperarían poder usarlos. Dependiendo del tipo de app. Por supuesto, puedes usar estos gestos para cosas o cosas muy específicas que los usuarios normalmente esperarían, como pellizcar o esparcir sería acercar y alejar, por ejemplo. 15. Herramientas intuitivas para diseño web: Ahora en caso de que seas más de una persona visual pero sigue interesada en meterte en el diseño web. Una pregunta que podrías estar preguntando si puedes conseguir un trabajo o si puedes entrar en este sector sin saber nada de codificación. Y la buena noticia es que por supuesto que puedes, e incluso puedes crear sitios web o prototipos en pleno funcionamiento confiando en herramientas como ejemplos de Adobe XD que hemos visto en los videos anteriores. Pero también hay herramientas como Webflow, que pueden crear e incluso desplegar sitios web en pleno funcionamiento sin que tengas que escribir una sola línea de código. Ahora el Webflow no forma parte de la nube creativa, todavía va a ser una herramienta bastante fácil de recoger para mayoría de los diseñadores gráficos debido la familiaridad de la interfaz. Bueno, lo veremos en acción junto con Adobe XD utilizado para un proyecto de diseño web en el próximo par de videos. Dentro de Creative Cloud, también tenemos Adobe Spark, que es una gran herramienta que puedes usar para construir páginas de préstamo de forma rápida y sencilla, una vez más, sin hacer ninguna codificación. Y solía haber otra herramienta dentro la Creative Cloud llamada Adobe Muse, que era similar a Webflow, pero lamentablemente ahora está descontinuada y Adobe no la está desarrollando más. También me gusta mencionar a prosperar arquitecto, que es la herramienta que estamos utilizando para nuestro sitio de WordPress. Eso nuevamente es un gran tipo de arrastrar y soltar de Builder, lo que hace que la personalización de temas y plantillas de WordPress sea mucho más fácil que una vez más confiar en la codificación. Entonces para responder a la pregunta original, sí, puedes hacer diseño web sin conocimientos de codificación. Y al usar herramientas como estas, puedes llegar muy lejos en tus proyectos, tal vez incluso a un producto final. No obstante, si tienes una comprensión básica de los lenguajes de codificación, será mucho más fácil poder trabajar con desarrolladores siempre que sea necesario tenerlos involucrados en tus proyectos. Entonces en caso de que te interese ver cómo se puede usar Webflow en combinación con XD. En el próximo par de videos, te mostraré un ejemplo de esto. 16. Flujo de trabajo de Adobe XD + Webflow: cómo comenzar: Antes de empezar, solo quería mostrarte dos sitios que se construyeron en Webflow. Y muestran y resaltan algunas de las características geniales que puedes usar, como estos efectos de paralaje que verás más abajo aquí abajo, las interacciones en el hover y el desplazamiento de la página. Y podemos ver que también este es un lado totalmente receptivo. Entonces cuando cambié el tamaño de mi navegador, se adapta a él. Ahora, lo mejor de nuevo es en Webflow, puedes hacer esto sin escribir una sola línea de código y verás exactamente cómo se hace. Pero aquí hay otro lado realmente bonito. Sólo voy a refrescarlo para que puedas ver cómo se carga. Tenemos algunas animaciones y efectos realmente aseados aquí. Y se pueden ver muchas cosas pasando aquí. Datos más fríos, transiciones realmente bonitas. Y luego una vez más, todo esto es receptivo. Y tenemos algunos menús bonitos aquí, incluso efectos de cursor y así sucesivamente y así sucesivamente. Ahora si vas por el lado Webflow, puedes encontrar estos ejemplos en el escaparate. Pero voy a empezar un nuevo proyecto como lo prometí. Entonces, sin más demora, comencemos. Voy a escoger el lado en blanco y sólo voy a llamar a esta foto de la naturaleza. Voy a crear el proyecto. Ahora aquí estamos en el constructor Webflow. Y si estás familiarizado con los productos de Adobe, encontrarás el diseño y la interfaz de usuario bastante similares. Entonces en el lado izquierdo tenemos la barra de herramientas, después tenemos paneles, y también hemos seleccionado aquí en la parte superior para cambiar la vista entre diferentes plataformas o resoluciones de pantalla. Pero te voy a contar más de esto a medida que avanzamos. Entonces, antes que nada, te mostraré en XD lo que creé. Entonces esta es la visual para el lado, la página principal de la página web. En XD, puede usar el comando scroll o Control scroll para acercar y alejar rápidamente y Comando o Control 0, igual que en Photoshop e Illustrator para ajustar la página o el tablero de arte a la pantalla. Para que puedas ver que es un sitio bastante sencillo. Tenemos un encabezado, tenemos un slider medio en la parte superior y un par de cosas a continuación. Ahora, voy a hacerlo un poco más largo en el Webflow real, un proyecto. Pero por ahora, esto es todo lo que necesitamos tener en cuenta en XD cuando empieces a crear tus maquetas, también puedes crear prototipos. Así que crea múltiples páginas e incluso probando cómo va a trabajar cuando cambies entre las páginas. Pero por ahora, solo te voy a mostrar que cuando estés listo, puedes entrar en el menú Archivo y elegir Exportar, Todas las mesas de trabajo o lote. O incluso puedes tener una selección y luego exportar solo los artículos seleccionados. Pero antes de saltar a Webflow, déjame simplemente mostrarte una cosa aquí en XD, que también es una característica increíble, especialmente cuando estás trabajando en estos visuales o maquetas. En primer lugar voy a hacer doble clic en el tablero de arte y arrastrarlo más hacia abajo. Por lo que tenemos un poco más de espacio aquí. Y digamos sólo este layout que tengo en la cámara y el texto a su lado es algo que me gustaría tener más apagado. Por lo que me gustaría tener un par de características enumeradas a continuación esto. Para ello, puede utilizar la función Repetir cuadrícula en XD. Puede presionar Comando o Control R o hacer clic en este icono aquí a la derecha. Y eso crea una cuadrícula a partir de ella, lo que significa que luego puedes arrastrarla hacia abajo y puedes duplicar las cosas tan fácilmente como eso en ambas direcciones y luego simplemente trabajar perfectamente pero también horizontalmente. Ahora, lo mejor de esto es que podemos hacer las paces a cada uno de estos artículos sin estropear la rejilla. Así que déjame mostrarte lo que quiero decir. Voy a acercar un poco más. Por ejemplo, si quiero cambiar el texto de este segundo ítem, que sería fauna a su alcance. Verás que no está cambiando nada en la parte superior y en la parte inferior. Y para reemplazar la imagen, lo mejor es arrastrar y soltar las tres imágenes que quieras que use. Entonces si las arrastro y las suelto aquí, se va a actualizar las tres imágenes al mismo tiempo. Ahora lo bueno de esto es que como esta sigue siendo una cuadrícula de repetición, puedo seleccionarla, ajustar el espaciado entre ellos lo hará al mismo tiempo, también puedo seguir agregando más imágenes en la parte inferior . Y observa que se va a repetir con el primero de esa columna. Pero por supuesto puedo hacer montos adicionales, como seleccionar el texto, doble clic en él, y empezar a moverlo. Observe cómo se está actualizando todos ellos al mismo tiempo, o simplemente aumentar el tamaño del texto. Y sin estropear la copia, todos se están moviendo al mismo tiempo. Y esta es solo una de las muchas cosas que me encanta trabajar en Adobe XD, especialmente para el diseño web. Es realmente una herramienta de prototipado rápido desde la que puedes empezar y convertirla en un sitio web que funcione en Webflow. 17. Flujo de trabajo de Adobe XD + Webflow: importación de diseño a Webflow: Pero ya tengo todo preparado para que solo podamos volver a llegar al navegador. Ahora, lo primero que tenemos que hacer es agregar el encabezado. Para esto. Voy a hacer click en el signo más aquí. Y se puede ver que tenemos aquí un par de diseños preconstruidos, pero lo que necesitamos para empezar es la barra de navegación. Así que sólo voy a arrastrar y soltar eso aquí. Ahora, si comienzas sin tener ninguna sección en tu diseño, eso podría ser un problema más adelante. Por lo que recomiendo hacer eso primero. Y obviamente puedes hacerlo más tarde también, porque puedes arrastrar y soltar cada elemento fácilmente de un lugar a otro. Sólo voy a arrastrar esta sección y se puede ver que también puedo usar el navegador para decidir dónde va a estar esto o aquí en el visor real o área de diseño. Así que sólo voy a dejarlo caer aquí en la parte superior y luego arrastrar la barra de navegación a la sección, al igual que en el panel de capas, se puede ver exactamente ahora Navbar está dentro de la sección. Entonces ahora eso está listo. Podemos poner nuestra primera imagen dentro de esta caja. Hay un atajo muy práctico en Webflow. Y si presionas Comando o Control E, eso te va a dar la multa rápida. Y si acabo de escribir imagen y luego presionar Enter la va a colocarla ya dentro de ese elemento seleccionado para que podamos verlo ahora dentro de la sección de marca, tenemos la imagen. Ahora puedo elegir imagen y simplemente podemos arrastrar y soltar imágenes aquí, voy a usar finder y seleccionar la imagen que necesitamos, el logo y simplemente arrastrarla y soltarla aquí. Y también puedes arrastrar y soltar múltiples elementos o imágenes al mismo tiempo y agregarlos a la Biblioteca SAS en Webflow. Por cierto, también puedes cambiar a esa vista pulsando G en el teclado. siempre puedas ver todos tus activos o simplemente haz clic en este icono aquí a la izquierda, también hay un atajo para el Navegador, que es z, o haz click en este icono aquí a la izquierda. Entonces ahora que tenemos la imagen en su lugar, puedo empezar a refinar el espaciado y el relleno. Entonces lo que voy a hacer es sumar un margen por encima de él. Y nota que simplemente estoy arrastrando hacia arriba y abajo estos números. Pero lo que es aún más fresco es si mantiene presionada la tecla Mayús, puedes aumentar y disminuir estos valores a la vez, Así que en todas direcciones. O si usas la tecla Alt u Opción arrastrando hacia arriba y hacia abajo, va a cambiar los lados opuestos simultáneamente. Nuevamente, manteniendo pulsada la tecla Alt u Opción, haciendo clic en un número, puedes restablecerlo. Por lo que puedo restablecer muy rápidamente estos y luego aún manteniendo pulsado Alt u Option, solo voy a aumentar los márgenes superior e inferior. Y entonces también voy a reducir el tamaño manteniendo pulsada la tecla Alt u Opción. También puedes hacer clic y arrastrar a la izquierda y a la derecha sobre cualquier valor y puedes actualizarlos muy rápidamente o cambiarlos. Así que ahora sólo puedo configurarlo a probablemente alrededor del 70%. Creo que ese es un buen tamaño para el logotipo y para los enlaces de navegación reales. Puedo seleccionar todo el menú y puedo seguir haciendo lo mismo para poder moverlos más abajo, algo así. Y entonces por supuesto podemos empezar a cambiar estos. Entonces aquí sólo voy a escribir en revistas. Y entonces voy a seleccionar éste. Y creo que en el diseño original, si volvemos a XD, el siguiente es la escuela. Así que una vez más, simplemente haz doble clic y empieza a escribirlas. Ahora si necesitamos más opciones de navegación en la parte superior, simplemente podemos mantener presionada la tecla Alt u Option y arrastrar una de estas, colocarla donde necesite ir. Una vez más, vamos a revisar el siguiente son autores. Así que sólo voy a hacer doble clic en teclear eso en. Y entonces también podemos hacer lo mismo usando el Comando C o Control C para copiar y luego Comando o Control V para pegar. Se puede ver cuán rápido agregamos otra vez. Y puedo simplemente teclear un portafolio de topo es por ahora. Ahora no voy a pasar más tiempo en la barra de navegación por ahora. Pasemos a un elemento más emocionante, el deslizador. Entonces para esto, volveré a crear una nueva sección. Para que puedan ver nuestra primera sección está aquí. Voy a simplemente seleccionarlo y crear una clase para ello, lo cual es útil porque entonces más adelante podemos reutilizar esta clase si es necesario. Sólo voy a llamarlo navegación o menú principal, tal vez, algo así. Ahora vamos a crear una nueva sección. Entramos en las opciones de anuncios y luego arrastramos esta sección justo aquí debajo de la barra de navegación. Para esta sección, voy a usar otro elemento. Quickfind es probablemente el Comando o Control E más fácil, escriba deslizador y luego Enter. Entonces eso ya está colocado entonces, ahora la altura cuatro, esto debería ser diferente. Así que sólo voy a encontrar el tamaño. Está aquí arriba. Entonces en lugar de altura automática, voy a definir esto para que sea de 400 pixeles, tal vez incluso más grande, 500 pixeles. Por ahora, podemos cambiar este siempre litro, pero eso es un buen tamaño. Y te voy a mostrar eso aquí en el navegante. Si abrimos esto, ya se puede ver que tenemos dos diapositivas. Y también aquí en la parte inferior, podemos ver que ahora en la diapositiva uno, voy a colocar en la primera imagen. Y la mejor manera de colocarlo es en lugar de arrastrar y soltar una imagen dentro de ella, voy a usar esta opción de fondo. Por lo que da click en el signo más y ves por defecto se va a añadir la imagen de fondo. Entonces podemos elegir la imagen. Y una vez más, desde el Finder, solo voy a arrastrar y soltar una de estas imágenes en. Solo dejemos caer en unos cuantos más. Por lo que voy a seleccionar éste. Y entonces tal vez los pelícanos como simplemente arrastrar y soltar o tres de ellos aquí. Ahora, de estos, voy a seleccionar el primero. Por supuesto, quieres minimizar el tamaño de tus imágenes. Entonces, si son realmente de alta resolución, podría tardar mucho para que el sitio se cargue. Pero esa es en realidad una de las mayores ventajas del flujo de aire, que si estás alojando tu sitio con ellos, la velocidad es increíble. Entonces la ciencia se carga muy rápido. Está realmente bien optimizado tanto el código como el hosting también. Ahora voy a volver a las imágenes. Una vez más, elige Imagen y empiezo con la imagen una. Pero es importante que en lugar de usarlo como patrón, queremos configurarlo para cubrir. También podemos anclar la posición al punto central o a cualquier punto de la imagen. Entonces si quiero ver un poco más de la parte inferior, entonces podemos anclarla en la parte inferior. Ahora voy a ponerlo al centro para que podamos ver el cielo nocturno con la aurora boreal. Y voy a cambiar a Slide dos y repetir lo mismo. Por lo que una vez más, vamos a fondos, elegimos la imagen para esto. Voy a elegir este segundo, Canyon, y lo voy a poner para cubrir y luego colocarlo a cualquier parte que tenga sentido. Creo que esta vez probablemente sea bueno tenerlo aquí en la parte superior. Ahora, si quieres agregar esa tercera diapositiva, la forma más fácil de hacerlo es ir a la pestaña Configuración. Y luego ahí podemos elegir Agregar diapositiva es mejor hacerlo luego copiar pegar, porque si estás copiando una diapositiva, podrían conectarse. Entonces uno de ellos será el padre y el otro es el hijo. Y luego solo tienes que jugar un poco más para dividirlos o separarlos de esta manera. Creo que es más rápido. Por lo que ahora que tenemos diapositiva tres, podemos volver al estilo Opciones. Y luego aquí más abajo, entramos en la imagen y luego elegimos una imagen diferente, y elegimos ésta. Una vez más, ya está listo para cubrir. Parece que sólo necesitamos cambiar la posición. Probablemente el Centro trabajará para éste. Sí, me gusta. Ahora, lo único que voy a cambiar es volver al tamaño principal del deslizador. Así que voy a seleccionar el slider y luego tal vez aumentar esto a 550 pixeles. Sí, algo así. Ahora en cualquier momento, si quieres probar cómo funciona tu sitio, puedes usar Comando o Control shift P, atajo en el que puedes probarlo. Y por defecto el deslizador no se va a mover. Por lo que sólo podemos cambiar manualmente entre las tres imágenes que agregamos. Y por supuesto, dependiendo del tamaño de la pantalla, veremos diferentes partes de la misma en la vista previa. Ya podemos cambiar a, digamos el tamaño de la tableta en la que puedo ver una proporción ligeramente diferente en la imagen. Y ten en cuenta que ya el menú cambió a un menú amigable móvil, que es bastante agradable. También puedes ver cómo va a verse en el móvil. que podamos volver al modo de diseño con el mismo atajo Comando o Control shift P, o hacer clic en el icono aquí en la parte superior. Entonces ahí estamos, estamos de vuelta. Y voy a seleccionar el slider y entrar en la configuración. Y me gustaría que tocara automáticamente los lados. Así que sólo voy a añadir esa opción. Y entonces podemos montar todo tipo de otras cosas. Al igual que en lugar del tipo de animación que teníamos, podemos elegir fade over, lo cual es bastante agradable. Así que déjame mostrarte este pequeño que vamos a previsualizar y acabo de leer un poco más. Y luego vamos a conseguir el feed o también podemos verlo cuando estamos cambiando entre ellos. Muy bien, así que eso es todo lo que necesitábamos hacer por el deslizador. 18. Flujo de trabajo de Adobe XD + Webflow: cómo agregar animaciones: Ahora te voy a mostrar una característica realmente genial cómo agregar una animación a un costado. Ese flujo tiene una integración con un sitio llamado Lottie, y se puede encontrar este elemento aquí en el lado izquierdo. En primer lugar, solo agreguemos otra sección en la parte inferior. Y voy a volver a agregar elementos, desplázate todo el camino hacia abajo, y luego lo verás aquí en la sección de medios, animación latae. Voy a arrastrar y soltar ese elemento en esta nueva sección. Y si me desplaza un poco más hacia abajo, ya lo puedes ver aquí. Y para encontrar algunas animaciones de muestra, podemos ir a este enlace, archivos de Latif, y abre la página web donde necesitarás crear una cuenta para ti mismo. Y luego puedes descargar estas animaciones prefabricadas. Ahora algunos de ellos son pagados, pero también hay gratuitos. Entonces por ejemplo, si solo escribo en cámara, podemos encontrar muchas animaciones geniales. Y aquí hay uno que es completamente gratuito. Entonces todo lo que tienes que hacer es descargar este archivo JSON. Una vez que descargues eso, puedes importar la calle a Webflow. Y este es el formato de archivo que necesitas usar incluso cuando estés creando algo tú mismo en After Effects. Y ese es un aspecto realmente genial de esto. Nuevamente, una integración entre el Adobe Creative Cloud Webflow que es realmente muy bien conectando estas herramientas juntas. Si esto es algo de lo que te gustaría aprender más y te gustaría verme creando algo en after effects que prepararlo para Webflow. Hazme saber en la sección de comentarios a continuación, y estaré encantado de grabar un tutorial separado sobre este tema. Pero volviendo al diseñador, tengo este archivo ya descargado por lo que sólo podemos añadirlo a nuestros activos. Aquí está el archivo JSON, y sólo voy a arrastrarlo y soltarlo. Ahora se agrega. Simplemente puedo reemplazarlo por éste y ya está en el sitio, pero no lo verás a menos que vayas al modo de vista previa. Se puede ver en este momento, es enorme. Ahora para arreglar esto, necesitamos tener un elemento separado dentro de la sección. Entonces lo que normalmente hago si quiero constreñir un elemento es usar un contenedor o un bloque. Voy a usar Command o Control E y luego escribiré div. Y han bloqueado viene. Entonces ahora que tenemos esto, sólo podemos configurarlo para que la animación esté dentro del bloque. Después seleccionamos el bloque def y desde los ajustes aquí a la derecha, podemos configurar su tamaño. Entonces voy a utilizar para el ancho, tal vez 200, y luego para la altura, tal vez un 150, algo así. Y luego con este ícono aquí, podemos centrarlo. Por lo que el bloque DFF está ahora en el centro. Entonces veamos la vista previa como se ve esto. Y creo que eso se ve perfecto. Entonces así es lo rápido y fácil que fue configurar esta animación. Y podemos volver a la configuración y asegurarnos de que la animación siga jugando. Entonces cuando se selecciona la animación en sí, podemos ir a la configuración y simplemente elegir bucle. Ahora sólo para asegurarme de entender lo rápido y fácil que fue esto, voy a reemplazar esta animación por otra. Así que sólo vuelvo a los archivos de Latif. Y aquí hay otra que acaba de mostrar la apertura y cómo está cambiando, lo cual es bastante cool. Si hago clic en esto, una vez más, esta es una animación gratuita de archivos de Latif. Voy a descargar el archivo JSON. Por lo que ahora que se descarga el archivo, podemos volver a Webflow y podemos entrar en nuestros activos y simplemente arrastrar y soltar el archivo n Así que esa es la apertura Archivo JSON. Y entonces todo lo que tenemos que hacer es desde los activos mediáticos, solo podemos arrastrar y soltar esto en el bloque def. Puede dar click en Preview animación aquí en el lado derecho, y ya podemos verlo funcionando. Así que una vez más, eso es lo rápido y fácil que es agregar animaciones a tus diseños web. 19. Flujo de trabajo de Adobe XD + Webflow: animaciones de desplazamiento: Ahora déjame volver a XD para mostrarte la siguiente parte de la página. En realidad voy a saltarme este poco aquí en el medio porque me gustaría enfocarme en esta parte inferior donde voy más en las características de estas revistas. Y la primera es sobre las cámaras y el engranaje probado en el campo. Entonces para esto, me gustaría empezar a introducir algunas animaciones de paralaje ahora solo para tener algo para poder desplazarse hacia arriba y hacia abajo y poder ver el efecto de paralaje. Voy a añadir otro elemento aquí. En este tiempo, un contenedor. Voy a usar el Comando E y escribiendo contenedor. Ahí está. Solo asegúrate de que no esté dentro del bloque if. Sólo voy a arrastrarlo. Sí, ahí está. Y voy a colocar una imagen dentro esto y elegir la imagen. Sólo escojamos la revista. Y ahí está. Ahora podemos crear una nueva sección en la parte inferior. Así que vamos a ir a la sección de signo más y luego arrastrarlo y soltarlo todo el camino aquí en la parte inferior. Así que ten en cuenta que no podemos agregar esta sección dentro otra sección que es completamente normal. Ahora que tenemos nuestra sección aquí, voy a usar otro elemento llamado columnas, que nos dará la configuración si queremos 234 o cualquier tipo de columnas. Voy a escoger dos. Y también notar que ya podemos configurar el tamaño o división entre estas columnas. En realidad me gustaría un poco más espacio a la derecha para esta primera característica que aquí en esta columna izquierda. Entonces la columna uno, me gustaría colocar una imagen. Entonces voy a volver a escribir imagen, colocarla en, y luego elegir la imagen, y simplemente arrastrar y soltar la cámara en nuestra biblioteca. Y una vez subido, podemos seleccionarlo y ya está ahí. Ahora del lado derecho, me gustaría tener texto, así que voy a sumar un encabezado en primer lugar. Y luego voy a agregar otro párrafo de elemento usando este atajo realmente se siente como si estuviera en InDesign donde tenemos Quick Apply with Command or Control Return or Enter. Incluso el atajo es casi el mismo. Así que realmente me gusta esto. Se siente realmente natural. Ahora sólo voy a hacer algunos ajustes para el párrafo. Me gustaría tener algún relleno de la derecha. Así que sólo voy a exprimirlo en un poco así. Y entonces solo voy a escribir aquí Pruebas de cámara. Realmente no importa lo que justo ahí por ahora. Y voy a tener algún margen más desde arriba. Después selecciono la imagen y también tendremos un margen desde la izquierda. Voy a hacer esto más pequeño. Entonces toda la izquierda arrastra el ancho máximo, algo así. Entonces desde la posición, voy a abrir, flotar y despejar y elegir la opción correcta. Entonces posiciona el elemento a la derecha del mismo en esa columna. Y entonces tal vez sólo voy a aumentar un poco más el margen en el texto, algo así. Y ahora podemos empezar a sumar nuestro efecto de paralaje. Lo que necesitas usar es una interacción. Por lo que selecciono la imagen, voy a las interacciones aquí a la derecha. Elija el signo más en el activador del elemento y, a continuación, elija mientras se desplaza en la vista y, a continuación, elija Seleccionar acción y cree una nueva animación de desplazamiento. Ahora, este es un editor realmente poderoso donde puedes crear todo tipo de animaciones geniales y también puedes combinar múltiples movimientos. En este caso, voy a empezar con una simple transformación de movimiento. Así que selecciona Mover. Y por defecto, cuando veas elecciones de subrayado, cuando selecciones algo va a crear un punto de inicio y final. Ahora, para que esto funcione, es necesario definir algo. Para el punto de inicio. En realidad voy a definir primero el punto final porque aquí es donde quiero que esté. Entonces voy a simplemente escribir 00 pixeles en los valores x e y. Después vuelvo al punto de salida y lo voy a mover a la izquierda. Por lo que quiero que venga del lado izquierdo. Y para el valor y, solo voy a escribir en 0 pixel los. El pequeño signo de exclamación desaparece. Significa que la animación puede funcionar ahora e incluso podemos probarla activando esta función de vista previa en vivo. Entonces si me desplazo hacia arriba y hacia abajo, podemos ver que la cámara viene de la izquierda hacia un costado, lo cual es genial. Pero para poder verlo correctamente, voy a añadir otra sección a la página. Así que dejemos caer como sección aquí en la parte inferior en el navegador, es más fácil. Voy a entrar en las opciones para esto y teclear en 800 por lo que tenemos más espacio para desplazarse hacia abajo, volver a seleccionar la imagen, y luego voy a volver a las interacciones. Y por cierto, es bueno cambiar el nombre tus interacciones como esta desplazándote a la vista, voy a seleccionarlo y cambiar el nombre de las animaciones de desplazamiento porque esto es algo que podemos reutilizar si lo queremos. Así que sólo voy a renombrarlo y llamarlo fade in de izquierda. Me gustaría derivar las indicaciones en las capitales normalmente lo alimentan de izquierda. Eso es lindo. Pero si quiero hacer cambios en ella, sólo podemos hacer click en el ícono de la dentadura. Y voy a añadir una acción de desplazamiento adicional porque me gustaría que también se desvanezca. Por lo que quiero que la opacidad o así sea animada. Y me gustaría agregar un fotograma clave de opacidad adicional. También podemos llamar a estos. Entonces ahí está nuestra opacidad al 100%. Sólo voy a seleccionarlo y podemos ver que la opacidad es un 100%, pero debería comenzar con 0 por ciento. Entonces si damos la vuelta a la vista previa en vivo, esto ya debería funcionar. No estoy seguro de por qué esto no se registró. Vamos a configurarlo de nuevo. 0, Eso es todo. Ahora, enciende la vista previa. Entonces a medida que nos desplazamos hacia arriba y hacia abajo, podemos ver cómo se ve eso. Ahora, en realidad me gustaría que la opacidad comenzara ya encendida, digamos el 20 por ciento. Entonces si subo y desplázate hacia abajo, puedes ver cómo eso lo cambió. Y también me gustaría que la opacidad y también el movimiento llegara a su destino final o punto final antes de que salga de nuestra vista o pantalla. Así que lo voy a configurar un poco más arriba. Por lo que el punto final va a ser alrededor del 6070 por ciento. Entonces si revisas esto, verás que ahora llega al centro un poco más rápido. Yo diría que incluso antes es mejor. Serían 50, 60%. El movimiento debe ser en realidad ante la opacidad o el desvanecerse, o muy cerca el uno del otro, algo así. Así que ahora vamos a probarlo. Sí, eso se siente bien. Por lo que llega a su destino final alrededor cuando está en el centro de la pantalla, que creo que funciona muy bien. Y por supuesto puedes sumar todo tipo de cosas diferentes como la rotación. Nuevamente, sólo vamos a desplazar elecciones, rotar, y luego podemos configurarlo para que la rotación Z sea 0 en este punto. Entonces ese es nuevamente el punto final. Después añadimos el punto de partida para rotar. Simplemente agregamos eso aquí y luego lo arrastramos a la parte superior y luego cambiamos la rotación z tal vez ligeramente hacia la izquierda. Ahora, una vez más, si tiene esto fuera, desplácese hacia abajo. Veremos que hay una sutil rotación también agregada ahí, lo cual es realmente agradable. 20. Flujo de trabajo de Adobe XD + Webflow: efecto fuera de los límites con desplazamiento de paralaje: Ahora en el siguiente objeto, Tomemos aún más el efecto de paralaje. Voy a crear un fresco efecto fuera de límites con esta imagen, que ya hemos visto en XD. Ahora, lo que he hecho aquí en Photoshop es que ya preparé el fondo y el pájaro en dos imágenes separadas. Por lo que originalmente esta es una fotografía. Pero lo que he hecho es quitar el águila. Y sólo tengo los antecedentes para esto. Yo uso relleno consciente de contenido. Y en una capa separada, separé el pájaro del fondo usando simplemente enmascarar. Yo uso la herramienta pluma, dibujé el camino alrededor del águila. Tomó algún tiempo, pero ahora lo tengo completamente aislado. Entonces lo que voy a hacer es guardar estas dos imágenes por separado. Tendré el fondo guardado como JPEG y la capa de pájaro como PNG porque necesito la transparencia para que esto funcione. Ahora, puedes hacer esto en Photoshop muy fácilmente seleccionando ambas capas. Y puedes hacer clic derecho y elegir Exportar como. Una vez que estés ahí, puedes seleccionar la capa que deseas guardar como una configuración JPEG, la calidad probablemente al 60% suele ser una buena idea hacer y también asegurarte de que reduzca el tamaño . Entonces en este caso, la escala puede ser mucho menor. Probablemente el ancho puede ser alrededor de 600. Para este sitio web, creo que es suficiente. Y se puede ver ya son 60 kilobytes. Por lo que el tamaño fi siempre es importante para reducir tanto como podamos. Pero entonces podemos seleccionar la capa de pájaro y luego podemos configurarla a PNG para que tengamos transparencia ahí. Pero una vez más, el ancho debe ser menor. Nuevamente, 600 pixel en este caso, debería estar bien. Ahora, esto es un poco más grande, pero siempre podemos intentar usar el tamaño de archivo más pequeño con ocho bits. Entonces se hace mucho más pequeño y creo que todavía se ve bien. Por lo que ya tengo esto ahorrado. Entonces déjame mostrarte cómo lo armé en Webflow. Por lo que aquí ya tenemos una sección preparada en la parte inferior, y yo sólo voy a dejar caer una columna aquí. Entonces selecciono la sección, uso el atajo Comando o Control E, y luego escribo columnas. Entonces voy a usar la misma configuración, probablemente cinco en el lado izquierdo, siete a la derecha. Ya podemos sumar un poco de márgenes solo para que lo separemos de la parte superior. Y luego en el lado izquierdo, realidad voy a agregar un bloque div. Entonces, una vez más, empezamos a escribirlo, pegarlo. Vuelvo a usar el mismo atajo para la edición rápida. Entonces tenemos el bloque aquí. El motivo por el que uso un diblock porque primero necesitamos crear un fondo y luego colocar la imagen encima de eso. Por lo que el libro en sí va a utilizar el fondo agregándolo desde aquí, fondos hacen clic en el signo más y luego elige imagen. Y tendremos que arrastrar y soltar estas imágenes que guardé. Entonces el PNG y el fondo, por lo que el pájaro vuelve. Así que vamos a arrastrarlos y soltarlos aquí. Y voy a seleccionar para este bloque. Voy a seleccionar ese pájaro vuelta que ya está seleccionado. Es genial. Podemos simplemente ponerlo para que sea una portada. Establezca la posición al centro. Y luego podemos ir al tamaño real de esto. Voy a configurar la altura a tal vez 600. Sólo veamos cómo se ve eso. Vale, así que eso es un poco demasiado grande. Hagámoslo 300. Y luego el ancho también 300. Vale, eso funciona bastante bien. Ahora puedo alinear esto al centro del marco y luego tal vez añadir un poco más de margen aquí en el lado izquierdo. Sólo voy a hacer algo así. Vale, eso funciona bien. Ahora podemos añadir una imagen dentro de estos bloques div. Entonces a pesar de que tenemos una imagen ya dentro de ella que es sólo el fondo del bloque, pero aún podemos colocar una imagen dentro de él. Entonces este es realmente el truco. Entonces lo que voy a hacer es usar el atajo Comando E y luego empezar a escribir imagen. Y fíjate que esto ya aparecerá aquí en el navegador dentro del diblock. Por lo que ahora podemos elegir nuestra imagen, y ese es el pájaro PNG. Entonces eso ya está ahí. Y podemos de nuevo simplemente ajustar el margen, arrastrarlo hacia abajo. Una vez más, se siente como trabajar en Photoshop, moviendo las cosas tan fácilmente. Me encanta esto de Webflow. Así que sólo voy a instalarlo en algún lugar por ahí. Creo que eso es bueno. Y ahora que lo tenemos en su lugar, podemos ir a las interacciones. Haga clic en el signo más en el elemento, active y elija la misma opción que en la cámara mientras se desplaza a la vista. A continuación, seleccione la opción de animación de desplazamiento de reproducción. Y esta vez crearemos una nueva animación de scroll. Podríamos usar el mismo que teníamos en la cámara. Pero en cambio voy a crear uno nuevo porque esto será ligeramente diferente. Empezaremos con el movimiento. Por lo que agrego el movimiento y el punto de inicio. Quiero que esté donde esté. Así que sólo voy a escribir 00 para x e y. y luego el punto final, voy a moverlo más a la derecha, algo así. Eso es suficiente fuera de límites. Creo que no quiero que repase el texto, que estará del lado derecho. Entonces eso ya está bien. Pero podemos simplemente mover esto un poco más arriba, algo así. Y no se olvide de agregar 0 para y. el valor y no cambia, pero aún hay que agregar el número allí para que la animación funcione. Ahora todo esto está configurado. Podemos encender la vista previa y una vez más desplazarse hacia arriba y hacia abajo. Podemos ver cómo funciona. Vale, eso es genial. Y podemos sumar un poco de rotación también. Entonces vamos a elegir Rotar. Voy a poner esto aquí para que pueda llegar a cómo es. Así que sólo voy a añadir z rotación 0 grados, y luego voy a añadir otra rotación aquí en el principio donde voy a establecer la rotación para realmente, sí, en algún lugar, tal vez ahí. Ok. ¿Y entonces el otro se puede girar ligeramente más arriba? Sí, algo así. Vamos a revisar la vista previa de nuevo. Si me desplaza hacia arriba y hacia abajo, podemos ver el bonito movimiento ahí. Por lo que el águila va fuera del marco y también ligeramente girando. Ahora por supuesto, esto es de nuevo simplemente rascar la superficie de lo que es posible interacciones en Webflow. Así que si eres creativo, puedes utilizar esto y realmente crear algunos efectos sorprendentes en tu diseño web. Y por supuesto, el sitio ya sin mí haciendo nada, ya es receptivo. Por supuesto, puede refinar la configuración de respuesta si entra en el tamaño de la tableta y luego el paisaje y retratar los tamaños móviles. Y debido a que Webflow está manejando todo el CSS en segundo plano, si estás haciendo cambios en un punto de interrupción no va a afectar a los otros puntos de interrupción. Entonces como ejemplo, si quiero que mueva estos elementos por ahí, puedo entrar y ajustar el margen, moverlo un poco hacia arriba, y luego nuestro logo, podemos moverlo más lejos a la centro, en este caso, algo así. Y ahora si vuelvo a cambiar al tamaño del escritorio o a la tablet, no ves afectado en absoluto, pero en el tamaño móvil, podemos ver lo bien que está posicionado. 21. Sistemas de diseño: Un sistema de diseño es una biblioteca de elementos de interfaz de usuario y otros componentes que comparten un lenguaje común. uso de un sistema de diseño puede garantizar que pueda mantener la armonía en caso de un verbo o proyecto digital más grande y complejo . Ahora no se debe confundir con un kit de interfaz de usuario o una guía de estilo porque éstas suelen ser también parte del sistema de diseño, que normalmente también tendría las siguientes categorías principales. Los bloques de construcción, la biblioteca de patrones, y las reglas que pueden hacer que todos los elementos funcionen. Solo para ver algunos ejemplos de sistemas de diseño. Aquí están las pautas de interfaz humana de Apple. Podemos empezar con cualquiera de estas plataformas, pero tal vez nos concentremos en iOS. alcance, podremos encontrar toda la información relevante que asegure que la mayoría de las apps de la App Store se sientan y se comporten de manera similar. Por lo que tiene categorías como app, arquitectura, interacción del usuario al alcance. Si acabamos de saltar a arrastrar y soltar, por ejemplo, podemos ver que esto se explica cómo se necesita usar, y cuál es el resultado esperado de estas acciones de usuario. El sistema de diseño de Microsoft se llama fluido, que también es multiplataforma. Y de nuevo, podemos encontrar toda la información relevante en este sitio. sistema de diseño de Google se llama Material Design es tres, esa es la versión actual o más reciente, y destaca algunas características nuevas en esta iteración. Por lo que tiene componentes actualizados, bibliotecas y directrices, incluyendo diseño para dispositivos plegables, la implementación de color dinámico, y cosas que son nuevas en Android 12th. Pero también hay un término interesante aquí, tokens de diseño, que es una cosa de dimensión muy común en los sistemas de diseño. Estos son esencialmente los bloques de construcción de un sistema de diseño. Agregan las especies más pequeñas de valores de estilo y pueden definir cualquier cosa desde el color, tipografía, el espaciado, incluso la animación. Probablemente una de las mayores ventajas de los tokens de diseño es que también pueden registrar los cambios en sistema de diseño a medida que sigue evolucionando. Y el diseño atómico es otro término que se usa muy comúnmente cuando nos referimos a sistemas de diseño. Y esencialmente significa que tendrías los componentes más pequeños considerados, los átomos. Y estos son los bloques de construcción más simples como una etiqueta y libros de texto de campo de entrada o un botón. ¿ Por qué? Cuando empieces a combinar estos átomos, crearías moléculas que podrían ser componentes más complejos. Varias moléculas juntas formarían un organismo que podría ser toda una sección dentro de una pantalla o interfaz. Ahora sólo para demostrar esto en Adobe XD, tengo espectro, que es el sistema de diseño de Adobe. Y este es en realidad un plugin gratuito que puedes instalar para XD, pero en el que podemos encontrar que estos componentes como un botón que podemos agregar, que ya tendrá todos los atributos de configuración. Y por supuesto podemos hacer cambios en ella. Podemos encontrar los diferentes estados para ello, por ejemplo, e inmediatamente actualizaciones aquí en el diseño. Podemos por supuesto, actualizar la propia etiqueta. Y también podemos cambiar el tema de color de claro a oscuro, o incluso cambiar al modo wireframe. Ahora volviendo a la lista de componentes, podemos encontrar todos estos otros elementos como combo box, que de nuevo tendría aquí muchas opciones que podemos cambiar. Ahora, como mencioné, ese kit de interfaz sería parte de un sistema de diseño. Y en este caso, este es el kit de tarjetas UI para el espectro. Y puedo acercar más para que podamos ver el estilo y la cuadrícula de estas cartas donde tenemos las diferentes orientaciones y variaciones en las cartas. Y también incluye todos los diferentes tipos de tarjetas, dependiendo de dónde estarían apareciendo en la interfaz. Y para que entiendan cómo se usan estas tarjetas, si cambio a la app Creative Cloud, inmediato podemos ver estas tarjetas apareciendo aquí dentro de la interfaz. Entonces todo esto está definido en el sistema de diseño de espectro que acabamos de ver. Nuevamente, lo clave de los sistemas de diseño es la consistencia, asegurándose de que en todas partes todos los elementos se vean familiares y similares unos a otros. Buen sistema de diseño, por supuesto, también permite cierta flexibilidad, lo que significa que dejaría espacio para la mejora y permite que el propio sistema evolucione y mejore. Y como hemos visto con los ejemplos que pasamos, otro aspecto muy importante de un sistema de diseño es que tiene que estar muy bien documentado. Y eso significa que no sólo tiene que ser detallado, sino también actualizado de manera regular. Ahora en caso de que te interese conocer más sobre los sistemas de diseño, asegura de que echa un vistazo a estos pocos ejemplos que tengo aquí en el tablero. Y como nota final, quería mencionar también que hoy en día también existen sistemas de ilustración que son muy similares a un sistema de diseño, pero estos se centran en elementos ilustrativos reales, ya sean estáticas o animadas. Y un gran ejemplo para esto es el sistema de ilustración de Sistemas Operativos Google Chrome, que tiene un estilo visual muy específico que nuevamente asegura que todos los elementos se sentirán relacionados y parte de la misma familia. Ahora, como ya podemos ver un par de iconos increíbles aquí en nuestro próximo video, estaremos discutiendo el diseño de íconos con más detalle. 22. Diseño de iconos: El diseño de iconos es un campo especializado dentro del diseño web y digital. Y en este video, hablaremos un poco sobre los principios principales que se utilizan en este campo, y también algunos estilos o tendencias distintos que afectaron a los diseños de íconos en las últimas dos décadas. Y también veremos una plantilla de iconos en Illustrator que muestra la estructura subyacente que se usa cada vez que alguien está diseñando un icono. Pero primero, empecemos con los siete principios clave del diseño de íconos. Claridad, que simplemente significa que el ícono tiene que ser muy claro y debe tener una lectura inmediata, asegurándose de que la gente sepa exactamente lo que representa el ícono. legibilidad es algo que se aplica incluso si no tienes ningún texto o topografía en tu ícono. También puede referirse a la distancia, por ejemplo, entre elementos o asegurarse que las líneas en el icono no sean demasiado gruesas, no demasiado delgadas, por lo que son sólo la cantidad correcta para un tamaño particular. Icono. La alineación también es importante para asegurarse de que el icono, sobre todo si es parte de un conjunto, se sienta equilibrado. Y como mencioné en caso de un conjunto de iconos, la consistencia también es por supuesto, muy importante. Así que asegurándose de que los iconos de este conjunto estén todos en armonía. Personalidad en iconos significa que son únicos y se pueden reconocer fácilmente. Los iconos, por ejemplo, pueden ser abstractos, peculiares o juguetones. Nuevamente, dependiendo del tono de la aplicación o de la interfaz para la que están diseñados? La brevedad se refiere esencialmente a la simplicidad de un ícono. Entonces para asegurarte de que solo uses la cantidad necesaria de detalles y no más que eso. Piense en la densidad proposicional en el diseño de logotipos. Y por último pero no menos importante, la facilidad de uso se puede lograr asegurándose de que una familia de iconos o conjunto de iconos esté organizada, bien documentada, y también probada en contexto en términos de claridad de iconos, aquí hay un gran comparación, pasando de iconos claros e inmediatamente reconocibles a los que no son necesariamente sencillos o más nebulosos. Y estos, por cierto, son todos iconos usados en autos, dashboards en términos de brevedad, también podemos ver una pequeña comparación interesante aquí. Entonces en el lado izquierdo podemos tener la representación más simple de una casa, una sola línea. Y al introducir más detalles, podemos hacer que el diseño sea un poco más claro o más reconocible. Y esta es probablemente la cantidad ideal de detalles. Si bien si agregamos demasiados detalles, está empezando a volverse demasiado complejo para que un ícono funcione de manera efectiva. Ya que estamos hablando de brevedad, aquí hay un divertido retroceso a los iconos de Macintosh de 1984. Y en este caso hubo muchas limitaciones que frenan a los diseñadores de iconos introduciendo finos detalles. Entonces, en primer lugar, todos estos son diseños monocromáticos, y también tienen una cantidad muy limitada de píxeles con los que trabajar. Pero a veces tener limitaciones, como en este caso, realmente puede mejorar los diseños. Y creo que estos íconos aún funcionan muy bien y aún pueden ser reconocidos. Y también es algo divertido que para guardar cosas, todavía estamos usando el ícono de un disquete, pesar de que estos se han ido mucho tiempo y no creo que nadie las esté usando más. Ahora también mencionamos la alineación y lo importante que es hacer que los iconos equilibren de campo. Y aquí hay un gran ejemplo que en realidad la alineación óptica, en la mayoría de los casos, más importante que la alineación geométrica. En la parte superior, podemos ver que los lados izquierdo y derecho mantuvieron la misma distancia harán un extraño resultado final en este caso. Y eso se debe principalmente a la distribución de valores dentro de este triángulo aquí en el centro comparado con, por ejemplo, si tenemos un botón de parada, que tendría un bloque de cuadrado, eso haría que el ícono se sintiera mucho más simétrico. En caso de un botón de reproducción, realidad se necesita más espacio en el lado izquierdo luego en el lado derecho. Y esto es lo que nos referimos como alineación óptica. 23. Técnicas y términos de diseño de iconos: Ahora hay dos términos que no se puede evitar cuando se trata de diseños de iconos. Y aquí hay una gran comparación que muestra cómo Apple pasó del skeuomorfismo original al diseño plano que podemos ver en el lado derecho. Esta es probablemente la transición más drástica o extrema, y sucedió en iOS siete en 2013. Y aunque el ícono ha cambiado desde entonces, no han cambiado tanto como entre estas dos versiones. Ahora la familia de íconos originales, como dije, estaba usando el skeuomorfismo, que llamamos cuando un diseño está tratando imitar objeto de la vida real. Entonces un gran ejemplo de esto es el nuevo estándar, que literalmente es una versión ilustrada de un nuevo estándar o el ícono de la aplicación de notas, donde en realidad podemos ver ese pequeño efecto de papel rasgado en este renderizado de aspecto realista de un bloc de notas. La clave del skeuomorfismo es que está tratando de ser fotorealista y utiliza texturas y muchos detalles por diseño plano, otro lado, es el enfoque minimalista que se centra en la simplicidad , legibilidad y usabilidad de un conjunto de iconos. Este tipo de enfoque se basa más en el espacio negativo, ilustraciones bidimensionales, bloques sólidos de colores, y formas y formas simples. Aquí también hay otro buen ejemplo de cómo Google cambió de su conjunto de iconos original para Gmail, la aplicación de calendario, Google Drive, Google Docs, y Google Meet o Hangouts a través estos más simplificados versiones de las mismas. Y lo principal que podemos ver aquí de nuevo es que estos iconos son completamente planos. Ya ni siquiera usan gradientes ni sombras. Y en general, son simplemente mucho más consistentes entre sí en comparación con el conjunto original. Si quiero ser exigente, eso es probablemente sólo uno de estos iconos que aún se destaca. Ese es el icono de Google Drive, que tiene un grosor diferente de estas líneas en comparación con los otros iconos del conjunto. Similar al skeuomorfismo, también existe una nueva tendencia llamada el morfismo más nuevo, que cae en algún lugar entre el diseño plano y el skeumorfismo. También se le conoce a veces como interfaz de usuario suave, principalmente por su estética suave. Eso viene del paladar de color monocromático, las suaves sombras, y los detalles de bajo contraste. Aquí hay otro ejemplo bastante extremo donde un botón de encendido/apagado, que probablemente es el elemento funcional más importante de esta app, es casi invisible, apenas perceptible, pero para equilibrar cosas fuera y para asegurarse de que todavía va a ser utilizable, ocupa un espacio mucho más grande en la pantalla. Entonces es realmente un elemento dominante y donde se enciende, en realidad se destaca mucho más por el contraste de color. Ahora en caso de que te estés preguntando cómo se logra este sutil efecto de sombra en nuevos diseños mórficos. Esta es una gran comparación que muestra o revela el secreto. Entonces en caso de un estilo de diseño genérico, tendrías sombras similares a esta alrededor de la tarjeta, por ejemplo. Y si estamos imaginando este objeto desde un lado, se siente como si estuviera flotando por encima de la superficie. Si bien una nueva tarjeta mórfica con sentir como si parte de la superficie y sólo se destaca de su ligeramente, pero no está flotando. Entonces es más como un efecto de extrusión en comparación con el efecto flotante que hemos visto a la derecha. Entonces después de ver esto, cuando miras otro bonito ejemplo de nuevo morfismo usado en un prototipo de app, puedes ver cómo estas sombras sutiles y esa extrusión suave funcionan en todos estos elementos. Es un lado muy interesante que obviamente no solo se relaciona con iconos, sino también interfaces completas, pero definitivamente no es el más utilizable. Porque recuerda, el contraste es muy importante en general, en el diseño de la interfaz de usuario. Cuando se trata de diseñar iconos, puede ayudar tener una cuadrícula de iconos que se asegurará de que todos los iconos y la familia sean consistentes y similares entre sí. Y en el caso de la App Store, esta es la cuadrícula de iconos que se utiliza en el iOS, o aquí está la plantilla de ilustrador para el icono Play Store. Una vez más, tenemos la rejilla en el lado izquierdo. Y algunos ejemplos aquí a la derecha de cómo se verán los íconos En los diferentes formatos. Y para ver cómo estas cuadrículas se relacionan con los iconos finales reales. Aquí algunos de los ejemplos de los iconos circulares de Apple. que podamos ver Safari, el reloj, la brújula, y las aplicaciones de configuración, y cómo el diámetro de todos estos elementos circulares basa en el círculo grande original dentro de la rejilla. Y en caso de múltiples características circulares estándar fuera dentro de los iconos, también se relacionarían estos otros iconos más pequeños que también se establecen dentro de la cuadrícula. Usar cuadrículas de íconos como estas realmente puede garantizar que obtendrá la alineación y consistencia de un icono familiar, ¿verdad? último pero no menos importante, solo quería mostrar un ejemplo de un icono animado donde el botón de descarga se transforma en una barra de progreso, que luego se transforma en un icono de finalización. Entonces es casi como tres iconos en uno, dependiendo del estado real de este proceso. En general, para el diseño de iconos, Adobe Illustrator es la herramienta preferida. No obstante, para crear algo como este ícono animado, también tendrías que usar una herramienta como After Effects. Y en realidad vamos a discutir esto con más detalle una vez que lleguemos al tema de diseño de movimiento en este curso. Pero ahora que hemos cubierto iconos en el siguiente video, podemos hablar de banners. 24. Anuncios en banner: Los banners web son similares a los carteles y vallas publicitarias. Son las principales herramientas de publicidad en línea. El propósito de dominio es captar la atención de un usuario y hacerles querer interactuar con el banner para llegar al sitio web del anunciante, página de destino o aplicación en la App Store en general, el propósito de banners es generar tráfico para el anunciante. Y si bien en la vida real, es difícil medir la eficiencia de un cartel o una cartelera con banners web. En realidad es algo que se puede medir y rastrear perfectamente. Y uno de los resultados más importantes que se mide se llama CTR o tasa de click-through, que calcula con qué frecuencia gente haría clic en un anuncio. Es importante que el CTR sea una forma mucho mejor de medir el éxito o la eficiencia de un anuncio en comparación con simplemente contar el número de clics, porque siempre es relativo a cómo mucha gente ha visto los anuncios. Por lo que en realidad es el porcentaje de relación entre la cantidad de clics y la cantidad de impresiones lo que cuenta. Y la razón por la que es importante entender que siempre se va a medir el rendimiento de los webinars es porque eres, el diseñador será principalmente responsable de cómo acertado que el banner puede ser. Ahora la buena noticia es que todos los principios de diseño que tratamos en diseño impreso y en otros temas de este curso también se aplicarán a los banners web. Y solo por mencionar un par de cosas, armonía del color, el contraste, el uso del espacio negativo, énfasis de ciertos elementos, y la tipografía audaz son solo algunas de las cosas que te ayudarán a hacer banners destacan y funcionan bien. Ahora cuando hablamos de tipos de anuncios digitales, los anuncios de banner son en realidad solo un grupo por dinero. Para que como puedes ver, hay muchas otras opciones como video, publicidad, anuncios pop-up, aplicaciones sociales de pago, aplicaciones nativas que se integran en sitios web, contenido o anuncios que aparecen dentro de la aplicación móvil. Por ejemplo. Si bien estos otros tipos de anuncios requerirían un enfoque ligeramente diferente, configurarlos en comparación con la creación de banners. El motivo por el que nos estamos enfocando en banners en este video es porque estos siguen siendo los tipos de publicidad más utilizados en el espacio digital. En cuanto al tamaño de las pancartas, hay un montón de diferentes estándares y nombres asociados a ellos. Y se pueden ver algunos de estos enumerados aquí. Pero también es interesante, se puede ver la cantidad de veces que se utilizan estos. Entonces, el más común de todos estos es este formato de banner medio, que constituye el 40% de todos los banners en Internet. Entonces el segundo más común es este estrecho banner horizontal, generalmente conocido como tabla de clasificación. Igualmente comúnmente utilizado es el rascacielos vide. Cuanto más formato de herramienta. Y luego el resto de los tamaños se usan mucho menos en comparación con estos tres primeros. Además de las dimensiones de píxel de los banners y otro aspecto muy importante es obtener el tamaño de archivo de ellos ¿verdad? Y en general, cuanto más bajo sea, mejor. Pero la mayoría de los anunciantes tendrían tamaño máximo de archivo muy específico que el diseñador tendrá para asegurarse de que cumple. De lo contrario abandonas el diseño, será rechazado. Entonces podemos ver que para los tamaños de banner más pequeños, el tamaño real del archivo es limitado, generalmente a 50 kilobytes. Y eso se aplica a JPEG, PNGs y regalos en caso de banners estáticos y en caso de banners animados, Hay un par de formas adicionales que miden cómo van a afectar el tiempo de carga de la página. Iab en realidad se refiere a la Oficina de Publicidad Interactiva, que creó los lineamientos universales para el anuncio de banner, por ejemplo. Una de ellas es que el audio por defecto en banners web debe ser silenciado y sólo se debe permitir que se reproduzca si el usuario decide reproducirlo. Otra directriz importante es que un anuncio siempre debe ser muy claramente distinguible del resto del entorno, en la mayoría de los casos, un sitio web o una app. Pero también hay otras reglas que se aplicarán a los diseños de Bednar como esa como nunca debería cubrir completamente la pantalla de una app. En comparación con los banners estáticos, banners animados pueden ser más efectivos para captar la atención de las personas. Y también pueden contar historias más complejas, lo que también podría ser esencial en caso de que no puedas encajar toda la información relevante en un solo banner estático. Los principales tipos de archivos que se pueden utilizar para crear estos banners animados son regalos, formato de archivo de vídeo HTML y MP4. 25. Diseño de redes sociales: Para la mayoría de las personas las redes sociales se convirtieron en una de las fuentes más utilizadas de inspiración, noticias y entretenimiento. Todas estas plataformas están construidas de una manera de enganchar a la gente y quieren pasar más y más tiempo usándolas. Y es por eso que también se volvieron tan efectivas como herramientas de marketing digital. Basta con mirar estas estadísticas y ver los datos actuales existentes y el resto que es predicción. Por lo que esto está mostrando el gasto publicitario en redes sociales nivel mundial en miles de millones de dólares estadounidenses. Y también podemos ver la relación gastada en escritorio en comparación con el móvil. Los colores azules más oscuros son los de los dispositivos móviles. Podemos ver que en 2021, el total gastado ya estaba cerca 154 mil millones de dólares estadounidenses. Y de acuerdo con esta predicción, esa tendencia va a continuar que hemos visto en los últimos dos años. Ahora, la tarea de un diseñador de redes sociales que está especializado en este campo incluiría un montón de cosas diferentes. En primer lugar, está a punto de crear diseños para las necesidades únicas de cada plataforma de redes sociales. Esto en realidad puede ser algo bastante complicado, no sólo porque hay tantas plataformas diferentes, sino que también están cambiando con mucha frecuencia y estar al día con todos los requisitos y mejor prácticas, hay que aprender constantemente cosas nuevas y adoptar nuevos flujos de trabajo. De igual manera a los otros videos de este curso, sólo voy a enfocarme en un par de términos importantes en este primer video. Y en realidad usaremos principalmente Instagram como ejemplo. No obstante, la mayoría de estos términos se aplicarán también a otras plataformas de redes sociales. Y luego en el siguiente video, analizaremos miniaturas de YouTube y veremos qué hace que algunas de estas más efectivas que otras para atraer vistas en esta plataforma. En todas las plataformas de redes sociales, tendrías una línea de tiempo que muestra el post en el orden en que fueron lanzados. Por lo que tener el más reciente en la cima, una de las tareas importantes de un diseñador de redes sociales es asegurarse que haya cierta armonía entre estos posts, sobre todo para plataformas como Instagram, donde la línea de tiempo es todo acerca de imágenes y videos. Y para establecer la armonía en una línea de tiempo, tendrás que confiar en elementos repetidos y consistencia que se pueden aplicar para una tipografía, colores que estás utilizando. Pero también es importante asegurarse que también haya una variedad. Por lo que quieres asegurarte de que cada post destaque para que no todos se vean igual. Por lo que es un buen equilibrio y puede ser complicado a veces se puede ver cómo estamos usando ciertos elementos, repitiendo o recurrentes. Pero también nos aseguramos de que haya suficiente contraste y diferencias para que cada uno de estos posts parezca único. Ahora fuera del feed regular en la mayoría de las plataformas hoy en día, tendrías también historias, que podrían tener imágenes o videos. Pero lo más importante, estos están en el formato vertical de pantalla completa. Y tendrías la opción de tener múltiples pantallas, como en este caso, utilizamos estas pantallas adicionales para las tendencias de diseño 2022. Y puedo voltear a través de ellos aquí en el escritorio o también por supuesto, en el móvil. Y por defecto, estas historias desaparecerían a menos que se salvaran. Ésta que tenemos aquí en la sección de colecciones. Ahora, el diseñador de redes sociales no sólo es responsable la mayor parte del tiempo diseñar gráficos reales para las diversas plataformas, sino también de analizar el rendimiento de los posts. A modo de ejemplo, aquí está el back-end o el dashboard donde podemos ver la analítica de su cuenta de diseñadores de asignaciones de Pinterest. Y hay un par de términos importantes aquí en la parte superior que serían más o menos iguales en todas las plataformas de redes sociales. Y estos son los principales indicadores de éxito. Entonces, antes que nada, son las impresiones. Y en este caso, este es el total de impresiones de todas nuestras imágenes son posts en esta plataforma en los últimos 30 días. Y luego la impresión simplemente significa el número de veces post o pin. En este caso, estamos viendo en una pantalla de un usuario. Esta ya es una métrica importante, pero probablemente la más importante es el compromiso. Y eso puede significar cuántas veces la gente hace clic a través de un pin o post o interactúa con él, ya sea que lo estén guardando o gustando. Nuevamente, puede variar entre plataformas, pero en caso de Pinterest, contaría los clics y los Save. Y de manera similar a la relación entre impresiones y compromisos, también tendrías una audiencia total más grande. Gente que echa un vistazo a tus alfileres y alto, que una cierta cantidad será tu audiencia comprometida que en realidad está gustando, haciendo clic o interactuando de alguna manera con tus posts. Otro término importante a conocer en el diseño de redes sociales es ¿qué es un post orgánico? Simplemente significa que fue creado y compartido sin ningún pago involucrado. Por lo que esencialmente no es un puesto promovido. Entonces, por ejemplo, si saltamos a nuestro canal de YouTube y me desplazo hasta abajo hasta el fondo. Las reseñas de productos que tengo fueron todas las promociones pagadas. Por lo que fui suministrado por dispositivo, por estas empresas. Y a cambio, creé el video de revisión. Pero siempre es importante dejar claro en este tipo de posts o videos que no son orgánicos y que incluyen promoción pagada, compran una marca específica. El motivo por el que mencioné esto es porque eso es otra vez, otro aspecto muy importante de las responsabilidades del diseñador de redes sociales. Entonces, además de los gráficos o diseños reales y los análisis, otra tarea crucial es mantener una buena imagen de marca a lo largo cada acción que se realiza en las plataformas de redes sociales. Eso incluye comentarios o respuestas a los comentarios de las personas, curación de temas que se tratan, y el tono general de voz utilizado en todas las plataformas. Entonces, como se puede ver, a pesar de que podría parecer al primer paso ya trabajo del diseñador de redes sociales es bastante simple y directo. En realidad es bastante complejo, y hay mucho más que simplemente diseñar los posts reales. Entonces si te interesa conocer más sobre este campo, en el siguiente video, voy a analizar un par de miniaturas de YouTube de varios canales, o en caso de que quieras seguir adelante. En el siguiente tema, estaremos profundizando en el diseño de la presentación. 26. Diseño de miniaturas para YouTube: Una de las formas más efectivas de llamar atención de las personas es tener un disparo en la cabeza o un retratar en tu miniatura de YouTube. Por lo que esto puede ser una sola persona o puede ser un grupo de personas. Pero probablemente lo más importante, se quiere conseguir una emoción exagerada. Entonces alguien con una expresión muy específica. Ahora algunos YouTubers como PewDiePie usarían filtro liquificar para distorsionar la cara y nuevamente exagerar la emoción. Mientras que otros como la pizza McKinnon, o Gezer, escogen una instantánea de ese video que es el más expresivo o interesante de todas las expresiones. Pero de nuevo, probablemente los más extremos sean más efectivos. Entonces alguien que está asustado o encogido de hombros, o alguien está enojado, o alguien parece sorpresa, estos suelen funcionar lo mejor. Ahora, no siempre tienes que establecer un contacto visual con la persona en tu miniatura. O eso también puede ayudar a aumentar la efectividad de la miniatura. Pero por ejemplo, con Lou del vendedor de unbox P, siempre está un poco más lejos en segundo plano, pero siempre te está mirando. Entonces aquí el producto por supuesto, está en foco y Louise fuera de foco. Entonces hay un poquito de ahí que podemos ver. Pero aún así siempre nos está mirando y mirándonos con una cara seria en todas sus miniaturas. Pero como dije, no siempre tienes que tener contacto visual. Y se puede ver lo bien que funciona esto con esta miniatura, Jeremy Jones mirando a la derecha. Y obviamente porque se trata del Hombre Invisible, esperamos que algo esté sucediendo ese lado puede estar fuera del marco. Una vez más, es una composición muy inteligente y buena, nuevamente, enfocándose principalmente en un tiro en la cabeza. Y recuerda que mencioné que puedes tener múltiples personas en tus miniaturas. Ahora, la tripulación del corredor lo hace realmente bien. Lograron encajar a tantos personajes en su miniatura. Entonces tenemos equipo aquí afuera, tenemos Baby Yoda. También tienen el Mandaloriano, además tenemos a los tres de ellos en el marco. Entonces a pesar de que la miniatura te da un espacio muy pequeño con el que trabajar, lograron encajar tanta información ahí. Y tener todas estas caras o tiros a la cabeza lo hace realmente interesante y mucha gente le haría clic en él. Ahora por supuesto, no siempre tienes que llenar tu miniatura por completo porque el espacio negativo, como con cada diseño, puede ayudar a enfocarte realmente en ciertas áreas. Y aquí el juego se clasifica. Siempre tenemos estos grandes espacios vacíos en la miniatura porque siempre usan el mismo cuerpo expresivo y este tipo del traje, pero luego están reemplazando la cabeza siempre la principal personajes retratan de un juego. Ahora a veces esto da como resultado miniaturas muy interesantes, pero generalmente esto funciona muy bien una vez más, por ser un disparo en la cabeza, pero también utilizan el espacio negativo en su miniaturas. Y la técnica de usar el espacio negativo también es muy clara aquí con miniaturas de terapeutas unbox, una técnica que siempre mejora tus diseños y ayuda a hacerlo más atractivo e interesante es siempre que se pueda establecer profundidad. Y para crear eso, una de estas técnicas es utilizar fuera de límites. Un buen ejemplo para esto sería la miniatura rostral. Simplemente escríbelo por encima de mí donde podemos ver que la pizza se está superponiendo. La obra final real aquí en el lado derecho. Esto es de lo que estoy hablando, esta sección aquí, esa superposición crea más profundidad y más intereses. Entonces tenemos ese bonito efecto en capas. Y nota también que tenemos un contorno blanco alrededor de la mano. Voy a hablar un poco más de eso, pero ese es el efecto sticker, que esencialmente de nuevo, es una forma de separar la mano del fondo. Entonces creando una composición multicapa. Y como estamos en esta miniatura, también hay otro detalle aquí, el marco alrededor de la miniatura, que en realidad es parte del diseño. Y nota una vez más que la profundidad se usa realmente sabiamente aquí porque la mano está delante de ese marco. Por lo que otro efecto fuera de límites muy sutil. Si echa un vistazo a nuestras miniaturas, verás que usamos mucho esto. Por lo que ambos usamos un marco y también usamos a veces el efecto superpuesto o fuera de límites que separa o elevan ciertos detalles y hacen que parezca que están saliendo del marco. Está volviendo a Peter McKinnon, miniatura. También podemos ver esto fuera de límites efecto. Entonces este es el fondo original o telón de fondo de su video. Entonces tenemos los hombros saliendo de eso y superponiendo el diseño, que realmente amablemente integra todo juntos en toda la composición. Y aunque es muy sutil, también podemos ver la superposición aquí. El hombro sólo muy suavemente solapando el cartel. Ahora tener mensajes de texto tus miniaturas puede volver a ser muy efectivo, porque mucha gente, cuando se desplazan, ya sea que estén en su teléfono móvil o el error en la computadora. No necesariamente miran los títulos. Simplemente descrecharían y miraban lo visual como las miniaturas. Por lo que tener mensajes de texto la miniatura puede ser una buena estrategia para llamar la atención de la gente. Asegúrate de que entienden de qué se trata tu video. No obstante, hace un par de cosas que tal vez quieras considerar si decides hacer esto. En primer lugar y lo más importante, trata de evitar el clickbait. Por lo que sea que escriba, ya sea en el título o en la miniatura, siempre debe ser representativo del tema que está cubriendo. Así que no engañes a la gente para que haga clic en tus videos porque si no consiguen el contenido que están esperando, entonces no confiarán en ti y lo más probable es que no estén viendo tus videos en el futuro. Otra cosa que tal vez quieras considerar es no repetir el título exactamente en la miniatura. A lo mejor se puede tener algo que extienda el título. Entonces en lugar de intentar encajar en todo, simplemente puedes encontrar un título o incluso agregarle más contexto. Ian Barnard, por ejemplo, logró encajar en un impuesto muy largo aquí en la miniatura, siete consejos procrear que te dejarán sin palabras en menos de cinco minutos. Entonces eso será muy largo para un título, pero en realidad funciona bastante bien. Y aunque en realidad no usó un efecto fuera de límites, casi se siente como si el iPad estuviera fuera del marco. Y eso es sólo por la propia composición. Y también otra técnica muy inteligente aquí es una ampliación o aumento del tamaño de la cabeza. Haz que parezca aún más exagerado y casi como un personaje de cómic. Cuando se trata de usar textos en tus miniaturas, es bueno ser consistente y hacerlo reconocible. Por ejemplo, IG N está haciendo un trabajo brillante en eso. Por lo que podemos ver que tienen una plantilla o un estándar que utilizan para su composición. Por lo que siempre va a estar en el mismo ángulo. Tendrá esta dura sombra paralela detrás de este texto de contorno. Y entonces siempre tendremos el título y el subtítulo muy bien separados y divididos. Y como estamos mirando este thumbnail un poco más cerca, me gustaría mencionar también que han hecho un trabajo brillanteal han hecho un trabajo brillante sumar este punto culminante rojo en la cara de las actrices. Eso no estaba allí originalmente. Esto fue agregado porque están usando este telón de fondo rojo aquí. Y para crear ese ambiente realista, utilizan este efecto Photoshop, que lo hace parecer muy profesional y cinematográfico. De igual forma al uso de impuestos, también se pueden incluir elementos gráficos, que pueden volver a dirigir la atención de los espectadores. Y estos pueden ser círculos como en este caso con el módulo Ms, o también elementos más grandes como esta enorme flecha aquí, e incluso la separación entre la izquierda y la derecha, esta línea blanca diagonal puede ser etiquetas de precio de elemento gráfico son extremadamente útiles al igual que con el anuncio en general. Las miniaturas también. Se convirtió en un elemento de uso muy común. Pizza MacKinnon está usando estas etiquetas de precio aquí en la miniatura de ambos lados mostrando cuánto pagó Fiverr por edición fotográfica. Y también tenemos una etiqueta de precio muy bien integrada aquí en esta miniatura de vaca. Y como estamos mirando esto un poco más cerca, podemos ver un par de cosas de las que ya hablamos, como el disparo de cabeza aquí a la derecha, el título o textos para repetirlo en el miniaturas. Y una superposición muy sutil una vez más con el hombro y la llanta, sólo para establecer eso. 27. ¿Cómo hacer que las imágenes en miniatura se destaquen?: El contraste es uno de los aspectos más importantes del diseño, y también se aplica a las miniaturas de YouTube. Para que puedas utilizar el contraste de muchas maneras diferentes. O bien puedes juntar colores contrastantes, contrastando valores tonales juntos. Y también puedes crear contraste mediante el uso de ajustes y filtros como el afilado y la saturación. Ahora, aquí hay un buen ejemplo de una miniatura que se generó automáticamente a partir del video en sí. Entonces esto es algo que siempre debes evitarlos. Asegúrate siempre de crear una miniatura personalizada, en lugar de confiar en el motor de YouTube que generaría miniaturas para ti. Esta es la miniatura real en YouTube para el tráiler del anuncio de temporada para, para la increíble serie llamada Last Kingdom en Netflix. Y esto es claramente solo una instantánea del video en sí. No fue diseñado ni creado como una miniatura personalizada. Por lo que me gustaría mostrarles cómo se puede mejorar esto introduciendo contraste y hacerlo más emocionante. El mejor filtro, lo que normalmente usaría es el Filtro Raw Camera. Pero antes de que normalmente aplicarías esto, debes elegir Convertir para filtros inteligentes que asegúrate de que la capa con la que estás trabajando se convierta en un objeto inteligente. Entonces entonces puedes usarlo de manera no destructiva. Voy a entrar en Camera Raw Filter, que abre esta área de edición separada. Ahora aquí lo que normalmente querrías hacer es crear casi como un efecto de tonificación HDR donde aumentes las sombras, aumentar la exposición. Probablemente puedas ir aún más allá que eso, realmente exagerar todo. Y entonces probablemente puedas aumentar un poco más destacados por blancos y negros. También puedes arrastrar hacia la derecha o hacia la izquierda , lo que crea más contraste. En este caso, arrastrarlo a la izquierda probablemente sea mejor. Siento que todavía podemos tener un poco más de brillo aquí. Y para ello, usaría el pincel de ajuste con el que voy a pintar sobre esta parte más oscura de la cara. Y entonces se puede ver que podemos aumentar selectivamente la exposición que también. Voy a volver a la configuración adicional. Y una vez que tenemos los valores tonales, configuramos correctamente, para que podamos ver antes y después solo estoy presionando P en el teclado que ya marcan una gran diferencia. Y no lo olvides, siempre estamos pensando en usar una pequeña miniatura porque eso es lo que la gente va a ver. No estamos viendo toda la imagen. Entonces para este pequeño detalle, tiene que realmente pop y ser muy expresivo. Y para aumentar aún más el contraste, podemos sumar también claridad. Entonces eso suele funcionar bastante bien. También podemos agregar un poco de la neblina, sin embargo, creo que en este caso eso no está ayudando, pero definitivamente iba a ayudar es aumentar la vibración y la saturación. Para que una vez más, desde una distancia lo veas realmente funciona bien, Cuando lo miramos de cerca, se puede cocer. Y por supuesto que no usaría esto en un cartel, sino para una miniatura de YouTube, que es pequeña, son estos ajustes comisariados de salida y cambios lo que va a hacer que funcione. Otra cosa que normalmente haría es agregar también afilado. Entonces desde la pestaña de afilar y podemos aumentar el afilado. Y una vez más, puedes volverte loco. Normalmente, no iría tan lejos, pero porque estamos trabajando en una miniatura,normalmente haría esto, normalmente haría esto, tal vez añadir un poco de reducción de ruido solo para que no empieces a introducir también un mucho ruido en la composición. Pero ahora si aceptamos estos cambios, podemos ver antes y después. Obviamente, esa es una gran diferencia, sobre todo cuando miras esto en un tamaño pequeño como este. Antes y después de la diferencia masiva. La última vez hablamos sobre la importancia de usar tiros a la cabeza en tus miniaturas. También el efecto fuera de límites para crear profundidad. Ahora, un efecto o técnica que puede ser muy eficaz de utilizar es el efecto sticker, que se puede ver realmente bien utilizado aquí en la miniatura de Jess. Entonces ese contorno blanco con una sutil sombra paralela a su alrededor es de la que estoy hablando. Y esta es una técnica muy simple. Así que sólo para mostrarte cómo hacer esto, volvamos a nuestra última miniatura del reino. Aquí. Todo lo que voy a hacer es ir al menú Seleccionar y elegir Seleccionar tema, que va a seleccionar a nuestro personaje principal. Ahora sólo tenemos que refinar un poco esta selección. Entonces voy a usar la herramienta mágica sosteniendo presionada Alt u Option. Puedo pintar sobre secciones que no necesito ser seleccionadas. Y luego estoy, sin sostener ningún atajo de teclado, solo voy a seleccionar la espada aquí en el lado izquierdo. Y creo que eso es más o menos lo que necesitaba en esta selección. Entonces ahora todo lo que necesito hacer es convertir esto en un esquema. Y la forma más fácil de hacerlo es crear una capa separada, solo la capa en blanco, y luego rellenar la selección con un color. Puede ser de cualquier color. Solo estoy usando Alter Option Backspace, que va a rellenar con mi color de primer plano. Entonces estoy usando Comando o Control D para deshacerme de la selección. Por cierto, en este punto con tu herramienta de pincel, puedes refinar partes de esta selección. Por lo que de esta manera puedo ver muy claramente si hay algún detalle superpuesto que se perdió por la herramienta de selección. Pero entonces esta es la parte importante. Lo que quieres hacer es agregar el trazo o contorno real mediante el uso de los estilos de capa. Haz doble clic en la capa y luego elige Trazo. Y verás que ya tengo el color blanco seleccionado con un tamaño grueso y la posición fijada al exterior. Y siempre puedo aumentar, disminuir el tamaño de phi uno. Pero solo voy a hacer clic OK por ahora. Y puedo ver que aquí hay un par de detalles que no deberían ser visibles. Entonces para esto, voy a usar la herramienta de goma de borrar y simplemente eliminarlo muy rápidamente. Ahora que estoy contento con el resultado, todo lo que tengo que hacer es reducir la opacidad de relleno. De manera que reducir eso mantendrá visible el trazo. O cualquier estilo de capa que esté en esta capa. Y hará que los contenidos reales que era ese color de relleno completamente transparente. Pero para que este efecto más grueso funcione aún mejor, entonces puedo volver a los estilos de capa y también añadir sombra paralela, que se separaron aún mejor del fondo. Podemos aumentar la opacidad. A lo mejor también podemos añadir un poco más de distancia y propagación y tamaño a cualquier efecto que te guste. No lo olvides, también puedes arrastrar y mover la sombra alrededor mientras haces clic en la miniatura. Y eso va a crear un efecto aún más separado y más parecido a la pegatina. Otra composición efectiva que puedes utilizar en tus miniaturas de YouTube es crear una división entre el lado izquierdo y el derecho. Por lo que se puede utilizar para antes y después, o puede usarse para comparar ciertas cosas. Y ya hemos visto esto usado en algunas de estas miniaturas. Pero solo echemos un vistazo más de cerca a algunos de ellos. Por ejemplo, tenemos una bonita cara de aquí entre Beauty Pie y personaje de Minecraft, que una vez más vuelve a usar tiros a la cabeza. Por lo que tenemos dos disparos a la cabeza muy efectivos aquí. Pero entonces también tenemos esta agradable separación o división entre los dos lados del marco. También hay un poco de efecto de superposición creado o fuera de límites superposición creado o fuera de límitesutilizado con manos superpuestas a los detalles en el fondo. Y recuerda que hablamos la exagerada expresión usando el filtro de licuefacción. Otro ejemplo de esta composición dividida sería Jesús miniatura, donde tenemos a Jesús había disparado como divisor entre dos composiciones, la de la izquierda y luego otra a la derecha. Ahora, el efecto de desenfoque que podemos ver aquí también es una técnica muy común que se utiliza para hacer que quieras hacer clic en la miniatura. Por lo que sobre todo si hay un resultado final o revelan en el video, por lo general no es una buena idea mostrar en tu miniatura porque entonces la gente no va a estar tan interesada por ver qué es todo acerca. Usar efecto desenfoque por esa razón puede ser muy efectivo en miniaturas, que también podemos ver con Peter McKinnon. Está mostrando el del lado izquierdo, que fue el diseño más barato. Pero entonces tenemos un desenfoque bastante fuerte aquí del lado derecho con el diseño más caro, que una vez más nos hace emocionados e interesados por ver cómo se ve realmente. Y luego por último pero no menos importante, me gustaría recordarte que no uses la esquina inferior derecha de tu miniatura para detalles importantes porque ahí es donde va a aparecer el código de tiempo. Por lo que se puede ver que la mayoría de estos creadores están al tanto de eso. Y intencionalmente mantienen esta sección aquí en la parte inferior derecha completamente vacía. Entonces, una vez más, tenemos aquí un espacio vacío. Además, IgM mantiene intencionalmente esa zona MT. Entonces aquí es donde normalmente aparecería el código de tiempo. La única miniatura de todos estos donde se solaparía. Una información importante sería Peter McKinnon y es porque tienen los $200 en realidad sería difícil de leer debido al código de tiempo. 28. Diseño de presentaciones: El diseño de presentaciones es otro nicho interesante dentro del mundo del diseño digital en caso de que quieras especializarte en este campo. En este video, te voy a dar un par de consejos útiles que debes tener en cuenta. En primer lugar, el objetivo principal de una presentación es persuadir al público. Y una de las mejores formas de hacerlo es tener diapositivas atractivas en la presentación, pero también confiar en contar historias por tener diapositivas atractivas en la presentación, si eres el diseñador y no vas a hacer la presentación sí mismo. Lo más probable es que te proporcione la copia que el presentador desea utilizar en las diapositivas. No obstante, siempre puedes sugerir las cosas adicionales como un código. Por ejemplo, si funciona bien en el contexto de la presentación, y ayuda a involucrar al público. Cuando estés diseñando diapositivas, asegúrate de no supernumerarlas. Así que usa mucho espacio negativo y evita editar demasiado texto o viñetas. Asegúrate de que los presentadores tengan su propia copia mientras están presentando. En realidad no tiene que aparecer en las diapositivas. En cambio, el diseño y los elementos que estás usando en tus diapositivas siempre deben vincularse con o extenderse sobre lo que esté diciendo el presentador. De igual forma a una línea de tiempo en una plataforma de redes sociales, las diapositivas también deben tener armonía entre ellas. Por lo que debe haber consistencia y elementos repetidos, ya sean colores, tipografía, o el estilo de ilustración o fotografías. Pero para mantener al público comprometido, también hay que introducir algún tipo de ritmo entre las diapositivas. Entonces, por ejemplo, puedes usar colores de fondo más fuertes o más vivos para las diapositivas introductorias son diapositivas que dividen ciertos capítulos dentro de la presentación y utilizan diapositivas de fondo más brillantes para el contenido general de la presentación. Tampoco tengas miedo de recortar ciertos elementos dentro de las diapositivas. Entonces por ejemplo, aquí tenemos todos estos detalles flotantes en el centro de la diapositiva. bien la diapositiva puede ser mucho más emocionante si las cosas se hacen más grandes y tenerlas colocadas en los bordes de la diapositiva, una vez más, antes de pequeños objetos flotantes. Y luego después de todo hizo más grande, eso tiene mucho más impacto y mucho más interés en esta diapositiva. Por lo que al tener estos detalles alrededor los bordes y no mostrar cada detalle de ellos, inmediatamente hará que el público más comprometido porque automáticamente comenzarán a llenar los desaparecidos detalla e imagina cómo se verían estas ilustraciones en su totalidad. Ahora, aunque PowerPoint y Keynote, o las herramientas más conocidas para crear presentaciones, si eres un diseñador profesional de presentaciones es mejor si estás utilizando herramientas como Adobe InDesign. Y sólo tengo una presentación rápida aquí como ejemplo. Y por supuesto en los datos de InDesign y muchas técnicas y herramientas útiles como el uso páginas maestras o padres como ahora se les pide detalles repetidos o recurrentes. Como en este caso, este pequeño bar aquí en la parte inferior, que aparecería en todas las diapositivas. Pero mi herramienta favorita es en realidad Adobe XD para crear presentaciones. Y incluso hay un plugin increíble llamado presentación de Adobe, que puedes instalar. Y es completamente gratis. Y tendrá muchas plantillas preconstruidas que puedes usar para. En este caso, ya inicié un proyecto de presentación y elegí un estilo específico. Y cuando haga clic en diapositivas, podré elegir entre todas estas opciones de plantilla prefabricadas. Entonces digamos que necesito uno con un párrafo y una imagen. Y en cuanto añada eso, aparecerá junto a mi diapositiva anterior, todo es completamente editable por supuesto, por lo que puedo seleccionar cosas, moverlas, cambiar el texto, cambiar las imágenes. Y también puedo acceder a elementos aquí en el lado izquierdo, incluyendo iconos, formas, gráficos , ilustraciones, imágenes, etcétera. 29. Publicación digital: publicación digital, a veces también llamada Online o E Publishing, se refiere a la publicación de documentos de formato generalmente largo que se muestran en la web o en dispositivos electrónicos como lectores electrónicos y tabletas . En este video, pasaremos por un par de cosas importantes que debes saber sobre este sector. Unos términos con los que debes estar familiarizado y los pros y contras de la publicación digital en comparación con la publicación tradicional. Entonces, en primer lugar, aquí hay una estadística interesante muestra la opinión de la gente en general sobre los libros impresos en comparación con los libros electrónicos y cuál preferirían en situaciones específicas. Entonces, por ejemplo, la mayoría de la gente preferiría tener un libro impreso cuando están leyendo con un niño, mientras que preferirían un libro electrónico cuando están viaje o si quieren conseguir un libro rápidamente. Y en caso de leer libros en la cama, la decisión realmente se divide entre los libros impresos y los libros electrónicos. Una de las ventajas de una publicación digital es que puede llegar a un público más amplio. Porque una publicación impresa siempre se limitará a la cantidad de impresiones que se crearon. Si bien en el caso de una publicación digital, por supuesto, no existe ningún producto físico que necesite ser fabricado y distribuido. El tiempo que lleva preparar una publicación y en manos de tu público es muy rápido comparación con otra vez, la impresión tradicional. Y por supuesto no tener que lidiar con impresión y la distribución también significa que es mucho más rentable utilizar la publicación digital, pero también es más fácil rastrear el éxito de publicaciones gracias a las estadísticas. De igual manera a lo que hemos visto con las redes sociales en caso de una publicación digital en la mayoría de las plataformas, también podrás ver datos importantes como la cantidad de impresiones o publicación que se sacó de cada una. Cuántas personas realmente pasan a través de toda la publicación, lo que la mayoría de las veces no significa necesariamente que realmente lo leen todo, sino que simplemente vieron todos los contenidos en la publicación. Y también se puede ver la mayor parte del tiempo tasa promedio y lo más importante, los clics o interacciones que la gente toma. Porque eso es otra vez, una gran ventaja con las publicaciones digitales que puedes tener interactividad incluida también. Aquí hay un ejemplo de una publicación en línea. Es una revista sobre fotografía de naturaleza. Está en húngaro. Pero podemos ver que, por ejemplo, aquí inmediatamente en el primer spread, tenemos un anuncio, cuáles hice clic. Me lleva directamente a la página web del anunciante. La interactividad en las publicaciones digitales también se puede utilizar para muchas otras cosas útiles como navegación dentro de la publicación. En este caso, estamos en la página de tabla de contenidos. Y aquí puedo saltar fácilmente a cualquiera de estos artículos. Vamos a saltar a éste de aquí. Entonces, en lugar de que yo gire toda la publicación, puedo llegar a ella de inmediato. Por cierto, cada vez que vengo a un nuevo spread en esta plataforma en particular, issue.com, cualquier elemento interactivo en un spread se resaltaría temporalmente como página web de este patrocinador aquí en la parte inferior. Si vuelvo a ir a la página anterior y luego vengo a este spread, se podían ver los pequeños puntos destacados apareciendo ahí arriba en la parte inferior. Otra gran ventaja de las publicaciones digitales es que en caso de que haya algún error, por ejemplo, errores tipográficos que se descubran después de que las publicaciones se hayan puesto en marcha, aún se pueden modificar fácilmente. Y la mayoría de las veces solo significa reemplazar una página específica que inmediatamente refrescante aparecerá en cada dispositivo donde se muestre esta publicación. Por supuesto, puedes producir publicaciones digitales directamente desde InDesign utilizando una función llamada Publish Online. Y aquí hay un ejemplo de una publicación que creé hace un par de años. Podemos pasar por todas las páginas. Por supuesto, seríamos capaces de acercar también si lo queremos y desplazarse o luego otra vez, alejar hacia atrás e incluso ver las pequeñas miniaturas aquí en la parte inferior. Por si esto es algo que te gustaría probar, solo tienes que ir a las opciones de exportación aquí en la parte superior derecha en InDesign y elegir Publicar Online, donde podrás publicarlo como un nuevo documento o actualizar un documento existente. Entonces esto es lo que quise decir. Si necesitas actualizar tu documento después de realizar tus cambios en InDesign, solo tienes que asegurarte seleccionar el correcto aquí y que se actualizará inmediatamente con el modificado diseño. También hay un par de opciones útiles adicionales aquí, como puedes permitir que los espectadores descarguen el documento como un archivo PDF en caso de que quieran acceder a él sin conexión o tal vez imprimirlo. Y por defecto habrá opciones de compartir e incrustar disponibles, que en caso de que no desee utilizar, se puede ocultar del Visor en línea. Ahora hasta ahora nos hemos concentrado en las ventajas de las publicaciones digitales. Pero también es importante mencionar que en muchos casos, una publicación se distribuiría tanto en formato impreso como digital. Por lo que aquí podemos ver una revista de fondo, vemos la versión impresa, y aquí en un e-reader podemos ver la versión digital. El motivo por el que estoy mostrando esto es porque desde el punto de vista del diseño, esto a menudo significa un reordenamiento sutil del contenido. Entonces, en lugar de confiar exactamente en el mismo diseño para estos dos formatos, es posible que se le requiera realizar pequeños ajustes y reorganizar un par de cosas. En realidad hay dos términos muy importantes con los que debes estar familiarizado. Qué son las publicaciones recargables y de diseño fijo e o ePUbs. En caso de una publicación de diseño fijo, el contenido de las páginas siempre permanecerá estático. Se mostrará exactamente de la misma manera en cada dispositivo. Y esta es la opción que se utiliza normalmente cuando el editor quiere replicar lo que se imprimió mientras que con una bola de reflujo es decir publicación, los contenidos siempre podrán ajustar a un dispositivo en particular. Y en este caso, los saltos de página y la cantidad de páginas realmente variarán entre los dispositivos y entre la configuración que un usuario preferiría o el tipo de dispositivo que está utilizando, ya sea un teléfono, una tableta, o una computadora de escritorio. Y por cierto, en esta comparación, podemos ver los cinco formatos de archivo más comunes que se utilizan para publicaciones digitales y características disponibles con ellos en el lado derecho. Y en caso de que se pregunte qué significa DRM, esto realmente significa gestión de derechos digitales, que es una característica que permite al autor de n e publicación tener control legal sobre lo que el comprador podrá hacer con el trabajo. Entonces para resumir, la publicación digital puede ser un campo muy interesante, sobre todo si ya estás familiarizado con el flujo de trabajo de publicación tradicional, ya que realmente no tienes que aprender una gran cantidad de nuevas habilidades adicionales, aparte de tal vez utilizar la interactividad y comprensión de cómo rastrear el éxito de las publicaciones e. 30. Diseño de movimiento: El diseño de movimiento es otro campo muy emocionante e interesante, que puede ser fácilmente algo a lo que transitas desde diseño gráfico porque utiliza esencialmente los mismos principios y las mismas herramientas, incluso tal vez con la adición de Adobe After Effects o Adobe Animate. Y la mejor manera de describir lo que significa el diseño de movimiento es que se trata de un tipo de animación que se parece más a un diseño gráfico dinámico o en movimiento en comparación con el otro tipo más tradicional de animaciones, igual que los dibujos animados, diseño de movimiento se utiliza en muchas áreas diferentes, desde el anuncio hasta los diseños de logotipos e incluso el diseño de interfaz en comparación con la animación tradicional. En caso de diseño de movimiento, la mayoría de las veces, estarías animando topografía y formas. Y en este tablero podemos ver los diez principios del diseño de movimiento, que son todos métodos y formas diferentes que de nuevo, se desarrollaron originalmente en animación que puede hacer que tus diseños sean más atractivas y más interesante. flexibilización, por ejemplo, es una técnica muy común que puede hacer la animación se sienta más sutil y más realista. Entonces, en lugar de un cambio muy abrupto o un movimiento muy lineal y aburrido, puedes tener movimientos más suaves como estos dos ejemplos aquí. Entonces, en general, la flexibilización es solo una forma de ayudar al espectador a entender lo que va a pasar antes de que una acción esté tomando todo su efecto. Dribble es una gran plataforma para explorar e inspirarse en ejemplos de diseño de movimiento. Entonces cuando estás buscando estos proyectos, recomiendo elegir la animación como categoría principal y luego escribir en diseño de movimiento en las etiquetas, lo que te llevará a proyectos realmente geniales. Y te dará una mejor comprensión de lo que cuenta como diseño de movimiento. Este ejemplo, por ejemplo, cae en una categoría particular dentro del diseño de movimiento que llamamos topografía cinética, que convierte letras y palabras en personajes o actores de una animación. Es una gran manera de hacer que un mensaje más convincente y atractivo. Y de nuevo, para atraer la atención de la gente. Entonces es otra vez, algo que se usa muy comúnmente en la publicidad. Tal vez recuerden cuando hablamos de iconos, ya mencioné que animarlos caería o así en la categoría de diseño de movimiento. Aquí también hay un par de ejemplos simples que incluso con unas pocas líneas, al introducir un movimiento dinámico, se puede hacer las cosas mucho más interesantes e incluso contar toda una historia en comparación con un simple icono estático, por ejemplo. Entonces en caso de que quieras entrar en el diseño gráfico, principalmente estarás trabajando con Illustrator y After Effects, preparando tus elementos y componentes en Illustrator y luego animándolos usando After Efectos. 31. RA y VR: Tanto la realidad aumentada como la realidad virtual están abriendo nuevas dimensiones en el mundo del diseño digital. Si estás planeando entrar en este tipo de proyectos, además de usar herramientas como Photoshop e Illustrator, también necesitarás algunos conocimientos de aplicaciones 3D porque tanto AR como VR se basan en tres- experiencias dimensionales. Además de las habilidades 3D, animación y la codificación también es importante para este tipo de proyectos. Pero la buena noticia es que incluso si no tienes ninguna de estas habilidades y estás viniendo puramente de un fondo de diseño gráfico. Aún se pueden generar escenas de realidad aumentada mediante el uso de la herramienta llamada flecha. En el siguiente par de videos, te voy a mostrar un proyecto real, cómo lo armé desde cero, confiando en activos que preparé en Photoshop e Illustrator. Pero antes de ir allí y por si eres nuevo en estos campos, solo quiero asegurarme de que conozcas la diferencia entre AR y VR. Por lo que en caso de realidad aumentada, estarás utilizando tu dispositivo móvil y a través de la pantalla de tu teléfono o tablet, podrás ver una versión mejorada de tu propio entorno. Y mientras caminas sosteniendo tu dispositivo móvil, podrás ver diferentes signos de los objetos que se colocan en este mundo de realidad aumentada. Y por supuesto, el mejor uso de la AR es cuando también se puede interactuar con estos detalles mejorados que son grandes ejemplos de AR ya utilizados en la educación, por ejemplo. Y el requisito más importante de AR para que funcione correctamente es que reconozca su entorno. Ahora puede ser una habitación entera o incluso al aire libre. No obstante, también puede confiar en un objeto físico específico que se necesita tener para que la experiencia de AR funcione. Entonces en estos casos, la experiencia interactiva está ligada a tener ese objeto físico. Una vez que tengas este objeto y tu dispositivo móvil esté apuntado, lo va a rastrear en el espacio, y alineará todos los detalles de la realidad aumentada, incluidos los objetos 3D, el animaciones, sonidos e interactividad a ese objeto rastreado en su entorno. Otro gran ejemplo es cómo se puede utilizar para probar un mueble, por ejemplo, en su propia habitación para comprobar si va a encajar y si es del tamaño correcto. Porque eso en realidad también es algo que un proyecto EIR puede estimar fácilmente para ti. Dado que las cámaras en la mayoría de los dispositivos móviles ahora pueden entender las distancias y la escala adecuada de su entorno. Por lo que un proyecto de AR como este podrá mostrar con precisión el tamaño correcto de un mueble, por ejemplo, uh, en comparación con Realidad Aumentada, VR no depende de su entorno físico real. En este caso, tendrás que ponerte un auricular o casco, que te va a situar en este mundo virtual. Y para experimentar este mundo, solo tendrás que dar la vuelta a la cabeza. Y en algunos casos, también puedes caminar de ida y vuelta mientras haya ambiente seguro a tu alrededor para poder interactuar con un mundo de realidad virtual. También necesitarás controladores en la mano. Y además de los ejemplos obvios y más comúnmente utilizados de juegos que en realidad ya son increíbles herramientas creativas construidas específicamente para VR, donde puedes esculpir o pintar o hacer otras cosas creativas. Desde el punto de vista de un creador, tanto AR como VR son áreas extremadamente interesantes y recomiendo encarecidamente probar ambas por ti mismo para apreciar las posibilidades creativas. Así que únete a mí en el próximo par de videos si te interesa ver cómo usar Adobe Aero para crear un proyecto de realidad aumentada. 32. Conclusión: Enhorabuena por completar este curso de la serie de teoría del diseño gráfico. Espero que lo hayas encontrado útil e inspirador. No olvides pasar por el glosario de términos PDF, revisar todo lo que cubrimos, y si te sientes listo, toma el quiz para poner a prueba tus conocimientos. Vuelve en cualquier momento a las referencias en los tableros mileniales que usamos en este curso para ayudarte a recordar las cosas de las que hablamos o definir inspiración para tu próximo proyecto de diseño, por favor háganoslo saber si sintió que faltaba algo este curso o si tiene alguna sugerencia sobre cómo podemos mejorarlo, envíenos un correo electrónico a info en la asignación designer.com, y nos pondremos en cuenta en cuanto posible. Realmente agradecemos su aportación y ayuda. Ahora, es hora de que elijas tu próximo tema y te sumerjas en otro curso de teoría del diseño gráfico. Recuerda, no hay orden correcto o incorrecto para completar esta serie. Todas las reglas que cubrimos son igualmente importantes y todo está relacionado. Pero lo más importante es conseguir una buena comprensión de estas reglas y aplicarlas en tus proyectos. Estoy seguro de que usarás lo que has aprendido para crear algo increíble. Y no puedo esperar a verla.