Diseño de composiciones creativas para diseñadores de web y UI ► No más diseños aburridos

1. ¿Qué cubrirá este curso?: el diseño es como una historia. Entonces, siempre que estés contando una historia a tus usuarios a través del diseño, tu diseño va a decidir cómo se va a desplegar esta historia. Cómo te vas del dedo del pie. Cuéntale al usuario la primera parte de la historia, la segunda parte de la historia y luego los giros o parte interesante de la historia o características fuera de tu producto Así que tu diseño se va desplegando de una manera creativa muy agradable. Si tu diseño en recta por lo que el diseño de capas es lo más importante, parte de tu aplicación móvil, diseña tu sitio web, tu diseño de página de destino, lo que sea que estés diseñando layout va a jugar un papel vital a la hora de decidir cómo se va a contar tu historia a tus usuarios. Entonces este curso te va a ayudar a entender y poner algún jarrón creativo fuera de desplegar esa historia y cómo te vas del dedo del pie, uh , diseñar diseños diferentes, bondadosos y cómo diferentes diseños es creativo que van para ayudarte a destacar entre la multitud. Por lo que otros diseñadores podrían estar haciendo diseños simples. Cuatro columnas o cuatro cajas diferentes. Te voy a mostrar muchas técnicas que te van a ayudar a salir de esa caja y crear outs creativamente. Vamos a ver un montón de diferentes, básicamente, outs. Vamos a entender diferentes columnas, rejillas, sistemas de guía, diferentes laboratorios móviles donde puedes aplicar esas ideas que te voy a dar algunos ejercicios para dominar estas habilidades. Entonces si estás teniendo dificultades como yo cuando empecé, diseñó la parte más difícil para mí diseño de maquetación WAAS. Entonces seguí analizando diferentes diseños y me ordeno, ya sabes, entiendo diferentes técnicas, y las voy a explicar de manera sencilla para que puedas implementar estas técnicas en el diseño de aplicaciones móviles te diseño y diseño de páginas web. Por lo que espero que vayan a disfrutar de las anotaciones. Si tienes alguna pregunta siempre me puedes hacer, y espero verte pronto dentro de las escuelas 2. Conceptos básicos del diseño de la composición: Empecemos con algunos pequeños conceptos básicos. Ahora, la primera pregunta, cada vez que vas a iniciar tu diseño, debes preguntar es ¿a qué propósito sirve este layout? ¿ Por qué estás creando este layout? ¿ Cuál es la información que está transmitiendo a su usuario? Por lo que estas en realidad están fuera de las pocas preguntas con las que deberías empezar. Si tu usuario es incapaz de entender lo que estás tratando de mostrarles o lo que estás intentando, ya sabes, transmitirlos que tu entonces tu diseño es un fallido. Ahora he visto a muchos diseñadores que crean diseños muy creativos, y muestran ah muchos estilos diferentes en los diseños. Pero el problema con sus diseños es que no es utilizable. Entonces lo primero es que debes entender estamos creando un layout para mostrar la información o las imágenes o nuestro contenido o nuestro mensaje a nuestros usuarios de una manera significativa y digerible. Entonces este es el glaseado. En segundo lugar, necesitas crear algunos en solo puntos en tu diseño, por lo que necesitas dedo del pie, tener algo que les muestre dedo del pie. Explora un poco más este diseño. De acuerdo, entonces estas son las primeras preguntas que siempre debes hacer a tus usuarios. Ahora pasemos a lo siguiente, que también es importante que es una prioridad. Ahora. La segunda pregunta que te vas a hacer usuarios o tus clientes o tu negocio, o que la persona para la que estás diseñando es cuál es la parte más importante de este diseño . Ahora esto es, Ah, pregunta, que creo que muchos diseñadores echan de menos lo que tus usuarios van a ver por primera vez en tu diseño. Los asuntos son mucho. Estas son en realidad primeras impresiones y uso El usuario se va dedo del pie en base a sus decisiones en sus primeras impresiones o la primera vez que información que van a ver. ¿ Cómo empezarás tu historia de diseño? Cómo va la historia del dedo del pie se despliega para que puedas ver cuando ves una película o ves una película. El 1er 5 o 10 o 15 minutos van del dedo del pie. Crea algún interés en la película, por lo que van a mostrar a veces algo en el futuro, y luego van a volver y mostrar eso una hora más tarde o una hora antes de eso, o cosas así. Por lo que vas a crear algún interés en tu estudio y cómo vas dedo del pie desplegarlo para que pudieras haber escuchado nuestro término que se llama Full y Design four es en realidad la primera instancia fuera de su diseño en la ventana de los espectadores. Por ejemplo, si están viendo con ah, escritorio, podrían tener fold off. 700 píxeles son 800 píxeles en un dispositivo móvil. Podrían tener 600 o algo así. Entonces estos son en realidad tus marcos. Si has visto una fotografía, hay un marco que está conteniendo esa fotografía. Entonces si alguna imagen está fuera del marco, no se puede ver. No se puede ver, por lo que hay que pensar de una manera muy prioritaria en qué información es la más importante. ¿ Debo obtener el formulario de inscripción en la parte superior, o debería incluir algún video en la parte superior? Por lo que estas son algunas preguntas que debes hacer a tu negocio y a tus usuarios. Ahora la tercera pregunta es cuál es el tipo de contenido o el medio para el que estás diseñando. Entonces si tu diseño se va a leer en un dispositivo kindle, o si tus usuarios van a ver esta aplicación en un repetidor en un móvil. Todos los que van de dedo consumen este contenido en industrial, PC o laptop. Entonces estas son en realidad las preguntas que vas a hacer antes de comenzar tu diseño de capas . Por lo que en realidad hay dos tipos fuera de tipos básicos, fuera de sitios web de contenido o diseños. Un diseño es el diseño pesado de contenido, por lo que tenemos mucho fuera de impuestos. Tenemos muchas imágenes, como los sitios web de un blog de noticias diferentes sitios web de artículos, cosas así. Entonces tenemos el segundo tipo, que se está centrando en pocos productos o solo en un producto. Entonces cuando tenemos un producto, por ejemplo, una aplicación móvil o un juego móvil, tenemos muy menos contenido. No queremos,ya sabes, escribir ya sabes, como cientos de párrafos para ese producto. Por lo que vamos a tener más enfoque en líneas muy pequeñas, muy pocas características que van a convencer a nuestros usuarios para que compren nuestro producto. Por lo que se trata de dos tipos diferentes diseños off layer, que van de punta en función de tu contenido. Por lo que el contenido realmente va en forma del dedo del pie. Tu maquetación y otra pregunta que me voy a preguntar a mi negocio o a mis usuarios es para qué tipo de fusibles estoy diseñando, pero que ahí son usuarios mayores, ancianos y son niños. Ellos son millennials, o la gente moderna lo son. Están en sus treinta o cuarenta. Qué bien, están familiarizados con la tecnología. Entonces estas son las preguntas. Por ejemplo, si estoy diseñando para niños, voy a tener palabras más simples de Gran Bretaña y, ah, ah, colores muy brillantes o nítidos para los Burtons. Y también me voy a presentar la información en un sencillo diseño. No voy a,ya sabes, ya sabes, moverme alrededor del Señor y crear una salida muy singularmente donde mi y los niños o los ancianos están teniendo dificultades para encontrar la información que quieren. Entonces esto es muy importante. Si tienes ah, las personas mayores son niños o diferentes tipos off usuarios, vas a tener diseños diferentes fuera. Por ejemplo, si usted ha visto que las agencias de diseño, utilizan mucha creatividad en sus sitios web o diseños Web porque tienen a ese tipo de usuarios o espectadores o consumidores. Por lo que siempre que alguien se va toe goto, una agencia creativa, se va dedo del pie a esconderlos para algún trabajo creativo, por lo que muestran su creatividad en su diseño de diseño de su página web cosas así. Entonces esto es muy importante. Es necesario considerar qué tipo de usuario desconectado está diseñando. Por ahora, el último diseño básico off layer es la función sobre la forma. Entonces este es un dicho muy viejo fuera del diseño gráfico. Y si eres de un fondo de diseño gráfico, ya lo sabes. No, ¿qué significa esto en realidad? Significa que si tienes un sitio web o una aplicación móvil o una página de aterrizaje o cualquier diseño, tu diseño debe apoyar la funcionalidad fuera de tu diseño que estás diseñando para primero la funcionalidad fuera de tu app, tu página web o lo que sea que están diseñando. Entonces la segunda prioridad va a ir por la estética o vas a,ya sabes, ya sabes, añadir algunos colores o algo de creatividad. Entonces aquí mi consejo está, limite su creatividad. El diseño debe servir primero a su propósito. Entonces significa que vamos a crear una aplicación utilizable en lugar de inutilizable muy creativamente fuera. Entonces, cada vez que estás diseñando un layout, te vas con el dedo del pie. Mantén en jaque tu creatividad. No intentes crear un diseño que sea demasiado distorsionado o demasiado difícil, y no soporta la funcionalidad fuera de la APP por ejemplo, has visto una gran cantidad de APS. Nosotros como usted realiza el pedido y el botón de hacer orden está en la parte inferior. Ahora está al fondo. Por alguna razón, es un poco demasiado usabilidad y facilidad de uso. Entonces si intentas colocar ese botón en la parte superior o en el medio fuera de tu pantalla, va a crear algunos problemas para tus usuarios. Así que ten eso en cuenta que la usabilidad de la funcionalidad en da legibilidad estos van dedo del pie tienen más importancia que tu forma o una estática o cosas por el estilo. Entonces esto va a resumir esta lección. Espero que lo hayan disfrutado y nos vemos pronto en la siguiente lección. 3. El contenido define el diseño: Este es otro error que muchos diseñadores realmente cometen, y eso es sin tu contenido. En primer lugar, no se puede diseñar un diseño que no se puede definir. Se van a ir sus diferentes elementos, cómo van a ir encima uno del otro o lado a lado o cosas así. No puedes decidir el diseño si no tienes tu contenido, por lo que no puedes decidir cuántos bloques de contenido tienes. Por ejemplo, tenemos un encabezado un subtítulo de lo que tenemos pocas imágenes en el encabezado. Entonces tenemos, como seis o siete elementos en nuestra cabecera. Entonces estas son las preguntas. Estas son las cosas que tienes que tener antes de comenzar cualquier diseño de maquetación. Por lo que si tienes como tres artículos que puedes tener, puedes arreglarlos. En tres cajas paralelas. Se puede tener una caja un poco más grande y dos cajas en el lado derecho, lo que hay posibles arreglos los cuales se van a decidir por el número de elementos que se tiene. Entonces consigue el contenido de tu CEO del negocio u otro tu cliente para el que estás diseñando o quien sea que vaya a escribir ese contenido ahora. Contenido no significa sólo el texto y las imágenes que tienes podrían tener radios. Podría tener ilustraciones. Podría tener iconos. Así que prueba juntos todas estas cosas diferentes antes de que vayas a empezar tu diseño. Vas a preguntarle a tus clientes y los correos electrónicos que necesito este tipo de imágenes que no necesito. No quiero estas imágenes de baja calidad ni cosas así. También necesitas dedo del pie obtener iconos que nuestro pequeño dedo del pie similar equipo fuera de tus imágenes o tu texto. Así que reúne todos los datos y pregunta a tu cliente que me den envíame todas estas imágenes, el contenido, el gravado para que pueda empezar a trabajar en mi maquetación o diseño. Ahora permítanme mostrarles algunos ejemplos de que cuán diferente contenido va a dar forma a sus diseños. Entonces déjame, veamos algunos ejemplos. No. Estos son algunos ejemplos. Sitios web obligaron a sus distritos CS. Se trata de un sitio web pesado de contenido para desarrolladores Web. A pesar de que lo son, están usando muchos colores geniales, buen diseño, sitio web muy diferente y único. Pero aún así es un sitio web pesado de contenido. Tenemos mucho texto por aquí. Se puede ver entonces tenemos diferentes artículos por aquí se pueden ver u oír. Y ah, nuevo tenemos unos artículos y en destrucción. Y si nos abrimos en artículo, por ejemplo, éste Así que vas a ver que todo está dispuesto para una mejor lectura. Por lo que tenemos ah, más fácil de navegar, más fácil de leer, más fácil de digerir en diferentes secciones se puede ver por aquí. Entonces este es en realidad el propósito fuera de este sitio web. Ahora si pasamos al siguiente contenido página web de Harry, que es BBC English, BBC door com y puedes ver que tenemos noticias, tenemos las mejores noticias por aquí. Entonces tenemos por aquí pocas noticias con algún texto e imágenes. Por lo que básicamente es feliz con texto e imágenes. Por lo que puedes ver esto es en realidad otro ejemplo fuera de un sitio web pesado de contenido. Tenemos mucho contenido. Ahora pasemos a este. Se trata de Bolívar Club oscuro sietch, y se puede ver por aquí no es un muy contenido tener sitios web. Si bajamos, se puede ver que tenemos una salida muy creativa. Um, Texas se movió un poco a la derecha y se pueden ver estas simples y emisiones. Y si nos movemos hacia abajo, se puede ver que tenemos menos imágenes, menos líneas fuera de texto se puede ver tenemos un párrafo en encabezamiento. Eso es todo. Entonces este es el fin. Por lo que esto en realidad no es un sitio web pesado de contenido. Se basa en algún servicio, sarees simples o uno o dos servicios y sitio web muy simple y único. Si pasamos al siguiente ejemplo que es Fitbit Ah, esto es fit versa. Página web de Light Edition Y se puede ver esto en realidad está enfocado en un solo producto. Por lo que tenemos muy grande imagen de producto con gran título de producto y una tienda sin botón. Entonces de nuevo, tenemos algunas características por aquí con el con la imagen de fondo. Entonces otra vez, tenemos algo de imagen y algún impuesto o aquí entonces tenemos otra vez algo nuevo y se puede ver u oír. Tenemos muy pocas líneas fuera de texto porque nos estamos enfocando en un producto para que puedas ver esto es construir la imagen de los productos del producto que tenían los usuarios. Por lo que están mostrando imágenes muy poderosas. puede ver aquí tienen su app, tiburones de pantalla y luego tenemos diferentes, um por aquí, diferentes características. Nuevamente, tenemos algunas características a la izquierda y a la derecha. Tenemos imagen está cambiando con las características para que puedas ver algo así. Entonces de nuevo, se puede ver a una imagen mortal que lleva este reloj. Y pocas cubiertas y líneas estuvieron aquí. Entonces te dieron la idea de que no es un sitio web de Terry de contenido. En realidad se alega dedo del pie un solo producto y enfocándose en un solo producto. Veamos otro. De acuerdo, entonces aquí tenemos algunos, creo empresa de diseño o alguna agencia de diseño? Diseño de interiores, supongo. Y se puede ver que han creado una simple pero singularmente fuera. Tienen, como, tres columnas 12 y tres a la izquierda. Tienen pocos menús y ataques en medio. Tienen imagen a la derecha. Tienen algunos otros encuentros o cosas así. Información del proyecto. Entonces de nuevo, tenemos muy pocos impuestos porque ah, aquí, su trabajo va a mostrar lo que realmente pueden hacer. Por lo que puedes ver por aquí bonitas imágenes fuera de este diseño de oficina. Esto en realidad está en su sitio web de diseño y se puede ver el próximo proyecto. Por lo que esto realmente se está centrando en un solo servicio. Por lo que ahora has entendido a lo que me refería en realidad al tener el contenido para. Entonces si tienes todo el contenido, por ejemplo, sabes que en la primera pantalla, por ejemplo, esta de aquí, si tienes todo este texto, estas características, ya sabes que tienes cinco características. Entonces los vas a mostrar en esto De esta manera, si tienes como cuatro características, podrías tenerlas mostradas en cuatro cajas diferentes uno encima del otro. Entonces déjame mostrarte. Entonces, ¿ como se puede ver qué? Aquí tienen tres características. Entonces en lugar de mostrarlos horizontalmente, tomaron la dirección vertical. Entonces esta es otra opción con el layout, Así que el contenido realmente va a definir tu diseño. Cuánto contenido complejo tienes, cuántas columnas vas a hacer que las vas a mostrar en 50 columna o te vas de dedo del pie, tienes algún otro diseño. Entonces espero que no hayas destruido la idea de este contenido teniendo contenido antes de iniciar cualquier diseño de capa. Entonces, ¿no cometen este error? Te estoy dando un consejo sincero. Pasemos a la siguiente lección. 4. Qué son las cuadras, el calabro y los diálogos: re diseñadores. Reutilizar saluda dedo del pie forma nuestro diseño para dar forma a nuestro diseño y organizar diferentes elementos de diseño según puntera esa rejilla. Ahora bien, ¿por qué usamos calificaciones? Porque las mentes humanas, nos gustan las cosas organizadas. Nos gustan las capas equilibradas. Tratamos de encontrar el equilibrio incluso con el desequilibrio en la naturaleza o las cosas. Entonces vamos a utilizar diferentes grados, y vamos a alinear nuestros diferentes elementos de acuerdo a ellos, dar forma a nuestro diseño. Ahora vamos a entender lo que en realidad nuestras calificaciones si ya sabes cuáles son nuestras calificaciones, márgenes, canaletas o diferentes términos, salte esta lección Para los que no saben, Pasemos a la siguiente diapositiva. Ahora puedes ver Te estoy mostrando un credo de 12 columnas para el diseño de sitios web, y se llama Basicamente Bootstrap Bridge. Boot Shop es un marco de diseño para desarrolladores Web, así que vamos a ver cuáles son nuestras diferentes partes de esta de grado. Para que se pueda ver en el medio. Tenemos 12 líneas oscuras o líneas azuladas oscuras oscuras. Yo diría que las líneas negras sólo por simplicidad. De acuerdo, entonces tenemos 12 líneas negras en el medio. Estas son en realidad otras columnas, por lo que nuestros diferentes elementos de diseño las iban a colocar en dos columnas o tres columnas son cuatro columnas, dependiendo de sus tamaños y razas y su disposición en el medio. Ves líneas naranjas y que esas son en realidad Curtis. Esos son en realidad espacios entre diferentes columnas. Por lo que en este momento son 30 pixeles y la columna Bert es de 65 fotos. Por lo que estos espacios realmente van a tener algún respiro dentro de nuestro contenido o dentro nuestra página a izquierda y derecha. Se pueden ver esas áreas azules que en realidad son márgenes. Los márgenes van del dedo del pie. Ten un poco de espacio para respirar alrededor de tu diseño. Por lo que las canaletas van a tener algo de espacio para respirar dentro de tu diseño y los márgenes los van a tener en el exterior. Por lo que estos dos son muy, se puede decir muy importantes. Ahora voy a compartir un recurso donde puedes descargar todo tipo diferente fuera de diferentes sistemas de rejilla para diferentes dispositivos y diferentes Te diseñaron herramientas para fig ma para Roby X t para la tienda para sketch. No es por mí, y es de algunos Eres firma de diseño, así que voy a compartir ese enlace. Normalmente los uso en mis proyectos. Simplemente abro esa grilla y empiezo a construir mi diseño a partir de ahí. Así que asegúrate de que tu descarga que me voy de dedo incluye el enlace. Ahora, déjame mostrarte cómo vas a usar estas calificaciones y cómo he sido el diseño sencillo solo para mostrarte cómo usar estas cajitas. Ahora puedes ver todo aquí en la parte superior. Por aquí, tenemos un rumbo muy grande, que es éste y estoy usando Ah, todo el vert fuera de éste y justo centro. Alineándolo. Entonces si tienes algún elemento que esté alineado en el centro o en medio de tu diseño, no te vas a preocupar por tus cunas. Por lo que esta también es línea central, y esta carga también está centrada Línea. Pero se puede ver u oír que esta carga se extiende sobre cuatro columnas por aquí, lo que se puede ver que en realidad son 1234 columnas, incluyendo sus canalones. Entonces cada vez que estás colocando ah, tus objetos de diseño, se van del dedo del pie. Se van dedo del pie toman como, dos columnas enteras o tal vez tres columnas y o tal vez columna completa 678 Pero hay una parte porque he visto a muchos estudiantes que empiezan a cometer este error. No limites tu creatividad de que vamos a tener un botón que se va a poner el dedo del pie perfectamente encajar. Estas cuatro columnas, puedes tener una carga como esta. De acuerdo, entonces todo depende de tus propias ideas. Y puedes No siempre vas dedo del pie. Usa las palabras y alturas fuera de tus elementos. Según Toa este guión, solo están ahí para alinear cosas diferentes. OK, así que ahora pasa a la siguiente. Se puede ver la siguiente sección. Estamos adelante aquí. Tengo este gráfico a la izquierda, que es una ilustración, y se puede ver que lo tengo. Ah, en 1234567 columnas. Por lo que está tomando siete columnas por aquí. Y luego dejé este margen y empecé mi Esto es básicamente gooder. Y entonces empecé mi texto dejando descubierto. Ahora lo que significa eso en realidad es que cada vez que estás asignando tus calificaciones número de calificaciones a un contenido, te vas de pie a baja. Ah, y Y el siguiente va a tener una distancia entre ellos. Entonces necesitamos algo de distancia. Entonces tenemos que dejar este margen. Entonces trata de entender esto. Por ejemplo, si intento dedo del pie, um, digamos que trato de apretar esto. Oops, probé dedo del pie. Mueve esto. Y por aquí. Ahora puedes ver que estoy usando 1234 columnas por aquí. Y me voy de estas dos canaletas y esto realmente lo llaman desde aquí. No, no puedo hacer algo así, aunque puedo hacerlo. Pero esto en realidad significa que estoy tomando 12345 columnas. Entonces, ya sea que lo muevas por aquí o por allá, estás usando cinco columnas. Entonces siempre que no te vayas Ah, columna entera, vas a dejar este espacio una columna y es scooter. De acuerdo, Así que ahora si quiero O arregle mi puedes ver esperanzas X mover esto. Yo lo voy a mover por aquí. Ahora está tomando cuatro columnas, no cinco. Pero cada vez que sonrío mis elementos de diseño, empieza a ocupar la siguiente canaleta. En realidad está tomando la siguiente columna. Así que asegúrate de que estás diseñando y entiendes cómo estos realmente crean trabajo. Déjame ir a esto por tienda y y mostrarte En realidad lo que en realidad quise decir Vamos, um bien, Así que si quiero apretar, tal vez quiero tener más espacio. Y quiero, ya sabes, superarlo sobre Hit. De acuerdo, así que ahora puedes ver. A pesar de que he reducido el tamaño de este gráfico, sigue tomando 1234567 columnas. Entonces si trato de reducirlo un poco más Ok. Entonces por aquí Aún, está tomando siete columnas. Si quiero tenerlo Tomando seis columnas, tengo dedo del pie alejarse de este cortador. Ahora está tomando 123456 columnas. Y hemos dejado una columna por aquí. Entonces, ¿esto es realmente entender cómo vas a usar estas rejillas? Muchos diseñadores, mis alumnos, cometen errores. No saben cómo usarlos. Entonces creo que esto va a dejar tu mente clara sobre la tuya. Incrementar. Si aún tienes preguntas, puedes hacerlas. He visto estudiantes que en realidad me hicieron, como, 10 preguntas en un día, y de verdad se lo agradezco. De acuerdo, pasemos a la siguiente lección y cavemos un poco más en las notas 5. Cómo combinar columnas en las cuadradas en cuadradas: ahora. ¿ Ya te enteraste de Griggs? No. El interrogante es cómo vamos a combinar diferentes columnas dentro de una cuadrícula. ¿ Por qué debería combinar cuatro columnas para este contenido? ¿ Y por qué no seis columnas o la mitad de las columnas? Por lo que va a depender del contenido que tengas. Si tienes pocas líneas, es posible que caben en tres columnas. Si solo tienes un logotipo, podría caber en dos columnas. Entonces esta es en realidad la pregunta Vas a hacer que tu tipo de contenido va a definir tus jaulas y maquetación. Entonces esto es lo que quise decir. Tu contenido. Si es pequeño, se va a encajar en remolque. Columnas más pequeñas. Número de columnas. Y si tenemos imagen muy grande, podría tomar hasta 12 columnas o incluso salir fuera de eso. Entonces permítanme mostrarles e ilustrar esto con un ejemplo que vimos en la última lección. Entonces vamos a ver ahora. Ahora bien, este es el mismo diseño que te mostré en la última lección. Y se puede ver que he cambiado un poco de la sobrecarga de diseño. Entonces puedes ver tenemos ah gráfica a la derecha tenemos 123456 columnas y la estructural aquí también está tomando seis columnas o aquí para que puedas ver u oír Es hasta aquí, pero en realidad se está quitando seis columnas. Siempre que seas desarrollador o trimestre, van a ir a la corte este sitio web. Se van del dedo del pie y desarrollan este sitio web. Se van del dedo del pie. Localice seis columnas para las pilas de aquí y alinéelas a la izquierda. Para que veas te mostré en la última lección que o puedes alinearlos en el medio o puedes tenerlos a la izquierda. Entonces esto es totalmente diferente ahora. En el siguiente apartado, se puede ver que tenemos nuestros servicios PIB, nuestro PIB son o estos iconos tenemos tan iconos y este texto tenemos texto muy pequeño. Es como tres líneas o máximo cuatro líneas. Entonces lo que hice fue ubicar en realidad cuatro columnas por cada una de ellas cuatro columnas que una canaleta por aquí. Entonces de nuevo, tenemos, um, cuatro columnas por aquí. Entonces otra vez, hemos llegado aquí. Entonces de nuevo, tenemos cuatro columnas estaban aquí, por lo que se puede ver esto es. En realidad, lo estamos. Y así es en realidad como estamos usando la Ingrid de Joe. Por lo que estamos dejando estas canaletas para que el dedo del pie tenga algo de espacio para respirar dentro de estos tres bloques de contenido , por lo que hay que tener eso en cuenta. Estos son tres bloques de contenido y vamos de seleccionados en. También, se puede ver aquí otra vez. Tenemos dos bloques de contenido diferentes uno y así estos son dos bloques principales. Uno es en realidad la introducción o un subtítulo de partida. También lo son la línea de etiqueta y luego una carga. Entonces a la derecha, tenemos una ilustración. Por lo que estos son en realidad dos bloques de contenido diferentes que tenemos. Entonces, en realidad, estamos diseñando en bloques. De acuerdo, entonces, um, ¿qué más es eso? Siempre que estés diseñando usando rejillas No solo pienses en números como 678 Intenta pensar en porcentajes como este es 50% y esto es 50%. Por lo que tenemos a columnas grandes columnas que son 50 50% tomando un poco 50% para esta imagen o ilustración, y 50% para el contenido. Entonces por aquí tenemos 33% o 33.33 33.3 t y 30 puntos TT. Entonces, en realidad así es como vas a pensar. Si quieres tener un diseño flexible o receptivo, no vas a pensar en términos ajenos. Dos columnas, tres columnas o 12 columnas de 16 columnas o siete columnas. Vas a pensar en porcentajes que este diseño tiene 60% de imagen y 40% de texto y cosas así. Entonces este es en realidad concepto muy importante. Por eso creé este diseño, y lo cambié y lo cambié hacia arriba para mostrarte que un solo contenido tiene múltiples diseños. No, espero que hayas entendido el significado de este credo y cómo puedes despejar diferentes diseños. Cómo te vas dedo del pie piense en términos de porcentajes y creando tus diseños. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente lección. 6. La base y el ritmo vertical: Ahora ya hemos hablado de columnas y sistemas de cuadrícula, pero que son básicamente horizontales en dirección izquierda y derecha. Ahora vamos a hablar de espaciado de arriba a abajo, que se llama grado vertical o ritmo vertical. Ahora he hablado mucho de ello en mi tipografía El curso de Gore, pero ahora mismo lo voy a repetir de nuevo porque es muy relevante para tu diseño y espaciado. Ahora bien, si miras por aquí, le he mostrado esa base por no. Lo primero que necesitas establecer es tu base. Cuatro. tamaño del béisbol es en realidad el cuarto que vas a usar para todos tus párrafos o 90% descuento en tus párrafos. Esta va a ser la base de todos tus cálculos. Ahora, cada fuerte sea cual sea la tipografía que sueltes, tendrás algo de línea. Altura de la línea de altura es en realidad la distancia entre dos líneas. Se puede ver la de arriba y la de abajo. Y si hago click por aquí, se puede ver a la derecha. Contamos con 24 espaciado de líneas en línea. Ocultar. Si trato de aumentarlo, se puede ver que las líneas van del dedo del pie, desmoronan y tienen más espacio en ella. Ahora esta altura de línea va a jugar una regla muy esencial en tu vertical mayor ritmo vertical. Entonces lo que hacemos es establecer una base para el tamaño que una altura de línea, y luego multiplicamos ambos estos valores 18 multiplicados por 1.3333 y está casi más cerca 24 píxeles. Ahora, estos 24 píxeles en realidad van a ser la base, o puedes decir unidad basada fuera de tu cuadrícula vertical. Ahora te voy a mostrar el grado vertical en Adobe X D. Lo puedes hacer en para la tienda. Puedes hacerlo en un boceto. Si me quieres, puedo crear un tutorial de YouTube sobre eso para crear verticales en las tres thes tres tú herramientas de diseño blanco. De acuerdo, así que con base en bien, obtuvimos altura basal. Multiplicar zócalo, altura de línea multijugador. Tenemos Baseline Creed. Está tratando de cuatro píxeles. Ahora puedes ver esto es en realidad déjame mostrarte cómo puedes hacerlo. Y se puede ver esto en realidad no es OTAN 18 24. Entonces esto es en realidad que teníamos usando teléfono basado y altura de línea de 1.33 que va a ser 24. Ahora, permítanme mostrarles un ejemplo. Déjame mostrarte el mismo diseño que hicimos en el pasado. Y si vamos por aquí, déjame esconder este grado repetido y en este contenido, o aquí Ahora, puedes ver esto es lo mismo que diseñamos. Cambio un poco el diseño. Contamos con línea central, todo en la parte superior. Y entonces tenemos esta sección de servicios. Ahora se puede ver el espaciado, Cómo voy a. Uh, no, que este texto este rubro y la distancia entre el subtítulo debe ser así como voy a saber la distancia. Ah, en vertical vertical distancia entre mis diferentes artículos. Por ejemplo, este Vamos a dar click aquí. Y si presiono la tecla arte o opción, puedes ver que puedo ver la distancia entre comprados de ellos. Es de casi 88 píxeles encendidos. Entonces si vuelvo a hacer clic aquí, este 1.3 otra vez si hago clic en overhead es 46. De acuerdo, Entonces una cosa más es que en el diseño web, altura de tu línea funciona de manera diferente. Para que veas que tenemos si selecciono este es 24. 36 es la altura de línea para este y 24 es el tamaño. De igual manera, tenemos 67 67 es este tamaño para la altura de línea, que es una altura de línea 100%. De acuerdo, entonces en realidad, puedes ver que estás viendo espacio por encima de este y por debajo de este texto. Por lo que esto es un poco de diferencia en el diseño web que sea cual sea la altura de línea que vas a seleccionar, se va dedo del pie tiene todo este bloque para ese espacio. Por lo que todo este bloque va a sacar 67 píxeles de altura. Por lo que debes considerar que si haces click por aquí, puedes ver que es de 36 líneas de altura, por lo que va a tomar 36 píxeles verticalmente del dedo del pie, ya sabes, permitiendo este texto. Entonces siempre que estabas diseñando para sitios Web, puedes ver lo que un click gratis por aquí Esta casa tiene mucho espacio en la parte superior y la inferior de manera similar, esto y esto también. Ahora puedes ver cómo creé esta vertical Bueno. Entonces si hago esto un poco así para que puedas ver por aquí si miramos de cerca, puedes ver que este texto por aquí está dentro de estos X zoom en un poco más Está dentro estos un dedo Ver, eso ganó dedo del pie ver Y cuatro, casi cuatro líneas de base. Entonces esto es en realidad si queremos alinearlo también podemos alinearlo así en la vida Esto Así que si puedes ver de cerca toda el área de deshuesado está en realidad en el azul. Entonces tenemos 12345 Así que tenemos casi cinco espacios verticales para esto. Ok, Del mismo modo, si hacemos click aquí, puedes ver este es nuestro texto. 123456 ciudades casi tomando seis Y entonces tenemos casi tres arriba y tres a abajo casi. ¡ Ah, Bill! Entonces si lo movemos un poco hacia arriba, se puede ver ahora se va del dedo a la línea. Este cuadro de límite se va a alinear con estas líneas aéreas. Entonces así es como vamos a alinear nuestras cosas. Ahora vamos a mover este un poco hacia abajo. Um así tenemos algo como esto. Por lo que ahora se puede ver este bloque Bloque azul está en esta cuatro rosa. Entonces estos son en realidad nuestro ritmo vertical Rose. Entonces tenemos esta hora. Burton, si hacemos click aquí, puedes ver que también está tomando 12345678 espacios verticales. Y de igual manera, vas a salir del dedo del pie por todos tus diseños. Todo se va a espaciar verticalmente. Ahora hay un truco. Si estás diseñando algo, obviamente cuando tienes, cuando vas a iniciar un nuevo bloque de información una nueva sección fuera de tu página web un nuevo um, puedes decir característica fuera de tu sitio web o lo que sea que seas diseñar. Vas a tener más espacio por aquí. Se puede ver u oír. Tenemos un poco más de espacio por aquí. Entonces tenemos entre estas cargas y esta, puedes ver que está bien, Entonces esto es muy importante. Más espacio cuando estás iniciando una sección más espacio cuando estás terminando una sección y menos espacio cuando estás cuando estás dentro de una sección, así como puedes ver u escuchar Aquí estoy mostrando los servicios de encabezamiento de sección y después tenemos pocos iconos por aquí. Entonces esto es otra cosa. Creo que vamos a hablar de ello. Te voy a mostrar mi proceso y mi diseño en el que trabajó el último diseñador y cómo realmente creó. Ah, todo el sistema fuera de los colchones verticales y se puede decir ladrillos. Normalmente los llamo ladrillos verticales. Y usé esos bloques verticales o ladrillos puntera crear todo mi diseño y expresar. Entonces esto es muy importante. Necesitas crear esta vertical. Genial. Si quieres saber cómo crear esta rejilla vertical, solo tienes que crear, um, uh, rectángulo apagado 24 pixels y quitar este borde o aquí. Cambio. Voy a cambiar X color toe algo así, y luego vamos a dedo, um, duplicarlo y replicarlo, y voy a quitar todos los espacios entre ellos. Voy a hacerlo un poco aburrido así. No, tenemos que quitarlos. Repite, genial, creó la codicia, la codicia, y lo vamos a repetir así. Ahora vamos a cerrar la brecha entre estos dos. Y aquí tenemos a todo el patrón. De igual manera puedes crear un patrón en para un corto de para tienda y aplicar ese patrón en el fondo de tu imagen. Toda tu página web Puedes ver si pongo este texto aquí como yo. Muévete un poco arriba así. Y si lo muevo por aquí, se puede ver En este momento está cabiendo dentro de todas estas líneas. Entonces este es en realidad el ritmo vertical. Por lo que tengo 24 grandes altura de línea, por lo que encaja perfectamente en 1234 espacios verticales. Entonces así es en realidad como funciona el ritmo vertical, y vas a espaciar las cosas. Entonces, por ejemplo, si tengo algo como esto o aquí y quiero crear encabezamiento por aquí Um, ahora, si miras por aquí, puedo espaciarlo entre estas tres líneas. Entonces en este momento , en realidad está tomando estos tres espacios verticales. Entonces si quieres moverlo aquí así, también puedes hacer eso. Y tenemos casi la mitad del espacio entre estos dos. Veamos cuánto espacio tenemos en el medio. Tenemos, como, 11.3. Entonces hagámoslo 1000 Dean y 11. Entonces puedes tener una cosa más, que se llama bloques y, por ejemplo, tenemos 24 pixeles fuera de ritmo vertical y 1/2 off 24 es 12 así que puedo tener un 12 espacio entre tablero estos. Entonces esto es en realidad 48 56 altura de línea, y esto es 18 píxeles de algunas cubiertas y 24 de altura de línea, y el espacio entre ellas es en realidad el exulto real es de 12 píxeles. Se puede tener algo así. Entonces ahora voy a ocultar este ritmo, crear, y se puede ver que tenemos un espaciado equilibrado muy bonito entre encabezado y es mejor gráfico . Entonces esta es, creo, una técnica muy sencilla, y se puede decir un método muy sencillo que muchos diseñadores empiezan a utilizar en su diseño. Por eso tienen desajustes en su espaciado vertical y horizontalmente. Y espero que hayan disfrutado de esta lección. Si tienes alguna pregunta sobre vertical, genial, voy a entrar más en detalle en las próximas lecciones a preguntarme Pasemos a la siguiente lección 7. Bloques verticales para el espacio ► Secreto: Ahora ya has aprendido sobre vertical creado. Pero ahora mismo voy a compartir contigo un secreto off. Grandes diseñadores crean tus diseñadores, crean diseñadores web, y eso es usar bloques de espacio en blanco o ladrillos. Yo los llamo ladrillos. Podrás llamarlos colchones verticales o bloques verticales o lo que tengas. Quieres llamarlos. Te voy a mostrar eso. ¿ Cómo? En realidad, creé este diseño a mí. Comparte contigo cómo realmente creé X height. Estos Ok, entonces esto es en realidad un diseño fuera de la página de aterrizaje? Hace poco lo hice. Aún así, estamos trabajando en la sección de cortejo fuera de ésta, para que puedan ver u oír. Este es un diseño muy equilibrado. Se puede ver el espaciado entre diferentes elementos espaciado entre diferentes secciones y los encabezados y el contenido fuera de su sección. Y eso es consistente Por aquí. Podéis ver algunos de manera similar por aquí otra vez en esta sección. Voy dedo del pie a compartir este diseño. A lo mejor una en próximas lecciones. Más porque tengo que mostrarte algunas técnicas más fuera de alineaciones y Leo X. Ahora el secreto radica en tu espaciado vertical. Ahora ocultemos este, y les voy a mostrar cómo realmente tengo apagado el sistema o espacios de risita. Entonces a la izquierda, se puede ver tengo pocos componentes que se llaman 1 2096 70 a 64 56 48. Estos son todos diferentes tamaños de ladrillo o bloques verticales. SoHo. En realidad espacio mis artículos. Déjame mostrarte si colocamos este 120 por aquí. Por lo que son 1 20 píxeles. Se puede ver esto es en realidad estos son componentes. Entonces voy a experimentar con los pies así. Te voy a mostrar en un minuto mis diseños secretos. Y creo que realmente pienso que la mayoría de la gente no lo usa así. De acuerdo, así que casi 120 incluyendo esta sombra así. Entonces va a ser aquí 24. Creo que tenemos 36 por aquí. Así. Um, esto va a estar dentro. Tan solo sonar. Está bien. Entonces otra vez, 1 20 porque tenemos una sección oops, sección o aquí. Se puede ver cómo estoy usando el diferente sistema de espaciado entre diferentes artículos por aquí. Creo que esto es suficiente. Más que suficiente. Ya he creado muchas líneas de color rosa por aquí de todos modos, Así que en realidad así es como debería verse el sistema de espaciado. Ahora puedes ver que esto es en realidad una técnica secreta. Yo estoy revelando ahora mismo. He visto muchos diseños y no pude entender cómo el mundo del espaciado diferente . Por lo que le mandé un correo electrónico y lo consideré con dos expertos diseñadores mawr y les pregunté cómo. En realidad el espacio son diferentes secciones y dijeron que la parte superior e inferior de cada sección es casi igual. Entonces lo que sea, te vas a ir en la parte superior como hemos ganado 20 cuadros y de nuevo en la parte inferior hemos ganado 20 picks es de nuevo cuando va a empezar una nueva sección. Tengo 1 20 píxeles en la parte superior y preguntándose representa es el espacio en blanco apagado en la parte inferior y se puede ver entre secciones tenemos menos base, así que primero hay que crear un sistema de espaciado fuera de sus diseños. Así que prueba dedo del pie, consigue estos bloques, y estos bloques van de punta en base a tu línea base. Entonces, por ejemplo, si tengo una línea de base fuera como, um 24 o puede estar en un número par, intente dedo del pie, tenga una línea de base en números pares. Es más fácil y tratar de crear bloques que tengan una buena diferencia entre sí. Como 24 tengo 24 36 48 56 64 72. No tengo cosas como 21 118 Porque de esta manera, si trato de crear un espacio de 1 20 y 1 18 ahí, esa diferencia no se nota. Por lo que siempre que estés creando esto, tus bloques verticales prueban dedo del pie tienen bloques fuera de diferentes tamaños que tienen buena cantidad fuera. Se puede decir como del 25 al 30% una diferencia de tamaño entre ellos. Ya puedes ver que estamos aquí. Aquí. Estoy usando 36 de 24 luego 1 2120 32 Debe ser 36. En realidad, creo que tal vez me he perdido algunos píxeles por aquí. Por lo que en realidad es 36. Esto debe estar encendido. Esto también debe ser consistente con todo tu diseño. Entonces tengo sub rumbo al contenido. 72 pixels. 1 20 Entonces otra vez, en realidad, usé un poco menos espacio por aquí porque creo que estas dos secciones deberían pertenecer en ah, misma sección por lo que están casi relacionadas. Entonces usé 1 20 espacio y luego alteré mi espacio. Aparte de tener 72 utilicé 56. Entonces éste es otro. Entonces de nuevo, hemos ganado 20 en la parte inferior de esta sección 64 después de este rubro 64 64 entre todos estos diferentes testimonios. Entonces de nuevo, se va a iniciar nueva sección. Entonces voy a dejar 20 al fondo y ah, tener alguna separación entre estos dos. Entonces de nuevo, tenemos 36 antes del siguiente tagline o se puede ver el futuro párrafo arranca de lo que tenemos 56 entre los puntos de estas balas y este párrafo. Y entonces de nuevo tenemos 48 48 40 años y 48 repitiendo para todo este listado ítems. Entonces de nuevo, hemos ganado 20. Entonces esto es realmente, realmente importante. Tienes que aplicar esta técnica a todo tu diseño y dirección vertical. Se va dedo del pie. Se puede decir mejorar tu diseño 200% para que puedas ver por aquí si vamos a esta sección y me arrastré por aquí, Esto en realidad es 72 en la parte superior y 72 en la parte inferior. Entonces esto se ve realmente bonito. Entonces si yo Si miras este diseño y trato de reducirlo algo así, no se va a quedar muy bonito. Por lo que tiene menos espacio en la puerta. Ha sido más espacio en la parte inferior. Así que intenta tener algo que tenga igual arriba e inferior Para cada sección que estás diseñando que dentro de las secciones, vamos a tener algún sistema de espaciado Definir. Entonces este es básicamente tu sistema de espaciado. Yo lo llamo bloques verticales. Los uso en todos mis diseños así. Se puede ver así es como en realidad, esto se ha presentado de manera similar en su versión móvil en sus dispositivos móviles. Estos bloques van a ser más pequeños. Entonces aquí puedes ver si miras todo aquí, tenemos menos espacio. Creo que es 56 por aquí, supongo. ¿ Esperanzas? Um, 56. Sí. Entonces en mi diseño móvil, lo que hice es que en realidad lo redují a 56 tenemos 56 o aquí de manera similar 56 por aquí. Para que puedas ver así en realidad es como vas a cambiar tu diseño o sistema de bloqueo para tu aplicación móvil. Entonces vamos a tener tamaños más pequeños porque tenemos pantalla pequeña o dispositivos pequeños. Espero que hayas aprendido y disfrutado de este secreto fuera de mis diseños, y espero que los pruebes en tus diseños a Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 8. Cómo equilibrar tu diseño con bloques: en esta lección, voy a compartir y otro secreto que es equilibrar tu diseño. Es el más difícil. Preguntado a muchos de nosotros pensamos que deberíamos tener un equilibrio simétrico entre todos los diferentes elementos off sobre el diseño. Tenemos miedo de usar el espacio en blanco. Por lo que la mayoría de las veces que tratamos de llenar y equilibrar fueron refinados que están aquí. Tenemos el espacio vacío que tratamos de llenarlo. Entonces este es el, ah, mucho de los diseñadores. Estos son los mayores errores que cometen. He visto a muchos diseñadores, incluso a mí. Yo waas, creo, como tal vez hace un año o dos años yo era así. No entendía cómo funciona en realidad el espacio en blanco y cómo te vas del dedo del pie. Puedes usar eso Ah, en mucha fase diferente. Entonces lo que vamos a hacer aquí es que hay dos puntos que hay que tener en cuenta. número uno es que cada vez que estás equilibrando tus diseños, estás pensando que tienes diferentes bloques de madera y los estás poniendo encima uno del otro. Esta es una manera de equilibrar tu disposición Así que, como tengo dos caja de madera de warrants, losas o lo que sea bloques en la parte inferior. Entonces me voy de pie de pie uno arriba, y voy a colocar otro en la parte superior. Entonces esto en realidad va dedo del pie tener una salida muy diferente. Entonces te voy a mostrar algunos ejemplos y luego voy a explicarlo mejor porque, como, ahora mismo, creo que podrías estar simplemente imaginando cómo es posible? Entonces veamos y veamos algunos diseños de ejemplo. Y luego nos vamos. Te voy a mostrar algunos ejemplos reales de diferentes sitios web o diseños web. Toe, empieza con este balanceo de diseño. Ahora bien, este es el primer diseño que te voy a mostrar. Muchas veces podrías haber visto revistas diferentes, libros diferentes, y las has leído. Y ustedes han visto que esto es un tipo fuera típico Leo Tienen. Tienen un gran espacio en blanco apagado en la parte superior derecha abajo izquierda. Y una cosa que van a notar todo aquí es que tenemos más espacio en blanco por aquí a la izquierda, y también tenemos mucho espacio en blanco en la parte superior. Entonces así es como, en realidad este bloque espacial en blanco está funcionando. Y luego tenemos estas tres cuadras por aquí para el contenido. Y de nuevo, tenemos mucho espacio libre en blanco. O puedes decir bueno aquí para separar estas dos piezas de información como esta. De acuerdo, entonces de nuevo, tenemos algo de brecha a la derecha, que de nuevo se llama Márgenes a la Derecha. Entonces tenemos algo como esto. Y de nuevo tenemos, ah, margen fronterizo para todo lo demás. Por lo que puedes ver ahora he destacado el espacio vacío en este diseño, y es más que lo que sea el contenido. Por lo que siempre que tengas más espacio en blanco que el contenido, se va a quedar muy nítido y limpio. Entonces esta es otra manera de salir. Se puede ver el control. Vamos, D. Así que tenemos esto por aquí, y te puedes ver. Podemos tener Si considera que se trata de tres bloques, esto también puede ser un espacio en blanco. Entonces si elimino este en el bloque blanco medio, eso también puede convertirse en un espacio en blanco para que puedas tener una imagen muy larga por aquí y luego dirigiéndose y atacando por aquí. Todo depende de cualquiera que sea el diseño que estés intentando. Por lo que hay muchas posibilidades. No pienses que vas a tener tres o cuatro columnas o 50% para nuestra imagen y 50% para el texto. Por lo que hay muchas posibilidades fuera de diferentes opciones para tus diseños. Ahora te voy a mostrar otra técnica la cual es dejar algo de espacio fuera. Y se va a quedar muy, realmente bonito. Entonces esta es una técnica que uso cuando diseño cosas. Y ah, cuál es que se puede ver qué? Aquí. Aquí tenemos un bloque grande, que está tomando 12345 columnas e intencionalmente dejé una columna en el medio. Y entonces otra vez, me dividí. Se puede ver la imagen o información o iconos en tres bloques diferentes. Por lo que tengo se puede decir. En realidad, creé intencionalmente un bloque espacial en blanco por aquí, así que esto es muy importante. De igual manera, se puede ver que estamos aquí otra vez. Yo he hecho lo mismo, pero en realidad lo varié. Entonces lo que hice en realidad fue enterrar las palabras de mis bloques. Se puede ver que estos son diferentes. Imagínate que estos son diferentes bloques de madera. Entonces si me pongo encima el uno del otro así, se van a equilibrar fácilmente. De igual manera en lugar de vivir espacio en blanco por aquí, puedo hacer lo mismo por espacio en blanco lo haría aquí. Entonces en lugar de tener todo, puedo usar eso para poder tener todo mi diseño desplazado hacia la izquierda y tener más espacio a la derecha. De igual manera, puedo hacer lo mismo dejando algún espacio en blanco a la izquierda y sacando todo así . Por lo que estas son opciones diferentes. Tienes que pagar seco. No intentes, ya sabes, pensar en solo bloques y puedes ver bloques simples y siempre tratar de hacer algo como esto . No necesitamos llenar todo así, así que no trates de pensar de maneras sencillas. Trata de dejar fuera, trata de cosas muy diferentes y que van a tener ah, diferentes opciones de espaciado para crear algún interés. Ahora aquí tengo otro lee out y se puede ver todo está lleno y ah, ahora mismo lo que en realidad quiero mostrarles es ah, combinación cruda de columna. Entonces así es en realidad como puedes ir dedo del pie crear diferentes combos fuera de tu columna de cuadrícula para que puedas ver en la parte superior. Estoy usando 123 bloques y cada uno está tomando cuatro columnas por aquí. Pero en la siguiente porción, lo que hice es en realidad lo he variado. Acabo de crear un bloque y un bloque más grande para cubrir sostener esta área. Por lo que esto va a crear algún interés cada vez que estés cambiando tus combos. Entonces si eres ah, jugador de videojuegos, sabes que si sigues jugando O r con el mismo combo gin y otra vez, vas a perder con tu oponente. Por lo que no va a ser muy interesante. Así que prueba dedo del pie crear combos como por ejemplo, también puedo hacer algo como esto. A lo mejor, Ah, yo hago algo como esto. En lugar de tener tres diferentes tres diferentes mismas columnas, puedo tener algo como esto. Puedo tener dos cuadras a derecha e izquierda, que son iguales. Y en el medio, tengo dos cuadras que van a tomar dos columnas. Por lo que hay muchas variaciones que puedes masa, así que intenta muy tu diseño. A lo mejor podemos saltarnos algo así por aquí y tenemos mucho espacio en blanco. Por lo que hay muchas variaciones que puedes crear tu con diferentes gran columna, combinaciones de Cambone y usando el espacio en blanco de manera efectiva. Ahora, aquí te voy a mostrar de nuevo cómo puedes combinar diferentes columnas. Puedes tener cuatro elementos que puedes tener. Dividirlos en dos. Se puede tener algo central alineado como este en. No necesitas preocuparte por combinarlas. Puedes tener lo que sea que Richie advirtió. Y esto es casi layout off. Un sitio web típico que puedes ver a la derecha en la parte superior. Tenemos algunos enlaces por aquí que por la izquierda. Tenemos un logo que el titular, y luego tenemos cuatro características o algo así. Entonces tenemos una imagen. Estamos aquí a la derecha y a la izquierda tenemos texto de nuevo. Esto podría ser un campo de suscripción de correo electrónico o algo así. Aquí estoy. Ven combinando 3456 Sound it y cuatro columnas y luego de nuevo, 50 50. Así que intenta muy tu diseño, por ejemplo. Tengo cuatro por aquí. Entonces otra vez, tengo que venir aquí ahora. En realidad, me rompí a mis usuarios se puede decir que usa ojos se puede ver En este momento mi usuario está viendo el espacio así y luego otra vez lo rompí y muevo el espacio por aquí. Entonces tenemos un contenido en destrucción ahora mismo. De igual manera otra vez, volví con aquí, Así que esto en realidad es muy ating tu espacio en blanco y teniendo diferente, diferente combinación fuera de tus columnas. Esto se va dedo del pie tener un muy buen efecto en tu diseño. Ahora bien, este es el último ejemplo que les voy a mostrar. Y esto es muy único y muy diferente fuera y que es en realidad he visto una gran cantidad de sitios web, su mayoría agencias operativas de sitios web creativas que usaban este tipo off layout, que es todo lo importante está alineado a la izquierda. Entonces tenemos un rumbo muy grande por aquí. Esto es en realidad que su logotipo, la SEC. Esto en realidad es una navegación. Puede ser en la parte superior o puede estar en el lado derecho y en la izquierda. Tenemos encabezados muy grandes y audaces, y todo lo demás es espacio en blanco. Entonces esto va a tener ah Lord off impacto en esta sección por aquí. Entonces va a tener, um, mucha importancia. Algo así. Por lo que va el dedo del pie resplandor en la oscuridad. Entonces es algo así se puede decir oscuro en una habitación blanca. Entonces si colocas ah mesa negra en una habitación blanca y no hay nada más, siempre te enfocarás en esa mesa negra de manera similar, en la siguiente sección, lo que hacen es tenemos rumbo a la izquierda encabezamiento muy grande y texto o información o imágenes de la derecha, y siguen así. Entonces este es un estilo muy bien fuera en muy bonito. Puedes probarlo en tus diferentes sitios web o representar No, te voy a mostrar algunos ejemplos. Creo que esta lección ya es muy larga. Entonces voy a pasar a la siguiente lección, y vamos a ver algunos ejemplos reales y cómo se han utilizado diferentes espacios vacíos son diferentes capas que han sido utilizadas por diferentes diseñadores. Entonces pasemos a la siguiente lección. 9. Balanza de tu composición: Ahora, el primer ejemplo que les voy a mostrar es esta página. No recuerdo, realidad seguir coleccionando diferentes diseños. Entonces este no es mi diseño en esto es algunos otros diseñadores de diseño. De todos modos, me gusta mucho lo sencillo y elegante Es mucho uso del espacio en blanco. Entonces si miras de cerca, puedes ver a la izquierda tenemos mucho espacio libre en blanco por aquí. Por lo que sobre el contenido está empezando desde aquí así y otra vez en la parte inferior. Tenemos mucho espacio de trabajo a la derecha. Tenemos mucho espacio de trabajo, y en la parte superior, tenemos mucho espacio en blanco. Por lo que puedes ver es típicamente nuestro libro lee out donde tenemos más espacio en blanco a la izquierda y la parte inferior y a la derecha y la parte superior, tenemos menos espacio en blanco. Por lo que esta es otra técnica que debes seguir. Tienes remolque crear algo como esto, y tendrá un efecto muy calmante o muy bonito en tus usuarios. Uh, sólo por diversión, creo que en realidad se agrandaron. Si esta imagen y esta línea fuera de esta caja y en el margen sólo para despejar algún interés. Y se ve realmente necesidad y muy agradable. Entonces, en realidad así es como vas a usar tu espacio en blanco de manera efectiva. No intentes dedo del pie, ten miedo del espacio en blanco. Trata de usarlo y creará un efecto muy bueno en tus diseños. Entonces veamos otro ejemplo. De acuerdo, entonces aquí hay otro ejemplo. Y aquí se puede ver es un diseño de bolsa de compras para sitio web de jabón. Supongo que este es el trabajo de otro diseñador. Este no es mi trabajo. Yo quería mostrarles cómo, en realidad, funcionan estos márgenes y estas cosas y se puede ver por aquí están en esta sección. Si lo miras por aquí, tiene mucho espacio en blanco a la derecha y a la izquierda. De acuerdo, entonces otra vez, se puede ver por aquí esta sección. Si tus ojos se mueven en destrucción, puedes ver que está tomando todo el espacio por aquí. Entonces esto en realidad es enterrar tu ah cancelado tu contenido. Entonces tenemos menos Contador aquí y mucho espacio en blanco que otra vez. Estamos moviendo nuestro contenido al espacio en blanco y luego de nuevo. Por lo que puedes ver esto va a crear un efecto muy bonito. En realidad, si intentas dedo del pie, implementa esto. Por lo que este es muy gran diseño otra vez. Lo están mostrando en un libro. Formarlo otra vez. Tenemos más espacio en la parte superior e inferior, y tenemos menos espacio en blanco a la derecha. Entonces esto en realidad es libro de la forma. Yo lo llamo libro para Mitt, y realmente me encanta cuando intentas usarlo en tus sitios web o en tus diseños de aplicaciones móviles . Entonces así es como en realidad los espacios vacíos que trabajan aquí tenemos un bloque estuvieron aquí así y el bloque que estamos aquí así. Y luego tenemos una cuadra por aquí así otra vez. Tenemos una cuadra por aquí así otra vez. Tenemos una cuadra o aquí así. Entonces esto es en realidad un poco a la izquierda. Creo que tal vez no está alineado correctamente, pero en realidad, este es un diseño alineado en el centro, pero tiene una buena variación del espacio en blanco alrededor. Entonces esto se ve realmente genial. Ahora les voy a mostrar otro ejemplo, que es éste, y pueden ver que estamos aquí. Aquí. Tenemos diferentes bloques fuera de diferentes alturas. A pesar de que no me gustan demasiadas horas creativamente, pero creo que puede funcionar. O aquí. Por lo que tenemos todo dispuesto horizontalmente de izquierda a derecha. Y se puede ver aquí tenemos a la derecha, creo que algún icono de Chad. Entonces tenemos que descargar botones por aquí. Y entonces tenemos esta cuadra por aquí y esta cuadra. Entonces si miras de cerca, esto es en realidad todo el bloque, ¿de acuerdo? Y luego tenemos ah, esta zona por aquí, esta zona por aquí y esta sección por aquí para que puedas ver a la izquierda. Tiene No tiene demasiado espacio en blanco, pero a la derecha, tiene mucho espacio en blanco apagado. Entonces es igual que si lo miras, puedes ver es que parece un arma. De acuerdo, así que esta es la base de retroceso del arma. Aquí es donde están las balas. Al igual que el efectivo y el golf. Y se puede ver por aquí. Este es el Nosal. Entonces esto es en realidad geométrico. Se puede decir que algunos diseños o algunos diseños se basan en algunas formas o algunas geometrías, por lo que también puedes usar eso también por aquí. Yo quería mostrarles una cosa, que es el espacio en blanco. Por lo que aquí tenemos una cuadra muy grande fuera del espacio en blanco. Aquí tenemos un bloque un poco más pequeño fuera del espacio en blanco, y aquí tenemos un bloque delgado fuera del espacio en blanco. Entonces puedes ver si lo miramos por aquí, tenemos casi un árbol muy herrero en estos bloques de espacio blanco blanco blanco. De acuerdo, entonces esto es en realidad lo que no voy a querer mostrarte aquí y guiarte que también puedes hacer algo así. También puede funcionar y todo en este momento. Por aquí se alinea en esta dirección a la izquierda. Entonces se mueve de izquierda, ¿verdad? Pero Y el diseñador, en lugar de enterrar las pres del vicio a la izquierda y a la derecha, varía los muelles del vicio en la parte inferior. Entonces esto es en realidad lo que quería mostrarte. Aquí es donde el diseño único Veamos otro ejemplo. De acuerdo, así que esto es como yo. Seguro que espera el 100% real de descuento este? Uh, oops. Creo que ahora al 100%. Por lo que se trata de un sitio web llamado trabajo de manera responsable. Y puedes ver este es el diseño que te mostré. Tenemos un rumbo muy grande por aquí. Al igual que se puede ver qué golpeó. Tenemos algunos locales pequeños. Estamos aquí y pequeño enlace por aquí. Entonces este es el diseño. A corto Usted en la última diapositiva fuera última parte fuera de mi última lección. Y se puede ver esta es la misma capa que hay usando Así que a la izquierda otra vez, tenemos rumbo. Y luego si nos movimos hacia abajo, se puede ver que tenemos este contenido. Entonces de nuevo, el encabezado está a la izquierda y se puede ver algún contenido está a la derecha. Entonces esto es izquierda, derecha, izquierda, probada. Y luego otra vez, tenemos algo a la izquierda. Se está virando en la cantidad de espacio en blanco a la izquierda y cabalgar y tener algunos que puedes ver en crear a alguien. Confíe en por aquí otra vez. Tenemos esto y de nuevo está dejando espacio en blanco brillante a la izquierda y a la derecha siguiente a la izquierda. Y de nuevo tenemos en la mayoría espacio en blanco sobrepasado y usar off a bit escala grande, más pequeño y más grande. Y si bajamos, nuevamente tenemos mucho espacio en blanco a la izquierda. Onda, Uh, eso es todo. Por lo que quería mostrarles que así es como se pueden utilizar diseños creativamente y se puede tener mucho espacio en blanco por aquí. Se va a poner mucho fuera de importancia y estrés en este apartado o aquí, que es su tagline o lo que sea. Pueden llamarlo solo que se dirigen. Y ah, esta es otra forma de leer tus diseños. Veamos un ejemplo más y luego vamos del dedo del pie Ir al paso al siguiente apartado. Ahora este es un ejemplo fuera de Ah, dashboard o una app. Esta es una aplicación web y puedes ver por aquí lo genial de este diseño que realmente quiero mostrarte, es luchar contra el espacio. Para que veas tenemos un espacio Lord off white a la derecha, y tenemos un señor del Espacio Blanco entre estas dos secciones. Por aquí, esta es la navegación de la izquierda y el contenido. Entonces entre el contenido y la navegación, tenemos mucho espacio en blanco, y realmente estoy viviendo este diseño porque es así se puede decir tan único y limpio porque fuera de su espacio en blanco lo usamos De igual manera, si nosotros mira la parte superior, tenemos espacio en blanco, pero es menos espacio en blanco. Entonces esto es en realidad y de nuevo te tenemos aquí espacio en blanco. Pero en realidad es la navegación que se puede. Si tenemos más navegación, podemos tener podemos llenar el espacio. Entonces me gusta mucho cómo ha sido este diseño Mucho espacio en blanco. Se puede ver por aquí. Aquí tenemos en la parte superior fuera de esta sección de contenido que otra vez dentro de esta sección de contenido. Entonces otra vez dentro, por aquí y otra vez concebes en la siguiente sección se está moviendo de nuevo. Tenemos mucho espacio en blanco. Entonces este es otro ejemplo de que puedes tener mucha variación fuera del espacio en blanco incluso en ábside web, donde la creatividad es limitada porque esta web es para el consumo de contenido. Y tiene un montón de diferentes secciones diferentes navegaciones, Así que no se puede crear mucho apagado. Se puede ver creativamente hacia fuera. Esto en realidad es para la entrega de contenido, y se puede decir que los sitios web de entrega de datos o las aplicaciones Web basadas en datos, por lo que todavía se puede utilizar mucho espacio en blanco por aquí y crear un diseño que se vea algo así. Entonces tenemos todo lo que queda alineado aquí otra vez. Tenemos todo la línea izquierda por aquí, pero tenemos mucho espacio despejado en blanco lo que está dando claridad y elegancia puntera este diseño. Por lo que espero que hayan disfrutado de esta lección. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente lección. 10. Diseño centrado para aplicaciones web y móviles: en esta lección. Vamos a hablar de un tipo diferente de diseños off y diferentes tipos fuera de lotes, y luego se deberían usar. Entonces 1er 1 Voy a hablar de una sola columna o de lo que la llamamos capa centrada. Por lo que todo estará mayormente en el centro alineado, y es una gran manera. Y cada vez que lo uses, vas a poner mucha atención a lo que esté en medio. Por lo que tenemos mucho espacio fuera de blanco en ambos lados y lo del medio. Sea lo que sea que tengas, es un producto. Es una carga. Es una forma, o lo que sea que tengas, va a sacar mucho de la atención. Entonces si tienes mucho contenido como cuatro párrafos, tres imágenes, creo que no debes ir por una sola columna. Leo. Es bueno para resaltar algo que tiene menos contenido. Entonces si tienes mucho contenido, creo que debes evitar usar una sola columna o centralmente outs. Ahora déjame mostrarte cómo se ve en realidad. Aquí. Se trata de una presentación sencilla fuera del centro diseño la mayoría de las veces cuando se abre un sitio Web tenemos logo a la izquierda y tenemos navegación superior. Y luego debajo de eso, tenemos un rumbo muy grande por aquí. De acuerdo, entonces tenemos algún lema o algunas otras características, o tal vez uno o dos párrafos de línea o cosas así. Entonces tenemos un video muy grande o una gran imagen fuera del producto o ah, forma por aquí. Y luego tenemos una llamada a Botón de Acción. Pero debes apuntarte a este producto o cosas así. Entonces tenemos algo por aquí. A lo mejor es seguro y seguro, y solo son 9.99 dólares mensuales. O tal vez algo así, que se va dedo del pie te dan un poco de garantía de que esto es un adiós, o deberías comprar este producto. Por lo que este es básicamente un diseño simple y centrado. La mayoría de las veces, se verá así. Puedes mover cosas por ahí como puedes tener algo como por aquí y dirigiéndote y piensa, como por aquí, es Depende de ti cómo realmente intentas dedo del pie, te mueves alrededor de las cosas y cómo agarras la atención de tu usuarios. Por lo que esto principalmente va a ser en la sección Haider o héroe o sección superior de tus diseños . Entonces todo esto se trata de centralmente fuera. Ahora, permítanme mostrarles sólo dos o tres ejemplos porque creo que lo han visto muchas veces les voy a mostrar algunos ejemplos, que obtengan la idea escrita en su mente o puedan ver grabada en sus mentes. Entonces veamos algunos ejemplos. Ahora aquí hay algunos ejemplos fuera del centro temprano, y la mayoría de las veces lo vas a ver en la cabecera porque necesitamos llamar la atención. Una y segunda es que tenemos que poner algo de énfasis en nuestro producto. Es tagline o lo que hace. Entonces aquí vamos. Se puede ver arriba. Aquí tenemos las mismas cosas. Tenemos todo en el medio. Entonces tenemos un lema de lo que tenemos este botón y aquí tenemos un botón más pequeño. O tal vez no mucho destacada sección reloj demo. Entonces de nuevo, tenemos esta ilustración en la parte inferior, que está otra vez en el medio. Entonces así es como este APRA inicia Io. Están poniendo énfasis o aquí, así que no es mala práctica usar esto creo que realmente creo que si puedes crear un ambiente muy agradable usando una tipografía agradable, tipografía y colores, puedes crear cualquier diseño. Si con un diseño simple. Si tienes un diseño muy sencillo, puedes crear un diseño elegante. No pienses que tienes una muy complejamente fuera de muy creativamente para contar tu historia. Puedes contar tu historia con sencillos diseños tendría al tener algún estilo tipográfico usando buenos colores. A continuación, tenemos este sitio web. A esto se le llama misma forma y se puede ver por aquí otra vez tienen algo que se envía temprano. Tan grande rumbo por aquí. Y yo empiezo. Tienen algunos int codiciosos pasando en el rubro, que me gusta mucho. Entonces tenemos esta carga. Creo que esto debería ser así. Pero de todos modos, es su propio estilo encendido, y así es como en realidad están agarrando la atención de su usuario y poniéndola pie esta zona por aquí, Entonces tenemos esta otra, que es punto fronterizo io. Y esto es yo creo, parte cuesta poco proyecto, o no estoy seguro de lo que es de todos modos, por lo que puedes verlo u oírlo de nuevo comienza con el diseño del centro. Si bien es una línea de la izquierda, Vamos a discutir esta técnica en las ideas creativas en el siguiente apartado. Así que ten eso en tu mente y mantén tu puedes decir, uh, tu, uh, nivel de curiosidad alto. Entonces mantén alto tu nivel de curiosidad y vamos a hablar de esto en la siguiente lección. Ahora mismo, sólo voy a decirte lo que es este leotardo. Diseño centrado Siguiente es base de campamento base. Kim es un sitio web muy popular y se puede ver todo escuchar muy grande y rumbo de tablero. Entonces tienen algún párrafo sería aquí mostrando lo que le hace a sus clientes. Después tienen su ciudad A o botón de llamada a la acción por aquí. Bonito toque. Y luego tienen alguna línea por aquí otra vez. Tienen algunas imágenes en el medio. Me gusta mucho este simple y recto y mucho fuera de énfasis en lo que hace. Entonces este es un gran ejemplo. De acuerdo, entonces aquí tenemos otro, que básicamente es un diseño de packaging de diseño, y se puede ver donde aquí este símbolo, que es su logotipo. Está en medio de toda esta ilustración, que realmente está dando énfasis, y se puede decir fuerza a este diseño. Entonces si lo miras por aquí otra vez, esto está diseñado en un diseño centrado. Todo está en medio. Pero se ve realmente bonito porque el diseñador ha usado mucho fuera crear caras tipo tipo chico , creo, para morir. rostros que están buscando crean por aquí, se han combinado así. Tan buenas ilustraciones, centro diseñado, todo se ve muy bien. Es así como los diseñadores crean ejecutan su diseño que no se preocupan mucho por simplicidad. Creo que diseños sencillos con buenos gráficos podrían tipografía y colores. Van a llamar más atención que diseños complejos. De nuevo, tenemos este finisher, oscuro CEO, y otra vez es algo. Alguna app. Y aquí tenemos de nuevo esa disposición central. Veamos algún ejemplo fuera de diseño móvil, que está en contra del ancla. Este es el sitio web de Shopify, y este es su móvil. Te respondes para que puedas ver o escuchar en Mobil. Tenemos muy menos espacio, por lo que a veces en tenemos, como hacia tres columnas. El diseño trataría de exprimirlo en una sola columna o columna centrada por lo que se va a utilizar. Ah, mucho tiempo en las interfaces móviles son interfaces de usuario para dispositivos móviles porque tenemos menos espacio de pantalla. Por lo que tendemos a ah, ya sabes, tener algunos conseguir algo de espacio alrededor moviendo nuestros objetos en el orden inferior superior. Por lo que todo lo que la línea central se puede ver o escuchar se ve genial. Por lo que no tienes guardia. La idea de cómo puedes usar centro, alinear diseños y probar dedo del pie crear énfasis en tus diseños. Te voy a mostrar uno de mi diseño reciente que hice y cómo uso center layout toe obtener el énfasis en la primera o la sección superior de ese diseño. Ahora bien, este es mi proyecto reciente que hice para impuestos atrasados. Ayuda de Este es uno de mis clientes de ustedes Estados Unidos, y ah, se puede ver por aquí esto es un tiefest personalizado sobre serio porque tiene cierta seriedad porque es una empresa tributaria. Por lo que este es un tiefest personalizado. Esto no es Google tiefest. Por lo que de nuevo, se puede ver muy buen contraste de verde y amarillos o naranjas amarillas, color ámbar y diseño muy sencillo. Esto es de nuevo diseños de centro. Quiero dedo del pie tener al usuario para llamar la atención sobre esto. Hemos ayudado a 300 mil a nivel nacional a obtener desgravaciones fiscales. Entonces esto es de nuevo, creo que un gran se puede ver inicio para cualquier cliente por aquí. Y luego tuvieron algo de crédito. Las certificaciones son y cosas así. Entonces esto es en realidad que quería mostrarte cómo puedes usar en el diseño central en y crear una buena impresión. Primera impresión en tus usuarios. Espero que no hayas destruido el centralmente fuera. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente lección. 11. Diseño de diseño centrado: ahora es tiempo para tu asignación. Ahora tu primera asignación es que vas a crear un diseño centrado donde vas a tener algún logotipo, algún algo o menú en la parte superior derecha o navegación o número de teléfono o lo que sea algún elemento en la parte superior. Entonces necesito que crees un encabezamiento muy grande, texto de tablero y con algún párrafo o texto acompañante en la parte inferior son carga y un hombro textual. Aquí, puedes usar una ilustración en la parte inferior. Puedes usar en imagen con algún efecto excesivamente como he usado. O aquí estás abierto a usar lo que quieras. Estás abierto a utilizar cualquier herramienta de diseño. Puedes diseñarlo en boceto. Será en realidad para un ilustrador de tienda. Lo que sea que tengas disponible ahora mismo contigo, puedes usar eso y quiero ver algo como esto. Entonces en este momento estoy usando una cuadrícula fuera de Boucher Grid, que es 12 columna 30 obtuvo más de 65 columna Bert y 1 65 márgenes en sitios a bordo, y mi lienzo es en realidad 14 40 vacío. Entonces también tengo ah video en YouTube sobre la creación de botas, calificaciones sha'ab para que puedas echar un vistazo a mi dedo del canal de todos modos, Así que este es su diseño. Quiero de ti Encabezado Ah Diseñado con algún diseño centrado de un diseño de columna. También puedes hacer algo como esto, que es mi trabajo anterior de vuelta. Hace un año. puede utilizar tienen un encabezado un párrafo uno esta carga de prueba demo y algún texto que lo acompaña en la parte inferior. Para que también puedas usar algo así. Y asegúrate de que vas a usar unos colchones por aquí como te he dicho. El ritmo vertical, Brocks. Así que intenta usar algunos bloques en la parte superior o inferior de este. Y también por aquí, donde les he mostrado estos bloques verticales en mis lecciones anteriores. Entonces intenta usar esa técnica dedo del pie. Tener un buen espaciado entre tus elementos. Así que asegúrate de que vas a utilizar estos espacios verticales y el ritmo vertical también. Así que empieza a diseñar no y crea algún encabezado de aspecto impresionante diseñado con algún diseño central . Y espero ver pronto tu diseño. Entonces hagámoslo rápido. Y que no se olvide de presentar esta asignación 12. Dos diseños de column, con ejemplos: ahora, otro diseño popular es el diseño de dos columnas. O a veces lo llamo maquetación 50 o maquetación de revistas. La mayoría de las veces cuando ves o lees una revista o un periódico, tenemos mayormente contenido e imágenes en cosas de izquierda y derecha como esa. Entonces esto básicamente es dividir tu contenido en dos secciones. Uno podría ser imágenes uno podría re impuesto. Uno podría ser producto. Uno podría ser sus características. Entonces esto en realidad está dividiendo tu diseño ahora. Algo que hay que notar es que no debe ser siempre 50 50 layout. Se puede cambiar la columna. Aves. A lo mejor eres del lado correcto. Tienes más de ella fuera de tu columna y la izquierda es más pequeña, por lo que esto depende de ti. Por lo que es más fácil jugo de dedo con múltiples imágenes y texto de lado a lado. Y si tienes un tema o una sección puedes tener fácilmente, puedes tener fácilmente ah, crear lee out y puedes mostrar tu información fácilmente, y yo solo me acabo de mesa en ese ajustable nosotros a tus usuarios. Entonces les voy a mostrar muchos ejemplos y cómo podemos crear estos diferentes diseños de dos columnas . Entonces, empecemos ahora. Ahora mismo les estoy mostrando un inicio muy típico. Ah, diseño de dos columnas cuando tenemos un video a la derecha o una imagen a la derecha o imagen de producto o pantalla de aplicación móvil corta por aquí y luego tenemos a la izquierda. Tenemos algo de rumbo por aquí de lo que tenemos un tagline o línea característica línea destacada. Entonces tenemos una carga y ver demo o probarlo ahora o probarlo durante 30 días. Entonces tenemos algún tipo de patrón fuera como este. Entonces este es un diseño muy típico de dos columnas, por lo que estamos dividiendo más la mayor parte del tiempo así. Ahora hay que notar una cosa que usamos es la mayoría de los usuarios. Van a escanear tu sitio web o diseñar de izquierda a derecha, así que van. Sus ojos se van a golpear por aquí por primera vez, así que asegúrate de lo que quieras que el usuario lea primero. Este va a ser tu deporte. De igual manera, de los idiomas de derecha a izquierda, la mayoría de las imágenes y la mayoría de los títulos y encabezamientos estarán de este lado de la derecha. Entonces esto es lo que debes notar. Ahora, aquí hay otra variación de los mismos 50 50. Pero puedes ver que estabas aquí. Aquí. Yo he hecho algo nuevo, que es que extendí esta imagen a la derecha a todo el fondo. Se está saliendo de esta sección o atropello. Entonces esta es otra forma. Y además, puedes tener un formulario por aquí con el botón enviar. La mayoría de las veces si estás diseñando una página de aterrizaje y tienen muchos formularios, por lo que puedes tener un formulario a la derecha y tal vez algunos encabezados y texto o imágenes a la izquierda . Por lo que hay muchas combinaciones que puedes hacer. Se puede tener algo como esto. Y vamos a, um, hacer de este mazos líneas así. Y tenemos líneas de sexo por aquí así. Ups. Al igual que esto. Y después hemos intentado No, algo como esto. Y tenemos algún tipo de maquetación como este. Por lo que hay muchas cosas que puedes hacer por aquí ya que puedes cambiar tu diseño, puedes Puedes hacer muchas cosas. A lo mejor puedes dividir tus imágenes en dos como ésta. como si tuviéramos una imagen o aquí y una aquí o tal vez alguna ilustración o algo el estilo. Por lo que en realidad estamos asignando un 50% de descuento en este espacio para nuestras imágenes, y la izquierda es básicamente contenido. Entonces ahí voy a mostrar,ya sabes, ya sabes, ejemplos fuera de cómo se puede usar y cómo se usa por diferentes diseñadores. Entonces sigamos adelante y veamos algunos ejemplos. Ahora, aquí hay un ejemplo, y es una página web de portafolio por ramen, un producto. Diseñarlos desde Barcelona y puedes ver por aquí este es un uso muy sencillo fuera de disposición de dos columnas para que puedas ver aquí su pelo. Tiene algo de bienvenida a Dexter aquí, alguna ilustración fuera de él. Después tiene imágenes en caer en columnas. De nuevo, esto es otra vez. Todo está en dos columnas. Entonces esto es muy sencillo, muy elegante. Trabajo limpio de Ramón. Ahora aquí hay otro hermoso diseño, que es un juego de dos columnas sobre. Se puede ver que este encabezado es de dos columnas a la izquierda. Tenemos algunos textos y aprender más botón, y a la derecha, tenemos un producto. Entonces esta es otra forma de introducir un producto Y si tienes una o dos variaciones de ese producto o solo producto, esta es una gran manera de dedo del pie. Obtén un poco de énfasis y además cuenta un poco de información sobre tu producto. Se trata de un sitio web de comercio electrónico muy popular, que es Shopify, y se puede ver que están usando el mismo diseño de dos columnas por aquí, que es Ah, esto encabezando un gran escondite a la izquierda y en la imagen y esto. En realidad, esto realmente está por aquí a la derecha, y de nuevo se puede ver en esta sección nuevamente tienen alguna característica. Están contando las características, Comienza tu viaje de negocios. Y así han vuelto a utilizar este diseño de dos columnas. Otra vez. Tenemos un diseño de dos columnas con alguna variación a izquierda y derecha y de derecha e izquierda. Esta es una buena técnica dedo del pie obtener variación porque tus musas mente se van a aburrir con el mismo Badran. Entonces esto en realidad es muy ating. El dedo del pie patrón muestran que este candidato de nuevo se puede ver es esta sección. Este es un gran ejemplo. Fuera de un diseño de libro. Ya has visto un libro. Si lo abres así es este es uno pagado. Esta es la página izquierda. Entonces este es un gran ejemplo. Y creo que deberías probar algo como esto. Voy a hacer una nueva asignación para que tengas alguna imagen a la izquierda y tengas algo texto a la derecha y un botón en la parte inferior. Algo así. Para que veas que te dieron la idea. Y hay muchas maneras diferentes en las que puedes usar este diseño de dos columnas. Aquí tenemos imagen a la izquierda y impuesto a la derecha. En la parte superior, tenemos texto en la imagen de la izquierda a la derecha que en el medio. Tenemos algunas variaciones de textos e imágenes, cosas así. Por lo que esta es una gran manera de salir usando tu diseño de dos columnas. Ahora, aquí te voy a mostrar una aplicación muy agradable hace muy bien diseñada de Huberdeau. Estoy siguiendo por un tiempo a esta agencia de diseño. Y lo que quería mostrarte como esta pantalla de la izquierda, esta primera pantalla de la izquierda y puedes ver que estabas aquí. Tiene un diseño de dos columnas. Entonces si nos acercamos aquí, se pueden ver estas 24 opciones se dividen en dos columnas iguales, y lo muestra de manera muy sencilla. Es más fácil puntear por aquí. Si tienen así para botones por aquí, pueden tocarlo fácilmente por aquí y usar estas características. Entonces este es un gran uso fuera de esta columna Ah dos aquí. No te limites que estos se pueden usar solo en móviles, solo en sitios web. También las puedes utilizar en laboratorios móviles . Aquí tienes otro ejemplo de una aplicación móvil, y puedes ver por aquí en esta sección o escuchar holgados hasta tres deportes que te gustan. Tienes, um, cuatro cosas por aquí para seleccionar, y tienen, como, un diseño de dos columnas. Por lo que este es otra vez otro ejemplo de un diseño de dos columnas. Es fácil de tocar. Es más fácil navegar. Se puede mover hacia abajo fácilmente. Tienen mucho fuera buena zona para aprovechar los gastos generales. Entonces esta es de otra manera. Puedes usar eso en tu APS móvil. De igual manera, puede ver este es el diseño reciente que hice, y se puede ver donde estoy aquí otra vez, usando un diseño de dos columnas para mostrarlos a video uno al lado del otro. Estos son en realidad mazos, videos profesionales y esta es una gran manera de mostrar algo así. De igual manera, si vas abajo en esta sección por aquí, servicios de texto disponibles, puedes verla u oírla de nuevo. Estoy usando son dos columnas para mostrar todos estos puntos de viñeta o servicios de texto. Por lo que esta es una gran manera de salir usando dos columnas. No pienses que tienes que usar una imagen y un impuesto. Se puede utilizar texto dentro de estas columnas por lo que de manera similar, se puede ver qué aquí. He usado lo mismo por aquí dos columnas, pero aquí sólo para crear algún interés, cambio esta información que es un poco fuera diferente de los puntos de bala. Entonces este es de nuevo el uso off izquierda, derecha, dos columnas. Por lo que espero que hayan disfrutado de esto. Ah diseño. Puedes decir lección sobre diseños y cómo usar tus dos columnas, Despidos , creatividad con creatividad. Ah es si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 13. Diseño de columna del proyecto 2: Ahora, quiero que crees un diseño de dos columnas usando las mismas técnicas que te he mostrado antes . No olvides usar el espaciado vertical, correcto. Espaciado vertical y actualización bullsh por aquí, se puede ver por aquí estoy usando el mismo pan bootstrap. Y lo que estás viendo es la variación del diseño terminó, que es el diseño de línea central. Y esta la puedes ver está usando dos columnas. Por lo que este formulario, se puede ver conseguir un concierto y cancha gratis que estoy usando a la derecha y a la izquierda. Tengo algo de texto. Y también estoy usando la técnica, que se llama superposición, que aprenderás en las siguientes secciones en boss Techniques. Y puedes ver por aquí, dedo del pie Bella de que estoy usando algunas imágenes o algunos iconos o lo que puedas usar por aquí. O tal vez Facebook como se ve en revistas o algo por el estilo. Entonces puedes usar algo algunos logotipos por aquí, algo así. Así que intenta crear algo como este diseño de dos columnas. No quiero que siempre tengas un formulario por aquí, porque esto era un atracón de préstamos. Entonces bebo algo así déjame mostrarte algunos ejemplos más. Aquí hay otro ejemplo. Este no es mi diseño, pero puedes ver puedes usar algo así y lo que yo quiera. Uh, lo que quería mostrarles aquí es éste. Entonces tenemos estos pocos logotipos por aquí que este hombre o quien sea que sea presentado por aquí, por aquí y por aquí. Y puedes usar algo como esto. Puedes usar un logotipo o algo por aquí. Entonces intenta usar dos columnas para tener tu capa así. Puedes usar 60 40% 50 50% el porcentaje que quieras usar. No estoy, ya sabes, presionándote para que uses 50 50. Se puede ver. Aquí está mi otro diseño. Mi viejo, que es hace un año. Y se puede ver por aquí. Estoy usando dos columnas. Se puede usar lo mismo, y eso es también tratar de crear un diseño de dos columnas. Y estoy deseando ver todas sus asignaciones. Así que empieza a diseñar tu asignación ahora. 14. Diseño de la columna múltiples en la mayoría web en el diseño de UI web: Ahora nuestra siguiente parada son las capas de varias columnas. Si tenemos columnas como tres columnas, cuatro columnas, seis columnas, entonces en realidad estamos usando un diseño de múltiples columnas. He visto muchas revistas usando tres columnas. Entonces por eso he escrito por aquí maquetación de revista. A pesar de que no es totalmente un diseño de revista, pero muchos medicamentos usan tres columnas. Lee Nuestro dedo del pie muestra diferentes imágenes de acción o diferentes artículos e historias. Entonces si tienes mucho contenido fuera, puedes usar columna T o capa de cuatro columnas porque tienes que dividir tu contenido como si tuviéramos cuatro viñetas, viñeta o tres puntos de viñeta o tres características fuera de un producto o cuatro características fuera de un producto. Vamos a dividirlos inter. Diferentes columnas. Entonces este es en realidad el uso off multi columna Lee hours. Ahora les voy a mostrar algunos ejemplos, algunos diseños de muestra, y vamos a ir a ejemplos en vivo, diferentes sitios web y a quitarnos la idea. Lo que en realidad es el diseño de varias columnas. Ahora aquí hay un ejemplo o un sencillo diseño que puedes hacer en el inicio o encabezado fuera de tu sitio web. A lo mejor tienes que imágenes por aquí. Dos productos dedo del pie, tal vez algo así a cajas. Sea lo que sea que tengas, esto en realidad se divide en tres columnas diferentes. Entonces tenemos 12 y tres, así podemos tener a alguna persona parada aquí con alguna declaración de impuestos. Tenemos algunas características por aquí, O r Tal vez una opinión de clientes por aquí. Entonces tenemos algo de encabezamiento y texto por aquí y probarlo, pero molestar lo que sea. Se puede hacer en muchas combinaciones diferentes y esto, pero muestra que tenemos más de tres tipos de contenido diferentes. Uno es un laberinto. Uno es tal vez un testimonio cuando tenemos encabezado de texto oculto y tal vez un texto relativo y una ciudad o Caldwell Chamberlain. Por lo que en realidad tenemos tres cuadras fuera de texto. Entonces si tenemos, como cuatro cuadras cinco cuadras, quizá no utilicemos este. A lo mejor podemos solo nuestro contenido así. Por ejemplo, si tengo, como, dos testimonios ah, los puedo conseguir así. Por lo que hay muchas maneras en que puedo hacer algo así como este testimonio más grande, más pequeño testimonial. Nuestros comentarios de clientes a las opiniones de clientes o escuchar la imagen del producto por aquí. Y, um, el rubro y la introducción del producto y pruébalo ya. Pero un por aquí. Por lo que hay muchas maneras en que puedes hacer la racha y usar esta multi columna, una de tres columnas o cuatro diseños de columnas. El cabello es otra representación fuera del mismo diseño de tres columnas, y se puede ver aquí. En realidad trato de usar algunos márgenes en la parte superior por aquí. Entonces esto son tres columnas Hemos dejado una columna por aquí, una columna por aquí para el espaciado, y luego en la siguiente sección por aquí tenemos cuatro características o cuatro pasos. Paso 1234 y los he dividido en cuatro cajas diferentes. Ahora, por qué dejé esto estos márgenes o cabeza solo para crear algunos en solo punto en tu diseño, si el usuario está viendo como de manera lineal, todo es lineal, ingeniero lineal, se van a conseguir aburrido. Se van del dedo del pie. Sumergirlo. ¿ Sabes cuáles son las similitudes? Misma experiencia una y otra vez. Así que intenta muy con tu espacio en blanco por aquí con tus columnas. Por aquí tenemos tres columnas y luego tenemos cuatro columnas otra vez. Podemos tener dos columnas otra vez, podemos tener. Ah, distribución central otra vez. Entonces de nuevo, podemos tener algo así. Entonces esto es sólo para decirles que estoy usando dos tipos diferentes de multi columnas o aquí tres columnas y cuatro columnas al mismo tiempo. Por lo tanto, no trates de tener miedo o prueba con el dedo del pie. Piensa en un muy que siempre debería usar cuatro bloques o cuatro piezas diferentes fuera información y dividirlas así. Puedes usar 34 son variaciones como esta. Aquí está mi diseño reciente. Sólo ejemplo del dedo del pie te dan alguna idea. Se puede ver donde Aquí estoy usando tres columnas diferentes dedo del pie tres columnas principales diferentes . Para mostrar estos tres, puedes decir características o servicios de confianza o lo que tengan. Entonces esto es en realidad que tengo antes que tengo dos columnas que tengo tres columnas. Entonces han mandado temprano en Déjame mostrarte otra vez. Tenemos tres características diferentes tres pasos diferentes por aquí. Pisó un dedo del pie tres. Uh, por aquí, se puede ver que estoy usando cuatro columnas diferentes. Y si quieres que encienda la cuadrícula, déjame pensar en esta tecla de acceso directo. Entonces aquí está mi grilla y se puede ver esto es un grado bootstrap y se puede ver que estamos aquí. He dejado estas canaletas por aquí, y éstas están tomando, como, como, cuatro columnas cada una. Esto está centrado. Este es centro centrado. Esto vuelve a tomar cuatro columnas cada una. Está tomando tres columnas cada una. Y, um, esto es otra vez el diseño de dos columnas y tenemos de nuevo por aquí un diseño de múltiples columnas, que es de tres columnas el o así tenemos esta columna, esta columna por aquí, que es ésta. Entonces tenemos esta columna por aquí. Y luego tenemos esta columna por aquí para que veas cómo dividí este pie de página en tres columnas diferentes y tenemos enlaces a sitios. Tenemos contacto. Tenemos la información sobre este sitio web. ¿ Qué? ¿ Este producto? Lo que sea que tengamos. Entonces esta es una gran manera se puede ver donde aquí, En realidad, lo dividí con algunos colores a puerto. En realidad, estas son tres columnas Aquí. Tengan otro ejemplo apagado. Aplicación móvil. Tú lo estabas. Se puede ver lo que Aquí. Estos son juegos diferentes. Supongo que tienda de Sticker es una tienda de pegatinas y toda la cuadrícula en realidad está construida sobre tres columnas por lo que es crear a orilla diferentes productos. Lo has visto muchas veces en el comercio electrónico, Step side on clothing website. Esta es una gran manera de mostrar una gran cantidad de datos porque tenemos, ah muchas cosas que mostrar, así podemos mostrarlas en un gran off tres o cuatro elementos diferentes. Es más fácil escanear los ojos. Entonces esta es otra forma. Ahora aquí se puede ver un ejemplo muy sencillo y se puede ver aquí los muertos en realidad se dividen en cuatro columnas diferentes. Uno es más grande, tres son más cortos. Y cómo en realidad estos datos de tu diseñador es que los muertos en realidad es martes 26 de febrero. Se requiere más con así que tienen Ah, nuevo, tienen algún tiempo 7 30 B m o un M. Así que esta es una gran manera de salir mostrando el picker de fecha. Este es otro gran ejemplo fuera usando tres columnas por aquí para que puedas ver esto es un gran diseño en. Tienen, como, como, seis opciones por aquí patrocinadores porque los expositores de agenda nos contactan mapa, por lo que están usando tres columnas diferentes. Entonces si miras de cerca en esta sección superior por aquí, debajo de este encabezado de la página de inicio puedes ver que tenemos de nuevo estas tres columnas. Entonces si intento dedo del pie, ten algo de alineación o pelo para que puedas ver aquí es la primera columna de la que tenemos la segunda columna. Y entonces tenemos esta tercera columna por aquí algo como esto, para que puedas ver un poco fuera de gooder dentro de ellos, algo de ropa de cama. Entonces solo para separarlos con algún espacio en blanco, y luego tenemos dos columnas diferentes. Esta es otra gran manera de dejar de mostrar información. O si tienes muchas opciones off o información para mostrar, puedes mostrarlas en el diseño de columna de té o en el diseño de múltiples columnas. Ahora este es el sitio web de Wall Marks, y me gusta su diseño un poco minimalista. Y, uh, es otra vez se puede ver por aquí tenemos tres columnas diferentes. Gratuito recolección de abarrotes entrenamiento involucramiento dot com. Por lo que el envío gratis. Entonces de nuevo, tenemos cinco columnas diferentes para mostrar diferentes categorías de las que tenemos nuevamente usando el mismo diseño. Cinco columnas. Entonces otra vez, tenemos tres columnas otra vez. Tenemos tres columnas, una izquierda, una es más grande y el dedo derecho son un poco más pequeño. Entonces esto es en realidad el uso de múltiples columnas, y espero que no hayas destruido la idea y cómo usarlo correctamente. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 15. Diseño de la versión multicolumn: Ahora es el momento de crear varias columnas Lee o tres columnas cuatro columnas. Lo que quieras, puedes usarlos incluso cinco columnas. Ahora te voy a mostrar mis diseños y algunos ejemplos, y puedes ver por aquí. Yo quiero algo así por aquí. Entonces aquí tenemos. Tengo en el texto de la izquierda a la izquierda y texto a la izquierda. Entonces todo es una línea a la izquierda. Izquierda, izquierda, izquierda. Pero el todo continúa en medio. Ah, y en el siguiente, Por aquí, Aquí tenemos. Ah, este título de la izquierda. Pero todo está en el medio como ícono está en el centro fuera de esta tarjeta en también, este texto está en el centro. Entonces lo que necesito que hagas es crear algún encabezado como este, limpiar al menos cuatro o t columnas y tres usando icono, algún impuesto y algún enlace por aquí y crear diseño de múltiples columnas. Permítanme mostrarles un ejemplo más. Ahora puedes ver esto está bajo diseño, que es mi reciente, que va a ser mi nuevo diseño de sitio web y puedes ver u escuchar aquí tenemos tres columnas y estoy mostrando todos mis cursos así. Puedes usar algún botón por aquí o puedes usar encabezado o lo que sea. Tan cosa de puerta que siempre tienes que colocar. Te diriges en el medio. Puedes usar el escondite a la izquierda y todo está en medio. Entonces esto es lo que necesito. Quiero que crees tres columnas de diseño de cuatro columnas y me des algo como esto. Entonces estoy leyendo para su asignación. Asegúrate de que te vas con el dedo del pie. Presenta esto porque así es como vas a mejorar cuando trate de revisarlos. Cuando trato de mostrarte tus errores y ah, en este proceso, también aprendí mucho. Entonces esto es, se puede decir, aprendizaje mutuo y la comprensión de los místicos de diseño y diseño. Por lo que estoy viendo con ganas de mirar hacia adelante sus asignaciones, o sí las someta ahora 16. Diseño de flores ► Secreto: Ahora vamos a hablar de un diseño de tipo off muy diferente, que llamo un lei de flor. Ahora bien, ¿ por qué lo llamo flor? Porque tiene forma de una flor con algunas batallas. Para que puedas ver cada vez que veas una flor, tiene, Ah, gran medio. Y entonces tenemos cinco o seis o cuatro batallas en todo su tamaño. Por lo que esto se llama diseño de sabor. Ahora bien, ¿por qué y cuándo deberías usarlo? Cuando tienes un elemento central, tienes que enfocarte en un producto, por ejemplo, una aplicación móvil o algún cigarrillo o algo más. Entonces sea cual sea el producto que sea, probablemente será. Será mayormente en medio de la disposición en el centro fuera del punto culminante. Por lo que es bueno para resaltar diferentes, como cuatro o cinco o seis o siete características diferentes fuera de un producto. Normalmente, tendrá, como debes tener al menos cuatro cosas diferentes alrededor del elemento central, como cuatro características diferentes. Llévala, puedes presentarlas En este diseño, te voy a mostrar unos arreglos de los que vamos a ver algunos ejemplos Cómo los demás como usándolo y cómo lo he usado en mis diseños anteriores. Entonces veamos algunos arreglos. Ahora. Este es un arreglo muy sencillo que hemos visto muchas veces, pero quizá no lo reconozcas. El producto está en el medio. Podría ser más por laboratorio. Podría ser algún perfume o cualquier otra cosa. Y luego tenemos características por aquí. Característica. 123456 Así que esto es en realidad estoy usando seis batallas fuera de esta flor, así que lo llamo diseño de flores. Otros podrían no llamarlo flor en voz alta. Podrían llamarlo otra cosa, pero por simplicidad y para entender la idea fuera del trineo. Este es, ah, diseño en forma de flor, y este es un ejemplo muy típico fuera de él. Ahora he encendido mi columna. Urgh lleva 12 rejillas de columna, y se puede ver u escuchar cómo he usado lo mismo. A flor lei fuera a mi beneficio, por lo que tenemos una imagen de producto en el medio. En la parte superior. Tenemos rumbo a la derecha. Tenemos que características a la izquierda. Tenemos dos características con algún impuesto y en la parte inferior tenemos por ningún botón. Por lo que sigue siendo diseño de flores. Pero tiene 123456 batallas. Y he usado mi escondite y por ningún botón en el mismo arreglo fuera de un diseño de flores. Espero que hayas aprendido mucho y cómo puedes usarlo. No, veamos algunos ejemplos. Adelante y déjame mostrarte mi diseño primero. Este es uno de mi viejo diseño el cual creo que he usado la competencia. Y esta es una entrada de competencia de diseño. Y se puede ver aquí, aquí, en esta porción de aquí. Esto es básicamente un cigarrillo e y se puede ver que estoy usando este mismo diseño de flores. Tenemos el producto en el medio a la izquierda. Tenemos cartuchos y baterías a la derecha. Tenemos algunas características como demises de auto de carga portátil, Hombre tabaco tradicional contó en todas esas diferentes características en la parte superior tenemos rumbo y subpartida Tagline. Entonces al fondo, tenemos por nadie. Entonces esto está usando estoy usando por aquí diseño de flores. Tal vez lo juzgues mal que tiene tres columnas, pero aún así es un diseño de flores. Tenemos como todo arreglado alrededor de este objeto medio eso Aquí tenemos otro. Esto no es una flor lei fuera. Se trata básicamente de tres columnas, así que esperanzas Así que esto es lo que quería mostrarte que puedes usar el diseño de harina como este de estas diferentes maneras. No, les voy a mostrar algunos ejemplos más. No, este es el segundo ejemplo. Y ah, aquí se puede ver a este diseñador que tiene o ella ha usado Ah, este diseño listo de manera única Porque se puede ver esta forma o el cabello chispeante está en un formato de tres d. Está encendido en una perspectiva, uh, uh, diseño de perspectiva. Y tenemos otra vez lo mismo dando vueltas por aquí. Por lo que este producto está en el medio. Tenemos agilidad, vitalidad enfocada, energía y atributos de producto en la parte inferior que en realidad están haciendo un layout de flores. Bert. Ah, aquí. Se puede ver que está un poco desplazado en el en esta dirección. Entonces en la parte superior, no tenemos ninguna batalla por aquí, así que se puede decir que es 1/2 amorosamente fuera, pero es casi el diseño de flores de piso, que yo llamo diseño de flores. El producto está en medio y todo lo demás está a su alrededor. Entonces este es básicamente otro uso off layout de flores otra vez. Este es otro sitio web de algún diseñador ruso y se puede ver por aquí de nuevo. Tenemos parque en medio y todo está a izquierda y derecha. Y en la parte inferior es esto de nuevo es un uso del flub de piso temprano y se puede ver por aquí que no está usando ningún encabezado en la parte superior. Y tenemos 123456 a la izquierda y a la derecha. Y siete es el básicamente en el aceite de botón aquí. Por lo que esto es de nuevo diseño de flores. Eso se puede usar de muchas maneras. Se puede ver u oír, escuchar. Tenemos iconos con texto y arriba Burton y una imagen. Entonces esta es otra forma. Aquí hay otro ejemplo de maquetación de harina, aunque no parece reconocerlo, que es disposición de flores de piso, pero creo que no tiene sabor. Pero se puede ver este estante. Sherlock Holmes en el medio está casi a medio de este diseño o el punto central de este diseño. Entonces tenemos 123 a su alrededor. Entonces tenemos esta cerradura cerrada Este es también el rumbo. Pero es, ya sabes, alrededor de este personaje principal fuera de la serie. Por lo que este diseñador, han utilizado esto en. Ah, se puede decir creatividad porque todo está dispuesto de una manera diferente. Por lo que puedes ver aquí tenemos imagen y texto sobre texto en la parte inferior. Ese texto de imagen en el texto de la imagen de la izquierda en la imagen de la derecha, texto en la imagen de la izquierda, texto en la imagen, y luego tenemos este encabezamiento. Entonces esta es otra forma creativa. Yo solo estoy tratando de abrir tu mente en diferentes outs creativamente porque esto te va a ayudar mucho mientras estás diseñando. No trates de vincularte en rejillas de remolque fuera de alimentos así, como cuatro artículos iguales. Trata de velo tu diseño. Trata de tener algún uso de creatividad en tus diseños. Espero que hayan disfrutado de este diseño de flores, conferencia o lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección 17. Diseño de flores de la el proyecto: Ahora es tu momento de presentar tu tarea y crear algo con harina. Temprano, se puede ver En este momento he usado Fitbit verso de alcista y creo esta sencilla flor Colocar muy rápidamente. Y no lo estaba, Ya sabes, lo acabo de crear en 10 minutos. Entonces un t al menos estoy esperando algo como esto de ti. Entonces producto en el medio, tenemos seis características o aquí y aquí está la página que tomé. De acuerdo, entonces esta es la página. Este es el texto. Estas son las cosas que también puedes usar los iconos. No tuve tiempo de encontrar todos estos iconos. Puedes utilizarlos para realzar tus diseños. Y ah, este es el lei florecido que quiero. Entonces déjame mostrarte, um donde tenemos éste. De acuerdo, entonces uno es éste y el 2do 1 es éste. Entonces ya te mostré éste, que es Ah, mi viejo diseño. Y se puede ver que tengo ah, casi encantadora fuera. Pero las cosas son diferentes. Tenemos algunas características por aquí a características por aquí y por nadie. Por lo que puedes crear algo como esto y puedes tener una aplicación móvil, nuestra pantalla móvil en el medio y mostrar algunas características por aquí. Y también puedes tener algo similar a esto, como lo he usado pero al revés. Y yo soy las cuatro veces usando o tifus que estoy usando es realmente grande, que es una cara de die libre. Y eso es todo. Entonces si puedes crear algo como este diseño de flores, me encantaría ver tus asignaciones para empezar a hacer tu tarea ahora mismo. 18. Grid de Masonry en el diseño web y el diseño de la aplicación móvil: en esta lección. Ahora vamos a hablar de rejilla de albañilería ahora. Por qué se utiliza. Si tienes muchas imágenes, tienes muchos productos fuera. Tienes, ah, muchos puestos fuera. Artículos que puedes mostrarlos usando credo de albañilería. Ahora ayunar es que si tienes mucho fuera de página web basada en artículos o contenido donde tenemos muchas imágenes o artículos de noticias, puedes mostrarlos usando este segundo grado. Por qué Su nombre es albañilería. Porque si has visto una bola de ladrillo Vaulx llena de ladrillos cuando la señorita y tratar de construir esa pared, tienen un patrón. Tratan de encajar diferentes ladrillos en diferentes estilos. No están poniendo cada ladrillo uno encima del otro. Algunos descansos están a la derecha a la izquierda, y conforman toda la pared. Entonces así es como es este nombre, como en realidad la codicia de mampostería, y les voy a mostrar algunos arreglos de los que vamos a ver algunos ejemplos. Sitios web que los están utilizando. Personalmente no me gusta faltar mucho están al menos de acuerdo que desconocido e Ingrid Así que faltan algunos las calificaciones. Si te arrastran hacia abajo. Están Hay contenido apareciendo una y otra vez. Y ahí están, pantalla interminable. Podrás llamarlos y Astrid. Pero Mason estuvo de acuerdo, no es en realidad una cuadrícula de desplazamiento interminable. Es básicamente Ah, tiempo de diseñador de diseño. De acuerdo, así que veamos algunos arreglos y luego vamos a ver algunos ejemplos. De acuerdo, entonces aquí hay una típica avaricia de albañilería. Se puede ver por aquí nosotros aquí. Tenemos tres productos a la izquierda, y tenemos producto y producto en el medio Que son grandes. Ah, un poco más grande que las cajas de productos izquierdas. Nuestras tarjetas. Puedes llamarlos a la derecha. Tenemos productos más pequeños a más pequeños, y luego tenemos un muy grande para en la parte inferior. Por lo que esto realmente falta. Acordado. El concepto es que te vas dedo del pie tienen diferentes tamaños fuera de ladrillos, por lo que puedes ver en el medio. Tenemos piedras muy grandes a la izquierda. Tenemos ah, briggs estándar a la derecha. Tenemos dos ladrillos pequeños de los que hemos usado. Un ladrillo muy uno grande. Todo esto depende de ti. Tienes que crear alguna variedad tienes que crear, alternar algunas longitudes o alturas del dedo del pie, ya sabes, crear algún interés en tu diseño. Entonces, ¿así es como vas a usar rejilla de mampostería? Aquí hay otro arreglo fuera de la misma codicia albañilería. Pero esta vez estoy tratando de usarlo de una manera diferente. En un creativo se puede ver que estamos aquí. Aquí tenemos Ah, horizontal. Ah, imagen de producto muy grande en la parte superior que está tomando dos columnas. Y tenemos de nuevo a la derecha más pequeño descanso de lo que tenemos uno grande, Ni aquí que otra vez en medio. Tenemos algunos descansos amplios a la izquierda. Tenemos algunos ladrillos rojos que son tamaños estándar. Por lo que hay, como, toneladas de diferentes combinaciones, diferentes diseños que puedes hacer con miss y remordimiento. Entonces depende de tus ideas creativas lo que intentas hacer para que puedas tener algún producto de función en esta área en la parte superior, donde tenemos imagen muy grande de lo que tenemos algunos anuncios a la derecha. A lo mejor algún anuncio, tal vez algún cuadro de suscripción a la izquierda. Podemos tener nuestros artículos en diferentes categorías, algo así. Por lo que hay muchas posibilidades. Todo dependerá de tu contenido por lo que debes tener primero tu contenido. Puntera lista. Aplicar este diseño de rejilla de mampostería. Ahora, veamos algunos ejemplos y el uso del tiempo riel fuera de estos diseños. Ahora bien, este es un ejemplo de avaricia de albañilería. Pero realmente no me gusta esta capa. ¿ Por qué? Hay dos razones. Una es que ese tipo fuera. Diseños muy creativos que están totalmente fuera del camino van a confundir a tus usuarios. Entonces en la parte superior, podría ser bueno, pero por aquí, esto es totalmente un desastre. No puedo decir que sección es o imágenes más tarde resección del dedo del pie. Ya sea esta imagen es literalmente ésta o ésta. Por lo que debe haber alguna brecha entre estos bloques del texto y las imágenes. Realmente odio cuando los diseñadores, ya sabes, intentan usar la creatividad y crear un lío como este. Este es un Rubley muy creativo fuera, pero es totalmente uso menos. Por qué te he mostrado aquí porque, en mi opinión, el layout, tus colores, tu diseño visual, todo va a facilitar la funcionalidad fuera de tu web. El usabilidad fuera de su sitio web, la capacidad de repisa de legibilidad y la comprensión de su usuario debe ser capaz entender y obtener dedo de pie lo que él o ella está buscando fácilmente. Esto está totalmente desordenado. Creo que para mí, esto es totalmente, um, causa perdida Así que no voy a nunca, um, um, te diré que diseñes algo como esto, Pero solo para tener la idea de qué se puede hacer con Mason realmente aquí otra vez, se puede ver que tenemos este otro ejemplo de maquetación de mampostería. Podría haber visto este diseño en Ah, ventana, Stan. Barra de menús. Entonces para mí, no me gusta mucho, porque para mí, está realmente mal en este momento. Este se ve mejor porque tenemos botones por aquí y todo esto está dentro de toda esta caja. Por lo que no es letra a la imagen a la derecha, a la izquierda. Por lo que cada sección está por su cuenta. Entonces es un poquito son puedo ver mucho mejor que este para mí. Este diseño, como se puede ver por aquí con esta imagen, no puedo saber que esta imagen esté euforada. Toe el texto inferior o el fondo superior. Entonces esto es un poco confuso para mí, así que normalmente tiendo a evitar este tipo de capas fuera. Debe tener separaciones muy claras entre diferentes secciones de contenido. No intentes usar imágenes así. Nuestro try toe, tener algún borde alrededor de ellos, así que puedo ver que esta es toda una sección de este es un bloque entero. Ahora puedes ver por mí por aquí. Puedo ver que esto es Mira, esta persona está mirando a éste, y está mirando a éste. No sé si todo este cartel cargado o este tipo está relacionado con este Collender o lo que sea. Entonces yo Esto es realmente confuso para mí. Así que trata de evitarte. Tener debes tener alguna, um, um, separación riel separación entre diferentes bloques fuera de texto o información. Ahora, aquí hay un buen calzado quitado. Mason estuvo de acuerdo. Y se usa en bien, solo bien confianza o estado justo como lo llames. Y se puede ver lo que aquí tengo tal para grado albañilería, y se pueden ver toneladas de lamentaciones faltantes por aquí. Al igual que éste de aquí. Tienen un gran uso fuera de estos y se puede ver la separación total. Veamos éste. Se puede ver que estas imágenes están totalmente separadas entre sí con alguna brecha. Y este es el buen uso fuera de Mason recluta. Entonces Mason arrepentimiento se usa en Pinterest y tenemos este blogueado o curio snort com y puedes ver todos estos realmente faltan Regrade artículos forzados que puedes ver u oír que va a seguir y seguir por mí. No me gustan estos sitios web siempre de desplazamiento que deben tener algún fin de todos modos, así que aquí tenemos uno más totalmente cualquier punto com Y si bajamos, se puede ver de nuevo. Contamos con grado de albañilería y contamos con diferentes puestos. Artículos incluso. ¿ Ves dónde? Aquí Tienen claras líneas separadas cajas alrededor de ellos para que pueda ver que este es un post. Este es otro. Este es otro. Entonces este es otro ejemplo. Gran ejemplo. Muy sencillo, muy único. Muy bonito. Entonces tenemos otra, que es vanidad, Dean. Y se puede ver por aquí si me arrastra hacia abajo, tenemos de nuevo el mismo arrepentimiento de medicina. Pero el problema aquí es para mí que es, um se puede decir a veces veo algunas irregularidades como podemos ver texto de encabezamiento de imagen y ah, el texto es débil o algo así. Algo falta en este diseño. mejor usó algunas líneas por aquí para tener alguna separación O tal vez en la parte inferior, alguna línea sólo para demostrar que se trata de una separación o algo así. Pero para esto es otro ejemplo fuera de mampostería, griego. Entonces éste es genial. Este es bueno. Este es realmente genial. Y, um eso se trata de avaricia albañilería. Espero que hayas entendido la idea fuera de usar a Mason Regrade. Ah, y lo usarás de diferentes maneras creativas. Si tienes algún problema, avísame en las preguntas. O puedes preguntarme lo que sea. Puede contactarme personalmente. Yo en su mayoría respondo tan pronto como pueda esperar verte en la siguiente lección. Entonces pasemos al siguiente video. 19. Matar con los combos de porcentaje en el diseño de la composición: en este video, me voy del dedo del pie Hablar de un método creativo off definir tu diseño, que es siempre pensar en porcentajes, pero nunca como estás definiendo tu calificación en tu diseño. Trata de pensar de alguna manera que esto va a quitar un 20% de descuento en el diseño horizontalmente. Esto va a quitar como un 80% de descuento en el diseño para que puedas definir Lee hacia fuera en porcentajes y asignar diferentes cuadrículas usando porcentajes. Y tus desarrolladores te van a querer porque es más fácil para tus desarrolladores o equipo de desarrollo del dedo del pie. Cotizarlo, y puedes crear diferentes variaciones simples para tener algo de creatividad en tu diseño. Ahora bien, si alguna vez has jugado videojuegos o juegos de lucha, hay un término llamado combo. Entonces combo es cuando intentas golpear a tu oponente y seguir golpeándolos con diferente combinación off. Está tan en su diseño. A lo que me refiero con composición porcentual es que vas a usar diferentes combos de diseño como 60% y 40% campell 50 50 combo, 20% y 80% compulsivo. Vamos a muy sobre maquetación mediante el uso de todas estas combinaciones diferentes, entonces También podemos tener tres combos de columna como 2020 y 60 com bowl 40% 30%. Por lo que todos están maquillando el 100% para asegurarse de que están sumando, 200% comprado. Intenta, ya sabes, hacer un combo que va por encima o por debajo del 100%. Entonces tenemos 50 30 20. Por lo que hay se puede decir toneladas de combinaciones. Puedes hacer muchas combinaciones diferentes haciendo esto, como puedes tener 10% o 20% o 30 por 30 70% combo. Entonces esta es otra técnica que creo que empiezan muchos diseñadores. Trata de pensar en este tipo de términos. Intenta usar combos porcentuales en tu diseño. Entonces aquí se puede ver estoy mostrando pocas ideas fuera de diferentes combos como se puede ver en la parte superior . Tenemos 40 60 ahora en el siguiente apartado, lugar de volver a usar 60 40 o 40 60 o repetir mal fuera. Intento cambiarlo a la izquierda, y traté de usar 25% y 75% combo, luego en la siguiente fila o en la siguiente sección fuera de mi diseño estoy usando 25 25 25 25. Por lo que tenemos cuatro cajas iguales. Entonces así es como vas a muy tu layout con diferentes combos por ciento de edad, lugar de usar un monitor en el layout de EU off 40 60 40 60 40 60 o 60 40 o 50 50. Esto va a crear un diseño aburrido. Tus usuarios van a, ya sabes, sus mentes. Necesitan algo diferente después de unos segundos. Entonces siempre que intentes muy tu diseño, va a crear algún interés en su mente, y seguirán navegando que envuelve. No trato de ser más creativo y pruebo dedo del pie crear diseños que son, ya sabes, un problema para los usuarios. Pero tienes dos muy tus combos. Entonces esta es otra técnica que creo que muchos diseñadores no usan. Ahora, aquí hay un totalmente fuera y escuchar lo que estoy tratando de hacer es que estoy tratando de muy mi diseño y probar el espacio de consejos de dedo por aquí en lugar de tener 2040 60 combos. Voy a tener algo de espacio en blanco por aquí, así que tenemos como 6 50% sobre el cabello, 25% sobre el cabello y 25% espacio en blanco en el Haider. Entonces lo que estoy haciendo es 50 25% de espacio en blanco y 25%. Uh, ¿qué aquí? Para que también puedas hacer algo así . Entonces no intentes sentir siempre todo. Puedes volver a usar el espacio en blanco en tu diseño. Por aquí. Como pueden ver, tenemos como, um, 40% algo como esto o aquí. Creo que hay que dividir estos 5/12. Entonces quítate la idea cuando porcentaje que estoy usando. Esto es 25% y ah, esto es, creo que se dividiría en 75%. Entonces lo que sea que esté usando, estoy tratandoa muy mi diseño. Y de nuevo, se puede ver por aquí, estas cuatro cajas son del 25% pero el diseño es diferente. Tiene algo de radiación agregando algo de espacio en blanco por aquí. Ahora les voy a mostrar algunos ejemplos de uno de mis diseñadores favoritos. Rifa mañana. Estoy tratando de seguirlo desde mucho tiempo, como tal vez uno o más años, y se puede ver por aquí. Este es un diseño reciente para así tu voluminoso y puedes ver. Quiero mostrarte cómo usar tu diseño en porcentajes e intentar variarlo en diferentes combinaciones de empresas. Entonces aquí, puedes ver si miras esta cabeza por aquí, tenemos, como, como, 65 o 60% y 40% para este portón de heces o esta descarga. Háblalo a través de un video aquí. Entonces si vas en la siguiente sección tenemos sobre y esta pequeña información sobre este tipo increíble De todos modos, tenemos como 30 o 20% por 80% gastos generales de asignación. Entonces de nuevo, si vamos a esta zona, tenemos, como, casi 50% en 50%. Tenemos más espacio, algo de espacio en blanco, algún porcentaje para espacio en blanco. Entonces voy a llamarlo 40 60. Por lo que el 10% es casi de espacio en blanco. Entonces esto es de nuevo, nuevo. Se puede ver otra vez por aquí. Ha usado 20 o 80% de lo que teníamos 25 25 25 25 25 de nuevo. 2080 25 25%. Entonces otra vez, 2080. Para que puedas ver así es como va tu diseño. Puntera luce como un diseño más creativo. Por lo que tendes a tener algún gumbo, diferentes combinaciones para diferentes secciones. Ya puedes ver que estamos aquí. Esto es repetitivo de muchas maneras diferentes. Por lo que esto es de nuevo un principal off design repetición Port. Trata de muy tu repetición. Entonces, no intentes usar una cosa similar 10 veces por aquí. Intenta muy en tu diseño. Entonces esta es una gran manera de mostrar cómo puedes usar los diseños y lo creativo es como Puedes ver donde aquí, en lugar de usar solo imagínate. Ha usado imagen con texto y a la izquierda otra vez, tenemos algún botón e imagen y esta saudita siguiente y este rubro ahora. Ahora veamos un ejemplo más. Aquí otra vez otro diseño del esfuerzo Amal. Y se puede ver donde aquí casi tenemos más pesados a la izquierda. Aquí tenemos la imagen y esta carga esta carga se está metiendo dentro de esto. Se puede decir Ah, un poco rompiendo el diseño. Pero aún así se ve genial. Se llama como fuera de la caja. Posteriormente. De todos modos voy a hablar en otra lección, para que puedas ver de nuevo por aquí tenemos, como, 70 40 o 70 30 algo así. Y de nuevo en este apartado. Por aquí, tenemos por aquí a la izquierda, 40 o 45 35 65 o 60% casi a la luz. Por lo que se puede ver esto es una gran vidi y volver a diseñar. Tenemos gastos generales. Tenemos ah, como 33 33%. O aquí otra vez en este apartado, se puede ver que tenemos, como, 30 70 otra vez, casi similar a eso. Esto es de nuevo un gran uso. Y tenemos, um, 33% 30% 33%. Esto es del 100%. Esto es de nuevo 33% 3 opiniones. Y aquí tenemos algo parecido. Casi esta cabeza por aquí. Entonces el layout es que tenemos, como, 40% por aquí, O tal vez 35% y 65 o 60% a la izquierda. Entonces este es el desglose de diferentes diseños fuera de grandes diseñadores, y así es como vas a usar tus combos. Y te puedo mostrar abajo 10 y miles de diferentes diseños. Pero creo que esto va a tener esto te va a explicar todo, así que no necesito explicar más que eso. No se trata de un tema muy científico ni de ecuaciones de viajes en el tiempo. Entonces eso es todo. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 20. Uso creativo de los márgenes en el diseño de la composición: en este video, voy a hablar de un concepto muy importante fuera de la etiqueta diseño, que es usar el espacio en blanco y los márgenes de forma creativa. A muchos diseñadores he visto que los try toe evitan mucho espacio en blanco y márgenes en lados fuera de su diseño. Se asustan, usando espacio en blanco o espacio de respiración en su diseño. Ahora te voy a mostrar algunos ejemplos ah, mucho fuera y algunas ideas de maquetación. Y luego te voy a mostrar cómo diferentes diseñadores están usando espacios en blanco y márgenes para crear outs creativamente que se van a ver ah, Señor mejor que el tuyo. Diseños habituales donde tenemos igual cantidad fuera de márgenes en ambos lados. Entonces aquí vamos a discutir dos técnicas. Tener márgenes en un lado y usar bloques de espacio de voz. Ahora el diseño es una historia. Entonces en igual que una historia, no tienes que mostrar todo al principio. Tienes escenas de dedo del pie donde sólo es visible alguna porción fuera del diseño. Entonces aquí puedes ver en este diseño estamos usando un margen grande o pesado a la derecha. Tenemos mucho espacio en blanco en nuestra primera sección de cabecera del lado derecho. Ahora en realidad significa que estamos dejando un gran bloque espacial blanco por aquí. De igual manera, en esta tercera sección estaban viviendo un bloque espacial blanco muy grande a la izquierda. El espacio en blanco, si se usa correctamente, sí tiene su raro. Entonces si estás tratando de hacer algo así, puedes hacerlo. También puedes llamarlo diseño asimétrico porque no está adecuadamente balanceado ni balanceado en ambos lados. Pero aún así, es bondadoso equilibrado. Entonces si miras en la naturaleza, verás mucho la simetría con asimetría. Si miras algún árbol en las ramas y las hojas que han caído al suelo, no están en simetría, sino que se ven bien porque no se desvían demasiado del patrón pop. Entonces si tienes algún patrón como este y estás usando espacio en blanco a la izquierda y a la derecha y no lo estás, puedes decir que estás usando los bloques vice pres dentro de tus calificaciones. Tu diseño asimétrico o diseño desequilibrado aún se sentirá equilibrado. Entonces aquí estoy, usando mucho de grandes bloques fuera de espacios en blanco por aquí. Ahora, este es otro ejemplo, yo lo llamaría A veces el diseño de libros son mucho gráfico. Los diseñadores podrían estar familiarizados con ello. Si miras de cerca, puedes ver que la línea visible que está cayendo este diseño está por aquí. Entonces tenemos, como, dos columnas. Gap por aquí en el lado izquierdo. Y también de igual manera, se puede ver aquí en la parte superior. Tenemos tres columnas aquí y dos columnas por aquí. Entonces, ocultemos esto. Ahora si tratamos de hacer algo como esto, así es como estos sólo estoy tratando de explicar esta idea. Ahora se puede ver que este tipo off layout se va dedo del pie tienen, ah márgenes, que van a ser mawr inclinados por un lado. Entonces tendremos márgenes más grandes por un lado, Como puedes ver que estás aquí. Aquí. Tenemos, como, como, margen de tres columnas, y a la izquierda, podríamos tener un margen más pequeño. Entonces esto va a crear un efecto muy bonito en tu diseño. He visto a muchos diseñadores que tratan de equilibrar el viaje basado en ambos lados, pero a veces si intentas desequilibrarlos del dedo del pie. Trata de usar un lado más pesado con espacio en blanco, se va a quedar mejor. Por lo que en tu próximo diseño, te aconsejo que intentes hacer algo como esto. Intenta desplazar tus elementos de diseño. Deja dos columnas en lugar de, ya sabes, delimitar tu todo con estas columnas e intenta llenarlo todo. Intenta salir del dedo del pie. Ah, mucho fuera, um, espacio en un lado y un poco menos espacio en un lado. Por lo que va a crear un efecto muy bonito. Ahora les voy a mostrar algunos ejemplos donde los márgenes se han utilizado de forma creativa. Ya puedes ver si miras esta pantalla por aquí a la izquierda. El margen de la izquierda es más que el margen de la derecha. Por lo que tenemos más espacio en blanco a la izquierda de lo que tenemos más espacio en blanco a la derecha. Entonces así es como vas a probar dedo del pie, tener un diseño de tipo diferente fuera en tu aplicación móvil. Se va a ver más creativo. A ver, dijo este ejemplo y les voy a mostrar lo que en realidad quise decir. Entonces si bajas, déjame mostrarte, o aquí. Por lo que esta es la página que puedes ver todo este diseño está inclinado en el lado derecho. Es más pesado por el lado derecho y por la izquierda, puedes ver si miras de cerca. Hay mucho espacio libre en blanco. Entonces si sigues este diseño, puedes ver por qué. Mucho espacio en blanco, mucho espacio en blanco, mucho espacio en blanco. Y entonces este diseñador cambió la vista lineal ah y revertir esto y tenemos mucho espacio en blanco a la derecha. Entonces otra vez, tenemos vicios iguales casi iguales en ambos lados otra vez. Mucho espacio en blanco en el lado derecho. Entonces, ¿así es como vas a usar tus márgenes? ¿ Tu espacio en blanco es creativo? Tienes que dejar un bloque basado en voz más grande en el dedo izquierdo o en el dedo derecho. Consigue algunos diseños creativos. De igual manera, tenemos este diseño smart retail. Y si claramente te enfocas en este diseño y ves que también está casi inclinado en el lado izquierdo . Por lo que tenemos un diseño más pesado a la izquierda. Tenemos espacio vacío mawr sobre a la derecha. Entonces si me arrastra hacia abajo, se puede ver Ok, Ok. Entonces aquí tenemos más espacio en blanco. Todo es una línea a la izquierda. Por lo que tenemos más espacio en blanco por aquí, igual manera en la sección. Entonces esto es en realidad Judios fuera del espacio en blanco. Prueba dedo del pie. Enfoque que que también puedes tener mucho o dejar mucho espacio en blanco en el lado derecho o izquierdo para obtener mejores ideas al diseñar tus AP o sitios web. Aquí hay otro ejemplo Flex flat tax ship más inteligente y puedes ver que aquí tenemos algo de uso creativo en esta sección off white space. Se puede ver que tenemos un bloque de texto muy grande y tenemos imagen y tenemos mucho espacio en blanco debajo de esta imagen. Entonces no creo en términos fuera de márgenes que nos vamos a ir. Yo espacio en la risa a la derecha. También puedes dejar un gran bloque fuera del espacio en blanco en la parte inferior. Por lo que se va a crear mucho apagado Buen efecto. Se puede ver esta imagen ya es muy pesada. Es colorido, por lo que los usuarios por lo que no está buscando desequilibrio. Tenemos mucho texto por aquí, pero aún así se ve genial. Por lo que es justo como una forma fuera. Se puede decir, Um ah ah Hammer o algo así. Entonces tenemos ah, dirección vertical por aquí y horizontal por aquí. Entonces a sólo dos cuadras de distancia, ¿se podría decir combinados juntos? De igual manera, se puede ver en esta sección vemos el reverso invertido de la disposición inversa para este diseño. Entonces esta es otra técnica que ya te mostré que probaste muy cosas toe get better layout y para lucir mejor toe tener algunos mawr diseños atrayentes otra vez. Si miras la parte superior fuera de esta sección por aquí, puedes ver que hay mucho espacio libre en blanco después de esto. Ah, navegación. Entonces tenemos, como, como, creo que dos o tal vez 300 o 350 tal vez 400 píxeles fuera de brecha por aquí. Por lo que esto es mucho fuera de la brecha. No he visto muchos sitios web que intenten usar el espacio en blanco así. Veamos algunos ejemplos más aquí. Tenemos otro ejemplo y aquí está esta app y puedes ver tenemos más margen a la izquierda y todo se desplaza a la derecha. Entonces pero Hanzal, se puede ver a nuestros Hijos hacia la derecha y ah, toda esta información al instante hacia la derecha, aunque está alineada a la izquierda, pero todo lo que tengo. Ah, mucho margen. O aquí, veamos esta otra vez. Este es otro ejemplo. Aquí de nuevo, verán claramente que tenemos mucho espacio en blanco a la izquierda. Entonces esto va a crear un efecto muy bonito en tus diseños. Si estás diseñando para Mobil o sitios web. No Piensen que tenemos pantalla muy pequeña en el móvil, por lo que no podemos usar ideas creativamente. Puedes usarlos. De acuerdo, entonces aquí tenemos otro ejemplo. Y de nuevo se puede ver por aquí tenemos mucho espacio en blanco a la izquierda, y todo es Niños a la derecha. Incluso el botón más se usa muy Vice Lee. Por lo que todo es en su mayoría diseño pesado a la derecha en buen margen a la izquierda. Por lo que va a crear algún look creativo en tus diseños. Entonces te voy a dar ah, y ejercicio o asignación para crear algo algo alguna pantalla como ésta. Te daré una pantalla de ejemplo. Trataremos de hacer algo como esto. A lo mejor algo como éste. Esta semana y veremos cómo se te ocurre diferentes ideas. Entonces espero que hayan aprendido cómo vamos de pie. Usa los márgenes creativos en el lado izquierdo o derecho o incluso en la parte inferior. Alguna imagen para crear diseños creativos y probar dedo del pie salir de los diseñadores normales. Lynn. Por lo que estamos saliendo de su carril y estamos conduciendo un poco fuera de carril creativo , nuestros autos de diseño. De acuerdo, entonces espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 21. Diseño de martes creativos: Ahora has aprendido a usar Ah, mucho margen en el lado izquierdo o derecho para crear diseños creativos. Ahora es el momento en que me vas a dar alguna asignación como esta. Te estoy mostrando en tu pantalla. Ahora mismo estoy usando figura. Puedes utilizar cualquier software de diseño, cualquier herramienta que desees. Y tú Lo que quiero que hagas es que vas a dejar mucho espacio en blanco a la izquierda o la derecha. Lo que creas que es posible para ti. Entonces ahora mismo soy tú. He creado esta app de barriga llamada alimentos saludables o él va a comer o lo que sea. Puedes diseñar algo así y mostrarme tu pantalla así. Así que intenta crear un layout con tener mucho espacio libre en blanco o margen a la izquierda o a la derecha. Y aquí tenemos la imagen renderizado que puedes ver por aquí. Entonces crea algo como esto y estoy esperando tus diseños. Trata de presentar un diseño simulado donde muestres tu diseño en un teléfono móvil o algo así. Entonces vamos a ver qué se puede llegar con 22. Fuera de la caja y el superposición en el diseño de la composición del diseño de la composición: en este video, voy a hablar de una técnica muy diferente que muchos diseñadores no usan, o tal vez los avisos que no entienden, que está fuera del diseño de caja. Ahora fuera de la caja se basa básicamente en este principio de que cada vez que un usuario o seres humanos , siguen viendo al mismo patrón o parecen similitud en tu diseño como si tuvieras más, no voz propia. Entonces, por ejemplo, si escuchas algo de música, si el Sam sea beat está pasando como 10 minutos, te vas a aburrir. Entonces, ¿qué músicos hay? Prueba dedo del pie muy después de cada 30 segundos o después de cada 15 segundos que prueban Toe Jane. Ahí late o cosas así. Entonces esto se trata de música. Pero cada vez que estás diseñando algo, tienes ah, layout. Tienes que mantener el interés fuera de tus usuarios en tu diseño. Para ello, tienes que remolcar, pensar y cambiar. Ahí se puede decir línea de visualización, por ejemplo, si están viendo algo y todo está alineado dedo del pie una línea de la izquierda, hay que cambiar eso. Después de algún tiempo, tal vez su intersección. Intentas extender el fondo a toda la pantalla o intentas superponer los dedos de los pies algunos elementos en tu dedo de diseño Otra sección. Se están superponiendo dos elementos, y se va a crear un diseño muy interesante. Por lo tanto, intenta desviarte de las líneas de la cuadrícula. Trata de desviarte del mismo tipo monótono fuera de diseño diseño. Intenta salir de la caja y voy a compartir con ustedes muchos ejemplos diferentes y también pantallas diferentes, las cuales tengo pantallas de muestra las cuales he diseñado para ustedes. Entonces vamos a discutir esto y te voy a dar muchas ideas creativas para usar esta técnica fuera de caja en tu diseño Leo. Y ahora aquí te estoy mostrando primer arreglo y puedes ver todo está alineado a la izquierda a una sola línea. Ahora bien, si miras el lado derecho, estoy muy ing mis razas. Ah, Señor. Entonces en la segunda sección por aquí, se puede ver que he extendido esto y he movido esta imagen fuera de mis calificaciones. Entonces estas son mis 12 rejillas de columna y puedes ver tu cabello. Estoy usando 12 rejillas de columna y estoy moviendo esta imagen fuera de Tikrit. Puedes mover esto, y tal vez te vaya a tocar el pelo en que va a tomar todo el lado derecho. También puedes hacer algo como lo puedes extender en esta dirección en ambas direcciones y va a romper la gripe de tus usuarios. Yo por lo que podrían estar pensando que todo está contenido en este contenedor. Pero si intentas romper a este país en contenedor de grado 12, se va dedo del pie hacer mucho más interesante fuera. Ahora aquí hay otro arreglo fuera sobre la técnica de fuera de la caja. En lugar de extender tu imagen, fondo o cualquier otra cosa nuestro querido elemento de diseño y romper el grado, en realidad estamos rompiendo el diseño. Estamos solapando cosas entre sí, por lo que tenemos imagen de taxista en el fondo, y el siguiente algunos fuera del texto se superpone en la imagen. Entonces esta es otra técnica, que creo que mucho fuera notado diseñadores son nuevos diseñadores. No intentan usarlo, así que no tengas miedo. Te vas a quedar mucho mejor. Tus diseños se verán mucho mejor cuando intentes hacer algo así. Así que prueba superposición de dedo, imagen sobre texto o tenemos un bloque de impuestos y tenemos una imagen por aquí así, y el texto se superpone. Entonces ahora el texto es en realidad un elemento legible, por lo que no queremos ocultar mucha porción de él. Si quieres ocultar algunos del texto que tienes, tienes que esconder algunos de la porción. Por lo que aún es legible y el usuario puede entender el significado. Entonces sólo ten eso en cuenta. Ahora también puedes superponer imagen sobre una imagen así. Tenemos muchas imágenes. También podemos tener aquí cualquier Mitchell solo para romper el monótono. Tu diseño de diseño es una historia que tienes cambio de remolque. Algún giro de trama en tu historia es que tienes remolcar a Jane la dirección fuera de tu historia que otra vez . Volver al punto. Entonces estas son las cosas que tienes que tener en cuenta mientras diseñas de forma creativa. Ahora puedes ver puedes crear muchas combinaciones diferentes Aquí. Se puede ver tengo una imagen de ave completa y tengo texto superpuesto que está a la izquierda. Y tiene apenas algunos fuera de la parte fuera de ella como una superposición. Ahora, en la siguiente sección, se puede ver que cambio la dirección de mi sobrelaboratorio. Fui al lado derecho, y ahora aquí tenemos un bloque lateral derecho que se está superponiendo en la imagen, que está casi en medio. Por lo que puedes muy estas cosas en tu diseño. Sólo asegúrate de que te estás cayendo algunas rejillas por aquí. Se puede ver que estoy alineando las cosas con las cuadrículas, pero va a despejar mucho el diseño creativo cuando intentas implementar cosas como esa. Entonces este es concepto muy importante. Estoy repitiendo una y otra vez. Trata de usar creativamente outs fuera del diseño de caja. Pruebe las cosas de superposición de dedos. Trata de intercambiar tus cosas fuera de tus cajas. Piensa fuera de la caja. Y no te limites a las 12 colonias. La codicia. Ahora aquí hay otra relación. Podría haber visto esto. Tengo un fondo de imagen completo, y luego tengo un formulario de suscripción en la parte superior. Por lo que he visto esto y he usado esto en muchos diseños. He diseñado pocas páginas de aterrizaje donde he usado este formulario de suscripción y el formulario suscripción es un poco, ya sabes, extendiéndose hacia fuera esa primera sección de encabezado. Entonces esto va a crear mucho interés. Ahora, en la parte inferior que tienes, estás viendo una sección de suscripción por aquí, y puedes ver que tenemos ah, mal crecido en la parte inferior y en la parte superior. Tenemos esta suscripción. Um, esto va a ser un formulario de suscripción en la dirección izquierda-derecha en lugar de hablar con aburrimiento. Entonces tendrá algún correo electrónico por aquí que ah Burton por aquí y algo de textura por aquí, algo que es así suscríbase a nuestro boletín o cosas por el estilo. Ahora se puede ver esto es ah, casi tomando. Está casi en medio de esta sección por aquí, y esto está a la derecha, y está tomando 12345 casi cinco columnas. Y esto está tomando casi, creo, 10 columnas. Por lo que hay muchas variaciones que puedes hacer ahora. Te voy a mostrar algunos fuera de los ejemplos s para que puedas obtener lo que realmente puedes usar y lo que realmente puedas, porque en la inspiración te va a dar mucho de ideas. Generamos ideas a partir de otras ideas. Entonces veamos algunos ejemplos en la siguiente lección 23. Diseño web y diseño de aplicaciones móviles en la caja: Ahora, vamos a ver algunos ejemplos fuera del diseño de caja y cómo se puede usar eso. Ahora bien, si miras este diseño, déjame mostrarte. De acuerdo, así que vamos a esta sección por aquí. Entonces si lo miras por aquí, tenemos estas pilas por aquí que se está llevando algo como esto. Entonces a la derecha, se puede ver que tenemos dis porción. Y si eres un nuevo diseñador, podrías estar usando tu carga algo como esto. Entonces Así que podría estar usando Podría estar alineando eso es de seleccionado. Podría estar alineando su botón con el texto así. Entonces te estás llevando todo el espacio y otro impuesto y cosas así. Entonces aquí lo puedes ver, en lugar de usar este botón y moverlo justo debajo alineándolo con este texto, ese diseñador realmente lo movió a la izquierda para que puedas ver todo está alineado por aquí . El texto es una línea, pero los elementos de la derecha son tienen diferentes variaciones. Entonces esto va a ayudar mucho. En realidad, este diseñador movió un poco este botón de la izquierda. Entonces esta es ah otra técnica. Y aquí se puede ver. Aquí tenemos esto. ¿ Se puede ver qué? ¿ Aquí? Estas imágenes, se extienden fuera de esta sección o cabeza. Entonces de igual manera, en realidad te dije que tienes dos. Muy. Tu disposición. Tienes que cambiar las cosas. Por ejemplo, Puedes ver por aquí esta sección por aquí está terminando con esta línea fuera de dirección. Entonces a la derecha, Nos hemos dejado dibujar algo por aquí, por ejemplo, Rectángulo. Entonces, en realidad, esta es en realidad la dirección que nos movía cuando dejamos esto. De acuerdo, así que tenemos que, uh, líneas fuera. Movimiento uno es éste y segundo, éste. Por lo que éste se mantuvo a lo largo de elementos en movimiento. Elementos están alineados dedo del pie de esta línea por aquí, pero aquí , en realidad, sacó todo fuera de esta línea. Entonces así es como vas a crear en solo en tu diseño. Basta con mirar estas dos secciones. ¿ De acuerdo? Entonces te dieron la idea de cómo, realidad vamos a usar el diseño fuera de la caja de manera similar en el siguiente paso, y ahora se puede ver hey, realidad probado dedo del pie variado o él o ella quien sea el diseñador este Es un gran diseño. Creo que lo conseguí de B Haas. No, no recuerdo dónde está realmente la UL o lo que sea el diseño. Ese nombre es eso Aquí tenemos de nuevo lo mismo. Pero se puede ver el arreglo apagado. Se han cambiado las imágenes. Entonces aquí tenemos 12312 Y aquí tenemos 12 y tres en dirección vertical. Entonces esto es un gran cambio por aquí. Y además, se puede ver el diseño debido a cambiar la dirección fuera de la imagen. Se ve claro de manera similar otra vez. Tenemos algo por aquí que está rompiendo el diseño para que puedas ver esta imagen extendida por aquí. Ahora la siguiente sección está empezando y tomando esto así para que puedas ver puedes entender lo que estoy probando dedo del pie. Te digo el punto por aquí otra vez, puedes ver esto se extiende fuera de la caja en, y eso es todo. Entonces por eso quería mostrarles este ejemplo. Porque es un gran ejemplo fuera de variar. Tu disposición se está saliendo de la caja. Veamos algunos ejemplos más. Está bien. Entonces en lugar de pensar que todos sois siempre no tienes que sacar tu imagen o cosas de la caja. Pero puedes usar una técnica similar que en realidad se usa por aquí. Se puede ver en esta sección por aquí. Vamos a acercar un poco. Entonces en esta sección de aquí, se puede ver también lo llamo fuera de la técnica de caja. ¿ Por qué? Porque se puede ver esto muestra el movimiento. Ahora, aquí tenemos algún patrón en la espalda fuera de esta caja, esta imagen por aquí y se mueve en la dirección izquierda y arriba. Por lo que en realidad es tener algunos antecedentes, un poco de fondo fuera de este patrón o ayuda. Y también lo está haciendo fuera de la caja. ¿ Por qué? Porque se puede ver esta es la línea fuera del sitio. Entonces aquí los usos LA, um ojos se mueven en destrucción. Pero para romper eso, ha usado a este pequeño patrón o aquí. Por lo que realmente me encantó esta técnica. Esta es otra técnica que tienes dedo del pie mostrar algo algunos, algún color. Algún patrón. Puedes usar algún fondo. Yo lo he visto muchas veces. De igual manera, por aquí, se puede ver en este cabello tiene algún patrón. Tiene algunas hojas en que se están extendiendo fuera de esta caja. Ya puedes ver si dibujas una caja por aquí. Dibujemos una caja. Entonces si dibujamos una caja, se puede ver esto es este Leave se está saliendo de la caja. Entonces este es otro ejemplo, Lexie. Pocos más. Y aquí tenemos algunos ejemplos fuera de la esperanza. Trae otros elementos. De acuerdo, entonces aquí tenemos otro diseño el cual es un diseño muy sencillo. Y se puede ver todo este texto a bordo se superpone en esta imagen. Entonces esta es otra técnica que tenemos, cual les dije que se superponen en otros elementos de diseño. De igual manera, si volvemos a bajar aquí, tenemos dos imágenes superpuestas. En lugar de tener texto superpuesto a la imagen, tenemos imagen superpuesta a la imagen. Entonces esta es otra técnica que te mostré. Y ah, aquí tenemos la misma técnica. Que es que se puede ver si nos estamos moviendo de aquí. Esto es de una línea fuera de sitio. Entonces esta es la caja. Y en la siguiente sección, puede ver hey movido a la izquierda y un tomando diferente espacio por aquí. Entonces ahora nuestro grande es en realidad así de ancho por lo que tenemos dos cuadras uno encima del otro. Una es una dirección vertical de Gran Bretaña. Uno es un poco en dirección horizontal. Esto vuelve a variar tu diseño, tener diferentes diseños a menudo fuera de la caja y mover cosas alrededor. Entonces esto va dedo del pie para crear mucho interés en tus diseños. Ahora, viniendo al APS móvil puedes No puedes ver muchas cosas por aquí, pero, um, tengo que mostrarte algo que se superpone para que veas esta carga. te cae el pelo, Sete cae el pelo, y se ve realmente bonito porque lo tenía se está superponiendo la mitad del ah, la mitad apagado. La carga se está superponiendo en esta imagen. Entonces este es concepto muy importante. Puedes usar el se lo comió, y va a crear mucho interés, incluso tus laboratorios móviles. Entonces veamos aquí algunos ejemplos más. Tenemos de nuevo texto solapado por aquí. Si miras en esta sección por aquí, tenemos un montón de razas diferentes y caminatas fuera de diferentes bloques solo para cambiar. Se puede decir el monótono fuera de tu diseño. Pasemos a este. De acuerdo, entonces aquí tenemos imagen al fondo y el texto se superpone en ella. Se ve muy bonito. Ah, efecto. Y sólo voy a mostrarles algunos ejemplos y conceptos. Entonces sólo para abrir tu mente Así que aquí tenemos de nuevo lo mismo. Y este es un diseño muy grande. Tenemos un bloque azul y rojo y naranja y encima, tenemos investigaciones es nueva. Entonces este es un artículo que se puede ver aquí se lee artículo por aquí. Se puede ver a la izquierda A la izquierda Por aquí se puede ver esta imagen ha sido superpuesta por el bloque de pilas y se ve realmente genial. Entonces esto es que a veces lo llamo esconderse y mostrar u esconderse y buscar algo así. Es una técnica muy bonita. Tienes dedo del pie superponen tus elementos. Tienes dedo del pie, muévalos como puedes ver por aquí. Estos tres de aquí no están alineados a esta imagen. Se están moviendo fuera de esta imagen. Entonces esto se ve realmente genial aquí otra vez, tenemos imágenes superpuestas de imagen y texto superpuestas en el bloque de impuestos Por aquí de nuevo, tenemos la misma técnica esta pequeña imagen cada punto se superpone en esto en esta gran imagen, estas texturas superpuestas en esta gran, gran imagen. Entonces esta es una gran técnica tienes dedo del pie lo usa en algún momento. Ahora, aquí tenemos un diseño muy minimo y se puede ver de nuevo, estamos viendo los mismos patronos estuvieron aquí, que se superpone. Por lo que este nuevo look credo se está superponiendo en esto Por aquí, maquillar. Y, um, todo está en 33 cuadras, Tres columnas, y aún así intentan dedo del pie, ya sabes, dividen esta segunda columna media en dos. Y lo interesante es que están moviendo las cosas arriba y abajo. Entonces voy a hablar del momento en el puede ser las próximas lecciones. Hasta entonces, hay que leer de todos modos, Así que éste es otro. Este es un diseño experimental, pero les voy a mostrar algunas cosas por aquí. Una es que se puede ver. Esto está casi centralmente fuera. Tenemos pocos impuestos a la izquierda y algunos fuera de la carta por aquí. Se puede ver que es, um está detrás de esta imagen, que es, creo, elfo resaltador jalea. Algo así. Entonces pero no recomiendo que contrate eso. Ocultas mucho de tus cartas. A lo mejor uno o dos son máximos. Pero este es un diseño experimental. Ahora realmente me encanta cómo toda esta tienda en tienda tienda de compras, que es, realidad, creo que la navegación está en destrucción. Por lo que podría ser terrible o móvil. Algo así. De todos modos, así que aquí tenemos otra vez escondiendo algunos fuera del texto detrás de esta imagen. Entonces este es un diseño que en realidad está en destrucción, moviéndose adentro, destrucción de arriba arriba arriba izquierda a abajo. ¿ Verdad? Pero me gusta mucho. Es, um, um, usar mucho fuera de las cosas creativas por aquí de todos modos. Por lo que de nuevo, tenemos diferentes tamaños de bloque. Tenemos completo raro. Tenemos algún margen a la derecha y a la izquierda, y luego tenemos de nuevo en el medio. Vale, ¿ entonces lo que quería mostrarte es que estas pilas se esconden detrás de esto? Entonces eso es todo. Espero que hayan entendido la idea de solapar cosas y sacar cosas de la caja . Y espero que disfrutes usándolo en tus diseños. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 24. Diseño de diseño de diseño de la distribución de la: Ahora te voy a dar un dedo del pie de asignación. Crea un diseño donde ibas a usar la superposición. Por lo que se puede ver en este diseño esta imagen de niña se superpone. Dumb Los vestidos o vestidos cortos por aquí El texto eso Este es un ejemplo También, déjame mostrarte. Aquí está mi ejemplo. Creo que ya has visto esto, que estoy solapando esta forma por aquí en las dos secciones también, se está saliendo de abajo esta imagen. De acuerdo, entonces aquí tenemos un ejemplo aquí es otro que puedes ver si miras de cerca aquí en esta sección, puedes ver esto. Estos cuatro iconos de estas cuatro características fuera de nuestros servicios en realidad se superponen Esta sección en la parte superior, que es este encabezado también, creo que déjame mostrarte una más. Este es otro ejemplo que puedes ver por aquí. Estoy superponiendo imagen por aquí. Déjame mostrarte. Entonces esto se superpone en el siguiente apartado o aquí. Entonces esto es solo para crear algún buen efecto en un diseño para que puedas usar o diseñar algo como esto y mostrarme cómo vas a usar esta técnica de superposición, puedes usar imagen de superposición sobre texto o puedes usar superposición en otra sección. Por lo que estoy deseando ver sus asignaciones. Entonces empecemos a hacer alguna técnica de superposición y usemos su técnica y muéstrame tus diseños. 25. Uso de énfasis en el diseño de la composición: en esta lección, voy a realmente una de mis técnicas secretas, que he aprendido a través. Se puede decir que en realidad sigo analizando diferentes diseños, y luego aprendí algo que es muy único en el diseño de capas. Entonces si estás diseñando algo y quieres que cree interés, entonces vas a usar la escala y el énfasis en tu diseño correctamente. Por lo que la escala es en realidad uno fuera del diseño. Podrás sentar técnicas donde intentes enfatizar una o resaltar para un artículo más que otros. Para que veas si tienes, como tres o cuatro características fuera de tu AB o algo así. Vas a resaltar o hacer uno, uno de ellos arriba más grande y más grande en tamaño. De igual manera, si tenemos, como cuatro cuadras de impuesto, podríamos intentar cambiar el fondo de uno de los bloques. Entonces esto va a crear algún interés, y va a tener un efecto muy único en tu diseño. Entonces te voy a mostrar algunas fuera de las cosas que te vas dedo del pie realmente disfrutar y amar. Entonces veamos algunos patrones y luego vamos a ir de pie diferentes ejemplos. Ahora solo asuma que teníamos cuatro cuadras de características. Ah, ¿ hay algún proceso de negocio o algo así? No. Por primera vez, cuando intentes diseñar algo, sacarás esto aburridamente fuera, habiéndolos dividido en cuatro bloques similares y va a parecer realmente aburrido. Cualquiera puede hacer eso, incluso un niño aire cualquiera. Si les das cuatro cosas que les dicen que las arreglen, se van de pie. Organízalos así. Entonces en lugar de hacer eso, vamos a tener algo muy diferente. Vamos a destacar uno de ellos y vamos a cambiar su diseño. Entonces veamos cómo se verán ahora. Ahora bien, este es el mismo diseño de cuatro bloques, pero hemos cambiado el diseño. Ahora un elemento de la izquierda aquí está teniendo mucho énfasis fuera. Ya sea una característica o algo así, vamos a destacar. Es la mejor característica entre estas cuatro características, y queremos dedo del pie cambiar el diseño. No queremos ese viejo aburrido para el diseño de bloques, así que esta es la respuesta a ello. Por lo que hemos resaltado y escalado y hacer éste más grande y a la derecha. Tenemos tres características las cuales están listadas en orden de arriba a abajo así. Entonces aparte de tener viejo aburrido quieren 34 Brocks horizontales de izquierda, derecha, hemos cambiado el diseño. Este es un concepto muy, muy importante. Si lo puedes entender y usarlo, creará Lord off interest en tu diseño. De igual manera, se puede ver que tengo como tres artículos. Por ejemplo, tengo tres artículos en mi diseño. Por ejemplo, tenemos estas tres cajas en la parte inferior. Entonces el primer diseño que viene sobre el mío son estas tres cajas dividiéndolas en tres cajas. Entonces, en lugar de dividirlos en tres cajas, lo que vamos a hacer es que vamos a destacar una de ellas. Por ejemplo, es rumbo o algo así, y me voy a encabezar y algo de pelo textil muy grande. Yo lo voy a hacer más grande y algunos de los detalles o tal vez algunos artículos relacionados con este que voy a poner por aquí. Entonces este es otro en apenas curiosamente fuera si tienes tres artículos. Por lo que he destacado y escalado uno de ellos y tengo Ah, los otros dos que son un poco se puede decir. No tanto resaltado. No tengas tanto énfasis. Entonces esta es una gran técnica. No. Te voy a mostrar algunos ejemplos que aclararán tu mente cómo usar realmente esta técnica. No, aquí hay un diseño de algún diseñador impresionante. No sé de todas formas, Así que lo que quería mostrarles aquí es como se puede ver en este apartado. Estamos aquí. El segundo apartado fuera de este sitio web. Tenemos en realidad a tres cuadras de artículos. Uno es éste Este bloque. Entonces tenemos esta cuadra por aquí. Y entonces tenemos esta cuadra por aquí. Por lo que puedes ver aquí. ¿ Qué? En realidad estamos usando. Estamos usando báscula. Estamos usando énfasis. Estamos poniendo énfasis en una cuadra de toda esta sección y tenemos rumbo muy grande. Tenemos algún sub tagline En la parte superior. Tenemos algunos colores por aquí. Se puede ver esto es totalmente diferente a los estilos y texto por aquí a la derecha. Entonces tenemos colores por aquí, colores muy oscuros y muy atractivos de tipografía grande. Y a la derecha, no tenemos algo mismo pasando. Por lo que aquí tenemos en este apartado, tenemos más énfasis. Lo hemos hecho más grande en tamaño. Hemos utilizado tipografía más grande, tamaños de cubierta y hemos usado algunos médicos. Entonces esta es la técnica de la que estaba hablando. Entonces permítanme mostrarles algunos ejemplos más. Aquí tienes otro ejemplo de fusionar el énfasis y en tu diseño, y puedes ver u escuchar a este diseñador. Tienen, como, cuatro cuadras, en realidad, en realidad, cinco cuadras de las cosas por aquí. Uno es este señor del pueblo de aquí. Entonces en lugar de, ya sabes, tener cuatro cuadras en la parte superior en misma línea y tener un botón de descarga en la parte inferior. Este diseñador, lo que odiaba es que en realidad usó este bloque muy diferente por aquí y usa este cuatro cuadras por aquí y uno más grande y tu habilidad en su maquetación. Entonces tenemos uno. Haz tres y cuatro cuadras por aquí y una cuadra más grande por aquí. Entonces tenemos, como, cinco cuadras. Así que intenta pensar de esta manera en lugar de que lo sepas, usando un diseño simple como 1234 bloques y luego descargar el botón en la parte inferior. Puedes hacer algo como esto, así que intenta muy tu diseño así, y estarás complacido con tu diseño. A otras personas, les va a encantar. Entonces este es en realidad el punto de interés. Quería mostrarte que tienes que crear un punto fuera de interés en tu diseño o sección que estás diseñando. Te voy a dar un ejercicio para el mismo apartado. Tienes que diseñar algo como esto. Entonces, um tan solo para afilar tus habilidades, Así que veamos algunos ejemplos más. De acuerdo, entonces aquí tenemos otra sección que está usando la misma técnica que en realidad describí, que es tener usando la escala en tu diseño o diseño. Aquí te puedes ver. Aquí tenemos esta sección, que es Ah, un poco más grande. Entonces tenemos cuatro cualidades o cuatro servicios o como sea que los llames en el paseo. Entonces, en realidad, tenemos cinco secciones, cinco elementos, y los hemos arreglado en remolque así en lugar de tener rumbo por aquí que tenemos cuatro cuadras o allá abajo. Y tenemos una gran carga por aquí, que va a tener un diseño muy, um , simple, que ustedes han visto muchas veces. De igual manera, se puede ver en esta sección o aquí de nuevo, este diseñador está usando lo mismo por aquí. Entonces tenemos una cuadra. Esto también es un dedo del pie relacionado que se superpone y sale de la caja. Por lo que en realidad eres este diseñador mezclando dos técnicas saliendo de la caja y de nuevo tiempo al mismo tiempo usando habilidades. Entonces tenemos un elemento muy grande por aquí que tenemos cuatro cuadras a la izquierda así. Y entonces tenemos una cuadra por aquí así. Por lo que este es un gran diseño. Este es, creo, un gran uso off diseño de layout en esta información mostrando esta información miradas crear, puede ver que también está usando iconos con algún texto. No trates de pensar siempre en tan solo cuatro cajas que tenemos. Tenemos que alinear todo así para que no necesitamos alinear todo así. Tenemos dedo del pie cambiar de nuevo nuestros diseños. Este es otro diseño de uno fuera de mi postre favorecen a los diseñadores que tiendo a seguir. Sé Haas. No estoy seguro de cuál era el nombre fuera peleando. Me olvidé de todas formas, así que aquí otra vez. Se puede ver lo mismo está pasando. una cuadra, gran cuadra. Después tenemos cuatro bloques más pequeños. Entonces esta es la idea. Creo que ya tienes en destruido, así que no quiero volver a explicarlo. Pero hay muchas situaciones en las que se puede utilizar. Se va dedo del pie tener mucho gran impacto en tu diseño. Entonces éste es otro ejemplo. Se puede ver que esto es, ah, servicio de lavado de autos. Y está diseñado por laboratorios Quantico de Polonia. Me encantan mucho los diseñadores de Polonia porque creo que tienen mucha creatividad de este lado de Europa. He visto muchos de sus diseñadores ahí estuvieron de acuerdo desde ese lado. De todos modos, um, para que puedas ver tenemos una imagen y dos características contactadas con nosotros y mejor lavado de autos. Entonces, en realidad, tienen, como, cuatro cuadras. Pero se puede ver aquí se ha arreglado de una manera totalmente diferente. Tenemos la decisión en lo alto por aquí, y esto es esto en el medio. Entonces tenemos imagen por aquí y algo de textura. Todo aquí. Entonces tenemos de nuevo dos cuadras por aquí. Por lo que tres cuadras, que son totalmente diferentes. Realmente me encanta este diseño. Entonces yo Lo que normalmente hago es usar una herramienta llamada Jing y los capturé en y los guardo en mis ideas de diseño de maquetación. Entonces cada vez que tengo dedo del pie diseño algo, lo uso de igual manera, en esta sección una imagen grande a la izquierda, cuatro características como esta. Por lo que esto es de nuevo usar fuera de escala. Tenemos una imagen muy grande o aquí de lo que tenemos cuatro características por aquí. Eso Esto es en realidad otra vez. Si lo miras por aquí otra vez, se está utilizando la báscula. Esta imagen es un poco más grande que todos ellos por aquí. Y es un gran diseño para todas estas imágenes. Y esto es bondadoso mampostería de medicina mucho fuera. Pero se ve muy bien por aquí. Entonces todo eso se trata de esta técnica. Y espero que hayan disfrutado de este escalado. Y, ah, un gran punto de énfasis fuera de tu diseño en cada sección o todo tu diseño. eso se trata todo. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lista. 26. Uso de movimiento en el diseño de la composición: en esta lección, voy a discutir otra técnica secreta que voy a compartir con ustedes, que es muy simple. Y puedes crear mucho interés en tu diseño y en tu diseño usando movimiento. Entonces cómo tienes que hacer tu movimiento. No pienses que tus cajas o lo que sean tus contenedores que estén continuando diferentes elementos en tu página son estáticos. Puedes moverlos arriba y abajo. Puedes moverlos de izquierda a derecha. Puedes moverlos en un vapor diagonal, por lo que hay muchas opciones o trucos que puedes hacer. Entonces el movimiento va a crear mucho interés en tu día de diseño, y los moverá de, um, puedes decir aburridas cajas estáticas a algo que crean en solo Así voy a compartir contigo para algunos fuera de la opciones de diseño, y luego voy a compartir con ustedes sólo para pupilar tres ejemplos porque no puedo encontrar más ejemplos. A lo mejor lo son, se puede decir, pero en mi, um en mi carpeta de inspiración. Entonces creo que esto aclarará tu mente sobre usar el movimiento para tu diseño y cómo vas a hacer eso para crear solo en tu diseño. Entonces empezaste con estas cuatro cajas. Ahora me parece bastante aburrido, y creo que esto no va a funcionar para mí. Entonces, en cambio, vamos a hacer esto. Ahora puedes ver que este es el mismo diseño. Pero he añadido movimiento toe mis cajas en vez de que son cajas estáticas. Ahora se están moviendo. Entonces tenemos un movimiento como el movimiento de Jane pasando arriba y abajo en diferentes direcciones, y va a crear algún interés en tu capa. Entonces esta es una idea. Otro podría ser éste, por lo que puedes moverlos en dirección diagonal. Dedo del pie. Simplemente no pienses que hay que moverlos arriba y abajo pueden ser de izquierda a derecha. Se puede entrar en diferentes formas como diagonal y otras naves, como un triángulo. Tú también puedes hacer eso. Aquí hay otra representación fuera del movimiento. Se puede ver por aquí. Tengo caja muy grande o sección de contenido grande, tal vez una imagen por aquí a la izquierda. Y tengo dos imágenes que se superponen y algún impuesto aquí a la derecha. Entonces tenemos un encabezamiento y las tres líneas de cuatro líneas de texto, por lo que hay muchas variaciones que puedes hacer. Por lo que estos son pocos trucos usando tu movimiento en tu diseñado para crear algún interés. Entonces sé que les voy a mostrar dos o tres ejemplos. Por lo que nos ponemos mejor en este material de movimiento en nuestro diseño. Ahora, este es un diseño de Andrew Lo materia fuera de Letonia, y este es un diseño muy simple, muy único. Y puedes ver lo que quiero mostrarte. Aquí está el movimiento. Para que se pueda ver por aquí en las imágenes y el texto. Entonces el movimiento es que en realidad está revirtiendo el efecto en cada sección. Entonces tenemos imagen voluntad aquí de lo que tenemos textural aquí. Y entonces tenemos imagen. Estamos aquí. Texto en la imagen derecha a la derecha, texto a la izquierda, imagen a la izquierda, texto a la derecha. Entonces esto es en realidad un movimiento de cadena, pero hecho como puedes ver que estamos aquí. Esto es como una fortuna de soga, como aquí. Y está en la dirección de arriba a abajo. El que te mostré Waas en dirección izquierda derecha. Por lo que puedes ver esto va a crear mucho interés en tu diseño. Entonces si este diseñador se limitara a mantener en todas las imágenes de la derecha y todo el texto de la izquierda, podría parecer muy aburrido. Muy estático. Por lo que tenemos que crear algún interés mediante el uso del movimiento en nuestro layout. De igual manera, tenemos este diseño. Es por múltiples honores Smoove todo. Creo que es ah agencia de diseño. Pero me gusta mucho su diseño muy minimalista, donde creamos muy guión muy limpio y se puede ver u escuchar en esta sección, puede ver aunque se ve como una flor lei fuera del dedo del pie me. Pero aún así verás cómo los iconos y el texto diferente tienen diferentes movimientos. Entonces aquí tenemos. Ah, este icono en la parte superior y este texto en la parte inferior e izquierda. Entonces tenemos que ir las cosas en esta dirección. Entonces por aquí, este corredor, es esta Ah, dirección está en esto. Entonces aquí tenemos texto. Entonces tenemos esta línea de liderazgo y va dirigiendo hacia este ícono. Entonces nos hemos ido por esta dirección diagonal de lo que tenemos esto entonces tenemos algo como esto. Entonces tenemos algo como esto. Entonces tenemos algo como esto. Entonces esto en realidad es movimiento. Pueden tener iconos justo en la parte superior y en el medio y el centro. Podrían haber utilizado el texto, pero en lugar de usar esta sencilla manera de descomponer iconos y este texto, este diseñador utilizó algún movimiento en la nube. Por lo que tienen algunos movimientos diagonales pasando en casi todos estos iconos y este texto. Entonces esto es Ah, gran uso off movimiento en tu diseño. De igual manera, si nos fijamos en este diseño, tenemos estos iconos por aquí, y estos son todos iconos diagonales. Estas son igual que las colmenas. Pero lo que quiero mostrarles aquí es que tenemos movimiento por aquí. Por lo que tenemos este movimiento de cadena en marcha. Entonces esto es que me puse a la izquierda y me puse en la parte superior en el medio. Entonces por aquí y por aquí, por aquí, por aquí. Entonces no es Ah, si el usuario puede. Este diseñador puede hacer el diseño en tan solo ah, nueve o 10 cajas. Pero lo que hicieron es utilizar el movimiento. Para que puedas ver. Realmente funciona bien incluso con los son números. Por lo que tenemos 123456789 nueve cajas Y se ven muy bien. Este diseño es genial. Entonces vamos a acercar y ver. De acuerdo, entonces aquí tenemos estos iconos. Por lo que esto es de nuevo un gran uso off movimiento en tu diseño. Ahora, en este ejemplo, que no sé cómo es el diseñador. De todos modos, este es un gran diseño, y se puede ver en esta sección media o aquí tenemos sugerencia madre hija y se puede ver por aquí cómo este diseñador ha utilizado el movimiento por aquí para crear interés por lo que pueden tener estas cajas alineadas. Pero, ¿qué? Esta diseñadora, ella sí lo vio. Lo es. En realidad movió uno de ellos un poco hacia abajo para crear algunos intereses. Además, hay esta temp por aquí, que es otra técnica que te mostré antes de salir de las cajas. Por lo que este sello se está moviendo de esta sección sólo para crear algún interés por aquí. Por lo que estas son dos técnicas que puedes combinar para crear diseño de aspecto y espero que esto resuelva muchos de tus problemas. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 27. Centrada con la técnica de diseño de diseño de la composición de la izquierda: en esta lección, voy a discutir una técnica muy sencilla y muy elegante la cual puedes mezclar y usar en tu capa. Diseñado para crear mucho fuera de diseños y diseños interesantes. Muchos diseñadores no saben que pueden usar o mover cosas casi en el medio, además de usar alineados a la izquierda junto con él. Por lo que tienes remolque, alinear todo a la izquierda. Todos ustedes son elementos diseñados y mueven todo el bloque casi en el medio. Por lo que esta es una técnica muy sencilla para crear interés. Te voy a mostrar el dedo del pie de esos diseños y luego vamos a ver algunos ejemplos. Ahora se puede ver en la parte superior tengo bloque blanco, que va a ser un texto muy grande. Entonces cualquier sitio web que estés diseñando, tenemos, como, dos o tres líneas, muy grande, texto muy grande, audaz que va a mostrar lo que hacemos. Nuestro servicio y este bloque blanco puedes ver u escuchar que todo será Tu texto estará alineado a la izquierda por lo que todas las líneas de texto estarían empezando desde aquí. Y lo que hacemos es que se ve realmente raro, pero se ve realmente genial si intentas hacer esto en tu diseño, me he ido como dos columnas de aquí y tres columnas de aquí. Entonces esto va a funcionar mucho. Por lo que está casi en el medio y ha dejado una línea. Así que trata de mover las cosas mientras mantiene el elemento de alineación izquierda por aquí están en tus elementos de diseño y se va a mirar crear. A ver, un arreglo más. Ahora aquí hay otra. Para que se pueda ver por aquí. Aquí, tenemos rumbo. Entonces tenemos línea de subtítulos o escuchamos algún dext. Entonces tenemos cuatro características diferentes o algo así. Cualquier tipo de características o tal vez algunos servicios. Y se puede ver tenemos un ícono, uno encabezando una línea un ícono, uno encabezando una línea y se puede ver que están casi en el medio. Y ahí todo su contenedor está en realidad en el medio. Entonces si nosotros, uh, conseguimos todo este bloque, está en el medio. Pero si miramos individualmente cada bloque, están alineados a la izquierda. Se puede ver esto es a lo que me refiero que cada vez que intentas algo como esto, tienes remolque. Alinee sus elementos internos a la izquierda y todo el bloque bloque bloque bloque fuera de estos elementos en el medio. Entonces esto va a crear mucho apagado confiando tus diseños y tenemos botón en la parte inferior. Tenemos encabezamiento en datos de texto en el medio y luego estas cuatro características, todas están alineadas a la izquierda. Pero están en el medio, todo el bloque, todo el contenedor para estas características o para estos servicios, están en el medio. Por lo que esto en realidad es combinar línea central, más a la izquierda Align. Ahora vamos a ver algunos ejemplos fuera de mi trabajo y también de otros artistas o diseñadores. Y ya veremos cómo. En realidad esto funciona en la vida real o diseños de sitios web o diseños de aplicaciones móviles. Ahora bien, este es un ejemplo fuera de esta página de aterrizaje que diseñé y se puede ver por aquí. Si miran esta sección, esto es escuchar un rial, testimonios de desgravación fiscal, y voy a encender mis calificaciones y pueden ver esto cajas medias por aquí no están alineados a ninguna avaricia. En cambio, están en medio de este contenedor entero en el medio y el texto y se puede ver u oír. Escuchar. Hemos escuchado a David sobre y este texto este testimonial, es una línea de la izquierda. Entonces si dibujamos un bloque por aquí, se puede ver que está alineado así. Yo cambié el color para que puedas tener la idea. Por lo que todo dentro de este contenedor está alineado a la izquierda. Pero todo el contenedor o bloque está en el medio. Entonces esto es lo que en realidad quise decir. Y déjame mostrarte una más. De acuerdo, entonces aquí tenemos de nuevo el mismo arreglo. Todo está a la izquierda. Alinear. Conjuré así. Y todo este bloque es que está en medio este thes 12 columnas. Entonces este es otro ejemplo del que tenemos. Déjenme mostrarles éste. Entonces vamos a esconderlos y puedes ver u oír. Se trata de servicios fiscales disponibles y nuevamente el mismo concepto. Esto está en el medio. Esto está en el medio. Entonces de nuevo, esto es todo este bloque está en el medio y thes dos cuadras. Se quedan. Alinear allí iconos de texto completo, línea izquierda. No estoy usando un alineamiento medio con él. Por lo que tenemos línea central más elementos alineados a la izquierda. Por lo que esto va a funcionar un grande. De igual manera, tenemos éste. Por lo que tu próxima tarea será que tengas que crear algo como esta, cuatro o cinco características. Y hay que usar algo como esto, que va a ser alineación media y línea central más alineación izquierda. Por lo que se puede ver el dedo del pie por aquí que este impuesto y este rumbo es de línea central. Y si vamos en esta siguiente sección donde tenemos diferentes sanciones e impuestos hechos diferentes ofertas y tenemos todo a la izquierda. Entonces todos estos iconos, todos los pasos que son de la línea izquierda, pero todo el bloque en la parte inferior. Entonces si seleccionamos este bloque, está en el medio. Entonces esta es otra técnica que he visto muchas veces, pero creo que la mayoría de los diseñadores no se dan cuenta de ésta. Entonces aquí tenemos esto y espero que lo entiendas mejor. Veamos algunos ejemplos más. Aquí hay otro diseño de quién es este? OK, así que no puedo sacar nombre de este Christian Randall de todos modos. Entonces si miras en esta sección Por aquí. Se trata de un diseño. Y si miras por aquí, puedes ver este texto y las pilas por aquí en rojo. Esto es en realidad alineación media y línea izquierda. Entonces esto, diseñadores usando línea media y línea izquierda, puedes ver aquí Tenemos dos columnas que quedan por aquí. Aquí otra vez. Tenemos dos columnas. Ya puedes ver. Estas son casi líneas de cuadrícula en que están siguiendo estas para este diseño. Y ha dejado dos columnas por aquí. Dos columnas por aquí. Por lo que está casi en el medio, pero ha usado izquierda alineada con ella. Para que se pueda ver así es como se ve. Entonces tenemos una cuadra por aquí, una cuadra por aquí. Algunos oscuros por aquí. Y esto se ve realmente genial. Entonces esto es otra vez. Si nos fijamos en esta sección overhead, vamos a acercar. Esta es la misma técnica. No siempre significa que tengas que alinear tu texto o tu bloque casi en medio de tu página. Se puede hacer eso moviéndolo a la izquierda para así de nuevo es la línea izquierda. Mucho espacio a la izquierda y es de la línea izquierda, y se ve muy bien. Veamos algunos ejemplos más. De acuerdo, entonces aquí tenemos un ejemplo más. Y si miras esta sección donde tenemos las herramientas que necesitas Ok, entonces tenemos todo. Una línea a la izquierda por aquí. Entonces tenemos rumbo en el medio. Después tenemos algún pequeño tagline en el medio en el centro. Y estas todas estas características 123456789 características. Todos son una línea a la izquierda. Y una cosa más interesante que he visto o aquí estas características diferentes son estos diferentes servicios. Están en tres apartados diferentes. Esta es la sección uno, dedo del pie tres. Y lo que hizo este diseñador es en realidad, uh, veamos quién es múltiples dueños. De acuerdo, entonces tenemos agencia de diseño o jefe de todos modos, para que puedas ver que este texto este rubro de la izquierda está realmente alineado a la derecha. Por lo que está tocando esta línea. Esto está cosiendo esta línea. Entonces es realmente, creo que el uso creativo fuera de alineación en su diseño. Entonces estos son algunos ejemplos que realmente quería compartir con ustedes. Veamos un ejemplo más que está usando una aplicación móvil. Entonces cada vez que estás diseñando una aplicación móvil, creo que quizá no te hayas dado cuenta de una parte. La mayoría de ellos usan línea izquierda con contenedor de alineación media. Entonces tenemos se puede ver como esta tarjeta blanca por aquí y todo el textil aquí está. Y el botón Oh, aquí está en esta dirección. Por lo que hemos dejado alineado todo y todo este contenedor que está conteniendo todos estos elementos, está en el medio. Entonces tenemos Tenemos el mismo margen, la derecha y la izquierda. Por lo que puedes ver de manera similar si miras esta pantalla, esta es la pantalla de inicio. Y este es un simple préstamo hipotecario en línea. Todo queda a la izquierda de la línea. Todo se queda forrando cuando se puede ver Sí, veo regulado. También se deja una línea. Pero se puede ver en el medio tenemos una caja o contenedor que está en el medio. Entonces estas son las cosas que vas a usar dedo del pie en tu puedes decir en tus diseños para crear , realmente crear Lee o así voy a compartir contigo una más, Que es ésta que creo que te mostré en lecciones anteriores. Fronteriza. Y puedes ver realmente me encanta cómo han usado muy pobre, muy organizado, amable diseño simple. No es nada complejo, solo equipos de producto. Parte es una forma visual simple de definir parques puros están dando como resultado una organización más alineada . Por lo que se puede ver un botón muy bonito, un enlace sencillo. Pero lo que están usando en realidad ha dejado línea con casi una línea media. Por lo que no es un puramente en el medio, pero sigue siendo comercio por la izquierda, sino junto con su uso de alineación izquierda. Entonces esto se ve realmente, realmente bonito de lo que tienen esta imagen que está gastando casi todo el espacio. Y luego han vuelto a utilizar esta técnica de nuevo centro medio alineó todo este contenedor y todo es una línea a la izquierda. Por lo que los impuestos me alinean a la izquierda. Se ve realmente genial y simple. A ver si podemos encontrar un ejemplo más. De acuerdo, entonces aquí lo tenemos otra vez. Línea media y el texto se deja una línea. Mira de cerca. Creo que deberías poder hacer eso ahora, hasta ahora, y, um, creo que eso es todo. Si traté de encontrar algún ejemplo más, veamos si tengo Ah, algunos ejemplos más de mi trabajo anterior. De acuerdo, entonces aquí tengo mi propio sitio web de diseño, que estoy rediseñando ahora mismo. No estoy seguro de qué versión es. Final uno o lo que sea. Entonces déjame ver si he usado Sí. Está bien. Para que se pueda ver por aquí. Esto es en realidad vamos a esconder este. Escondemos estos. Entonces en esta sección, fuera de las reseñas de usuarios o de mis opiniones de estudiantes, puedes ver lo que dicen los estudiantes. Entonces esto en realidad se dirige británico, que está en el medio. Y estos todos estos todos estos testimonios. Todos son una línea a la izquierda, imágenes a la izquierda. Dex es una línea de la izquierda, pero se puede ver que se ve realmente bien. No quiero,ya sabes, tener ya sabes, sólo un medio alinear un elemento, y esto va a hacer que este diseño sea muy aburrido. Entonces si sólo tuviera uno como éste en el medio, podría hacerla un poco vertiendo. Por lo que he usado la alineación izquierda con la alineación media. Um eso. A ver si lo he usado en otro lugar. De acuerdo, entonces aquí lo tenemos otra vez. Aquí. Se puede ver esta dirección y contacto. Este bloque está casi en el medio. No creo que esté casi en medio, pero un poco a la derecha. Pero estoy usando la alineación a la izquierda. Entonces esta es una gran técnica. Puedes usar eso en tus diseños y puedes crear Ah, características tipo off realmente interesantes o secciones testimoniales o secciones de servicios, cosas así. Del mismo modo, he usado por aquí casi. Esta no es una línea en el medio, pero estoy usando todo este bloque, que está casi en medio de estas seis columnas Por aquí. Probemos con el dedo del pie tener algo como esto. Entonces tenemos nuestra grilla encendida y se puede ver que está casi en medio de toda esta 80 hora aquí, ¿de acuerdo? Y está usando la línea izquierda. Entonces no todo lo que tienes para alinearlo en medio de toda la página o todo tu diseño. Pero también puedes usar algo como esto. Tengo siempre aquí. Entonces esto luce Déjame dureza. Entonces esto se ve realmente genial Si tenemos. Si tratamos de usar algo y hacer algo como esto, veamos si he usado en otro lugar. De acuerdo, entonces aquí lo tenemos otra vez. Eso es duro. Estos por lo que podrías estar escuchando mucho de mis ruidos de teclado de todos modos, así que puedes ver este encabezado está a la izquierda. Por otra parte, esta sección esta sección de tus cursos de diseño está en realidad en el medio, y en realidad no está totalmente en el medio. Tiene algunos. Se puede ver todo está alineado a la izquierda. Por lo que tenemos alineación media o alineación central con combinada con alineación izquierda. Entonces esto es otra vez. Tenemos cabello, dos cursos, y aquí tenemos dos cursos. Entonces este va a ser el nuevo diseño para mi, um, um, tierra de sitio web. Tú excitante. También voy a darle mi rediseño de logo a algún otro diseñador, y espero que el dedo del pie, uh, te muestre lo pronto que sé que no tengo tiempopara, ya sabes, canjear esto yo mismo. Entonces voy a contratar ya he contratado otro trimestre. Entonces, um, creo que de igual manera puedes ver en este móvil móvil Déjame mostrarte este. Entonces tenemos esta interfaz móvil Y si voy por aquí, se puede ver esta seccional aquí está en el medio, y es una línea a la izquierda. Entonces esto se ve realmente bien. Entonces, uh, es como puedes usar esta alineación media con alineación izquierda y crear diseños de aspecto impresionante . Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta, siempre puedes preguntarme. Pasemos a la siguiente lección. 28. Gracias a todos: muchas gracias por tomar esta clase. Si tienes alguna duda respecto al diseño o respecto a esta clase, siempre puedes preguntarme en la sección de comunidad. Además, no te olvides del dedo del pie derecho. Algunos revisan algunas palabras bonitas. Entonces para mí, Así que puedo, ya sabes, conseguir algo de inspiración para crear más clases como estas en. Y además no te olvides del dedo del pie echa un vistazo a mis otros cursos porque lo son. Tengo muchos cursos sobre diseño de UX, diseño interfaz de usuario y freelancing y diseño visual. Entonces hasta entonces, nos vemos pronto en la siguiente clase.