Category: Coursework


Google Analytics Extended Blog Post

 

 

 

“Measurement is the first step that leads to control and eventually to improvement. If you can’t measure something, you can’t understand it. If you can’t understand it, you can’t control it. If you can’t control it, you can’t improve it.”

– H. James Harrington

 

Measuring Websites

As H. James Harrington’s quote suggests, people in the business world need to understand their enterprises in order to improve them and control them effectively. Otherwise it can be very hard to keep up with the competition. Measuring, then, is a tool to understand how business is progressing. Web metrics is such a tool which helps estimate a website’s success as well as its weaknesses. With this tool in hand an important step in improving the website is taken. Many web metric tools exist, some of which are commercial and some non-commercial. Google Analytics is a non-commercial tool, which, however, can be implemented with other commercial tools such as Google Adwords.

 

What Is Google Analytics

Google Analytics is a free web analytics service that provides detailed statistics about the visitors to a website generated by Google and it can aid search engine optimization (SEO) and marketing purposes.

By using Google Analytics, the user can increase the Return of Investment (ROI) on marketing campaigns. The ROI is the result derived from the following statement:

Figure 1. ROI formula (http://www.investopedia.com/terms/r/returnoninvestment.asp#axzz1opimCRSJ)

 

 

 

 

Although this powerful service is designed for marketers and technologists, it is available to anyone with a Google account. It may be intimidating at first for beginners because of its depth, but, with familiarization through use, one can benefit from its properties.

 

Why Use Google Analytics

Google Analytics is by far the most popular web analytics tool as is indicated below by the Web Analytics usage statistics. Google Analytics is first with 72.73% for the top million sites and Quantcast Measurement follows second with 6.42%.

Figure 2. Web Analytics Trends (http://trends.builtwith.com/analytics)

 

 

 

 

 

 

 

 

 

 

 

Because Google Analytics is constantly updated and improved, it has a simple user interface, which is easy to use and maintain. This service also offers an excellent help and training system, ideal for beginners. For instance, the Google Analytics Education Center provides the “Google Analytics IQ Lessons”, educational presentations for beginners to help them increase their knowledge.

In addition, it shows valuable data for its users answering important questions such as:

-How many visitors is the website getting on a specified time frame?

-Where are the visitors located geographically?

-Did they find the website via a search engine or were they referred by another website?

-If they used a search engine, what did they type to find the website?

-How long did they stay in the website?

-Which pages did they visit? What links did they click?

-Which web browser are the visitors using?

-What is their monitor resolution?

-What is their internet connection speed?

-What Operating System did they use?

 

More specifically, Google Analytics can aid businesses in certain fields, such as the marketing departments which will be able to accumulate much more information regarding their field. For instance, Google Analytics can indicate who the audience is, how more visitors can be attracted, and which keywords and ads are more effective.

Executives can benefit as well, as they get answers for which marketing strategy they should follow and what the website’s traffic trends are.

Finally, it benefits content/web developers as they are informed about how to improve the website to attract visitors, and how to determine which parts of the website are interesting to visitors.

The most important advantage of Google Analytics is its capability to provide information on keyword traffic sources. With this feature it is possible to get a list of keywords ranked by how often visitors used them to find the website. This can be used to determine how effective the search engine marketing campaign and the link building are, and what brings the most visitors to the website. With that information in hand, a successful marketing strategy for the website can be created. Another important advantage of Google Analytics is that as part of Google Services, it can be combined with Google Adwords, Adsense and Webmaster Tools. Combining these tools, one can focus a targeted website marketing strategy, as they offer additional information on how a website should be supported in terms of SEO and which keyword strategy to attend.

As with everything else in the world, Google Analytics has some disadvantages as well. It cannot track website crawlers, meaning that when spiders from GoogleBot, Inktomi, Bing, Ask, and Baidu crawl the website, the user won’t be able to derive any conclusions from the Google Analytics’ dashboard.

How It Works

In order to get Google Analytics to work, a small piece of Javascript has to be inserted in every page of the website, otherwise known as “page tagging”. Every time the page is called from the server, the Javascript is enabled and it collects data from the caller (i.e. a computer’s browser) and sends it back to the Google servers for processing. Then the results are displayed on the corresponding Google Analytics’ account dashboard.

 

Installation

Step 1 – Set Up A, Google Account

1. The first step in using Google Analytics is to set up a Google Account. Go to the Google Analytics website (www.google.com/analytics).

Figure 3. The Google Analytics Homepage

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. If you do not have a Google Account, click Sign Up Now located on the left below the Access Analytics button. This will take you to the sign up page for creating a Google Account.

Figure 4. Sign Up Now CtA

 

 

 

 

 

 

 

3. If you have a Google Account, then click the Access Analytics button where you will be prompted to fill in your email and password to sign in.

4. To continue, click the Sign Up button.

Figure 5. Sign Up For GA

 

 

 

 

 

 

 

 

The next page will ask you to provide Google with an account name and the url of the website you wish to be analyzed. Then you will be asked to set a time zone and the data sharing settings. Finally, you will have to read and accept the User Agreement if you wish to continue

5. Give the website any name you wish to remember. If you plan on using your Google Analytics account for multiple websites, naming each website will make it easier to distinguish between them.

6. Choose whether the website is a secure or non-secure website (http or https) and fill in the url.

7. Select the country that your website is based in or the country it is accounted for. Then select the corresponding time zone. If your website is based in the UK but all your visitors are from Greece, the time zone will help you figure out your needs.

For instance, you can set a Greek time zone to figure out what time your visitors access the website, or you can set a UK time zone to figure out when you need your webmasters to do most of their work.

8. On data sharing settings, choose if you wish to share your Google Analytics data or not. If you are unsure, hit the question mark button for help.

9. Then choose your country or territory to read the User Agreement in your language and if you agree, tick the box “Yes, I agree..” and hit the Create Account button below.

10. If everything has been done appropriately, a success message will show up on the next window where a unique block of Javascript code for your website is ready for you to use.

Note: Each Javascript code is unique as the numbers in the form UA-XXXX-YY indicated in the picture below (figure 6) are different for each account and profile.

Figure 6. The Unique Tracking Account ID

 

 

 

 

 

 

 

 

Step 2 – Insert Google Analytics Javascript Code Into Your Website

1. The first step you need to do is to copy this Javascript script and paste it in EVERY page of the website you want to track. That means if you leave out a page of your website, no information will be retrieved for this website. If you can’t find the script, sign into your Google Analytics account, choose which profile (website) you want to work with, and then click the Admin button located on the top right of your dashboard. Then, click the Tracking Code tab. The Google Analytics Tracking Code (GATC) is located in a box on the bottom. Select and click copy.

Figure 7. The GATC

2. On the HTML of your page, paste the code exactly before the end of head tag (/head). If you need to install it into a CMS such as WordPress, you can open the head.php file to place the code just above the </head> tag. Be sure you install it into your master template, or include it in all pages created.

Note: There are other ways of automatically implementing your GATC into your pages, two of which are Apache mod_layout and PHP auto_append_file. However, they are beyond the scopes of this research and will not be discussed at the present time. Also, several plugins for automatic implemention of the GATC in CMSs exist.

3. Once you have finished pasting GATC to every page you wish to be tracked, Google Analytics is ready to provide you with data giving you an overview of your website performance. However, it may take up to 24 hours before any data is displayed on your Google Analytics Dashboard. You can check if your account is receiving data by checking if the Tracking Status displays the “Receiving Data” message. You can find the Tracking Status on the same page you copied the GATC from.

Figure 8. Tracking Status

Note: Some websites may not allow you to use Google Analytics. Check your website or hosting server if this is allowed.

 

The Google Analytics Dashboard

To start using the dashboard, you need to visit the Google Analytics website (http://www.google.com/analytics).

Hit the Access Analytics button and the Account Home page will appear. Here you have to choose the website you wish to view and then the corresponding dashboard will show up.

Figure 9. The GA Dashboard

 

Exploring the Google Analytics Dashboard

The Google Analytics Dashboard is a great tool to give users a high level overview of the website. It can provide a great depth of details and the simple User Interface it has makes it seem rather easy; however, further research is necessary to discover all the particulars.

Standard Report tab

The landing page of Google Analytics is the Standard Report tab and the fundamentals of this dashboard are presented in (Figure 10).

Figure 10. The GA Dashboard – Standard Reporting tab

1. Main Navigation Menu. Here all the links to the reports classified in categories and subcategories can be located. This changes as the user moves around in Analytics depending on which field is used.

2. Help Menu. In need, this section can be resorted to for help. A secondary help option is offered beside the Admin button on the top left side of the Dashboard.

3. Data Ranges. By default, it is set to last 30 days but it can be changed depending on the user’s needs. Data ranges can also be compared by clicking the corresponding button located in the menu which expands immediately.

4. Overview Graphs. Several options are offered to choose from such as Visits, Average Time on the Site, Pages per Visit, Bounce Rate, or Unique Visitors. An option chosen can be compared against a second metric chosen from the corresponding menu and displayed hourly, daily, weekly or monthly

5. Site Usage Statistics. A statistics overview of the website is shown here.

6. Subcategories’ Statistics. Some of the most important subcategories of the selected category can be viewed here.

7. Advanced Segment and adding new widget options are offered here as well as exporting choices are offered at this gray bar.

 

Home tab

In the Home tab the users can fully implement their own widgets and change them as they wish. They can drag-and-drop any widget they wish and add those of their own choice. Here they can create or delete a dashboard and even share their set of widgets with others by clicking Share Dashboard. Note that no information will be passed, but only the set of the widgets in this current Dashboard.

Figure 11. The GA Dashboard - Home tab

 

Custom Report tab

Custom Report tab is another tab that can be seen in the user’s profile. Custom reports allow for the creation of reports that show any desired information, and organized in the preferred way. A drag-and-drop interface is offered and any report can be chosen, edited and shared with others.

 

First Steps

Setting Multiple Profiles

Using Google Analytics is not difficult though some practice is needed in order to become a good analyst.

Generally speaking, it is a good idea to create different profiles for the same account. The reason is that each profile will maintain data that cannot be changed or altered so data protection and access control are essential. Having multiple profiles is preferable and it is advisable to include three of them. The first one is the test profile which can be the experimental lab for any data results. A second test profile, though optional, may be created in case a data comparison is to be taken for estimating the different results and conclusions. Finally, the last profile has to be the master profile, the one with which the website will be accessed for any data analytics to be taken.

 

Visitors Overview

Measuring the audience is fundamental for analyzing the website. By clicking the Audience Category, an overview of the website’s visitors can be obtained. The first section (Figure 12) shows a graph depicting visually the choice selected from the drop down menu button.

Figure 12. Graph

 

The second section (Figure 13) depicts statistics related to the visitors of the website. Specifically, it shows Visits, Unique Visitors, Pageviews, Page per visit, Average Time on Site, Bounce Rate, and New Visits.

Figure 13. Statistics

 

Visits

Visits show the total number of the website’s visitors, regardless the user. That means if the same person enters the website twice, this section will count both visits.

Unique Visitors

As the name suggests, this section depicts unique visitors at the website. However, if the same user enters from another computer or ip address, it can’t be identified and a new unique visitor will be counted.

Note: The unique visitor is counted within a defined timescale. After this expires, it will not count as the same unique visitor anymore.

Pageviews

The total Pageviews is shown here. That counts all the pages that were viewed regardless the user.

Page per Visit

This section shows the average pages viewed. This is a good indicator to get an overall idea about the website’s usage.

Average Time on Site

As the name suggests here, too, the average time on site is depicted here. Similar to the average of pages per visit, this section aids in understanding how long the visitors are likely to stay in the website.

Bounce Rate

This shows percentage of visits where the visitor enters and exits at the same page without visiting any other pages on the website. This is depicted in a percentage.

New Visits

New Visits gives the number of visits from people who reached the website for the first time. This is also depicted in a percentage.

 

The third and last section (Figure 14) includes three standard subsections; Demographics, System, and Mobile.

Each of the subsections contains important data about the website’s visitors such as the country or city they visit from, the operating system or the browser they use. From that point, by clicking each section more specific details can be acquired. For instance, the version of Internet Explorer or the screen resolution can be viewed. The fact that a Macintosh and Chrome user who visited the website from Memphis is another detail which can be concluded by investigating further.

Figure 14. Visitors Overview subsections

 

Popular Pages

In order to get a measure of how much a website’s pages are viewed, check the total number of views per page. Thus, by clicking the Content category and Overview subcategory the user can check the pages that visitors view or like most. The Page Views is obvious at the Page widget as the picture below (Figure 15) depicts.

Figure 15. Page Views

For instance, the above picture shows 38 Pageviews for the first page. Then the second page which follows has 31 Pageviews and it continues.

Landing and Exit Pages

Landing (or entry) and exit pages are those pages that the website’s visitors arrive at from another domain and exit for another. It is important to evaluate these pages to determine how the website can be improved and be more valuable to readers. The value of popular landing pages can be increased if links and other interesting information are added to those pages. The exit pages are the pages that visitors leave from, because they may find them uninteresting. Improving those pages by making them more valuable for visitors may decrease the exit odds and thus keep them in the website for longer.

On the main navigation click Content Category and then Site Content subcategory. Landing and Exit pages are shown here.

Looking for Referrals

The main contributors to a website’s traffic are the referring sources from where visitors came to the website.

On the main navigation, click Traffic Sources for an overview and then click for the submenu Referrals located at Sources subcategory. All the referring sources can be seen here and, upon clicking each, more details can be revealed such as the location the visitors came from.

Setting Goals

Setting a goal for the website will be helpful in watching results for a certain value action that visitors are encouraged to perform. A large range of goals can be set. It could be a newsletter subscription, a completion of a checkout process or a specific time that the visitors remained in the website. For setting up goals, click the Admin button and then under the Profiles tab, choose the Goalsubmenu. There is a limit of four sets of five goals in each. If more sets are needed, a new profile has to be created. For setting a specific goal such as downloads or on-page actions, some extra code has to be used, the “_trackPageview” function. For more information check http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55597.

The analytics data of the goal settings which were previously defined can be viewed under the Conversions Category at the corresponding Goal subcategory.

 

Education Center – Support Center

Google Analytics offers a robust educational center for beginners and advanced users that help them develop their analytical skills. The educational center offers seminars, videos and qualification tests for its users.

http://www.google.com/intl/en/analytics/education.html

Google Analytics also has a support center which covers an increasing number of problems.

http://www.google.com/intl/en/analytics/support.html

 

Alternatives to Google Analytics

Google Analytics is the dominating analytics tool on the market; however, as some criticism has arisen against certain privacy policies that claim that Google may be collecting data from a website’s visitors, many seek for other alternative web analytics tools. Many other commercial or non-commercial Web Analytics packages exist.

Some of them are presented below.

 

 

Piwik is one of the most prominent web analytics tools and it is an open source which is why many users favor Piwik apart from its simple dashboard. It is developed using PHP and MySQL which is downloadable and possible to install on the web servers. It has a large range of plugins and this gives Piwik extensibility and customization allowing users to use any plugin they wish.

 

 

Clicky, another web analytics tool, is suitable for small websites and blogs. It is easy to implement and incorporates advanced features, some of which are important for social media such as the “Twitter follower” feature. This can aid users in finding any relation between page views and social media hits.

 

 

Yahoo! Web Analytics is an enterprise-level, web-based third-party web analytics solution. It has an easy-to-use interface and has a great potential for multiple user groups. Yahoo! Web Analytics is credited in exceeding Google Analytics in several areas such a larger page view limit and competitive web page traffic data.

 

 

Mint targets small budget users with little technical background. It offers data security since it allows users to keep their websites private unlike Google Analytics. It comes with great support and it can be purchased at an affordable cost. Also, Mint offers a server compatibility suite which aids in determining whether or not the hosting server entails the necessary technology and whether the database user has the necessary permission required to install and use Mint.

Twitter and Facebook Analytics

Using Twitter and Facebook Analytics is not exactly an alternative method to Google Analytics, however, such an approach can prove to be dramatically helpful for increasing the number of a website’s visitors and examining its impact on them.

 

Twitalyzer is such a tool for measuring your account’s impact on customers or users. It is free and it is similar to Facebook Insights. It gives a high view of retweet and reply levels. It is easy to use as it gives instant information by just looking up a Twitter username.

Twitter Analytics

Seven months ago Twitter announced its intention of releasing the official Twitter Analytics; however, it is not yet available.

 

 

 

This is the best -and only- tool for analyzing Facebook data and it provides detailed information such as follower counts, likes, or comments on posts. There exist two different types of Facebook insights and they are based on users and their interactions with Facebook business content.

 

Dictionary (Wikipedia)

  • Hit – A request for a file from the web server. Available only in log analysis. The number of hits received by a website is frequently cited to assert its popularity, but this number is extremely misleading and dramatically over-estimates popularity. A single web-page typically consists of multiple (often dozens) of discrete files, each of which is counted as a hit as the page is downloaded, so the number of hits is really an arbitrary number more reflective of the complexity of individual pages on the website than the website’s actual popularity. The total number of visitors or page views provides a more realistic and accurate assessment of popularity.
  • Page view – A request for a file whose type is defined as a page in log analysis. An occurrence of the script being run in page tagging. In log analysis, a single page view may generate multiple hits as all the resources required to view the page (images, .js and .css files) are also requested from the web server.
  • Visit / Session – A visit is defined as a series of page requests from the same uniquely identified client with a time of no more than 30 minutes between each page request. A session is defined as a series of page requests from the same uniquely identified client with a time of no more than 30 minutes and no requests for pages from other domains intervening between page requests. In other words, a session ends when someone goes to another site, or 30 minutes elapse between pageviews, whichever comes first. A visit ends only after a 30 minute time delay. If someone leaves a site, then returns within 30 minutes, this will count as one visit but two sessions. In practice, most systems ignore sessions and many analysts use both terms for visits. Because time between pageviews is critical to the definition of visits and sessions, a single page view does not constitute a visit or a session (it is a “bounce”).
  • First Visit / First Session – (also known as ‘Absolute Unique Visitor) A visit from a visitor who has not made any previous visits.
  • Visitor / Unique Visitor / Unique User – The uniquely identified client generating requests on the web server (log analysis) or viewing pages (page tagging) within a defined time period (i.e. day, week or month). A Unique Visitor counts once within the timescale. A visitor can make multiple visits. Identification is made to the visitor’s computer, not the person, usually via cookie and/or IP+User Agent. Thus the same person visiting from two different computers or with two different browsers will count as two Unique Visitors. Increasingly visitors are uniquely identified by Flash LSO’s (Local Shared Object), which are less susceptible to privacy enforcement.
  • Repeat Visitor – A visitor that has made at least one previous visit. The period between the last and current visit is called visitor recency and is measured in days.
  • New Visitor – A visitor that has not made any previous visits. This definition creates a certain amount of confusion (see common confusions below), and is sometimes substituted with analysis of first visits.
  • Impression – An impression is each time an advertisement loads on a user’s screen. Anytime you see a banner, that is an impression.
  • Singletons – The number of visits where only a single page is viewed (a ‘bounce’). While not a useful metric in and of itself the number of singletons is indicative of various forms of Click fraud as well as being used to calculate bounce rate and in some cases to identify automatons bots.
  • Bounce Rate – The percentage of visits where the visitor enters and exits at the same page without visiting any other pages on the site in between.
  • % Exit – The percentage of users who exit from a page.
  • Visibility time – The time a single page (or a blog, Ad Banner…) is viewed.
  • Session Duration – Average amount of time that visitors spend on the site each time they visit. This metric can be complicated by the fact that analytics programs can not measure the length of the final page view.
  • Page View Duration / Time on Page – Average amount of time that visitors spend on each page of the site. As with Session Duration, this metric is complicated by the fact that analytics programs can not measure the length of the final page view unless they record a page close event, such as onUnload().
  • Active Time / Engagement Time – Average amount of time that visitors spend actually interacting with content on a web page, based on mouse moves, clicks, hovers and scrolls. Unlike Session Duration and Page View Duration / Time on Page, this metric can accurately measure the length of engagement in the final page view.
  • Page Depth / Page Views per Session – Page Depth is the average number of page views a visitor consumes before ending their session. It is calculated by dividing total number of page views by total number of sessions and is also called Page Views per Session or PV/Session.
  • Frequency / Session per Unique – Frequency measures how often visitors come to a website. It is calculated by dividing the total number of sessions (or visits) by the total number of unique visitors. Sometimes it is used to measure the loyalty of your audience.
  • Click path – the sequence of hyperlinks one or more website visitors follows on a given site.
  • Click – “refers to a single instance of a user following a hyperlink from one page in a site to another”. Some use click analytics to analyze their web sites.
  • Site Overlay is a technique in which graphical statistics are shown besides each link on the web page. These statistics represent the percentage of clicks on each link.

 

Resources:

“Advanced Web Metrics with Google Analytics”, Brian Clifton, SYBEX

“Head first Web Design”, Ethan Watrall, Jeff Siarto, O’ Really Media

“A Beginners Guide to Google Analytics”, Ben Barden (quickblogtips.com)

“Google Analytics, Understanding Visitor Behavior”, Justin Cutroni, O’Reilly

Web Analytics Wikipedia

Google Analytics Training Center

Google Analytics Help Center

Google Analytics Wikipedia

SearchBusinessAnalytics TechTarget

GuruOfSearch

Mahalo.com

Trends.BuiltWith.com

Etai Tavor

WebReach

Investopedia

Grid Systems in Web Design

Introduction

“The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”

Aristotle

Achieving beauty has been the utmost goal for humankind from its very first attempts at art, and mathematical sciences were its perfect allies for reaching boundaries that had never before been attained. The Golden Ratio, or the Divine Proportion, which is symbolized by Phi, is such an approach. It is a visual pattern that exists everywhere in nature. By using it in art, a natural sense of correct composition and an aesthetically pleasing feeling are achieved.

A perfect example of this approach to art is the Parthenon where golden rectangles were applied. The following picture shows how the small details of the monument (small rectangles) gain harmony in relationship to the rest:

acropolis

The Acropolis

By using a grid system, a framework of crisscrossed parallel lines or bars, one comes very close to the Golden Ratio and thus achieves order, symmetry and finally beauty.

All kinds of artists use grids to aid their works. Architects use them to create not only a functional and aesthetic building but also a safe one. Cartographers have used grids for centuries to aid them in mapping the terrain on their prints. Painters use them to compose complex techniques in their paintings and thus achieve an aesthetically pleasing result. Writers make good use of grid systems to make sure that their books, periodicals, magazines and newspapers will be readable and the content be delivered effectively to the readers. Even in sports grids are used. In this case, beauty is attained by organizing the players effectively to achieve precision in their performance. For the exact same reasons, web designers use a grid system for the benefit of their work.

The reason behind grid systems functioning in this way lies in psychology and how the human brain perceives objects. Throughout history, humankind has been fond of categorizing things, grouping tangible objects. It is just more convenient for the brain brain to understand those objects through a systematic approach.

Gestalt psychologists have investigated the brain’s “self-organizing tendencies” (Wikipedia).  The result of their work, which was named the “Principles of Grouping”, triggered a better understanding of this behavior. The findings claim that when people observe a group of things, unconsciously they tend to arrange, to order, and to simplify them in specific patterns that make it easier to perceive them. Specifically speaking, these psychologists proposed a set of principles called “Gestalt laws of grouping”. Four of them, namely proximity, similarity, closure, continuity, are particularly relevant to the grid systems which provide organization in web design.

Proximity

The law of proximity refers to the inclination of the mind to group things together. In other words, the mind may ignore an isolated piece of data such as a cube and consider it as a whole when this cube is among other similar data. An indicative example is the following image:

proximity

The Law of Proximity (a)

The first image shows a bunch of cubes. The mind does not perceive those cubes as a group, but it can see them as individuals. However, if we put the cubes together, as in the second image, the brain will group them as a whole, and not as individuals.

Similarly, the mind will perceive the cubes as two different groups as in the following image:

The Law of Proximity (b)

Similarity

The law of similarity refers to the inclination of our minds to group things according to their properties. The brain accords each similar item given in a pattern with another of a similar shape, color or other distinctive characteristic. For example in the following picture, the brain arranges its contents according their shape in two different groups; circles and squares:

similarity

The Law of Similarity

Closure

The law of closure explains that the brain perceives a shape as a whole even though it does not really exist. Good examples are the following famous logos:

Closure

The Law of Closure

Looking at the two logos, someone will perceive them as a whole; a group of lines which have some consistency on their shapes are apprehended as letters and in this case those lines form the initials of IBM company. WWF’s logo is based on the same principle, as the panda depicted has no real outline, but a rather careful shape manipulation gives the impression that an invisible outline exists.

This is useful for newspapers, magazines, articles and anything which uses a grid system. For example, in articles or books each line’s start and end matches the ones of the next or previous line. It is like there is an invisible grid which defines those starts and ends. This is what the Law of Closure talks about. Respectively, the same occurs in our case, web design as shown at pictures (a) and (b).

Continuity

The law of Continuity clarifies what occurs when our brains see an intersection between two or more items. We tend to perceive each as a single uninterrupted object because of the tendency to group lines or curves according to their direction. Therefore, in the image that follows, the viewer interprets the two vertical lines I and I as the letter H instead of those different parts, ignoring the wave that the star creates slicing through it.

continuity

The Law of Continuity

In both pictures below, (a) and (b), the user may not perceive the grid in the headlines and the text, but the red and blue columns indicate that the designer used such a system to align all items for the desired result:

the grid system

(a)

I love typography

(b)

 

 

 

 

 

 

 

 

 

 

Furthermore, as depicted in all previous image examples, and those of the principles included, it is obvious that the use of white space in design plays an important role in how our brains perceive shapes, patterns or forms. That happens because the white space serves as a distinction between them. In other words, it is an optical illusion. The same effect takes place in layouts.

With these laws in mind, we can see that order, unity, flow and white space can aid for a better understanding of a group of objects perceived. They especially help in cases where the items in a given layout are going to be complicated and compressed. When the layout is out of order, the brain has difficulty accepting stimuli. And in our case, when this happens, a website becomes uninteresting.

A grid system, then, is the key for constructing order in a layout. However, order is not always enough. In web design, a grid system is used to develop a layout’s consistency and order, which may seem organized, but it can not always be aesthetically pleasing or effective in terms of usability. For this, grid systems are used in combination with various mathematical computations. Some of those techniques are the use of the golden ratio, the golden rectangles, the golden triangle or the rule of third.

These techniques are picked by web designers as a way to best express the message they need to convey and each website has its own requirements and characteristics. For example some blogs, magazine websites or other famous ones, such as Twitter, are mostly based on grid systems which use an approach based on the Fibonacci sequence formulae as shown in the picture below, but this is not a rule.

twitter

Twitter

Some web designers neglect those techniques but use a grid in a way to help them arrange items in an attractive way. Again, mathematics are included here, even though no mathematical approach was used. The reason is that Aristotle’s quote can be used vice versa. John Michell’s quote best express it:

“The mathematical rules of the universe are visible to men in the form of beauty.”

John Michell, inspired from Plato

More specifically, websites use various approaches that differ very much from each other. A media website genre is a good example to show how those different approaches are used even though they may not be really obvious.

 

Website Analysis. Genre: Video Media/Broadcast Website

youtube logo

 

 

Youtube is the most popular video streaming website. The main contents of this website genre are the videos, which are offered in 4:3 aspect ratio. The Youtube designers planned the website using as a starting point the logo of the firm, which is located on the upper left corner of the website. Then, using a simple two column grid for the general content, they managed to make a fixed, centered, layout, grouping the items of the website, as can be seen in picture 1. The main column contains the most important feature of the website, which is the video player, and it is followed by a comment section in the same column. The second column is functioning as a “see more” section, which currently has an advertisement as a starting point at the top. It is obvious that the Law of Proximity and the Law of Similarity have been put into effect in this layout.

youtube columns

Picture 1. Youtube fixed layout

On the other hand, the Youtube website has a slightly different layout on other pages. What was analyzed before was the most viewable page of the website, which is not the Youtube homepage, but the page that most of the users are familiar with, as they are directed to it by links from posts such as those from Facebook. They are willing to visit the original site rather than view the embedded video or they were prompted by others to visit it from emails or Twitter.

The Youtube homepage uses a three column layout as can be seen in picture 2 and picture 3. What is important here is the way that the designers constructed the website, arranging items in an hierarchy in the form of a half cross. This “halved cross” indicates where the most important items have been placed; the main advertisement of the website lies horizontally, and the video categories’ navigation lies vertically in the first column. Above the horizontal bar the upper navigation is located along with the sign in / sign up details. Even if the user switches off the advertisement, there is no impact to the website because the videos, which were of secondary importance, now take the place of the advertisement in the blue horizontal line (picture 2). That’s a great advantage for Youtube as it is another way to benefit from the user even in this case.

half cross

Picture 2. The "halved cross"

The triangle in picture 3 represents how the emphasis is given in visual hierarchy. As stated before, using the Youtube logo as a starting point and keeping the half cross in mind, the designers put the items onto a three-column grid. As it is obvious in picture 3, the important content here is included in the triangle:  the search bar, the sign in call for user customization of the website, the call to action buttons (sign in and create account), the video category list, the horizontal navigation bar at the top, account links , the main advertisement, and of course, the logo. This arrangement gives the layout a clear direction to aid usability. The user is directed to log in, or create an account to enjoy most of the website. But even if the user doesn’t do so, the main features of the website are still offered and the user is called to choose between the navigation and the search bar which is the most popular feature. This is the reason the designers put it beside the logo.

youtube triangle

Picture 3. The triangle

The horizontal alignment in Youtube is not obvious at first sight, except for the case of the top alignment between the three main columns of the content. However it is used for the visual grouping of the secondary items in the layout, such as the thumbnails or information details for each video uploaded. Picture 4 depicts in red the horizontal alignment and in green the vertical alignment.

youtube alignment

Picture 4. The alignment

 

vimeo

 

 

vimeo

Picture 5. Vimeo

Vimeo is another popular website which attracts video artists and is often used for uploading short films, sketches and portfolios. The website has an easy to navigate interface and offers the ability to make and moderate video groups. In other words, the website is built for serving an artistic community involved in video production.

The website is designed in a Jello layout (Picture 6) where the content is presented in the middle of the viewport. Youtube has the same layout, but it is not as obvious as it is in Vimeo due to the difference in content and background color.

vimeo jello

Picture 6. Jello layout

At first glance, the website gives the impression that it uses a two column layout. However, as it is obvious in picture 7, those two columns are just “containers”. Vimeo website has a layout which is using a three-column vertical grid. The first column is called to align the “other video” thumbnails with the main video on the left side and the first tab title “Videos we like”. The same column provides a right alignment on the same thumbnails too. Therefore, all images are given in a particular size to give a pleasant and organized feeling.

The second column contains the details of each video / thumbnail provided and it is wide enough to fit the description, but not longer than expected as screen readers have difficulty in reading long lines on the viewport. A connection between the description and the thumbnail is provided with a horizontal alignment which functions in a way which gives the impression that the two blocks; the thumbnail and the description, are relevant to each other.

Finally, a third column aligns the right and left sides of the secondary vertical container which is located on the right of the website. It is noteworthy to state that there is a right alignment between the welcome message “Welcome, you’re new, aren’t you?”, the Vimeo logo, and the left side of the first and main container. This aids in giving a good visual feeling and locks the logo at a stable position, which means it is not suspended in the air but it is attached onto a firm invisible gridline. Similarly, on the right side, we can see that the right side of the upper navigation is aligned with the right side of the Jello layout. The same function as the logo, now takes place for this navigation bar.

vimeo columns

Picture 7. Grid and columns

The grid system works as a point of reference for snapping the logo onto it. The same goes for the beginning of the main title, in this case the welcome message. Thus a cohesive structure at the layout of the website and a strong brand image are achieved. The Jello layout is designed in a way that gives Vimeo a recognizable appearance. This exactly is the strong point for the layout’s credibility and identity.

 

Dailymotion

 

Dailymotion is a less popular video streaming website which accommodates videos in a grand variety as Youtube does. However it attracts a lot of users and apart from other features that it offers, one reason for its popularity is the impressive organization of its content and the friendly user interface. Every item seems to be attached to a grid line that connects it with another of similar importance. The main point of the website, the video player, seems well positioned too. Dailymotion is an obvious example of a website which has a well-arranged grid system in contrast to Youtube and Vimeo. Because the content disposition is firm and concise, it adds to the website’s  credibility. The gutters (or alleys) are wide enough to allow the layout to “breath” because the white space which exists gives an obvious separation to the viewer but not in wide irritating fashion. This also aids legibility as well as usability as users can navigate easily through the website without getting confused by crammed content.

This website is based on a four plus two column layout, as shown at picture 8:

dailymotion six columns

Picture 8. Dailymotion layout

Each secondary item in the website is offered as a tightly organized block as shown in picture 9. In this picture the grouping and the alignment are obvious and are arranged in two general columns that contain other individual columns; the first contains four and the second contains two.

dailymotion blocks

Picture 9. Blocks

As it is apparent now, visual hierarchy is emphasized as each block is separable and locatable. The user will be able to focus on the section that interests him / her.

On the bottom of the same page, the homepage, the website offers both a vertical and horizontal alignment. The vertical alignment, as expected, is a continuation of the upper part of the website grid. Horizontal alignment aids legibility and vertical alignment aids the grouping of each item under the Law of Similarity. Even the Law of Closure plays an important role here too, although less obvious, in the form of an invisible line that connects each group under its generic title. The white space plays an important role in these principles and in the layout in general.  This is depicted in picture 10:

dailymotion bottom

Picture 10. Dailymotion, bottom part

Conclusion

In general, media website genres such as video streaming websites as Youtube, Vimeo and Dailymotion, are not heavily dependent on a grid system as, for example, the newspaper website genre is. The newspaper genre contains articles, headlines and subtitles that absolutely need a grid system to be legible and be equal to the printed version. However, this does not mean that a media website does not need a grid system. The content it contains, in other words the main video player, user interaction and a choice of alternative videos on the side, would be displayed more effectively through a grid system since such a technique aids in grouping and in putting order to the content. Therefore, the interface design acquires a good visual balance and becomes functional as it is simpler for the user to perceive the contents. Consequently, the website which makes good use of a grid system gains credibility and its brand becomes recognizable. What is important for the latter is that the company has to maintain a well-organized website, and consistency through time. That means if the website changes often its interface, the users will have difficulty to adapt. Some websites can be an exception to that rule, such as famous ones as Facebook is, but for most, this rule has to be a principle.

Grid systems bring organization to the subject they are applied to no matter if it is a website, a newspaper, a map or even a school blackboard. However, they would not be effective if they had no beauty. But as Aristotle said, order symmetry and limitation are exhibited by mathematical sciences. And grid systems are mathematical.

 

Inspiration and reading from:

Links

http://en.wikipedia.org/wiki/Gestalt_psychology

http://en.wikipedia.org/wiki/Principles_of_grouping

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

http://blog.erichatheway.com/2009/09/10/the-six-laws-of-visual-perception.aspx

http://v4.jasonsantamaria.com/articles/whats-golden/

http://eyetrackingupdate.com/2010/06/14/eye-tracking-web-usability-study-reveals-golden-triangle/

http://britton.disted.camosun.bc.ca/goldslide/jbgoldslide.htm

http://www.jimloy.com/geometry/golden.htm

http://en.wikipedia.org/wiki/Golden_rectangle

http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design/

http://www.presentationzen.com/presentationzen/2005/08/from_golden_mea.html

http://www.johnakerson.com/blog/2010/09/why-you-should-avoid-the-golden-ratio/

http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

http://vcareyux.wordpress.com/2011/11/23/the-psychology-of-ux-part-10/

http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1

http://www.markboulton.co.uk/journal/comments/design-and-the-divine-proportion

http://designinformer.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/

Books

“Designing for the web”, Mark Boulton.

“White space is not your enemy”, K.Golombisky & R.Hahen.

“Ordering Disorder, Grid Principles for Web Design”, Khoi Vihn.

 

 

SEO Analysis and improvement suggestions for bicycledoctor.co.uk

Existing Website

 

 

 

 

 

Initial Analysis

The bicycledoctor.co.uk has a page rank of 4 according to Google PageRank Checker.

According to Alexa, the website has a reputation of 141 sites linking in. That is a counter for links from other sites that point into the website. However, in order for such a link to be counted, it must be seen/used by users who share their traffic statistics with Alexa -therefore, Alexa can’t be an exact tool. However, it is a good general indicator. The bicycledoctor.co.uk has now a Traffic Rank of 1,870,722. It shows the popularity of the website which is calculated by the average number of visitors and its page views which occurred the last 3 months. Fifty-six percent (56%) of the visitors have just one page view and about a twenty-six percent (26%) of viewers visit the website after they requested a search at a search engine. Those findings show that there is a need for improving the website in terms of SEO, and grasping the visitors’ attention by making it more user-friendly and more pleasant to anyone who visits it.

(note: all findings were checked early December, some results may vary over time)

Here is a screenshot taken from SiteAnalytics.

 

 

 

 

 

 

 

 

Target Audience and keywords

In order to build a well structured website, a target audience analysis is essential. The present website is mostly visited by educated males between 35 to 44 years of age. The top search queries which drove visitors to bicycledoctor.co.uk are “what size bike”, which is the most common, followed by the “surly bikes” and “bicycle doctor”. In order to construct the website strategically, it is also necessary to look for general top search queries so as to get a better view of the website’s needs. Some of these are “frame size”, “doctor” and “bicycle”. The Google Insights reveal that the word “bike” is requested in Google Search more than any other. Thus, I considered changing the firm name from ‘Bicycle Doctor’ to ‘The Bike Doctor’. However, I decided to use the ‘The Bicycle Doctor’ since it sounds bolder than the original one and it does not confuse the customers as the name ‘The Bike Doctor’ would.

Structure

Structuring the website semantically will make it easily accessible by Search engines. This can be done by reducing the content and any information presented at homepage. It will also prove to be helpful in usability and accessibility issues; people who use screen reader or other devices have to be able to navigate through the site easier than before. In addition, a better navigation is essential and I would consider adding a second navigational bar to enable differentiation of importance of each navigation by making them different in size. A search section is necessary as well, as it will make the navigation experience easier for the user.

In addition to these alterations, changing the content regularly will help in terms of SEO, as search engines will show results from the website more often. Furthermore, a live impression can be given to any visitor through an automated javascript image slider and by uploading news, photos, and videos/podcasts, a live impression can be given to any visitor. A “top products” section can be visible next, below the javascript slider, to enhance this impression.

The existing website uses alt tags for images and title tags for links accompanied by a good description. This strategy is good and it will be kept almost intact in the redesign. Wherever possible, links will follow Fitts’ Law, so that the website will provide an easy navigation experience.

I arranged any links into groups so that any visitor will be able to navigate without extra clicks. Such groups may look like this:

Bikes (contains men’s, women’s and children’s section, road bicycles, mountain bicycles etc)
Brands (for famous firms)
Components (for bike parts customers are interested to)
Services (list for repair services offered, or other services)
Apparel (clothing etc)
Offers (discounts, xmas exclusives etc)
Other Products (for products which don’t fit into any other category)
Costs (Here any cost of a service offered can be found easily)
About Us (information for the stuff and anything corresponding to it, whereabouts will be included)
Contact (contact form, map-location)
Help (any help such as payment, or other issues that customers may face. a FAQ will be included into here)
Events (News and “what is on” sections)

The title tag is relatively long:

Bicycle Doctor – Manchester Rusholme Bicycle Shop – cyclescheme, bmx, brompton, dawes, airnimal, marin, bianchi, tandems, pashley, childrens, women, track, fixie, tricycle – all your cycling needs

It needs to be shortened and to include some popular keywords. My suggestion is:

The Bicycle Doctor | Bikes | Cycles | Repairs | Services

It acts as a webpage title and it only contains essential key words. Using keywords related to the website’s content but keeping them tight and short has proved to be the best practice. In addition to this, description and keywords meta information need to be shortened as well. My description meta tag is:

Bicycle sales and repair services in Manchester, cycling accessories, spares, and clothing from The Bicycle Doctor Shop

In addition, I used the NOODP and NODIR robot meta tags to force search engines to display my description tag instead of portions of the website or the directory information when they display search results.

Validation

Website’s validation is actually showing that it is not validated. It can be omitted as it is unnecessary. However, it is essential that the website be checked for HTML and CSS Validation.

Counter

Visitors’ counter should be omitted or modernized, i.e. by using a Facebook “like” counter. The existing website offers social connection to Facebook, which is good, but it may not be enough. A modern approach which also implements other social media into the website can be more effective and increase its traffic. Introducing the existing Twitter and WordPress accounts into the homepage is essential as well as creating others, for example Flickr or Tumblr. In addition, adding RSS feeds to the existing blog is a good idea.

Store Information

Opening hours and location information will be included on the homepage as some people may expect this to be found there. I first considered putting such information on top of the homepage, but I decided to move it to the middle in order to keep the upper part clear of any optical disturbance. Any new visitors in a hurry may instead click Help, Contact or About Us links which are obvious on the top of the website.

External links

Any reciprocal link should be omitted as it does not really serve as an external link for the website as Google ignores such attempts. Instead, the website should continue providing useful information such as articles and/or social feeds such as small twitter texts. Thus any beneficial external link will be generated by other people if they appreciate the information.

Color and Look of the website

The website uses a blue and green background which doesn’t make a good combination of colors. Keeping in mind several keywords such as doctor, bicycles, repairs and sales, I chose red, white and black colors for the redesign. Red and white colors represent a medical or health related background. Black color can be linked to manufacturers or other mechanical services, as they are areas full of greases and black stains.

Fonts

The fonts used were chosen as the type is clean, readable and because it has a service-repair-store look. Also, the type is square-like, something which links to shapes used by the bicycle industry.

In addition to the above, fonts combined with the color red, give a feel that new bicycles have. Images play an important role, as they were chosen carefully to match the look and feel of the homepage.

My redesign

 

 

 

 

 

 

 

 

 

 

Useful links

1. http://www.smallbusinesscomputing.com/emarketing/article.php/3935321/Top-10-Small-Business-SEO-Tips-for-Link-Building.htm

2. http://www.1976design.com/blog/archive/2004/09/07/link-presentation-fitts-law/

3. http://en.wikipedia.org/wiki/Fitts’s_law

4. http://siteanalytics.compete.com/bicycledoctor.co.uk/

5. http://websitegrader.com/site/www.bicycledoctor.co.uk

6. http://www.francislee.com.au/seo/a-good-meta-description-can-get-you-more-traffic-56/

7. http://www.google.com/insights/search/?hl=en-GB#cat=0-47-1191&cmpt=q

8. http://www.webopedia.com/TERM/B/backlink.html

9. http://www.smallbusinesscomputing.com/emarketing/article.php/3935321/Top-10-Small-Business-SEO-Tips-for-Link-Building.htm

10. https://adwords.google.com/o/Targeting/Explorer?__c=1000000000&__u=1000000000&__o=kt&ideaRequestType=KEYWORD_STATS#search.none

11.http://www.seoworkers.com/seo-articles-tutorials/using-noodp-and-noydir.html

Other competitive or similar websites

http://www.thebicycledoctor.com
http://www.condorcycles.com
http://www.harryhallcycles.co.uk/directory.asp
http://www.2011.handmadebicycleshow.com
http://www.ocbikedoctor.com
http://www.evanscycles.com
http://www.cbike.com
http://cyclestore.co.uk

Brainstorming on Bicycle Doctor Project

Two things struck me about the website when I first entered it. The first was the huge amount of content that the site has, and then the use of colors. I would definitely not call it an appealing website. While waiting for the visitor data results at Statbrain, I continued to investigate the weak points of the existing website. I noticed that there was no logo, consistent navigation bar, or concise use of the content; everything was scattered throughout the homepage. I noted down all the necessary information to make my job easier to rearrange each section needed for the redesign of the website:

  • All Bike links should fall under a general category “Products” in order to limit any hazard caused by scattering around links for bikes and to avoid confusing the user. This link will guarantee that if the user needs to look for a product, new or old, all she can do with a simple click. That also goes for any other items for sale like Trailers, Christmas Gifts, Winter Special or any discounts.
  • Links called “Staff”, “Email Us”, “Location/Contact Details” and “About Us” should be moved into a new category which will function as a ‘contact’, ‘about’ or ‘who we are’ link.
  • Links named “Bying”, “FAQ”, “Site Guide” should fall under another category called “Help” for the same space-saving purposes. This section should be found at the bottom-right of the website as most users expect it to be found there. Also, I suggest including in this category links such as “About Us”, “Find Us”, “Contact Us” as those links are bound to have the same semantic reasoning with the tag “help”. In addition, links such as “Privacy Policy”, “Responsibilities”, “Returns” or even “Delivery” -for selling products online- should be added into this section as it helps to increase users’ respect and the website’s prestige.
  • Due to the vast amount of information of the website, a search area is essential and critical for keeping customers who need to be able to find quickly their area of interest.
  • “What’s On!” might changed into “Events” as it is a term generally accepted and sounds better.  The website visitors indicator should be omitted and replaced by Social Network special links, such as the ‘likes’ of the Facebook. Otherwise, Social Media icons such as Facebook, Twitter, WordPress (as this is the one they currently use), Tublr, and Flickr should be seriously considered as it will help the website gain more traffic and visitors.

Initial research for rankings and metrics post

From the available options, I chose ‘Bicylce Doctor’ for the Project 2. First thing I did was to investigate the existing website. Thus I checked the rankings, traffic and in general any other metrics available. However, whenever I see the words “analytics” and “metrics”, what comes into my mind is “Alexa!”.  I felt the need to reconsider this reaction, so I did some research. Now, I don’t know if I should trust Alexa anymore. According to information I gathered, it has become unreliable for analyzing any data it offers.

Specifically, its traffic ranking are based on data collected from users who use the Alexa Toolbar, and it is easy to trick it by increasing the visitors who have it installed. This could be achieved in various ways, for example by inviting techno-geek users from targeted forums. Another easier trick is to visit your pages -or even better have other people do it- several times per day, but, of course, keeping in mind to avoid getting blacklisted. Here you can read more:

Dailyblogtips

and here is another one which also includes the Google Trends:

MarkPack

and another:

TheDomains

 

In case you have an opinion on this matter, you are welcome to comment.

 

ps. Here is an article to read for advices on better SEO optimizing:

SEOptimise


Warm Bean Coffee Shop Mockup

Here is my mock up

Be aware that I named it Warm Beans instead of Bean. just to differentiate a bit 😉

Three Websites with Good Typography

Design Professionalism

As the name indicates, this site is quite professional. It is clear, consistent and appealing. Each field is clearly separated; headings, main text, and links provided are readable and easy to understand. No excessive use of typography is used and the typeface is just beautiful. In contrast to many other sites, a very good way of emphasizing is used which rather highlights than downgrade site’s value.

 

Vingette

This site uses a personal typography design. In a clever way, it tries to tempt its users to sign up, giving a paperback feeling. The fonts is extremely consistent and readable and there is absolutely no struggle in understanding the content. In addition, the typeface used is visually appealing as it seems to matches with the black and white photographs. The logo is obvious and dynamic and the tagline is clear and informative. Even though the site is not up yet, it already gives some positive feeling and the typography of the site is the reason.

 

WeshootbottlesWeshootcans

Those sites are both of the same company which provides high resolution pictures of bottles or cans. Even though the topic sounds boring and common, the company managed to make their subject interesting enough. Again, the main reason is typography. When a visitor first enters the site s/he can’t be but curious.

The content constitutes of several headings and paragraphs which have clarity and personality. The color of the fonts is used in an appealing way that works. Each content area is distinctive and it helps for passing the message to viewers.

Three Websites with Poor Typography

Mangal Pharmacy
This site seems to be poorly planned, even though this site uses a readable typeface. Apart than the main heading, there is no clear distinction between other headings and subheadings to paragraphs. The line length (of the main paragraph) is very long, thus making it more difficult for a visitor to keep track of the line. Also, there is a mismatch between the contents of the main block and the news block. In addition, double spacing is used, making a distraction. Last but not least, the content positioning, as well as its color, seem to be dated and boring.

 

The Company of Maisters
This website is really outrageous, but typography is even more bad. In general the site is aligned to the center. The use of the font sizes is not balanced, as the main content appears to be smaller than the message prompting for the use of email. The line length is big and designed in a way, that cannot be taken seriously by the visitor. In addition the letter spacing is small and makes it difficult to read. Navigation’s fonts are really small and arranged in a very strange and unappealing way.

 

Bob Hope
If I could illustrate the term “font bombing”, I would use this Bob Hope’s site. The reason is that their main page is full of different posters, something which adds a lot of “noise” into the page. Another reason i dislike this site is link-bombing: the site is full of links. There is no clarity, no clear separation between main text and secondary paragraphs. Also the emphasize usage comes with no special meaning. The color use is dreadful as well, making it difficult to understand the hierarchy of any content.

Three good color scheme websites

Coringa

This website only uses 2 main colors (background-navigation bars) and three secondary. The balance achieved between those two main colors is great, relaxing to the eye and the content is instantly identifiable. Hovering over the links, a blink effect is used, but not annoying at all. A cool color effect is also used as a dithering one (or close to this effect) for making the visual illustration of earth’s continents. Secondary colors used supplements the overall experience but they are used in such small doses that they are barely apprehensible.

  • links: #B3C943
  • containers/bars: #DB0067
  • background: #F3F1E1

Exile Designs

This is the online portfolio of a propitious French digital artist. She made a good monochromatic use of the color. The background is a warm relaxing color that matches with fonts, titles, logo and header. A careful use of white color was made for the links which also use a hover effect with a good matching color as well. Regarding color scheme structure, the webpage elements are used wisely and carefully, so that all of them tie well each other.

Some of the colors used:

  • #3D2121
  • #4C2B33
  • #E2BFC8
  • #E52B57

Cloud9

cloud9 websiteCloud9 is an online IDE for development of JavaScript and HTML5 applications. Apart for other functions, s it is obvious that their success depends on correct choice regarding color schemes. Designers couldn’t leave out this without considerable thought and they have done a very good job. Color choice and positioning is really good, making a relaxing experience and it succeeds on usability and accessibility issues.

The dark background used helps viewers focus on the content which is distinctive and classifiable. Green headings are helping to classify each topic separating it from different ones. A light tinted blue is used on the heading grasping the attention of the viewer. As a general impression, watching this this website at my viewport is pleasant and satisfying.

  • #0092EF
  • #009900
  • #505050
  • #BF0202

Three bad color scheme websites

.argh! { those sites : suck;  they lack: harmony;  they fail: to deliver a satisfying color scheme; }

www.kritikokonaki.gr   class=”argh!”

"to konaki" websiteFirst in list (in no particular order) is the site of a greek tavern/entertainment center. The color scheme not only does not compromises with any color theory, but also is rather outrageous. More specifically, the color that was chosen for the main text is white, but it contradicts the color of secondary text such as the google ad links or the rolling text.

The background seems as it was chosen out of luck and it is more than obvious that no deep analysis or a logical conclusion was done in relation with the color influence it may have to viewers.

However, the most horrible of all, still not obvious to any user who visits the site for first time, is the false overuse of pseudo-classes; hovering your pointer over the links, you will discover that the navigation’s background changes to  a repulsive combination of colors. I have to warn you that if you visit the site  out of curiosity, you should be prepared of a piercing noise when you hover your mouse over the navigation’s links.  Some of the colors used are:

  • google ad fonts: #f9ed41
  • background: #9b3500
  • navigation bar: #8d0800
  • visitor count: #1220ae

www.clubblueroom.com  class=”argh!”

While someone may think that there is no bad use of colors at this site, I would have to say that there really is; probably this site’s designer tried unsuccessfully to cover his weakness regarding his color choice ability. A very big blue logo and very small red links constitute the homepage. Exploring the site further, one can discover that a similar color choice pattern is followed. Now, specifically speaking, the combination of that blue and red (and white), may not be obviously annoying or a failing one, however the color design and the absence of a main color make it poor and shoddy, thus downgrading the site’s value.

  • font: #cf1000
  • logo: #00146d

idea.gr  class=”argh!”

idea.gr websiteYet another Greek horrid website. What first caught my eye, was the terrible combination on the header of the site; tints of blue color and red logo on the left that shouts ‘ I am a failure ‘. Not only that, but an orange icon which represents a Greek column capital on the right gives a cheap feeling regarding the site. Color choice following a certain method was probably an unknown method to the designer. Inspecting colors further, the designer mainly used blue and red shade color falsely and he also failed to arrange them so they could match better rather than confuse viewers. Last but not least, the background is really bad.

  • navigation bar: #840600
  • navigation tab bar: #002476
  • logo color 1:#e31300
  • logo color 2: #00a8d6
  • background: #d9cfd0