Jan 252012
 

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/

 Posted by at 10:12 pm
Dec 142011
 

I chose to redesign the http://www.bicycledoctor.co.uk/

Content:
There was a huge and disorganized amount of information, therefore I optimized the links in the navigation bar. “Bikes 2012″, “Women’s bikes”, “Kid’s bikes”, “Folding bikes”, “Trailer bikes”, “Trailers”, “Christmas gifts”, “Winter sale” and “Buying” are now part of my “Gallery”. The user can see the products and has a button to purchase them. “About us” and “Staff” are now my “About”. Here I reduced the presentation text and include the opening hours. “Where we are” is my “Location” where is available the address and the google maps. “Whats on!” and “Blog” are part of my “News”. “Email us” is my “Contact” where email, telephone, fax and some social networks, such as twitter, facebook and flickr are available. It seemed important for me to include in this section the rss feed, since the website would be under constant update in News and Gallery.
I completely eliminated the option “Links” from the navigation bar as it was a page without interest. I thought more carefully about the elimination of “FAQs” and “Site guide” or include them in “Help”, but considering that the new design is more simple and makes the navigation easier, I came to the conclusion that they were dispensable. If the user has any questions or need any advice, he will want to contact the owners of the store and for that he has the section “Contact”. I also eliminated the search bar because the information is now much more accessible, the CSS and HTML validation and the number of visits since 1998.

Design and development choices:
I wanted a visually appealing and reliable website. The colour scheme used on the original website (yellow, blue and green) is not correct. These are three bright colours that do not work well together. I found a picture for my header, which worked as an inspiration and from it I picked my colour scheme. I took advantage of the large size of the image (height: 1400px) and I did overflow: hidden to resize it according to the size of the browser window.
I know that for this project I was asked to produce a working mock-up of a redesigned homepage and if necessary other internal pages. As I chose to keep the navigation bar fixed, my homepage and internal pages are the same, therefore I needed to add content in all navigation links to show how it would work. I hope there is no problem. To achieve the modal window effect in the “Gallery”, I used a jQuery plugin. I used another jQuery plugin for the smooth scroll effect on the navigation bar and for the selection of div by id. Despite of the homepage and the other pages are the same html, the id from the div is passed to the link in the browser, so it does not create accessibility problems. The biggest challenge was to maintain the navigation bar fixed after scroll the entire picture of my header and not fixed when the scroll was at the top. Hopefully, a few hours ago I could handle it.

SEO analysis:

  • PageRank – 4/10 (www.prchecker.info)
  • Reputation – sites linking in 141 (www.alexa.com)
  • The users who visit the website are more men between 35 and 44 (www.alexa.com)
  • Top 5 keywords search queries – “frame size”, “what size bike frame”, “surly bikes”, “bike frame” and “bicycle shop in Manchester” (www.alexa.com)
  • Title tag is excessively long. It is better practice to use keywords that are related to the content of the page.
  • CSS validation has no errors.
  • HTML validation has 1 error on the homepage, 2 errors on “Kid’s bikes”, 1 error on “Folding bikes”, 1 error on “Trailer bikes”, 2 errors on “Trailers”, 13 errors on “Christmas gifts”, 19 errors on “Winter sale”, 2 errors on “About us”, 10 errors on “Staff”, 3 errors on “Email us” and 72 errors on “Whats on!”.
  • Social media – facebook account.

To improve traffic and profile, improve SEO:

  • Semantic and organized HTML (head, body and footer).
  • Use Google Analytics.
  • All images should have alt tag and file name appropriate. If they contain relevant information, such as my title, should used image replacement.
  • My title tag is <title>Bycicle Doctor | Bicycle Shop and Repair</title> I reduced the size of the title to provide search engine optimization.
  • CSS and HTML validation.
  • Use meta tag description. Mine is <meta name=”description” content=”Selling & repairing all kinds of bicycles in Manchester, United Kingdom”/>
  • Use keywords meta tag. Mine is <meta name=”keywords” content=”bicycles, shop, repair, UK, Manchester” />
  • Social media – facebook, twitter and flickr accounts.
  • Include rss feed on the website. There is only a wordpress blog rss feed (http://websitegrader.com)
  • Keep the website active uploading videos, photos and news. The last update was in August 31, 2011 and none of the posts has retweets (http://websitegrader.com)

Below is my mockup.

 Posted by at 12:09 am
Dec 122010
 

I redesigned a website for Dolls Hospital. My mock-up of the homepage is also available online.

Existing site

The current website looks dull and unprofessional. There is also lack of unity in the way links, images and paragraphs are displayed.
According to Domain Tools, website’s title For All Your Doll Needs! is only 50% relevant to its content. The keywords used are inappropriate, too. Their relevancy was scored with just 44%. When I check them using Google Trends tool, most of them don’t have enough search volume. Website consists of 40 images, of which 28 don’t have alt tag. Page Rank is 2/10 (Website Grader). Alexa doesn’t have any data regarding the traffic.

These results don’t help promoting Dolls Hospital website and achieving good SEO results .

Redesign

I decided to use warmer colours to give the website friendlier look. I think the website is now more consistent when it comes to styles applied to various elements.
I also changed the page title, which now is Dolls Hospital & Collectables | Recollect | Dolls & Toys Restoration. It suits better the purpose of showed business. I reduced the number of keywords and used only those ones which appeared in Google Trends results.
In my opinion adding social media profiles to a website helps promoting business, increases traffic and gets users involved in more areas. Email marketing could also be useful, that’s why I added an option to subscribe to a newsletter.
Websites are more often scanned by search engines and when their content is often updated. A good idea to keep inserting new articles could be running a small blog which would be part of the existing website.

 Posted by at 11:11 pm
Nov 282010
 

First of all I’d like to say I was impressed how everyone put themselves in designing a website for Hill Farm. Each site was different and at the same time each one was really good!

Thank you all for feedback and comments. I will take everything into consideration and make a few changes in a couple of weeks – for now I need a break :)

Here is how my design process went…

INSPIRATIONS

Before I start designing anything, I usually browse websites related to a particular topic.

I found a few articles linking to beautifully designed hotel websites: in Vandelay Design Blog, Webdesigndev Journal and Creative Fan. Obviously some examples repeat in each of them but it’s always useful to look at various galleries.

My favourite hotel websites are: Accommodation Manjimup (clear layout, design associated with villages, nice big images, eye-catching navigation), Trapp Family Lodge (large images, not too much text, everything created on a paper-like background), Jackson Hole Dude Ranch (details related to nature, large and clear top navigation), Visit Snowy Mountains (vivid boxes colours, large buttons).

I also found two websites advertising farms in Cornwall: Hilton Farm Cottages and Bocaddon Holiday Cottages. Both use green colour, horizontal primary navigation and large images.

And when I get stuck having too much information or no ideas in my head, I go for a walk or do something completely different :) Nature and contemporary art help!

LOGO

Creating a logo was a big challenge for me…

The first floral ones didn’t go well with the green background and large main image below. So I decided to use a solid colour instead, still using the same Just Old Fashioned font. Still the effect wasn’t as good as I expected (thanks David for suggesting I should spend more time on my logo).
Finally I realised using too many fonts doesn’t mean the website looks better. That’s why I decided to stick to Verdana as my main font, use Delicious Heavy for the logo and Delicious Italic for the strap line.

Links to nice free fonts available in Smashing Magazine article.

BACKGROUND COLOUR

My background colour is quite vivid. I must say I love playing with colours. That’s why I couldn’t resist styling fonts and background. I do agree the body text is not readable enough, both because of not enough font contrast, and too small line height.
I will look into it in a couple of weeks. Let’s see what can be done to improve readability.

USER FEEDBACK

I’m experiencing some problems with hovered links because not all the styles I applied seem to work… (it also depends on the browser apparently).
Anyway, this is another issue that needs improving.

 Posted by at 4:43 pm
Nov 112010
 

This is the JPG of my first version, the one you saw yesterday.
Yes, I need to change the logo…
I think there too many colours on my website at the moment… Have to rethink it too.
However, I’d like to maintain the vivacity of the website, which I think can be achieved by using bright green colour combinations.

 Posted by at 9:54 pm