Tuesday, April 09, 2013

Standing on the shoulders of giants

Image: 'untitled
Found on flickrcc.net

This lesson is about rapid prototype development using some of the tools we've explored so far (and a couple of new ones).
Let's say you've been given a brief: 'build a website about x' (x could be anything, today lets say it's the samsung galaxy phone). Where do you start?
The way I see it you need 3 things for a website to work:
  1. A usable site structure
  2. An appealing design
  3. Good content
Let's tackle them one at a time.

Site Structure

I've put this first because it seems to be a stumbling block for many people. What pages will your site need and how will you lay them out? Often a customer will have an idea about what pages they need. If not you might build a site around the activities it supports (e.g. looking for products, reading feedback about them, putting them in a virtual basket, looking at your basket, purchasing, tracking delivery), or it could be layed out along company lines (departments, regions etc).
But what if, like us, you're starting with a blank slate? A great way to lay out a site is to find out what people are interested in and go from there. If you had the money you could hire a marketing firm and do some work with focus groups. But if you're cash strapped Google has a great tool in it's adwords product: the keyword suggestion tool (to use it you may need to sign up for an account). Put in your starting term (in this case: samsung galaxy), tinker around with the settings  and you're away:

Looking at the results you'll see what people have been searching for (and how many searched for those terms). If you're interested in making money from running google ads you'll also see which terms are compeditive (i.e. have advertisers competing to put ads on your pages). When sorted the results for our samsung galaxy query look like this:

From here you could refine your search by clicking on any of the search results, or just look through the list for ideas. Looking at this list I'd say we need top level pages for the Galaxy A, S, S2, S3, Ace and Tab. By clicking on the dropdown next to the results and selecting 'Google Search' you can see what other people are writing about the subject, and also (at the bottom of the results page) see some more suggestions. Here's what comes back from 'samsung galaxy a':

These would make good second level pages (i.e. pages linked to from the top level 'samsung galaxy a' page.


We've already had a bit of a look at fast tracking design using Lavish. We can take this a step further by using one of the bootstrap example templates. To use one of these, open the example then save the page to your local drive.


If you're starting from scratch the quickest way to put in content is to find stuff other people have created and made available. That means content that has no copyright (public domain), or limited copyright (Creative Commons).
All the wikipedia content is released under a Creative Commons Attribution-ShareAlike License so there's a ton of text to begin with (don't forget to add the attribution though).
For media (music, pictures, video, clipart etc.) there's a range of sources. A good place to start looking is on the Creative Commons search page. I used flickrCC.net to find the image at the top of this post.
 Using pre-made content is a good start, but you'll get no credit from Google for recycling stuff they already know about. To get some ranking you need to add your own information, and/or get your visitors to add to it.