Introduction
To define design is not an easy task. Design is everywhere and everything is design. It resulted in the current map of the London Underground which is used every day. It identifies which are the ladies’ and men’s restrooms through symbols disseminated worldwide. Design makes websites easier and more pleasant to navigate. During the Design Council National Survey, (2002) Design in Business Week, Richard Seymour proposed that design is “making things better for people”. Whether the result is a graph, a building or a service, design always provides a solution for a problem that adds value to people’s lives and makes everything more accessible, safer and intuitive. Design is constantly evolving and what sets the pace are the needs and development of human knowledge. A good design creates a pleasant user experience. However, a good design is not simply about the appearance. Aesthetics are important but an implicit order in the structure is essential. In web design, there are many websites aesthetically appealing where it is difficult to define what is the sphere of action of the company. There is a flaw in how the message is transmitted and how the content is displayed to the consumer. Grids are one of the most powerful methods for creating order that have been used in a variety of design fields, from typography in graphic design to modern buildings in architecture. Vinh (2011) writes “the most successful designs can be reduced to an essential intention: to create order out of disorder”. When there is more than one element, there must be order. It was in the early part of the twentieth century that grid thinking historically evolved. Designers, artists and thinkers began to implement grids in practical discourse and communication changed the way of perceiving and understanding design.
This critical essay discusses the concept of grids and covers the steps of how to build a grid-solution. It intends to deal with how a grid-based design is applied into the web design context through a careful analysis of several websites and how it helps to create an intuitive user interface.
Advantages and a brief history
The grid system is originally from Switzerland and Germany. In the field of graphic design, the many benefits of using designs based on grids quickly became apparent. More recently, this theme became part of digital media, user interfaces and the vocabulary and practices of web designers. A screen is composed of seventy-two pixels per inch, arranged vertically and horizontally such as a sheet of graph paper (a grid). It makes perfect sense that the grid system has reached the digital world. Whether in print or on the web, grids facilitate the appearance of an orderly creativity and help web designers put things where users easily find them. Khoi Vinh (2011) made a list of the points in support of grid-based design in graphic and web design that is worth mentioning. In graphic design:
- Grids add order, continuity, and harmony to the presentation of information.
- Grids allow an audience to predict where to find information, which aids in the communication of that information.
- Grids make it easier to add new content in a manner consistent with the overall vision of the original presentation.
- Grids facilitate collaboration on the design of a single solution without compromising the overall vision of that solution.
It is clear that it is possible and makes sense to apply the same benefits to web design:
- Grids add order, continuity, and harmony to the presentation of information on frequently high-density webpages.
- Grids help users predict where to find information from page to page or from behavioral state to behavioral state, which aids in the communication of that information.
- Grids make it easier to add new content to a website in a manner consistent with the overall vision of the original website.
- Grids facilitate collaboration on the design of a single website without compromising the overall vision of that website.
Grids are a visual ordering system and designers, who have a predisposition to order, feel that the grid system is a natural fit based on mathematical harmony found in nature. This is due to some architects, printers, typographers and designers who reinvented arts taking into account the presence in nature and mathematical formulas. When web designers are browsing a website, they are actually doing much more than just viewing a webpage, even if unconsciously. Designers have the ability to seek a different kind of order that less visually-trained people might. Certain questions are presented: “Do things align? Do they conform to similar shapes, scales, or patterns? Do they employ similar visual formatting? Are they sorted by some kind of schema? Is there consistency even among things not immediately visible?” (Vinh, 2011, page 14).
Since the Renaissance, the golden ratio has attracted the attention of many experts from various fields – biologists, artists, architects, mathematicians, musicians, historians, psychologists, and even mystics. It has worked as a source of inspiration since its proportions are considered aesthetically pleasing. The golden ratio is intimately connected to another mathematical concept, the Fibonacci sequence. This expresses a logarithmic spiral (Figure 1) where a harmonious and logical grid is immediately identified by designers. This grid has been used for centuries. The golden ratio, often called the golden section, is one of the most mysterious numbers that exist in nature and it is considered the key to the secret of beauty of the known world (Figure 2). Due to its interesting properties, it has been used in the analysis of financial markets, in web design (Figure 3), in the construction of buildings (Figure 4) and even in the composition of the world’s most admired paintings (Figure 5).
Figure 1. The Fibonacci spiral.
Figure 2. Romanesco broccoli or Roman cauliflower. The number of spirals on the head of Romanesco broccoli is a Fibonacci sequence. It is an example of the Fibonacci numbers in nature.
Figure 3. Twitter. The design is based on the Fibonacci numbers.
Figure 4. The Parthenon. Also in Greek architecture the Fibonacci sequence is visible.
Figure 5. Mona Lisa. It was painted by Leonardo da Vinci in 1503 and is based on the Fibonacci spiral.
Another grid very similar to the Fibonacci spiral is the √2 rectangle. It is easily identified in international standards for paper sizes (Figure 6) known and adopted worldwide. When a rectangle is divided in half, the same ratio of width-to-height as the original √2 rectangle is maintained.
Figure 6. The ISO 216 paper standard. It is based in the √2 rectangle.
Less scientific and despite being called the rule of thirds, in fact this is not a rule but an aid to composition. Earlier in the eighteenth century, this technique was used by painters, draftsmen, photographers, and graphic designers as a reference for the creation of balanced and harmonious compositions, facilitating the reading of the image. It is applied by dividing any image into nine squares drawing two imaginary horizontal and two vertical lines. The intersection of these four lines gives rise to four focal points that are important in the image (Figure 7). The human eye is naturally attracted to these points. Fitting the main objects of the composition in these points or using the lines as basis, it is possible to create balanced and attractive results. However, employing the opposite, one can create tension and stress.
Figure 7. The rule of thirds and its focal points.
All of these techniques have contributed to a tradition of simplicity and minimalism strongly supported by Bauhaus’ ideals. Grids have become the centre of design decisions, geometric shapes and mathematics have become increasingly evident in life and the need to create a sense of order supported by the notion of a grid-based design has become a priority.
Although a webpage has the same elements as a printed one (titles, subtitles, paragraphs), the limits of this strict approach applied to graphic design and deployed on the web become obvious. The type of system where the content of a given web page is being viewed (computer, smartphone, tablet), the resolution of the chosen system screen and the web browser that is used can change the way the user has access to information. Also the typography can appear with another font and bigger or smaller from one person to another.
The role of web designers is to take into account those various behaviors that the grid system can take and develop solutions adaptable to different users.
Steps for building a grid
According to Khoi Vinh (2011), there are some principles that no designer should forget when following the steps of building a grid-solution.
“A grid should focus on problem solving first and aesthetics second (page 35).”
A designer should keep in mind that firstly a grid should be built with focus on its utility. The content and the functionality should fit comfortably and be adapted on the page. Secondly, the designer must be concerned with the aesthetic part of the grid. A well-designed and thought out grid provides appropriate solutions to challenges and beauty at the same time.
“A grid is a component of the user experience (ibid).”
A grid is a tool to provide a good user experience. The user should be able to control what is happening and it should not be the interface which imposes control over the user. However, designers have the duty to not allow all the interaction design to occur within the grid nor that the user experience is unpredictable. With the aid of the grid focus on the interface, designers should help the user to make certain decisions which will lead him or her to accomplish certain objectives.
“The simpler the grid, the more effective it is (ibid).”
Some might think that a simple grid does not fulfil its functions. This is wrong. Designers should always aspire to build a grid as simple as possible and which meets all the requirements of interaction. This is the challenge. The mathematical formula used in the construction of the grid (combine units and columns) should be easy to remember and quick to explain to another designer. If this happens, it is likely that more users will benefit from that grid system.
The process of working on a solution to a grid should not be an intuitive task and designers have to follow steps that meet widespread research, draw wireframes, prototype designs, receive feedback and coding.
1. Research
Beauty, innovation and efficiency are highly appreciated qualities in a design. Yet for this to be considered an excellent design, it is essential that it responds well to the original problem. First of all, the designer needs to do research to respond appropriately to some questions: who is the audience for whom the solution is being directed, when will the solution be encountered, what is the context, how will the solution be used, and why is the solution necessary. After identifying all the issues, the designer must have good and accurate answers to all questions that may arise about the solution and understand them all. For this reason and to avoid being near the end of the process and having to return to the previous steps because something did not go as expected, it is safer to use the search time at the beginning of the project instead of going directly to the design.
The more research is done, the more likely it will be to achieve the appropriate grid. It may even happen that with research, the designer achieves a grid structure which he did not remembered previously. On the other hand, research also avoids the creation of inappropriate grid systems. Some examples are bad combination of units and columns, grids that seem to work but at the wrong moment need to be redesigned and grids that are suitable for some aspects but inappropriate for others.
There are several constraints that may influence the decision of the designer in determining the size of units and columns, the regions to be created and the proportions of a grid. Already in itself, one might think that a grid system restricts the designer’s creativity, then adding these restrictions, the scenario cannot be more limited. However, these restrictions may in fact help to increase the designer’s inventiveness. The constraints are divided into four main categories:
- Technical
Technical constraints have to do with the way the design solution will be displayed. The designer should be aware of the type of system where the website is being viewed (computer, smartphone, tablet), the resolution of the chosen system screen and the web browser that is used. The design cannot compromise the way the content will be shown in different situations.
- Business
This part is dedicated to the purpose of the solution. It is necessary to define what is the final goal of the website (whether it is to increase site traffic, visits and time spent, if it is to sell a product or to earn money by the number of clicks on advertising and text-links) because the design will depend on it.
- Delight
In terms of delight, more visual criteria but fundamental for business objectives to be achieved, the designer should consider page layout (which visual message will the website transmit, how the layout gives credibility), branding (crucial to marketing, what structure is used to enhance brand image and identity), visual hierarchy (which areas of the website attract wide attention from the user and what kind of content is in those areas), typography, positioning (spacing and size) and graphics. It will be necessary to establish whether in the future the solution will require development and maintenance. If the answer is affirmative, it will take funding or skills from the client to do so.
- Content
The last part has to do with the production of the content. The designer has to define the disposition of design elements (how grids are used to present content, how the visual balance affects understanding and interpretation), the user guidance (what is the effect of the layout on usability, legibility, accessibility of the content) and in which form the content will be available (text, images, video, charts, or data tables).
2. Wireframes
3. Prototype design
- Pencil sketches
- Units, columns, baseline development and calculations
- Page sketches
Sketching is not necessarily an activity in which one can point out a beginning and an end. It is recommended in the early stages of the process because it is possible that more creative ideas for grid solutions emerge and the designer can easily dispose of the bad ones without wasting much time . But sketches can happen and must be present throughout the entire project. Using paper is essential for problem solving and it is helpful in developing a grid system. 4. Feedback In this state, the designer presents a design comp. This is an image of how the website will look when it is finished. It needs to go through a conversion process. Then feedback is given. The new task of the designer is to listen and to redesign the website taking into account all observations. As a result of external reviews, different design ideas can arise.
5. Production (code)
Analysis
The theoretical concepts discussed previously will be now put into practice. This section is dedicated to examining the grid system design used in biodiversity websites. At the start of this process, every designer should know what are the limitations of the project, even before thinking about the grid or choosing typefaces and colours.
The calculations of pixels that appear below are adapted to a grid system with 960 pixels wide.
The first analysis will focus the Tree of Life website, http://tolweb.org/ which is a collaborative effort of biologists and nature enthusiasts with strong scientific knowledge as background. In this case, it was used a sixteen columns grid solution where each column has sixty pixels (Figure 8). On the website there are three identifiable columns. The first is the narrowest, it uses only three columns of the grid system. The largest occupies the central part of the website and uses nine columns. The last one extends for four columns.
Figure 8. Sixteen columns grid-design.
BBC’s website, http://www.bbc.co.uk/nature/uk/ design is extremely professional and organized since it contains a lot of information, mostly news from all over the planet. Here, the designers opted for a six columns grid-system (Figure 9). The layout is composed by three columns. Each of them uses two columns of the grid (each with 160 pixels). Every set has the same order, the left column is intended for graphics and the right column supports text.
Figure 9. Six columns grid-system split in pairs.
The City of Sydney (http://www.cityofsydney.nsw.gov.au/) is focused on urban ecology and mainly explores urban ecology strategic action plans. This website uses the same grid system as BBC. However, the way how the six columns are combined varies. Contrary to what happened on BBC’s case, in this one only two columns are part in the layout (Figure 10). The first one, on the left hand side, represents a sub menu and therefore only uses two columns from the grid system (each with 160 pixels) and the other has the remaining four.
Figure 10. Six columns grid-system combined two-four.
Conclusion
Although grid systems are part of ancient knowledge, only recently they have been applied in digital media. It is interesting to see how content that we produce (as designers) and consume (as users) has been affected by design and technology. With technical innovations, users will demand more and the interaction within platforms will change.
When I started to investigate grid systems, quickly I realized that this subject is much deeper than what it seems at first. This study approached some topics but there are many others which deserve to be explored. In 2009, Ellen Lupton said: “To say a grid is limiting is to say that language is limiting, or typography is limiting.” and I think she was right.
Resources
Vinh, K. (2011). Ordering Disorder, Grid Principles for Web Design. USA: New Riders
Design Council, www0.hku.hk/bse/interdisciplinary/what_is_design.pdf
Drawar, http://journal.drawar.com/d/what-is-design/
Engine Industries, http://engineindustries.com/services/web-design-process-comps-conversion
960 Grid System, http://960.gs/
Design Festival, http://z6.co.uk/1dv
Design Festival, http://designfestival.com/grid-theory/