Diseño de un sitio web responsivo en Adobe Xd

1. Introducción: Crear diseño responsive es una parte esencial de cualquier conjunto de habilidades de diseñador, especialmente en el mercado actual, cuando más tráfico viene de dispositivos móviles y tabletas. Adobe Extreme hace que este proceso sea realmente fácil porque cuenta con algunas grandes herramientas en su interior para ayudar a acelerar la parte receptiva de tu diseño. Y también tiene grandes opciones de exportación, lo que significa que va a hacer felices a los desarrolladores porque vas a entregar archivos a tiempo y formatos de archivo inpropios. Cater. Mi nombre es Alex. En este curso, aprenderás qué es un diseño responsive y por qué importa. Cómo diseñar usando columnas y contenidos, cómo trabajar con diferentes bibliotecas, puntos de ruptura de agua y cómo lidiar con ellos. Cómo crear un diseño de Adobe X'd luego hacerlo sensible para diferentes tamaños y cómo enviar adecuadamente esos archivos a desarrolladores y clientes. Este curso es para todos los interesados en el diseño responsive en Adobe X deep, y no tienes que saber usarlo será X'd. Van a cubrir adultos en este curso, así que quieres ser más deseable como diseñador, entregar archivos más rápido a clientes y desarrolladores que hacen clic y rodar, y te veré en el curso 2. Qué es el diseño responsivo: El diseño Web Responsive es un enfoque del diseño Web que hace que las páginas Web se rindan bien en una variedad fuera de dispositivos y tamaños de pantalla. Para un sitio web el dedo del pie funciona bien en diferentes dispositivos. Necesita estar preparado con anticipación. Señor, Job es un diseñador es diseñar todos sus elementos con esto en mente para lograr consistencia en el diseño a través de múltiples dispositivos y tamaños de pantalla. Los diseñadores utilizan sistemas de cuadrícula para ayudarlos a colocar los elementos de tal manera que trabaje consistencia en diferentes dispositivos y mantenga la misma sensación Loken. A medida que más y más tráfico del sitio web se está moviendo hacia dispositivos móviles. El diseño de sitios web receptivos es esencial para cualquier diseñador porque la mayoría de los sitios web que vas a diseñar se van a ver en diferentes pantallas desde computadoras de escritorio , laptops toe , tabletas, teléfonos todo el camino hasta relojes inteligentes. 3. Columns y contenido: cuando estás diseñando Responsive Website todo lo que tienes que pensar en nuestras columnas y contenidos. Puede tener una serie de columnas dependiendo de su diseño o si está utilizando biblioteca de componentes como bootstrap. Esas columnas deben ser fluidas, lo que significa que cuando los tamaños del dispositivo se hacen más pequeños o más grandes, esas columnas y el número de columnas se está adaptando al tamaño de pantalla en el que se está cargando el sitio web . También tienes contenido de pisos, y el ejemplo básico es el texto, que son responsive, se está adaptando al número de columnas que tiene el dispositivo que está cargando el sitio web. Lo que es típico sucede es que el contenido y las columnas se están adaptando juntas y para los elementos que no son fluidos. Algunos deslizadores, por ejemplo, llamaron está cargando las versiones más pequeñas de esos elementos que el desarrollador ha preparado por anticipado, házmelo saber, mostrarte cómo se ve eso en un ejemplo en vivo. Entonces aquí estoy en mi sitio web Web donut, esa red y estoy en la página de productos y este sitio web es responsive, lo que significa que todas estas columnas y contenidos van dedo del pie actúan de manera responsable cuando se cambia el tamaño del navegador. Entonces déjame mostrarte lo que quiero decir puedes ver claramente que tenemos algunas columnas justo aquí porque hay un pergamino hacia abajo. Todos ellos son tarde abajo, uno debajo del otro, y todos son, como se puede ver, exactamente lo mismo con. Por lo que todas estas imágenes son del mismo ingenio. texto está posicionado a la izquierda, como puedes ver así como los precios, y tenemos algunas categorías justo aquí en la parte superior también. Asumir texto y la navegación se queda donde está a este tamaño de pantalla. Entonces este es el tamaño de pantalla de escritorio para mi navegador. Y cuando hago click justo aquí, dedo del pie Laurie hacia abajo un poco y cuando se extiende como así se puede ver que todas estas columnas se están adaptando y como un movimiento desde el escritorio y para con todo el camino hasta, por ejemplo, tablet tamaño en algún lugar por aquí, se puede ver que ahora el menú de hamburguesas se está mostrando, y estas columnas se están volviendo mucho más pequeñas. Y cuando voy todo el camino hasta Mobile, por ejemplo, por ejemplo, en algún lugar por aquí se puede ver eso. Ahora tenemos dos columnas y en todo el camino hacia abajo en dispositivos más pequeños, que no puedo mostrarles aquí mismo. Tienes que cargar este sitio Web en tu teléfono móvil. Todas estas columnas van a apilar una encima de la otra porque están actuando manera responsable. Para que se pueda ver aquí mismo. A medida que los cambio de tamaño hacia arriba y hacia abajo, puede ver cómo se mueven y área justo y reposicionar donde necesitan estar. Entonces, como dije, en el dispositivo más pequeño, todas estas columnas se van a apilar uno encima del otro, y se puede ver claramente cómo están reaccionando a los diferentes tamaños de pantalla. Entonces cómo se completa esto es que este sitio web está usando bootstrap, y tiene 12 rejillas de columna. Entonces básicamente, vas a ver eso en el diseño un poco más adelante cuando lleguemos a la parte de diseño en este curso. Pero básicamente tenemos un juego de 12 columnas, y todas estas cartas se están llevando cuatro columnas cada una. Por lo que esta imagen tiene cuatro columnas. Esto tiene para también. Esto también es guerra. Eso es 12 en total, y este es el ingenio de esas columnas. Como puedes ver, por eso la navegación y esta imagen están alineados a la derecha y el logo y esta imagen están alineados a la izquierda. Entonces, básicamente, cuando cada vez te estás haciendo más pequeños, estas columnas y el contenido dentro de esas columnas es ajustándose y adaptándose. Por lo que básicamente sabe que está cargando un tamaño de pantalla más pequeño. Por lo que se lo dice básicamente al abrigo. Vale, Ahora cárgueme esta versión, y cuando vayas todo el camino abajo, te va a mostrar, OK, cargarme dispersión. Y ahora cuando haces clic aquí mismo, navegación se va a ver dedo del pie dentro de este menú de hamburguesas porque sabe que debe mostrarlo así. puede ver que el texto se está adaptando aquí mismo, Sepuede ver que el texto se está adaptando aquí mismo, y no se ve bonito por el momento porque a veces sólo tenemos una línea de texto y luego tenemos que hacerlo, y por eso esto se parece So Así que quizá pueda pasar a alguna otra página. Vamos al pie, por ejemplo, suscripción para que podamos ver cómo se ve eso. Y este es el ejemplo perfecto porque tenemos esta gran imagen en la parte superior, y cuando hago clic aquí y empiezo a bajar, puedes ver claramente que esta imagen se está extendiendo y luego bajando de tamaño para que puedas leerla claramente en todos los tamaños de pantalla. Y ahora el menú está aquí mismo. Como puedes ver, el texto se está adaptando, y ese es el ejemplo perfecto. Al ser un set off, el texto de contenido fluido es uno de ellos, porque cuando se está extendiendo, puede ver que el texto se está haciendo más pequeño o aumentando en ingenio. Como lo puedes ver aquí mismo. Y cuando llegas todo el camino hasta el tamaño más pequeño posible y comienzas a desplazarte, puedes ver que estas tarjetas también se están ajustando. Entonces, por ejemplo, tenemos este precio aquí mismo para que lo puedas ver en Lee como una sola tarjeta en tamaños de pantalla para móviles . Pero cuando lo extiendo, se puede ver que son dos cartas. Entonces cuando voy todo el camino hasta aquí, se puede ver que el ingenio fluido de esas tarjetas está cambiando, porque cuando me hago cada vez más pequeño, se puede ver ese ingenio apagado. Cada una de estas tarjetas se está haciendo cada vez más pequeña, como aquí, por ejemplo, se puede ver que el fondo se está haciendo más pequeño también. Texto todos estos tamaños de texto diferentes, por ejemplo. Todo es cada vez más pequeño y cuando se llega al tamaño de pantalla del dispositivo móvil, puede ver que están apilados encima uno del otro. Entonces básicamente van de 12 columnas en las que todo el camino hacia abajo a básicamente una o cuatro columnas diferentes, tal vez dos, tal vez tres, dependiendo. ¿ Estás usando bootstrap o algo más? O estás usando personalizado llamado Richard Developer te ha dicho que lo hagas. Cuando estás diseñando para Responsive, tienes que saber qué tamaños de pantalla estás soportando para que puedas saber cuántas variaciones diferentes tienes que diseñar. Pero hay que ver eso con tus desarrolladores porque todos y cada uno de los proyectos es obviamente diferente. Entonces si los desarrolladores están usando bootstrap, por ejemplo, todavía tienes que preguntarles, ¿ Vas a apoyar el tamaño de pantalla más pequeño o simplemente los más grandes? ¿ Vas a soportar tamaños de tabletas, tamaños móviles y así uno? Por lo que tienes que saber que de antemano antes de empezar a diseñar para Responsive, solo para que sepas qué tamaños de pantalla vas a apoyar con tu diseño y una cosa más, tienes que diseñar estos diferentes tamaños de pantalla en variaciones porque los desarrolladores simplemente no saben qué va a pasar en estos diferentes puntos de ruptura y vamos a explicar diferentes puntos de ruptura más adelante. Empezamos a diseñar, pero básicamente en todos estos diferentes tamaños. Entonces, básicamente, este es un punto de ruptura. Se puede ver claramente la navegación aquí mismo. Pero si lo bajo un poquito demasiado aquí, se puede ver eso en el tamaño establecido. Todo este stop navigation entra en el menú de hamburguesas justo aquí a la izquierda. Por lo que los desarrolladores tienen que saber qué tamaños de pantalla vas a apoyar con tu diseño y luego tienes que diseñar con responsive en mente. Entonces hay que mostrarles todos esos cambios diferentes, diferentespuntos de ruptura, puntos de ruptura que sepan cómo se va a ver el contenido una vez que comiencen a codificar y empiecen realmente a crear el sitio web Toby life. 4. Primer enfoque móvil: antes de que los primeros sitios web móviles, que soportaban dispositivos móviles, se desglosaban generalmente en dos sitios web, uno para escritorios y pantallas grandes y versión adaptada para pantallas móviles, que incluían controles táctiles. Este fue un mal enfoque porque significaba que tienes que acercarte a ASIO de manera diferente. Tenías que usar el subdominio M cuando estabas cargando el sitio más pequeño, y debido a que los dispositivos eran mucho más lentos Bagdad en comparación con hoy, esto significaba que las velocidades de carga eran mucho más lentas y las tasas de rebote eran bastante altas. Cuando los dispositivos móviles comenzaron a ser accesibles hace una década, apareció por primera vez la metodología para el diseño de sitios web llamada Mobile, lo que sugiere que cada vez que diseñaste un sitio web debes comenzar desde el tamaño más pequeño. Vas a apoyar y adaptar tu diseño desde su para dispositivos más grandes porque cada vez más tráfico comenzó a venir de dispositivos móviles. No obstante, hoy en día de esta manera, contamos con múltiples dispositivos táctiles diferentes desde teléfonos, tabletas y relojes inteligentes. En mi opinión, este enfoque realmente ya no importa, porque hoy, a diferencia de hace una década, diferencia de hace una década mayoría de los dispositivos apagados han tocado soporte de Microsoft Surface Studio y dispositivos como él con pantalla táctil laptops, tablets, teléfonos y smartwatches. Tienes que diseñar con soporte táctil en mente en todos los tamaños. Entonces, cuando estás diseñando, siempre debes pensar con anticipación cómo se van a ver tus elementos o no hay tamaños de pantalla desde ampliamente outs, como televisores inteligentes hasta los relojes inteligentes. Por lo que tienes que diseñar de cualquier manera que quieras, siempre y cuando estés planeando con anticipación para mantener la apariencia y funcionalidad fuera de tus elementos consistentes. 5. Diferentes bibliotecas: En ocasiones cuando estás diseñando, tienes que usar bibliotecas ya sea porque tu cliente lo quiere o sus desarrolladores han solicitado que uses bibliotecas y diferentes bibliotecas traen consigo diferentes retos y diferentes funcionalidades. Entonces en este video, sólo voy dedo del pie corriendo rápidamente a través de tres fuera básicamente los más populares. Por lo que estas bases de bootstrap de aire y angular y todos estos vienen con diferentes retos y diferentes fundaciones que tú como diseñador tienes que conocer. Entonces, básicamente, no tienes que saber realmente nada de estos. Simplemente puedes diseñar con responsive en mente, y tienes dedo del pie Siempre planifica con anticipación y piensa con anticipación y solo habla con los desarrolladores antes empezar a diseñar, para que puedas conocer los tamaños de pantalla ricos que tienes que soportar. Tienes que saber qué tamaños de pantalla tienes que diseñar antes de enviarles el diseño terminado . Pero hay que saber de estos porque estos son básicamente elementos pre preparados y tamaños pre preparados, y tienes todo dentro desde diferentes fondos, deslizadores, imágenes, textos, paginación y todos esos diferentes elementos preparados para que trabajen en avanzado en diseño responsive. Entonces lo que sea que estés trabajando en un proyecto simplemente pídele a tus desarrolladores sí funciona en algún tipo de librería fuera . Entonces, por ejemplo, bootstrap o fundación. Y luego si lo hacen, simplemente ve a estos sitios web y aprende más sobre esa biblioteca de componentes en particular de antemano . Por lo que hay que saber cuándo estás diseñando. Por ejemplo, Bootstrap tiene una columna específica con tamaño, y tienen una columnas diferentes pre-preparadas, por lo que hay que saberlo. Si no sabes nada al respecto, simplemente busca en línea. Entonces básicamente, puedes ver un video de YouTube. Se puede ir a estos sitios web e ir a la documentación. O puedes hacer click en los equipos de ejemplos y así sucesivamente. Y simplemente puedes aprender más sobre él porque les gusta usar estas bibliotecas de componentes porque hace que su trabajo sea mucho más rápido. Entonces, por ejemplo, alguien ya preparó toda esa información y todo ese código, los desarrolladores simplemente puedan usar ese frío cuando comiencen a codificar, y su trabajo va a ser mucho más rápido. Entonces, para que tu trabajo se vuelva mucho más rápido, tienes que familiarizarte con todas estas diferentes bibliotecas de componentes en las que estás trabajando en ese proyecto en particular, para que puedas saber de antemano qué es lo que debería usar, qué tamaños de pantalla Deberías diseñar cuatro, y siempre debes preguntar básicamente a tus desarrolladores son van a soportar el tamaño de pantalla más pequeño , el tamaño pantalla más grande y así uno para que sepas lo que debes ser diseñado, significado para y qué resoluciones y tamaños de pantalla debes soportar. Entonces, no tengas miedo cuando alguien te pregunte Se puede diseñar un sitio web usando fundación? Porque básicamente, único que significa es que hay que saber ingenio diferente fuera de esas columnas, cuántas columnas están dentro y qué elementos se soportan y cuáles no. Y siempre puedes descubrir eso básicamente usando los muelles en sus sitios web, y puedes familiarizarte de antemano antes de que empiece a diseñar para que no te encuentres ningún problema cuando estás diseñando. Posteriormente, siempre puedes preguntarle a tus desarrolladores, y siempre es una recomendación fuera del mío. Pregúntale a los desarrolladores cualquier cosa que no entiendas, porque cuando comienzas a diseñar y ya estás invertido con tu tiempo, por ejemplo, semana o mes en un proyecto, y luego cuando envías esos archivos desarrolladores, entonces aprendes que no dio nada, acuerdo a un plan, entonces puede ser realmente agitado dedo del pie rediseñar todo lo que hiciste porque ya perdiste ese tiempo diseñando para algo que no debería ser diseñado en primer lugar. Entonces, para recapitular, basta con mirar la documentación y ver si hay algo específico en cada una de estas bibliotecas de componentes y si simplemente está involucrado en su diseño y aprender básicamente, qué tan blancas son las columnas, el número fuera de columnas y cómo están actuando sobre el diseño responsive? 6. Soporte y puntos de descanso del dispositivo y: cuando estás diseñando, siempre debes preguntar a tus desarrolladores sobre el dispositivo, el deporte y los puntos de ruptura. Esto significa que tienes remolque. Pregúntales qué dispositivos van a soportar, que sepas cuántos diseños diferentes y receptivos vas a crear para que pueda crear, por ejemplo, y llámalo un día si eso es algo que quieren. Entonces, por ejemplo, quieren soportar un tamaño grande. Y tal vez el tamaño de la tableta está en deuda porque de ahí viene la mayoría fuera de su tráfico . Pero por lo general hay que soportar más de dos, y aquí estamos en la documentación en los sitios web bootstraps, y se puede ver claramente que los dispositivos extra pequeños formularios de retrato son de menos de 576 píxeles blancos. Y eso significa, básicamente, que cuando estás creando un layout, que es de menos de 576 píxeles en ingenio, cómo se va a ver el diseño en esos dispositivos para que realmente puedas pensar en extra pequeño teléfonos móviles o relojes inteligentes, por ejemplo, que son menores de 576 píxeles en ingenio. Por lo que puedes apoyar eso si los desarrolladores están requiriendo que lo apoyes y luego llorar esos 576 de frente. Entonces, una vez más, solo estoy hablando del bootstrap aquí mismo. En este ejemplo en particular, siempre debes hablar con tus desarrolladores y aprender más sobre qué biblioteca de componentes y que van a usar, si la hay, y luego puedes seguir adelante. Por ejemplo, se puede ver que los dispositivos pequeños formas de paisaje son 576 en adelante. Los dispositivos medios, lo que significa tabletas y arriba, van desde 768 e ingenio. Y luego nos estamos moviendo a unos dispositivos grandes, por lo que los escritorios y, por ejemplo, portátiles más grandes son nueve a un Extra. Los dispositivos grandes son escritorios grandes, que van desde 1200 píxeles en adelante. Entonces todo esto significa que básicamente tienes que crear cinco tamaños diferentes fuera de tu diseño con el fin de soportar todos estos diferentes requisitos. Si tu cliente y tus desarrolladores lo están solicitando toe así una vez más, si solo quieren apoyar, por ejemplo, tres tamaños para que quieran soportar tablet móvil y grande. Entonces para eso es para lo que necesitas diseñar. Y básicamente, como dije varias veces a lo largo de este curso, tienes que diseñar con responsive en mente, Así que cada componente individual que estás diseñando. Tienes que pensar por primera vez cómo se va a ver en estos diferentes tamaños de dispositivo . No importa si estás usando bootstrap o foundation o algo en absoluto, tienes que diseñar que todos tus componentes se vayan ajustando con los dedos del pie y funcionen maravillosamente en todos esos tamaños de pantalla diferentes. Entonces, por eso el soporte de dispositivos es realmente esencial. Y antes de empezar a diseñar, siempre debes preguntar a tus desarrolladores y clientes qué dispositivos vas a apoyar para que sepas cuántos puertos diferentes vas a crear dentro de Adobe X'd para mostrar estos diferentes diseños y puntos de ruptura. 7. Diseño para los tonos: Ah, muchos diseñadores diseñarán un ampliamente out para escritorios y luego crearán diferentes nuestros tableros en adobe X T. Por apuesto a que iPhone y Android adapten el layout para que quepan y lo llamen un día. Este enfoque es incorrecto porque estás asumiendo que todos los usuarios van a acceder al sitio web utilizando sólo esos tres dispositivos. Ahí es cuando se rompe el sitio web, porque cuando alguien visita desde otro dispositivo, sitio web no es compatible y no va a funcionar correctamente. Esos son ambos tamaños son específicos para APS móviles porque tanto IOS como Android están diseñados para funcionar con componentes específicos creados desde el principio para esos sistemas operativos. Por lo que cuando cargue su sitio web en un tamaño que no es compatible con él, tendrá problemas de usabilidad, problemas carga, elementos que no se muestran correctamente y más que deberíamos usar nuestros tamaños de orificio para APS móviles , Onley y para sitios web receptivos. Debes usar puntos de ruptura y tamaños de dispositivo, que vas a apoyar desde el principio 8. Gestión del tiempo: antes de Adobe X'd hasta similar a él. Tienes que diseñar cada tamaño por separado y adaptar los elementos de una manera que consume mucho tiempo . Pero debido a que el éxtasis se crea teniendo en cuenta la velocidad, utilizando su función de redimensionamiento sensible, puedes diseñar para diferentes tamaños con bastante rapidez. En lo principal en lo que debes enfocarte es pensar antes de un diseño y planear con anticipación cómo van a quedar tus elementos en diferentes tamaños de pantalla. Y en la siguiente sección del curso, vamos a pasar al diseño. Vamos a leer el breve Zion, hacer algo de planeación y empezar a diseñar nuestro sitio web para luego adaptarnos a diferentes tamaños que el cliente va a apoyar, así que nos vemos allí. 9. Introducción al diseño Responsive: en esta parte del curso, vamos a tratar con el diseño. Y te voy a mostrar cómo creé esta plantilla de estudio de diseño la cual puedes descargar y utilizar de forma gratuita tanto para tus proyectos personales como comerciales. Vamos a dividirlo. Vamos a sumergirnos en profundidad en cómo puedes crearlo tú mismo si quieres. Te voy a dar todos los recursos que se utilizan para crearlo, y luego vamos a crear un diseño responsive usando esta plantilla exacta. Entonces vamos a correr rápidamente a través de lo que tenemos aquí mismo. Tenemos esta sencilla navegación en la parte superior. Entonces tenemos una bonita imagen de héroe grande con dos botones. Tenemos algunos patrocinios ahí mismo y agencias con las que ha trabajado esta agencia en el pasado . Entonces tenemos sobre nosotros sección. Entonces tenemos una sección más aquí mismo con el texto. Tenemos algunos futuros. Entonces tenemos buenos precios grandes con tres niveles de precios. Entonces debajo de eso, tenemos algunos buenos testimonios por debajo de eso, tenemos un llamado a la acción. Tenemos la sección de bloques y finalmente tenemos el flotador en la parte inferior. Entonces lo que vamos a usar es que te voy a dar este archivo exacto. Por lo que vas a recibir todos estos colores. Vas a recibir todos estos estilos de personajes y usamos el sentido abierto, que es gratuito. Enfriar frente. Y te voy a dar un enlace. En un archivo pdf, señor puede descargar y usar fácilmente el sentido abierto en este y todos los proyectos futuros si lo desea , así como Carla, que una vez más es gratis Google Front, que no se puede una vez más, Donald y noticias en tus proyectos. Entonces lo que tenemos justo aquí en la parte superior son bootstrap, grandes tamaños. Entonces si hago click en uno de los aeropuertos, por ejemplo, este y doy clic en el Grande, se puede ver que todas estas plantillas tienen muy bien incluidas dentro. Y un gran es un poco diferente, sobre todo para este árbol al final. Y lo vamos a pasar en los futuros videos. Pero voy a explicar rápidamente algunos de estos son puertos. Por lo que voy a elegir usar bootstrap en este ejemplo. Y como dije en videos anteriores en sección de oración fuera del curso, puedes usar algunas otras calificaciones responsivas si quieres, o puedes crear las tuyas propias. Todo depende de ti, tu diseño y sobre todo de tus desarrolladores, porque todo depende si lo van a apoyar con su cotización. Entonces en este ejemplo, vamos a usar bootstrap y vamos a usar la grilla de columnas caídas. Entonces, como dije, si hago clic aquí y voy a mi diseño, se puede ver que para escritorios extra grandes, que son de más de 1200 píxeles en los que tenemos 12 columnas, consiguió que Erwitt fuera 30 cancelándolo 65. Y estos son los márgenes los cuales están vinculados tanto para lado izquierdo como derecho, por lo que puedes ver ahí 1 65 Así que en este caso, las columnas son estas columnas de color azul claro que ves justo aquí, y puedes dar clic aquí y condenas a un menor. ¿ Pagas ciudad aquí si quieres, para que puedas ver fácilmente el diseño detrás de todas estas columnas. Puedes si eliges, cambiar el color al color que quieras, si eso es algo que quieres, pero voy a elegir usarlo 25% solo para que lo veas un poco mejor. Entonces tenemos siguiente toe extra grande que se detiene que una vez más son más de 200 pixels, en los que tenemos un gran dispositivo que son escritorios de hasta 992 pixels, en los que a continuación tenemos tabletas medianas que son hasta 7 68 pixels, en los que tenemos dispositivos pequeños tabletas que son de hasta 576 píxeles en ingenio. Y finalmente tenemos dispositivos extra pequeños los cuales se forman por debajo de 576 pixels en ingenio. Entonces si hago click en esta, puedes ver que tenemos cuatro columnas porque una vez más, este es un ingenio realmente pequeño fuera de tu pantalla. Entonces vas a usar las últimas columnas porque no hay razón para que utilices 12 columnas para esta también. A continuación, tenemos ocho columnas para dispositivo pequeño y tabletas. Tenemos 12 columnas para tabletas medianas y dispositivos, y luego tenemos Telkom para este y para éste también. Ahora, cuando estás diseñando estos grandes sitios web, puedes imaginar que estos márgenes izquierda y derecha, están vacíos en el estado. Pero lo que pasa es solo imaginar que alguien está viendo tu sitio web en pantalla extra grande . Entonces, por ejemplo, tienes todas estas modernas pantallas curvas, y tienen estos grandes márgenes izquierdo y derecho. Entonces, ¿qué pasa ahí? Eres genial se queda exactamente igual, y se queda exactamente igual. Ingenio, y este contenedor no cambia, pero estos márgenes sí cambian. Por lo que realmente tienes dos opciones. Puedes extender esta imagen, por ejemplo, izquierda y derecha para que puedas ver este collar azul oscuro aquí mismo. Puedes extenderlo a lo que quieras izquierda y derecha. Si eso es algo que tú quieras. Si se trata de una imagen, puede escalar el dedo del pie izquierdo y derecho. Siente toda esa pantalla. O puedes ver con tu desarrollador para crear un bonito diseño en caja para que solo puedas imaginar que esto si hago clic ahí mismo, puedes ver que son 1440 píxeles en blanco. Tan solo imagina que este es tu contenedor, y todo fuera de ese 14 40 pixels no se van a incluir en la caja va a estar contenido fuera de la caja, por lo que te imaginas puedes poner un color de fondo, por ejemplo. Se puede poner la imagen de fondo que se va a escalar en todas estas pantallas extremadamente grandes . Por lo que se puede imaginar a veces, sobre todo dentro de las empresas. La gente está viendo estos sitios web en televisores grandes. Por ejemplo, hay microdispositivos de superficie que son extremadamente blancos. Por ejemplo, 10,000 píxeles en ingenio. Y aquí mismo, si recuerdo correctamente. Sí, tenemos 1440 píxeles en ingenio, así que solo puedes imaginar cómo se va a ver la pequeña deuda en esa pantalla. Es por eso que los diseños en caja son buenos, porque Website no va a perder. La calidad se va a escalar hasta el punto en que el desarrollador decida que va a dejar escalar. Y luego, después de que ese diseño de caja se va de pie, expanda con el fondo y va a contener todo lo que está dentro de este contenedor justo aquí. Y tu diseño básicamente va a seguir siendo el mismo. Pero el exterior fuera de esa caja va a escalar muy bien para sentir esa pantalla restante. Entonces espero Desk que despeje algunas de las cosas con el diseño responsive y bootstrap para nuestro caso, y ahora corremos rápidamente a través de nuestros diseños. Por lo que voy a dar clic en cualquiera de los aeropuertos y dar clic aquí para ocultar las calificaciones. Por ahora, también voy a dar clic aquí para ocultar el panel de activos hit control cero para encajar en posición, y voy con el dedo del pie acercando un poco más. Por lo que antes viste escritorios extra grandes, al principio de este video, puedes ver cómo se ve. Y ahora si todo mi llave de espacio y navego aquí mismo, puedes ver cómo se ve como un próximo dispositivo de garaje de ley. Por lo que esta ilustración se va a escalar proporcionalmente. Y si ves o tabletas medianas y todo el camino hacia abajo a pantallas pequeñas va a verse un poco diferente de lo que es aquí ahora mismo. Eso es porque quería sentir este texto hasta aquí. Como puedes ver, estas secciones con los clientes anteriores y sobre nosotros se ven exactamente iguales aquí, así como en extra grande justo aquí. Pero están empezando a cambiar para dispositivos medianos, tabletas y tabletas pequeñas, y sobre todo para extra pequeñas allí. Usé ilustración para venir por arriba y texto para venir por abajo y básicamente, como se puede ver a medida que bajamos. Estas secciones van a cambiar. Entonces tenemos cuatro en fila justo aquí. Aquí hay un poco más cerca, pero están respondiendo a rece ice Un poco mejor aquí porque están demasiado en carretera sólo porque fuera del tema espacial y en tu tamaño móvil, como puedes ver ahí, uno en la parte superior el uno del otro. Ahora, si retrocedemos con los precios, ST Ng va por eso Así se puede ver en estos escritorios tamaños hay tres en fila. Pero aquí mismo en tabletas en tabletas grandes Hay dos seguidas con una abajo en tabletas pequeñas en hay tres inscripciones como esta. Como se puede ver, este contenedor se está escalando para ajustarse al espacio restante. Y por último, para los tamaños y formas extra pequeños, puedes ver que se apilan uno encima del otro. Bueno, eso es sensible para ti en pocas palabras, y nos vamos a meter un poco en el dedo, y no voy a volver a recrear este diseño desde cero, pero voy a pasar por cada sección en el siguiente video, y te voy a contar cómo lo creé. Pero vamos a correr rápidamente sólo para que puedas ver algunas diferencias. Como se puede ver aquí mismo para los testimonios. Tenemos tres justo aquí. Tenemos dos aquí. Nosotros también tenemos uno. ¿ Como qué? Estos dos para el bloque que tenemos en este mismo apartado. Por lo que 33 aquí. Tenemos que bloquear postes. Aquí oímos una. Y aquí tenemos uno también. Y se puede ver que la imagen se está escalando muy bien en comparación con estas anteriores. Por último, la carpeta es exactamente la misma en todos ellos, excepción del tamaño móvil. Porque tenemos que apilar este texto encima uno del otro y porque se están desplazando hacia abajo , realmente no importa si te pones uno encima del otro. Pero opté por usar a Rose porque es mucho más sencillo para el usuario hacer clic en cualquiera de estos elementos del menú porque están apilados así. Entonces eso es lo que vamos a abordar en el próximo video. Y te voy a mostrar cómo puedes crear este diseño también. Si quieres, voy a mostrar cómo puedes usar algunos de estos activos. Y luego una vez que creemos este diseño quiere mostrarte cómo puedes crearlo. Entonces vamos a abordar algunos de estos tres tamaños responsivos. Y te voy a mostrar cómo puedes bajar la escala de este sitio web diseño dedo del pie. ven exactamente así. Entonces te veré en el siguiente video. 10. Anatomía de la página: Está bien. Entonces para empezar, simplemente voy a dar clic aquí para crear un 1920 con 10. 80 en pantalla de inicio. Y lo que voy a hacer es simplemente saltar dentro de mi archivo original y primero voy a copiar la cuadrícula. Yo lo voy a deshilachar aquí mismo. Entonces simplemente lo voy a hacer este porque lo digo en serio. Solo solíamos crear el documento original. Entonces Bill Odette. Voy a usar el diseño de mi sitio web en el tamaño extra grande y voy a acercarme un poco más y posicionar algo como esto. Entonces lo que voy a hacer es lo que seleccionó. Simplemente puedo hacer click en mis colores. Como puedes ver , muestra todos estos colores diferentes, pero no lo quiero. Podemos ir color por color, y voy a mostrar cómo se puede hacer eso. Además, lo que puedes hacer es usar estilos de carácter. Como puedes ver, aquí tenemos todos estos diferentes estilos de personajes. Entonces puedes hacer eso si quieres, o puedes mantener estas cosas simples. Pero me gusta hacer esto porque muestra todos estos diferentes estilos de personajes en diferentes colores, por lo que simplemente puedes acceder a él así. No se va con el dedo del pie. Pídales por tamaño, lo cual es bastante molesto. Entonces lo que puedes hacer es simplemente cada orden, algunos de ellos. Y voy a hacer ese simple click y arrastrar, y voy a pausar el video hasta que hice todos estos. Y ahora que lo he hecho, quiero seleccionar mis colores para que puedas golpear control o comando. Da click en cualquiera de estos y puedes dar click en tu color. Entonces puedo hacer lo mismo por este fondo. A lo mejor un zoom un poco más cerca solo para que veas lo que estoy haciendo. Yo puedo hacer lo mismo por el botón. Yo puedo hacer lo mismo por este trasfondo. Puedo hacer lo mismo para el texto dis. A ver. Yo puedo hacer lo mismo para el texto debajo de él, y vamos a elegir uno bajo color. Entonces son judíos, algo un poco más ligero. Entonces, ¿cuál de ellos es? Todos ellos son 70 70 70. A ver, A lo mejor es este. Sin mirar, realmente crear una nueva forma como esta. Voy dedo del pie quitar el borde y para el color usado algo así como ocho F ocho F ocho f Let's a presenter o return y luego voy a dar clic aquí para seleccionar ese color. Ahora, porque este es mi color principal, simplemente voy a dar clic y arrastrarlo arriba y simplemente pedirlos a los Dockers para deleitarnos el color. Ahora, también tenemos este color de acento aquí mismo que no recogió por alguna razón. Como puedes ver, ese es nuestro color aquí mismo en la ilustración justo aquí en las camisetas. Entonces eso es una especie de este color rojo. Por lo que ese color una vez más voy a dar click justo aquí es F f 6584 y quiero dar click aquí y posicionarlo hizo mucho estos dos. Ahora que tenemos nuestros colores y nuestros estilos de personajes, simplemente voy a ocultar este panel por ahora y les voy a mostrar cómo creé este diseño de sitio web. Por lo que voy a dar clic aquí y hacer clic en Insight. Como se puede ver en la navegación tenemos logo, que son sólo dos textos y básicamente lo componen Ahora uno rápido conocido antes soy uno uno. Si quieres aprender a crear diseños para sitios web desde cero, tengo un curso dedicado al respecto en el que nos pasamos por sobre el diseño. Breve sobre investigar a tu competencia sobre cómo puedes ser inteligente en cuanto al posicionamiento, cómo puedes hablar con tus clientes, cómo no puedes entender el diseño. Breve, cómo puedes apegarte a la fecha límite y cómo puedes ir de la idea. Remolque marcos de alambre al diseño completo, y luego se puede exportar ese diseño para los desarrolladores. Pero debido a que este curso se trata de redimensionar sensible, por eso lo estoy haciendo de esta manera. Y no voy a aburrirte demasiado sobre cómo puedes crear un diseño de sitio web desde cero una vez más. Si no sabes cómo hacer eso, simplemente puedes saltar dentro de ese curso, y puedes aprender todo sobre el diseño de sitios web desde cero. Como dijeron, esto es solo para el diseño de sitios web receptivos. Todo es más, como dije, Aquí está el logo aquí están en los ítems del menú para que puedas ver los ordené de izquierda a derecha de arriba a abajo. Al igual que así. Entonces tenemos botón demo. Como puedes ver, consigue una demo nbt y para el fondo. Ahora vamos a movernos Pertenece. Tenemos aquí un texto que es este texto justo aquí tenemos el H uno así como H dos. Tenemos demócratas y abajo hemos aprendido más al lado de eso. Entonces tenemos ilustración de héroes y formas. Déjame cubrir rápidamente la ilustración de héroes de Hill. Entonces para conseguir esta ilustración, simplemente fui a enchufes. Y si no tienes este blogueo, simplemente puedes hacer clic aquí y encontrarlo en cualquier puesto, pero se llama andro. Y dentro de Andhra, simplemente puedes hacer clic ahí y tienes todas estas increíbles ilustraciones gratuitas las cuales puedes usar en votación tus proyectos personales así como comerciales y dentro de que simplemente puedes escribir lo que quieras. Entonces creo que usé diseño y se va a buscar todas estas diferentes demostraciones de diseño . Como puedes ver, tiene estas increíbles ilustraciones que realmente debes echar un vistazo y puedes usarlas en tus proyectos de forma gratuita. Por supuesto. Gracias, Toa. Esta persona de aquí mismo que ha sido lo suficientemente increíble como para compartir todas estas ilustraciones. Entonces básicamente, cuando encuentras tu diseño, condensas. Simplemente elijala, por ejemplo que usó este. Haga clic en él y simplemente puede hacerse y puede venir a algún lugar fuera del hit Control V, y se va a basar en su diseño ahora uno de los principales inconvenientes sobre en estas ilustraciones . Como puedes ver, vienen en grupo. Pero cuando abres ese grupo, no se nombra una sola capa. Entonces eso es realmente grande inconveniente, porque si quieres encontrar algo, realmente tienes que hacer click a través de él y ver qué es. Si quieres cambiar algo realmente rápido, no puedes hacer eso porque tienes que hacer clic en múltiples capas y luego cambiar sus colores. Por lo que en nuestro caso, simplemente puede mantener presionada la tecla de comando de control, y puede hacer clic aquí para saltar dentro de esta capa. Pero entonces tienes que sostener tu tecla de turno para saltar aquí dentro. Entonces aquí, luego aquí, Y si quieres cambiar estos, puedes saltar justo aquí y luego cambiarlos dedo del pie, que tienen un color que quieras. Entonces eso es un poco inconveniente, pero una vez que ya te pones, puedes estar agradecido. Se trata de ilustraciones increíbles y son gratis. Se pueden utilizar como decían en proyectos personales y comerciales. Entonces saltemos a través de nuestras ilustraciones. Todo lo que había hecho aquí mismo, Sí, si lo abro, dividí el personaje así como el punto de ilustración principal. Entonces, como pueden ver, aquí está nuestra ilustración y aquí está nuestra persona. Entonces eso es todo lo que hice porque quiero que el dedo del pie las redimensione más tarde para todas nuestras otras ilustraciones. Y es mucho para todos nuestros tamaños, y es mucho más fácil hacer esto y de esta manera cuando las tienes separadas en diferentes carpetas ahora para las formas en el fondo, todo lo que hice es básicamente crear una forma, y si salté dentro aquí mismo, usé ingrediente muy cerca, que es blanco de este lado, vacío en el sitio. Entonces si hago clic en él, se puede ver que está en cero o pagar ciudad. Va de arriba a abajo, y también te reduje pagas ciudad al 20% justo aquí. Eso es todo lo que hice por todas estas formas. Y por último, para esta grande, solo uso un dedo del pie de mezquita tapar la porción de esta imagen de héroe, y esa mezquita se va a reducir a medida que avanzamos con el resto fuera de los tamaños en los próximos videos. Pero se puede ver que sólo es la plaza con coordinada o 50. Usé exactamente la misma sensación para todas estas formas, o básicamente, porque está al 10%. Sólo para que sea mucho más fácil ver a Bill detrás de este texto. Entonces, básicamente, eso es todo lo que hice por esa sección. Si nos movemos por debajo de eso, tenemos todos estos logotipos diferentes. Simplemente las utilizo de forma gratuita desde Internet. Pero obviamente vas a incluir a tus clientes, madereros aquí mismo o tu propio logo. Si estás creando un diseño como este para tu propia agencia por debajo de eso, tenemos otra ilustración de la misma fuente, así que es de andro. Una vez más, se puede utilizar en se puede ver, yo sólo uso exactamente la misma administración Aziz que ofrecen. Pero acabo de cambiar estos colores de fondo aquí mismo para que coincidan con los colores de mis botones y un texto justo aquí debajo de eso, solo tenemos algo de texto y tenemos esto dividido justo aquí y está muy bien dividiendo esta edad a con esta texto de párrafo justo aquí. Debajo de eso, tenemos estos bonitos iconos y tenemos todas estas características divididas en secciones Esperado divisor Ike también quiere. Ahora esta sección es exactamente la misma que la sección de héroes. Todo lo que hice es que acabo de incluir el precio justo aquí. Y tenemos estos fondos grandes para una compra de paquete y todo. Hice para diferenciarlo un poco de la página principal de la sección de héroes aquí mismo . Acabo de volver a ordenar algunos de estos elementos alrededor, e hice exactamente lo mismo para esta sección de llamada a la acción construida para los testimonios que usé una vez más este logos libres y acabo de usar algún texto aleatorio y algunos nombres aleatorios, y yo utilizó estas dos flechas para que los usuarios puedan navegar por el sitio web izquierdo. Y justo debajo de eso uso este problema con el botón exactamente el mismo configurado y finalmente para los puestos de bloque y pie de página, bloquearemos carteles. Se puede ver tenemos tres puestos de bloque, y si lo abro, se puede ver el post 123 y dentro de cada post tenemos imagen. Entonces tenemos la marca de tiempo aquí mismo que tenemos en el texto del párrafo. Tenemos avatar fuera de la persona que está escribiendo el texto, y tenemos el nombre de la persona. Lo mismo para los tres. Tenemos botón para ver todo y te va a llevar a la cuadra Playa. Como se puede ver, está ligada justo aquí y finalmente tenemos más allá Así que una vez más es logo. Es todos estos diferentes elementos del menú. Tenemos iconos de redes sociales a continuación, y finalmente este texto en la parte inferior para que puedas ver este diseño. Es realmente bastante sencillo. Es realmente bastante fácil de crear. Y como dije, no te voy a aburrir y perder demasiado tiempo para el discurso con ella. Puedes crear este diseño de sitio web si quieres aprender que una vez más, tener un curso sobre cómo puedes crear un diseño de sitio web desde cero, y en él vas a explorar con mucho más detalles cómo puedes crear sitios web como estos y cómo puedes venderlos a reclines. Básicamente, cuando estás creando este brief de diseño perfecto pitch, cual está realmente escrito en piedra para que tanto tú como diseñador y tus clientes lo vayan a seguir hasta el té porque vas a estar de acuerdo todo por delante y vas a investigar la página web de Der así como su sitio web de concursos Muy bien, para que realmente lo puedan entender y puedes seguir fácilmente ese resumen de diseño. Por lo que una vez más, si te interesa, puedes comprobarlo. Pero si no, entonces podemos seguir adelante con este curso. Y en el siguiente video, voy a mostrar cómo puedes escalar este sitio web en particular y vamos a ir con cada video sobre cómo puedes redimensionar en este sitio web para que puedas obtener un diseño totalmente responsive el cual puedes compartir con tus desarrolladores. 11. Cómo funciona el retorno responsivo: diseño responsive es básicamente sitio web está reaccionando al dispositivo en el que el usuario lo está viendo . Entonces si estás mirando la pantalla del teléfono, Responsive se va del dedo del pie. Adaptarse a esa pantalla de formulario en particular para lucir justo para lucir fácilmente accesible para que pueda navegar fácilmente por toda la información que ese sitio web tiene para ofrecer en la pantalla de ese dispositivo móvil . No hace falta decir que funciona en todos los fuera de estos otros dispositivos exactamente igual. Entonces si estás mirando un escritorio, básicamente estás llegando a la versión de escritorio del mismo. Si estás mirando un teléfono móvil, estás obteniendo una versión de teléfono móvil del mismo, y funciona Exactamente igual en todos estos otros dispositivos es un te mostró en el primer video fuera de la parte de diseño de este curso porque se está adaptando responsablemente a aquellos dispositivos en los que estás viendo tu sitio web. Entonces, ¿cómo esto se traduce a la parte de diseño? Bueno, es bastante simple en Adobe Exit porque tienen esta opción de cambio de tamaño agradable y sensible para que puedas activar esta opción de tamaño responsivamente desde aquí, y se va a redimensionar todo este diseño de manera responsiva, ya que piensa que debería en mi opinión, y en mi experiencia, nunca funciona como debería. Por lo que siempre hay que adaptar este redimensionamiento receptivo. Y en mi opinión, siempre debes usarlo. Pero siempre debes usarlo parte por parte, fuera de tu diseño, no todo el diseño a la vez. Entonces cómo funciona. Básicamente, como puedes ver, solo puedes encender y apagar esta lucha, y puedes hacer clic aquí mismo en el borde de tu diseño, y simplemente puedes adaptarlo. Y se puede ver que trata de trabajar todos estos diferentes componentes y cómo va de pie de manera responsiva. Mira todos estos otros tamaños. Entonces, como pueden ver, estamos a las 3 95 que es básicamente nuestro diseño móvil en este punto. Pero como se puede ver, ninguno de estos componentes se ve como debería. Entonces si golpeas controles que para volver, siempre puedes saltar dentro sección por sección. Y cuando haces eso, puedes ver todos estos otros ajustes. Por lo que tenemos relleno justo aquí. Puedes habilitar o deshabilitar el relleno para grupos, y básicamente puedes elegir qué palmaditas tienes entre todos estos diferentes elementos . Tan diferente bateo para cada borde o mismo bateo para todos los bordes. Para que veas que tenemos un relleno de borde derecho en 1 65 que es esta apuesta aquí mismo. está aquí el 1 65. Contamos con ropa de cama de borde superior en apuestas de borde inferior y puedes usar todas estas diferentes medidas para configurarlas como quieras. Y se va del dedo del pie cuando los instalas. Se va dedo del pie de manera responsable cambiar el tamaño de todos esos componentes. Pero lo que no puede hacer es no apilar los componentes uno encima del otro. Entonces si recuerdas del ejemplo que te mostré antes, déjame arrastrarlo aquí mismo. Y si lo agrandaba, se podía ver que utilizo redimensionamiento responsive y diseño responsive en general para posicionar, por ejemplo, dis tax on top off esta ilustración. No puede hacer eso en los huevos de adobe. Tienes que hacer esas cosas manualmente. Entonces, básicamente, tamaño responsivamente está ahí para ayudarte junto con tu emprendimiento de diseño receptivo. Pero básicamente no puede hacer nada y todo por ti. Tienes que hacer algunas de esas cosas tú mismo. Además, puedes usar resize auto responsive, así que usa restricciones de tamaño re automático o puedes hacer clic en menú y básicamente, cómo lo vas a arreglar y cómo va dedo del pie se ven como cuando estás usando responsive para que puedas arreglar ingenio y fijar altura. Pero puedes hacer clic aquí, por ejemplo, y ahora se va a fijar a la parte superior y arreglarlo a la izquierda. Entonces si yo y zoom un poco click en nuestro puerto en click justo aquí, puedes ver que se queda fijo a la izquierda y fijo a la parte superior. Ahora puedes hacer eso por los componentes, o puedes hacerlo por estos diversos elementos dentro de tu diseño. Entonces si uso exactamente la misma configuración aquí, y si empiezo a volver a dimensionarlo, se puede ver que es mantener las restricciones a la izquierda, derecha arriba abajo como su fijo justo ahí. Y va dedo del pie se fija a la parte superior y se fija a la izquierda. En este caso es que se puede ver que su diseño responsive funciona muy bien hasta un punto en el que empieza a romperse, empieza a romperse, y luego hay que saltar a esa altura, especie de ese trigo, que es de 9 78 píxeles en este punto y tienes para hacer algo. Por lo que va dedo del pie estar funcionando correctamente en cualquier momento. Entonces básicamente, escritorio cómo funciona el redimensionamiento receptivo y en el siguiente video, vamos a empezar a volver a dimensionarlo. Entonces vamos a crear este grandioso que se puede ver aquí mismo, y vamos a pasar de escritorios extra grandes, dispositivos demasiado grandes. Y te voy a mostrar cómo puedes adaptar este trabajo de puntera de diseño en dispositivos grandes que se detienen . 12. Crea diseño responsiva 1: Por lo que ahora empecemos con el diseño responsive. Como se dijo en el primer video, Asegúrate de hablar con tu desarrollador sobre cómo puedes diseñar si están usando bootstrap si están usando angular o algo más si están usando sistema de cuadrícula personalizado si no están usando ningún sistema de cuadrícula en absoluto? Si tienes que crear un gran sistema tú mismo, entonces simplemente habla con tu desarrollador por delante antes incluso de empezar con el diseño para que puedas saber cómo va a adaptarte dedo una vez que hayas creado tu diseño, y ahora tienes que adaptarlo manualmente, ni un lado más. Nota. Si estás empezando con extra pequeño. Entonces estás empezando por el tamaño del teléfono, por ejemplo, y quieres adaptarlo dedo extra grande ahí se detiene o una vez, entonces funciona exactamente igual. Entonces te vas del dedo del pie exactamente igual. Adapta todos estos componentes y diferentes tamaños para adaptarse a estas diferentes pantallas tan mucho. Ahora, empecemos. Voy a dar click aquí mismo, golpear control de para duplicar este. Lo voy a posicionar aquí mismo, debajo de un escritorio de dispositivos grandes. Voy a hacer doble click en el nombre que él controlaría, ver doble click aquí derecho hit control de la y ahora voy a hacer simplemente voy a dar click justo aquí para que pueda ver todos estos diferentes tamaños. Entonces, básicamente , son 10. 24 a ingenio, Así que voy a hacer eso. En primer lugar puedes salir de curso en esto manualmente simplemente haciendo clic aquí y yendo a 10. 24. Pero como puedes ver, diseño se está rompiendo bastante. Entonces no voy a hacer eso. Simplemente voy a dar clic aquí y usar 10 24 como así. Pero voy a apagar el tamaño de responsabilidad en este punto porque quiero que todos estos componentes sean exactamente del mismo tamaño. Por lo que se va dedo del pie, mantener exactamente el mismo tamaño para todos nuestros estilos de personajes y son ilustraciones. Por lo que solo voy a apagar el redimensionamiento responsive en este punto. Pero voy a bajar por algunos de estos componentes adicionales. Entonces como dijimos 10 24% y ahora se puede ver que algunos de ellos están fuera, pero lo vamos a tratar en una 2ª 1ª cosas primero, tenemos que adaptar estos diferentes parámetros así Como puedes ver, es 30 50 47. Entonces vamos a hacer lo mismo por aquí. Entonces 30 15 y finalmente 47 aquí mismo. Y vamos a revisar una vez más. Columnas tan altas 30 50 47. Dígale a las columnas 30 50 y 47 debe estar justo aquí. Entonces, como pueden ver, tenemos exactamente la misma configuración que tenemos justo aquí en la parte superior. Esta es una till realmente terca en adobe existe, por lo que hay que adaptarla de vez en cuando. Ahora, déjame saltar rápidamente y mover este diseño para poder ver lo que estoy haciendo. Básicamente, y puedo mostrarles eso en este expediente original. Entonces déjame saltar y me voy de pie. Lo primero que primero adaptan mi navegación. Entonces, como pueden ver, lo arreglamos a la izquierda y a la parte superior. Entonces lo que podemos hacer es simplemente hacer click aquí y adaptarlo así. Pero no voy a hacer eso porque no me gusta lo que hace con el logo y lo que hace con el fondo. Yo quiero tener exactamente el mismo tamaño aquí mismo. Entonces lo que puedes hacer es simplemente dar click justo aquí, diseñar y podemos ver que tenemos márgenes vinculados o 47 Así podemos dar click justo aquí. Y podemos usar el bateo para el borde izquierdo y derecho fuera 47 como así y así Entonces lo que podemos hacer en este punto, es simplemente usar la navegación moviéndose así, y voy a mover esto también. Pero como puedes ver, sigue moviendo esto así que realmente no me gusta lo que hace. Entonces voy a hacer esto manualmente y simplemente voy a mover el botón hacia aquí. Simplemente voy a dar clic en uno de estos. Sostén turno y muévalos a algún lugar por aquí. mejor, y voy dedo del pie también reducir el tamaño del logotipo como celda. Colóquelo en el centro como así y ahí lo tenemos. Entonces ahora tenemos nuestra navegación hecha, y simplemente voy a mover el fondo a aquí y luego a escuchar hasta que se encuentre con el borde superior de nuestro héroe y nuestra navegación esté completa para que puedas ver que se ve exactamente igual que aquí, pero sólo usamos algunos engaños para posicionar un poco mejor algunos de estos elementos, y ahora vamos a hacer lo mismo por el héroe. Por lo que como puedes ver, puedes incluir palmaditas. Se puede incluir el redimensionamiento responsive. Pero si solo estás usando el redimensionamiento responsive, puedes ver cómo funciona eso, para que puedas hacer clic y moverlo y puedes ver que realmente está sesgando todos estos diferentes elementos. Entonces lo que realmente me gusta hacer es simplemente saltar dentro y mover el texto hasta aquí. Mueve estos dos botones a aquí, y básicamente ahora los voy a adaptar en tamaño. Entonces voy a dar clic en uno de estos botones y simplemente moverlo a aquí. Pero puedo incluir redimensionamiento responsive para ello, así que simplemente podría mudarme aquí. Usa este botón y muévelo aquí también. Pero si no te gusta cómo se ven y yo realmente no porque todavía estamos en tamaño de escritorio , simplemente puedes aumentar el tamaño de este y botón. Y tal vez podamos incluir relleno y lo que ha aumentado el tamaño. Usemos el mismo relleno, pero por alguna razón no funciona. Entonces vamos a saltar dentro manual y ahora se está posicionando hasta aquí. No se moverá porque tenemos estos enlaces de relleno, así que lo voy a posicionar aquí mismo. Y luego voy a usar el texto dentro, posicionarlo en medio de nuestro botón, y ahora voy a hacer lo mismo por esto. Conoce más botones. Se puede ver que es realmente terco de vez en cuando, así que realmente tienes que trabajar con él. Y en este caso, como dije, estoy creando un botón Toby tres columnas Blanco porque realmente puede muy bien adept al tamaño. Entonces voy a saltar adentro, clic en la persona, y voy a posicionar su donde por aquí. Digamos que tal vez incluso un poco más abajo, porque quiero que los usuarios vean este texto. Y luego voy a dar clic en mi ilustración, y la voy a posicionar aquí hasta que se encuentre con el borde derecho fuera de nuestra grilla. Ahora voy a adaptar todos estos diferentes elementos canción yendo dedo del pie posiciona esto aquí, posiciona esto aquí y finalmente voy a saltar dentro de nuestra máscara y dar click en la máscara, y voy a simplemente traerlo hasta aquí y escuchar o B G simplemente traerlo hasta aquí. Y como pueden ver, ahora hemos adaptado el look and feel off en los sitios web de días, y simplemente voy a hacer una cosa más. Selecciona los botones de demostración de texto y más botones y simplemente pulsa el control G para agruparlos. Sostén mi tecla de comando de control. Haga clic en un héroe BG, y simplemente hay clic aquí para asegurarse de que esté en el centro verticalmente. Y es en este caso se puede conseguir un grupo y luego simplemente podemos querer con algunos de estos otros elementos. Entonces, para los logotipos, podemos posicionarlos aquí y luego simplemente redimensionarlos responsablemente para escucharlos. Entonces podemos mover esto sobre nosotros ilustración y lo que voy a hacer por ello. Voy a usar porque tenemos 12 columnas. Voy a usar seis para ilustración en seis para el texto. Por lo que hay alguna adaptación que hay que hacer. Puedes usar de manera responsable el tamaño si lo deseas. Por lo que dos por seis, tiene puntera en este auto, por lo que simplemente puedes hacer esto. Pero si no te gusta cómo se ve en un realmente no, puedes desactivar la tecla de cambio de tamaño del titular sensible y en una de las esquinas simplemente redimensionarlo , incluso filtrar así. Entonces voy a posicionar el texto y el botón hasta aquí. Por lo que 246 columnas y voy a extender el tamaño de mi fondo Toby tres. Al igual, y simplemente voy a hacer clic y posicionar texto en el centro. Y ahora lo que tengo que hacer es simplemente muy posicionar algunos de estos textos para que puedas ver manera responsable el tamaño. Está activado para el texto, así que incluso puedes hacer esto si quieres. Pero está reduciendo su tamaño, como se puede ver, y eso no es algo que queremos. Lo que sí queremos es que tenemos que hacer esto manualmente para que puedas duplicar dentro hit enter para que puedas colocarlo en otra línea y simplemente crear tres en lugar de dos líneas. Y luego simplemente puedes mover el divisor hacia abajo como este 20 píxeles, y luego podemos hacer lo mismo por estas pilas. Entonces nos vamos a posicionar en 20 pixeles, y entonces tal vez podamos usar 40 pixeles para este así, y entonces simplemente me voy a adaptar un poco más al texto para que se ajuste a nuestro gran. Por lo que simplemente va a mostrar la función de redimensionamiento responsive fuera de este diseño. Y por último, lo que voy a hacer, simplemente usan en el botón de texto y demo. Yo lo voy a posicionar aquí mismo, y voy a elegir ilustración, posicionarla en medio de nuestro texto, alguien nuestra propia humildad. Y luego me voy a asegurar que tengamos el mismo espaciado entre nuestro héroe, nuestro logo uso sólido 18 este caso. Por lo que cambia 12345678 y debilita a lo mismo para este apartado. Por lo que 80 como se puede ver. Y ahora déjame mover rápidamente esto al centro y usar el mismo espaciado. Entonces 18 este caso, como así y luego puedes hacer lo mismo para esta sección así. Simplemente asegúrate de que esté a los 80 y ahora tienen que hacer es simplemente adaptar estas secciones a nuestro gran. Para que veas que tenemos cuatro elementos diferentes y tenemos 12 columnas en nuestra grande, por lo que cada una de ellas va a tomar tres columnas, así que hay que adaptarlas Así cocino en entrega rápida y lo voy a posicionar aquí. Revisión ilimitada. Voy a posicionarlo aquí y finalmente, soluciones personalizadas. Yo lo voy a posicionar aquí porque cada uno de esos va a tomar tres columnas, como se puede ver, y se va del dedo de un grifo responsablemente auto de manager. Tenemos que adaptar nuestro texto para estar en duda un poco así, y uno más rápido. Nunca han dejado una sola línea de texto por debajo de casi una sola palabra. Asegúrate de que sean al menos dos palabras en tu línea para que se vea bonita y limpia. Entonces puede ver que esto nos va a llevar más tiempo. ¿ En qué solía puntear al final? Porque esta es la parte más aburrida de este proceso de diseño receptivo está adaptando este texto ahora, como decían y te mostraron. Puedes hacer esto con redimensionamiento sensible, pero lo que está haciendo es reducir el tamaño de tu texto, a pesar de que eso es algo que no quieres. Por ejemplo, para ese particular suspira fuera de su diseño. Por lo que vas a ver texto más pequeño de vez en cuando, o puedes tener exactamente los mismos tamaños de Texas para todos tus diferentes tamaños de sitio web. Pero tienes que hacer necesitas de esta manera si eso es algo que quieres para que puedas redimensionarlos responsablemente para todas esas tallas. Para que veas que tenemos 80 por todas partes, para que todo se vea bonito y limpio. Entonces, por ejemplo, podemos incluso colocarlo en 100 porque creo que esa fue la idea aquí. Entonces lo que voy a hacer es simplemente mover todo hacia abajo 20 píxeles más. Entonces vayamos de clientes todo el camino hacia abajo. Por lo que 20 20. Entonces, como este 20 20 más solo para que tengamos un poco más de espacio de lectura. El precio. Es a los 100 eso es básicamente todo. Entonces para este, pero lo vas a hacer es que vamos a saltar dentro, dijo Aziz. Múltiples veces puedes usar recites responsive ¿qué? Este, pero no lo voy a hacer. Es mucho sencillo para mí simplemente reordenar algunos de estos diferentes elementos, así que voy a saltar por dentro, posicionar esto aquí y por ello. Voy a usar el redimensionamiento responsive, por lo que cada una de estas va a caber cuatro columnas para que puedas dar click aquí mismo. Posición es a aquí. Entonces ve a pro, hazlo de la misma manera. lo que 1234 como puedes ver y finalmente para la élite, vamos a usar exactamente el mismo final que puedes ver. Funciona muy bien con responsive, preciso, por lo que como un envío múltiples veces responsablemente tamaño realmente funciona bien con algunos de estos elementos. Pero para algunos de ellos y en muchos casos, la mayoría de ellos tienes que hacer todo tú mismo para que todo. Dedo del pie, mira bien en remolque. Trabaje correctamente más adelante en cotización. Entonces para este, puedes reordenar sus algunos de estos elementos y puedes mostrar a los desarrolladores cómo quieres que se vea como un estado. Desarrollar este diseño que los usemos algo como esto. Y pasemos a la siguiente sección, que son testimonios. Entonces solo asegúrate de que estén en 100. Por lo que 123456789 centavos, un 100 pixeles. Y lo que vamos a hacer por este es que vamos de pie. Eliminar testimonial número tres. Entonces sólo lo voy a ocultar. Voy a posicionar el número uno y el número dos en el centro así y voy a mover esta flecha izquierda dos se alinearán como Así que voy a hacer lo mismo para la flecha derecha porque ahora se van. Van a encajar por dentro son geniales. Entonces en la mayoría de los casos, vas a ver algunos de estos bichos con adobe eggs D, Pero solo ignorarlos y trabajar alrededor de ellos. Por lo que en la mayoría de los casos, tendrás que seleccionar algunas de estas cosas las tuyas en lugar de que te ayude. Pero, ¿qué puedes hacer? Simplemente tienes que trabajar a tu manera de rodearlo. Entonces déjame posicionar esto aquí mismo y por el botón. Déjame moverlo por separado, y voy a hacer que sea tres columnas blancas, igual que hicimos con todos estos otros botones en la parte superior. Asegúrate de que esté en el centro así y lo que voy a hacer a continuación para simplemente reordenar algunas de estas formas. De todas formas quiero. Entonces tal vez una posición esta aquí. A lo mejor puedo incluso reducirlo tamaño posición americana. Esto para estar aquí. Voy a saltar dentro de la mezquita. Voy a moverlo a aquí. Voy a moverlo a aquí. Y por último, voy a mover este precio Bijie Toby aquí una vez más, si quieres ver este diseño, puedes descargarlo de archivos del proyecto y puedes jugar con él tanto tiempo asi como quieras. Y como dije, se puede utilizar tanto para productos personales como comerciales. De verdad depende de ti. Pero sí te animo a que una vez que comiences con esto que crees tus propios diseños para éste, por ejemplo, simplemente voy a reducir el tamaño de la imagen porque todo va a encajar muy bien aquí. Entonces voy a usar tres de ellos, y cuando voy a hacer simplemente se adapta el texto a este tamaño en particular para que como puedas ver tu oferta, eso es lo que estaba diciendo. Dos palabras en la parte inferior. Y por último, voy a adaptar el avatar y el nombre. Asegúrate de que haya 20 pixeles es que puedes ver mismo tamaño y como estos otros, y puedo moverlo de punta aquí. Yo puedo hacer la misma imagen de sí mismo. Asegúrate de que esté a las cuatro como así, y asegúrate de adaptar el texto donde sea necesario. Y solo para que lo sepas, esto va a suceder La vida en Cote una vez que estés iniciando el diseño responsive. Pero esto es solo para tu referencia y la referencia fuera del desarrollador sobre cómo vas a crear esto. Entonces básicamente, casi terminamos con este tamaño, y voy a simplemente hacer doble click dentro posicion esta dentro y voy a jugar un poco mas con un texto. Entonces como pueden ver ahora, sólo tenemos un texto aquí mismo. Pero porque dije que no se ve todo tan bonito, simplemente me voy a mover a fuera de ellos abajo. Voy a adaptar su nuestro Darryl en posición 20 píxeles hacia abajo y básicamente eso es todo para el bloque. Lo único que queda es que este botón va a estar 40 píxeles abajo. Entonces 1234 Así que ahora arreglemos el botón. Voy a hacer que sean tres columnas, así que básicamente lo mismo que hicimos con todas estas otras. Entonces voy a posicionar texto en el centro así. Pero puedes hacer esto. Simplemente puedes seleccionarlo en posición así. Y finalmente lo voy a mover Toby en el centro así que asegúrate de que sean 40 piezas como esta. Y finalmente qué? Voy a hacerlo simplemente mueve el pie de página 100 píxeles hacia abajo. Entonces es básicamente la misma distancia que con todas estas otras. Entonces básicamente, turno. 123456789 centavo. Y básicamente son 100 pixeles abajo. Lo que puedes hacer por el pie de página es básicamente moverlo así, y se va a un tamaño de responsabilidad. Pero como puedes ver, el texto realmente no funciona. En este caso, tenemos que utilizar esas restricciones. Pero para ahorrar un poco más de tiempo, lo que realmente voy a hacer es utilizar este enfoque manual. Entonces básicamente voy a hacer esto, seleccionar todo y simplemente mantener presionada mi tecla de turno y moverlos en el centro. Ahora simplemente voy a dar clic en mis son parte justo aquí, y voy a extender este borde inferior fuera de mis son parte a por aquí y básicamente lo para este tamaño fuera de nuestro diseño. Entonces vamos a correr rápidamente por una vez más. Como puedes ver, tenemos que adaptarnos. Esta ilustración un poco, por lo que se ve un poco diferente. Y lo que puedes hacer aquí mismo se reduce el tamaño de estos botones. Toby en dos columnas Blanco porque son demasiado viene aquí mismo también, o puedes adaptarlo. Toby tres viene blanco, así que realmente depende de ti y cómo vas a utilizar este enfoque. Pero en este caso, usé tres viene porque creo que hay mucho más legibles en la pantalla más pequeña. Después adoptamos la posición de texto, todo para ser centro. Adaptamos estas columnas que adaptaron los precios re adaptaron estos paquetes de precios en consecuencia . Para los testimonios ya no tenemos tres. Ahora tenemos dos testimonios, y para estas formas de fondo simplemente las adaptamos y las colocamos en la página de manera diferente. Para el blogger utilizó exactamente el mismo diseño. Y por último, para el pie de página, todo se ve exactamente igual. Entonces eso es todo para este video. Y en el siguiente video, vamos a pasar a dispositivos medianos tablets y vamos a ir de pie a adaptar esto un poco más, y ahora vamos a empezar a hacer estos diferentes cambios porque en este vamos para posicionar ilustraciones por encima del texto. Entonces se va a ver un poco diferente entonces en estos dos, que son para el escritorio, así que te veré ahí. 13. Crea diseño responsiva 2: Está bien, no empecemos con tabletas de dispositivos medianos y para empezar a empezar, lo vamos a hacer. Simplemente duplicar. Esto son parte. Voy a saltar aquí al control de golpe superior C Control de calor. Nosotros justo aquí en la parte inferior, luego ST Ng un acelerado con los anteriores. Por lo que como puedes ver, tenemos disposición de 12 columnas. Igual que hacemos aquí mismo. Pero son 30 30 30 noches, así que tenemos que hacer eso también. Pero antes de que lo hagamos, son 7 68 en ingenio, Así que primero hagamos eso. Entonces es 7 68 Prensa entrar, orador. Por lo que una vez más, 30 30 39. Por lo que girando ya. Y finalmente 30 noche. Y necesitamos saber 30 aquí tan bien como se puede ver. Es realmente terco a veces, pero hay que persuadir a 39 aquí también. 30. De verdad me molesta que haga esto, y realmente no sé por qué lo está haciendo porque, como pueden ver aquí mismo lo tenemos. Por lo que 30 30 39. Entonces si lo cambio, se puede ver que son 39 por todas partes. Todo está bien. Pero si me cambio aquí mismo. Ya lo puedes ver. No funciona tan bien. De verdad no sé por qué sigue haciendo eso. No lo sé. Eso es tal vez lo pueda hacer en bajo Piensa así? A lo mejor puedo cambiarlo por aquí, Así que empecemos con 30. Y ahora empecemos con 39. 39 y luego cambiar a 30. Aquí mismo. Entonces ahí lo tienes. 30 30 39. Entonces, como puedes ver, realmente es buggy esta herramienta y realmente tiene una mente fuera de la suya. Porque una vez más, si hago clic aquí, abran en los márgenes. Se puede ver ahí Lo mismo aquí y 30 por todas partes. Pero si lo cambio aquí mismo, se puede ver cuántos problemas tenemos? Testigo. Pero no nos empantanemos con eso. Pasemos rápidamente al siguiente. Entonces porque esta es la tableta, no vamos a ver estos elementos del menú aquí mismo. Nos vamos de pie. Tener un icono de menú incluido en su lugar. Entonces déjame saltar adentro. Voy a mover esto nunca Bijie aquí mismo. Voy a mover este botón por aquí. A ver y me voy a esconder por ahora. todos estos elementos de menú como así y justo aquí voy a incluir Menú Icon y voy a incluir uno, cual incluí en el ejemplo ejemplo original que te muestro. Entonces aquí está. Y déjame rápidamente sólo reducir su tamaño para atacar. No, voy a saltar dentro de mi botón y simplemente asegurarme de que tenga tres columnas de ancho, así Asegúrate de que esto esté en el centro así, y dejémoslo por ahora. Voy a mover este ícono del menú aquí mismo, y lo que tenemos que lidiar con esto es que tenemos que asegurarnos de que hemos creado un menú ampliado . Entonces eso es lo que vamos a crear ahora. Entonces déjame duplicar esto nunca BG para que él controlara D. Y lo voy a mover abajo. Entonces en realidad voy a mover este así hasta que se reúna con éste. Así que sólo asegúrate de que voy a apagar responsablemente talla para este porque realmente no lo necesito, y no estoy seguro de por qué. Es s o mucho más grande. Por lo que 89 de altura, como tal tal tal vez ni siquiera pudimos hacerla más pequeña. Digamos 60 y lo que necesitamos es una línea, y esta línea va a pasar por aquí. Entonces van a ser límites muy bien divididos, que fuera de mis columnas por ahora va a dividir muy bien esto nunca BG y esta belleza de fondo . Entonces usemos esto como un BG desplegable, por ejemplo, y vamos a mover todos nuestros elementos de menú a continuación. Entonces voy a seleccionarlos así que me voy a casa. Un turno puede simplemente mover eso abajo para estar en medio de nuestro caído um Bijie. Y lo que voy a hacer es tal vez pueda duplicar mi desplegable BG reducido la altura del dedo del pie uno y dar clic aquí y dejarme frontera está excluido. Permítanme usar este color, por ejemplo. Sí, como puedes ver ahora tenemos esta linda línea divisoria. Entonces si salté de nuevo lo que puedo hacer aquí mismo, simplemente ordenarlos. Entonces voy a saltar por dentro, seleccionarlos todos y simplemente alinearlos a la derecha. Digamos y los alineamos con nuestro menú como quiero como así y vamos a ir uno por uno . Por lo que servicios iss primeras características en contacto US puedes ver llamamos tu llave de turno o quitamos esto por ahora porque una vez más, caja en un no b huevos, los están presentes. Entonces como puedes ver, cuanto golpeen, cambiarlo, cambiarlo, selecciónalo todo. De verdad no sé por qué es seguir haciendo eso. Pero aunque solo use mi flecha, se puede ver que no los mueve a pesar de que la historia esté seleccionada. Por lo que esta caja realmente me molesta ningún juego de palabras pretendido. Pero, ¿qué puedes hacer? Simplemente hay que seguir adelante con él para que simplemente pueda seleccionar estos dos y moverlos hacia abajo. Simplemente puedo ocultar esto. Mueve esto hacia abajo y simplemente hay encender todos estos otros. Entonces lo que tenemos justo aquí es 1234512345 y Block debería ir de frente así. Ahora simplemente hagamos una selección, y voy a duplicar esta línea. Entonces usemos esto como divisor, así, y simplemente lo voy a duplicar y moverlo abajo. Entonces voy a usar 20 píxeles porque eso es lo que usamos para todo. Básicamente, Así que turno 12 Entonces voy a usar mi línea divisoria aquí, es iss lo voy a alinear con el fondo fuera de mi texto así. Y luego voy a golpear turno un diente para asegurarme de que esté 20 píxeles abajo. Voy a seleccionar todos estos. Asegúrate de que estén 20 piezas abajo así. Voy a moverlos hacia abajo así. Voy a extender el dedo del pie mi desplegable BG hasta aquí solo para que veas lo que estoy haciendo. Voy a golpear el control D una vez más y simplemente me moví hacia arriba dividiendo línea 20 píxeles. Una vez más, usa los precios que podría usar y, uh, repite genial para hacer esta función. Pero me parece que a veces los métodos antiguos realmente funcionan bien, Así que vamos con el dedo del pie, adelante y simplemente seleccionamos bloggers. Se podía ver que Adobe X'd hace lo suyo ahora porque me está mostrando la distancia de 20 píxeles entre todos estos diferentes elementos, como se puede ver aquí mismo. Y finalmente tenemos contacto con nosotros y para ello no vamos a usar el divisor, así que turno quieren bajar, y luego simplemente voy a usar desplegable BG para moverlo cerca como así turno 12 Y como pueden ver , tenemos nuestra menú desplegable listo para ir si crees que estos divisores son demasiado duros en tus ojos, por lo que como puedes ver, puedes verlos claramente como Así puedes o reducir la opacidad para poder seleccionarlos todos. Voy a agruparlos control de golpe G, por ejemplo, a un grupo como Así voy a usar el blanco ahí, a un grupo como Así voy a usar el blanco ahí, alinea así Y puedes bajar tu ciudad paga de toda la carpeta. Golpea más segura 20 por ejemplo. Se puede ver cómo se ve eso para 40. Creo que eso es bueno. E incluso puedes seleccionar este color si eso es lo que quieres, y luego puedes llamarla en ese color en particular. Pero usemos algo como, no sé, 80 tal vez 60. Sí, creo que 60 es bueno por ahora. Entonces lo que vamos a hacer es que vamos a usar todos estos elementos del menú, moverlos y hacia abajo así y me voy del dedo del pie, usarlos líneas divisorias y soltar BG Agruparlos todos y simplemente nombrarlos a este desplegable porque ahora puedo ocultar ella y puedo seguir trabajando en mi diseño. Entonces vamos a incluir atrás son realmente ayuda. Y como pueden ver, tenemos 12 columna. Igual que aquí, pero las columnas son un poco estrechas. Entonces lo que podemos hacer por eso es que simplemente voy a mover mi ilustración hacia abajo y mover mi texto hacia arriba. Y voy a cambiar este texto para estar en el centro para que puedas hacer doble click dentro y click justo aquí para asegurarme de que esté en el centro y sin mover este espaciado ni nada, simplemente puedo posicionarlo aquí mismo. A casa una llave de turno. 1234 Y luego voy a adaptar mis botones. Por lo que son tres columnas blancas en este caso. Entonces los voy a mover aquí mismo. Como se puede ver ahí en nuestras cuatro columnas Blanco, eso no me gusta. Entonces me voy a asegurar que sean tres columnas de ancho así que voy a mover esto en el centro, y voy a usar más botón así porque puedes dejarlos para. Pero entonces hay que adaptarlo una vez más. Por lo que tienen trabajo en el tamaño móvil por ejemplo. Entonces déjame moverlos 40 pixeles. Por lo que 1234 voy a asegurarme de que estén en un centro así. Y por último, voy a mover mi ilustración. 1234 y 1234 una vez más solo para asegurarnos de que tengamos espaciado parejo. Y ahora voy a extender mi héroe BG hasta este punto así y luego mover mi ilustración hacia atrás. 1234 Entonces para asegurarme de que estén en el centro, lo que voy a hacer es mover la ilustración hacia la derecha. gusta así puedo mover a mi persona como y que si eso es algo que tú quieres, dejémoslo aquí, por ejemplo. Y entonces puedo mover mi ilustración una vez contra su turno. 1234 Ahora este va a ser nuestro fondo. Alinear nuestra imagen de héroe. Voy a retroceder y finalmente mover mi ilustración. 1234 Así que realmente es jugar con todos estos diferentes elementos y ajustarlos como lo harías. Y luego voy a esconder rápidamente mi gran porque voy a jugar con estos elementos. Entonces voy a saltar dentro de formas y nuestra mezquita, y voy a extender mi mezquita hasta aquí, y luego la voy a acercar un poco más. Y luego simplemente voy a quitar estas formas alrededor, igual que antes. Entonces si es un poco difícil seleccionarlos, entonces puedes sostener tu llave antigua y puedes saltar rápidamente dentro y seleccionar directamente. Entonces digamos que este es el orden que me gusta, y simplemente puedo dejarlo así, y luego puedo seguir adelante con la siguiente parte de mi diseño, que son logotipos y para los logotipos. Si recuerdas, sí tenemos redimensionamiento responsive. Pero si hago casa una llave de turno, déjame encender rápidamente mi gran para que pueda verlos encajando en posición. Entonces si sostengo la tecla Mayús, van a escalar de manera uniforme así. Pero incluso puedes extenderlos así cuando llegues a cierto punto. Entonces con eso hecho, déjenme moverlos. Entonces turno 12345678 Vamos a ver, y luego puedo continuar con nuestra ilustración. Entonces con nuestra ilustración, puedo mover aquí mi ilustración, y la voy a escalar hasta este punto, por ejemplo, porque realmente quería ser agradable y grande, y quería posicionarla en el centro como así. Entonces voy a mover texto y demo abajo justo aquí, y voy a ocultar todas estas secciones hacia abajo porque va a ser mucho más fácil para mí trabajar en esto. Siguiente. Voy a llamar a mi llave de turno. 12342 Con 40 píxeles abajo, lo voy a alinear, que son geniales. Y por último, lo que voy a hacer porque va a ser mucho más fácil para mí usar resize responsive es que voy a convertir esto del texto puntual, que es este aquí mismo a texto de área. Entonces cuando hago clic ahí y luego puedo extenderlo, Toby, aquí mismo, condeno jugar con él. Entonces, por ejemplo, quiero mover esto. Como puedes ver, se adapta a mi párrafo así así puedo dejarlo así, o incluso puedo saltar por dentro y acercar esto un poco más. Me gusta así Porque ahora sólo tenemos dos líneas de texto para los botones de demostración. Igual que hicimos con los botones anteriores. Voy a reducirlo, Toby. Tres columnas blancas para asegurarnos de que tengamos el mismo espaciado, como así y para nuestro título. Incluso puedes convertir ese el texto de área si quieres, pero voy a dejarlo como si fuera porque realmente no tiene tanto en él. Entonces lo voy a posicionar así. Y luego voy a seleccionar mi divisor, mi párrafo, y asegurarme de que estén en 20 piezas así. Asegúrate de que el fondo esté en 40 como así y asegúrate de que esto esté alineado para crear Es así que básicamente es todo para esta sección. Y vamos ahora, rápidamente moverlo hacia abajo. Asegúrate de que estamos en 80. Como puedes ver, estamos tan básicamente que estás manteniendo la misma mirada que tenemos aquí mismo. Pero ahora la ilustración y el texto se están adaptando al ingenio de que ahora tenemos una cosa más sobre el texto. Puedes convertir este texto desde el punto X texto del área del dedo del pie para todos ellos, pero realmente me gusta convertirlos un poco más tarde, solo para que pueda ver donde necesita ser convertido y si necesita ser convertido en absoluto. Por ejemplo, para estas secciones, es realmente importante que conozcamos encubiertas pero, por ejemplo, para la disección. A lo mejor no es tan crucial, pero vamos a ver una vez que empecemos a diseñarlo. Entonces, ahora usemos esta sección, muévala al centro así, asegurémonos de que esto esté a 80 como ese, y, como puedes ver en este título, encaja muy bien. Pero este texto no lo hace así saltemos rápidamente a la vista. Voy a convertir el texto del área del dedo del pie, y simplemente voy a extender esto un poco hacia abajo. Voy a mover esto aquí para chasquear a rejilla y mover esto aquí para chasquear el pozo más grande. Pero como lo puedes ver ahora, solo tiene las palabras de este cliente en esa línea. Entonces, ¿qué? Yo lo voy a hacer. Simplemente mueve esto hacia arriba así, y luego está terminado. Entonces, como puedes ver, es realmente fácil. Y ahora si empiezo a moverlos por alguna razón, se va a adaptar, y se va a empujar todas esas palabras hacia abajo. Entonces así es básicamente como se trabaja con texto de área. A continuación, pasemos a las características, y voy a seleccionar estas características y a colocarlas hacia abajo para escuchar. Asegúrate de que hay 80 así y lo que voy a hacer es simplemente dividirlos seis por seis . Por lo que estos dos van a tomar seis columnas cada una. A la tienda se fue a hacer lo mismo, así que vamos a saltar dentro, y voy a mover revisiones ilimitadas. Y voy a mover soluciones personalizadas abajo así hasta que se chasquen y vamos a contar seis columnas para esta. Así 1234568 Este. Déjame revisar una vez más. 123456 es y usa soluciones personalizadas así que lo mismo aquí y asegúrate de que estén a 40 de distancia . Pero antes de que hagamos eso, vamos a adaptarlo rápidamente para que puedas abrirlos todos. Y se puede, por ejemplo, click en este convertido click en éste. Conviértalo, haz lo mismo para éste y finalmente haz lo mismo para éste. Por lo que ahora simplemente puedo extenderlos para escuchar. Yo puedo hacer lo mismo por este. Asegúrate de que esté a las seis. Asegúrate de que también sean seis y lo mismo para este. Entonces voy a empezar desde el principio desde el 1er 1 lo voy a mover hasta aquí sólo que pueda ver qué cabe y qué no le gusta esto así. Por lo que tiene que ser de tres líneas. Entonces, como hicimos con los anteriores, sólo vamos a moverlo hasta aquí. Esto se completa, y hagamos lo mismo para éste. Por lo que tiene que ser una alianza de tres. Si puede ser un tres líneas como esta, por ejemplo, realmente no importa porque los vas a empujar 40 píxeles hacia abajo desde el punto más bajo , que es éste. Entonces es buen salto por dentro e injusto esto para que no se meta con nuestra alineación. Entonces ahora los podemos mover a su lugar como así turno 1234 Y lo que voy a hacer es realmente mover esto. Asegúrate de que esté alineado con Margaret así todos estos estén alineados, excepto éste, así. Entonces todo está bien para ir ahora. No, tengo que ajustar mi impuesto solo un poquito hasta que se haga broches para arenar y hacer lo mismo para éste . Te vas a dar cuenta de los problemas de alineación de vez en cuando, pero simplemente tienes que trabajar con ellos porque no hay otra manera. Sólo recuerda, estás diseñando en este punto no estás desarrollando. Entonces todo está probando básicamente. Y esta prueba es realmente importante porque cuando estás haciendo esto, básicamente estás haciendo las pruebas para desarrolladores. Por lo que te estás asegurando de que las cosas funcionen como deberían antes de entrar en desarrollo, porque en realidad es mucho más fácil y más barato para ti probar todos estos temas. Entonces para los desarrolladores, porque su tiempo es más precioso que el tuyo. Un poco más tarde, una vez que el proyecto se pone en marcha y una vez que todo está codificado porque entonces tienen que arreglar bugs , entonces tienen que asegurarse de que todo funcione correctamente como debería, sobre todo porque se trata de un sitio web. Tiene que trabajar en diferentes navegadores propios. Así que solo asegúrate de que cuando estés diseñando, asegúrate de que estás revisando todos esos errores porque va a ser mucho más fácil para ti y luego literal para desarrollador revisar todo. Por lo tanto, pasemos rápidamente a nuestros precios. Voy a asegurarme de que esté en 80 como está aquí y por su poco rápidamente esconden todos estos elementos abajo, como así para él. Voy a seleccionar mi texto, asegurarme de que esté en el centro. No tenemos el dedo del pie trato con ello en absoluto. Y para ello, lo que vamos a hacer es ir del pie, tener dos seguidos, y luego vamos a tener este siguiente abajo. Entonces, ¿qué? Específicamente adaptado? Entonces, debido a que el tamaño responsablemente está activado, se puede ver que mantiene la distancia entre los márgenes izquierdo y derecho, y mantiene todo como debería. Entonces para por cinco, debería ser a las seis, así, y esto debería ser a las seis también, como, así como, que sólo asegúrate de dar cuenta. Sí, son, así que están bien para ir, y puedes posicionar esto en el centro, pero antes de hacerlo, asegúrate de que esté a las seis también. Después posicionarlo en el centro y luego puedes extender esto. Entonces hagámoslo rápidamente 12341234 meses Nuevamente, voy a seleccionar mi fondo y simplemente alinearlo con el spot. No le gustará. Entonces muévelo hacia arriba. 1234 Y voy a simplemente muerto. Ajusta mi forma. Entonces voy a usar mi mezquita. Simplemente extendió todo el camino hasta aquí, y luego puedo usar esta forma. Puedo jugar con él que pueda posicionarlo hacia abajo. Por ejemplo. Puedo usar este. Colóquelo arriba, vuelta en posición de círculo aquí. A lo mejor puedo mover este rectángulo aquí. Digamos algo así. A lo mejor podría bajar un poco esto y finalmente puedo mover precios. BG invierte para que se alinea y finalmente mueva mi mezquita para que se alinea también. Entonces eso es básicamente todo, para esa sección es que puedes ver algunas secciones son realmente simples, y algunas secciones pueden ser un poco complicadas para trabajar, así que es rápidamente ocultar los precios para poder mover mi testimonio hacia abajo. Lo voy a posicionar en el centro por igual, así que asegúrate de que esté a los 80 si no se muestra como no lo hace por el momento. Turno 12345678 Y para éste, porque somos un tamaño de tableta ese momento, sólo voy a tener un testimoniales y voy a tener mis flechas al borde. Entonces voy a ocultar mi testimonio de que voy a posicionar esto en el centro así, y simplemente voy a usar mis flechas como pueden ver. Shift Key otra vez no funciona en un obvio el realmente no sé por qué sigue mostrando estos bugs, y vi reportes en la voz del usuario en su sitio web donde puedes dejar tu opinión sobre software y mucha gente se ha quejado sobre este tema. Pero no se ha hecho nada recientemente, así que vamos a pasar rápidamente por 80 y lo que puedes hacer es simplemente posicionar esto en el centro. Pero como no tenemos esta mezquita aquí mismo, me pareció mucho más fácil hacerlo uno por uno. Y debido a que nos estamos quedando sin espacio, simplemente puedes extender tu puerto todo el camino hacia abajo, y lo que voy a hacer con este es simplemente saltar dentro, mover mi texto al centro así y asegurarte de que mi botella sea de tres columnas blancas así. También puedes acelerar esto si quieres. No hice esto para este proyecto, pero normalmente lo hago. Simplemente puedes hacer esto como un componente, y puedes incluir un componente fuera de un botón para que simplemente puedas arrastrar y soltar un componente desde aquí para que puedas seleccionar un botón. Sólo déjame asegurarme de que esté seleccionado. Se puede golpear el control y el mando. Kate lo va a convertir en un componente, y luego simplemente puedes seleccionar ese componente desde aquí. Arrástrelo y droguelo a su lugar, y luego se puede ver en qué posición desde aquí. Si eso es algo que quieres, no lo quiero por el momento porque también puedes golpear en componente de grupo y llamar a esto más BTM. No quise hacerlo porque seguimos jugando con diferentes tamaños. Entonces como ustedes vieron aquí, aquí tenemos tres componentes para componentes y allá tenemos que comportar dos columnas y alguien, Así que por eso no lo hice todavía, porque estamos jugando con diferentes tamaños. Entonces es un justo esto voy a mover este círculo para escuchar, por ejemplo, mover esto aquí. Voy a seleccionar esta forma con aquí mismo. Voy a ver donde mi mezquita la va a mover hacia adentro hasta que se encuentre en el centro. A lo mejor puedo incluso posicionar esto para estar por aquí, y realmente es jugar alrededor con estos diferentes elementos. Ver qué funciona, qué no y básicamente trabajando a su alrededor. No por la cuadra. Nosotros sólo vamos a ayudar a uno, así que se mueve rápidamente su 18. Fui a saltar dentro y para el registro no se lo puedes dejar a Veamos cómo se ve. Por lo que su posiciónelo en 62456 Así que incluso puedes extenderlo desde aquí. Pero como pueden ver, sigue moviendo este texto, y yo no quiero hacer eso. Por lo que realmente me gusta hacer todo yo mismo. Voy a saltar dentro y simplemente moverlo. Una columna para escuchar todo lo demás se queda igual y para el post a vamos a esconder el post tree post dos. Vamos a hacer lo mismo, así que solo salta dentro de extensión, esta imagen, eso es básicamente todo. Puedes jugar un poco más con este texto, pero como puedes ver, tal vez este aviso te quepa. Pero yo sólo voy con el dedo del pie. Créelo. Tal como es, todo lo que voy a hacer es simplemente mover esto ver todo para ser de tres columnas de ancho para que coincida con nuestros otros botones como así y simplemente me posicionaría para estar en el centro, que son texto como este y botón como ese. Eso es básicamente es una cosa final que nos queda para crear es Footer. Y como dije, podías ver la posición así, Así que asegúrate de que esté a 80 así y condensas simplemente ajustas a izquierda y derecha y mueves esto hacia adentro, y eso es básicamente todo. Ya terminaste con lo más completo de Onley que nos queda. Hacer ahora mismo es simplemente mover así, así que voy a moverlo. Werth así y nuestras tabletas de dispositivos medianos está listo para funcionar. Entonces si paso rápido, lo que hicimos es adaptarlo y, como pueden ver, hay que mover un poco esto. Y sí, este botón es de tres columnas luz. Entonces lo que hicimos fue crear este menú y un menú desplegable. Entonces si rápidamente lo enciendo o apagando, se puede ver que ahora tenemos en el menú desplegable. Puedes mover esto si quieres, puedes moverlo a la izquierda. Pero encontré y los usuarios lo encontraron que porque tu dedo está justo aquí, Así que cuando lo toques, va a ser mucho más fácil simplemente deslizar el dedo por aquí, luego tocarlo aquí y luego estirar el dedo del pie esta zona justo aquí . Entonces es mucho más fácil. No es sencillo y mucho. Tiene mucho más sentido tener todos estos elementos del menú aquí mismo porque, como dije, tu pulgar está justo aquí. Toca este icono, abrió este menú desplegable y simplemente accede a todas estas características a continuación. Lo que hicimos 10 es simplemente cada orden. Algunos fuera de estos elementos por lo que eliminó la ilustración a continuación. Subiremos el texto. Hicimos lo contrario aquí mismo. Redujimos el tamaño de estos logotipos. Entonces posicionamos estos dos parecen así Así que en lugar de cuatro en una fila, Ahora tenemos dos en una fila y dos filas, básicamente para el precio allí ahora un poco más ancho para caber en estas columnas. Y ahora tenemos dos y uno abajo, y para los testimonios, sólo tenemos dos. En cambio, sólo queremos en lugar de dos. Y por último, para el poste de bloque, tenemos dos en lugar de gratis. Entonces eso es básicamente todo para este. En el siguiente video, vamos a diseñar tabletas de dispositivos pequeños, por lo que va a ser básicamente lo mismo. Pero va a ser aún más pequeño que éste, y te veré en ese video. 14. Crea diseño Responsive 3: Sigamos ahora con tabletas de dispositivos pequeños y me voy toe hit control de a duplicar este, y lo voy a posicionar aquí mismo. Voy a hacer doble click aquí mismo. Golpear control, parece. No lloramos aquí, Obtener control el y voy a comprobar el tamaño. Son 600. Voy a hacer el mismo tamaño aquí como tan presentador, y vamos a ver lo genial aquí. Entonces son ocho columnas esta vez, así que primero cambiemos eso. Yo creo que sí Y 30 37 47. Entonces tratemos de adaptar ese 30 37 finalmente 47 aquí mismo. Entonces, como pueden ver, nos sigue trayendo el mismo problema. Pero esta vez logramos arreglarlo fácilmente. Por lo que 30 37 47 8 Columnas 30 37 47. Entonces eso es básicamente pelea. Como puedes ver, a veces vas a tener estos temas, pero a veces va a funcionar muy bien. Entonces vamos sección por sección, y voy a usar esto nunca BG. Yo lo voy a mover aquí mismo. Voy a seleccionar mi botón de demostración y el icono de menú. Yo los voy a posicionar aquí mismo y para éste. No lo tengamos en tres columnas. Entonces déjame adaptarme rápidamente como así Porque queríamos encajar nuestras columnas fácilmente. Ahora, porque ahí tenemos una gota, tenemos que adaptarla también. Entonces todo lo que quiero hacer aquí mismo es mover a bajar aquí mismo. Asegúrate de que todos mis artículos se alinearán con nuestra cuadrícula para que puedas seleccionar todos tus artículos . Muévalos así Y finalmente puedes usar líneas divisorias y bajar BG y simplemente moverlo a aquí. A continuación, vamos a pasar por la sección Tohira. Pero antes de que lo haga, déjenme esconder rápidamente su desplegable. Voy a pasar a mi sección de héroes. Voy a usar a mi héroe BG y simplemente moverlo así. Entonces voy a entrar en formas, usé mi máscara y simplemente moverla en palabras como así y ahora me voy a concentrar en el texto así como en la ilustración. Entonces para el texto, tenemos que hacer algunos cambios. Entonces vamos a convertir primero este texto de área del dedo del pie y puedes cortezar esto a texto de área también si quieres, pero no voy a hacer eso. Simplemente voy a colocar esto a continuación. Voy a mover esto hacia arriba y finalmente mover esto hacia abajo así. Entonces, como dije, nunca pongas una palabra para que puedas jugar con orden fuera de tus palabras para que puedas hacer algo como esto. Entonces si crees que eso te queda mejor de lo que puedes hacer que finalmente simplemente voy a adaptar este texto a mi agarrado como Así voy dedo del pie, extenderlo por su cuenta. Y voy a volver a subir esto una línea, como así va a pasar de comprometerse hacia abajo de sitios web, abs a branding. Y voy a poner esto a la última línea así porque sólo creo que hace que se vea mucho más agradable a la vista con el aquí. Y por último, tratemos con nuestros botones. Entonces los voy a posicionar hasta aquí. 1234 Y una vez más los vamos a hacer que sean tres columnas ligeras, así que voy a seleccionar esta. Asegúrate de que sean tres así, como este para asegurarte de que esté a las tres así como texto bien posicionado en el centro como así que asegúrate de que esto esté en el centro. Si no puedes encontrarlo, simplemente selecciona ambos y haz clic aquí, entonces aquí para asegurarte de que esté en el centro. Al igual que así. Posicionar a estos dos en el centro también. Y ahora vamos a ocuparnos de nuestra ilustración. Entonces voy a posicionar aquí nuestra ilustración, asegurarme de que el tamaño responsivamente esté apagado y simplemente asegúrate de que el dedo del pie lo baje un poco . Entonces voy a tener 40 píxeles aquí, luego turno 1234 Y simplemente voy a seleccionar mi belleza y moverla hasta que se alinee con nuestra ilustración. Siguiente turno 12 Como puedes ver, realmente no funciona a veces. Entonces hay que forzarlo básicamente. Pero simplemente puedes moverlo mientras mantienes el turno y te va a seleccionar 40 píxeles de aquí. Entonces básicamente todo lo que queda es que tenemos que mover estas formas. Como puedes ver, el realmente sí se ve genial. Pero como puedes ver, hay que adaptarlos todo el tiempo porque para que todo el dedo del pie funcione como debería, hay que asegurarte de que sean diferentes tamaños que estén colocados correctamente. Tienes que escalar algunos de ellos hacia abajo. Tienes que posicionarlos de manera diferente. Pero como puedes ver, es divertido diseñar este material. Pero cuando se trata de cosas especie de reposicionamiento, realmente tienes mucho trabajo por hacer. Entonces pasemos ahora a nuestros logotipos, y voy a mantener mi tecla de turno y volver a posicionar mis logotipos un poco mejor, así, asegurarme de que estén en 80 por ejemplo. Entonces posicionemos esta línea de remolque apropiadamente así, Y fui a una casa una llave de turno. 12345678 Voy a hacer lo mismo para mi ilustración. Asegúrate de que esté a los 80. Por alguna razón, es un 78 así que simplemente lo voy a mover a píxeles hacia abajo así. Entonces cuando lo muevas, va a mostrar 80. Entonces lo que voy a hacer ahora es simplemente usar mi ilustración, posicionarla con el dedo del pie aquí, asegúrate de que se alinee con nuestro gran cambio de llamada simplemente. Entonces voy a usar mi texto y posicionarlo hasta que se alinee y hasta que se alinee con nuestro grande de la izquierda así como turno 1234 y me voy de pie. Simplemente coloca mi botón hasta que me ocupe de esto, así que tengo que bajar un poco este texto. Entonces en la industria, usémoslo así voy a usar mi divisor y simplemente si me lo permite, voy a esconderme. Este texto simplemente movió a estos dos hacia abajo I. Así que entonces voy a elegir mi divisor y posicionar 20 píxeles y luego hacer lo mismo para el texto. Por lo que desde el inicio, quizá podamos mover estos libros. Veamos cómo se ve eso así como puedes ver, Box se adapta muy bien a nuestro gran y una última cosa que tenemos que hacer es simplemente posicionar este turno. 1234 y voy a asegurarme de que sean tres columnas de ancho. Voy a posicionar mi texto en el centro en esta montaña. Como puedes ver, sigue haciéndose cada vez más rápido. Cuanto más hagas esto, más vas, más tamaños creas porque básicamente pones este diseño. 234568 y tu contenido adaptan rápidamente ese diseño para que se ajuste a tus necesidades, así que no movamos rápidamente esto y movamos en esto también. Entonces lo voy a extender hacia abajo, y estoy contento con la forma en que se ve esto. Entonces, básicamente, lo único que queda aquí es adaptar este título. Entonces movámoslo hacia abajo y veamos, ¿dónde podemos romperlo? Hagámoslo aquí, entonces simplemente mueve mi divisor para ser 20. Y esta sección está terminada ahora para los futuros. Rápidamente lo atacamos. Entonces se alinean con nuestra grilla y vamos a moverlas 80 así A veces te vas a notar estas líneas sin, por ejemplo, 80 y nos va a mostrar, Digamos 79.8, porque fuera de estas iconos, por lo que no puedes lidiar con eso, desafortunadamente, Pero simplemente puedes seguir adelante, ir a tu endpoint más cercano y simplemente detenerlo ahí. Entonces porque como dije, ahora tenemos ocho columnas, Así 12345678 vamos a usar cuatro. Y por eso pasemos esto a cuatro. Aquí está. Están alineados como disparar. Estos son iluminados, así que básicamente deja ahora ajustarlo. Todo lo que tienes que hacer es simplemente mover este texto a cuatro como así y veamos dónde se rompe justo aquí. Haz lo mismo para éste. Para simplemente moverlo a cuatro, ver qué se rompe, y hay que ajustar algo de esto. Ajustemos esto y esto se va a mostrar a las tres. Entonces, tratémoslo ahora, y podemos pasar a estos de abajo, así que asegúrate de que estén a los 40. Entonces como pueden ver, vamos a tener algunos problemas por estos iconos. 1234 39.8. Eso es lo más cercano al que podemos llegar. Y tú condensas. Simplemente ajusta este texto para que se ajuste a nuestros libros así por el texto, vamos a dejarlo tal como está porque esta frase va a ir hasta el final. Y lo hicimos de esa manera en todos los tamaños, si te diste cuenta. Entonces tratemos de poner esto. Encaja. Entonces lo vas a dejar ahí y finalmente adeptar esto hasta aquí. Ahora que eso se completa, todo lo que queda es mover estos 80 pepinillos hacia abajo para cambiar 1234567 pies. Ahora porque estamos en las tabletas de tamaño pequeño, quiero hacer algunos cambios. Entonces, primero tratemos con el texto. Voy a posicionarlo en el centro como Así que voy a romper esto en dos líneas como esta. Voy a usar mi divisor y mi texto movido en 20 abajo. Y debido a que este texto no es un texto de área, tratémoslo Ahora lo voy a posicionar aquí. Voy a posicionar esto hasta aquí. Entonces lo voy a extender hacia abajo y porque no lo veo, voy a ocultar esta información de precios, y voy a lidiar con ello ahora. Por lo que este empaque y para satisfacer sus necesidades va a ir a la botella. Vamos a asegurarnos rápidamente de que esté al final. Lo es. Y ahora vamos a ocuparnos de nuestros precios. Entonces como decían, porque estamos en un tamaño de tableta pequeña, voy a extender para que quepan ocho columnas en ingenio. Entonces, ¿cómo puedo hacer eso? Simplemente puedo seleccionar los tres. Muévalos hacia abajo 40 píxeles, así que cambia 1234 Asegúrate de que esto esté a la izquierda. Entonces una vez más 1234 y voy a mover un pro y elite hacia abajo, Así que los posicionó aquí, asegúrate de que estén en el centro así y luego simplemente muévalos a aquí. Y luego voy a seleccionar los tres y simplemente extenderlos para escuchar si no funciona, entonces hay que hacerlo uno por uno. El diseño se rompió aquí por alguna razón. Entonces déjame revisar lo que pasó. Volveré un par de veces. No estoy seguro de por qué, Porque estos dos se ven como deberían. Bueno, ya ves, aquí también tenemos este error. Pero para arreglarlo, simplemente salta dentro y seleccionaré todo en lugar de nuestro fondo. Asegúrate de que estén en el centro y simplemente los alineó con el centro fuera de nuestros libros y finalmente comprar paquete se iban dedo del pie para estar en el centro. Y debido a que nuestros botones son diferentes, usemos este fondo. Entonces el control. Mira, voy a saltar aquí mismo. Eliminar hit Control V y voy a simplemente moverlo aquí en el centro así No estoy muy seguro de por qué sucedió eso, pero como puedes ver de vez en cuando vas a notar algunos de estos temas. Vamos a comprobar rápidamente. Como se puede ver aquí, funciona bien. Aquí. Funciona bien. Entonces, no saltemos rápidamente. Arreglarlo aquí también. Entonces lo que voy a hacer es que voy a seleccionar todo, asegurarme de que esté en el centro así que asegúrate de que esté en el centro así. Si no puedes forzarlo a estar en el centro, puedes seleccionar todos ellos todos tu comando de control. Haga clic aquí y luego simplemente haga clic aquí. Después fue dedo del pie alinear perfectamente en el centro. Entonces para los botones, eliminemos rápidamente este. Simplemente voy a usar este, Así que controla C Control V. Voy a posicionarlo aquí mismo. Entonces me voy a asegurar que esté en el centro así y después. Una vez que hayas hecho eso, vamos a adaptarlas para que sean receptivas. Entonces vamos a seleccionar esto. Selecciona esto, asegúrate de que estén en Central, así que posiciónate ahí, selecciona los tres y luego vamos a extenderlos. Como puedes ver, se están sintiendo en muy bien lectura, interrumpiendo cualquiera de nuestros botones. Cualquier fuera del diseño, se puede ver todo cabe ya que debe asegurarse de que sean 40. Entonces 1234 y una última cosa que quiero revisar es thes. Los botones van a ser diferentes de todos modos, así que dejémoslos así, porque el punto de tapping es bastante bueno de todos modos. Entonces, ahora solo asegurémonos de que tengamos suficiente espacio entre ellos. Por lo que 1234 y ahora vas a lidiar con la élite. También turno 1234 terminó Básicamente lo. Entonces ahora vamos a extender rápidamente esto. Voy a ocultar testimonios, bloque promocional y pie de página para que tengamos algún trabajo de dedo espacial con alguna posición de dedo del pie yendo. Esto hasta aquí, que al igual que este turno 1234 Voy a seleccionar esto. Tráelo de vuelta, mueve esto para ser 40 como así y luego simplemente voy a adaptar nuestros antecedentes y adaptar algunos de estos elementos. Entonces vamos a entrar en formas yendo a mezquita y adoptemos la mezquita para ir todo el camino hasta aquí así y asegurémonos de que esté en el centro así. Entonces puedes mover algunos de estos elementos. Entonces, ¿qué se utiliza estos? Dejémoslos donde están Voy a posicionar este aquí. Voy a posicionar este un poco hacia abajo. Entonces algo como esto, por ejemplo, tal vez pueda incluso aumentar el tamaño de la misma. Y eso es básicamente todo para esa sección. Entonces pasemos ahora a los testimonios, bloque de promoción y para ella. Y antes de que lo hagamos, voy a hacer doble clic en mi pizarra y simplemente extenderé todo el camino hacia abajo. Al igual, por ejemplo, porque no necesitamos bajar la deuda. Por lo que los testimonios puedes mantener turno, seleccionar todo es simplemente moverlo hasta aquí. Turno 1234 Y ahora saltemos por dentro y podamos adaptar nuestros testimonios. Entonces voy dedo del pie posición Una calificación de aquí para estar en el centro. Asegúrate de que esta flecha esté aquí y simplemente asegúrate de que traigo esta flecha en dos aquí . Cuando termines con eso, simplemente puedes saltar a la promoción. Asegúrate de que esté a los 80 así que tengo que mover todo porque me moví Testimonios. 40. Así que cambia 1234 Entonces asegúrate de que esto está a los 80 así que lo es, y luego lo que tienes que hacer es simplemente texto adaptado en el interior, así que vamos a moverlo rápidamente al centro así. Entonces simplemente adapta este texto pero el viaje de abajo. Seleccione esta. Asegúrate de que esté en 20 y simplemente adapta este texto coloca uno debajo. Vamos a ocuparnos de nuestro botón, así que voy a posicionarlo para estar aquí. Asegúrate de que sean tres llamadas de ancho así que asegúrate de que esté en el centro y para los píxeles hacia abajo. Así que turno 1234 Y ahora posicionemos todo como así que asegúrate de que todo esté en el centro como está y solo asegúrate de que sea todo. Es centro como este saludo horizontal y verticalmente. Entonces vamos a mover los precios. BG. Vamos a mover las formas. Entonces voy a reducir un poco el tamaño de mi círculo. Voy a reducir el tamaño de este rectángulo. Por último, voy a mover esto en un poquito. Voy con el dedo del pie, ajustar mi mezquita. Como puedes ver, todo se mueve bastante rápido en cuanto empiezas a conseguir estos elementos. Entonces en cuanto empieces a moverte a la izquierda, a la derecha, por lo que ocho píxeles buenos para alinearlo así. Y por último, vamos sólo a todo dentro. Entonces voy a posicionar aquí mi texto. Yo también voy a quitar Block post . Voy a extender mi imagen de post bloque para escuchar puedes hacer doble click dentro y transmites reposicionar esta imagen para que quepa siguiente. Esto va a seguir igual, pero esto va a cambiar bastante, porque ahora tenemos mucho más espacio para trabajar. Entonces vamos a mantenerlo como para que pueda mover avatar para escuchar unos 20 píxeles. Y vamos a ocuparnos de nuestro botón. Entonces, como dijimos, necesitamos hacerla de tres columnas de ancho, por lo que su posiciónelo aquí y aquí. Voy a seleccionar el texto, asegurarme de que esté en el centro. Asegúrate de que esté a los 40. Al igual que el Hombre Self. Asegúrate de que esté en el centro fuera de nuestro puerto así. Por último, para el debilitamiento aún más, haz exactamente diciendo cosas para simplemente moverlo en el centro. Asegúrate de que esté en 80 así y simplemente sube un poco el nuestro puerto para que podamos terminarlo justo por aquí. Cuando se pisa, ya sabes que está en el centro, así que voy a acercar esto un poco más, y eso es básicamente todo para el tamaño de tableta pequeña. Entonces vamos a correr rápidamente a través de lo que hicimos. Voy a ocultar rápidamente mis calificaciones. Entonces metimos este texto y no veo el espaciado aquí como debería. Entonces dispara 12 Voy a tener que moverlo todo básicamente. Entonces 1234 1234 y 1234 Así voy a mover al héroe BJ aquí ilustración y luego no hacer todo, no trabajar en todo. Entonces es rápido sólo mover la mezquita un poco así que te voy a mostrar un pequeño truco. Entonces fui puntera extensión ¿nuestra tabla un poco todo el camino hacia abajo? Entonces porque hemos trabajado en el héroe, vamos a seleccionar rápidamente todo excepto héroe. Se puede subir un poco y luego simplemente ajustar a ser 80 tonto así que así y se puede ver en el lado izquierdo justo aquí. Si me muevo, se puede ver cuántos píxeles hay en el medio. Y una vez que hayas hecho eso, simplemente haz doble clic aquí y traes tu puerto hasta que se encuentre en el centro así. También puedes significar mucho más cerca si quieres, todo el camino hasta un píxel hasta que se encaje y básicamente es para un tamaño de tableta pequeño. Entonces una vez más, cubramos rápidamente lo que hicimos. Ajustamos nuestro logo A. Ajustamos las posiciones fuera de todo. Y es bueno que encienda esto porque esto no estaba alineado como debería. Entonces, como dije, incluimos todo dentro, igual que lo hicimos para tabletas de dispositivos medianos. Ahora tenemos este texto el cual se envuelve un poco más bajo. Tenemos la ilustración, que una vez más es un poco más pequeña. Aquí tenemos ilustración más pequeña, logotipos más pequeños. Tenemos el texto que envuelve un poco diferente. Tenemos a Destexhe aquí tenemos a estos dos, pero ahora se extienden un poco hacia abajo. Aquí tenemos este look diferente que antes, y no me gusta cómo se ve esto. A lo mejor puedo ingenio en algún lugar por aquí. Es un justo para que no estén en el mismo espacio y por el precio que ahora tenemos en estas cajas, que se extienden todo el camino para escuchar su sentimiento todo el espacio porque hay un espacio que llenamos una vez más. No me gusta cómo se ve esto. A lo mejor puedes traerlo aquí. Y esa es la belleza de este proceso, porque simplemente puedes correr y ver lo que no te guste. Y los testimonios ajustados básicamente no cambiaron tanto. Esto no cambió tanto también. Simplemente lo ampliamos para ser un poco más alto dentro del texto. Pero para el bloque, ahora tenemos sólo un poste de bloque, y se puede hacer esto al revés. Se pueden incluir héroes, por ejemplo, testimonios de liquidez. Puedes incluir paginación aquí abajo. Puedes incluir una publicación encima de otra si quieres. Pero por el bien del espacio, porque Blawg realmente no es tan esencial para este sitio web en particular porque está vendiendo servicios de diseño. Por lo que pertenecer es solo una de las formas en que están haciendo dinero, pero no su principal vía. Por eso lo movimos hacia abajo y solo se incluyeron un poste de cuadra. Entonces si quieren ver todos los carteles de soplado que decía, aquí está la página de bloque, simplemente pueden hacer clic, ver todo o golpear aquí mismo para ir a la página de correos de bloque. Por último, para el pie de página nada ha cambiado realmente. Es sólo más estrecho que antes. Entonces eso es básicamente todo para este tamaño. Y en el siguiente y último video, vamos a discutir el tamaño del teléfono porque va a cambiar. Una vez más. Vamos a ir de cuatro columnas en diseño dedo del pie cuatro columnas para el teléfono, y nos vamos de dedo adaptado para caber ahí también, así que nos vemos ahí. 15. Crea diseño responsivo 4: Por último, empecemos con dispositivos extra pequeños teléfonos IE. Pero antes de hacerlo, decidí que en algunos lugares quiero incluir tres llamadas botones blancos. Entonces, por ejemplo, aquí mismo no voy a hacer eso porque se va a meter demasiado con el diseño fuera de nuestra navegación. Yo tampoco voy a hacer eso aquí, porque tenemos dos botones uno al lado del otro, pero lo voy a hacer aquí. Así que déjame adaptarlo rápidamente, y puedes usar la puntera redimensionada adaptativa incluirla así. Y ahora se puede ver que es bastante grande y bastante fácil de leer porque estos también lo son . Por último, voy a incluir uno aquí también, así que voy a extenderlo hasta aquí. Voy a asegurarme de que esté en el centro, y finalmente, me voy con los pies incluir aquí también, sólo porque tenemos suficiente espacio aquí mismo. Puntera incluida para ser tres columnas blanco. Entonces ahora que lo hemos hecho, pasemos rápidamente a dispositivos extra pequeños. Voy a seleccionar este control de un niño profundo, y para éste, vamos a hacer que esta obra de arte sea bastante larga así que bien puedo extenderla desde el principio. Entonces lo voy a extender todo el camino hacia abajo y puedo saltar a la vista y mover todos estos hacia abajo. Pero déjenme mostrarles rápidamente estas columnas. Entonces, por ejemplo, aquí tenemos cuatro columnas. Entonces primero cambiemos la deuda. Entonces cuatro columnas y en las que decidí ser 375 porque es más pequeño que 576 Doble click. Bastando esto aquí mismo. Entonces voy a cambiarle el nombre. Entonces cambiemos el ingenio a 375 por igual. Entonces y finalmente, para las columnas, veamos qué tenemos aquí mismo. Por lo que tenemos 30 61 20. Entonces vamos a copiar eso. Entonces tenemos 30 61 finalmente tenemos 20 justo aquí en la parte inferior. Entonces, una vez más, vamos a tener que adaptarlo. Por lo que 30 61 20. Vamos a comprobarlo. 30 61 20. Sí toma un poco de tiempo para que los huevos Matt pateen, pero una vez que hace como puedes ver, todo funciona como debería. Por lo que ahora ajustemos rápidamente todos estos diferentes elementos. Entonces, básicamente, se va a trabajar con el dedo del pie exactamente igual que para todos fuera de estos. Pero para este, voy con el dedo del pie hacer el logo un poco más pequeño. Entonces, por ejemplo, en algún lugar por aquí voy a mover el botón y el icono del menú a aquí, y voy a hacer el fondo un poco más pequeño. Entonces voy a, por ejemplo, por ejemplo, hacer que sean dos columnas blancas como así y voy a asegurarme de que, por ejemplo, sea un píxel de 20, así que no exactamente en el centro, porque centro estará aquí mismo. Pero voy a moverlo. 20 pixels, por ejemplo, a la izquierda desde nuestro icono de menú. Por lo que se mueve en R B G justo aquí. Incluyamos nuestro desplegable. Voy a mover todo por dentro o bajar a la derecha. Entonces básicamente vamos a hacer exactamente lo mismo que hicimos. Entonces vamos a seleccionar todos los elementos del menú, moverlos aquí, seleccionar las líneas divisorias y el fondo. Voy a moverlos todos invertidos a aquí. Todo se ve muy bien. Yo lo voy a ocultar, y después vamos a tratar con los elementos de abajo. Entonces para esto, voy a seleccionar al héroe. BG. Muévete en palabras como así y voy a elegir mi forma. Entonces usemos la mezquita. Voy a traer la mezquita en un poco, y vamos a ocuparnos de ellos un poco más tarde. Entonces, por ahora, ocultemos todas estas formas. Entonces no están distrayendo, y me voy de los pies a lidiar con estos elementos o posicionarlos en el centro así. Y luego qué? Yo lo voy a hacer. Simplemente mueve el botón demo aquí y asegúrate de que sean dos columnas blancas porque ahora tenemos cuatro. Asegúrate de que se trate de dos llamadas blancas también. Como puedes ver, todo encaja muy bien, y lo que voy a hacer es simplemente seleccionar esto. Y finalmente, voy a cambiar el dedo del pie su talla porque es demasiado grande por ahora, y voy a cambiar el tamaño para esto también. Entonces si volvemos a saltar aquí, simplemente puedes seleccionarlo. Y usemos algo así como open size 36 y vamos a seleccionar esto. Esta es Carla, de 80 años. Asegúrate de que sea blanco. Es, y fue simplemente entonces atacó este texto para encajar dedo del pie aquí ya que se puede ver todo se ve bien, pero voy a mover esto de sitios web abs a branding. Te tenemos cubierto así que todo está en cuatro líneas en lugar de cinco. Es por eso que tener activos y estilos de carácter, especialmente, es realmente útil porque va a mantener las cosas con un aspecto bonito y suave. Todo se va a ver como debería. Pero cuando te mudas a la vista móvil, sobre todo aquí, todo tiene que ser un poco más pequeño porque el dispositivo es más pequeño en general. Entonces hay que pensar en todas esas cosas porque cuando el usuario mira, por ejemplo, por ejemplo, este texto en este dispositivo, se puede ver lo grande que es esta pantalla en comparación con esto. Todo se va a cubrir. Entonces básicamente todo su ido a ver es el texto sin los botones, sin ilustración. No queremos eso. Queremos que vean todo como está aquí mismo. Por eso estamos reduciendo el tamaño del texto en este caso. Entonces, no sigamos adelante. Voy a mover esto aquí, Así que turno 12 Voy a mover esto aquí. Entonces turno 1234 Asegúrate de que tenemos que reducir el tamaño de este puntera caja aquí? Sí, y me voy de pie. Usa mis botones. Asegúrate de que estén 40 píxeles abajo así y asegúrate de que todo esté 40 piezas abajo desde la parte superior. Entonces aquí mismo. 1234 Y ahora juguemos con nuestra ilustración y para la ilustración. Vamos a acercar todo un poco más, y yo voy a, por ejemplo, por ejemplo, volver a posicionar esta parte de la ilustración un poco así. Y luego voy a reducir el tamaño fuera de la ilustración como, Así que voy a asegurarme de que sean 40 como son. Entonces turno 1234 Y luego voy a traer a mi héroe BG así. Voy a subir la ilustración una vez más hasta que esté a los 40 y eso es básicamente todo para esto. No nos ocupemos de nuestras formas porque cambiamos cómo se ve todo básicamente así que me voy a mover en mi círculo. Voy a hacerlo un poco más pequeño. A lo mejor reposicionarlo aquí mismo. Voy a lidiar con esta gran plaza así que voy a tratar con la plaza para encontrarla rápidamente. Está aquí abajo. Entonces ahora tenemos que ajustar nuestra mezquita. Vamos a moverlo a aquí. Y debido a que hicimos eso, tratemos rápidamente con esta plaza porque no hay necesidad de que sea así de grande para que puedas sostener tu tecla de turno. Puedes posicionarlo donde quieras. Incluso puedes rotarlo. Pero no voy a hacer eso. Parece simplemente posicionarlo aquí. Hacer las cosas bonitas y sencillas. Posicione esto aquí. A lo mejor puedo traer este cuadrado un poco afuera y tal vez pueda mover el círculo, así. Entonces si escondo mi gran, se puede ver como todo parece que todo es como debería. Todo se coloca a donde se supone que vaya, pero ahora se ve mucho más coherente en esta pequeña pantalla. Ahora por estos logotipos, no voy a tener que sean cuatro seguidos. Más bien, sólo voy a tener que sean dos seguidos. Entonces voy a usar el logo tres para asegurarme de que estén en el centro Local un logo para asegurarme de que estén también en el centro, así . E incluso puedes jugar con ellos y, por ejemplo, posicionar este logotipo. Entonces uno local, puedes hacerlo estar en el centro fuera de éste, y puedes, por ejemplo, combinar estos dos para estar en el centro. Entonces puedes seleccionar todo y solo asegurarte de que esté en el centro como así ahora para el destino. Desde el héroe hacia abajo, puedes usar 1234 o tal vez 80. A ver qué se ve mejor. Entonces se comió 12345678 Creo que es demasiado porque esto es sólo un espacio vacío ahora, así que tal vez 40. Eso se ve mucho mejor. Por lo que ahora tratemos de nuestra ilustración. Puedes alinear todo aquí a la izquierda, asegúrate de que sean 40 píxeles aquí mismo. Puedes usar la ilustración y simplemente escalarla hacia abajo hasta que encaje dentro de nuestra cuadrícula. Al igual, entonces nos vamos a asegurar que todo esté donde se supone que debe estar. Entonces turno 1234 y no vamos a lidiar con el tamaño de este impuesto porque es un 36. Este texto es ese 18. Entonces básicamente todo es como está este texto, así que ya no vamos a jugar más con él. Pero lo que vamos a hacer es simplemente tratar con la frontera fuera de estas palabras. Entonces básicamente como así vamos a mantener la industria baja porque decía que se ve mucho más bonito cuando las tienes sean dos líneas de texto en lugar de solo una. Entonces adaptemos rápidamente este texto. Voy a extenderlo hacia abajo. Como puedes ver ahora funciona mucho mejor. Tratemos con nuestro botón y posición a los 40. Vamos a moverlo hacia arriba a 34 y no voy a simplemente reducir su tamaño para ser dos columnas blancas que ve bien. Muémonos abajo y adelante. Ir a la reposición del dedo es estar en el centro, asegurarse de que sea 40 Así 1234 y vamos a lidiar con estos dos textos ahora mismo. Entonces para éste, lo vamos a ajustar. Entonces consigue tus proyectos. Voy a bajar esto en el camino rápidamente. Se va afuera. Entonces así, Bueno, vamos a tener que estar aquí. Cuídate. El diseño va a bajar por aquí. Por último, movamos el divisor y un texto hacia abajo 20 píxeles como así voy a mover este texto aquí. Muévete aquí. Por eso lo creamos como texto de área porque, como puedes ver en estos tamaños más pequeños, es mucho más fácil trabajar con él de esta manera. Entonces dedo del pie tiene que ser texto puntual. Ahora para estos, van a ser nuestro gran cambio porque básicamente vamos a tener que sean uno a la vez. Entonces turno 1234 Y ahora voy a mover todos estos elementos hacia abajo porque no quiero que me molesten así. Y ahora concentrémonos en estos. Entonces vamos a saltar características de información privilegiada y voy a seleccionar estos tres lo movieron aquí. Asegúrate de que se queden alineados así, Y voy a mover las soluciones personalizadas de manera antigua hacia abajo porque esa es nuestra última. Y vamos a saber, simplemente trabajar en nuestro texto. En primer lugar, asegúrate de que todos estén alineados así. Asegúrate de que se alineen con el borde izquierdo fuera de nuestra cuadrícula, y luego voy a saltar por dentro y justicia texto así Así que ahora está en tres líneas de texto en lugar de apagado para, así que hace que sea mucho más compacto para que los usuarios lean, así que asegúrate de estar a los 40. Por lo que 1234 vamos a hacer lo mismo para el texto de Dis. Ahora está en dos líneas, así que ajústalo en consecuencia. Vamos a ocuparnos de éste. A ver si se va a meter en posición. Es incluso todo el control para hacer clic directamente en tu texto. Tú eliges fue. Nos lo vamos a pegar para estar aquí como está en todos nuestros otros ejemplos. Asegúrate de que esté a los 40 si no quiere ser 1234 Se fue a ver 39.8 una vez más. Eso se debe a que fuera de nuestro ícono y son iguales. Fuimos a colocar justo aquí solo para asegurarnos de que es cortes donde debería justo aquí . Y luego vamos a pasar a la fijación de precios, así que voy a mover todos estos elementos de nuevo hacia arriba. Por eso es agradable tener estos grupos porque son realmente útiles. Así que turno 1234 Asegúrate de que esté a los 40 y lo que vas a hacer ahora es saltar dentro de nuestro texto , posicionarlo así y precios asequibles. A ver, vamos a mantener todo un zit es solo asegurarnos de que esto esté en el centro, como así es. Esta caja cabe fuera, pero una vez que entre en código, no habrá caja. Entonces va a encajar muy bien por dentro, así que no te preocupes demasiado por eso. Vamos a posicionar esto en, como, tan extendido No hasta que encaje así Y entonces vamos a tener a estos tres moverlos a escuchar, asegurarnos de que estén a los 40. Por lo que 1234 y vamos a seleccionar todos ellos son resize responsive va a hacer su magia. Como puedes ver, todo se ve bien, limpio y como debería, no cambió nada de las proporciones. Lo único que nos queda por hacer es simplemente extender el precio Bijie hacia abajo. Por lo que 1234 y vamos a seleccionar la belleza de precios. Asegúrate de que esté alineado. Mueve esto hacia arriba hasta que se encaje en 40 como este. Y luego tratemos con el BG de precios. Entonces, como puedes ver a lo largo de este proyecto, este fondo con todas estas formas nos está tomando más tiempo para que puedas lidiar con su dos vías puedes lidiar con ello como estamos ahora mismo. O puedes tener que sea imagen la cual puedes crear por separado. O puedes incluirlo, Toby. Muy una vez o puedes crear ilustraciones separadas para que no tengas que cambiar el tamaño cada vez. Realmente depende de ti y de tu flujo de trabajo. No obstante, te gusta el trabajo del dedo del pie y donde creas que encaja mejor con el proyecto en la mano. Por lo que hay muchas maneras de tratar estos temas y estrategias. Entonces sin importar lo que pienses, encaja para el proyecto, eso es lo que vas a hacer. Entonces no terminamos básicamente con nuestra mezquita. Por lo que ahora podemos seguir adelante a continuación, así que una vez más, selecciona todo y asegúrate de que estén a los 40. Entonces algo así aquí mismo, voy a saltar a mis testimonios. Voy a asegurarme de que mi flecha izquierda esté alineada con mis calificaciones, mi flecha derecha también así. Y voy a usar mi testimonio, moverlo al centro así y porque ahora quitó esto y ya no puede contener esto . Lo que voy a hacer en realidad es mover estas flechas hacia abajo así que las voy a seleccionar. Se movió en 41 234 y los voy a posicionar para estar en el centro y dedo en línea con grano . Por lo que voy a seleccionar mi flecha izquierda. Colóquelo aquí, mueva mi terror correcto. Colóquelo aquí. Como puedes ver, todavía hay espacio entre thes líneas de cuadrícula así que dentro de la canaleta para que los usuarios puedan usar su golpe y punto de golpe va a ser agradable y fácil acceso del dedo del pie porque aún tienen suficiente espacio a la izquierda, derecha y en el centro entre estos dos iconos. Si estás trabajando con dispositivos más pequeños, por ejemplo, formas mucho más pequeñas que estos teléfonos más nuevos, incluso puedes separarlos aún más si eso es algo que quieres. Pero hay que hablar con los desarrolladores para ver en qué piensan cuando estás probando en estos dispositivos. En condiciones ideales, podrás usar dispositivos de prueba de dedos de inmediato. Pero si no tienes esa opción en ese lujo, entonces simplemente puedes leer en torno a lo que quiere y lo que necesitas para que puedas caber todo dentro. Ahora movamos este testimonio hacia abajo 40 y podemos hacer lo mismo por nuestra flecha. Por lo que 1234 y podemos seleccionar estas flechas, seleccionarlo así. 1234 Porque no tenemos ningún color de fondo. Solo asegurémonos de que esto sea a los 40. Entonces una vez antes y ahora voy a seleccionar estos y ellos, sin embargo, asegurarme de que estén a los 40 también. Y no nos ocupemos de esto, así que voy a traerlo muy bien. Voy a usar mi botón demo. Asegúrate de que sean dos llamadas blancas como tan responsablemente tamaño. ¿ Apesta y se asegura de que estos dos estén en el centro así? No, tenemos que adaptar esto. Entonces saltemos adentro. Viajes creativos fueron a bajar, y ¿cuál de nosotros va a ir por debajo de eso? Usemos el divisor. Asegurémonos de que sean 20. Asegúrate de que Button esté a los 40 así que fui a antes. Posiciona eso en el centro y, vamos a saber, selecciona todo y muévelo al centro. Como se puede ver, 64 63. Por lo que tiene mucho espacio fuera entre, por lo que no tienes que extender esta sección si no quieres. Si haces una para que puedas extenderla para ganar aún más espacio. Pero si no es necesario que no asesoraría para que pueda extenderse todo el camino hacia abajo. Porque a pesar de que esta sección es importante porque contiene la llamada a la acción inferior, no es tan importante si bloquea la vista para el usuario, lo que el usuario tiene que desplazarse todo el camino hacia abajo y perder mucho tiempo. Tienen que poder decir lo que es de inmediato, para que puedas lidiar con ello de esa manera si quieres. Entonces llamemos a esta sección hecha. Voy a cerrar en estas carpetas así, y es ahora Pasar rápidamente a Blawg va a posicionarse aquí, asegúrate de que esté a los 40. Entonces 1234 y finalmente, dejemos caer el texto en el centro así. Vamos a posicionar nuestra cuadra abajo. Vamos a mover el poste y el fondo por debajo de eso. Por lo que 1234 voy a saltar por dentro, ajustar mi imagen para que quepa aquí mismo. Voy a dar click en este texto y ajustarlo en consecuencia, así. Y por último, voy a mover mi avatar a injusto como así como ves, es bastante sencillo. Una vez que te vayas, voy a asegurarme de que mi botón sea dedo del pie viene blanco. Igual que todos los demás botones. Asegúrate de que esté a los 40 como este. Y por último, no hagamos trato con Footer. Entonces una vez más, me voy de pie. Colócala en el centro, asegúrate de que sea un 40. Entonces 1234 Y cuando voy a hacer porque, como pueden ver, no nos queda espacio, voy a usar estos artículos. Por lo que Blawg y contáctanos. Voy a moverme por debajo tal vez 20 píxeles. O usemos 40 porque usábamos 40 en todas partes. Ahora me voy con el dedo del pie. Posicionar que en el centro y seleccionar precios futuros y servicios y mover los que están en centro como así, como está aquí mismo. O incluso puedes agruparlos y simplemente seleccionar pie de página BG. Asegúrate de que estén en el centro. Se puede agrupar. Estos dos quieren venderlo para el BG. Asegúrate de que estén en el centro, y ese es el peso agradable fuera haciendo eso. Se puede seleccionar logotipo. Asegúrate de que esto esté en el centro y voy a bajar esto por internet. Entonces puedes seleccionar todos estos. Asegúrate de que estén en el centro. Entonces una vez que todo es agradable y conciso, puedes entonces traer esto y extender esto hacia abajo porque queremos tener mucho más espacio aquí. Entonces no hagamos eso porque tenemos 1234 Tenemos 40 pixeles entre esto y logo. Hagamos lo mismo por todos estos otros. Tenemos 40 aquí también, así que voy a seleccionar estos para moverlos hacia abajo hasta que estén a los 40. Como pueden ver, tenemos 40 en todas partes. Mueve esto hacia abajo para ser un 40 como así. Entonces voy a seleccionar todo. Asegúrate de que todo sea 40. Por lo que 1234 y finalmente movió a estos cuarenta a la baja. Bueno, así 1234 Voy a traer esto hasta que se reúna con el borde inferior. Marca simplemente llamó a mi tecla de turno hasta que se alinee. Por lo que ahora todo está alineado y mirando adecuadamente. Algo violento que hacer es simplemente plantear esto porque no necesitamos que llame hasta abajo. Pero es agradable hacerlo para que pueda ampliar su puerto hasta que cumpla con sus requisitos, y luego simplemente puede volver a subirlo. Entonces eso es básicamente todo. Hemos creado esta página para ser responsive. Empezamos con grande que se detiene que pequeño que detiene talento medio, pequeños cajeros y luego finalmente, teléfonos. Si un salto justo aquí, excluye mi gran para que puedas ver todo. Como puede ver, diseño se adapta muy bien a estos diferentes tamaños de pantalla. Todo funciona como debería. Y ahora te toca entregar estos desarrolladores de activos para que puedan desarrollar este sitio web , y lo impugnan para ver si todo funciona correctamente. Eso es lo que vamos a hacer en la siguiente sección fuera del discurso. Vamos a ir tamaño por tamaño, y vamos a extraer todos estos activos. Entonces vas a enviar todos estos activos a los desarrolladores y los desarrolladores los van a probar y ver si todo funciona correctamente y como debería antes de que se ponga en línea para estar en vivo para que la gente lo vea en todas partes del mundo. Entonces nos vemos en la siguiente sección del curso 16. Estructura de la carpeta: ahora que has terminado de diseñar y terminar creativos tus diseños responsive en X'd. Ahora llega el momento del dedo del pie Exporta tus activos para desarrolladores, y como diseñador tienes que exportar esos activos para que los desarrolladores entiendan dónde va todo en diferentes tamaños y donde todo está posicionado así que dedo del pie exportar sus activos en X'd. Es extremadamente sencillo. Pero antes de llegar a exportar en diferentes activos para son diferentes tamaños, que crear una estructura de carpetas reconocible y lógica. Entonces permítanme mostrarles rápidamente cómo hacer eso. Aquí tengo una agencia de diseño de estudio, que es solo una carpeta vacía, y dentro de esta carpeta vacía, vamos a crear diferentes carpetas para diferentes tamaños. Entonces si un salto de nuevo a los huevos D y acercar un poco, puedes hacer doble clic aquí. Golpea el control C para copiar el nombre de este nuestro puerto, y puedes saltar a tu carpeta click derecho y crear Fuller y simplemente basar el nombre de esa carpeta dentro. Es por eso que los desarrolladores podrán entender rápidamente si abren este desfile de huevos, que son puerto. ¿ Estás tratandode exportar y para lo cual nuestro puerto se asignan estos activos dedo del pie para que puedas seguir adelante y hacer esto por todos estos otros puertos para que yo pueda controlar, ver, saltar atrás. Voy a crear un nuevo fuller, y va a ser mucho más fácil para ellos entender cuáles son porque tienen estas múltiples imágenes de múltiples tamaños para tratar. Por lo que es mucho más fácil para ellos entender si ya estás preparado. Todo para ellos y exportar desde X, dijo De Aza, es extremadamente sencillo y fácil de hacer, y vamos a llegar a eso en el siguiente video. Pero para este video, solo quiero mostrarte cómo puedes preparar tu estructura de archivos. Entonces aquí está nuestra estructura básica de archivos, y dentro de ella, vamos a colocar todos estos diferentes activos, los cuales te van a mostrar cómo puedes exportarlos fácilmente en el siguiente video. Y vamos a hablar de diferentes formatos de archivo y en qué formatos de archivo vas a exportar. Qué archivos porque es extremadamente importante entender esos formatos de archivo, sobre todo cuando estás exportando tus activos para desarrolladores. Entonces vamos a cubrir eso en el siguiente video, pero al final, este video. Yo solo quiero decirles que afuera de todas estas carpetas se puede guardar esta profanación de huevos principales . Entonces si desarrollador tiene múltiples proyectos en los que están trabajando al mismo tiempo, pueden saltar rápidamente a ese fuller abrir ese desfile X. Pueden ver eso. De acuerdo, este es ese proyecto y simplemente pueden saltar dentro de cada una de estas carpetas diferentes que acabas de crear y luego tomar los activos de esas carpetas. Pero también se puede hacer es crear un archivo de leerme pdf o leerme archivo de texto. Realmente no importa dónde simplemente puedes enumerar dónde conseguiste tus teléfonos, o puedes enviarles teléfonos directamente, mejor aún para que funcionen con los mismos teléfonos dentro del código. También, si tomaba imágenes de diferentes fuentes en línea, por ejemplo, usamos en Splash para este curso en particular. Por ejemplo, estas tres imágenes Puedes apuntarlas directamente a los enlaces para estas tres imágenes, o simplemente puedes enviarles un enlace al sitio web on Splash donde puedan obtener esas imágenes y descargarlas en lo más alto posible resolución. Entonces por eso la estructura de carpetas realmente sí importa, sobre todo si tienes diferentes iconos que estabas usando. Por ejemplo, tienes diferentes colecciones fuera de los iconos, entonces las vas a colocar todas aquí. Si tienes recurso múltiple es que quieres enviar encima todas estas carpetas diferentes , entonces realmente te recomiendo que crees una carpeta separada, por ejemplo, activos y luego dentro de esa carpeta, coloca tus imágenes, coloca tus iconos, coloca diferentes ilustraciones. Sea cual sea tu proyecto que consiste, entonces un realmente recomendado que crees esa carpeta y pongas todos esos activos diferentes dentro de esa carpeta, como decían, va a ser mucho más fácil para los desarrolladores entender a dónde va todo, dónde se encuentra todo. Y no te van a molestar con múltiples preguntas. Después de que termines el diseño para este proyecto, donde todo está ubicado porque vas a preparar todo en avanzado y enviarlos todos fuera de esos diferentes archivos 17. Exportación de recursos: Sé que creamos nuestra estructura de carpetas. Llega el momento de exportar nuestros archivos, y si acerco un poco más, haga clic en cualquiera de estos son tableros y golpea el control E o comandando en un Mac. Se puede ver que este estilo de aparece ahora. Aquí puedes seleccionar el formato que puedes elegir entre PNG, SVG, PDF y J Pick, y difieren bastante. Por lo que PNG es básicamente una imagen sin fondo. Entonces, por ejemplo, si estás cortando algunas imágenes de personas que dicen o desactivan objeto e incluirlas en tus diseños, ahí es donde P y G es útil. Siguiente arriba SPG es un formato de archivo vectorial, y es genial porque contiene frío en su interior. Y también es muy útil para los desarrolladores porque pueden tomar ese código, pueden incluirlo en su propio abrigo. Pueden adaptar, por ejemplo, los tamaños fuera de algunas de las ilustraciones de iconos donde más se utiliza este formato de archivo SVG, y fácilmente no pueden integrarse en la cotización. Se puede ver para cada uno de estos hay diferentes ajustes, y vamos a cubrir eso en un segundo. A continuación se presenta un pdf, que es un archivo PDF básico. Y es genial. Por ejemplo, si estás exportando breves de diseño que creaste dentro, será fácil. O si tienes algunos otros documentos de texto con, por ejemplo, algunas imágenes. Digamos que más pizarras de humor o algo así, y se puede exportar eso como un PDF. Y finalmente tenemos el Jay Peak, que básicamente es solo una imagen regular. Ahora pasemos rápidamente por algunas de estas opciones. Por lo que para P y G, puedes elegir diseño, y se va a exportar el dedo del pie. Tal como es, se puede hacer clic en la Web cuando se puede ver que exporta activos seleccionados como una X y dos x, lo que significa en tamaño original, que es una X y dos X, que se duplica su sitio original. Excepto que tenemos IOS. Como puedes ver, los está exportando en una x dos x y tres x, lo cual es genial si estás diseñando, por ejemplo, por ejemplo, teléfono más pequeño y un tamaño de iPhone más pequeño. Digamos iPhone ocho y quieres exportar dedo del pie. Encontré 10 11 o Max o algo así. Ahí es donde estos tamaños vienen de mano, y finalmente tenemos Android, que es otra vez diferente a todos estos porque los exporta en thes medidas, que es M. D P I. Y se puede ver al 75% 100 % y va todo el camino hasta 400%. Y tiene todas estas abreviaturas diferentes porcentaje de dedo del pie al que se exporta y todo esto básicamente significa igual que para Iris, pero exporta a una x dos x tres x para Android. Debido a que hay muchos otros tamaños fuera de las pantallas, se pueden ver todos estos diferentes porcentajes para poder elegirlos y se puede ver que está diseñado, por ejemplo, al 100% esta aplicación de Android, y luego puedes exportarlo en todos estos otros tamaños. Entonces básicamente, eso es todo para formatos de archivo para la SPG. Te recomiendo que no cambies nada a menos que veas con tus desarrolladores si quieren algo personalizado de estos, pero normalmente van a personalizar eso dentro fuera de la cancha. Entonces vamos a usar SVG, y vamos a usar el diseño PNG porque no voy a usar web porque esto es si no tienes un diseño responsive como lo hacemos aquí mismo, esto básicamente va a exportar eso en tamaño original y doble el tamaño original. Entonces no lo recomiendo porque aún tenemos todos estos tamaños diferentes que diseñamos originalmente. Entonces, ¿por qué elegir esto? Entonces solo usemos el diseño y para la carpeta, voy a dar click justo aquí, y voy a ir a Mr the Agency y empezar con el tamaño más grande y dar clic en seleccionar carpeta y me voy a exportar solo por salida para recordar donde yo lo exportó. Y si salto dentro de esa carpeta, se podía ver que se exportaba a todo el diseño. Te recomiendo que hagas esto porque entonces los desarrolladores pueden echar un vistazo fácilmente sobre esta imagen y ver los cambios que hayas realizado o algunas posiciones, por ejemplo, es algo así. Por supuesto que les vas a enviar el archivo original, pero esto es sólo que el dedo del pie se los comió en su proceso de desarrollo. A continuación, cuando se trata de exportar, hay que seleccionar todas estas diferentes opciones en todas estas diferentes capas. Entonces voy a seleccionar mi panel de capas justo aquí y dentro de mi siesta. Yo solo quiero exportar mi logo y mi botón demo, pero en su lugar fuera de texto. Yo lo voy a ocultar y voy a seleccionar carpetas Así logo y demo entre y me voy toe hit control e zumo bong hit exportaciones en eso seguido que acaba de seleccionar y me voy dedo del pie También seleccionar mi logo que controlaría, comer y exportado es SVG porque quiero que mi dedo del desarrollador tenga esa opción. Si quieren incluir en frío más adelante, pueden hacer eso también. Voy a traer rápidamente de vuelta el texto a mi botón demo y una nota lateral rápida porque cometí un error. Llamé a todos estos botones BT y puedes nombrarlos así, así que simplemente haz doble clic aquí. Controlaría semilla hit control V y esto va a ser demo de oro Bateer. Y luego simplemente puedes seleccionar esa capa. Controlaría E y luego exportaría esa capa como un botón. Pero porque, como dije, cometí el error. Voy a esconderlos todos de los botones y luego traerlos de vuelta para tenerlos en el diseño original Next up with export. Ah, héroe, voy a empezar con ilustraciones. Voy a seleccionarlos a ambos pero por separado es que lo puedes ver controlar e y exportarlos como svg porque una vez más, quiero mi desarrollador toe Tener esa opción toe exportarlos así. A continuación tenemos todas estas formas diferentes. Voy a seleccionarlos, Hit control, comer y voy a exportarlos s PNG's porque son básicamente formas semitransparentes y los desarrolladores podrán incluirlos así. A continuación tenemos héroe BG moak it controlado exportó como ser G porque no necesitamos exportarlo como SPG porque es simplemente un fondo de color. Si lo tienes como radiante, puedes hablar con tus desarrolladores Si lo prefieren, les mandas svg porque entonces pueden adaptar el Grady y un poco dentro de CSS. Pero si no quieren condonar, simplemente envíalos a estar en archivo G en su lugar. A continuación, tenemos botones. Por lo que una vez más, voy a ocultar el texto por mi error anterior. Voy a seleccionar Dergarabedian y morbilidad y golpe control e exportarlos s PNG hit export. Y como puedes ver, ya existe un bot demo n. Entonces porque ese es este botón aquí mismo, simplemente voy a seleccionar más entre el control de calor E y la exportación. Eso s P y G. Voy a esconder todo esto. Pero antes de hacerlo, simplemente voy a traer al texto de vuelta así. Simplemente haga clic en este globo ocular podría Va a volver y a continuación tenemos todos estos iconos diferentes ahora, porque estos no son clientes de mis clientes. Simplemente voy a elegir control e exportarlos s PNG's. Tan solo para que el desarrollador sepa cuáles son los tamaños de los logotipos que eventualmente van a incluir dentro. Cuando estés trabajando en un diseño, asegúrate de que dedo del pie siempre pregunte a tu cliente si tienen clientes originales fuera, hay para que puedas incluirlos en lugar de estos Normal yo era. Pero si no te gusta mi cliente en este caso, entonces voy a incluir a estos locales predeterminados. Y luego los desarrolladores pueden cambiarlo más tarde porque es simplemente una imagen PNG. Entonces básicamente una imagen de la misma, el fondo transparente. Entonces lo van a incluir así. La administración una vez más golpeó control e. voy a exportar eso como svg hit export y tenemos Demo VT en el que no vamos a cambiar y vamos a mantenerlo como está. Pero porque si no me gusta aquí mismo, trae mi maquetación, puedes ver que es a tres columnas blancas, y estas son a la esposa de Khan, que puedas exportarlo con un nombre diferente. Por lo que Demo Bt en tres, por ejemplo, para tres llame aún mejor. Al igual que tal vez podría incluir esto como para que los desarrolladores sepan que son tres columnas blancas. Voy a ocultar el texto hit control E export Eso s P y G. Así traigo este texto de vuelta. Y ahora tenemos básicamente todos los botones de esta página excepto este encendido. Lo voy a incluir un poco más tarde. No, déjame esconderme rápidamente. Hazlo genial porque ya no lo necesitamos. Y ahora, porque fuera de todas estas líneas voy a seleccionar este texto y elegir este divisor para que sea divisor. Tres llamada, por ejemplo. Al igual que su control e export que s p y G Y para estos otros divisores, simplemente voy a dejarlos como están. Entonces solo divisor pequeño y no tienes que exportarlos todos. Simplemente puedes exportar un control de calor E, S, P y G. Y ahora pasemos a los iconos. Voy a mantener mi tecla de control o comando y simplemente seleccionar todos nuestros iconos. Control de calor E. Asegúrate de seleccionar SVG hit export porque una vez más considero realmente importante. Toby exportó en la más alta calidad posible porque sólo se puede imaginar eso en pantallas realmente pequeñas. Estos ciclos realmente funcionan bien, porque, como se puede ver al zoom completo, no pierde calidad en absoluto porque es un icono basado en factores. Excepto pasemos a esto. Y debido a que tenemos todos estos elementos dentro de nuestra sección de héroes, no voy a exportarlos porque a veces los desarrolladores quieren usar algo como J Query para animar todas estas formas de fondo, y realmente depende ellos y el cliente cómo quieren encontrar un producto para verse una vez que se lo llame y se publique. Pero en nuestro caso, no los voy a exportar porque, como decían, son exactamente las mismas formas que estas. Tienes dos opciones simplemente puedes seleccionar thes dos. Puedes agruparlos hit control E y exportar toda esta imagen como PNG si quieres. Y si no lo haces, simplemente puedes tienda de precios de exportación. BG porque fuera de las restricciones. Por lo que el desarrollador sabe a qué distancia está este texto del set, por ejemplo, qué distancia están estas cajas de los cirujanos en para que conozcan todas esas medidas. Pero por lo demás no voy a volver a exportar todas estas formas diferentes. Porque, como dijo, ya tenemos eso en nuestra carpeta para que controlara Ito precios de exportación PG exportado. Preguntado Lo siento, PNG. Y voy a seleccionar una de estas porque todas tienen exactamente el mismo fondo, pero aún mejor porque incluimos los nombres. Por lo que precio tres BG precio a ser G precio uno b j Simplemente puedes seleccionarlo. Él controlaría exportarlos s PNG's. Y entonces lo que voy a hacer es exportar uno de estos botones. Entonces botón de compra, voy a ocultar mi texto porque, como pueden ver, hay otro aquí. No cambié el nombre de todas y cada una de las capas como un disparo para que pudiera controlar exportado s PNG y ahora, básicamente, desarrollador tiene todo apagado estos diferentes botones. Entonces es más voy a hacer lo mismo que lo hizo con clientes anteriores. Porque, como pueden ver, sí los nombré como un debería, por lo que se puede ver local 567 Voy a golpear control E exportación que la señorita Bong una vez más. Tan sólo para que conozcan la posición fuera de estos logotipos respecto a este texto. Veamos y finalmente exporte nuestras flechas con control. E exportarlos como SVG es porque es un vector basado. No puedo. Voy a pasar a la promoción. Y para este, no voy a ir a editar esto, Martin. No lo voy a exportar. No voy a exportar mis formas. Todo lo que quiero hacer es simplemente exportar mi problema. BG it te controlan Exportación. Eso s PNG golpeó exportación. Y ahora pasemos a la cuadra. Voy a seleccionar mis imágenes y mis avatares. Por eso llamé como así para que pudieras ver imagen unos a otros y así sucesivamente. Golpea control E exportación a perder ser do y sellar botón. Puedes exportarlos o no puedes dejarlo vacío porque como puedes ver. Básicamente, estás exportando estas formas. Por lo general, no se exportan botones con texto en él porque si los desarrolladores quieren cambiar algo por la línea, no pueden cambiar el texto porque está horneado dentro. Es básicamente una imagen, así que la vamos a dejar como está. A continuación, estamos moviendo dedo del pie o finalmente, y no voy a exportar logo porque ya lo hice. Voy a exportar iconos de redes sociales tan seleccionados, así que controla E. Asegúrate de que estén en SPG Export. Y finalmente voy a elegir mi pie. RBG golpeó el control y se fue a exportar eso como G. Y eso es básicamente todo para este tamaño. Lo que tienes que hacer ahora es simplemente seguir adelante. Les dijimos a estos otros tamaños me tomó algo así como 10 o 12 minutos para éste porque yo estaba hablando todo el tiempo. Pero si no lo haces y si sigues haciendo esto varias veces, puedes llegar realmente rápido. Y si estás haciendo todo correctamente después de cierto tiempo, puedes hacerlo en como dos o tres minutos. Entonces vas a necesitar algo así como 10 o 15 minutos para todos ellos. Y si estás trabajando en proyectos realmente enormes. Entonces, por ejemplo, digamos que estás haciendo un diseño de APP móvil que ha sufrido, digamos, 200 pantallas. Debes dedicar un día dedo del pie exportar todos estos diferentes archivos. Y por último, una cosa más que quiero mencionar es que normalmente necesitas una guía de estilo, y te expliqué qué ideas crudas en mi curso de diseño Web. Entonces si te interesa remolcar, sumergirte en profundidad sobre los métodos de diseño sobre las tablas de humor, diagramas de flujo y así sucesivamente, puedes revisar ese curso. Pero básicamente es una especie de documento aquí o aquí mismo. Donde quiera ponerlo dentro de ella será fácil. Vamos a seleccionar y mover todos los botones, todo el texto diferente para que básicamente puedas saltar aquí y simplemente seleccionar todos estos circuitos colores si utilizas sombras de fondo si utilizas ilustraciones. Si usas estilos de carácter, vas a poner todo dentro. Y por último, si usas componentes como puedes ver, ya los acabo de crear botón como mi componente solo para mostrarte cómo funciona. Pero básicamente vas a poner todo dentro y vas a mandar este archivo final como trabajo. Archivo TXT. Se puede exportar ese archivo s pdf y básicamente dárselo a los desarrolladores para que puedan saber la línea lo que usaste en este proyecto. También es útil para ti más adelante cuando digas este proyecto, si el cliente vuelve a ti y quieres algunos cambios adicionales, entonces simplemente tienes ese proyecto y puedes elegir los activos que incluyste dentro de esa guía de estilo, simplemente puedes copiarlos y pegarlos en trabajos futuros. Entonces básicamente los chicos de inicio son realmente poderosos. A real recomiendo que los crees. Pero yo no creé uno para este proyecto porque básicamente, solo tenemos una página, y realmente no es necesario cuando estás creando landing pages, por ejemplo, para tus clientes, que esta básicamente lo es. Pero es realmente necesario una vez que consigues crear unas cuantas páginas diferentes. Entonces vamos a acercarnos un poco más y se puede ver que aquí tenemos cinco elementos, así como conseguir una demo. A lo mejor hay un contacto con nosotros tal vez Santa deuda. Entonces en esos casos, realmente te recomiendo que incluyas una guía de estilo. Bonito, Grande, y simplemente puedes saltar justo aquí, y puedes seleccionar, Digamos, 1920. Patane, 80 se fue a posicionarlo aquí mismo. Simplemente cambia el nombre de su guía de estilo, y luego puedes expandirla dedo del pie como quieras, y simplemente copiar y pegar tus elementos dentro. No tienes que hacer esto para todos y cada uno de los tamaños fuera de tu diseño. Solo tienes que hacerlo por una talla, y eso realmente te recomendó que lo hagas para decidir, porque es visible de una mejor manera que todas estas otras porque es más grande en primer lugar, así que básicamente eso es todo. Simplemente tienes que seguir adelante y exportar todos estos tamaños diferentes para desarrolladores porque una vez más necesitan conocer algunas diferencias en tu diseño. Como pueden ver, aquí mismo, tenemos algún espacio entre nuestra ilustración y nuestro texto. Aquí no tenemos ese espacio. Si nos movemos queremos. Esto está en la parte inferior, por lo que tienen que conocer todos estos márgenes diferentes y bateo y así sucesivamente. Por lo que tienes exportación de remolque en absoluto fuera de esos diferentes tamaños. También tienes una opción de compartir, que está aquí mismo. Entonces si estás compartiendo con ellos, simplemente asegúrate de compartir para el desarrollo. De esa manera van a conseguir ese tipo de estilo digital que X T va a generar. Y simplemente pueden expe esperados así y a Cassie, las diferentes cosas malas y márgenes entre todos estos diferentes elementos. Entonces esa es una opción fantástica. Para tener dentro fuera. Será X'd en el siguiente video. Vamos a hablar de enviar los archivos a desarrolladores y clientes, así que ya veré ahí. 18. Enviar los archivos: Por último, esta es la última etapa fuera de nuestro proyecto. Necesitamos enviar estos archivos a nuestros desarrolladores y a nuestros clientes. Y para hacer eso ya te mostraba en videos anteriores. Esta es nuestra estructura de archivos. Entonces aquí tenemos nuestras carpetas y todos fuera de nuestros archivos están dentro porque me adelanté y exporté todo. Por lo que no te molesto con seleccionar cada capa de todos nuestros puertos. Entonces básicamente, en lo que tienes que hacer, ya te expliqué que en el video anterior tienes que seleccionarlos todos, exportarlos todos a sus carpetas dedicadas para que los desarrolladores puedan navegar fácilmente por él. Además, una cosa final que puedes desarrollar entregar a tus desarrolladores son guías de estilo. Y no cubrí guías de estilo en las partituras porque, como dije, ya tengo un curso de diseño Web donde hace realmente en profundidad sobre todos esos detalles sobre chico estilo de marco de alambre, sus diagramas de flujo y así sucesivamente. Entonces si te interesa, puedes revisar ese curso. Pero para el discurso, simplemente no quiero crear guías de estilo porque sólo tenemos una página en este momento. Si tenemos múltiples páginas fuera de curso guía de estilo es necesaria para entregar a tus clientes y desarrolladores para que puedan abrir eso rápidamente. En el interior. Fuera de este huevos desfilan y simplemente copian y pegan elementos en su cotización o úsalos y cópialos donde quieran. También para las guías de estilo, hay que ir y crear estos componentes separados. Entonces como puedes ver, solo tenemos botón demo aquí como componente para los botones. Pero para los cortes Sal, hay que crear todos estos diferentes componentes para diferentes tamaños de Barton para que puedan usarlos más adelante. O si estás de acuerdo con el cliente para crear aún más páginas para este proyecto en particular, entonces simplemente puedes usar esos componentes y simplemente copiarlos y pegarlos en tu trabajo. Entonces eso es básicamente todo para la parte de diseño para la parte receptiva. Y ahora esta parte final es entregar todo a los desarrolladores. Entonces aquí está nuestro original de los huevos de adobe desfile. Entonces ese es básicamente este archivo. Simplemente lo guardas en tu computadora para que puedas ver Cendant a tus clientes y desarrolladores. Y finalmente tenemos. Este archivo, que se llama Project Resource, es sólo un archivo de texto básico, y eso es lo que dije. Siempre incluye estos archivos para que puedas minimizar la cantidad de tiempo que vas a pasar conversando con los desarrolladores y conseguir a tus clientes después de que el proyecto haya terminado. Entonces básicamente estás respondiendo todas las preguntas por ellos antes de que incluso te las hagan. Entonces aquí tenemos simplemente enlaces del dedo del pie de las fuentes de Google y simplemente explicar que estos teléfonos libres de aire y cuando el clic en estos enlaces, pueden acceder a esos fondos que son gratuitos, y pueden utilizarlos tanto para uso personal como comercial si quieren usar estos teléfonos que usaste en tus diseños, porque a veces los clientes cambian de opinión a muy menos segundos, y quieren usar un frente diferente. Es Eso está bien, también, porque entonces pueden hablar con los desarrolladores y los desarrolladores pueden cambiar todo en frío muy fácilmente. Pueden adaptarlo dentro del CSS, y pueden incluir un fondo completamente diferente, lo que va a cambiar el off the website. Además, tenemos imágenes y ustedes pueden, como dije, enviarles imágenes separadas. Pero porque exportamos todas las imágenes en todas fuera de estos diferentes tamaños de archivo para que puedas ver estas imágenes para bloques, por ejemplo, y puedes enviarles eso. Pero si lo deseas, simplemente puedes enviarles un enlace a la página web. Muy consiguió imágenes de. Pero en la mayoría de los casos, los clientes van a usar sus propias imágenes de todos modos, por lo que estas son solo imágenes de los placeholders, pero aun así hay que enviarles esas imágenes por si quieren usar algunas de esas imágenes en su producto final. Entonces básicamente, por eso estamos enviando este enlace para que puedan acceder fácilmente a él. También puedes copiar y pegar enlaces a imágenes individuales si quieres, y la realmente te recomiendo que hagas eso para proyectos más pequeños. Pero para proyectos más grandes, puedes crear colecciones, por ejemplo, on on splish directamente, y simplemente puedes copiar y pegar el enlace a esa colección en particular. Y tienen a su disposición imágenes de toda esa colección para que puedan utilizarlas en el máximo tamaño posible donde y como quieran. Por último, tenemos iconos, y en este proyecto en particular utilizamos iconos materiales que una vez más son de Google on icons , que son libres de usar tanto en proyectos personales como comerciales. Si estás usando iconos de pago, es realmente importante que resaltes eso al cliente. Si el cliente está deseando pagar por esos iconos, o si estás usando fondos premium de imágenes premium, tienes que indicar todo eso en avanzado. Para que ese cliente pueda saber si quiere pagar algo así, porque a veces su presupuesto no cubre eso. Entonces una vez que entregues todo eso y no tienes que entregar esto como para que puedas convertir a pdf. Si eso es algo que quieres, finalmente puedes seleccionarlos todos y en Windows. Así que simplemente ve click derecho y simplemente ve a mi WinZip y agrega a la agencia de diseño de estudio Zip. Y quiero crear un archivo zip para este proyecto en particular porque es mucho más fácil enviar archivos ZIP, sobre todo vía correo electrónico. Podrás enviarlos vía holgura eran diferentes chats. Por lo que es realmente importante que puedas condensar todos estos archivos en el menor tamaño posible . Entonces si traigo esta ventana porque tengo dos monitores en mi computadora, puedes ver que no decía tanto espacio porque este proyecto realmente no toma mucho , sobre todo si consideras que todos estos cambios de diseño que hicimos todos estos diferentes activos solo están tomando algo así como 2.5 megabytes, por lo que se puede ver que todo está tomando alrededor de cuatro megabytes. Y es por eso que realmente adoro a Adobe X'd y a todos estos otros Softwares les gusta. Entonces, por ejemplo, fig, MMA y sketch, pero boceto no tanto, porque realmente no comprime todo eso bien, como el figment y el próximo D hacer. Por ejemplo, debido a que fuera de estos tamaños de archivo más pequeños para que puedas ver los menos de cuatro megabytes de tamaño, realmente puedes enviar fácilmente todo el proyecto a nuestros clientes y a los desarrolladores. Van a descargarlo fácilmente y desempaquetarlo en sus computadoras y usarlo tal como está. Por lo que realmente te recomiendo empacar todos tus archivos de proyecto dentro de una carpeta Zip porque va a ser mucho más fácil para ti compartir eso con tus desarrolladores y clientes. Y va a ser mucho más fácil almacenar ese tipo de archivo para ti porque es posible que quieras mantenerlo en tu computadora para futuras referencias. Porque, por ejemplo, digamos que este proyecto se ha puesto en marcha mañana y el cliente quiere algunas nuevas páginas adicionales en seis meses a partir de ahora. Simplemente guardas todos esos archivos originales. Así que digamos este proyecto de agencia de diseño de estudio en tu computadora para que puedas saltar fácilmente de nuevo a él y abrir el archivo original y simplemente continuar muy dejado la hora anterior. Por lo que es realmente importante que ahorres tanto espacio como sea posible debido al compartir con los clientes y desarrolladores, y sobre todo si quieres mantener estos archivos en tu computadora a largo plazo. Y realmente sí lo recomiendo porque todavía hasta el día de hoy tengo clientes regresando a mí, pero que los tenía de, por ejemplo, hace cinco años o seis años, queriendo que yo creara algunos cambios adicionales al diseño original, o tal vez un diseño completo de tres. Por lo que mantener los archivos originales en tu computadora es realmente importante, sobre todo para estos huevos. deshace porque, como puedes ver, son realmente pequeñas y puedes mantener miles y miles de proyectos diferentes y diferentes archivos en tu computadora, y realmente no va a ocupar demasiado espacio 19. Gracias: gracias por ver el curso. De verdad espero que hayas encontrado valor en ello. Solo recuerda, cuando empieces a diseñar para responsive, asegúrate de dedo del pie. Siempre pregúntale a los desarrolladores qué están usando antes de que empieces a diseñar. Para que puedas saber de antemano qué técnicas vas a usar una vez que obtienes la parte sensible del dedo del pie de tu diseño. Entonces, una vez más, realmente no importa si tienes que crear tus soluciones personalizadas o si están creando las soluciones para ti o si estás usando soluciones como bootstrap o angler que alguien más ya creó. Además, asegúrate de que cuando estés exportando tus diseños al final del proyecto para exportar todos los tamaños para que los desarrolladores puedan acceder a ellos de una vez, asegúrate de separarlos en carpetas como show que en el curso y que vas para eliminar esa retroalimentación adicional de los desarrolladores y de los clientes. Vas a terminar el trabajo más rápido. Vas a entregar los expedientes como deben ser entregados. Y simplemente no va a haber fricción entre ustedes los desarrolladores y los clientes. Gracias una vez más por ver el curso. Ahora adelante y crea esos diseños impresionantes y haz que respondan. Gracias 20. Canal de YouTube para obtener más contenido: Oye, aquí el diseñador Alex. Y yo sólo quería decir un rápido agradecimiento. Gracias por tomar el discurso, y de verdad espero que te haya sacado tanto valor como sea posible si quieres consultar más contenido. Hace poco lanzé mi canal de YouTube, donde exploré algunos temas que podrían interesar a diseñadores de freelancers toe técnicas de ingresos pasivos de diseño Web, diseño APP. Diseñas diseño UX. Entonces si te interesa alguno de esos temas, dirígete a mi canal de YouTube, vincula hacia abajo en el pdf, y simplemente puedes hacer clic ahí y te llevará a mi canal de YouTube. Si te gusta ese contenido, asegúrate de suscribirte y asegúrate de seguir, porque voy a tratar de ser realmente regular con ese canal de YouTube y subir tanto contenido como sea posible. Entonces gracias una vez más por tomar mi curso, y de verdad espero verte en mi canal Digger 21. Únete a mi grupo de Facebook gratuito: Oye, diseñadora, realmente espero que hayas disfrutado del curso, y que sacaras tanto valor como sea posible de él. Si quieres recibir aún más valor de mi parte y de la comunidad del diseño, empecé un grupo de Facebook. Donde puedes unirte es solo un grupo de Facebook para mis alumnos solo para que puedas unirte haciendo clic en el enlace abajo orden. Nate fuera de curso es una cuenta de Facebook, y es un grupo gratuito al que unirse. El grupo se forma con el fin de brindarte retroalimentación adicional para que puedas adjuntar tus diseños siguiendo este curso y usando ejemplos de este curso o de cualquier otro fuera de mis cursos. O si tienes tus propios ejemplos. Off diseño funciona desde el pasado desde el presente. Puedes subir esos trabajos a Facebook Group y luego recibir comentarios ya sea para mí o de otros miembros del diseño. También te animo si tienes puestos de trabajo disponibles para compartirlos en ese grupo para que todos puedan beneficiarse de ese grupo. Una vez más, el grupo es libre. Es fácil unirse. Simplemente haga clic en el enlace en el pdf, y realmente espero ver a tantos de ustedes como sea posible en ese grupo solo para compartir nuestras experiencias como diseñadores, e intentaré publicar algún video adicional, algunos consejos adicionales y técnicas en ese grupo de Facebook. Pero por ahora, apenas estamos empezando. Simplemente vamos a formar su, y realmente los animo a que se unan y compartan allí su mejor trabajo. Para inspirar a otros diseñadores o dedo del pie pedir retroalimentación adicional. Tan solo asegúrate de que por favor, cuando estés pidiendo retroalimentación, pide cosas específicas. No sólo preguntes. ¿ Qué opinas de este diseño? Porque nadie va a responder a eso. O si lo hacen, están en lo de Lee. Te van a decir ¿Se ve bien o no se ve bien. Asegúrate de pedir comentarios específicos sobre tus diseños. Por ejemplo, haz como esta combinación de colores. ¿ Crees que debería usar un frente diferente? ¿ Crees que estas imágenes corresponden bien con el color de fondo, por ejemplo, cosas así, Así que asegúrate de pedir retroalimentación específica cuando tus diseños, porque va a ser mucho más fácil para mí y para otros diseñadores de ese grupo para darte son retroalimentación específica que puedes mejorar mucho más rápido, entonces solo preguntando qué? Todo fuera de este diseño. Entonces gracias una vez más por tomar mi curso, y de verdad espero verte a la vista fuera de mi grupo de Facebook Digger.