Thinking about grid design of web pages
|
<br />Original address: http://andymao.com/andy/post/82.html Dirt, mess and poor quality in web design are problems we often encounter during the design process. Usually "dirty" is caused by improper use of colors, and the bad effects caused by improper use of colors are also divided into: "flowery and gray". Flowery and gray are what we call "dirty" here. I have already talked about my views on using color in design in some of my earlier articles. Friends who are interested can check out "Color Explanation". The "bad" performance is basically caused by our lack of technical proficiency. For example, the details are not handled properly and the effects of some local areas are rough. This can be called "poor", especially when dealing with design works with 2D effects, this situation often occurs. But what I want to talk about in this article today is "chaos". What is chaos? The chaos here does not refer to the chaotic use of colors or the chaotic content, but mainly refers to the chaotic layout. I had the opportunity to come into contact with graphic design in the past, and learned a lot of knowledge and techniques from it. Among them, "grid design" is a theory used to deal with layout in graphic design. So far I am still studying "grid design". Because there is really no better language that can summarize this word very concisely and clearly. This is more like something that needs to be understood through continuous practice. So many times we are unable to tell. However, in design, this grid is a very useful tool that can help us complete better works. I can’t say that I have a deep understanding of grid design. I am just applying my understanding of grid design to web design. I hope it can give more friends some inspiration and perhaps open up some friends’ minds. It is impossible for designers to read the text alone patiently, so we still use the old method and use diagrams as explanation models. This time we use the websites of Microsoft, IBM, and ASTRO to explain. I hope that by breaking down the website designs of these three companies, I can convey my understanding of grid design. Without further ado, let's look at the diagram:  We can see that there are no obvious lines to separate different blocks in the Microsoft website design, but when we cover it with a layer of gauze and then draw each part with solid lines, we find that the website is actually in a grid array. The content of this array is already very clear, and we found that the positions of many blocks on the page are surprisingly organized, and some blocks that are not together actually have a certain pattern. Of course, some people may say that it appears organized and neat if everything is drawn with lines. This is where the problem lies, our websites can all be distinguished by vertical and horizontal lines. However, some poorly designed websites may have a large number of vertical and horizontal lines. There are too many vertical and horizontal lines and they are all crowded together, which means that the layout of the website appears too messy. Or it may be too organized and become evenly laid out, without contrast and lacking in beauty. In fact, as long as you use this method to analyze your own design work, you may be able to see where the problem lies. Let's take a look at the breakdown of IBM's website:  We can see that the grid of IBM is very different from that of MS. There are some grids of similar size in IBM, but it should be noted that these grids are actually generated by several very small blocks at the bottom, and these blocks can also be regarded as a horizontal block. We can see here that IBM's layout design is symmetrical. However, this symmetry is not easy to notice on the vertical and horizontal lines. This is a very clever technique. Let’s take a look at ASTRO’s website. This website is more entertaining and interesting than the above two companies’ websites.  From these three websites we can see three different styles of grid design. Although they are different, we can still find that all three will try their best to put the most important information at the visual center. Whether it is on the left, right or in the middle, they all get the largest grid area and get enough attention! Our visual center is naturally focused on it! Having said that, I still feel that I have not explained the role of grid design clearly. Here we need visiting friends to give us your opinions. I will continue to pay attention to grid design in the future, hoping to make its role in web design more clear! |
<<: How to construct a table index in MySQL
Recommend
Tips for viewing History records and adding timestamps in Linux
Tips for viewing History records and adding times...
How to build a private Docker repository using Harbor
Table of contents 1. Open source warehouse manage...
JavaScript Closures Explained
Table of contents 1. What is a closure? 2. The ro...
Nginx installation and environment configuration under Windows (running nginx as a service)
The first and most important step is how to insta...
Vue component organization structure and component registration details
Table of contents 1. Component Organization 2. Co...
A brief discussion on group by in MySQL
Table of contents 1. Introduction 2. Prepare the ...
Display mode of elements in CSS
In CSS, element tags are divided into two categor...
CSS pixels and solutions to different mobile screen adaptation issues
Pixel Resolution What we usually call monitor res...
What scenarios are not suitable for JS arrow functions?
Table of contents Overview Defining methods on an...
VUE+Canvas implements the game of God of Wealth receiving ingots
Welcome to the previous canvas game series: 《VUE ...
Steps to customize icon in Vue
ant-design-vue customizes the use of Ali iconfont...
Virtual domain name configuration and test verification under Linux\Nginx environment
By using Nginx virtual domain name configuration,...
How many pixels should a web page be designed in?
Many web designers are confused about the width of...
How to modify the default storage location of Docker images (solution)
Due to the initial partitioning of the system, th...
Solution to forgetting the root password of self-built MySQL in Alibaba Cloud Linux CentOS 7.2
Verification environment: [root@~~/]# rpm -qa | g...