Crear un sistema de rejilla (semana 6 de la UI Bootcamp)

1. Introducción: Esta semana vamos a estar construyendo un sistema de red. En primer lugar, veremos cuadrículas históricas, mirando hacia atrás a los libros antiguos, etc. Y luego veremos cómo algunas de estas reglas podrían aplicarse a los sitios web. Sobre todo cómo la rejilla vertical va a dictar todo, sobre todo con diseño receptivo. Sin preocuparnos por la codificación, vamos a hablar un poco sobre cómo funciona el modelo de caja en CSS y cómo esto se aplica a CSS Flexbox y CSS grid. Nuevamente, no te preocupes, no vamos a estar mirando ningún código. Utilizaremos este conocimiento para construir una cuadrícula básica de aspecto agradable para un artículo sencillo en una página web. Y luego finalmente, crearemos cuadrícula un poco más complicada que se puede utilizar para una aplicación web de interfaz de usuario moderna basada en componentes. Vamos a ver cómo funcionaría la cuadrícula para los componentes individuales que se agregarían a este sitio. El uso de sistemas de cuadrícula para el diseño de la interfaz de usuario ha cambiado mucho en últimos años ahora que construimos componentes individuales para nuestras interfaces de usuario. Por lo que es realmente útil saber construir este estilo de grid. Así que empecemos. 2. Geometría: En muchos países alrededor del inicio del siglo XX, la gente se trasladó a las ciudades por la industrialización, había más empleos y ciudades y abandonaron los viejos sistemas aristocráticos o feudales que existió en muchos países. Junto con esto, abandonamos las viejas artes clásicas y formas de diseño y miramos más cosas como cubismo, el constructivismo y el futurismo. Empezamos a crear formas y diseños artísticos que eran un poco más geométricos y un poco más ordenados que las generaciones anteriores. Por supuesto, en Persia, Arabia y Asia Central, llevan miles de años usando diseños geométricos . A veces estos estilos se atribuyen al hecho de que algunos conjuntos islámicos no permiten el dibujo de humanos o animales porque no quieren idolatrar nada. Pero en realidad, muchas de estas no son formas diseñadas anteriores al Islam y mucho más probabilidades de ser relevantes porque estas son las áreas donde la gente adoraba matemáticas y ciencia e ingeniería mucho antes del resto del mundo, ya hablamos un poco de geometría cuando hablamos de tipografía, hablamos a principios del siglo XX, muchas tipografías geométricas se hicieron más populares. Y la gente usa la excusa de que eran más fáciles de leer como si fuera más racional o lógico tener estas tipografías. Y en realidad ahora sabemos que son casi los más difíciles de leer porque las formas se ven tan parecidas. De igual forma, cuando agregamos rejillas geométricas al resto de nuestro diseño, en realidad se trata un poco más las tendencias actuales esa cantidad, cuán utilizables son. Nos gustaría decir que se ve limpio y por lo tanto es más fácil de usar. Pero en realidad es solo porque esto es lo que gente espera que los diseños se vean actualmente. Cuando miramos estas tendencias artísticas como el cubismo, el futurismo de principios del siglo XX, nos damos cuenta de las que en realidad son bastante llamativas y nos gusta mirar sí tienen un elemento de caos en ellos. Cuando intentamos crear nuestras composiciones en el primer módulo, una gran comida para llevar fue que queríamos crear un sentido del orden, pero necesitamos estropearlo con un poco de caos para, podemos crear algo razonablemente visualmente agradable usando nada más que formas geométricas. Y hablaremos más sobre la creación imágenes para nuestro sitio web un poco más tarde. Pero si usáramos esto para parte de nuestro sitio web, nos gustaría asegurarnos de que esta cuadrícula esté basada en la cuadrícula que ya creamos para nuestra tipografía. Y observa que por el mismo acto de tener tipografía en esta página, ya hemos creado inadvertidamente un ritmo horizontal con todas estas líneas verticales en el texto. Si este diseño usaba una tipografía más amplia o incluso una tipografía monoespaciada, va a dar una sensación muy diferente al ritmo horizontal de la página. Y en la rejilla que creamos debemos seguir ese sentimiento. Si nuestra página sólo tuviera un bloque de texto en ella, naturalmente ya tendría una cuadrícula con las líneas horizontales y verticales creadas a partir del texto. Y el resto de nuestra página debe seguir esa cuadrícula. Quizás estas formas geométricas de la izquierda podrían parecer bastante diferentes. Si tuviéramos una tipografía más amplia, tal vez se vería mejor con líneas más anchas a la cuadrícula. Estoy razonablemente contento con este diseño que he creado aquí solo usando una cuadrícula muy simple, algunas formas geométricas basadas en estas opciones tipográficas. Pero similar a cómo esos artistas revolucionarios que se les ocurrió el cubismo y el futurismo, las mejores piezas de arte en realidad tenían un elemento de caos y similar a cómo las composiciones que creaste el primer módulo tenía un elemento de caos que los hacía más interesantes. Nuestro diseño no es realmente una lágrima completa. Este diseño se ve un poco demasiado uniforme. Déjame intentar agregar en algunas formas orgánicas. Se puede ver que he agregado en una fotografía real, he puesto algunas líneas en las que no se alinean del todo a la cuadrícula. Y en la parte inferior izquierda hay una forma que es casi como una extraña forma de tipo flor con la excepción de la fotografía, estas formas no encajan en esa rejilla original que el resto de estas formas geométricas sí. Rompan las líneas de esa rejilla, pero le dan una sensación orgánica más real y llama nuestra atención un poco mejor. Ahora esto se siente más como una composición completa. Si miras tus sistemas tipográficos que creaste en los módulos anteriores, notarás que dos sistemas tipográficos diferentes tienen una sensación muy diferente para ellos solo por los ritmos horizontales y verticales creados por las rejillas naturales de diferentes tipografías. También has tomado decisiones sobre las alturas o embarque Berline y el rastreo o espaciado entre letras. Esto fue principalmente para que fuera fácil y cómodo de leer. Pero nota cómo si tomo este sistema tipográfico y estoy cambiando masivamente el seguimiento y las alturas de línea. Cambia por completo la sensación de la página y por lo tanto cambiará cualquier cuadrículas que creé a su alrededor. Si hice un ejercicio similar al que hice antes, donde agregué algunas formas geométricas a esto. Yo añadiría algunos que quizás sean mucho más altos y delgados, mucho más delgados. Recuerda en el primer módulo cuando creamos todas esas composiciones locas, prueba eso ahora con uno de tus sistemas tipográficos. Simplemente agrega algunas formas extravagantes aleatorias y observa cómo se van a sentir o parecer bastante diferentes dependiendo la cuadrícula natural ya creada por tu tipografía. Este que he creado aquí en la pantalla, es completamente ilegible. Pero si tuvieras algo con esta alta altura de línea, tal vez se va a quedar mal. Entonces con algunas formas altas y algunas líneas bastante delgadas, ha estado muy de moda en los últimos 100 años más o menos tener artes muy geométricas y trabajos de diseño. A través del resto de este módulo, vamos a hablar de crear una rejilla para que todos los elementos de tu diseño quepan perfectamente en. Ya tienes una rejilla natural del sistema tipográfico que has creado. Por lo que vamos a seguir esta rejilla natural cuando creamos la rejilla para nuestra página web, nunca queremos que todo en nuestra página web quepa perfectamente en esta cuadrícula y sea perfectamente geométrico, siempre vamos a querer agregar algunas formas orgánicas y algunas cosas que simplemente no se ajustan a la rejilla para que sea visualmente más interesante. 3. Tipos de cuadrícula: Antes de mirar cualquier cuadrículas en páginas web o aplicaciones web, empecemos por mirar las primeras cuadrículas de la historia y empezar a construirla desde allí. Los primeros libros de la historia tenían una especie de cuadrícula y se le llama agarre manuscrito. Se ve así. Todas las letras de la página encajan cómodamente en esta bonita y ordenada cajita. Ahora notarás que hay mucha decoración alrededor de una casa, muchas formas orgánicas. Es muy clásico. Pero todavía hay esta área designada donde van las letras, la rejilla real para esta página, sólo se ve así, como estas líneas rojas aquí. Ahora, antes en el inicio mismo cuando enmarcamos la caja, cuando estábamos aprendiendo sobre nuestras composiciones, aprendimos que en realidad solo con una forma simple como una caja enmarcada, hay todo tipo de variaciones. Todavía puedes divertirte un poco con esto, y notarás que esta cuadrícula está fuera centrada como un margen grande, mucho más grande en la parte inferior y la derecha. Y sigue siendo creativo incluso antes añadir todas esas formas orgánicas y todas las letras en, solo con esta sencilla cuadrícula manuscrita, podríamos hacerla central. Podríamos tener toda una carga más margen en la parte inferior, o podemos tener un margen mucho más dramático en uno de los lados. Por ejemplo, después de esto llegó la cuadrícula de columnas donde podemos tener más de un cuadro de texto en la página. Si fuéramos a seguir pensando esto justo en cuanto a la composición, esto nos da una nueva medición para pensar en el espacio entre estas dos cajas, llamamos a esto la canaleta. Esto obviamente necesita ser lo suficientemente grande como para diferenciar entre estas dos casillas de texto. Y lo suficientemente pequeño como para que no terminemos usando demasiado espacio de página. Pero también va a afectar cómo se siente la página. Esta página en particular tiene una caja extra en la parte superior y otra caja en la parte inferior. Estos son por supuesto encabezados y pies de página. Pero ahora notarás que en realidad hay un canalón entre estos también. Probablemente queremos mantener este tipo de uniforme con ese espacio que ya tenemos entre las otras cajas, o al menos lo son, encaja en una relación cómoda. Aquí hay una página más moderna. Estas dos columnas tienen exactamente el mismo ancho. Es mucho más obvio que lees el de la izquierda y luego el monómero, ¿verdad? Definitivamente es más claro. Se ve más moderno. Pero espera un segundo. En realidad hay este poco extra de texto a la izquierda. Por lo que en realidad tenemos aquí una tercera columna que es un ancho completamente diferente. Y esto hace que parezca un poco más interesante. Recuerda por nuestras composiciones cuando hablábamos de hacer las cosas relacionables, esta columna más estrecha también nos dice que no es lo mismo. Podemos decir de inmediato que esta otra columna sirve para un propósito ligeramente diferente. Como queremos que nuestras columnas y canaletas se sientan siempre como si pertenezcan juntas. Podría parecer extraño tener uno un ancho diferente, pero en realidad hay otra posibilidad que esto no sea tres columnas, en realidad podrían ser cinco, con algunos de los elementos que abarcan más de una columna. Ya ves, cuando creamos nuestra cuadrícula subyacente, no estamos diciendo que todo en ella va a tener una sola columna de ancho. Supongamos que esta rejilla fue utilizada para una revista. Ahora en otras partes de la revista, se puede usar la misma rejilla, pero puede haber diferentes áreas que abarcan diferentes columnas. Incluso podemos usar elementos que abarcan todas las columnas o ninguna de las columnas. Podríamos tener un área que acaba de dejar abierta. Y sólo para hacerte pensar en cuadrículas de una manera ligeramente diferente, También es posible que se trata de cinco columnas, pero en realidad no son del mismo ancho, pero simplemente no como pensamos originalmente. Esto no haría diferencia en esta página exacta, pero haría algunas diferencias interesantes otras páginas a lo largo de la misma revista. Y podemos tener algunos diseños creativos un poco más interesantes debido a esto. Y el siguiente tipo de rejilla de la que quiero hablar es de una rejilla modular. Esto es más como una mesa. Tiene filas así como columnas de lo que ya hemos hablado. Probablemente ya puedas decir que esto se presta mejor a sitios web y aplicaciones web porque estamos lidiando con algo que puedes desplazarte hacia abajo por muchas, muchas páginas. Es mucho más largo de lo que es ancho. Dividir las cosas verticalmente repente tiene mucho más sentido. Una página web puede tener diferentes secciones a medida que se desplaza hacia abajo por la página. Y al tener una rejilla modular, estamos asegurando que haya cierta uniformidad en la altura de estos y algún tipo de ritmo vertical. Al bajar la página. Es posible que hayas notado en el diseño de página original, esta imagen y textos en la parte inferior izquierda de la página en realidad no se separan en esta cuadrícula modular aunque. Esta sección tiene su propia rejilla dentro de ella. Y esto está totalmente bien. Muy a menudo incrustaremos una rejilla dentro de otra. De hecho, como veremos en el siguiente video, una vez que lleguemos a empezar a trabajar en sitios web, muy raramente solo tenemos una cuadrícula para todo. De hecho, si te muestro este último ejemplo de una revista de aspecto un poco más moderna, tal vez incluso parezca una revista que aún podrías recoger hoy, verás una imagen que abarca todo el ancho, algunos encabezados que están alineados centralmente y utilizan el mismo módulo a la izquierda y a la derecha, estas columnas de texto, y luego algunos módulos con algunas notas al pie de página en la parte inferior. Estas páginas están claramente tratando de encajar un montón de diferentes tipos de información ahí. Y hay muchos tipos diferentes de módulos que bajan por la página. Pero hay cierta uniformidad, no solo de una página a otra, sino también en algunas de las agallas hay anchuras y cosas como esta que dan una sensación de uniformidad al bajar la página todavía. Sé que los ejemplos en este video tienen que ver con el diseño de impresión. Y obviamente hasta este último son todos de aspecto bastante antiguo. Pero ojalá esto nos prepare la configuración para el próximo video. Cuando estamos diseñando una aplicación web o una página web, generalmente usamos alguna forma de una cuadrícula modular donde tiene filas y columnas, una cuadrícula vertical y una horizontal. Cada elemento de la página puede cruzar múltiples columnas o filas. Simplemente le dan más de una mirada uniforme después. Y normalmente, sobre todo con el diseño de sitios web, podemos incrustar una rejilla dentro de otra. 4. Importación de las cuadrículas: Aquí tenemos un bonito diseño simple para tal vez una página de inicio o un banner de héroe en un sitio web. Ahora estos elementos, no sólo los he puesto en ninguna parte. Me he asegurado de que se alineen un poco el uno al otro de alguna manera. Si tuviera que sacar todo un poco fuera de esta cuadrícula subyacente que acabo de mostrarte, te darás cuenta de que al instante se ve mucho peor. Al instante se ve mucho menos profesional. Te confías menos, te sientes un poco ansioso solo mirándolo. Sin embargo, son los mismos colores, los mismos tipos de letra, todo es la misma relación, la misma ilustración, es el mismo fondo. Simplemente no se alinean entre sí. En mi opinión personal, lo mejor absoluto, más importante que un diseñador puede hacer para mejorar instantáneamente sus diseños. Hacer que se vean más profesionales y más confiables es simplemente asegurarse de que alineen estas cosas. Si solo miramos primero la topografía porque ya somos expertos en esto, ya hemos creado una rejilla vertical para nuestros tipos de letra. Todo esto se ve bien por aquí ya porque encaja muy bien en esta rejilla vertical. Ahora sabemos que la mayor parte de las cosas en nuestra página web va a ser topografía, y esto ya se basa en esta rejilla vertical. Entonces deberíamos usar la rejilla vertical de nuestra tipografía para dictar todo lo demás. Si agregamos esta rejilla de nuevo en ahora y queremos que este encabezado tenga un color de fondo. Queremos asegurarnos de que esta área alinea con esa misma rejilla vertical. Y así acabo de dividir esta página en tres secciones verticales con fondos de colores ligeramente diferentes. Y estas tres secciones se alinean con esa rejilla vertical inicial. Ahora solo voy a poblar esta página con algunos otros pequeños elementos que he encontrado y los colocaré en esta cuadrícula para, y luego echemos un vistazo a dónde creemos que podría estar esta cuadrícula. Esta sección superior de aquí arriba parece que tal vez haya dos columnas, una con el texto a la izquierda y otra con esta imagen a la derecha. Pero entonces si me desplaza hacia abajo y ves esta sección, se podría decir, bueno, en realidad esta es una cuadrícula de tres columnas porque mira esta área. Así que tal vez ha usado una cuadrícula de tres columnas para toda esta página. Ahora claro estoy afirmando lo obvio específicamente quería algo donde pudiéramos usar esta sección superior e inferior. Podríamos tener esta rejilla de seis columnas. Y estos elementos en la parte superior sólo podían abarcar tres de las columnas. Bueno, en realidad, originalmente con diseño web atrás cuando empecé por primera vez, todos tendrían este tipo de grilla de 12 columnas, que pondríamos todo y haríamos todos los elementos alineados de alguna manera a estas 12 columnas. Y en realidad algunos marcos CSS más antiguos usaban para obligarte a pensar así también. Una de las desventajas de solo tener esta rejilla estándar de 12 columnas para todo es a medida que empiezas a usarla, te das cuenta de hacerlo versátil, necesitas canaletas muy grandes y eso no siempre funciona. Así que terminas una especie de hackearlo y tener algo que realmente no está alineado a él debido a los avances en CSS, ahora podemos trabajar en una página web más como si trabajáramos en un diseño de revista moderno. Esta área superior, tal vez sea solo una cuadrícula de dos columnas, y luego esta área inferior es solo una cuadrícula de tres columnas completamente separada. Vamos a tener que entender parte de la teoría subyacente de CSS para que podamos diseñar nuestras cuadrículas. Pero ya se pueden ver las ventajas de tener una cuadrícula que sea solo dos columnas y luego una cuadrícula completamente separada que es tres columnas. Porque ahora tenemos control sobre la canaleta. Podemos hacer que esta canaleta sea relativa a nuestra rejilla vertical y al estilo que estamos creando en nuestra página. Y será uniforme ya que miramos en el escritorio móvil y toda la capacidad de respuesta está en medio. Tenemos control sobre este ancho. Podemos hacerlo encajar en nuestro bonito diseño uniforme. Asegurarse de que los elementos de nuestra página alineados a algún tipo de rejilla es lo más importante que podemos hacer para que nuestros diseños se sientan cómodos, profesionales, y que se vean dignos de confianza. Nuestra topografía va a dictar la rejilla vertical inicial, dando cierta uniformidad y algún ritmo a las alturas de cada sección. Pero cada sección va a tener en realidad una cuadrícula horizontal diferente. páginas web van a variar ocasionalmente en ancho dependiendo qué dispositivo lo estamos mirando y por ocasionalmente otras razones también. Entonces la única medida sobre la que tenemos control es en realidad el canalón entre las columnas. Y podemos hacer este uniforme en todo nuestro sitio. 5. Modal de caja: Si no sabes nada de CSS en absoluto, necesitarás conocer algunos conceptos para poder crear cuadrículas. Pero si ya estás muy consciente de lo que es el modelo de caja CSS, siéntete libre de saltarte este video. Cada elemento en una página web potencialmente tiene. Estas tres cosas son frontera, relleno y márgenes. No te preocupes si esto no tiene sentido. Veamos un ejemplo del último diseño que te mostré. Echemos un vistazo a esta área de contenido aquí que actualmente estoy mostrando como caja morada. Esta caja tiene relleno. Ahora eso es lo que actualmente estoy mostrando como verde en la pantalla aquí. Tiene un borde que actualmente estoy mostrando como amarillo, pero no era azul marino. Un momento para ir. Ahora el borde es la parte que en realidad se puede ver en la pantalla. Y tiene un margen. Esa es la zona que actualmente estoy mostrando en naranja, el relleno, el borde y el margen pueden ser todos diferentes tamaños. Todos ellos pueden ser 0. No pueden existir. Por ejemplo, si no había borde, y acabo de hacer el fondo aquí negro para hacerlo un poco obvio donde está la diferencia entre el relleno y el margen. Podríamos tener algo que se vea así. El contenido se muestra en púrpura, el relleno se muestra en verde, y el margen todavía se muestra en naranja. Solo para ayudarte a visualizar exactamente cómo funcionaría eso, veamos otro ejemplo. Pero esta vez no tenemos relleno. Sin relleno, se vería así. En cambio, el área de contenido es púrpura. Tenemos la frontera mostrando ahora en amarillo y el margen de nuevo en naranja. Y por qué no solo terminar el set mostrándote cómo vería esta parte del diseño si no hubiera márgenes. Nuevamente, permítanme simplemente resaltar el área de contenido en púrpura y el relleno es verde y el borde es amarillo. Así que ojalá todo eso sea increíblemente claro por ahora, pero siéntete libre de volver atrás y tener otra mirada rápida. Si sigues un poco confundido. También es totalmente posible que el tamaño del borde superior, inferior , izquierdo o derecho, margen o relleno pueda ser completamente diferente. Por ejemplo, aquí mismo, lo he hecho el borde derecho más grueso que los otros tres. Cada elemento en cada página web tiene estas tres cosas, relleno, frontera y margen. A pesar de que por supuesto se pueden fijar a 0, por lo que no se pueden ver. Cada una de estas cuatro secciones aquí, la imagen y el texto, y tal vez este sea un botón en la parte inferior. Cada uno tiene sus propias cajas con relleno, márgenes y bordes. Estos cuatro elementos que tenemos un nombre para texto e imágenes de todos envueltos dentro de esta caja. Ahora puedes escuchar a los desarrolladores usar bastante la palabra div. Es abreviatura para el divisor de palabras. Esto se llama div. Agrupa esta imagen y este contenido de texto dentro de ella. Y como vimos antes, esto tiene su propio relleno, frontera y márgenes. Y podemos tener tantos de estos divs invisibles como nos gusten, dividiendo nuestra página web en grupos convenientes. Ahora volveremos a hablar de diseño en breve. Pero antes que nada, debes asegurarte de que eres consciente de que cada elemento de una página, incluidos los divs invisibles que agrupan cosas juntas, tienen bordes, márgenes y relleno. Ahora hay un par de técnicas realmente buenas que podemos usar. Por lo que estos divisores separan la página, cómo queremos que se separe. Uno de ellos se llama Flexbox y uno de ellos se llama grid. Y los vamos a ver en los próximos dos videos. Por lo que habrá un poco más de CSS. Así que simplemente, cada elemento de una página web tiene relleno, borde y margen. Estos pueden ser anchos diferentes en diferentes tamaños e incluso pueden ser ceros para que no se muestren en absoluto. Podemos agrupar elementos en divs y también tendrán relleno, bordes y márgenes. Para controlar convenientemente los tamaños de estos divs, podemos usar flexbox y grid, que son dos reglas CSS que veremos en los próximos dos videos. 6. Flex Box: Si íbamos a empezar a crear un sitio web, tal vez crearemos algo primero que luzca muy sencillo así. Supongamos que esta caja en la parte superior izquierda es un logotipo. Y estas dos casillas en la parte superior derecha, botones impresionantes, estos elementos mismos siempre van a tener el mismo ancho, independientemente del ancho de la ventana del navegador. Va a tener sentido para nosotros simplemente agrupar estos juntos en uno de estos elementos invisibles que mencioné llamado div. Esto tendría sentido aquí porque queremos que sea un ancho máximo que pueda ser este div. Si lo miramos en un monitor muy, muy grande, no queremos que el logo justo en la parte superior izquierda del monitor y en la parte inferior derecha en la parte superior derecha, querríamos que este div se vea limitado por un ancho máximo y para que se sienta relativamente central en la página. Si ahora tuviera que añadir una segunda sección a la página, como tal vez algunos textos de encabezamiento. Puede aparecer muy bien alineado con el logotipo simplemente porque el div circundante tiene el mismo ancho máximo y tiene el mismo relleno y márgenes. He mostrado el borde del div en amarillo aquí solo para que puedas verlo con más claridad, pero también tiene algún relleno. Los botones no caben bastante al borde del dev. Y también tiene algún margen. El div no toca la parte superior misma de la pantalla ni el elemento de abajo. Si miramos esta página web, por ejemplo, en un iPad, esto significa que el logotipo no está tocando el lateral de la pantalla y tampoco los botones. Si simplificamos esto ahora y miramos justo dentro de esta barra de rumbo a los elementos dentro de ella, tenemos dos botones en lado y un logotipo en el otro lado. Y podríamos simplificar esto diciendo que los dos botones están simplemente en otro grupo. Ahora, estas dos casillas que ahora tenemos a la izquierda y a la derecha, estos dos grupos o elementos siempre van a tener el mismo tamaño. Esto significa que el espacio entre sí va a crecer y reducirse a medida que el tamaño del navegador crece y se encoge. Y es aquí donde podemos optar por usar Flexbox. Esta es una regla bastante simple, pero es muy importante entender como diseñador porque rápidamente te das cuenta de que las mediciones que son importantes para nosotros para crear una sensación de uniformidad y asegurar que las cosas estén limpiamente alineadas en nuestro diseño probablemente no sea una rejilla subyacente y probablemente más los anchos de estos paddings y márgenes alrededor de estos diferentes elementos. Cuando agregamos la regla flexbox a un div o a un grupo, podemos hacerlo para que el espacio sea igual alrededor de cada elementos. Podríamos estirar cualquiera de los elementos su interior y podemos alinearlo para que todos los elementos se aplasten en el centro, a la izquierda o a la derecha. Entonces, por supuesto, todas estas reglas pueden funcionar tanto horizontalmente como verticalmente. Echemos un vistazo atrás a ese sencillo diseño creé hace un par de videos. Y veamos cómo haríamos el menú en la parte superior aquí, tenemos un logo a la izquierda, tenemos un botón a la derecha, y tenemos un pequeño menú en el medio. No podemos controlar el posicionamiento exacto de estas cosas. Va a depender del ancho del navegador. Y potencialmente puede depender de cómo el usuario haya establecido su tamaño de texto predeterminado en su navegador. Cuando desarrollamos esto o lo entregamos a un desarrollador, probablemente usarán un flexbox para asegurarse de que este menú esté en el centro. Y estos otros dos elementos están en el extremo izquierdo y el extremo derecho. El dimensionamiento sobre el que somos diseñador tenemos control es el patrón de este botón y el espaciado entre estos elementos del menú. Podríamos crear algún estilo uniforme y hacer que se sienta alineado haciendo estos todos del mismo tamaño. Por lo que quiero decir podríamos decir que el relleno en este botón y el espaciado entre estos elementos del menú es exactamente la misma cantidad de píxeles. Ahora eso no va a funcionar en todas partes. Y no creo que incluso realmente funcione en esta situación donde probablemente los elementos del menú necesiten un poco más de espacio a su alrededor. Similar a cómo ya tenemos una escala tipográfica. Y solo hay un número finito de tamaños de fuente que utilizamos a lo largo de nuestro diseño, solo vamos a tener una cantidad finita de relleno y tamaños de margen también. Por lo que está bien que el espacio entre estos elementos del menú y el relleno de este botón sea de diferentes tamaños. Pero idealmente queremos que encajen en la misma proporción. En el ejemplo de esta pantalla, los he hecho encajar en la proporción dorada. Como la tipografía casi siempre va a componer la mayor parte de lo que está en tu diseño. Tiene sentido completo que esta relación esté basada en la relación line-height que ya tienes en el ejemplo de diseño que estoy mostrando en mi pantalla, el relleno para el botón es exactamente el mismo tamaño que el párrafo línea-altura. Y para los elementos del menú donde hay un poco más de espacio, he usado las alturas de línea de uno de mis encabezados. Esto significa que en general, el diseño aún tiene ese elemento de conformidad, a pesar de que la rejilla puede cambiar de manera bastante dramática. Flexbox nos da control sobre cómo se justifican, espacian y alinean los elementos dentro de un grupo o un DIV. Esto nos deja con los elementos de ancho fijo dentro de ese div, así como los patrones en los márgenes que se encuentran dentro de nuestro control. Y realmente queremos sacar ventaja extra de esto para que todavía podamos crear una sensación de uniformidad en nuestros diseños, pesar de que puedan ser receptivos. Y hay todo tipo de cosas que pueden cambiar. 7. CUADRÍCULA CSS: La cuadrícula Css nos da mucho menos control que Flexbox, pero nos permite aplicar algunas reglas sobre múltiples filas. Si te imaginas una, una tabla como un Excel o algo así, tienes columnas y filas, y eso es lo que tienes en la cuadrícula CSS. Si te imaginas esto ligeramente, facultad penal lío de casillas que actualmente tengo en la pantalla con cuadrícula CSS, podemos obligarlas a tener el mismo ancho y mismas alturas. Esto va a ser rápidamente más útil donde te das cuenta de que luego podrías establecer un elemento para que sea dos filas, por ejemplo. Esto hace que la cuadrícula CSS sea mucho más útil para los diseños sobre todo el módulo o componente de nuestra aplicación web. Como vimos anteriormente, un diseño como el de la pantalla en este momento, podría ser tal vez una sexta columna o una cuadrícula de 12 con diferentes elementos que abarcan diferente número de columnas. Pero en realidad tendría mucho más sentido que cada uno de estos componentes simplemente fuera diferentes rejillas CSS, con la sección media simplemente siendo una cuadrícula de dos columnas y las secciones superior e inferior siendo un tres -rejilla de columna. Cada elemento de la cuadrícula tendrá un ancho uniforme, que puede cambiar a medida los cambios de tamaño del navegador tenían todo tipo de cosas diferentes. Así que de nuevo, la cosa que tenemos control sobre como el relleno y margen. Entonces esto es lo que vamos a utilizar para crear un sentido de conformidad en nuestros diseños. Esto no sólo es muy útil para darse cuenta como diseñador, sino que en realidad puede hacer sus vidas mucho más fácil. La forma en que piensan muchos diseñadores web. Y la forma en que solíamos pensar tradicionalmente es tener una rejilla estándar de seis o 12 columnas sobre todo. Y para hacerlo versátil, en realidad tendríamos que darle una canaleta mucho más grande que la que se muestra en la pantalla aquí, que como sabemos, va a quitarle la única variable que nos importa hacer que nuestros diseños se vean uniformes o nos hagan añadir un relleno tan grande a cada elemento que en realidad no nos da tanto espacio para jugar con el área blanca aquí dentro de cada uno de estos elementos, por ejemplo, todos estos se basaban en la rejilla modular original que solíamos tener en el diseño de impresión. Y sólo para recordarte un ejemplo, aquí tienes uno aquí mismo. Una cosa que notarás con este diseño de revista no es todo. Se rellenan las secciones. Algunas secciones o simplemente blanco liso y algunos solo tienen un rumbo en una esquina superior en algún lugar. Estamos usando la rejilla para ayudarnos a alinear elementos y hacer que las cosas se sientan uniformes después. Pero nadie tiene que ver nunca la rejilla ni saber que está ahí. Y ciertamente no queremos obligarnos a llenar cada parte de ella. La cuadrícula CSS también hace que sea mucho más agradable trabajar con la vista móvil o la vista de tableta. Simplemente tenemos que decir que a anchuras específicas, una cosa va a abarcar todas las columnas, mientras que anteriormente solo abarcaba la mitad de las columnas. Esto significa que ya no tenemos que pensar nuestros diseños como una vista móvil o una vista de escritorio. Pero más bien podemos pensar un componente individual como dividirse en una sola columna a un ancho específico o ser dos columnas a otro ancho. Si volvemos a mirar hacia atrás a una sección de esa sencilla página que creé, tal vez esto no esté funcionando en una sola cuadrícula. A lo mejor son dos componentes diferentes que cada uno tiene su propia lista de columnas y sus propios márgenes y rellenos. Entonces lo que los hace más uniformes, que les hace sentir que pertenecen juntos son los paddings, los márgenes, el espaciado, y los anchos máximos. Ahora, a medida que reducimos el ancho general del navegador, o tal vez lo miramos en un iPad. Tal vez el componente inferior simplemente se inserta en solo tener una columna, mientras que el componente superior está en dos columnas. Y luego a medida que nos hacemos un poco más estrechos o miramos en un teléfono móvil, quizás el componente superior es también solo una sola columna. El ancho exacto con el que ocurren estos cambios está ahora completamente dentro de nuestro control. Y pueden suceder a anchuras completamente diferentes. No necesariamente queremos pensar una cuadrícula como algo que creamos al principio. Creamos una cuadrícula para cada uno de los componentes y no necesariamente tienen que ser iguales. Lo que queremos crear en este momento es posiblemente algunas reglas uniformes sobre lo que pueden ser estos márgenes y rellenos y posiblemente una escala para diferentes tamaños. La cuadrícula Css nos permite posicionar algunos elementos en una tabla con filas y columnas. Ahora todos tendrán un ancho uniforme y las filas pueden tener potencialmente una altura uniforme también. Podemos agregar reglas para que el número de filas de ancho y el elemento sea pueda cambiar a diferente ancho del navegador. Y ya no hay razón lógica para que tengamos un número determinado de columnas para toda nuestra página web. Cada componente puede funcionar completamente separado entre sí. Similar a la flexbox, podemos volver a crear una sensación uniforme de conformidad al tener una escala para nuestros márgenes y anchos de relleno. Si no tienes experiencia en desarrollo, estos últimos videos pueden haber sido un poco confusos, pero lo vamos a traer por completo a continuación. 8. Responsivo con fluido: A lo largo de los años, ha habido varias formas diferentes de hacer que tus sitios web se adapten a pantallas de dispositivos de diferentes tamaños. Originalmente, la gente haría lo que llamaban diseño adaptativo, donde intentarías identificar cuál era el dispositivo y luego cargar una hoja de estilo CSS diferente para que un iPhone y una computadora de escritorio tendría dos sitios web diferentes. Esto fue bastante trabajo, y también se volvió absolutamente imposible ya que conseguimos más dispositivos con todo tipo de pantallas de diferentes tamaños. Los dos de los que todavía hablamos hoy son fluidos y receptivos. Ya tocamos el diseño de fluidos antes. Hablamos de cómo se podría utilizar la unidad VW, el ancho de la vista para hacer que el tamaño de la tipografía se ajuste a medida que se ajusta el tamaño del navegador. Esto significa que a medida que el ancho de tu navegador cambia de 999 píxeles de ancho a cien, diez cientos píxeles de ancho, tu diseño se va a ajustar cada vez tan ligeramente. Por cada ajuste en el ancho de la ventosa, el diseño va a ser ligeramente diferente. Y a medida que aumentamos el ancho, aumentamos el tamaño de la fuente, aumentamos la altura de la línea y aumentamos la longitud de la línea a medida que creamos nuestros diseños y creamos el código para implementar esos diseños siempre queremos estar conscientes de dónde estamos haciendo compensaciones. Ahora con algo así como topografía, en realidad hay múltiples cosas. Siempre queremos que nuestro sitio se vea bien. En mi opinión personal, la parte más importante de las experiencias de los usuarios, tener un sitio de buen aspecto tiene el mayor efecto en la experiencia de un usuario del mismo. Por supuesto queremos que el usuario pueda leer el texto de forma rápida y efectiva. Y hasta cierto punto, nos importa la experiencia de lectura porque la gente puede sentir que están progresando con textos más en textos que en realidad leen más lentamente. Hablamos de esto antes en nuestro módulo sobre legibilidad. Ahora para las tres cosas, qué bien se ve, la experiencia de lectura y la legibilidad. Vamos a estar haciendo compensaciones en diferentes puntos de nuestro diseño. No obstante, con esta idea de diseño fluido, no beneficia a ninguno de ellos hacer texto que sea fácil de leer para alguien. La única variable que nos importa es ¿qué tan lejos está el texto de su rostro? Ya hemos elaborado el tamaño de fuente perfecto, esa longitud de línea perfecta, y la altura de línea perfecta para que las personas lean texto o la fuente exacta que hemos utilizado desde diferentes distancias. Y así tenemos diseño receptivo. Aquí es donde esencialmente tenemos tres diseños diferentes de alteraciones ligeramente diferentes a nuestro CSS para anchuras de dispositivo ligeramente diferentes. Todo lo que tenemos que hacer es decidir cuál es el ancho más grande que podría ser un teléfono móvil, el ancho más grande que podría ser un iPad. Y podemos establecer algunas reglas CSS usando esos números. Pero aquí hay un problema, ¿no es así? Porque en algún momento alguien podría simplemente crear un teléfono realmente grande o un monitor de escritorio realmente pequeño. La gente podría empezar a usar sus televisores para ver sitios web. No obstante, es la técnica la que generalmente es considerada buena práctica por muchas personas, incluyendo Google y Google usan esto para decidir si debe clasificar un sitio web como bueno o no en su ranking SEO. Entonces incluso si no crees que responda sea un buen sistema para hacer que un sitio web funcione en un teléfono móvil. posible que quieras considerar cómo va a afectar el ranking de tu sitio en motores de búsqueda. Lo que podemos hacer es que podamos crear código responsivo. Por lo que cambia entre un teléfono, un iPad y un escritorio. Pero podemos permitir algún nivel de fluidez entre quizás un iPad grande y un iPad pequeño. Nunca queremos hacer esto con nuestro texto de párrafo, pero para algo así como nuestro encabezado los textos muestran texto o incluso imágenes y otras partes del sitio como ese donde quizás no sea importante qué fácil de leer es o incluso lo bueno que se ve, pero tal vez lo bien que agarra la atención de la gente es más importante que en realidad eso puede ser una técnica bastante buena. diseño fluido es donde el diseño se ajusta a medida que cambia el ancho del navegador. Esto no nos sirve demasiado en tipografía porque no ayuda con la legibilidad. Todo lo bueno que se ve el sitio. Responsive es donde tenemos puntos específicos en el cambio del ancho donde se actualizan las reglas CSS y va a cambiar el estilo del sitio. Esto es mucho más útil ya que solo tratamos de conseguir que nuestro sitio se vea bien y funcione bien en tres diseños diferentes para algunos elementos en nuestro CSS, tal vez queramos usar un poco de ambos. Es posible que deseemos tener el diseño responsive donde cambie entre el móvil y el escritorio, pero con cierto nivel de fluidez. Por lo que se ajusta ligeramente dependiendo del tamaño del teléfono. Vamos a ver las tres de estas técnicas a lo largo de los próximos tres videos. 9. Anatomía de una cuadrícula: parte 1: Nuestra cuadrícula, una vez creada, no se mostrará en nuestros sitios terminados. Creamos la cuadrícula para ayudar a diseñar las cosas en la página. Y nunca los mostramos en el sitio terminado real. Pero sí hace una gran diferencia. Como vimos cuando creamos nuestras composiciones, podemos hacer que las cosas se sientan más conformadas y conectadas. Si tenemos reglas sobre dónde pueden aparecer en la página. Porque todo esto se trata reglas que tenemos dentro de un equipo. Vamos a terminar hablando mucho de esto. Y por lo tanto, necesitamos conocer la terminología alrededor de una cuadrícula y cómo se llaman todas las cosas diferentes. Ya tenemos nuestra rejilla vertical mostrando aquí en la pantalla. Y recuerda, probablemente no queremos llamar a esto una cuadrícula basal porque eso es algo usado en el diseño impreso y ahí es donde la topografía se sienta en la línea, algo que no podemos hacer con CSS. Entonces llamemos a esto la rejilla vertical. Es bastante típico tener estas líneas divididas en incrementos de cuatro píxeles. Pero si sí tienes un sitio web específicamente pesado de texto y estás muy preocupado por la legibilidad. Es posible que desee ajustar esto ligeramente en función del tipo de letra que esté utilizando como hablamos en módulos anteriores, igual que trabajar con una hoja de cálculo de Excel, columnas son las cosas que separa nuestra página horizontalmente. Este espacio entre cada columna se llama canalón, o a veces un hueco o un callejón, pero yo usaría la palabra canalón. Y no queremos llamar a este relleno porque vamos a usar la palabra padding más adelante, pero siempre queremos tener algo de espacio aquí. El área en el sitio de nuestra red aquí se llama margen. Y no necesariamente vamos a hacer de esto el tamaño de la canaleta. De hecho, normalmente lo haríamos un poco más grande, quizás el doble del ancho de la canaleta. Vamos a utilizar el margen para otras áreas de nuestra red. Pero eso está bien porque esencialmente nos referimos lo mismo cuando sí usamos esa palabra. Si te imaginas que esta caja blanca es una webs, pero lo miramos en una pantalla mucho más grande en algún momento sólo va a haber espacio en los dos lados. Estos márgenes exteriores mostrados en rojo aquí son márgenes flexibles. Simplemente van a crecer para llenar el espacio una vez que golpeemos el ancho máximo de nuestra página web, por supuesto, también como Excel, las secciones que lo dividen verticalmente se denominan columnas. Y si vamos a utilizar estos dos separa nuestros diseños, probablemente queremos que estas columnas sean un múltiplo de esa rejilla vertical. Ya creamos estas casillas que obtienes donde se cruzan la fila y la columna. Llamamos a estos módulos. Vimos antes la rejilla modular. No es un gran nombre porque los desarrolladores usan el módulo word para significar algo bastante diferente, pero rara vez tenemos que preocuparnos por nombrar estos. A estas veces se les llama unidades y este es probablemente un nombre aún peor. Se puede escuchar a la gente decir una grilla de duodév unidad, en cuyo caso significan columnas, pero la palabra unidad también puede significar Rho o módulo. Así que solo ten en cuenta esas dos palabras, pero probablemente evitaría usarlas realmente. Un campo es un grupo de filas porque esto se usa para romper la monotonía visual idealmente querría que no fuera el mismo número de filas, pero sí queremos asegurarnos de que encaja en nuestra cuadrícula. No me gusta el campo de nombre, particularmente cuando estamos hablando de diseño web, porque obviamente un campo es algo que también tiene un formulario de entrada. En cambio, podrías llamar a esto un grupo de filas o una región vertical. La palabra región vertical es bastante buena porque una colección de columnas a veces se conoce como región. Nuevamente, evitaría hacer de estas regiones el mismo número de columnas de ancho porque es un poco hacer que las cosas se vean monótonas. Por último, a esto se le llama zona espacial, pero rara vez hablamos de romper las cosas de esta manera en el diseño web. Así que no me preocuparía demasiado por recordar esa. posible que lo escuches de un diseñador de impresión en algún momento. Había un poco de terminología en este video, pero los pocos que definitivamente debes recordar porque los estarás utilizando, es la rejilla vertical. Ya conocemos las columnas y filas que son similares a lo que tendrías en una hoja de cálculo. Las canaletas, el espacio entre las columnas. El margen siendo el espacio a un costado. El margen variable para cuando la página es demasiado grande o demasiado pequeña. Tus regiones verticales y horizontales que son una colección de filas o columnas. 10. Anatomía de una cuadrícula: parte 2: Tengo una cuadrícula vertical, una cuadrícula de sexta columna, y tengo algunas regiones horizontales, o también llamadas campos. Y tengo esta rejilla vertical. Ahora puedo esconderlos forma independiente para que no se distraigan súper. Y obviamente quiero encender y apagar algunos de estos regularmente para poder ver cómo se ve todo mi diseño. Como veremos en un momento. Un programa de gráficos como sketch, InVision Studio o Figma nos permitirá crear algunas de estas cuadrículas para que podamos encenderlas y apagarlas muy rápidamente con teclas de acceso rápido. Pero para algunos de ellos como las regiones vamos a tener que crear nuestras propias capas. Tiene sentido añadir cada una de ellas a una capa diferente que podamos encenderlas y apagarlas para ayudarnos a ver mejor nuestro diseño. Es muy confuso si tenemos todas nuestras cuadrículas encendidas al mismo tiempo. Empecemos a mirar algunas de las partes de la cuadrícula que se pueden ver visualmente de alguna manera. Una línea de caída es casi algo que se puede ver. Esto es algo que un diseñador de revistas solía usar donde siempre se usa una línea específica en la rejilla vertical que se muestra aquí en un rojo ligeramente más oscuro un rojo ligeramente más oscuropara poner el encabezado. Incluso si el diseño de una página es completamente diferente, siempre ponemos el encabezado en esta línea de caída. Ahora en una revista a veces se usa para un poco de efecto visual, un poco de género punch, si una página tiene un rumbo particularmente importante para que no esté en la línea de caída. Y entonces romperá convención y hará que eso destaque más con nuestra aplicación web. Es bueno no hacer eso porque la gente está navegando bastante al azar y siempre necesitan algo en algún lugar de la página. Siempre saben dónde están en la página web. Por lo que alentaría tener una línea específica en la rejilla vertical, que es una línea colgante para nuestros textos de encabezamiento. Ya tenemos nuestras regiones verticales y a veces separaremos estas, romperá un poco la monotonía visual dándoles un color de fondo diferente. Y esto llama la atención y nos ayuda a mantener nuestro ritmo vertical. Pero en cambio podríamos separar nuestras secciones usando líneas de flujo como esta. Apenas una línea negra en la página en realidad mostrando físicamente una de las líneas y nuestra cuadrícula vertical. Las líneas de flujo a menudo se pueden usar para llamar la atención de las personas y mucho hacia algo justo por encima o por debajo de la línea. Son bastante exigentes la atención y añaden mucha complejidad visual a un diseño muy fácilmente. Entonces yo diría a menos que realmente necesites algo así como una de estas líneas de flujo, realmente no las pondría a menudo. Normalmente queremos tener mucho espacio en blanco en nuestro diseño, sobre todo porque no nos limitamos a la cantidad de papel que usamos, como son los diseñadores de impresión. ¿ Por qué no hacer uso de todo ese blanco? Esto sí quiere decir que nuestra rejilla que tomamos todo ese cuidado para crear podría no ser obvia y podría hacer que el sitio se vea un poco de marca. Bueno, ya equilibramos nuestras composiciones y ofrece módulos. Así que quizá a veces podamos usar un poco de eso. Podríamos añadir una pequeña cruz o unos puntos en la esquina inferior para ayudar a intentar equilibrar los elementos de la página. Cuando lo hacemos, probablemente queremos poner eso en algún lugar en una de las esquinas de nuestra rejilla. Realmente cuando estamos juntando nuestras cuadrículas, queremos pensarlo como si estuviéramos diseñando donde va nuestro espacio en blanco. Piénsalo más como una forma de asegurar espacio respiratorio que una forma de meter tanto contenido en la página como sea posible. No todas las regiones de nuestra página van a tener algo en ella. Bastantes de ellos sólo van a estar vacíos. Y realmente así es como lo queremos. Si tenemos una caja de color alrededor de una de nuestras regiones y queremos agregar texto dentro de ella, habrá que asegurarnos de que tenga algún relleno interior. No queremos que los textos se sitúen en derechos contra el borde de esta caja de límites. Pero ahora lamentablemente nuestros textos de encabezamiento no se alinea muy bien con nuestro texto corporal. Por supuesto, podríamos alinear los textos de encabezamiento a este texto corporal. O otra opción podría simplemente ser que hay caja de color en realidad no encaja perfectamente en la rejilla. A lo mejor se sienta ligeramente fuera de TI. Problema con esta técnica puede ser tal vez tengamos en cajas aquí abajo y luego van a verse muy, muy cerca el uno del otro. No hay mucho espacio entre estas dos cajas. realidad no hay una solución perfecta a este problema. Pero para este ejemplo exacto, diría que desea que las cajas de colores se extiendan hasta los bordes de las regiones y cada región tengan relleno. Entonces tenemos un diseño donde todo se siente alineado pero nada está demasiado cerca del borde de sentirse demasiado incómodo. Para ejemplos como este, es posible que hayas creado estas regiones específicas que estás utilizando para tus diseños. Y es posible que desee simplemente agregar el relleno ahí directamente para que sea más fácil trabajar con. Tu programa de gráficos probablemente tenga una forma de encender y apagar las rejillas, pero probablemente quieras poner tus regiones verticales y horizontales en una capa separada para que puedas encenderlos y apagarlos fácilmente. Una línea de caída es una de las líneas en tu cuadrícula vertical que siempre pondrás tu encabezado para tu página. línea de flujo será donde muestres una de las líneas en tu cuadrícula vertical para ayudar a llamar la atención sobre algo. Y cuando sí creas regiones horizontales y verticales y las pones en una capa separada, es posible que quieras agregar algún relleno ahí también, sobre todo si vas a tener un borde o un color de fondo. 11. Resumen: Con tipografía, color, y composición o rejillas, necesitamos desarrollar nuestro ojo para identificar cuándo está funcionando bien. Tenemos que ser capaces de ver intuitivamente cuando el diseño se ve bien y cuándo no lo hace, y qué hay que hacer. Hicimos nuestros ejercicios de construcción de intuición al inicio de este curso cuando jugamos con composiciones. Ahora, hemos desarrollado nuestro vocabulario para hablar de cuadrículas. Estuvieron casi siempre trabajando en equipo o con un cliente. Y en un equipo necesitamos comunicarnos bien. Necesitamos un vocabulario compartido. Ahora podemos hablar de toda la anatomía y tipos de rejillas. Con el desarrollo web moderno, los componentes se construyen como piezas de código individuales que se pueden reutilizar en diferentes partes a través de una aplicación y pueden mantenerse e intercambiarse de forma independiente. Por esta razón, cada componente de nuestra página, realidad tendremos su propia cuadrícula. 12. Alinear a la cuadrícula: Como ejemplo práctico de algunas de las cosas de las que acabamos de hablar. He creado aquí una cuadrícula de sexta columna, y la voy a utilizar para algunos diseños basados en las seis columnas que he creado tres regiones verticales. Ahora cada región es en realidad un ancho diferente. Voy a tratar de evitar usar las columnas originales tanto como sea posible porque estas regiones son mucho más interesantes para trabajar con sus anchuras variables sin dejar sentirse uniformes porque se basan en esa misma estructura de columna. Y sé que va a funcionar con CSS por esa misma razón. Sé que voy a necesitar algún relleno para estas regiones verticales más tarde, así que solo voy a añadir eso en. Ahora. Estoy agregando diez píxeles de relleno en cada uno de estos, que usaremos un poco más tarde. Aquí está parte del texto que creé para uno de mis sistemas tipográficos en uno de los módulos anteriores, lo he hecho abarcar dos regiones verticales, que en realidad tiene tres de las columnas originales. Y esto está totalmente bien hacerlo. Ahora voy a añadir sólo una caja de color. A lo mejor creo que esto ayuda a equilibrar mi diseño o algo así. Se ve bastante vacío en este momento. Esto no puedo hacer. Lo que he hecho aquí es que he alineado la caja con el exterior de mis regiones verticales. No puedo hacer esto. Sólo puedo alinearlo al interior. Por ejemplo, posicionarlo aquí en cambio estaría totalmente bien. Realistamente, no voy a ponerlo aquí abajo. Un buen lugar para ponerlo obviamente estaría detrás del texto. Y entonces ahí es donde este relleno va a ser útil. Ahora tengo un poco de relleno a la izquierda y a la derecha, por lo que el texto no se enjuaga con el borde de la caja, que como vimos antes, está perfectamente bien hacer mientras nos aseguremos de que usamos ese mismo relleno para cualquier texto posterior en otras partes de la página. Ahora actualmente, creo que esto se ve bastante bonito, pero en realidad no es utilizar demasiado nuestra grilla. En realidad he usado dos de las regiones verticales juntas, lo que significa que también podríamos tener una cuadrícula de dos columnas. Por ejemplo, podría simplemente poner una foto a la derecha aquí. Y esta es una página bastante bien diseñada, pero en realidad no es tan interesante. Podríamos hacer que la rejilla funcione a nuestra ventaja un poco mejor. Tal vez. Una cosa que podríamos hacer para hacerlo más interesante al instante es alinear realmente la imagen a la cuadrícula. Y esta es bastante una técnica de uso común y diseño web, pero puede ser bastante difícil de lograr técnicamente en este ejemplo aquí he hecho que los barcos de esta imagen encajen cómodamente en la cuneta entre mis dos regiones. Este es el estudiante mío de un diseñador me mostró recientemente y pensé que era realmente, realmente impresionante en realidad, lo que podría no darse cuenta primero es que la imagen de la izquierda y el texto de la derecha utiliza casi la misma cuadrícula exacta. Ambos están alineados centralmente. Hay una especie de caja de límites dentro de ambos lados. Y la imagen en realidad tiene algunas líneas en la parte superior y la inferior aproximadamente donde comienza y termina el relleno entre algunos del texto. Esta página es casi completamente simétrica porque se utiliza exactamente la misma cuadrícula para la imagen y el texto, puede ser muy, muy difícil encontrar o editar imágenes para encajar perfectamente. Aunque, volviendo a mi diseño, estoy bastante contento con el tamaño y el posicionamiento de la imagen, pero va a hacer que sea bastante difícil volver a encajar ese texto, especialmente el encabezado. Supongamos por un momento estoy bastante feliz de hacer que el fondo oscurezca y los textos se iluminen y cambiemos eso. Esta es otra técnica que está totalmente bien, pero no siempre se ve con demasiada frecuencia porque sí necesitas revisar tus imágenes van a funcionar bien, pero puedes superponer absolutamente texto sobre una imagen. Aquí mi texto corporal está abarcando una de mis regiones verticales. Mi texto de encabezado abarca dos, y mi imagen se extiende. Se trata de regiones verticales completamente diferentes. Es el mismo contenido, pero visualmente es mucho más interesante que aquel donde acabo de separarlo de izquierda a derecha. Ahora imaginemos que quería bajar todo esto y encajar un extraño ícono de un yate o algo en la parte superior aquí. Debido a que un icono está solo y es una forma oscura, a menudo puede ser un poco más difícil alinear el texto o imágenes similares a lo que vimos cuando estábamos mirando composiciones justo en el inicio. No queremos que el punto en la parte superior de este yate toque el borde de esta línea de rejilla. Es un poquito muy, muy pequeño del ícono. Puede superponerse un poco. Por lo que tal vez queramos simplemente empujar eso sobre el recuadro fronterizo. O como es un poco de una forma difícil trabajar con. Tal vez si quisiera agregar un ícono aquí, sería mejor alinearlo un poco centralmente dentro de esa región vertical. Supongamos en cambio que en realidad no tenemos una imagen en este diseño y estamos usando el texto para abarcar las dos regiones verticales de la izquierda como originalmente teníamos aquí. Ahora tal vez quisiéramos agregar el ícono. Podríamos querer usarlo para especie de ancla están diseñados para tratar equilibrar el peso de arriba a abajo y de izquierda a derecha un poco. Podríamos posicionar este icono centro muerto en la línea límite de nuestra cuadrícula para que el maestro de la falla esté justo en esa línea de ahí. Porque este ícono se acaba de usar como una manera de un ancla nuestra composición un poco. Esto está totalmente bien si no está sentado exactamente dentro de la rejilla. Y también cuando agregamos puntuación tipográfica, como hablamos en un módulo anterior, queremos que la puntuación cuelgue fuera de nuestra cuadrícula, así. Desafortunadamente, esto tampoco es tan fácil de hacer con la programación. Y tal vez quieras simplemente sangrar algo así como puntos de bala que no tengas el problema de intentar averiguar qué hacer con esto. Antes de hablar más a fondo de las cuadrículas, ten una oportunidad en este ejercicio. Crea una sencilla cuadrícula de seis columnas. Asegúrate de que sean iguales longitudes y tengan canaletas iguales. Agrupar algunas de ellas en regiones verticales. Añade algún relleno a los lados de cada uno de ellos, y luego en una capa separada y tu programa de gráficos y algunos textos de tu sistema tipográfico que ya creaste. Intenta agregar algunas imágenes, iconos y cualquier otra cosa que puedas ver en una página. Y trata de alinearlos dentro de esta cuadrícula que has creado. Y veamos cómo se ve eso. Para un reto extra, intenta mantener la rejilla vertical que ya creaste. Cuando lo creas, el sistema tipográfico. 13. cuadrícula Embedded: Espero que ese ejercicio fuera relativamente productivo. En breve les voy a pedir que creen una cuadrícula y diseños toda una página. Pero antes de hacer eso, veamos algunos ejemplos un poco más completos. Y luego te mostraré cómo crear realmente la cuadrícula correctamente. Esta vez voy a empezar con una cuadrícula de 12 columnas, pero de nuevo voy a simplificarla hacia abajo en regiones ligeramente menos verticales, cinco regiones verticales de tamaños ligeramente variables. Ahora aquí es donde podrían sentarse elementos potenciales como texto o imágenes. Podrían pasar una región vertical dos o tres de la siguiente manera. Como se puede ver, esto potencialmente nos da bastantes opciones de diseño a donde podrían sentarse nuestros diferentes elementos. Esto nos da muchas formas diferentes en que podemos posicionar las cosas en nuestra página. Voy a tomar este sistema tipográfico que creé en un módulo anterior, y voy a tratar de convertir esto en una página de publicación de blog. Voy a hacer esto solo agregando algunas imágenes y tal vez algunas formas de colores. Posteriormente. Pretendo usar estas cinco regiones verticales que acabo de crear, pero voy a agregarle ese texto y esas imágenes. Y esto es lo que se me ocurrió. Bueno, lo primero que hay que saber es que en realidad he usado una cuadrícula diferente para esta sección de rumbo con un fondo azul oscuro y una de las imágenes, en realidad solo estoy usando estos cinco rejilla de región para el área de texto más abajo. El encabezado de esta página se basa en esa misma cuadrícula de 12 columnas, pero en realidad está utilizando dos regiones verticales diferentes, que obviamente es seis a la izquierda y seis a la derecha. Hablaremos un poco más de esto en un momento. Pero en primer lugar, veamos el texto real que se basa en estas cinco regiones. Como se puede ver, tiene un sentimiento de conformidad porque sólo hay estas cinco regiones en las que se basa, pero todavía tiene algún interés visual porque diferentes elementos están abarcando diferentes regiones. Y como pueden ver, he acostumbrado a la rejilla para permitir áreas de espacios en blanco, particularmente en la parte superior izquierda del área blanca. Y he intentado tener algún equilibrio visual con la forma en que se colocan las imágenes alrededor del texto. Supongamos que decidimos que la longitud de la línea de este texto era sólo un poco demasiado larga. Aquí hay otro diseño con una longitud de línea ligeramente más limitada. Y luego permite un poco más de espacio en blanco alrededor del texto. Por el bien de los próximos ejercicios que estamos a punto de hacer, recomiendo tener una jugada alrededor y ver qué diferentes opciones están realmente disponibles para ti. Tal vez intente crear algunas versiones de cada una. A continuación, tomaré este sistema tipográfico que creé en un video anterior. Y esta vez intentaré aplicar esto a más como un panel de interfaz de usuario con algunos gráficos de datos y cosas por el estilo. Algo un poco más complejo. Esta vez en realidad voy a tener menos columnas. Voy a quedarme con seis. Y hay una buena razón para esto, que veremos en breve, es que realmente voy a incrustar diferentes rejillas. Voy a separar esto en solo tres regiones verticales y darles una cierta cantidad de relleno. Y vamos a meter nuestro contenido ahí. Por el momento, solo estoy usando cuadros y líneas para representar texto e imágenes lugar de agregar cargas de cosas en. Supongamos que ahora realmente queríamos agregar algunas cosas más a esta página. No es lo suficientemente complicado. Queremos algunas cosas más en él. Bueno, aquí es donde vamos a incrustar una cuadrícula en lugar de depender la rejilla que teníamos para toda la página que decide a dónde van estos componentes y tratando de trabajar con esas regiones verticales, Voy a crear una red completamente nueva aquí. Esto nos da un poco más de control, significa que podemos hacer más cosas, pero también es mucho más fácil desarrollar láser y funciona mucho mejor con la forma en que actualmente desarrollamos sitios web. También, sólo porque puedo, y creo que funciona mejor con los contenidos que estoy a punto de poner. Lo he convertido en una cuadrícula de siete columnas, no hace absolutamente nada malo convertirlo en un número impar como este. He separado esto en cinco séptimos y dos séptimos. Y ahora puedo añadir mi nuevo contenido aquí junto al texto. Este nuevo contenido y estas nuevas regiones verticales no necesariamente se relacionan de ninguna manera con esa rejilla principal del cuerpo que creamos en primer lugar. Pero tiene una sensación de uniformidad porque usamos el mismo ancho de canalón. Y si teníamos márgenes en esto, usamos márgenes similares. Recuerda con diseño responsive, esas son las áreas sobre las que tenemos control. Ahora estoy seguro de que te irás. Hemos estado hablando de cuadrículas años y probablemente estés desesperada por abrir un programa de diseño y empezar a crear algo. Pero solo aguanta y mira el próximo par de videos. Voy a hablar un poco sobre los tecnicismos de usar algún software de diseño para crear algo como esto. Acabamos de ver dos ejemplos en el ejemplo de publicación de blog, el encabezado de las publicaciones del blog utilizó un conjunto diferente de regiones verticales al cuerpo de la publicación del blog. Y en el tipo de diseño más tablero, vimos cómo podría simplemente incrustar una rejilla separada en partes del diseño. Casi siempre estamos en estos días vamos a crear nuestro diseño como componentes individuales. Y esos componentes van a funcionar en diferentes cuadrículas. El área que les dará sentido de unidad y conformidad será que tengan el mismo ancho de canalón o similar ancho de canalón y márgenes. Vamos a abrir nuestro software de diseño y empezar a crear esto ahora. 14. Construye nuestra cuadrícula, parte 1: Cuando miras alrededor de algunas de las galerías de inspiración o ves algún trabajo de diseño realmente increíble. Mucha tristemente simplemente no funciona realidad en el mundo real. Entonces cuando estamos trazando esto en Figma, queremos asegurarnos de que estamos creando algo que cuando el desarrollador lo recoja, en realidad puedan crear algo real con él y en realidad va a trabajo. El desarrollador siempre va a tomar algunas decisiones de diseño. Siempre va a haber cambios en esa etapa porque no se puede crear un diseño que funcione completamente en toda la capacidad de respuesta y todo. Siempre hay algunas decisiones tomadas por el desarrollador. Vamos a tratar de reducir la cantidad de decisiones que los forzamos a tomar. Y estaré trabajando en Figma. Vuelvo a recomendar usar esto como su software de elección. Y hay varias razones, de nuevo, que no me meteré, pero no te preocupes demasiado. No lo estoy, esto no va a explicar cómo usar Figma, solo explicando las cosas que enciendo y uso para ayudar a crear una cuadrícula. Entonces para nuestra topografía, ya hemos creado una cuadrícula vertical como esta aquí mismo tengo una rejilla vertical de cuatro píxeles. Si nos preocupa particularmente la legibilidad, probablemente no vamos a tener algo que sea exactamente cuatro píxeles para nuestra cuadrícula vertical, porque va a estar basado en la altura de línea de nuestro ideal altura del texto del cuerpo, como ya hemos hablado en cierta longitud. No obstante, porque algún software de diseño simplemente no nos va a dejar trabajar con tres puntos cinco píxeles o algo así. A veces puede tener sentido simplemente hacerlo cuatro píxeles mientras estamos haciendo el diseño y luego explica el desarrollador después, el, todos los números necesitan ajustarse un poco cuando lo crean, porque no va a verse masivamente diferente si no estás leyendo un gran cuerpo de texto en tu diseño. Pero va a marcar una gran diferencia cuando lo estás, un usuario viene a leer el texto. Entonces si en el módulo topografía para una determinada tipografía, decidiste que la mejor altura de línea realmente te iba a dar una cuadrícula de 5.7 píxeles o algo un poco oscuro como eso. Tal vez solo lo hagas seis para el diseño y dile al desarrollador después que lo has ajustado. Si no estamos súper preocupados por la legibilidad, la gente sí tiende a gustar trabajar con algo así como cuatro pixeles porque es bastante fácil la mitad a 2.5 a uno en caso de que lo necesiten y duplicarlo y trabajar con él de esa manera. Porque esta cuadrícula de diseño de cuatro píxeles es para cosas muy, muy granulares. Voy a convertirlo en una cuadrícula como en filas y columnas completas. Ahora estoy usando Figma. Entonces si selecciono un tablero de arte o un componente, puedo venir a donde dice rejilla de diseño. Puedo añadir uno y puedo cambiar entre filas, columnas, y grano. Voy a tener este píxel completo como cuadrícula. Ahora, podemos agregar una cuadrícula vertical más prominente para múltiplos más grandes, digamos 16 píxeles, es cuatro veces cuatro. Ahora la mayoría de los elementos se van a alinear con esta nueva cuadrícula de 16 píxeles. Pero cuando sí necesitamos hacer algo como entrenar la altura de la línea topografía y asegurarnos de que cosas más pequeñas como esa encajen en su lugar. Tenemos esta cuadrícula de cuatro píxeles que podemos volver a encender para el diseño que estoy a punto de crear usando esta cuadrícula, todos los márgenes, todos los patrones, todos van a ser múltiplos de cuatro, pero idealmente múltiplos de 16, y eso va a hacerlo aún más uniforme. Ahora, empecemos a mirar algunas columnas. Entonces nuestro ejemplo que acabamos de hacer, teníamos una rejilla de columnas como esta. Ahora históricamente hacemos estos 12 solo porque esa fue la restricción de los frameworks CSS como Twitter Bootstrap set deberíamos, pero por mi experiencia son 12, algún número bastante bueno. Ahora como vimos en nuestro último ejemplo, vamos a incrustar cuadrículas más pequeñas en esto. En realidad solo vamos a usar esta cuadrícula principal de 12 columnas para posicionar donde van nuestros principales componentes. No serán de manera realista ningún texto o cualquier imagen o algo así alineado directamente a esta cuadrícula. Esto es bastante importante recordar porque si alguna vez hablas con un diseñador de impresión, pensarán, bueno solo tienes más 12 columnas grid y te pones todo ahí. Y en realidad si hablas con un diseñador web de hace más de unos años, podrían pensar lo mismo. Pero la forma en que desarrollamos sitios web y aplicaciones ahora significa que los componentes en realidad no tienen acceso a esta cuadrícula. En realidad tienen sus propias rejillas independientes, como vimos en el último video. Un último punto en esta etapa antes de que sigamos adelante es que vas a conseguir bastantes cuadrículas. Claramente, vas a tener rejillas en diferentes componentes. Tienes esta rejilla vertical, tienes esta rejilla granular, la de cuatro píxeles uno. Y ahora tienes estas columnas. Hay rejillas por todas partes. Ahora estoy usando Figma. Si sostengo Control G, va a apagar todas las rejillas. Y si vuelvo a mantener Control G, va a encenderlos todos. Si estás usando algún software de diseños diferentes, probablemente haya una clave diferente para encender y apagar la red realmente rápidamente. Probablemente sea lo mismo. También puedo por supuesto, ocultar cada rejilla de forma independiente con el ícono de ojo pequeño junto a la rejilla donde dice rejillas de diseño en el lateral. Muerto sencillo. Primer paso aquí, da uno de los sistemas tipográficos que ya lo has creado. Toma la rejilla vertical que usaste para ello, luego multiplicarla por digamos, cuatro para crear una cuadrícula vertical más grande a la que van a alinear la mayoría de tus artículos en la página. Y luego también crea esta rejilla horizontal. Esto es comúnmente 12 columnas, pero no tiene por qué serlo. Y también puedes volver y cambiar esto más tarde si te das cuenta de que realmente no funcionó a las 12. Una vez que empieces a traducir la página, tu ejercicio es simplemente crea una cuadrícula vertical más grande y crea la cuadrícula horizontal inicial, potencialmente alrededor de 12 columnas. 15. Construye nuestra cuadrícula, parte 2: Lo que tengo aquí es una página con una cuadrícula de 12 columnas, que tiene un margen de 48 píxeles a los lados, 32 canaletas. Y eso es porque tiene una rejilla vertical de 16 píxeles. Esto sólo se va a utilizar para posicionar estos dos componentes principales. Este cinturón de la izquierda, que obviamente va a ser algún tipo de menú o algo así. Y hay oso a la derecha, que obviamente va a tener algunos cuadros de tablero en y cosas así. De vez en cuando hay algunos componentes más pequeños que podríamos alinear directamente a esta cuadrícula de 12 columnas. Por ejemplo, he puesto un logotipo y un encabezado de página aquí. Vamos a poner esos adentro. Para los otros dos componentes. Lo que obviamente es que vas a ser un menú a la izquierda. Y lo que obviamente es que vas a tener el contenido de la página a la derecha. Yo les he hecho componentes. He dibujado dos casillas que se alinearon con la cuadrícula original de 12 columnas. He seleccionado uno de ellos, y he hecho clic en el botón Componente en la parte superior. Y esto ahora me da la opción de agregar mis propias rejillas de diseño a cada uno de estos componentes individuales. Podríamos obtener el mismo efecto en Figma usando mesas de trabajo. Pero la ventaja de un componente es que en realidad probablemente no vamos a estar reutilizando algunos de estos bits en otras páginas cuando construimos el resto de nuestros diseños. Ahora para estos dos nuevos componentes, tienen sus propias columnas y filas y márgenes y canaletas. Y recuerda por supuesto, los márgenes y canaletas son todos múltiplos de cuatro e idealmente múltiplos de 16 porque eso es lo que tenemos el control. Entonces eso es lo que va a hacer que se sienta uniforme. En esta etapa actual, esta podría ser una plantilla. Esta podría ser una plantilla que usamos en múltiples páginas para asegurarnos de que tengan un diseño similar. Podría poner esto a un lado y hacer una copia de ella y simplemente llamar a esto la plantilla maestra para mi app. Ahora voy a dividir esta sección derecha en diferentes componentes. Y de nuevo, los haré componentes Figma para pueda darles sus propios márgenes y canaletas. El número de columnas aquí podría ser diferente. No hace falta que sean tres en la parte superior aquí. Podría ser cuatro, podría ser cualquier cosa. No hace falta relacionarse de ninguna manera con las columnas originales que teníamos en la página. En este ejemplo, lo he hecho tres para ayudar a ilustrar un punto muy importante para ustedes, que es que tenemos un espacio entre los componentes en la parte inferior y tenemos una canaleta en los componentes de la top. Y estos no se alinean perfectamente. No podemos conseguir que siempre estén perfectamente alineados. Esta es solo una de las bajas de tener una rejilla receptiva. No hay la misma cantidad de espacio rígido y espacio fluido. Y así nunca vamos a ser capaces de conseguir que estos coincidan perfectamente. Ahora puedo agregar algunas cosas reales en mi menú de la izquierda, asegúrate de que se alinea muy bien a mi cuadrícula, algunos textos, algunos iconos. Puedo alinear algunas cosas en este componente superior y la derecha y en la inferior. Y voy a poner otro subcomponente En esta parte inferior aquí también. Entonces lo que tenemos ahora es que hay otra caja dentro de esta caja, que también va a tener sus propios márgenes. Es su propio componente. Ahora el contenido de los subcomponentes realmente no se alinea con nada más en la página, pero todavía se siente uniforme y todavía se siente conformado porque hemos utilizado márgenes similares alrededor de este margen sigue siendo un múltiplo de cuatro. Y así hay bastantes cosas que no se alinean. Pero me siento en general como que el diseño sí tiene ese sentido de conformidad, pero también tiene esta área de sala de meneo. Hay áreas de fluidez. Si acabo de agarrar el lado derecho de todo el diseño, puedo estirarlo, puedo encogerlo, y todos siguen funcionando. Pero nota que sólo puedo estirarlo y encogerlo dentro de un pequeño espacio confinado aquí, razón por la cual he puesto esta caja morada detrás del diseño. Para esta segunda etapa en la creación de tu cuadrícula, vas a crear algunas cuadrículas de un componente. Coloca que algunos componentes en las cuadrículas, lo creas en el último video, tu vertical y tu cuadrícula horizontal principal. Y darle a cada uno de estos componentes su propia rejilla con sus propios márgenes y sus propias canaletas. Y trata de usar medidas universales para estas canaletas y márgenes que ya has utilizado a lo largo de tu diseño. Idealmente múltiplos de esa rejilla vertical que creaste originalmente. Intenta experimentar un poco con cómo encajan estos componentes en la página y cómo funcionan las cuadrículas, y luego agrega algo de contenido a ella. Podrías volver al artículo original de Wikipedia que usas para obtener tu texto de. O simplemente podrías abrir una aplicación que usas con bastante regularidad y simplemente copiar el texto que imágenes y símbolos y cosas así fuera de él. No te preocupes demasiado si el contenido no tiene ningún sentido. En esta etapa, estamos aprendiendo a alinear las cosas en nuestra cuadrícula. Y también estamos aprendiendo a usar esas habilidades que creamos en el primer módulo, creando una composición guapa que sea equilibrada y todas esas otras cosas. Así que por favor, por favor siéntase libre divertirse un poco y experimentar con esto. 16. Construye nuestra cuadrícula: parte 3: Echemos un vistazo a cómo podemos hacer que nuestra red sea más receptiva para simplificar esto un poco y hacer que sea más fácil de entender. Acabo de hacer de esto una cuadrícula de seis columnas esta vez. Pero lo que también voy a hacer es que voy a decir cuando esté en una tableta, realidad van a ser tres columnas. Y cuando esté en un móvil, va a ser una columna. Realmente no podemos decir con certeza si alguien está en un teléfono móvil o una tableta o un escritorio, y además no es realmente lo más importante. En realidad solo estamos hablando del ancho de la ventana del navegador. Estos tres diseños son en realidad de 600 a 900 píxeles, novecientos ciento, ciento diez cientos doscientos píxeles, y de 1201 a 1600 píxeles. Para todo por debajo de 600 pixeles, no habrá cambio. Y para todo por encima de 1600, solo tendremos márgenes variables más grandes en el lado izquierdo y derecho. Entonces por debajo de 600 o más de 1600, nada es fluido, todo es estático. Y luego entre cada una de estas secciones, aquí es donde tenemos el sistema de bloqueo del canal. Hablamos de ello. Existe cierto elemento de diseño fluido entre seiscientos novecientos, por ejemplo, no queremos que nuestra tipografía crezca y se encoja a medida que la ventana del navegador crece y se encoge porque ya hemos elaborado minuciosamente buenos números para la legibilidad. Pero ciertas cosas en nuestra página se van a estirar y a squash. Para que esto sea un poco más fácil de ver, he añadido una caja morada detrás del lado derecho de cada uno de estos diseños para que podamos ver la habitación en la que tiene para entrar. Entonces, por ejemplo, en el diseño más grande, que obviamente sería para una pantalla de escritorio desde donde alrededor los 1201 píxeles marcadores a donde el 1600 pixel Marcha se marca. Ahí está esta caja morada. De esta manera puedo estirar y encoger fácilmente mi tablero de arte entre estos dos puntos de corte y ver cómo estas columnas van a verse diferentes. Y una vez que agrego contenidos de la página, puedo ver cómo se verán diferentes en anchuras ligeramente diferentes. Por cada una de las casillas que he añadido a cada uno de estos tres diseños. He seleccionado las limitaciones para ser izquierda y derecha. Lo que significa que estos componentes permanecerán a las limitaciones de dónde estaba esa cuadrícula de columna. Estos puntos de ruptura que he agregado a la cuadrícula maestra a 900 pixeles donde cambia entre 13 columnas y a 1200 píxeles donde cambia de tres a seis columnas. Estas son posiciones relativamente estándar para los frenos se produzcan para que el número de columnas cambie. Si tiene más sentido en tu diseño para que se rompan en un punto diferente, siéntete libre de no ponerlos en esas posesiones exactas. Y por supuesto, las páginas potencialmente diferentes en su sitio podrían tener puntos de ruptura en lugares ligeramente diferentes también, si eso tiene sentido. Pero ten en cuenta que esto va a sumar más complicaciones al trabajo de desarrollo y deberá ser comunicada y entendida por el resto del equipo de diseño. Si nos fijamos en el diseño de los componentes a través de estas tres vistas de ancho diferentes, entonces podemos ver que algunos de los componentes han pasado de ser la mitad de la cuadrícula a todo el ancho de la rejilla y cosas así en diversos anchos diferentes. Echemos un vistazo a un componente específico. Aquí tenemos un componente que abarca la mitad del ancho del diseño. Y va a tener su propia red. He encendido una sola fila y una sola columna con un margen de 16 píxeles. 16 píxeles siendo bastante uniformes en todo el diseño que estoy creando. Ahora todo en este componente tiene que funcionar dentro de esta cuadrícula. Este componente también podría tener varias filas o múltiples columnas. Y de ser así, tendría un ancho de canalón uniforme, que sería un múltiplo de cuatro píxeles. He dejado alineado algún texto y tengo derechos alineados un gráfico circular. Y en Figma en las restricciones, el texto está todo configurado para restringir a la izquierda y el gráfico circular se establece en restricción, ¿verdad? Esto significa que ahora puedo ver cómo se ve este componente dentro de las restricciones de fluidos de este diseño actual. El diseño grande es fluido para 400 píxeles y esto es la mitad del ancho. Por lo tanto es fluido para 200 pixeles. Solo quiero comprobar que funciona dentro ese rango de 200 píxeles. Ahora digamos que cuando nuestra página se ajusta a ser solo tres columnas de ancho, este componente es entonces solo una de esas columnas, por lo que es un tercio de la página. Esto hará que el ancho del componente sea dramáticamente más pequeño. Así que tal vez el diseño cambie, quizás ahora solo todo el contenido está encima del otro y está alineado centralmente. No obstante, por supuesto, sigue trabajando dentro de los márgenes. Y luego digamos que cuando el ancho del navegador está por debajo de 900 píxeles, tal vez este componente se ajusta para estar en ancho completo porque en ese punto solo hay ancho completo porque en ese punto solo hayuna columna, como ya sabemos. Ahora, esto realmente significa que el diseño de este componente será idéntico en paredes móviles y de escritorio realidad ha sido ligeramente diferente en las tabletas, o debería decir ligeramente diferente, entre novecientos ciento diez cientos doscientos píxeles. Pero la posición real que encaja está en algún lugar entre aquí y aquí. Ahora, podría ser que el punto en el que cambia el diseño de este componente está en realidad en algún lugar entre 901,200 píxeles, por lo cual me refiero al punto donde se trata snaps de ser seis columnas en tres columnas para el diseño de página no es necesariamente la posición exacta donde cambia el diseño de este componente individual. No obstante, de nuevo, para hacer las cosas más fáciles para el desarrollo y también más fáciles de comunicarme con otros diseñadores, normalmente trataría de evitar hacer esto. También tenga en cuenta que he hecho la topografía más pequeña para la versión móvil del componente que para la versión de escritorio del componente. Porque como ya sabemos, estoy trabajando en un programa de diseño en la pantalla de mi computadora. Lo que significa que estoy trabajando con los píxeles de referencia de la pantalla de mi escritorio. No estoy viendo a los diseñadores en mi teléfono móvil, que por supuesto tendrá píxeles de referencia más pequeños. Este es un tema un poco más avanzado y no algo que siempre vas a hacer a menudo en acompañar el desarrollador hará algunas llamadas de juicio en tiempo de desarrollo sobre exactamente cómo funciona diversas anchuras. Para que todo pueda caber. No obstante, queremos ayudar tanto como a los diseñadores. Así que vamos a asegurarnos de que creamos al menos otra versión. Toma el diseño que creaste en el último video, y esta vez crea uno nuevo, pero una vista mucho más estrecha. A lo mejor tiene dos columnas en lugar de la 12 original. Ahora, agrega los mismos componentes que entregas en el último video a esta nueva vista. Por lo que van a ser componentes mucho más estrechos. Y tal vez quieras pensar en limitarte todo en estos componentes a IVR izquierda, derecha, o izquierda, derecha, para que puedas ajustar ligeramente la mesa de trabajo y ver cómo se ve, por ejemplo, un teléfono ligeramente más ancho o un teléfono ligeramente más estrecho. Si tienes todo el tiempo y todo el presupuesto del mundo, puedes hacer lo que hice con componentes individuales en este video donde comprobé que funciona en cada ancho posible. 17. Resumen: Una rejilla uniforme dará instantáneamente a nuestros diseños un sentido de conformidad. Al alinear nuestros elementos a una rejilla. No sólo estamos haciendo la vida de nuestro desarrollador más fácil, estamos haciendo uno de los cambios más simples diseñador puede hacer para mejorar drásticamente la estética general de un diseño. Estamos a punto de crear nuestra propia rejilla para usar con nuestro diseño. Pero primero, necesitamos entender algunas cosas sobre cómo funciona el CSS moderno. Y en la siguiente sección aprenderemos un poco más sobre cómo el desarrollo moderno basado en componentes afectará cómo usamos las rejillas en el diseño. En mi opinión, el mundo del diseño y el desarrollo ambos se han vuelto demasiado complicados para que cualquiera domine ambos. Pero para diseñar usando cuadrículas, necesitamos entender CSS Flexbox y CSS grid que hemos visto en esta sección. Ahora ya estás listo para dejar de crear una rejilla para tu diseño.