Handout
Grid
Grid, garida, pola, atau kisi-kisi adalah susunan kerangka yang dibangun atas garis dengan posisi vertikal dan horizontal, grid dipergunakan sebagai alat bantu untuk menyusun atau mengatur objek dalam kontek perencanaan dalam ruang gambar dua dimensi.
Grid dalam desain grafis dipergunakan sebagai alat bantu untuk menyusun, mengatur komposisi objek visual, dalam istilah lain dipergunakan untuk membantu pengaturan tata letak, objek tersebut terdiri dari elemen grafis, yakni; huruf dan image. Biasanya susunan huruf terdiri dari penempatan judul (headline), naskah (bodytext), atau susunan lainnya yang menggunakan unsur huruf. Sedangkan penggunaan image terdiri dari ; gambar-gambar dalam bentuk foto, ilustrasi, clipart dan seterusnya.
Fungsi grid, selain alat pengaturan komposisi dalam ruang dua dimensi, grid dapat menciptakan sifat-sifat yang berkaitan dengan penampilan (performance) dalam bentuk desain, atau bisa menciptakan kesan (impression) tertentu; seperti sifat formal, mahal, murah dan seterusnya.
Sedangkan penggunaan grid pada cabang ilmu lain hampir serupa fungsinya hanya istilahnya yang berbeda, seperti pada ilmu geologi istilah grid disebut grafik sesmograf (seismography) yaitu diagram dalam bentuk grafik untuk mengukur getaran gempa yang terekam. Pada ilmu ekonomi grid dipakai sebagai informasi data yang menunjukan jumlah angka tentang pertumbuhan sesuatu permasalahan yang berkaitan dengan aspek ekonomi, misalnya; neraca grafik pertumbuhan atau diagram yang menunjukan tentang indek.
Dalam grid posisi garis horizontal disebut juga sumbu X, posisi vertikal disebut dengan Y, sedangkan dalam ruang kedalaman terdapat sumbu Z, hal tersebut banyak dijumpai pada susunan gambar 3D, tiga dimensi atau gambar perspektif.
Mengapa Perlu Grid
Mengatur ikatan visual saling ketergantungan, adanya kelompok dari setiap elemen visual yang membentuk satu kesatuan; cara mengelompokkan, simbolisasi, atau skematisasi; aturan penyusunan.
Banyak cara untuk mendekati masalah desain, banyak metode yang terbaik. Namun setidaknya perancang grafis dapat mempertimbangkan grid dalam bekerja dan akrab dengan pengetahuan tentang cara kerjanya. Grid tidak dapat memecahkan semua masalah visual tapi sering mengarahkan pada pendekatan rasional, susunan objektif.
Data dari gestalt mengungkapkan bahwa manusia cenderung memilih informasi visual dan verbal dengan cara-cara yang teratur, susunan visual yang terorganisasi.
Sistem grid memungkinkan desainer dapat memuaskan sasaran dengan cara keseimbangan (equilibrium), kemiripan/kesamaan (similarity) dan kesinambungan (continuation). Grid membantu para desainer terhindar dari kehancuran (ambiquity).
Sistem grid berharga untuk membangun “kemiripan keluarga” kedalam suatu seri visual. Perusahaan yang mengeluarkan ratusan bahkan ribuan produk yang berlainan harus memiliki metode unifikasi dari catalog dan mempromosikannya lewat brosur, kertas sales, dan iklan. IBM dan Westinghouse, dengan arahan Paul Rond, telah lama menggunakan system grid untuk menampilkan keteraturan dalam ribuan barang cetak yang dibuat setiap tahun. Desainer Swiss dan Jerman dengan akar DeStijl/Bauhaus adalah eksponen desain grid. Orang jepang dengan system bangunan modular tikar tatami, telah lama peka terhadap grid. Kebanyakan surat kabar di seluruh dunia menggunakan system grid untuk mempercepat tata letak dan memberikan penampilan yang konsisten.
[ dari berbagai sumber, diperbaharui dan bersambung ]
---------------------------------
Designing With Grid-Based Approach
Published on April 14th, 2007 in Developer's Toolbox.
Tags: | CSS, Design, Development, Grid, Showcase, Techniques | 90 comments.
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
And this is what this article is all about. Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good, we’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found - with precise descriptions of what the articles are about.
Examples of Grid-based design
But first few examples of grid-based designs to make clear what the article is about.
Things You Probably Don’t Know About Grid-based Design
“The grid is the most vivid manifestation of the will to order in graphic design. […] Units are the basic buildung block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.”
[ Grids are good ]
“A grid is a consistent system for placing objects. It works on two levels: At the unit level of cells (e.g. 20×20 pixels) and at the column level (e.g. 4 columns).”
[ Grid-based Layout ].
“A balanced and consistently implemented design scheme will increase readers’ confidence in your site. […] Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages. [..] To start, gather representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page. […] Your goal is to establish a consistent, logical screen layout, one that allows you to “plug in” text and graphics without having to stop and rethink your basic design approach on each new page.”
[ Web Style Guide ]
“One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. […] So the focus is usually on the horizontal layout, which usually means columns.”
[ Dave Shea ]
“On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. [..] The basic unit of vertical space is line height.”
[ Richard Rutter ]
“In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.”
[ Richard Rutter ]
“Designing Grid Systems in Graphic Design, 1. figure out the page size, 2. divide it into a grid, 3. start designing”.
[ Josef Muller-Brockmann’s “Grid Systems in Graphic Design” ]
“Use the canonical grid to adjust the sizes and positions of elements across rows. Short elements are extended to begin and end on grid boundaries, while long elements are allowed to span multiple grid units or are shortened to fit within the standard unit. In this way, the grid is merely being used to help establish consistent alignment relationships. […] For dynamic layouts, identifying the minimum size that can be accomodated by the layout is usually a better solution than trying to recompute the layout for arbitrarily small display sizes.”
[ Module and Program ]
“One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles.”
[ Mark Boulton ]
“The Golden Section, Golden Ratio, and the grandiose Divine Proportion are all names for the same thing; a ratio of 1.618. Nodding off? Not yet? Good! Bear with me. Here?s the maths: the Golden Ratio is the ratio between two segments so that the ratio between point ac/bc is 1.618.”
[ Mark Boulton ]. You can also use Phiculator for your grids.
“The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right.”
[ Mark Boulton ]
“Grid Structures: Once you have answered most of the questions regarding the content, format and typography, you should begin sketching out grid structures based on the appropriate page sizes and formats. You should first begin by defining the Type Area. The Type Area is the area where your grid will be contained. It is surrounded on all sides by margins and in some cases running heads and page footers, numbers, marginalia, etc.”
[ Typographic Grids ]
“The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.”
[ Wilson Miner ]
“You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. It’s easy to get 12 out of 18 (just set the line-height to 1.5em), but when you want to adjust the text size but keep the same line-height, the fractions start to get messy”.
[ Wilson Miner ]
“Table layouts are great for grid designs. The markup itself reproduces a specific grid, and the tendency is for us to just fill up the boxes with the images, type, and interface elements that make up our design.”
[ Molly Holzschlag ]
“Ratios are at the core of any well designed grid system. [..] By using the size of the paper as a guide we can divide using that ratio to begin creating the grid. You can see this through diagrams 1 - 6 that we begin by simply layering division upon division to slowly build up the grid.”
[ Mark Boulton ]
“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”
[ Mark Boulton ]
“Gutters are the gaps in between columns. They are there so text, or image, from different columns don’t run into each other. In grid system design sometimes, depending on what theory you read, gutters are seperate to the columns.”
[ Mark Boulton ]
“The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.”
[ Mark Boulton ]
“One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.”
[ Mark Boulton ]
“In your page layout, you’ve probably set margins. These margins often show up as light solid or dashed lines on the screen. These top, bottom, left, and right margins create a box in the middle of your page. Stop there and you have a single unit grid. Further divide the page into uniform parts and you’ve created a multiple unit grid.”
[ Jacci Howard Bear ]
“Grid units are the primary locations on your page where you will place text and images. They determine placement not necessarily size. That is, if you have a graphic image that is larger than your grid unit, it doesn’t mean you can’t use it. ”
[ Jacci Howard Bear ]
“1, 2, and 3 column grids are common. Each can accommodate lots of text, especially long articles. [..] 4 or more columns offer greater flexibility for publications with text, photos, and other graphic elements and a mix of long and short articles. [..] Grids based on an even number of grid columns can suffer from too much symmetry if text and graphics are confined to individual or double grid columns throughout.”
[ Grids - Flexible Options ]
“A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye.”
[ Anne Van Wagener ]
“To add flexibility you can break the grid down into 10 or 12 columns. Half-columns are a good place to anchor mug-shots, refers, and other info.”
[ Anne Van Wagener ]
“You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.”
[ Anne Van Wagener ]
“The grid is the mannequin and the comp is the pattern. [..] Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer’s comp and record measurements for my style sheet.”
[ Michael Angeles ]
“You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.”
[ Michael Angeles ]
“Basic Outline for Grid-based Design: Content, Audience, Illustrations / Photography / Icons, Format, Typography.”
[ Feeling your way around grids ]
Grid
Grid, garida, pola, atau kisi-kisi adalah susunan kerangka yang dibangun atas garis dengan posisi vertikal dan horizontal, grid dipergunakan sebagai alat bantu untuk menyusun atau mengatur objek dalam kontek perencanaan dalam ruang gambar dua dimensi.
Grid dalam desain grafis dipergunakan sebagai alat bantu untuk menyusun, mengatur komposisi objek visual, dalam istilah lain dipergunakan untuk membantu pengaturan tata letak, objek tersebut terdiri dari elemen grafis, yakni; huruf dan image. Biasanya susunan huruf terdiri dari penempatan judul (headline), naskah (bodytext), atau susunan lainnya yang menggunakan unsur huruf. Sedangkan penggunaan image terdiri dari ; gambar-gambar dalam bentuk foto, ilustrasi, clipart dan seterusnya.
Fungsi grid, selain alat pengaturan komposisi dalam ruang dua dimensi, grid dapat menciptakan sifat-sifat yang berkaitan dengan penampilan (performance) dalam bentuk desain, atau bisa menciptakan kesan (impression) tertentu; seperti sifat formal, mahal, murah dan seterusnya.
Sedangkan penggunaan grid pada cabang ilmu lain hampir serupa fungsinya hanya istilahnya yang berbeda, seperti pada ilmu geologi istilah grid disebut grafik sesmograf (seismography) yaitu diagram dalam bentuk grafik untuk mengukur getaran gempa yang terekam. Pada ilmu ekonomi grid dipakai sebagai informasi data yang menunjukan jumlah angka tentang pertumbuhan sesuatu permasalahan yang berkaitan dengan aspek ekonomi, misalnya; neraca grafik pertumbuhan atau diagram yang menunjukan tentang indek.
Dalam grid posisi garis horizontal disebut juga sumbu X, posisi vertikal disebut dengan Y, sedangkan dalam ruang kedalaman terdapat sumbu Z, hal tersebut banyak dijumpai pada susunan gambar 3D, tiga dimensi atau gambar perspektif.
Mengapa Perlu Grid
Mengatur ikatan visual saling ketergantungan, adanya kelompok dari setiap elemen visual yang membentuk satu kesatuan; cara mengelompokkan, simbolisasi, atau skematisasi; aturan penyusunan.
Banyak cara untuk mendekati masalah desain, banyak metode yang terbaik. Namun setidaknya perancang grafis dapat mempertimbangkan grid dalam bekerja dan akrab dengan pengetahuan tentang cara kerjanya. Grid tidak dapat memecahkan semua masalah visual tapi sering mengarahkan pada pendekatan rasional, susunan objektif.
Data dari gestalt mengungkapkan bahwa manusia cenderung memilih informasi visual dan verbal dengan cara-cara yang teratur, susunan visual yang terorganisasi.
Sistem grid memungkinkan desainer dapat memuaskan sasaran dengan cara keseimbangan (equilibrium), kemiripan/kesamaan (similarity) dan kesinambungan (continuation). Grid membantu para desainer terhindar dari kehancuran (ambiquity).
Sistem grid berharga untuk membangun “kemiripan keluarga” kedalam suatu seri visual. Perusahaan yang mengeluarkan ratusan bahkan ribuan produk yang berlainan harus memiliki metode unifikasi dari catalog dan mempromosikannya lewat brosur, kertas sales, dan iklan. IBM dan Westinghouse, dengan arahan Paul Rond, telah lama menggunakan system grid untuk menampilkan keteraturan dalam ribuan barang cetak yang dibuat setiap tahun. Desainer Swiss dan Jerman dengan akar DeStijl/Bauhaus adalah eksponen desain grid. Orang jepang dengan system bangunan modular tikar tatami, telah lama peka terhadap grid. Kebanyakan surat kabar di seluruh dunia menggunakan system grid untuk mempercepat tata letak dan memberikan penampilan yang konsisten.
[ dari berbagai sumber, diperbaharui dan bersambung ]
---------------------------------
Designing With Grid-Based Approach
Published on April 14th, 2007 in Developer's Toolbox.
Tags: | CSS, Design, Development, Grid, Showcase, Techniques | 90 comments.
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
And this is what this article is all about. Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good, we’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found - with precise descriptions of what the articles are about.
Examples of Grid-based design
But first few examples of grid-based designs to make clear what the article is about.
Things You Probably Don’t Know About Grid-based Design
“The grid is the most vivid manifestation of the will to order in graphic design. […] Units are the basic buildung block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.”
[ Grids are good ]
“A grid is a consistent system for placing objects. It works on two levels: At the unit level of cells (e.g. 20×20 pixels) and at the column level (e.g. 4 columns).”
[ Grid-based Layout ].
“A balanced and consistently implemented design scheme will increase readers’ confidence in your site. […] Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages. [..] To start, gather representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page. […] Your goal is to establish a consistent, logical screen layout, one that allows you to “plug in” text and graphics without having to stop and rethink your basic design approach on each new page.”
[ Web Style Guide ]
“One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. […] So the focus is usually on the horizontal layout, which usually means columns.”
[ Dave Shea ]
“On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. [..] The basic unit of vertical space is line height.”
[ Richard Rutter ]
“In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.”
[ Richard Rutter ]
“Designing Grid Systems in Graphic Design, 1. figure out the page size, 2. divide it into a grid, 3. start designing”.
[ Josef Muller-Brockmann’s “Grid Systems in Graphic Design” ]
“Use the canonical grid to adjust the sizes and positions of elements across rows. Short elements are extended to begin and end on grid boundaries, while long elements are allowed to span multiple grid units or are shortened to fit within the standard unit. In this way, the grid is merely being used to help establish consistent alignment relationships. […] For dynamic layouts, identifying the minimum size that can be accomodated by the layout is usually a better solution than trying to recompute the layout for arbitrarily small display sizes.”
[ Module and Program ]
“One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles.”
[ Mark Boulton ]
“The Golden Section, Golden Ratio, and the grandiose Divine Proportion are all names for the same thing; a ratio of 1.618. Nodding off? Not yet? Good! Bear with me. Here?s the maths: the Golden Ratio is the ratio between two segments so that the ratio between point ac/bc is 1.618.”
[ Mark Boulton ]. You can also use Phiculator for your grids.
“The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right.”
[ Mark Boulton ]
“Grid Structures: Once you have answered most of the questions regarding the content, format and typography, you should begin sketching out grid structures based on the appropriate page sizes and formats. You should first begin by defining the Type Area. The Type Area is the area where your grid will be contained. It is surrounded on all sides by margins and in some cases running heads and page footers, numbers, marginalia, etc.”
[ Typographic Grids ]
“The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.”
[ Wilson Miner ]
“You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. It’s easy to get 12 out of 18 (just set the line-height to 1.5em), but when you want to adjust the text size but keep the same line-height, the fractions start to get messy”.
[ Wilson Miner ]
“Table layouts are great for grid designs. The markup itself reproduces a specific grid, and the tendency is for us to just fill up the boxes with the images, type, and interface elements that make up our design.”
[ Molly Holzschlag ]
“Ratios are at the core of any well designed grid system. [..] By using the size of the paper as a guide we can divide using that ratio to begin creating the grid. You can see this through diagrams 1 - 6 that we begin by simply layering division upon division to slowly build up the grid.”
[ Mark Boulton ]
“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”
[ Mark Boulton ]
“Gutters are the gaps in between columns. They are there so text, or image, from different columns don’t run into each other. In grid system design sometimes, depending on what theory you read, gutters are seperate to the columns.”
[ Mark Boulton ]
“The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.”
[ Mark Boulton ]
“One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.”
[ Mark Boulton ]
“In your page layout, you’ve probably set margins. These margins often show up as light solid or dashed lines on the screen. These top, bottom, left, and right margins create a box in the middle of your page. Stop there and you have a single unit grid. Further divide the page into uniform parts and you’ve created a multiple unit grid.”
[ Jacci Howard Bear ]
“Grid units are the primary locations on your page where you will place text and images. They determine placement not necessarily size. That is, if you have a graphic image that is larger than your grid unit, it doesn’t mean you can’t use it. ”
[ Jacci Howard Bear ]
“1, 2, and 3 column grids are common. Each can accommodate lots of text, especially long articles. [..] 4 or more columns offer greater flexibility for publications with text, photos, and other graphic elements and a mix of long and short articles. [..] Grids based on an even number of grid columns can suffer from too much symmetry if text and graphics are confined to individual or double grid columns throughout.”
[ Grids - Flexible Options ]
“A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye.”
[ Anne Van Wagener ]
“To add flexibility you can break the grid down into 10 or 12 columns. Half-columns are a good place to anchor mug-shots, refers, and other info.”
[ Anne Van Wagener ]
“You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.”
[ Anne Van Wagener ]
“The grid is the mannequin and the comp is the pattern. [..] Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer’s comp and record measurements for my style sheet.”
[ Michael Angeles ]
“You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.”
[ Michael Angeles ]
“Basic Outline for Grid-based Design: Content, Audience, Illustrations / Photography / Icons, Format, Typography.”
[ Feeling your way around grids ]
No comments:
Post a Comment