Content Management

eCommerce: Conversion Rate

What is Conversion Rate?

Conversion Rate is the percentage of total website visitors that complete desired actions. (i.e. making an online purchase, signing up for a service, submitting form for a newsletter, etc.)

Why Conversion Rate is important?

Conversion rate is one of the most important metrics, a measurement of a website’s efficiency.
It tells you how many people are actually doing what you want them to do.

How to calculate conversion rate?

Example:

If a website generated £100,000 of sales through 2,000 orders in a month with 40,000 visits.

The conversion rate will be 5%

Factors that influence conversion rate?

Accessibility and usability
– make the site easy to use
– don’t only pay attention to IE
– use proper colour, high quality images
– make ‘calls to action’ buttons clear and unambiguous
– provide information of product and service with accurate written language
Be clear and upfront on pricing, delivery time/cost – give customers the information at the first stage of shopping process
Trust and credibility – display contact information (esp. for expensive and/or technical product site), add a trust seal to website (i.e. BBB, Truste, VeriSign, McAfee)
Requiring information
– don’t asking for too much information
– allow user to purchase as a guest
Site speed – faster loading webpage can increase conversion and also have a high impact on long-term sales
Payment method – offer different payment types, be able to accept all major credit cards, online checks, etc.
Purchasing process – keep it short and simple. The order process should be simple enough that the average order takes less than two minutes.
Promotion and marketing plan – offer some free trials, coupons, discount pricing, etc.
Customer service option – provide the best way to contact if customers have a technical problems, sales question or they want to return an item. Display FAQs that covers common questions customers might have.

Example of site that has high conversion rate








Example of website that has poor conversion rate




Applied Art for Web

Grids in Web Design

Introduction

Grids are one of the most important part that should be considered when designing a website apart from other elements such as colour, typography, graphic or images, etc. This essay will discuss about how are grids used in we design and what are the benefits of using them.
In the first part, I will be talking about brief principle of grids, type of grids, etc. The second part, will be some analysis in using grids of example of websites. For this part, I have chosen to focus on analyzing minimal grid-based websites to start with.

What are grids and why we use them?

There are many things around us are designed by using grid system, including architecture, city/town plan, exterior/interior design, prints (books, magazines, newspaper) and also websites which have become more popular these days.

In terms of web design, grids are a set of vertical and/or horizontal guideline that cross each other to provide a framework for organizing contents and design elements. This grid system is an essential tool for web/graphic designers built to facilitate them to create page layout, giving them a logical pattern/framework for ordering or structuring. Grid system not only provides a rational framework for designers, but also streamlines the design process by making it more easier to align and measure all of elements on the web.

Moreover, using grid reduces the time consuming on developing. For example, if your website has lots of text information in each page, you don’t have to re-design every time that you want to edit pages because you have invisible guideline underneath. Another important thing apart from time consuming on design is grid system adds hierarchy, harmony to the presentation of information. It gives users an aesthetic visual pleasing when using the site. Not just in website, many publications such as magazine, newspapers, etc. also require grids. It provides page-to-page continuity.

When people come to website, they always prefer an organized information of visual elements including columns of text, images, illustration and so on. Using grid allows designers to create the consistency in their design as well. Many websites contain loads of information and many pages. To use grid gives designers to concern about column width, or the position of each element. People always expect that when they are on the website, they prefer to feel the harmonious not just the look of it. Therefore when they change pages, the same column width, which is organized by grids, can create page-to-page consistency to the site. Moreover, grids can unify the dissimilar elements in the design. In website, there are lots of different shape of elements including square, triangle, circle, etc. Grid is a guide to put the variety of elements onto design.

“The grid makes it possible to bring all the elements of design — type characters, photography, drawing and colour — into a formal relationship to each other; that is to say, the grid system is a means to introducing order into a design. A deliberately composed design has a clearer, more neatly arranged and more successful effect than an advertisement put together at random.”
Josef Müller Brockmann
(The Graphic Artist and His Design Problems)

Type of Grid

Originally, grid system found in print design (e.g. newspaper, magazines). There are many design program provides this kind of tool for designers to be an aid in creating a basic web structure when starting to design something. For example, Photoshop, Illustrator, Indesign, etc. where you can create your own grids. You can divide the blank space by yourself so it can be as simple or as complex as you want.

In terms of web design, there are many variation of grids used in grid-based websites. Most web design projects are based on 4 main types of grid.

1) Manuscript Grid

This is the simplest kind of grid, containing a dingle column, usually used for a long text document such as novels. This type of grid shows a very clean style, simple structure to the page layout.

Layout structure and web example of manuscript grid


2) Column Grid

Column grid contains numbers of columns for placing text and images. Columns can be dependent on each other, independent on from each other and crossed over by design element. The width of each column should relate to the side of the text and other design elements in the column to accommodate a comfortable measure of legibility and readability.

Layout structure and web example of column grid



3) Modular Grid

Modular grid is similar to column grid with more complicated structure by adding horizontal divisions. This type of grid allows designers to present more complex information with better precision. Modular grid can be formed by horizontal and vertical units as much as you want for organizing loads of information. Websites that are using modular grid system, most of them are gallery websites, such as portfolio websites, online shop websites that show lots of products. In my opinion, grid quite suit this kind of website in order to showcase images efficiently.

Layout structure and web example of modular grid


4) Hierarchy Grid

Hierarchy grid is commonly found on many websites. It allows designers to organize contents on the web by considering on importance of each design element. Generally, it is used when other types of grid doesn’t fit the design. Hierarchy grid offers variety of ways to create a rational structure which may affect user on interpretation.

Layout structure and web example of hierarchy grid


How to design grids for web?

There are many ways to design website that based on grid system. You can starting create your own layout by sketching on grid paper, or using tools on design program such as Photoshop, Illustrator, Fireworks, or using web standards which is becoming more popular on web media.

One of the most useful website that provides tool for building grid system is the 960 grid system. The site offers 12, 16-column grid framework to download for free. Both of them have the same width at 960-pixel which seems to be a standard number for the size of screen resolution of 1024 x 768 or higher. Moreover, a 960-pixel total width is a good starting point, because it provides a massive amount of scope for divisions (960 is divisible by 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 and 480).

There are many various websites that are created by using grid system to make a perfect proportion and rhythm between design elements on the web. Grids are used to form the page layout and to structure the content rationally. The good website has to contain both of well functionality and aesthetic. Using grids can be helpful for web designer/developer to be more logical when ordering each element.
Here are some examples of grid-based websites.

How are grids used in web design?

There are many various websites that are created by using grid system to make a perfect proportion and rhythm between design elements on the web. Grids are used to form the page layout and to structure the content rationally. The good webbsite has to contain both of well functionality and aesthetic. Using grids can be helpful for web designer/developerto be more logical when odering each element.

Here are some examples of grid-based websites.

Puccuo

Poccuo is a design studio based in Washington D.C. The structure of the website is built with 900 px wide which is considered to be reasonable enough for every size of screen resolution In general, this design studio website conveys clean and well-structured design.

From the top of the page is the logo and the main navigation bar which is divided into 6 columns and give a little bit wider column width on logo area to emphasise the brand. To place the logo on the top-left of the page is not only the usual way for the logo, but also it is the natural way for people that always start reading from the left hand side. The quote in the centre of the page is large enough to catch the attention. The quote briefly describe about the business, origin of the project, latest news and updates. The website creates a great visual hierarchy by ordering each items into separated column. This influences user to understand the goal of the website or the goal of their business and also gives a smooth and satisfying experience when using the site.

Another good thing in this website is, in each column contains a selected image from the project and some short description about that project which I think it is really good to keep the description short and simple because this makes the whole site lighter and cleaner and it also makes the images look more interesting as well. Grid helps designer to align the images and text in both header and paragraph, using the same leading and same margin make the site to be in order but I can feel the freedom comes from white space in the same time.

Helen and Hard


Helen and Hard is an architecture studio in Norway.The aim of the website is to showcase their design projects, introduce the team and presents their design strategy. This is a good example of hierarchy grid website which shows the great way to organize contents based on grid. I will start from the logo on the top of the site, HELEN & HARD is created with a very simple style of medium-sized font, however it works very well on that position. Every time I open this site, the logo still comes out first. Under the logo we will see 940 px wide navigation bar and slide shows of images of selected project. Below the slide show, there are 4 column of text box that contain short story of the company ans news/events. In terms of structure management, I considered that using 4-column grid on 940 px width with 35 px on each gutter is very suitable for this website. I can read text on every text box continuously and pleasantly. Also, on the project page, all projects are presented in 3 columns and 10+ rows, each image is set into the same size and is positioned on the same gird line. When clicking on any image, there will be a long version of description of the project. But the layout they created shows the user that where should be a starting point and where to read through by using the different fonts, font-size, margin for header and body text.

In overall design, using grid to divide column conveys a very well structured content hierarchy. I t help designers to divide blank space for images and text and it creates symmetrical balance on the site.

Kind Company

Kind Company is a web, print design company in Brooklyn, New York since 2004. This design studio website is obviously designed on grid-based system. There are four main columns used in homepage with 20-pixel gutter between each column. From the top of the page is a place for logo and strap-line, which briefly tells us about what company does. Although, the logo of the company is using a very simple typeface (Helvetica), it works very well on that space. The name of the company is in black positioned among gray-coloured strap-line. What makes the logo more outstanding is the use of macro white space on the right hand side. Below the logo or header, we will see the main navigation bar “Project Index” and “Office Bulletin”. It can be noticed that the first button is aligned to the edge of the first left column, so does the contact email “hello@kindcompany.com” that is aligned to the edge of the third column from the left as well.

When we scroll down, we will see that the page layout is divided into two columns to place some text that describe more about company and what they do. These texts are aligned to the edge of column above. This dividing proportion creates a symmetric balance on the website. The use of micro white space in each paragraph gives text to breath. Also, each text body is positioned on the same baseline grid, which has the same margins. It creates a sense of credibility in the way that all information is organized on purpose. The use of dotted-horizontal lines is used to divide horizontal space. I think it gives a hierarchy in terms of readability; we can read and navigate information each column and row easily.

Also, every bottom margin contains the same height. It creates a feel of elegant along with the nice and simple layout. In office bulletin page, it is divided into two columns with the same width in each column as the homepage. It gives a sense of continuity and unity of the website. Although, each page contains the same width of column, it is not boring. On the other hand, doing as such, makes the website clean and make it easy to the eyes and make it easy to use and absorb all of information. Moreover, all links have a good reaction when rolling over them. Every gray link will turn red. It makes call to actions to be clearer and more noticeable.

Conclusion

Having a strong foundation in design principle like grid is a good thing that should be concerned. But, to design a website by using grid is not a solution for all people or all designers. When you starting to design a website, do you have to consider that what your website is about? What is your product? Or who is your audience? Some designs or some websites might not need to use grids, but some might need or grid should be used in some types of website. It depends on how you want the website to be or to feel like. There are many benefits of using grids such as grid adds hierarchy to the presentation of information, gives unity and continuity to the website. One of the most important thing is grid gives system to think to organize everything, every element on the website.

Grid is a smart tool to help designer design a good website. To understand about grid system and to know how it should be used or be applied in the website is a good thing and it benefits in many ways. However, creating a good website is not just about using grids to structure the content or other elements. It needs other web design principle to support everything on the site including many important aspects like usability, accessibility, readability as well.

References

http://designmodo.com/grid-design-theory/
http://inspiredm.com/web-design-trend-hunting-fluid-grid-layout-10-outstanding-examples-1-tutorial/
http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/
http://www.daversion.com/2011/10/960-grid-system-web-layout-design-easier/
http://designinformer.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/
http://www.rockettheme.com/magazine/1257-introduction-to-using-grids-in-web-design
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-preface
http://webdesign.tutsplus.com/articles/workflow/using-the-960-grid-system-as-a-design-framework/
http://www.thinkingwithtype.com/contents/grid/
http://www.alistapart.com/articles/outsidethegrid/
http://www.vanseodesign.com/web-design/headlines-subheadings/
http://webdesignledger.com/tools/13-excellent-tools-and-systems-for-css-grid-based-layouts
http://www.typographicdesign4e.com/grid_modular.html
http://www.designer-daily.com/the-use-of-grids-in-website-design-6639

Web Design Coursework

Examples of websites with poor typography

Mixing fonts and blinking text
http://www.ronoslund.com/

I took almost a minute to read the massive header text at the first time. Large “Ron Oslund’s homepage!” is a gif image created with a bad choice of font and colour. This logo gets my attention away from other contents. I found it hard to focus on other things on the web. Because not only this logo is too bold, but also it keeps blinking all the time which is in some cases, this is an absolutely bad idea. Secondly, the obvious mistake I can notice is, there are too many typefaces and fonts using on the webpage. As far as I can see, they have used 5-6 typefaces on one page. Which is not necessary at all. Plus, each fonts are quite different and appear to have the same weight. It makes the website looks really messy and probably gives someone a big headache.

Tiny fonts
http://www.videosoniclab.com

This website had confused me a lot when I visited. The big mistake, apart from poor organized content, is the size of fonts they use. I have looked through their style sheet and have found that the font-size is only 7pt which is considerably too small for the web. It is not easy to pay attention throughout the article with that tiny size of fonts. Moreover, this site seems to have a problem with hierarchy. They emphsize some texts which are not that important. The priority has been ignored.

Too many uppercase letters
http://wiolawapress.com/

This site is using just one typeface-Time News Roman-which should be commonly used for the header on website. By using just one or two typefaces is not regularly easy as some people have thought. There are some rules always come with it. The most noticeable mistake is, there are lots of uppercase letters have been used on the website. From my experience, I took a long while on this website to read the texts and it made no comfort to my eyes at all. It would be easier if they used just plain sans-serif text for the body.

Web Design Coursework

Three Examples of Good Colour Scheme Website

JWI Louvres


This is a web portfolio for JWI Louvres, an Australian company providing a high quality design and installation service. This is one of my favourite design studio website that has a good choice of using colour. Using black, white and red colours seems to suit with nice and simply layout. I’m also impressed by slight movement of design while navigating the site. It is such a great piece of work.

Kansas City Creep Fest


This is a great example of harmonious-coloured website. These colours match very well to each other, it is the important factor to create unity to the website. Every element supports mood and tone. Also, the way they’ve created the textured-layered-background helps the whole website look softer and more friendly rather than leave it flat.

Polar Gold



This is my another favourite design studio website from Germany. I’m attracted to this website by use of colours, fantastic layout, and a little nice effect when hovering mouse over the main content. I easily got mood and tone of the company right away when visiting this site. They also created a little moon and sun gimmick at the left corner of the page. It gives two options to users to explore the webpage by day or by night.

Web Design Coursework

Three Examples of Poor Colour Scheme Website

http://thesiriusconnection.com


This is a website for people who want to be enlightened about spiritual experience, such as re-incarnation, medication, astrological theory, etc. by a guy named Keith Haswell. There is a picture of him hanging on the top-left area of the page which looks quite creepy for me. Also, there is a big mistake in colour using. I think I understand his aspect that he might want it to be a little spooky by using mysterious purple colour. It’s nothing wrong with that except he also wants to make a big crash among elements by using red, green and yellow for font-colour. That’s the massive matter he should have concerned. Because in term of visuality, it might hurt reader’s eyes easily.

http://freizeitparkherne.de



I’m not sure what this German website is exactly about. It might be an online store for selling playground products. But there are lots of mistakes on it, for example, their choices of using colours are really unprofessional. I think they shouldn’t have put these main colours in the same page, it makes no harmony at all. Plus, if you go to the website through the link above, you’ll see the splash page which is absolutely horrible for their service provided. I’m wondering how many people have purchased children products on this website…

http://raft.org/


This is another poor coloured website that I couldn’t stand it at all, beginning with the design, colours, layout, images etc. It’s absolutely perfect to be a great example of the worst website. It is obviously easy to notice how big mistake they have made. The colours don’t go well to each other, some of them crash. It’s really difficult to read red-coloured text on red-imaged background or on moving blue-imaged background.

Web Design Coursework

Ideas for 3 New Websites

The Dead Sea Squirrels, An Upcoming Indie Rock Band from Sheffield

The first thing that always comes up when I’m thinking of “indie rock band” is black, white and red colour set. I’ve seen many rock band websites or many music websites always use these three colours. And I think these colour scheme seems to suit with indie rock band websites. Here are some good inspirations for The Dead Sea Squirrels that I have found so far.

Kasabian

I’ve chosen this Kasabian’s official website to be one of good ideas for the Dead Sea Squirrels because if we look through the website, it’s quite easy to get all of their information. People or fans can easily explore everything -news, gigs, photo, etc.- about the band in the main content on the outstanding red background.

Also, I like the idea that the red bar always stay at the same position. It makes no complex to navigate the website at all. The design (colour theme, images, illustrations, etc.) of their website always changes depending on their latest album released.

However, they use the same unique font for ‘KASABIAN’, which is important for making individuality for the band.

The National


The National’s official website could be another one of good inspirations for the Dead Sea Squirrels. I appreciate almost every part of the website. Interestingly, they created the hide and show bar on each articles with plus-/minus+ symbol spotted on the right, which is a good feature to focus. It gives more convenience to explore their story because there are options offering to users to expand all of their articles or expand just some articles they want to read or get more information and they can shrink it back when finish reading. Scrolling pages up and down could be annoying sometimes.

Besides, the main simple designed content stays on the most noticeable position of the page. Next to it, you’ll see lots of social utility icons, such as Twitter, Facebook, Myspace, etc. All fans can just simply click on these links to get up to date with the band more and more.

Jarvis Cocker

Jarvis Cocker, one of the coolest man on earth. Let see his website..

I went to Pulp‘s official website and I thought it doesn’t look good that much for the great-successful band like them. So I searched for the frontman’s website and I found this. Actually, I don’t have much to say about the design. It looks nice in both design or content part. But, the main reason that I’m impressed is, on the top of every pages, there is a video of him walking or doing something around the his name sculpture. The website is much more interesting by this little (big) gimmick. It gives more strength to his geeky character.

Beech Farm, A Homely Bed and Breakfast in Cornwall

http://www.casadelaflora.com

http://www.staysouthwest.com

http://www.caryarms.co.uk/

Primary Health, A Private Healthcare Company Based in London

http://www.drewberryhealthinsurance.co.uk

http://www.linkhospitalandhealthcare.com/

http://www.abbeyhospitals.com/

Web Design Coursework

3 Examples of Good Websites

http://motionographer.com


This website provides tons of inspiration for people who love or interested in motion graphics, animation, films, etc. It contains lots of outstanding work from many design studios, freelancers even students. I considered it is a good website because the design of this website is very clean and clear. It allows everyone to access the website very easily.

Also, the theme colour of the website gets along well with its main idea. The red colour of the logo at the top is quite attractive as it should be. Every link button is easy to understand. Plus, I like the idea that the logo, all the links on the left hand side and links of fresh newcomers on the right of the webpage are always stay still. It gives us to looking through their website easily.

If you are looking for ideas or inspiration for your visual graphic work, this is a good site to visit. I firmly recommend.

http://www.stateoftomorrow.tv/

State of Tomorrow is a creative and digital design agency. It is the one of many websites that I think it has a wonderful layout and design. Every content in the website is completely clear, simple, and well-organized. There is a smart fixed black column on the left hand side, which gives user to explore it comfortably.

The colours they use in the website are mainly black and white, which is a good choice for showing their work in various categories, such as product design, motion design, etc. which contain lots of colours.

http://vimeo.com

Vimeo is one of the most famous websites for creative people who love to share videos they make. It contains lots of interesting categories, such as art, animation, travel, sport, etc.

The mood and tone of the website is quite warm and welcome. It can easily makes people want to be one of this lovely community. Apart from colours and illustration they use, this video sharing website also has a well-designed frame box for video, which is considered to be very important for this kind of website.

Web Design Coursework

3 Examples of Good Design

Fruit Squeezer


This is one of my favourite kitchen products. Because of its design, when we see it, we know it immediately what it is or how to use it. There are plenty of fruit squeezer or fruit juicers in the market out there these days, but I prefer this one because it’s easy to use. We don’t have to read any handbook or guidebook before we use it and we don’t need electricity at all. Moreover, it is also easy to clean a couple of its light individual pieces. So this is a perfect one for juice lovers.

X-Mini Speaker


This is one of interesting product for people who want volume from laptops, iPods or any other portable music players. When considering its size at the first time, I didn’t expect it to deliver a good sound, but I was wrong. This tiny speaker has lots of power greater than its small size especially when the body is opened. You can also bring it with you everywhere you want. You can use it even you are cooking, taking a bath or laundering.

Pepper Mill


This is another kitchen product that I like and I believe most of people have it in the kitchen. I think its design looks easy to use, easy to grip and it looks quite friendly because of its material made from wood and its rounded shape. It always looks nice for both in the kitchen or at the table. Also, you can bring it everywhere with you in special occasion. It will perfectly fit in your picnic basket.