The Grid Structure Chivonne Williams, Wannabe Web Designer

“The grid is a regulatory system which pre-empts the basic formal decisions in the design process. It’s preconditions help in the structuring, division and ordering of content.”

Mark Bolton’s ‘Five Simple Steps’

Image from Texas Tech University System

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. Grid-based design can be particularly useful in creating sites that are predictable therefore easily navigated, and visually appealing. Grids are a useful starting point at helping designers to plan where things go, and make it easy for site visitors to use.

An article in Smashing Magazine discussed this further and explained more about how our minds relate to rhythm and pattern. It explains how pattern recognition allows the human brain to store similar or identical impressions (such as primary shapes or colours) in a pattern library and retrieve them for quick analysis of new stimuli. This is the reason why we don’t look at individual letters when reading, but instead recognize whole words at a time (by pulling previous instances of the same pattern from our memory bank). It’s also the reason why we instantly recognize letters themselves such as the alphabet “A,” “B,” “C,” even if the font, size and colour vary the basic shapes are stored in our pattern library in our memory banks.

The article also goes on to explain how the mind also has the opposite effect when pattern or rhythm isn’t followed. Any stimulus that doesn’t match any of your existing pattern records will prompt a new entry in the memory bank, which, in turn, requires more brain processing power. This is where the importance of design structure and grids, whether horizontal or vertical, comes in. This method of thinking and processing I believe proves that Grid systems are indeed a beneficial aid to design and how we process information.

Image from WebDev-il

However many have said grid systems can stifle creativity and cause uncreative boxy looking sites and can over aid creativity by providing a framework that already answers some design questions such as where to place elements or how wide should the measure be? etc. A well-designed grid system will assist in answering a lot of these questions and more and make designing pretty simple. Aesthetics can be measured and more importantly can be constructed. Using a grid allows you to immediately experiment with type areas, shapes and harmonious compositions. You can explore how type and image will work together on the various types of grid layouts using wireframe applications Wireframe, photoshop or any design program and ready designed grid systems or tools such as 960 grid system or yalm.

“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”

Mark Boulton's ‘Five Simple Steps’

The 960 Grid System is an honorable example of a well-designed tool or the systematic approach of designing with usability in mind. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 960 grid can be cut up into many different arrangements of columns (Large areas for content) with gutters (Space between columns). There are two variants: 12 and 16 columns, which can be used separately or in tandem. Firstly 960px is the most versatile grid system that can fit on a 1024px resolution screen. As a web designer its good practice to try and keep the width of a site small so they can fit on 1024px monitor so the majority of users can see the full website on their screens with room for background. Using 960 allows the most combinations of column while being easy to work with.

“…the way the web looks today is nothing like the way it’s going to look tomorrow. And for the most part, I’m sure you’ll agree that’s a very good thing.”

by Molly E. Holzschlag

Following this quote I also found that 1140px - New to the stage of website design is the up and coming 1140px grid system. Now that computers are being made with much larger resolution screens than the old standard 1024px, this has brought up the average computer screen resolution to 1280px. This equates to more room to play with for ecommerce websites. The best part of this 1140px grid system is it can be implemented into a liquid grid. (Liquid grids automatically calculate the width of the screen they are being displayed on and shuffle all of the websites media, text and images to fit perfectly). So the end result is a website that is fully functional, fits and looks perfect regardless of what its being viewed on.

The Golden Section is a ratio rule that has been used in Western art and architecture for more than two thousand years. Since the Renaissance, many artists and architects have proportioned their works to approximate the golden section.The rule is a rule followed by much print media, publishing and graphic design works in order to find the perfect grid structure. The Golden Section is also known as the Golden Mean, Golden Ratio and Divine Proportion. It is a ratio or proportion defined by the number Phi (= 1.618033988749895… ) which is designated by the Greek letter ᵠ (phi) which is an abbreviation for the mean of Phidias (an Ancient Greek sculptor, painter and architect that applied this equation to his work, most notably the Parthenon). The rationale behind it is the belief that this proportion is organic, universal, harmonic and aesthetically pleasing.

The formula for the golden section is a : b = b : (a+b). This means that the smaller of two elements (such as the shorter side of a rectangle) relates to the larger element in the same way that the larger element relates to the two parts combined. In short, side a is to side b as side b is to the sum of both sides. Expressed numerically, the ratio for the golden section is 1 : 1.618.

Examples of the Golden Section can be seen everywhere. A cross section of the Great Pyramid, gives us a right triangle, “The Egyptian Triangle”. The ratio of the slant height of the pyramid (hypotenuse of the triangle) to the distance from ground center (half the base dimension) is 1.61804… which differs from phi by only one unit in the fifth decimal place. Round this up to be 2 units, then the sides of the right triangle are in the proportion 1:sqrt(phi):phi and the pyramid has a height of sqrt(phi).

Entire books have been written on the subject of the Golden Section and some graphic designers obsess over its rulings to create the perfect layouts for their works. Other designers believe that the golden section is no more valid as a basis for deriving sizes and proportions than other methods. Relational measurements are what define most systems, from simple leaflet design to the complex of newspaper grids. Such as beginning from standard industrial paper sizes, or dividing surfaces into halves or squares, or simply picking whole-number page formats and making logical divisions within them. Article from Thinking with type. looks more into the Golden Section and typography.

This article by Smashing Magazine “Applying Divine Proportion To Your Web Designs” explains what is the Divine proportion (Golden Section) and what is the Rule of Thirds (another layout ⁄ grid formula which is simply to divide the horizontal and vertical measures of your page into 3 sections - like the 0's and crosses grid using this as a grid structure) and describes how you can apply both of them effectively to web design.

• 1. First, calculate the width of your #content-block. You need to make sure that the ratio between this block and the overall layout width is 1.62. Hence you divide 960px by 1.62 which results in approximately 593px.
• 2. Subtract 593px from the overall layout width (which is 960px) and get 960px − 593px = 367px.
• 3. Now if you calculate the ratio between the #content-block and the #sidebar-block (593px : 367px ≈ 1.615) and the ratio between the container-width and the width of the content-block (960px : 593px ≈ 1.618) you have achieved almost the same ratio. This is the whole idea behind the “Golden” proportion. The same holds for fluid and elastic layouts, too.

• Phiculator is a simple tool which, given any number, will calculate the corresponding number according to the golden ratio. The free tool is available for both Win and Mac.
• Golden Section Ratio Design Tool Atrise is a program, which allows avoiding the routine operations, calculator compilations, planning of grouping and forms. You can see and change the harmonious forms and sizes, while being directly in the process of working on your project.
• There are various different frameworks and layout tools you can use to aid your design, this is an article I came across that I found really useful 15 responsive frame works to consider.

The baseline grid is another type of structure technique used to better your web-based typography. Essentially, it aligns all your text to a vertical grid where the bottom of each letter is positioned onto the grid, just like writing on lined paper.

In order to utilize this technique in web design you would need to define a line-height for the baseline grid based on a ratio reflective of your font size. Example, 1:1.5 is a nice amount that offers us a generous 50% leading (graphics term, kerning being a web design term). If we had a text size of 16px, the line height (using this 1:1.5 ratio) would be 24px or 150%, easily readable.

The baseline grid is a great way of adding some balance and proportion to typography. It’s a subtle implementation that can add some natural feeling and rhythm into your designs. Typography becomes consistent with standardized spacing giving it that harmonious feel. Baseline grids are, ultimately, most useful in print. Print is a fixed medium where rhythm can have a powerful effect. The baseline grid is a great tool to give simple structure to your designs but is not to be relied upon or have too much time spent on creating precision in its pixels as Jason Santa Maria express’ in one of his blogs:

“It’s incredibly difficult to maintain a baseline grid in a medium as inconsistent and fluid as a web page. Images, form elements, rendering differences between browsers and platforms: these can all throw a baseline grid out of phase.”

From reading more into both the Golden Section and the way our minds relay data I have come to the understanding that a consistent and predictable structure will, naturally, aid the legibility and user interpretation of a design. As many of the designers in industry state establishing a simple baseline grid and structured page layout will aid in allowing your site to be user friendly and accessible. Using a standard where, for example, headers always have two baselines of white space below them, and the padding of every box always equals three baselines, adds logic to our layouts and makes them easier not only to design, but also to build and, most importantly, digest. Baseline Grids, the good the bad and the ugly.

Hierarchy in web design helps the user understand where they’ve been and where they want to go and, thus, helps to communicate the purpose of the website. Proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship. Naturally objects that are bigger demand more attention. Visually using size as a hierarchal tool is an effective way of guiding a viewer’s eye to a particular portion of a page on a web site and even print media. Size is one of the most powerful forms of organization, it’s important to associate size with importance in the design world.

The biggest elements should be the most important in most cases i.e. Brand name, title, headings, call to action; the smallest elements should be the least important i.e. footer notes, slogans, dates. Colour also has a strong hierarchal effect on design, bold, contrasting colors on a particular element of a website will demand attention such as with buttons for navigation or call to action, error messages or hyperlinks. Colour can affect everything from a websites brand i.e. Coca Cola Red, to symbolism i.e. cool, subdued colors to create a mood or follow a style on a brands webpage.

Alignment creates order between elements. It can be as simple as the difference between a content column and a sidebar column. Style can be used as a form of hierarchy that both embraces and exceeds the other tools. For instance: a flat grey background will feel different than dark grey textured background. This style or personality given by the designer will naturally play a role in how different visual relationships are made. This same idea extends to typefaces, buttons, tabs, and other elements. As designers we need to consider the impact on an overall design when we choose to add extra style and polish to an element.

White space can affect the user’s behavior as much, if not more, than the actual content on the page. White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.

“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”

Web Design Tuts

If you offer users layout clarity, this becomes a part of your brand. As people, we’ve always had a keen sense for visual organization. This is especially the case on the web where studies have proven that regular web surfers have learned to “scan” content intrinsically; automatically seeking information that is relevant to their interests and disregarding information that isn’t.

As the typical web-surfing platforms expand from the traditional computer monitors to phones, tablets, even televisions, it’s becoming ever more important that we use strong, clear visual systems to communicate with web surfers. In order to keep users on our sites we need to create the best legible, user friendly structure, with accessible content and guidance via hierarchy. Things to consider being, Proximity, Size, Colour, Style, Alignment, white space. A good article that discusses this is Web Designer Depot

What is a Brand? It is the emotional and psychological relationship you have with your customers. Strong brands elicit opinions, emotions, and sometimes physiological responses from customers. Logos are not brands, they are merely representations of brands.

To build a successful brand you need to make it memorable. What do you do to make people remember things? You repeat them. Consistency throughout your web design will build on the choices you’ve made earlier regarding selecting the right personality for the brand and evoking the appropriate emotions. Keep consistent colours, visuals and typography throughout to ensure your website projects a uniform image. Website design in its own way helps build your online reputation. A clean and uncluttered design is the mark of a company that knows what it’s doing and what it wants to say.

“A website’s design helps build the character of a website and in doing so, also builds the brand, its personality, marketability and its efficiency.”

The Search Engine People

Web design doesn’t just have an impact on your online brand but your brand as a whole. Essentially, the design of a website seeks to play an important role in ensuring that the target audience looks favorably at the business or individual. A logo that is a perfect visual representation of the company’s purpose, mission, and values has an impact on the website’s design. The use of images the human mind can instantly recollect in website design, helps website visitors recall the website and in doing so recollect the brand.

Therefore a combination of both grid structure techniques, hierarchy and styling forms an easy to use well structured layout which is user friendly, easy to navigate and legible in the design process, combined with building a evoking, memorable brand are the perfect combination to building a credible website.