GHD IV Styling Set = 34 N

lettres8990

recently

in product design, come into contact with the grid system (grid system), collected some information and articles on the internet, and finally finishing the output for your reference:

what is a grid design system?
grid design system, namely, gird system (also known as grid design system, the standard size system, the program layout, swiss graphic design style internationalism graphic design style), a plane design methods and style. use a fixed grid design layout, the style is neat and simple, popular in world war ii, has become one of the mainstream style of today's publication design.

grid design system is very common in the layout design of printed publications, web design is often inspired by typography. in web design using grid design system not only to inherit the neat and concise style, but also greatly reduce the workload of design; from the front-end engineering point of view, this layout the way the advantages of self-evident: the natural normative and reusability. from the entire team, use the grid design system can streamline workflow and facilitate the exchange, but also facilitate the division of labor and unified style.

this is a 3 * 3 grid 960px page design sketch from


why is 960px?
grid is easy to understand, but why 960? the internet to search large amounts of data, both by chance can be shown to the truth then what is coincidental? the first designer to use apple computers, then that will be encountered during the design of some constraints:



1. screen resolution: 1024 px wide by 768 tall2. firefox form size: 974 px wide by 650 px tall3 remove the left and right borders 7 px, the remaining size is 960 px wide by 650 px tall

960 the width of the natural appearance have lamented: constraints are the mother of invention the design

on this part of the introduction can also look at this document: grids are good

960 can be decomposed into 2 ^ 6 multiplied by 3 and 5, which makes the 960 can be split into an integer multiple of the following width:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

a total of 26 (26 = 7 * 2 * 2 2, minus 2 is to remove the 1 and 960 of their own), we labeled as:

n (960) = n (2 ^ 6 * 3 * 5) = 26 according to the above algorithm,ghd iv styling set, the can get:

n-(360) = n (2 ^ 3 * 3 ^ 2 * 5) = 22
n (480) = n (2 ^ 5 * 3 * 5) = 22
n (720) = n (2 ^ 4 * 3 ^ 2 * 5) = 28
n (750) = n (2 * 3 * 5 ^ 3) = 14
n (800) = n (2 ^ 5 * 5 ^ 2) = 16
n (960) = n (2 ^ 6 * 3 * 5) = 26
n (1000) = n (2 ^ 3 * 5 ^ 3) = 14
n (1024) = n (2 ^ 10) = 9
(1440) = n-(2 ^ 6 * 3 ^ 2 * 5) = 34
n (1920) = n (2 ^ 7 * 3 * 5) = 30


the vast majority of monitors support 1024 x 768 and above resolution. in order to effectively use the width of the screen while ensuring the flexibility of the grid, we can see that the 960 is very suitable.

960 width 12-bar grille design, you can have the following unit widths: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.



960 width 16-bar grille design, you can have the following unit widths: 40, 100, 160, 220, 280, 340, 400 ,louis vuitton sac monogram miroi, 460, 520, 580, 640, 700, 760, 820, 880 and 940.



reference article: of the 960 grid system made easy

960 the lattice design on the one hand to ensure that the site flexible control structure layout and easy front-end development of the normative and reusable, so why not do it?




discussion:
,
960px is only what?
960 is the only optimal page width? of course not. the width of the page,ghd radiance set, use the grid system is not strictly 960px, but also may be 950px, such as yahoo's yui framework is 950px. on the introduction of the web grid system design can look this article taobaoued. 1024 * 768 will not always be the mainstream resolution, with the development of resolution, an optimal width is likely to be 1440 (2 ^ 5 * 3 ^ 2 * 5), or a resolution of the era of the page pro rata scaling (like now in the mobile version of safari). in addition, good design and creativity is often necessary to break the rules, raster design system is not web publishing is the only available styles outside the mainstream, there has been some very good non-960px page (especially the full-flash website); sometimes the people the proceedings of the defects on the seo, or compatibility, user experience is not good enough, but from the artistic point of view, they are still very good.
of course, have to achieve a good design of the 960 grid css framework:
960 grid system is developed by nathan smith, css framework, 12, 16, 24 in three versions. css for many programmers may disdain to optimize, but it does and other code, like architecture and optimization. even if the operator is a small site, appropriate organization, reuse the css code can save considerable time and cost. css framework is the one that allows you to things in each site tested, those boring repetitive work entrusted to them, the focus on how to create a more inviting design.

and 960.gs not only provides a css framework, it provides a thumbnail table printable firewofks, phototshop, omnigraffle and vision template source files ... you can make a lot of the project team people use it.

can you reduce a lot of compatibility issues, it supports yahoo named the a-level browser:



  
the article:
designing with grid-based approachthe use of grids in the website designgridding the 960grids are goodthe 960 grid system of the grid system made easy web design
ps, this article first appeared http://imnicky.com/?p=45