Share
La alineación es una de esas cosas que viene de la mano cuando se trabaja con sistemas de red. El tema de la alineación no es simplemente una cuestión de elegir si desea alinear o no el texto o las imágenes a la izquierda o la derecha de un diseño (aunque esas decisiones obviamente son importantes), en cambio, empleamos la alineación para mejorar nuestros diseños. La correcta alineación de sus diseños los hará visualmente más atractivos y también facilitará a los usuarios escanear una página, y también ofrece de manera concienzuda una experiencia de lectura más tranquila..
Todos los elementos en su diseño deberán estar alineados de alguna manera, ya sea texto simple en su página, imágenes mezcladas dentro del texto (o incluso imágenes de encabezados o héroes), videos, botones y llamadas a la acción, enlaces (dentro del texto o en módulos como una sección de navegación) o cualquier otro elemento que pueda tener.
Las cuadrículas contribuirán de alguna manera a ayudarlo a resolver problemas de alineación o decisiones en su diseño, pero en lo que necesitamos enfocarnos aquí es cómo los diferentes elementos, grupos de elementos o módulos particulares en su diseño trabajan juntos. He enfatizado desde el principio la importancia de una experiencia de usuario cohesionada, y lograr una alineación correcta es una de esas cosas realmente importantes que pueden ayudar a mejorar una experiencia para el usuario..
La alineación también nos permite tomar decisiones conscientes sobre dónde se colocan los elementos y cómo interactúan entre sí. Crear una buena alineación cierra la brecha visual entre cada elemento de su diseño y nos ayuda a crear relaciones entre los elementos que tenemos. De lo contrario, tendríamos un diseño que tiene bloques de texto e imágenes por todo el lugar, sin mucho sentido y sin sentido de la estructura..
Como se explicó en los artículos anteriores de la cuadrícula, parece que a muchas personas no les gustan las cuadrículas porque las encuentran restringidas; que a menudo aplastan cualquier posibilidad de creatividad dentro de un diseño.
Esto es totalmente comprensible. Las cuadrículas son un grupo de columnas y filas que esencialmente nos ayudan a crear bloques; CSS generalmente establece el elemento en un arreglo de caja. Sin embargo, reconocer un momento adecuado para salir de nuestra red puede ser difícil.
No todo el diseño de su sitio web tiene que alinearse. A veces, dependiendo de su diseño o la forma en que trabaje, esto puede sofocar la creatividad. En su lugar, piensa en cómo puedes mezcla tus alineaciones De esta manera, aún se asegura de que haya un patrón para cada elemento o módulo en su sitio web, pero al mezclar las alineaciones se asegura que aún está creando algo de interés visual que mantendrá a sus usuarios explorando el sitio web..
Mezclar alineaciones también significa que puede jugar con diseños y cuadrículas un poco más, en lugar de usar una cuadrícula de 6 columnas, ¿por qué no introducir otra cuadrícula con la que se puede superponer, como una cuadrícula de 4 columnas?.
Un ejemplo de superposición de cuadrícula: seis columnas con un diseño de cuatro columnas superpuestas. Construido en la aplicación Gridset. Si bien entonces no se está separando completamente de su cuadrícula, en cambio está introduciendo una nueva cuadrícula en la que puede trabajar, ofreciendo aún más opciones de alineación y diseño en sus diseños..
Mezclar alineaciones no solo significa que introduzca nuevas cuadrículas, columnas o elementos adicionales en su estructura. En su lugar, use su cuadrícula actual para mezclar qué elementos se alinean con qué columnas. Por ejemplo, puede alinear los elementos de su encabezado con los bordes de la primera y la última columna, pero luego puede decidir alinear el texto de su cuerpo principal con la primera y la segunda columna de la última. Lo bueno es que una cuadrícula le ofrece una cantidad casi infinita de opciones de alineación, incluso con algo tan pequeño como una cuadrícula de 4-6 columnas..
La mezcla de alineaciones es una manera de mantener a sus usuarios interesados y alertas mientras navega por un sitio web. En lugar de mantener elementos similares, introduce otro nivel de enfoque a los elementos de su diseño, por más sub-consciente que pueda ser.
Las principales opciones de alineación que tiene para su texto son muy similares a las opciones disponibles en CSS: izquierda, derecha, centrada o justificada. Realmente bastante auto-explicativo; si alineas a la izquierda tu texto, entonces se desviará hacia la izquierda, si alineas a la derecha tu texto, gravitará hacia la derecha.
En su lugar, lo que quiere pensar es qué tan adecuadas son estas alineaciones para su texto y cómo se ubican en su diseño. Por ejemplo, pequeñas cantidades de texto pueden funcionar bien en una alineación centrada, aunque esto será más confuso y difícil de leer en grandes porciones de texto. De manera similar, con los encabezados podría funcionar bien en su diseño para alinearlos centralmente, aunque esto depende del tamaño del texto y del lugar donde se coloca. Por ejemplo, un encabezado alineado centralmente puede no funcionar bien cuando tiene una gran porción de texto que está alineado a la izquierda justo debajo.
También debe pensar en las culturas que pueden estar expuestas a su diseño y sitio web. En algunas culturas, se lee de derecha a izquierda, aunque en las culturas occidentales es de izquierda a derecha y de arriba a abajo..
.contenido dirección: rtl; text-align: right;
Debido a la cultura occidental de lectura de izquierda a derecha, es probable que sea difícil tener una gran cantidad de texto alineado a la derecha. En su lugar, use las alineaciones que pueden ser más difíciles de leer en cantidades muy pequeñas, en más de una característica de diseño como en un pie de página para la dirección o información de contacto, o en un encabezado con una lista de enlaces de navegación.
La alineación de las imágenes puede ser difícil, ya que la alineación que debe usar para cada imagen es relativa al tamaño de la imagen. Las imágenes más pequeñas son naturalmente más fáciles de colocar en su contenido de una manera que no interrumpa el contenido, mientras que las imágenes más grandes tienden a interrumpir más el flujo de lectura y, por lo tanto, son más difíciles de colocar dentro de su contenido.
Tienes dos opciones; coloque sus imágenes fuera del flujo de contenido (por ejemplo, entre párrafos o al principio o al final de su contenido), o puede buscar una manera de insertar sus imágenes en su cuadrícula.
La primera opción es bastante fácil de implementar. Sin interrumpir el flujo de texto, puede colocar imágenes en ancho completo o en un ancho y centro personalizados dentro del área en la que normalmente se encuentra el texto. Esto es lo suficientemente simple y aún se ve bien, mientras funciona bien cuando reducimos el tamaño de un sitio web si es sensible.
La segunda opción puede complicarse un poco más, dependiendo de cómo decida colocar las imágenes dentro de su contenido. Tienes varias opciones. Primero puede hacer que las imágenes se alineen perfectamente (a la izquierda o a la derecha) con su texto, o puede hacer que las imágenes aparezcan un poco más allá del borde del contenido..
De esta manera, sus imágenes podrían colocarse con un ancho de columna completo en el contenido, con el contenido fluyendo alrededor de la imagen. Esto no interrumpe el flujo de lectura tanto como si la imagen se colocara completamente dentro del área de contenido, pero también agrega interés a su diseño, ya que está creando otra área de alineación para sus elementos que mantendrá su diseño visualmente más fresco y más atractivo.
Alinear las imágenes de fondo es uno de esos pequeños puntos fuertes y, de nuevo, todo se relaciona con el diseño y el tema, así como con el tamaño de la imagen de fondo..
Al igual que con las alineaciones de texto, la alineación de sus imágenes de fondo puede coincidir con sus reglas de CSS; ¿Fijo, absoluto, hacia arriba o hacia abajo, hacia la izquierda o hacia la derecha? Realmente, esto depende de su diseño y de cómo la imagen de fondo se adapte a eso. Si su diseño tiene un patrón, piense en cómo ese patrón se alinea con sus elementos: desea asegurarse de que se alinee bien con sus elementos o de lo contrario podría deshacerse de todo el diseño..
Piense también cómo se ve si tiene una gran imagen de fondo focal y cómo encaja con su diseño. Si son grandes y un enfoque bastante grande, tal vez piense en cómo sus otros elementos y módulos pueden encajar con ese diseño. Por ejemplo, ¿podría el texto de su cuerpo principal alinearse con los bordes del diseño? Se trata de cuestionar cómo funcionan sus imágenes con las otras partes de su diseño y cómo puede trabajar con ellas para hacer que su diseño sea más pulido y trabajar mucho mejor..
Cuando describo un grupo de elementos, pienso que es muy diferente de lo que describiría como un módulo.
Al pensar en términos de módulos-Tanto en el diseño como en el desarrollo del sitio web, considero que son un grupo de elementos, relacionados entre sí, que están muy próximos entre sí. Los ejemplos de módulos para mí son un grupo de enlaces, una imagen de héroe y texto o encabezado superpuestos; Todo lo que se puede agrupar es un patrón repetible o un módulo independiente..
Sin embargo, un grupo de elementos es un grupo de elementos en su diseño, que no lo hacen necesariamente Tienen que estar cerca el uno del otro. Por ejemplo, un grupo de elementos podría ser tanto sus elementos de encabezado (logotipo y enlaces de navegación, por ejemplo) como sus elementos de pie de página (tal vez otro conjunto de enlaces, junto con un aviso de copyright). Estos son grupos de elementos y luego puede alinear estos grupos de elementos en su diseño. Si bien el encabezado y el pie de página pueden no ser visibles en el mismo espacio de la pantalla entre sí, estos usos sutiles de alineación harán que el diseño sea más sólido, más atractivo a la vista y mucho más consistente..
Otros ejemplos de grupos de elementos son simplemente el texto y las imágenes de su copia principal en una página, o incluso pueden ser tan simples como un conjunto de elementos o enlaces de navegación. Por ejemplo, en una navegación más compleja puede tener los enlaces de texto principales, pero también un "subtítulo" más pequeño al enlace. Además de esto, es posible que tenga un icono encima o debajo del texto del enlace. Si bien estos son todos bits individuales y esos tres bits forman un enlace, todos estos enlaces individuales pueden constituir un módulo de navegación complejo, pero también pueden unirse como un grupo de elementos, que luego puede alinear con otros grupos en el diseño..
Ahora que sabe todo acerca de la alineación en sus diseños (y con sus cuadrículas), quiero que comience a ver sus diseños y cómo se alinean todos los elementos. Intente agrupar diferentes elementos, grupos de elementos y observe la alineación del texto y las imágenes en sus diseños.
Vea lo que puede hacer para crear un mejor diseño alineando correctamente cada elemento en su diseño. Usando el sistema de cuadrícula de su última asignación, trabaje para alinear todos los elementos en su diseño usando los consejos dados en la publicación de hoy.
Accentsconagua