E-commerce systems such as your website can be used to market and sell to customers, and to provide after-sales support. E-commerce can also be an important part of strengthening relationships and improving the efficiency of your dealings with suppliers and other key trading partners.

Ecommerce content management systems (CMS) are critical for online retailers. Many ecommerce stores rely on CMS systems to maintain customer and product catalog data, perform payments and transactions, deliver online shopping cart features, marketing and search analytics, as well as SEO support.

• platform functionality (many look simple and clean but are not functional)
• SEO friendliness (slim – minimal in their code; easy – simple to implement on-site optimization)

Some of the most SEO-friendly content management systems provide a URL, page Title, meta description and meta keywords field for each page of the site. The ability to add these SEO elements uniquely to each page is a critical one-up for ecommerce optimization.

• shopping cart checkout

Sometimes the process is too long and asks for too much information on too many pages, whereas other CMS are too brief with their checkout process, giving buyers a lack of confidence and motivation to shop elsewhere.

eCommerc CMS key features

• add / edit / delete categories / sub-categories
• standard CMS functionality for pages (e.g. about us, terms and conditions)
• postage and packaging price management
• e.g. by weight, by price, by country
• tax management
• e.g. VAT applied to EU destinations, not worldwide
• stock control
• options to take products off sale / leave available for back-order when stock depleted
• cross selling facilitation
• “if you like this you might also like this”
• customer account management
• emails: order received / order dispatched
• payment gateway integration
• discounts
• offer codes
• typical feature list: http://www.jshop.co.uk/features

other selling solutions

• eBay
• Amazon Market place
• E-junkie
• PayPal
• Affiliates
• Price comparison sites
• Voucher code / cashback sites

Conversion rates

• only 2-3% of eCommerce website visitors buy something – this is the conversion rate
• cart abandonment rates are 75%

 Turn visitors into customers – How to increase conversion rate

targeted market (low traffic with high conversion rate rather than high traffic with low conversion rate)

long tail searches are more rewarding

social media following (FB with many ‘likes’, also builds trust)

price (if your price is higher its obviously less likely customer would buy, unless you are trusted site – loyalty)

hidden charges (shipping, tax etc) – no no! combined postage – yes!

promotions – vouchers after buying in the delivery box

usability (‘don’t make me think!’)

make sure your site search works!

quality of information (large images, 360’ view, video, accurate text, add to cart)

customer service (ph nr, this adds trust as well)

clearly publish return policy

may be to publish delivery time?, guarantee?

customer reviews

secure server connection (padlock)

display security badges

get listed directories (human edited)

put little widget to your site if you got lot of FB fans (how many ppl have ‘liked’ your page widget)

analytics is the key!

Cart abandonment

• strip out navigation and other distraction
• registration optional (even though its beneficial for customer) give an option
• not too much data on check out (you only need addresses and name…)
• show the progress to check out on the top
• postcode look up
• could detect country of origin
• make form completion as user friendly as possible
• foundation using jQuery (consider inline validation)
• offer different billing address
• some carts will time out – no no!; set the time for a day or 10hr or…
• gentle cross selling but no aggression
• provide link back to product
• link back to product as a pop up window so basket wont be abandoned
• review basket
• payment gateway (lot of technical stuff involved but CMS will do it for you) internet merchant account needed for other than PayPal, 10% from the money is held back from you for 6 month in case of any claims – merchant is always at risk for fraud purchases (fraud credit cards etc) [PayPoint - 2.59% transaction charge + 25p fraud scoring + £18 per month service charge + 10% you will see after 6 month]

Defining Content Strategy

Content strategy plans for the creation, publication, and governance of useful, usable content

A content strategy defines:

• key themes and messages

• recommended topics

• content purpose (i.e., how content will bridge the space between audience needs and business requirements)

• content gap analysis

• metadata frameworks and related content attributes

• search engine optimization (SEO)

• implications of strategic recommendations on content creation, publication, and governance

Content should be

• useful

• unique

• authorative

• influence SEO

Content planning

• websites are living things, update content regularly

• define a content release schedule and stick to it

• out of date / unchanging sites lose trust / ranking

• blogs are important because they provide new content regularly

• plan content carefully, remember: useful, unique, authoratitive!!

Writing for the web

• text should be easy to read and follow

• remember who you are writing to (audience demography)

• calls to action

- understand your user’s goals – what action do they want to take?

- understand your goals – what action do you want them to take?

• alternative ways of information presentation

- images (HD, high resolution, wide screen, check the quality! alt text for accessibility. Descriptive filenames aid SEO! Larger images, with descriptive file names and alt text are more likely to rank higher in Google Image Search)

- photography

- diagrams

- videos (HD, host on YouTube and embed in site, no format/compatibility issues – playable on no-flash devices. HTML 5 video coming soon!)

- audio

- NB! accessibility!!!!

Information architecture

• ‘navigation by category’ architecture (sub, sub-sub categories…)

avoid having a particular content page in more than one category

• tagging – tag with keywords! (provides another navigation system, aids site search

- clear heading and title

- ‘active page’

- breadcrumbs

- site map

NB! do not relay on colour alone!

• version control (to restore backup, resolving errors, quality control, customer service)

• meta data (author’s name, date published, date updated)

Style / brand / tone of voice / personality

• brand is more than just a logo and name, it’s the way company’s staff communicate and behave, the style company uses to market itself! Website should be 100% aligned to its offline brand

- refer to documents produced by the brand teams

- define colour schemes

- font style and size

- use of logos

- tone of voice (formal/informal, adults/children; or everyone?)

- personality

SEO

• SEO: Search engines aim to present the user with the most relevant web pages ranked by popularity.
• On-site SEO: How a website itself can be optimised for maximum search engine understanding, exposure and ranking.
• Off-site SEO: The outside influences on a websites ranking. In particular, inbound links and social media signals.

HOW GOOGLE SEO WORKS

(Other search engines have their own ways of working, following a similar format).

CRAWL > INDEX > RANK

• Crawling time
  A search engine spider will crawl the web for information.
  Googles spider is called a Googlebot.
• Indexation time
  In real-time, the spider will analyse, filter and organise URLs to make informed decisions.
• Ranking Time
  The above process generates ranking prioritization for the URLs.

KEYWORD RESEARCH

Keyword Research: Your on-site SEO will revolve around a selection of keywords/phrases. These should be carefully chosen to target what people might type in search engines to find your company. For example if you have a woman’s clothes shop in Brighton, your keywords might include: Clothes, Shop, Woman’s, Brighton, Fashion, Accessories…etc

Keyword Research should be conducted at the initial stages of a project, before writing any content and or building the site.

Compile a list of Keywords for your site.
Your list of Keywords should include:

• A mix of primary words, secondary and tertiary words
• Variations on words
• A mix of broad and targeted keywords

Research is important. Beware of Misconceptions.
It is very common that the client will not think from a customer point of view and therefore use the wrong wording. Especially beware of industry jargon.

ON-SITE SEO

Every page of your site is a unique opportunity to optimise. Write for humans not Search engines.

Keywords should be in the following:

• Domain Name
  Of course this is not always possible but it would be a massive bonus.
• URLs
  URLs should reflect the site structure
  e.g. www.website.com/sport/football/premierleague/chelsea/results
  Creating many pages with different URL names that are also your keywords will pay off better than having dynamic URLs. Use Hyphens to separate words.
• <title> tags
  Considered the most important optimisation factor.
  Primary keywords should be used here especially at the start.
  Describe your whole business in less than 70 characters.
  Do’nt write a list of keywords with commas in between, write it so it makes sense.
  You should have a unique title for each page.
  Do not repeat words.
• <meta name=”description” content=”" />
  This is the text that appears in the Google search results page.
  It is important to accurately summarise your website here (less that 160 characters).
  Not thought to influence SEO but well written copy will increase click-throughs.
  Should be unique to each page.
• DO NOT: <meta name=”keywords” content=”" />
  Give away keyword research to competitors – a strong reason not to use this tag.
• H Tags (h1, h2, h3…) A different h1 for each page.
• <strong>, <em> highlighting
  Thought to help but don’t overdo it.
• Alt Text/Image names
  Always use descriptive alternate text in place of images.
  Always name images with descriptive names rather than ‘001’ or ‘IMG239’.
• Links
  Should describle the destination of the page and be keyword rich.
  Do not use ‘Click Here’ or ‘More info’.
• Main Body
  Aim to use primary keywords in first paragraph of text and then secondary and tertiary keywords in following paragraphs.
  Keyword density: Gentle repetition of keywords or phrases. Aiming for 3-5 words in a paragraph as a very general rule and only when in-context.
  http://en.wikipedia.org/wiki/Keyword_density

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

Internal Linking:

• Internal linking is very important, it builds strength of your webpages.
  You greatly increase the crawl rate on your site. All links are vital to spiders and engine bots.
• Cross-link related content: Links should be added within the main content when there is further information about the topic on another page of your site.
• Do not overuse.
• Links should point to absolute links rather than relative.
• Breadcrumb trails are good to cross-link your site.
• Outbound Links should only point to relevant and high quality websites.

SEO Copywriting:

• Good SEO:
  Keywords are seamlessly integrated into your site.
  Be creative with your writing.
  The reader should never be aware of keyword repetition.
• Bad SEO:
  Keyword stuffing. Repeating keywords.
  Keyword stuffing will be seen as spam.
• Keyword Density:
  2%-4% is safe in a main body of text as a rough guide.

New and Relevant data – Content is King:

This is extremely important. It reinforces authoritative content, which SEO relies on.

• Updating Information.
• New items, images, documents
• Writing Blogs.
  Remember that blog posts should have descriptive URLs, specific to each post.
• News
• Posting Press Releases
• Outbound links leading to relevant data

This all helps give credibility to the site in that it shows that there is original, quality content which values the user.

Useful on-site SEO tips:

• Age of a website?
  Even though it is true that older your site is, the more it is trusted by Google however it is not because your site is old, it is because it has had more links pointing to it.
  The first two months your site is online you might not rank in Google at all, you will be in the “sandbox”
• 404 Page
  Make sure the 404 page contains links to main pages and maybe a search box.
• Site Map (sitemap.xml and sitemap.html)
  Site maps help spiders index your site faster and more efficiently. Make sure it is at the route of your site.
  Google and some other search engines use a special xml format for site maps. You should have two site maps, one for humans and one for search engines (not regarded as duplicate content).
• Robot.txt
  • This is a text file not html which advises spiders which pages not to visit.
  • This is not a security method because anything can choose to ignore it.
  • The purpose of it is for example if you have a duplicate of a page, one for the screen and the other for printing and you would rather one be excluded from the crawling in case of a duplicate content penalty.
  • If you have sensitive data that you would prefer not to have indexed.
  • Also to save bandwidth or loading time, you can tell spiders to keep away from some large images, spreadsheets or javascript files.
  • The location of the file is very important, it should be in the main directory otherwise it will be ignored.

OFF-SITE SEO

• Inbound links
  Each link from another website is a “vote” for your website
  Quality more important than quantity
  Same industry, or related industry is better
  One-way links much preferred
  The target is one-way, unprompted, unpaid for links
• Link generation techniques
  Having great content that people want to link to / share without prompting
  Use share buttons on all content to give people an easy way to link / recommend
  Offer an incentive to link, perhaps something for free, in exchange for a link
  (the “freemium” model supports this)
  Link exchange (although not as valuable as it once was)
  Directories (see below)
  Seek partnerships and promote each other’s services – links and banner ads
  Ask for links from suppliers
• Shares from social media are extremely important and gaining importance
• Avoid…
  Purchasing links
  Link Farms
  Anything too good to be true!

Directories:

• Paid
  Whilst they are a form of paid link, directories whose entries are reviewed by humans, with no refund for declined sites, are favoured by search engines:
  Yahoo Directory
  Business.com
  Best of the Web
• Niche
  Specialise in a particular industry or subject, so have a relevance factor
  e.g. http://www.hotsaucenetwork.com/ – for sites about hot food!
  Same rules apply – choose carefully – human edited directories are more valuable than free for alls.
• DMOZ
  The Open Directory Project, used to be THE place to get listed, due to its human editors. It is still thought to be very valuable, however its reputation has lowered due to lack of consistency between editors, and some categories don’t appear to have editors at all.
  Try once a year, it really can take months to get listed.
  If you don’t get listed, try again but don’t fret, many amazing sites can’t get listed due to inconsistencies in the process.
• Free for all SEO Directories
  There are thousands, of free directories that allow anyone to list their website however these are of limited SEO value, a self-placed link is worthless.
  Choose with care, it might be OK to try a handful but submission to all of them might harm your ranking.
• Anchor text
  When putting your link on an outside website, the text on which the hyperlink is placed, its “anchor text” can be very powerful.
  e.g. if your website is called “greatgadgets.com” but a target phrase is “cheap ipads”, a hyperlink “cheap ipads” can be more helpful than “great gadgets”.
  It is extremely difficult to influence anchor text, particularly in paid directories, but partners and link exchangers might be more amenable to it.

Search Engine Advertising: (Sponsored Links)

Introduction

Grids have become an important aspect of the design process, whether for print based or screen based design. It is essentially a system and set of rules to aid the design process. Grids are used mainly as a way of organizing and structuring your design work, with the aid of horizontal and vertical guides. There is no limit to how simple or detailed the grid is, which allows the designer to tailor it specifically for each individual design. One can choose to use one grid across all designs, or several different ones across one project. This method was once most commonly seen in Newspapers and Magazines, however it is now extremely widespread and common within all areas of Design.

Although grids have been around for a very long time,  it wasn’t until the mid-twentieth century that the first designers of that time such as Linguists, Scribes, Commercial Artists and Printers started to focus on the content, proportion, space and form within their work. One of the earliest examples of the use of grids can be seen in any religious calligraphy texts laid out by scribes, often using modern two and three column grids with typographic variations in weight and colour, for emphasis. Nowadays the use of grids is most common within Graphic Design. There is still some debate going on within the design industry, with regard to the positives and negatives of the use of grids in design. Some designers believe that the use of grids would limit the designer and his creativeness, whereas others believe that the use of grids mainly provides a set of guidelines on which to build a more aesthetically pleasing and well structured design, thus producing a better quality design overall. Graphic Designers have the freedom to design in any way they see fit, yet there is a fine line between good aesthetically pleasing design and bad design.

Grids in Graphic Design

Grids are based on psychological research into human perception of information, focusing on ease of reading and usability as well as aesthetics. Column width is often determined by the maximum word to column ratio, with the optimum word count per line being eight or nine words. There are other determining factors such as the use of type, letter kerning, size, weight and colour, which go hand in hand with grids.

The book has been the most common output of printing from the mid-fifteenth century up till the start of the Industrial Revolution in the late-eighteenth century. There was a variety of grids available yet the grids based on the Golden Ratio in the form of the Golden Triangle were deemed to be the most successful and aesthetically pleasing. The Golden Triangle is an aesthetically pleasing form in which the ratio of the longer side to the shorter side is the golden ratio. This was often combined with the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, etc), which determined the page proportions and margins of the classic book.

The founding of de Stijl in 1975 by Theo van Doesburg was an important movement and influence on the creation and widespread use of the grid. This movement explored form determined by function, favouring minimalistic designs with no decorations and extensive colour, and  rectilinear forms. This became quite popular with designers such as Piet Zwart and Paul Schuitema.

In 1919 the Bauhaus was opened by Walter Gropius, influencing the development of Typography and Graphic Design forever. There was great influence on typographic experimentation in order to achieve more clarity, simplicity and usability within design. During the 1920s and 1930s typography became even more popular and significant within design, with the help of typographer  Jan Tschichold and his two books The New Typography(1928), and Asymmetric Typography (1935). There was more focusing on logic and natural psychological behaviour, which created a system for the design process.

Swiss Typography became the norm for Graphic Design. Everything element on the page followed logic, precision and aesthetics.

“No system of ratios, however ingenious, can relieve the typographer of deciding how one value should be related to another… He must spare no effort to tutor his feeling for proportion… He must know intuitively when the tension between several things is so great that harmony is endangered. But he must also know how to avoid relationships lacking in tension since these lead to monotony.”
Emil Ruder, Typography

“Just as in nature, systems of order govern the growth and structure of animate and inanimate matter, so human activity itself has, since the earliest times, been distinguished by the quest for order… The desire to bring order to the bewildering confusion of appearances reflects a deep human need.” 
Josef Müller-Brockmann, Grid Systems in Graphic Design

Grids in Web Design

With the development of technology and the world wide web, grids have now become a part of the Web Design process. They serve the same purpose as grids within print based design, mainly to help organize and logically structure a web based design for the most clarity, usability and aesthetics. Naturally this involved rethinking the traditional grid systems in order to target on screen specific issues. Print based design is static and fully controllable, whereas on screen design is constantly changing, depending on the device being used, screen resolutions and browsers. Even though the main principles remain the same: to create an aesthetically pleasing, readable and usable interface; the design and grid have to have the ability to morph to each new format, without sacrificing anything in the process.

960px vs 978px

• Total width 960px
• 12 columns @ 60px each
• Each column has 10px left & right margin which forms 20px of gutter space
• Total content area is 940px

The most common and popular grid system for on screen web design is the 960px grid. It is the most favourite grid system as it is currently the most flexible. It allows the designer to quickly split the design into  9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 columns retaining the maximum readability and usability. This grid makes it possible to unify all web design and make it consistently good across the whole web. The problem however is the ever increasing screen resolutions. Although not long ago 960px was an everage screen resolution and still is to some extent, it is now gradually increasing. Along with this the average font size has increased from 12px to 13px, which means bigger text is being fitted into the same 940px space (actual content space). It would therefore make sense to alter the grid in order to accomodate the bigger screen resolutions and bigger font size.

• Total width 1002px
• 12 columns @ 54px each
• Each column has 12px left & right margin which forms 30px of gutter space
• Total content area is 978px

Based on the constantly changing conditions within web design, another grid system was recently introduced suggesting the use of the 978px grid. It does the same job as the previous grid, however it has been updated to accommodate the new developments in technology. Predictably, the grid will never be static, as technology and the web will constantly develop and therefore the grid will have to develop with it.

Baseline Grid

Another common grid still being used is the baseline grid, in which all the text is aligned to the baseline of the entire grid. This process of creating a baseline is slightly more difficult as it involves calculating the line hight of the entire body text to ensure each line aligns properly. This can be seen perfectly on the The Grid Systems website.

Each element on the page aligns perfectly with the baseline, creating a clean, simple and usable user interface with no extra elements or distractions.

Why use the Grid?

There are many reasons for designers to use grids. It is important to convey the information in the simplest and most organized way in order to provide the best usability experience for the user. In order to be able to create this structure a designer needs grids.

However it is entirely up to the designer to decide whether to use a grid or not. The grid is a guide, and is meant to be used as a reference rather than hard coded rules. It is the responsibility of the designer to research the target audience and to decide what approach will be the most effective. A grid can enhance the structural foundation of a website but can just as easily detract from the experimentation and interactiveness.

Examples

Below are some examples of the use of grids in general and personal portfolio websites. They demonstrate the usefulness of grids as well as the limitations.

 Behance

http://www.behance.net/

Behance is a website where users can post their portfolio work and projects for public viewing and critique. With the amount of information needed to be handled the website interface had to be minimalistic and clean, as well as very easy to navigate. And that is exactly what it is. It is divided into a five column grid, however the main focus is on the middle three columns which are wider than the outer two columns. By tweaking the widths and changing the ratios the main focus is on the work of the user rather than the sites navigation, search and adds. In this case the use of the grid was essential in order to portray the work of the users in a professional and clean way.

The website is quite clean yet still remains playful in its unique almost hypnotising and consistent design. There is a limited use of colour which emphasizes the call to action areas of the website, such as the register and log in button, as well as the individual work of the users. The choice of blue indicates the brand is meant for professionals with a specific style of work, not dissimilar to the website itself.

Once inside the website, looking at a specific project the layout changes to a two column grid. Once again the section displaying the users work has a much wider column, this emphasizing this section more than the general user information. The column is also located on the left hand side, and this would be the first area to focus on. The call to action colour remains consistent with the homepage, which makes it simple to navigate.

Tawni Martin

http://www.tawnimartin.com/

Tawni Martin is a freelance Web Designer that took a slightly different approach to designing her own portfolio site. It doesn’t follow the stereotypical minimalistic monochromatic designs, and in this case it showcases her full potential as a web designer. The website has a main navigation at the top of the page that is aligned to the left, which goes against the human instinct of reading left to right. However it is still very clear and therefore easy to navigate. The header image on each page serves as the main focus point, although the text seems to wide to read comfortably.

Further down the page the layout becomes a two column grid, the main body text is located in the left column. Focus is instantly on the slideshow, which provides a sneak peak of the portfolio. Information and contact details are located in the right column.

The footer in my opinion is the least successful part of the website. There is a lot of technical and graphic skill in creating the form and site map, yet the footer feels slightly out of place and out of balance with the rest of the website. Perhaps the header image outweighs the footer too much.

Once inside the portfolio the main body text is split into a three column grid, but remains simple to navigate. The execution of the portfolio preview could have been better, as it seems out of place. Not enough elegance and simplicity to justify the highly graphic interface. The call to action areas are highlighted with vivid colours, however the header image is also a vivid colour and is a portfolio piece in its own. I feel like there is a bit too much going on on the portfolio section and borders slightly irritating.

The about section returns back to a two column grid, however a secondary navigation tab is introduced. The current page is highlighted with a vivid blue, which fits perfectly with the header image. The body text is too wide to read comfortably and very text heavy in general. Perhaps keeping a three column grid as on the portfolio section would have worked better in this case and made the body text more manageable and elegant.

Level Flow

http://www.levelflow.com/

Level Flow is an online portfolio of James Hamilton-Martin, who does Web Design and Motion Graphics. The website is very simple and easy to navigate, it uses a simple two column grid which helps keep the information down to the most necessary. The call to action doodles are humorous and interactive, keeping the main attention on him as the product. By displaying a ‘new’ tag, the viewer gets the feel that he is quite involved and active as a designer within the industry and constantly developing and adding more work. The navigation bar is probably one of my favourite parts of the entire website, just because of its untraditional style and personality. The whole website creates  sense of work in progress, doodles, creativity, drawing board etc.

The use of monochrome colours for the entire website means the navigation becomes the main focus point. It demonstrates a range of different skills and areas of interest. This designer is diverse. The work speaks for itself, with the preview of the website working very smoothly and precisely the way you would expect.

Only bug I noticed was that the about page would keep popping up for a brief millisecond every time the user clicked on one of the navigation bars.

Colourful Visuals

http://www.colorfulvisuals.com/

This is an online portfolio of Ace Bobadilla a Digital Graphic Designer. The user interface is very clean and minimalistic, using mainly a single column grid for the entire website apart from the three column grid used for the gallery. Despite the fact that the body text spans all the way across, it is still easy to read as there isn’t a lot of it there. In this particular case it works just fine.

The main focus is on the welcoming ‘Hello There’, which instantly portrays the personality of the designer. The call to action areas as well as important information is highlighted in the same bright vivid colours as the welcome typography.

The single image view is very smooth and turns the whole website into a single column website, keeping the focus on the work itself. Everything is smooth running, information is well organised and thought out.

Webz Guru

http://www.webzguru.net/

This portfolio website belongs to a company specializing in Communications and Technology. The whole user interface is one continuous design, that scrolls down seamlessly either manually or via the navigation bar at the top. There is a mini navigation as well as ‘back to the top’ link on every slide. The website design is monochrome, keeping the focus on the work and the brand. Only the most important information is provided, and follows a very logical hierarchy. The grid system used varies from a one column grid to three column grid. Each slide was though through carefully, in order to find the optimum way of providing the information. Considering both legibility and usability as well as aesthetics.

The technical skills and graphic skill are quite strong, and the use of individual grids for each page made it possible to maximize readability and usability. The single scroll function unified the design overall and made it more aesthetically pleasing.

Volume One

http://www.volumeone.com/

 ”Volumeone is a design studio that brings a multi-disciplinary approach to the creation of visual solutions for print, motion and digital media. Founded by Cranbrook Design graduate Matt Owens, Volumeone strives to synthesize visual exploration and smart design solutions while maintaining the highest level of design expertise and freshness of approach. All design challenges involve a dialogue between client, creative and the needs of the project and Volumeone works to illuminate and open up this dialogue in an effort to develop the best solutions possible.”

This studio has a very simplistic and elegant website. There are no colours being used anywhere other than the portfolio images, which keeps the attention on the work. They used a two column grid for the header information section, with the focus being on the latest work as well as the news. The rest of the work is displayed in a three column grid.

Once you go into the portfolio section, the layout becomes a three column grid. All focus is on the work, there is no other information whatsoever to distract the viewer. The work is bright and enticing, inviting the user to explore further.

The detailed view of a portfolio piece is a two column grid, with the summary located on the left and the detailed information located on the right. Even though the work is very bright my eye was drawn to the small summary briefly before smoothly focusing on the work itself.

The about section uses the same grid system and work in exactly the same way. It is a bit text heavy with slightly too wide body text for a comfortable read. However it fits with the rest of the design perfectly. Even though the website is very minimalistic, the work is quite the opposite. There is no need for words, the work speaks for itself.

Conclusion

There are many different kinds of grids out there, but I think the most important thing to remember is to use them as a reference and to adapt them to each individual design. As a designer one needs to find what works best for our own work and to create our own system to help organize and better convey the message. The grid is either an enemy or a friend.

References

Websites

http://www.volumeone.com/

http://www.behance.net/

http://www.webzguru.net/

http://www.colorfulvisuals.com/

http://www.tawnimartin.com/

http://www.levelflow.com/

http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=620

http://designfestival.com/an-introduction-to-grids-in-web-design/

http://www.apaddedcell.com/beginning-web-design/design/using-grids-web-design

http://www.designbygrid.com/

http://goldengridsystem.com/

http://www.thegridsystem.org/

Books

Ed. Wiedemann, J. (2005). Web Design Portfolios. Italy: Taschen.

Finished essay in the form of a single-page design, still need to tidy up some of the styles though.