1. Write in front
Today, 90% of media interactions are based on screens, and connect with the outside world through mobile phones, tablets, laptops, TVs and smart watches. Multi-screen design has become an indispensable part of commercial design, and responsive design is quickly becoming the norm. As a UI designer, we hope that our products can provide users with a good user experience in different sizes. The grid system can help us do this.
Even if we only design for one size, we often face design layout issues. Reasonable use of grid systems can help us control the layout structure and achieve a consistent and organized design. The grid system condenses a design like invisible glue. Even if the elements seem to be separated from each other, they are connected together by a grid to achieve a good hierarchy, positional relationship and consistency.
During the collaboration between designers and developers, the grid system is a widely used system in front-end development. Many excellent designs use the grid system. Using the grid system can accelerate development and ensure vision. reduction. Although the grid system is part of the traditional design method, it can still help us design this multi-terminal world.
Seeing this, you may be very eager to know how the grille system works on the page, so today we will learn and practice our grille system together.
“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
"The grid system can help us design, but it cannot guarantee our design. It has many possible uses, and each designer can find a solution that suits his personal style. But he must learn how to use the grid. This It's an art that needs practice. "
-Josef Müller-Brockmann, author of "Grid System in Graphic Design"
2. What is a grid system?
The grid system allows you to rely on order and logic to complete the design.
As early as the early 20th century, graphic designers in Germany, the Netherlands, Switzerland and other countries discovered that by maintaining the visual order, the layout can transmit information more clearly and effectively. This concept was well developed in Switzerland after the Second World War until 20 In the late 1940s, for the first time, printed works using grids as auxiliary designs appeared.
The book "Grid System in Graphic Design" by Swiss designer master Josef Müller-Brockmann has been selling well since its publication in 1961 and has a profound influence on the design community . History called Swiss Typography Movement (Swiss New Wave Graphic Design Movement), and later became the internationally popular International Typographic Style (internationalism design style).
Josef Muller-brockmann (1914-1996)
A graphic designer and teacher in Switzerland. In 1958, he served as the editor-in-chief of New Graphic Design and was appointed IBM's European design consultant in 1966. Brockman is known for his minimalist design and simple typography, graphics, and colors. His design has had a major impact on many graphic designers in the 21st century.
3. Advantages of grid system
1. Reduce decision costs and improve design understanding
The grid system gives designers an intuitive reference in page layout, size setting, and it makes the page design regular, thereby reducing the cost of design decisions.
UI design also needs to be rational, objective, and mathematically aesthetic. Skilled use of grid system can make your design more orderly and rhythmic, display page information more clearly, improve reading efficiency, and provide users with a comfortable experience. Speed up the cognitive speed. This means that users use the product to complete specific tasks, such as sending messages, booking hotel rooms, or taking a car. The user can coherently understand and find the next piece of information or the next step to be taken.
2. Responsive
Because people use different types of devices to interact with the product, from the small screen of a smart watch to an ultra-widescreen TV, the interaction is smooth and there is no fixed size. When using a product, people usually switch between multiple devices to complete a single task for the product. So responsive design should not be a luxury, but a necessity. This means that designers can no longer build for the screen of a single device. The multi-device environment forces designers to think based on dynamic grid systems rather than fixed widths. Use grids to create a coherent experience across multiple devices of different screen sizes.
3. Accelerate teamwork design
When multiple designers design products together, a unified standard becomes particularly important. Without a unified framework to restrict, our product pages and component standards may be varied, so that the entire product page will be confusing. Therefore, the grid system helps to separate the interface design work, because multiple designers can work on different parts in a unified layout, and seamlessly integrate and maintain coherence.
4. Accelerate development and ensure visual restoration
The implementation of most design projects involves collaboration between designers and developers. Rasterization improves the consistency and reusability of page layout; avoids repeated communication and confirmation of details between designers and developers, thereby improving the efficiency of the entire design development process and helping developers achieve more ideal designs reduction.
Fourth, the basic composition of the grid system
1. Columns and Gutters
Column is a container of content, and Gutter is used to adjust the spacing between two adjacent columns to keep the page blank; the column-to-column spacing plus the page margin (Margin) equals the horizontal width of the screen.
The content width of the columns and the column spacing is composed of N columns and (N-1) sinks. Normally, the web uses 12 columns, the tablet uses 8 columns, and the mobile phone uses 4 columns.
Of course, you can design your grid system according to the characteristics of the project. The width of the columns and sinks can be defined by the 8-point grid system, which will be described below.
The larger the number of columns, the more “broken” the page will be divided, and the more difficult it is to control during page design. It is suitable for page designs with large amounts of business information, more information groups, and smaller information volume in a single box , The effect of the column spacing width value on the page is similar to the outer margin, that is, the larger the spacing, the easier and simpler the page, and vice versa.
Users are already accustomed to use the mouse wheel or scrollbar to browse the page content vertically, so the vertical direction can be infinitely extended, so the grid of the grid system in the vertical direction can not be reflected, we only need to be horizontal when performing design Just keep the direction changing regularly.
2. Page Margins (Side Margins)
The page margin is the space outside the content field. The recommended design is that the page margin can increase as the screen size increases. Page margins are usually between 12Px and 40Px on mobile devices, and the margins on tablet and desktop devices vary considerably.
In responsive design, after you select a page margin, the page will still have the minimum page margin you set when the page width is reduced, until it reaches the next response point (breakpoint). When you increase the page width, the page has more page margins until the page width reaches the next breakpoint.
3. Module (Field Elements)
A module is your design block. It can be a piece of text, a picture, or other richer elements. Background elements cannot be counted as design modules, so there is no need to follow the grid system. The definition of a module is very flexible. It can be a small unit or element, or it can be an element-rich block.
Taking a 12-grid system as an example, a 12-grid system can be divided into 2 equal parts, 3 equal parts, 4 equal parts, 6 equal parts, 12 equal parts according to the business needs, and can also be divided into 1: 1: 1,1: 2 ： 1, 1: 3: 2, 2: 3: 3, 1: 2, 1: 3, 1: 5, 3: 5 and other asymmetric divisions, which specific ratio combination needs to be determined according to our business needs .
4. 8 point grid (8pt spatial system)
The large level of the grid system can help designers better layout design and content layout, while the small aspect can help designers to regulate the alignment and spacing settings of various elements on the page. From the perspective of user experience, these two are equally important. From the perspective of execution, we generally do layout design and layout before filling in content and adjusting details.
Since the width of columns and sinks is increased or decreased with the grid as the basic unit, an important step in rasterization is to define the size of the grid's atomic unit "grid". At present, the most universal and easy to use is the 8-point grid. We can also use the 8-point grid method to formulate the spacing in the product, establish a grid of 8 points as a unit, and use a multiple of 8 to define the module spacing and element size. The 8-point grid has the following advantages:
1) At present, the screen resolution of mainstream desktop devices is basically divisible by 8 in both vertical and horizontal directions. Using 8 as the smallest atom is universal enough. It can ensure the visual consistency between different layouts, and at the same time can flexibly adapt to the design of multiple sizes. The unit of 8 conforms to the "even number principle". The even-number principle can avoid the appearance of sub-pixels like 0.5, 0.75, 1.25, etc. to the greatest extent in the page zoom, so that various elements of the page can have more exquisite details in most scenes.
2) In the grid system, more attention should be paid to the spacing, and the spacing should follow the grid system (for example, use 4, 8, 16, 24, 32, etc. and 8 with regular numbers). At the same time, various elements in the product are also Follow these principles (such as icon size, component size, etc.). Therefore, the horizontal and vertical rhythms of the layout and the rhythms of the various components will overlap each other, and the overall design will be more complete.
3) Front-end open source component libraries used by development engineers such as Metronic, Antdesign, etc. are also designed based on 8 atomic units , so if the designer also uses a grid system with 8 as the basic unit, it will be more convenient for the development and designer to interface with each other , When developing and realizing the page, we can restore our design with higher quality.
If the design does not have an immediately recognizable spacing system, this design may make users feel cheap, inconsistent, and often not trustworthy. If the design follows an 8pt grid system, the rhythm becomes predictable and visually pleasing. For users, this experience is modified and predictable, which increases users' trust and love for the brand.
No matter how many designers are collaborating, there is now a consistent spacing specification, and the cost of decision-making will be greatly reduced. Designers can easily start designing from where another designer stopped, or easily build in parallel. We define the specifications to communicate with development students in a timely manner, so it can save engineers time.
5. Baseline Grid
The baseline grid consists of dense horizontal lines that provide guidelines for text alignment and spacing, similar to how you write on ruled paper. In the example below, every 8px line alternates between red and white.
Baseline grid
Tip: It is very important to set all line heights in increments of basic units (8x or 4px) so that your text can be perfectly aligned with the baseline grid.
Font line height
Five, responsive design
1. What is responsive?
Designers need to maximize the experience of content on different platforms through design, to ensure that when users see the content on any screen, they will feel that the content is designed for this platform, rather than simply zooming. This seamless experience is the real difficulty of cross-screen design.
To develop a set of design solutions for different devices and screens, you need a set of strategies. The user experience also includes performance, interaction, efficiency and other aspects, that is to say, for an online responsive page, we must not only pay attention to what we see visually, but also pay attention to our feelings when operating and using these. Comprehensive factors ultimately affect the user's efficiency and experience when used.
2. The core steps of responsive design
1) Ensure the core user experience
Although the user experience is ubiquitous, for a specific product, the core experience exists. Products are usually used to solve specific problems faced by users, and this feature makes the products meaningful. The combination of key content and key functions usually constitutes the core user experience of the product.
If you do not want to understand this question, you may wish to ask yourself: What are the most common / important tasks that users need to complete? After finding the answers to your questions, your product should support these functions in a comprehensive and comprehensive manner from all aspects and channels to help users complete these tasks.
For example, Uber ’s core user experience is to call a car anytime, anywhere. Regardless of the screen size of the device, all of the design you make should be based on this demand and function. Calling a car is the core function of Uber, even with the extremely small screen size of Apple Watch, this task should be successfully completed.
2) Finalize the type of equipment covered by your product
The screen sizes of current mobile devices are different, and it is unrealistic to design content for a certain device alone. According to your product coverage, audience classification, usage scenarios, comprehensively consider which devices and platforms your content will be presented first, and then consciously filter out common device types: mobile phones, tablets, desktops, smart TVs, smart watches ...
Different device combinations are usually based on different scenarios, needs, and services. Users will interact with different modes for different screens, and even the content of the processing will be different.
For example, on mobile phones, users are more inclined to use lightweight tasks and carry out a certain amount of communication and exchange. On the tablet, user behavior is more concentrated on content consumption, and the current usage of the tablet is considered to be gradually decreasing. The desktop is still the preferred platform for users to complete more professional and complex tasks, enough to cope with complex and diverse content. Understanding various device types and usage scenarios is the key to building user experience.
3) Match user experience for different content
Not all content is suitable for different device usage scenarios. For example, smart watches are not suitable for displaying large amounts of text content. Among the device groups covered by your product, the usage scenarios of each device are different, and the user experience that should match is also different. The needs of mobile users and desktop users are different, and the scenes are also very different.
Taking Evernote as an example, it can synchronize and switch between many different types of devices, and its desktop version is optimized for user content needs: Evernote ’s desktop application is optimized for readable content and multimedia , And Evernote on the mobile end strengthens the functions of recording records, pictures and audio recordings: Secondly, different device screens have different input methods. If designers ignore the uniqueness of input methods, there are often many problems. Here are Not expanding.
4) Give priority to design for the smallest screen
All along, designers are used to starting with the largest screen, and finally considering the display effect on the smallest screen, which means that most designs are designed from the desktop side, and usually the desktop content and functions are more comprehensive. When the overall design of the desktop side is completed, it is then advanced to the design of other device sides.
However, when designing on the desktop, we often encounter the dilemma of "kitchen sinks": because products usually involve multiple stakeholders, many redundant features will be added.
Practical experience shows that mobile-first design can often better focus on core functions and is more suitable as a starting point for product design. When you give priority to designing the interface required for the smallest screen, this situation will force you to start designing from the most critical and important places. This is also the origin of the "mobile first" strategy that has been emphasized in the design circle and product development.
After this, the design of the tablet, desktop and TV is a natural addition process. In most cases, the smallest screen is usually a mobile phone screen.
5) Test your design
The test environment of the product does not necessarily have to be found in the real world, but we should allow real users to do usability testing as much as possible, and solve all user experience problems before the product is released.
3. Why use grid system for responsive design?
There are two premises for responsiveness: the page layout is regular; the element width and height can be replaced by a fixed value , and these two points are the typical characteristics of the grid system itself, so the use of grid system for responsive The design is logical and efficient, so responsive and rasterized are a natural partner.
Six, how to build a grid system
Step 1: Determine the number of columns
Don't limit the number of columns in the first stage. First, create a low-fidelity or high-fidelity prototype. Design some basic elements and user processes. After this, it began to design the optimal number of columns and size. If we have to change our grid system after the project starts to design, don't be burdened, we need to have some room for trial and error.
When we design the page, the most commonly used layout method is the equal division layout, that is, the page content area is divided equally by N, and the width of each copy is adaptively adjusted according to the screen width. From this point of view, think about how many columns the page grid should be set in, in order to meet the needs of various equal layouts to the greatest extent. Similar to the web, one of the most convenient grids on the mobile side is a 12-column grid. This grid will allow us to place both even and odd elements in a row.
For mobile, the disadvantage of the 12-column grid is that the width of a column is too small, and you may rarely create a column-width element. If you choose a grid of 2, 4, or 8 columns, remember the problems that may occur when placing an odd number of elements in a row.
Pro-Tip:
Interface design usually contains hundreds of different pages, so one grid may not fit all pages. If needed, create additional grid systems, but do n’t forget the consistency of the design. The consistency of the grid system: the same layout margins, equal or proportional sinks between columns, and other modules need to maintain the same ratio when changing the width of the columns themselves.
Step 2: Define sink and margin
First, let's go through the design guideline of the target screen to find out the usual page margins (Side Margins). Currently, the minimum recommended layout margin for Android and iOs is 16pt. The web side varies according to the screen size. This means that if you wish to follow the system guidelines, the page margin should not be less than 16pt. (But can be bigger)
When selecting a 12-column grid, the water channels between the columns should not be too large, because the columns will have a visually split feeling due to the small width of the columns and the large width of the water channels between them. At the same time I suggest that you choose the size of the sink proportional to the 8pt spacing system. So the horizontal and vertical rhythms of the layout will overlap each other. The sink is proportional to the page margin. Then the grid is more consistent and will allow us to easily place special elements in it, such as carousels.
Step 3: Define 8pt pitch system
In order to help designers with different design capabilities in the consistency and rhythm of the interface layout, the layout language from the unified design to the development is unified to reduce the restoration loss. In a large number of practices, we have extracted a set of arrays that can be used for UI layout space decisions. They all maintain the principle of multiples of 8 and have a dynamic sense of rhythm. After verification, it can help us to realize the design decision on the layout space faster and better to a certain extent. There are many ways to define the grid system, such as the use of an 8-point grid system, Fibonacci sequence, the increment of a certain minimum atomic unit, the parameterized definition of the spacing from the underlying system, etc. We take the increment of the minimum atomic unit as an example to define Grid system. The value selection of the smallest cell needs to be considered from two aspects:
- On the one hand, is this value divisible by the width of most mobile phone screens, that is, wide applicability;
- The other is whether it has a certain flexibility in specific use.
In terms of applicability, the four values of 4, 6, 8, and 10 are basically satisfactory. In terms of flexibility, 4px performs best, but the page will be divided very finely, which is difficult to control during design. . Therefore, we need to select the appropriate value according to the actual situation of the APP. 4px or 6px cells are more suitable for products with more information on the page and more complicated layout. The 8px cell can meet the general design scene very well, and is more suitable for most projects, so it is recommended to use.
Then suppose we extend the system spacing based on 8 to get the following spacing system:
1, 2, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 192, etc., here are multiples of 8 or divisible by 8
However, there are too many spacings at the moment, and too fine fragmentation will also lead to a messy painting spacing, so we continue to optimize combing (based on 6, the previous number is twice the increment of the following number) to get the following spacing system:
1、2、8、16、24、32、48、64、80、96
Step 4: Sketch layout settings
Using the layout setting function of sketch, you can quickly build the reference layout of the grid system. In the usual design process, you can often use the Ctrl + L shortcut key to switch the display of the layout to improve the design efficiency.
Let's explain what these settings are:
- Total Width: the value of the content area (Container)
- Offset: indicates the offset of the grid, we only need to press the Center button after setting, and it will be automatically centered;
- Number of Columns: is the number of grids
- Gutter on outside: It is a very important setting, and it can only be matched with the front grid algorithm after checking.
- Gutter Width: is the spacing between grids
- Columns Width: is the width of the grid
Seven, how to be responsive?
In the traditional rasterization system design, the width of the columns and the width of the sinks remain the same, but the "number" of columns changes. Why should we do this?
This is to make the design simpler:
If a set of three cards are placed on the four columns of the desktop, then on the tablet, two cards will be displayed, and the third card will be displayed on the second line. No adjustment is required, because it is already known to be in the fourth column.
On the phone, the answer is also very simple, just need a card, and the rest will be automatically piled into the following line.
But at present, I have more response strategies, such as how to respond to the elements of the content area when the Viewport changes. Specific to our current grid system, it is Columns, Gutters, Margins, and Columns and Gutter How does the value (mainly width) of the four of the boxes (BOX) change, and how does the layout of our pages adjust under this change.
1. Fixed grid or breakpoint system (Fixed boxes or breakpoint system)
Fixed grid, column width and sink width will not change, just change the number of columns, when the window is zoomed, the layout will not change anymore, only when it reaches a critical value (the fixed value set on the development side), The interface will change. Prior to this, the interface layout was unchanged, like a part was cut off.
If you write a fixed grid over there, when you zoom out from the desktop to the tablet, it ’s like the width of the desktop browser, you wo n’t see any changes, and the design is like being cut off. But when the critical point of the tablet screen size is reached, the design layout will change immediately, and the display effect on the tablet computer will be better. If you continue to reduce this value, the same thing will happen, and the design looks the same until it reaches another critical value.
The following are common breakpoint systems (Breakpoint System):
As shown in the figure, the response type uses the minimum width of the window as the basic basis to formulate the response strategy of Columns, Gutters, and Margins for each width. That is to say, Viewport Min-width is the trigger condition for response, and each time the window reaches a minimum Width, it will trigger the preset page layout method under that width, and each layout is the best layout under this width, which is why the responsive type can be compared to the user under various complex resolution conditions. Good experience.
The minimum value of the width of each window is the key value that triggers the response, so we named these key values for triggering as "Breakpoint", and each Breakpoint triggers a response strategy.
2. Fluid Grid
The mobile grid system is an ideal response strategy for editing content, dashboards, images, videos, and data visualization. When the window shrinks, the content will change dynamically, the text will wrap, and the element will become narrower. However, the layout of these elements will not change until the content width is reduced to the next threshold. In various situations, it is more useful for users to expand the size of content than to expand the amount of visible content.
So what I want to say is that BreakPoint is just a reference point to change the layout. This is why the column width and the number of sinks will not change, because we want to make it easier for designers to create consistency when considering layout. The content width will change as the window zooms. For example, the picture will shrink and the text will wrap. The width of the sink is not necessarily fixed, and can vary with the width of the page.
At each breakpoint, the column count is fixed and the column width is a multiple of the minimum grid 8PT. The row height is a multiple of the column size, following the recommended aspect ratio. Margins and padding are fixed multiples of small units. Between breakpoints, the actual column width is a percentage of the grid area, not a small unit multiple. The content scale is smooth.
First select a basic size from all screen sizes, and then construct each responsive size in multiples of the basic size according to the recommended aspect ratio. When each block uses a multiple of the same base size, a grid appears. Following this method can ensure grid system consistency, even across products.
3. Hybrid Boxes (Hybrid Boxes)
In actual projects, it is also common practice to use a combination of flowing grids and fixed grids. The website is usually a mobile grid because it has to adapt to various terminal sizes. Background system design and tool-based interface design often use a combination of grid and flow grid.
For example, the sidebar of the background management system (dashboard) is a fixed grid, and the content on the right is a flowing grid. Mixed grids have different scaling rules in each dimension, so they do not use a uniform scaling ratio. When users need to adjust the size of the browser to make the content scale in one dimension but not in another dimension, a hybrid grid is used.
Eight, the impact of the panel on the grid system
How Panel behavior effect Grid system
1. Flexible panels
The flexible panel allows folding and expanding states. The expanded state of the panel is a fixed width, which cannot be adjusted by the user. When the user hovers over the folded panel, the panel expands. When flexible panels expand, they either compress the content and grid, or push the content beyond the edge of the browser.
2. Fixed panels
The fixed panel maintains a static width, cannot be folded, and also exists outside the response grid.
3. Floating panels
This panel style floats above the main content area and does not affect the response grid. The floating panel hides any UI elements below it, and the user must remove it. Inline menus, drop-down menus, and tool tips are also floating.
Nine, summary resource expansion reading
The purpose of writing this article is to provide some information on how to use grid systems in responsive design. I know that for myself, I spent a lot of time understanding how grids work. I watched many videos and read a lot of articles on YouYube, but everyone is concerned about why it is important, but not how to use these principles in their own projects.
The best thing you have to do is to pay attention to how the good design aligns the elements from now on, and you will start reading these design systems. To help understanding, here are some design systems that outline their grid usage:
Google’s Material Design System
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins
Intuit’s Design System
https://designsystem.quickbooks.com/foundations/responsive-column-grid/
IBM’s Carbon Design System
https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals
After fully understanding how the grid works, you will become a better designer because you know how your design will switch between critical values. You can also land your designs so that they can achieve pixel-level perfection. Such a specification brings a more consistent and more concise design. When users move from one interface to another, this really improves the quality of the product. I suggest applying these grids in your design, and working with development classmates to put them on the ground in a practical way. This will be a very good progress.
