Write at the beginning: The concept of grid layout for web pages is no longer needed to describe, and in general, experienced Web UI designers should have heard and used it. But there are articles on rasterization that are very theoretical, algorithm-based, modular, and mixed with responsive layouts that make it hard for new web designers to get started, so here’s a case study of when to use and how to build a rasterization system the fastest. In all of my UI articles, I emphasize the importance of communicating with the front-end developers, because they are the ones who execute your design.
1. Separate rasterized design from rasterized layout
Grid-design and CSS Grid are described separately, as I understand that they are completely different jobs, the former for web designers and the latter for front-end developers. Rasterization design is based on raster system design without considering the response of the page, mainly to improve the standardization of the web page. For some of the rules of the website, or the general creative website, rasterization design is very recommended, especially some large cycle long, the late need for continuous iteration of the project, rasterization design so that the web page presents a professional sense of trust, and help the maintenance of the late. Rasterized layouts, specifically the CSS framework used by the front-end Siege Lion, are used to achieve responsive layouts of pages.
Got a website design needs, decide whether to develop mobile website alone, because the response is both a mobile terminal, the layout but the loading speed, the influence of the mobile browser, freedom, and so on, such as integrated electricity complex page web site if you don’t do a separate mobile station, relying on responsive layout, performance on the mobile end is a Tony, so, If you can develop a mobile version of the site, congratulations to the designer, all you need is a grid design, a grid system in a broad sense, but if you want responsive web to replace mobile web, you need a special grid system. I’ll break it down later. Most workflows, where the designer delivers the solution to the front end and the front end thinks about implementation, need to be optimized for a deep communication with the developer before the design begins. The advantage of communicating ahead of time is that you understand how they work, and the more important thing designers need to know through communication is whether the site needs to be responsive, which is the key to building a grid system later on.
Responsive design is only a compromise of web design, depending on the actual situation of the project to choose. For designers, if not necessary, a generalized grid system can be chosen, and creativity can be created on this basis.
2. Rasterization system that can’t do anything
For whether to adopt rasterization design, the following cases are used to illustrate:
For these three representative cases, rasterization design is not necessary. The reason is very simple, grid advantages are also disadvantages, norms mean unity also means restrictions, in the above case, there is no need to use grid to limit the inspiration of designers, after all, this society, or need a sense of design.
But in most cases, rasterization is recommended. In particular, text and text mix, a lot of sites, raster design will make content desultorily page present fresh feeling. There are a lot of options for rasterizing layouts. Let’s take a look at a few examples of what we call rasterizing design.
For web design that doesn’t need to consider page responses (in other words, independent of the framework), the principle can be reduced to one sentence: “Leave it to the designer.”
3. Parameters of rasterization design
The 960 GIRd grid system, one of the hottest search results on the web, was officially launched in 2009, but is still used by many designers today, relying on the flexibility of the 960 GIRD in addition to considering the resolution of the display device. So, for the new Web UI, using the 960 Grid is still the best solution, not spectacular but not wrong. For a widescreen design (which requires the removal of some users with low resolution), you can build the rasterization system to be 980 or more wide. In other words, in a PSD document, your content section is 950px. Rasterizing layouts can be done with some very useful online tools, such as the well-known Grid.Guide, which is a three-format format specification for 12-column grids with content width of 950. You can also use 24 columns for more flexibility.
As you can see from these three options, the rest of the task for the UI designer is a lot easier. You can download the PNG format of the layout standard and use it as a basic part of your page design to divide the columns and columns from there. Or just create a new guide line based on this parameter (I prefer this, especially in photoshop CC2017 where you create a Gutter and column width). I simply took the layout specification to do a page design schematic, this is based on the advantages of grid system design, in the division of columns, rational to follow, there is a basis to follow.
Of course, since you are a designer, you can have more perceptual elements. For example, if you want more white space, you can use a larger grid layout, as long as the entire site remains consistent. Here is a grid system generated when the content is 1200 Width. There are many options you can try, but Max Width is not arbitrary, depending on the location of the site.
As for height and vertical spacing, there is no uniform rule for rasterization systems. Designers can use some golden section or other values full of design sense, or the vertical spacing is the same as or times the spacing of the rasterization system. In short, there needs to be a rule to guide the design of the whole station.
The parameters of the grid system should be set to multiples of 10 or 8, depending on the actual situation of the project (Google Material Design recommends).
4. Rasterized layout parameters
In fact, IN writing this part, I am a little guilty, because I am not the front end, only a little understanding of the relevant knowledge, so there is wrong place, welcome to put forward. As mentioned earlier, if the site needs responsive design, it is important that designers ask the front end how they intend to achieve responsive layout, rather than hand it over to them to see if they can reproduce it 100% for you. The first thing to say about responsive grid systems is that the front end can build other types of grids, such as 7, 9, 11, 13, etc., or even a variety of different types of grids, when the front end is happy and understands how CSS principles and frameworks are built, but in most cases, the front-end raiders prefer high TOU efficiency (LAN). In addition to Bootstrap(480/768/992/1200,12 columns wide), there are also a bunch of lightweight CSS frameworks that can’t be named (after all, the raster system is just a part of Bootstrap, and if you just need a responsive CSS, there are a lot of options. 960. Gis), and it’s possible that your lovely front end raider uses Flexbox for responsive elastic layouts, so get off your shelf and ask the developers before you know for sure, because it’s hard to admit it, but in this case the front end is directing the design. Thankfully, this is very rare in practice (but not if you’re working on a secondary development project, etc.), and once you’ve determined which framework they’re using, the designer can go about his or her work. Here is also an example, is 960GIS.
After reading this, you may understand why it is necessary to determine the front end when it comes to rasterizing layouts. The CSS framework of 960GIS provides three scenarios, 24 columns, 16 columns and 12 columns, on which designers will build their designs. Once rasterization is required, it means that the designer has less room to play with and has to choose one of these three options. Where do these schemes come from? It’s easy, just ask the front end for the PSD template of the frame it uses, with all the guides built in. The front-end will be more than happy to do this for the simple reason that you will reduce his workload by following the framework specifications he uses and everyone will be happy. Here, for example, is a screenshot of the current PSD file for Bootstrap4.
Designers can also be self-sufficient, as these CSS framework libraries usually provide a way to download them. Bootstrap in particular, as a mature framework, many template files can be applied.
Rasterized layouts are governed by the CSS framework library used, and it’s best to make front-end development available to designers.