A practical way to enhance the sense of web design: rational use of alignment

Using grid systems for alignment is a common thing. The alignment of this article is not simply left-aligned and right-aligned, we're talking about some of the ways to align the whole angle. Reasonable alignment can make your design more attractive, but also more convenient for users to browse, provide a good reading experience. Almost all of the elements on the page need to be aligned, whether it's text, images, or a group of videos, and a bunch of buttons and links. Grids can help you align, but different element alignment methods vary, each with its own secrets. Do not align to align and align for the user experience, this is the purpose of this article.

Alignment determines the placement of elements and the spatial relationship between them and other elements. Good alignment makes the spacing between elements and elements smoother, and makes the elements more consistent with each other.

Why do all the elements need to be aligned?

Many people dislike grid systems because they do not want their creativity to be hampered by restrictions.

In layman's terms, a grid is a bunch of columns that can help us create chunks, and in CSS, the core of typography is the box model, and it's hard to break the grid.

Add alignment for Design

Of course, not all of them need to be aligned every time. It depends on your design work or the way you work. Alternatively, you can add alignment to the design at design time, regardless of alignment, after the general idea is complete.

To note: Do not because of alignment, and the design is too rigid, so that the site lost interesting and exploratory. Alignment means you need to start delving into layout techniques and grids--but this time it's not 6 fences, with 4 columns.

Grid--6+4 with full screen coverage. Use software for Gridset App. When your design is suitable for grid layout, use it. To align elements to the fence, the layout can be very rich in options, even the simplest 4+6.

Alignment of primary elements

Text

Same as CSS alignment: left, right, middle, adjust. It's very simple.

Www.awwwards.com

Alignment and readability require a good balance. You can't patronize alignment, but ignore the overall design and readability.

For example, a small amount of text can try to center align, and a large amount of text centered can affect readability.

The center alignment of the title is great, but the effect of the title is also determined by the contrast with the body. If the headings are centered, and a large number of text below is left aligned, the effect is poor.

Wearemovingthings.com

The unusual alignment also takes into account cultural differences, with some cultures reading from right to left, most of which are from top to bottom, from left to right. Since most cultures are read from left to right, try not to use right alignment, which is bad for readability. The right alignment is typically rendered at the bottom of the page, showing the contact address, contact information, or appearing at the top, showing the navigation links

Image

The alignment of the image is cumbersome, because each picture has a different size. Small size images are easy to place and do not affect content. Large images break the reading rhythm, so it's best not to use too large an image. Generally there are two ways: the first is to put the image outside the content (beginning or end), the other way is the text interspersed with pictures. The first method is very simple, you can use full-sized large picture, look at the effect is also good, convenient response type design.

The second method is slightly more complex, and the position of the image should be grasped well. The image first has to be properly aligned with the text area (left or right), which is a method. Another way to do this is to slightly exceed the text area.

Embedded in the text area of the image, if done skillfully, Ventu combined good enough, will improve readability, fun.

Background image

Background image is a limitation, size, image selection is very difficult. When the background image is combined with the text alignment, the background image needs to conform to the CSS rules: absolute positioning, up or down? This time it is necessary to consider the setting of the background image according to its own design. If your background image is a duplicate pattern, you need to consider the alignment between the pattern and the content, how to use the background image to better show the foreground element?

Element Group

Whether it's design or development, when it comes to the word "module," in broad terms, it's pretty much the same as a set of interconnected elements. For example, a group of links is a link module, image + overlay Its title large text can also be a title module.

There are two points to consider: aligning the elements within the module to the module?

Alignment of elements within a module:

Of course, the element group does not necessarily have to be next to each other, such as logo and navigation links, which may appear at the top and bottom. This group of elements must be aligned, although when you browse the bottom will not see the top, but if the top and bottom logo is not aligned, users can "feel" out, this is also important, consistent design.

Alignment between module and module:

For example, some navigation links may be slightly more complex, the beginning of the article a large title main link, and then the following provides a slightly smaller link, but also draw an icon, also can link, this is a complex navigation module, you can try to use this module to align with other modules.

Summarize

Now that you have a certain understanding of the alignment, I hope from now on, design to consider the alignment factor, so that the design more orderly, organized layout elements, elements of the family. Using grid alignment, try to ensure that each element is justified.