The application of mathematics in web design

This article does not teach you how to do design, it's about teaching you to make your design more reasonable and balanced by some "tools", and remember that rules are dead, people are alive, and how to obey rules is the key to deciding whether you can succeed.

It is impossible to achieve a good design without careful planning, and mathematics plays an important role in this plan.

Some people may say I already knew, for example what margin or padding, calculate altitude What, this should be what you say in the design use mathematics? It should be said that my math has a higher level of meaning (the skin is thicker).

I think I am here and you say thousands of words, but also give you a real example. Let's take a look at some of the "prep work" before I do the design.

Recently, I was designing a church website, I design side of the screen to send some screenshots to get a peer's comments and feedback, but we do not see the design behind the "mystery."

No more nonsense, now get to the point!

　　First, determine the width of the page

There are some things you should decide as soon as possible before you design any Web page. One of the main things should be the width of the page, I personally prefer 960px as width, even if the user is using the 1024*768 resolution, the page will not appear lateral movement-of course you can use any width.

The first step has been completed and we are entering the second step.

　　Ii. Division of Regional

Next we want to divide the width of this 960px vertically into 12 or 16 areas, see the diagram below. Today I will choose 12 vertical areas, so each vertical area should be 60px wide, and each vertical area of the left and right have a 10px space, in mathematical language to express is: 12*60+24*10=960px, the sum equals our page width -960px.

Maybe some people say this first and second step I almost every day, but also you teach-do not worry, the show in the back-the general designer to finish these two steps will begin to design, and for the real master This is just the beginning.

　　Third, to determine the horizontal area, please see the diagram below

The height of the horizontal area is usually slightly larger than our font size, why? Because if my font is 14px and the horizontal area is 14px, then the line spacing between your words and words will become very small, so that people can not read properly. The spacing of words has different meanings for graphic design and web design-the topic will continue to be discussed in future articles due to space limitations. If you know the front end (HTML & CSS), you can take the horizontal area as the Line-height attribute in the CSS. After repeated thinking, we will use 18px as the height of our transverse region.

To sum up, we have a page width, a vertical area, and a horizontal area.

　Iv. confirm the "domain" in this design

Through the "domain" implementation will make our web page layout more reasonable and beautiful, such as through the "domain" we can probably figure out how to put some of the important elements of the page. (Remember, "domain" is a helper, not a unique standard).

Graphic designer, magazine designer, book designers in the design of the general will be a4,a3, such as the page from top to bottom into several areas (that is, we call "domain"), so that in the design of the designer can be very good control of each element of the page balance (visual, content and layout balance), So that the design to achieve good results; But in the Web page of these theories is very impractical, such as design magazine words are used A4 paper size, then width and height are determined, and in the web design, height is uncertain, that should do?!!!!

The charm of mathematics at this time again gives us infinite power!———— the golden line. If you're like me, always doing a small act in math class, don't be intimidated by the name.

With the first step, we have confirmed that our page width is 960px, so we can determine the height of our "domain" by the principle of golden section. Who knows the coefficient of the gold partition?! -the answer is 1.618. So we can divide the width of our page (960px) by dividing the factor of the gold 1.618来 get the height of the "domain"-960/1.618=593px.

By computing we know the height of the domain, if you divide the 593px by the height of our horizontal area (18px– see step Three), 593/18=32.94444444, which means that each "field" has nearly 33 horizontal regions inside.

But now there is one more question that lies ahead if the 593px is the most we design the "domain" height, then you will find that our page may generally only put down one or two domains, obviously this to our layout can not play a very good guiding role-to know that many pages of the height of less than 593px, What's the use of this field?!

　V. To further improve the size of our "domain" through household name "three-way"

All we have to do is divide the height of the current "domain" (593px) by 3-593/3=197.6666667, about 198PX, oh yes!!!!!, and then we just 198-18=180px, and this is the height of our domain. Why to subtract 18px at the end, because we will add a blank space between each "domain", just as there is a 10px space on the left and right of each of our vertical areas, and 18px is our horizontal area height, please see the schematic below.

Through the 5 steps above I can be very responsible to tell you ———— you can start to do visual design. You can use the above theory to make a set of their own project page width, vertical area, horizontal area, "domain", through their help to upgrade your design level to a new level! Remember that ———— rules are dead, people are alive, and how to obey the rules while breaking the rules is the key to determining whether you can succeed. What is simple is usually achieved through a complex process.