SkillSwap Redesign | May 7, 2005

The website for SkillSwap, the peer-to-peer training organisation I run, has been looking tired for a very long time. I have ambitious plans for the site but have neither the time or programming skills to accomplish everything I want to do on my own. As such, the site hasn’t changed since it was created over two years ago, and it really shows. The dated design has been a real thorn in my side the last year, so the other night I knocked up a quick, interim design. It’s very simple and more a re-skin than a redesign. However it should last another 6 months until I can find the time and resources to redesign the site properly.

Screenshot of the new SkillSwap desgin

Comments (17)

Blogging from the design SkillSwap | December 8, 2003

Tonight's SkillSwap event is entitled "Everything you wanted to know about graphic design but were afraid to ask" and will be presented by Lloyd Raworth.

I'll be blogging live from this event so please bare with the sloppy spelling and grammar.

William Morris is the farther of Graphic Design. It stems from the printed word. Books were flat and text heavy. To make them look nicer, people would try and jazz up books with gaudy type effects. However Morris felt that type was beautiful in it's own right. He created a number of type faces and would use space to create simple yet beautiful books. At the time Art Nouveau, photography and Japanese art was starting to influence the way people looked at the world. Also the Industrial revolution had a huge effect, encouraging people from around the world to examine the state of the world.

A group called the Bauhaus created alphabets that only had lowercase letters. At the time, Gothic text was the norm, but many new typefaces were created. During the Nazi years, many of these people emigrated to the US. They were involved in everything from architecture to product design like the coke bottle.

In the 50's advertising was very crude. However in the 60's people started using psychology and science to hone adverts. This grew in the 70 and 80 and people started using demographics. However these days demographics have started breaking down as the market fragments. Now it's more difficult to segment people.

These days instead of targeting a specific consumer group, they try to create an aspiration that works across groups. Advertising has got very sophisticated and work across many media.

Many designers hanker after the position of lawyers or doctors. The difficulty is to get them to write a brief is sufficiently tight enough to get the job done, but loose enough to offer the designer some creative solutions.

Designs need to have their own identity and their own brand. When designing something you need to work out the individual identity of the product or service. Unless the client is a professional and are used to working with professionals they often don't know how to handle design processes and have difficulty expressing the identity of their projects.

To aid comprehension, layout needs to help peoples eyes flow over the information without interruption. Often it's only tiny details causing problems, but often it's small details that matter. With layout you'll have a story. Images and text.

Whitespace isn't just a gap. It's space that's being used in a meaningful way, not just the absence of space because of an absence of content. Part of the designers job is to decide what's important and what's less important and structuring the information. Every-time the reader has to stop and work out what's going on, it causes them problems. By laying out the material in a different way you can make the material much easier to understand. The stuff that's important needs to be made to look important, and the stuff that's less important needs to be made less important. Good design helps present information with the minimum of effort. For instance, people use pull quotes etc. as a means to help information jump out so people have an idea what the topic is without having to read all the text.

Market research can be used creatively. It can be used to help you make creative decisions about your audience. However it's often used to put boundaries on a project and this can often bind the creativity of the designer.

Visual benchmarking involves grabbing images, textures, shapes etc. from a variety of sources and asking the clients to choose which ones best sum up their product/service. It can help the designer get a better understanding of the client. Once these are set you can use it as a mood board to give the designer inspiration.

Lloyd is setting a quick exercise. He's going to pretend to be the client and get the attendees to ask him questions about his business then go off and create a press ad or banner ad.

Lloyd talks a little about methods to stimulate creativity. Many people use brainstorming but often more structured methods are needed. Edward De-Bono came up with the idea of using quotas. For instance, setting a limit of 4 ideas help you focus on the job at hand. When you're being creative you shouldn't be analytical and critical at the same time. Giving people roles to take on in the creative process can help people break out of their day to day roles. De-Bone used a method called 6 hats where each person would take on a different role in the creative process to help stimulate creativity.

There has been lot's of philosophical discussion and theory about colour. Colour needs to be used sensibly. What colour is used where and why. For instance if you want to attract attention, used a bright colour. If you want to separate things you can used different colours, whereas if you want to associate disparate things with each other, use the same colour. Whatever your doing, colour should be used deliberately for a reason, and not left up to chance.

And on that note, it's time to wrap up and head for a drink at the Grand Central.

Comments (3)

Blogging From the "Design Process" SkillSwap | October 6, 2003

I'm going to be blogging from tonights SkillSwap event entitled "Design Process - Evolution of the Wireframe". However I'm gonna try and keep this one concise as I spent more time blogging and less time actually listening to the last talk.

The talk is being given by Web Producer and local blogger, Richard Rutter of Multimap.com.

Any project will go through these 5 stages.

Websites can be one of two things, hypertext pages or web applications.

The user expirience is made up of the following parts

Because it's very difficult to specify everything at the start, you need to iterate through the design process.

Teams can be big. They can involve lot's of people from different backgrounds. What's needed is some way of communicating what's going on in a project to all these people.

Richard explains how he used to work as an engineer building oil plants and how everybody would refer to a PID diagram. This would be something that everybody could refer to, use and understand.

Jeffrey Zeldman defines a wireframe as:

Functional visual storyboards showing the proposed elements in relation to each other, but not in any way indicating how they will eventually look and feel.

Richard shows some examples of wireframes. Pages with blocks indication the position of various page elements like site logo's, global nav, content areas etc. Richard shows wireframes built using powerpoint, freehand and also a html wireframe.

The good thing about doing wireframes in html is that they are interactive. The links work and you can actually start to feel how the site is working. You can use them to run user tests and the wireframes then become a non-functioning prototype. You can even turn your wireframes into the final site.

On his html wireframes, Richard uses dhtml to show and hide various parts of the page to various parts of the page to various people.

The talk then opens up into a general discussion. Around 4-5 of the people present use wireframes on a regular basis and discuss the benefits of using them. They allow the clients to know exactly what they are getting up front. some people only use tec specs but many clients will not fully understand them. They can be difficult to read and it's easy to miss things out. Wireframes can be great discussion points and enable you to plan applications more effectively. Wireframes help create a more iterative process rather than a prescriptive one.

There is some concern that wireframing takes quite a bit of time and many people can't afford to do them. However a number of people feel that wireframing actually cut's down the time spent. You spend more time in the planning phase, but much less time in the execution phase. Clients know what their getting up front and it's much easier and cheaper to make changes to the wireframes than it is to change the completed application.

There is some discussion about the benefits of html wireframes over paper wireframes. It's easy for people to write comments on paper wireframes. Some people also feel that it's quicker to make paper wireframes. Also it's easier to create paper wireframes that cover all eventualities. However html wireframes can act as excellent non-functional prototypes and allow for easy testing. Also if done well, these wireframes can form the basis of the actual site.

Basically the type of wireframe you make depends on a number of things and is usually down to personal preference. However most people agreed that wireframing was an extremely useful tool and one that could bring tangible benefits to their web design process.

The session winds down and we all head to the pub.

Comments (9)

Blogging from the SEO SkillSwap | September 1, 2003

Just to let people know that I'll be blogging from tonights SEO SkillSwap event. I've never blogged live from an event befor to please bare with me. My spelling is really poor and I'm not a fast typer. So sit back, relax and if your reading this live, remember to hit your refresh button every now and again.

SEO is the art of getting high rankings on the major search engines and directories for relevant search terms. The main gola is to drive site conversions.

Need to think about your potential users and what search terms they will be searching for. Also look at your competition to see what search terms they are targetting. Rosie shows CityFruits.com as an example. She goes through the source to examine what search terms they are targetting. In this case it's "fruit baskets".

Need to make sure your search terms are targetted. "Computers" for example is not very targeted. "Buy new computer" is much more targeted.

Number to tools for search term research:

Rosie explains how to use each tool and goes into some detail explaining wordtracker. It provides a host of info about terms like how many searches are done on a particular term, how many compeating pages there are and which keywords are the best to target.

Try to pick search terms that will be easy to build into the content of your site.

Rosie has got everybody doing a short 20min excersise. People are researching their keywords using the tools Rosie has mentioned.

A hush silence has decended upon the room!

With the task now finished we start to look at what to do with these search terms.

The main factors to consider are:

Textural content is the most important part of SEO.

Put the search terms as high up in the page as possible, and preferably above the main nav. Spiders don't want to trawl though loads of code to get to the content

Try to optimise each page for no more than 3-4 searhc terms.

Have around 250-500 words per page and place the search terms every 200 words. Very difficult to write good copy and stay within these rules.

Use the search terms in different ways, e.g. page titles, headdings, em tags etc.

Common problems incluide:

Not enough text on the pages. Content needs to actually be text, and not flash or graphics. Harvey Nichols is a nice looking site but is all in flash so has no textural content that the SE's can happily index. Harvey Nichols has tried to get round this by having a text version of the site.

Hidden text is a big no-no. Tiny fonts, text of the same background colour etc are all out. The SE's are getting wise to these tricks. Anyway it's much better to have a page of relevant content than to hide content and use tricks.

People are now doing another 20min task, writting a page of copy, 250-300 words long, using the above rules in combination with the search terms researched from the eairlier task.

While people are writting their copy, I wrote a simple SEO bookmarklet a while ago which measures the keyword density of a page.

Now we're talking about how to make a site search engine friendly. First off the SE's like to find sites via following links. It's a good idea to use text links in your nav, especially as link text is taken into account by the SE's when ranking.

Try to keep the overall search term desnity across the whole page high. This means keep things like complicated nav bars to a minimun.

Jeremy Keith designed the G2Blue site. The Nav is a very good example of a well made SE friendly nav bar.

However the Stenaline site has a very complicated nav bar.

Dynamic websites can cause problems with some search engines as they can't follow complicated links. SE's generally don't rank dynamic content pages highly because the page content changes on a regular basis. To combat you can either create static versions of the pages or use thinks like apache's mod rewrite to create spider friendly URL's.

Automatically generated doorway pages can be a bit of a pain. An example of this would be this doorway page.

Informational pages are better. Here is a good example of an informational page. It's important to have informational pages linked to from elsewhere in the site.

Content in a frameset is not very good for search engine. If the site must use frames, use the noframes tag to add relevant content.

Another common problem is excess coding. Complicated table structures, javascript etc can be a problem. Keeping Javascript external and using CSS for design can help keep filesizes down, and thus search term density up.

Your top level domain is important. If you are promotiong to UK search engines, choose a .co.uk domain name. If promoting globally use a .com. SE's like google may be able to tell where a site is hosted and may take this into account when indexing your page.

Title tags are very important. Meta Description tags don't really help your SE position but some Se's still use this as a description when displaying your page in the results. Meta Keywords are less important. They were once used heavily by spammers so aren't that useful now. Try not to repeat search terms in your keywords more than 3 times.

Alt tags are a useful place to put keywords, but don't stuff them with keywords.

Much better to promote each page for only 3 key search terms. This will give you much wider relevancy on each page. Rosie promotes the more general search terms on a home page and the more specific search terms on deeper pages.

Anything created for a search engine and not the user will be considered as spam by the search engines. This includes redirects, tiny text, mirror content and cloaking.

Link popularity plays a major roll in the popularity of your website. They will drive extra traffic to your site and will improve search engine ranking.

SE's will take into account the link text you use to link to internal pages of your site. As such it plays a huge importance to your page rankings. The same rules apply to incomming links comming from external sites. Getting incomming links is important. Outgoing links is also important. Links to good quality sites mark you as a hub site and this can increase your ranking.

Search using your search terms and create a list of sites you would like to link to. Any site with a page rank over 4 is worth linking to. Also consider submitting your site to industry related directories.

Start by adding a link to your targets site. Contact them, explaining the benefits of linking and ask for a link. Some people these days are paying people to have links to their sites.

If your site has lot's of inbound links, it will probably get found by the SE's. However it could take some time to be found. You may have to submit your pages manually.

When submitting to directories, make sure you have search terms in the title and description.

You must manually submit, otherwise you risk being droped or banned. Only need to use the top search engines. Don't fall for people offering to submit your site to thousands of SE's.

DMOZ/open directory is probably the only free to submit directory worth submitting to. Yahoo and Looksmart are pay-for-submission directories and in the UK it's a one off payment. Make sure you follow all the directories submission rules. Read how a directory editor lists sites and use a similar language. It cut's down the chance of your description being edited. A listing in Yahoo will increase your link populartity and can be the difference between a first page and a third page ranking in a search engine.

Using subdomians may allow you to submit more tan once to a directory. Multiple sub domains could alos help your link popularity.

Many SE's still have a free to submit often. However many have paid submission schemes which can speed up spidering time and frequency.

As stated above, link popularity is important. Use your URL on emails and posts to newsgroups and forums. Also consider writing articles.

Pay per click schemes are good for short lengths of time, but are costly over the long term.

It's a good idea to track your position on the search engines and keep an eye on what search terms people are using to get to your site.

Phew, and that's it!

Hope there are not too many spelling mistakes and that you've found it useful.

Big thanks to Rosie Freshwater from G2Blue for a really interesitng talk.
If you're interested in future SkillSwap events, feel free to drop by the SkillSwap site and sign up to our newsletter.

UPDATE: Rosie's notes are now available to download on the SkillSwap site.

Comments (8)

Intro to Flash SkillSwap | August 19, 2003

I've just come back from the latest SkillSwap event, and I have to say it went very well. Pete Barr-Watson of pixelfury gave an excellent "Introduction to Flash" talk and even I learnt a couple of new tricks.

For instance, when using the rectangle tool, If you click and drag to create a new shape, using the arrow keys before letting go of the mouse button will change the corner radius. Very neat. Pete also gave a very quick insight into how people like Kerb (the company Pete co-founded) create their great looking manga-esque characters using very simple shading techniques. For more info Pete wrote a recent article about the subject in Computer Arts Magazine (although I don't think its on their website just yet).

Pete has already expressed an interest in doing a more advanced flash talk, something which I'm very keen on. Also at the end of the month we've got a Search Engine Optimization talk by local SEO expert Rosie Freshwater, which I'm personally looking forward to. SEO is still considered by many people as black magic, so am expecting it to be a very interresting and popular talk.

So it seems that the SkillSwap idea is starting to take off. People are finding the talks very useful and I'm getting lot's of positive feedback. There seems to be enough people interested in giving a talk to keep things going for a while, and the more talks we do, the more interest they generate. Basically the SkillSwap concept seems to have a lot of potential and is definitely something I could see happening in other towns/cities with a strong web design community. So if anybody is interested in running a SkillSwap event in your local community, please feel free to add a comment to that end or drop me a line.

Comments (0)

SkillSwap Meeting | August 12, 2003

Had a very productive meeting last night with a group of local web people to discuss the possibility of some of them doing a SkillSwap talk. For those of you not familiar with SkillSwap, it's a local project I've set up which involves people volunteering a couple of hours one evening to teach a subject of their choice to a small group of their peers. Basically as a means of bringing free training to the local community.

Last night everybody who attended seemed keen to do a talk and here is a list of the possible topics people expressed an interest in talking about.

Comments (1)