Olan

The Grid System

 Uncategorized  Comments Off on The Grid System
Feb 202013
 

The Grid

Introduction

Design is relationships. Design is a relationship between form and content.” These are the now famous words of Paul Rand. (Kroeger 2008)

This is as simple as it gets.  The definition of design and the journey through its history shows that establishing and ordering that relationship has been core to the developmental strides taken in the generic field of design.  In the drive for continuous improvement, one of the manifestations of our pre-occupation with order has been the breakthrough and subsequent gradual improvement of the grid system. 

Origin

Grids originated with graphic design and are very popular in print medium.  They have only become widely used online in the past few years.  They have however exploded in popularity and can now be found as a component of many websites.

Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts.  Some examples of grid system frameworks are:

  • 960 grid system
  • Grid system generator
  • Semantic
  • Flexible CSS Grid
  • Modular Grid Pattern

What is a Grid?

“A design grid is a hidden system of guidelines, borders and columns into which elements are placed and to which they are aligned.  It is a simple and surprisingly flexible system for providing a framework for the material being presented within a brochure, booklet, ad (singly or as part of a campaign) or throughout a website.” (Krause, 2004)

The grid is the most vivid manifestation of the will to order in graphic design. (Boulton, 2005)

 

Types of Grids

gridtypes

There are several types of grids from which a designer can choose from.  The simplest of  them is the the rule of thirds. It’s a method used in photograph also. It involves dividing a page into thirds with two equally spaced vertical and/or horizontal lines so that important compositional elements can be placed along these lines or intersections.

Goldern ratio is another popular method used (approximately 1.618)  for proportioning.  The goldern ratio has been used for centuries by architects, artists and book designers for its aesthetically pleasing qualities and has been studied by mathematicians for its presence throughout the universe..

My personal favorite method is to divide a page into several equal sized columns, which is often used in newspapers and magazines.  These types of publications also commonly use a baseline grid, which is a set of horizontal lines on a page that the baseline of all type sits on.

Anatomy of a Grid

Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. Not every one of these parts needs to be present in every grid. (Samara, 2007)

When a grid is being discussed especially online, the focus is mostly on columns and to a lesser extent baselines.  The diagram and definition below gives a foundation for the common language of grids and makes it clear that there is more to grids than columns and baselines.

 

anatomy

 

Format in simplest form a format is the browser window even as page is page is format to a book or magazine i.e. the area which design sits. It defines the live area of a design where type, images, and other media are present.

Margins are the white spaces and seen as the negative space between the edge of the format and the outer edge of the content.  In a composition, the overall tension or lack of it is determined by the proportion of the margin.  So the bigger the margin, the lesser the tension created.

Larger margins create more white spaces and help focus attention on the positive space of the design.  Larger margins also help the eye find a place to rest and can be a good area to place subordinate information.

Flowlines could be seen as horizontal lines that break the space into horizontal bands.  They can be used to help guide the eye across the page and can be used to impose starting and stopping points for text and images to be aligned.

Modules are individual units of space created from inserting rows and columns.  They are the basic building blocks of grids.  When repeated, they create columns and rows.

Spatial zones are fields of adjacent modules.  They are groups of modules that cross multiple rows and columns.

Columns are the vertical division of space on a page.  There could be any number of columns in a grid.  More columns lead to more flexibility, but can also make the grid difficult to work with.  Column widths can be equal or can vary across a grid.

Rows are the horizontal equivalent of columns.  Online, itis harder to plan for rows as the height of the format is often inconsistent and dynamic.

Gutters are the spaces that separate rows and columns or two facing pages.  Typically, we think of gutters as the spaces between columns, but they are also the spaces between rows.

 

The Advantages and Disadvantages of Using Grid Systems in Web Design

More and more designers these days are using grids (e.g. 960px) in their web designs.  While grids originated with graphic design and are very popular in print mediums, they have only become widely used online in the past few years.  However, they have exploded in popularity and can now be found as a component of many, many web sites.

Grids are used to structure a page layout.  They function as a framework on which to place all of the site’s different components.  A grid is literally a framework of pixels running horizontally and vertically, just like the horizontal and vertical lines on the grids we all used to plot points along the X and Y axis in high school geometry.

This allows elements to be aligned horizontally and vertically, which creates columns that keep things organized.  A well-used grid can help a site to feel more orderly and reduce visual chaos.

Using a grid has several advantages, both while designing the site and when looking at the finished product.   A well-used grid can help a designer visualize the proportions that will look best on the site and to achieve a balance with the white space in the margins of each element.  It helps the designer highlight the most important elements without overcrowding the site.

A grid can also provide stability, making it easier to build the site. Since the grid gives a guideline for how things should be aligned and laid out, the site can be pulled together much more quickly than if each individual element had to be placed and aligned by hand. Plus, if elements need to be switched around, this can be done quickly and painlessly due to the structure and organization that a grid provides.

Clean, modern websites can be created using a grid layout; this is a popular trend in web design today. Aesthetically, designing along a grid can be very pleasing, which is why many popular blogs and sites have turned to a gridded look.

One of the biggest benefits of grid-based web design can be seen in its power to direct the user to specific content you want them to interact with.  For example, it can make it so simple such as the site title, logo and even the brand image itself stand out. The grid layout favours this mode making sure the most important content can be seen without scrolling. Combined with the vertical and horizontal axes that come into play, keeping content above the fold allows the grid to deliver the user-friendly experience visitors demand.

Also, many sites incorporate third-party advertisements to generate the money needed for hosting and other purposes. The grid-based system offers a solution to problems that may occur with Google regarding SEO. So when planning in advance, web designers can lay out an architecture that perfectly accommodates the sections and boxes advertisements will be displayed in.  More importantly, this approach can support advertisements in a way that gives them the necessary visibility without overshadowing natural content.  Sites could get in trouble with Google if a site is highlighting sponsored content more than it is organic content.

However, there are some things to keep in mind when working with grids, as they are not ideal for every site. Some people argue that using a grid as a design framework can stifle creativity, as it provides a ready-made organizational structure. For some, particularly those designing sites that need a little more abstraction, a grid can feel too stifled or too contained.

Sites with little content may also want to stay away from grids, as aesthetically speaking a grid framework does require a fair amount of content to work. Without enough content to fill out the grid, it doesn’t make sense to attempt to use one.

While a grid can speed up the design process in many cases, this is not true for all. A grid helps speed up design by providing an organizational framework, but a site which already has an organizational system in place or which has only a small amount of uncomplicated content does not necessarily need a grid to aid in organization. 

 

Responsive Web Design

Grid designs can work wonders for sites that are meant to be viewed on a wide variety of devices. A grid can help produce a site that looks and functions as good on a tablet or smartphone as it does on a desktop or laptop computer. The system these layouts use allows a single set of programming code to be used across a multitude of devices, which makes it an ideal tool for developers as well. Using a single set of code not only makes the site easier to build for designers, but also easier to manage for a webmaster.

responsive

User Experience Implications

Human mind always attempts to find a pattern and system of logic in everything, including visual design.  Consistency is a key factor that helps a designer achieve this with its users. Since a grid is a consistent system for element placements, “sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page (or site), while developers can update the layout in a well thought-out, consistent way.” (Friedman, 2007)

Closely related to this and loosely based on the Gestalt Principle of Closure, the user can better relate with well-planned white spaces since the invisible but definite grid framework is planted in the user’s sub consciousness.  Also, people have a priori understanding of how things work or at least an opinion of how it should work and many times, the best designs take these preconceptions into consideration and a well formed grid system is largely based upon this. With a grid that is well formed and implemented, users will easily perceive importance due to positional contrast and visual hierarchy.

Analyses

The grid creates a systematic and consistent rule for placing objects. It creates a visual rhythm. It makes it easier and more pleasant for the eye to scan the objects on the page. Page designs that do not use a grid often tend to look ‘messy’ or ‘unprofessional’.

www.audi.nl

audi
At the unit level of cells (e.g. 20×20 pixels) with Audi example above where a strict underlying grid is used for all elements on the page, in print design such grids are called ‘modular’ grids.

At the column level (e.g. 4 columns) and the Abn Amro example below where a grid is used for defining the overall layout in terms of columns and margins.  In print design, such grids are called ‘column’ grids.

abn

 

 

In this example with the Abn-Amro shop, it can be seen that different types of grid are being used. Not a strict modular grid, but a grid defining some columns, margins and horizontal evenly spaced guides.

Simple station homepage

simplystation

960px grid with ~16px base line height. 3-column header containing brand banner and at the center the slogan “creates a powerful video site”.

Below is a section split into 4 columns of which 3 have content (mini-banners) and the outer 2 columns are empty.

Finally the Design & web engineering, our philosophy and sustainable concept appear logically in the flow of the visual hierarchy created by the grid.

Company menu

simplystation2

Appears to be a 960px grid with 16unit.  This page mainly has 2 columns from the head through to the body. The footer has 4 columns. 

 

Summary

All grids are functional but not all grids will function properly for every project.  Part of the duty of the designer is to determine which grid will work for each project and how best to implement it.

While it is not the ideal choice for all sites, particularly those that are very simple or very abstract, a grid can be a highly useful tool in designing many sites. Its inherent organizational properties and aesthetic guidelines have helped many designers to streamline their sites and simplify their design process. Using a grid system may not be for everyone, but for many people, a grid system may be the way to go.

 

 

References

http://planmysite.com/blog/the-advantages-and-disadvantages-of-using-grid-systems-in-web-design
http://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/
http://www.designer-daily.com/the-use-of-grids-in-website-design-6639
http://webdesignerwall.com/trends/960-grid-system-is-getting-old
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
http://www.responsivegridsystem.com/
http://www.topdesignmag.com/top-5-benefits-of-grid-based-web-design/
http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/
http://www.tripwiremagazine.com/2012/11/grid-style-in-web-design.html
http://webdesignerwall.com/trends/grid-and-column-designs
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1
“Making and Breaking the Grid” by Timothy Samara.
John O’Nolan – Fully Understanding Contrast in Design (2010)
Jim Krause – Design Basics Index (2004)  David and Charles
Timothy Samara – Design Elements: A Graphic Style Manual; Understanding the Rules and Knowing When to Break Them (2007) Rockport Publishers, Inc.
Vitaly Friedman – Designing With Grid-Based Approach (2007)
 Posted by at 8:04 am

My Web Thesis Project

 Uncategorized  Comments Off on My Web Thesis Project
Nov 282012
 

My idea is developing a website for a client  

Florescence Foods Limited (FFL)

FFL is aim at sourcing and providing the various foods that meet the health needs of consumers. FFL have launch of their first nutritious, succulent and unique Pearl Royal Coconut Water. (The site I will be developing will be talking more about Pearl Royal at this stage and its sale) FFL do have a URL holding page of http://www.florescencefoods.com/ but would like an internet presence i.e. full website developed that show case most especially their first product and their Products / Services The Product Pearl Royal Coconut Water has a facebook presence and twitter (Facebook: Pearl Royal Coconut Water UK. Twitter: @PearlRoyalCoco ) I will be developing a site that will have the twitter feeds coming through it and a possibility of blog (if someone they can commit to updating regularly ), otherwise twitter and regular update of the site for promotions will be the only way to make the site dynamic and way to improve its google rating. I am not 100% sure whether the site will be 100% CMS or a mixture of my design and a CMS backend.

The homepage will have Promotions, links such as; About us, Contact Us , Distributors, where to buy and Benefit of healthy living or Coconut water

Note: I have spoken to my contact Dr Ejim about the timeline I will be working with in order to confirm that its okay with them before we start. I am also putting together a contractual agreement between myself and FFL regarding the timeline and provision of contents and information.

Not sure: FFL do have a third party company at the moment (http://aqua-amore.com/) that are selling their product online. I am not as yet 100% clear whether FFL will want an E-commerce website whereby they could sell their product themselves of they are happy with AQUA-AMORE to continue with the provision of that service.

 Posted by at 1:16 am

Freemium (The Extended blog post)

 Uncategorized  Comments Off on Freemium (The Extended blog post)
Mar 312012
 

Introduction to Freemium Business Model
What is Freemium?
Freemium is a business model in which the owner or service provider offers basic features to users at no cost and charges a premium for supplemental or advanced features.
Give your service away for free, possibly ad supported but maybe not, acquire a lot of customers very efficiently through word of mouth, referral networks, organic search marketing, etc., then offer premium priced value added services or an enhanced version of your service to your customer base.
The word Freemium is combining the two aspect of the business model “FREE” and “PREMIUM”
Free + Premium = Freemium

And was coined by Jarid Lukin of Alacra in 2006 after venture capitalist Fred Wilson came up with the idea
Chris Anderson (Wired Editor in chief) likened freemium to handing out muffins on the street to entice people to start eating your muffins. But with muffins there’s a significant cost to giving away each muffin. With digital goods, you can give away 90% of your product for free, without any cost for those goods.
He says ‘free users’ aren’t free loaders, and that it’s okay to let the minority (paid users) subsidize the majority. Because the free users will recommend to friends, it’s a great form of marketing. And for those paid users, many of them are very strong customers — they may be price insensitive, with very little churn.
Importantly, this means that freemium is NOT the same thing as “premium with a free sample.”
A restaurant that offers free appetizers is not a freemium business.

Why You Would Go Freemium
There are basically two reasons to go for a freemium business model:
Marketing. By definition, having a free product makes it really easy to get customers. And internet economics make this very attractive, because the marginal cost of every new free users will be very low. Free users can also be good marketing because even though a free user might not convert, they can invite other free users who might.
Network effects. A network effect is what happens when a product or service becomes more valuable the more people use it. A phone isn’t very useful if you can’t call anyone else with it. But once everyone you know has a phone, it becomes a pretty valuable thing to have. If you’re in a market that lends itself to network effects you’re going to want to have a free basic product because if you don’t someone else will and will use the network effects to crush you.

What Freemium Needs To Work
According to Phil Libin (Evernote Founder/CEO Phil Libin –whose Freemium company is very profitable), here’s what you need to be able to do to make freemium work:
• Get lots and lots of free users. It seems obvious, but it’s important to keep in mind. Freemium is a numbers game: if only 1% of your users are going to pay you, then you need to have lots and lots of free users (millions, typically) to make that 1% enough money.
• Get all of these users to stick around. Also important, as we’ll see.
• HAVE A PRODUCT OR SERVICE WHO’S VALUE TO USERS INCREASES WITH TIME. This is the biggest thing that most people miss, hence the caps. The value of your service needs to increase the more people use it. A classic example is Spotify, where you create all your playlists and organize your music. Once you’ve done that, as investor Sean Parker says, “We’ve got you by the balls,” and you’re much more likely to pay up. The value of Spotify to you has gone up from being just music to music, your playlists and your friends’ playlists, so paying starts to make sense.
• Keep costs low. Also seemingly obvious but actually a big deal: freemium works because the marginal cost of each additional user is low, so you need to keep your operating costs correspondingly low. Again, internet economics, through things like open source and the cloud, help, but that’s not going to be true for everyone.
FACT: with Freemium vast majority of your users use your product for free and a minority pay.

Examples of Freemium
For Services
My favorite example of a freemium service is when I was at college. No matter what bar I went to, they were offering free food such as burgers, hot dogs, peanuts or fried chicken in hopes they would have us pay for something premium, that being a beer or a mixed drink. Did this work on us? Every time!
Another famous freemium is that of a Kirby Vacuum. Have you ever had someone come to your door and ask you if they could setup an appointment for them to do a cleaning of a room for free? You either knew what was going to happen or you said to yourself, heck yes!
Well if you made the appointment, you knew a salesman would come in and clean a room in your house with an outstanding vacuum cleaner. After they cleaned your room, you hoped they would do more with this great product but instead, they wanted you to buy it. You either said yes, no, or have them call you back because you are thinking about it (which is a no).
How is this freemium service? It is a freemium service because they are giving you something free, that being a clean room, and they are trying to sell you something at a premium, which is the vacuum.

Freemium for Web 2.0
If you take a look at the ever popular Flickr website, they use freemium too. Flickr lets their free costumers upload their photos and other items for the world to see. The unfortunate thing is that people can only upload an limited amount. If you want the premium service, that being unlimited storage space, you can buy it for an extra 24.95 a year.
There are a lot of freemium Web 2.0 properties on the web today. It is a business model that is not going away!
Free Digital Photos – Giving free small size digital pictures free on a website whilst the standard size one had to be paid for
Trillian – the basic service is free, but there is paid version that is full featured

Freemium for Software
There are more and more freemium software programs coming out each day. One of the most popular ones is well, any anti-virus program. They let you use it with great protection. Take for example AVG Free Anti-Virus. You get a great program if you download it but if you want added protection, you must pay 49.95 per year.

 
Things to look out for my considering Freemium
It is important that you require as little as possible in the initial customer acquisition process. Asking for a credit card even though you won’t charge anything to it is not a good idea. Even forced registration is a bad idea. You’ll want to do some of this sort of thing once you’ve acquired the customer but not in the initial interaction.
Don’t require any downloads to start. Don’t require plugins. Support every browser with any material market share. Make sure your service works on various flavors of Windows, OSX, and Linux. In short, eliminate all barriers to the initial customer acquisition.
And make sure that whatever the customer gets day one for free, they are always going to get for free. Nothing is more irritating to a potential customer than a “bait and switch” or a retrade of the value proposition.

Does Freemium Work?
It does. You can tell it works because more and more companies are using it especially in the phone and software world.
Danny Rimer, the London-based venture capitalist with Index Venture said Freemium works because you reduce the main stumbling blocks of product adoption. He said web-based users who don’t have to pay for it will often start evangelizing the benefits to others.

 

 

 Posted by at 9:40 pm

The Bicycle Doctor website Revamped

 Uncategorized  Comments Off on The Bicycle Doctor website Revamped
Jan 162012
 

Currently the bicycle shop looks like this

After looking at this Site I was able to transform it to the one below  on the URL:

http://www.simplyolan.co.uk/bicycledoctor.html

I was able to make the home page and the contact us page.

 Posted by at 1:59 am

I need help!!!!

 Uncategorized  Comments Off on I need help!!!!
Nov 112011
 

HELP! I think this is for David. Please I dont know where to find the Home work in the forum, I dont know how to login into the forum to make comment. I have used it once before but I am lost. Is the login into it the same as my login into wordpress? please help!!

 Posted by at 2:38 pm

3 Examples: Good and Bad Website

 Uncategorized  Comments Off on 3 Examples: Good and Bad Website
Nov 092011
 

Bad Sites

http://www.videosoniclab.com/


  • There is no colour scheme
  • Too many boxes
  • To many things trying to get ones attention at the same time
  • The title of this site was called Home

 

http://www.aiseikai.or.jp/


  • Bad colour scheme
  • Too many Flashing and scrolling stuff
  • To many things trying to get ones attention at the same time
  • The title of this site was called Top page

 

http://art.yale.edu/

 

  • No colour co-ordination
  • Font types dont match
  • Too many frames
  • To many things trying to get ones attention at the same time
  • The title of this site was called Top page


Good Sites

http://www.johnlewis.com/

  • Not too many colours
  • Although there are more than 2 font types, they are justified and used sensibly
  • Positioning and navigation buttons are superb

 

http://www.sainsburys.co.uk/sol/index.jsp

Few colours

Font matches

Navigation button and layout brilliant

 

http://www.ibm.com/us/en/

 

 

  • This site looks very simply but there is soo much in it
  • There are not too many colours
  • The fonts are simple and do match
  • Banners, navigation and links, in short beautiful layout

 

 Posted by at 9:08 am

My XHTML with CSS

 Uncategorized  Comments Off on My XHTML with CSS
Oct 252011
 

www.simplyolan.co.uk

I had to strip the whole site after the comment of last week and start afresh with only XHTML and when that was validated, I added CSS. I will add more CSS as the week goes

 Posted by at 8:20 pm