Ben Willis Design Blog

The Technicalities of Creating a Drum Tutorial Website

Ben — Wed, 12 Jan 2011 03:45:54 +0000

After designing the logo for Grow and creating a website for the Grow Community Team, it was time to focus on my major project again. This post will look at the steps I took to research, organize and experiment with the equipment required for the project.

The Plan

Click to see my electronic drum kit

I was at a stage were I knew what I was going to do and roughly how I was going to do it. The time had come to become more specific and start looking for the equipment required for the project and how I could integrate it in a way that had never been done before. The foremost issue that concerned me was the audio quality. I could teach the drums alright, but I decided the audio quality of the drums needed to be better than any other company out there. To get the best possible sound, I knew I needed to hook the kit up to the computer in some way.

Linking the Drums to the Computer

I have an advantage over most other online drummers, as I will be using an electronic kit. The material on the heads is known as mesh and the cymbals are a black rubber. The sound produced is clear and can be listened to through a set of headphones. The problem I faced was linking the kit up to the computer. Upon several internet recommendations, I ordered the M-Audio MIDISport, which is a MIDI Interface with 2 MIDI inputs and a USB output. It was important that the device had two inputs as my drum kit uses two brain modules – the devices that all the drums link to. The brain then triggers the sound to be played. Most electronic kits have one module, but as I have so many cymbals, I use two. Two 10ft MIDI cables were also required to link the M-Box to the Brains.

Click to see the MIDI electronics I bought to link the drums to the computer

Audio Quality

The tricky part was to make the computer play a sound exactly when the drums were hit. The drum modules would usually play these sounds but they didn’t offer a recording and editing facility, which is why the audio needed to go into the computer. I stumbled across two programs that drummers can use to trigger sounds when they hit the drums. The first was Addictive Drums by XLN Audio and the second was EZ Drummer by Toontrack. I was nervous to see whether either of them would work with a macbook. I was also very curious about the sound quality of each. I watched countless videos and reviews on YouTube and even downloaded the trial version of Addictive drums. I was impressed at how easily it integrated with Garageband for Mac but couldn’t get the sounds to trigger once connected to my drums.

Click to see the Addictive Drums Software

After a bit of research I discovered how the drum programs work. They take each drum as a note on the digital keyboard of garageband and relate that note to a pre-recorded drum sound. For an example a “C” could be a Tom hit whilst an F# could be a snare drum hit. I brought up the keyboard in Garageband and hit each drum individually to see what note would play. Upon hitting a crash cymbal a tom sound would play and everything got very confusing, so I noted down what notes were coming in and what notes they should have been.

An excerpt from my MIDI-Map

I couldn’t figure out a way to change these notes in Addictive drummer or Garageband. I checked if they could be changed on the drum modules and I hit jackpot! After configuring each drum to the right note, Addictive drummer worked great. I was only given a limited number of sounds though as it was a demo. Next, I took the plunge and got EZ Drummer, based on reviews.

I found EZ drummer much easier to configure and work with. There was a large number of sounds to choose from, and the “drumkit from hell” kit seemed perfect for my project.

Click to see the Toontrack EZDrummer software

Sound Quality Tests

I realized the power of EZ Drummer as it made my playing crystal clear (even the mistakes). The great thing about it was that these mistakes could be easily corrected by moving the note backwards or forwards slightly on the timeline. I felt this should be kept to a minimum, as using the computer to edit the timing wasn’t giving a true representation of what was being played.

I did a number of tests to compare EZ drummer with the stereo sound I would have been getting, had I not been using EZ Drummer. The sound files below are badly played but you will get an idea of the different kind of sound EZ Drummer gives

I decided that the best option was to use EZ Drummer to record my cymbals and drums. The next step was to test the audio in a song-type environment. I recorded the drums and added guitar in Garageband. The song is “Hellish” by “This or the Apocalypse”:

This or the Apocalypse intro

Lighting

As the branding is very dark, I thought this mysteriousness had to come across in the videos. Gabriel at UUJ imagined a black setting with huge spotlights coming down on the drum kit. I shared his vision and I went away to see what was possible.

Gabriel Recommended Calumet photographic on the Boucher Road, which was a great call! I went with an open mind to see what sort of lighting they offered. I was met by a friendly sales rep called Angus. He was very helpful and demonstrated the kinds of lights he would recommend.

Click to see the picture I took of Calumet Photographic

The first was the Paglight C6, a portable light that’s often used in interview-type scenarios, to light up the interviewee.

Click to see Angus demonstrate the Paglight C6

I was impressed by the portability of the device, but it wasn’t bright enough to illuminate an entire drumkit. Angus then reached for the Bravo V300 300W light and gave me a quick demo.

Click to see Angus demonstrating the Bravo 300W light

The Bravo was certainly better than the Paglight and actually cheaper. I was informed that Calumet only rent out Photographic lighting and not continuous lighting, so I would have to buy the lights. I was a bit shocked as the lights were fairly expensive. I decided the best idea was to go home and search the internet (I went on to purchase two 750W softboxes from a recommended seller on eBay)! Before leaving Calumet though, the materials on the back wall caught my eye and Angus showed me over for a closer look

Background

To fit the sleek branding of Deadbeat Drummer, I felt a black backcloth would be necessary, to take the attention of the walls and divert it to the bright white drum heads! The muslin drape below comes in 10 x 12ft or 10 x 24ft. I decided to leave it and left the shop buzzing with ideas.

Click to see the Black Muslin background available from Calumet

A few days later I went on search for a cheaper black backcloth. The first stop was the Spinning Wheel in Belfast. The second was Paragon in Donegall Pass. Both were ridiculously expensive for the size I required.

Click to see the types of material sold by the Spinning Wheel in Belfast

Visuals

With the sound sorted and the lighting in progress, I did a quick test to see how the audio from EZ Drummer would match up with a low-quality video from my FUJI Finepix Z100. The result was good, but the static camera lacklustre. I used pink drumsticks in the video below for no other reason than visibility, I can promise you that:

A Different Approach to Video

I thought for days about how I would get the best camera angles possible for drummers to almost see what I see on the drum kit. The idea hit me of using a point-of-view camera attached to a helmet to do this. A bit of research led me to the Contour HD helmet cam and the GoPro Hero HD. Both are used primarily for extreme sports, skydiving and motocross.

Using a head-camera to teach like this had never been done before. An hour later and I had received an email from an eBay seller acknowledging my payment. I took a few snaps at my drumkit to see how much of the drums I could get in:

Click to see the type of shots I will be achieving with the GoPro Hero

Other angles

The helmet camera wasn’t going to be the only angle I’d be using, as my previous test with a static camera had proved how boring a standalone camera could be with no other shots.
I took a few pictures of the angles I thought students would find most beneficial:

Click to see the rear view camera angle I've been experimenting with

Click to see the angle I will use for intricate foot sections

Camera and Lighting Setup Ideas

With softboxes on the way and a camera (from loan of a friend) guaranteed it was time to sketch out the positioning of some of the angles I hoped to achieve. Putting the lights in the wrong place could make the video worse rather than better. I thought about the different viewpoints and jotted down my favourite ones, were the lighting isn’t facing directly into the camera.

Click to see this camera angle

Location

The plan had been to use my Granny’s garage to record the videos. However, the freezing cold winter had knocked out the electricity in the garage and I need somewhere else. I phoned about and setup a viewing at Own O’Cork Mill off the Beersbridge road and at a worksop in Craigantlet. The Owen O’Cork Mill seemed more like a haunted house and the caretaker admitted that the winter weather had caused a few leaks and burst pipes. Alarm bells rang in my head, as the amount of electricity I’d be using plus water did not make a pleasant scene in my head. I took the Craigantlet workshop which was spacious, dry and affordable.

Wire-framing the Site

With the Major Project Proposal due within days, I began wire-framing the site to show how the site would be laid out. You can see the wire-frames below.

Click to see the home wireframe

Click to see the about wireframe

Click to see the videos wireframe

Click to see the store wireframe

Click to see the forum wireframe

Grow – A Website Development Process

Ben — Sun, 02 Jan 2011 01:04:57 +0000

In the last post I explained my logo design process for Grow Community Gardens. This post is an overview of how I designed the Grow Community Gardens website, coded it in HTML and CSS and added wordpress integration! You can find the final version here.

Website Background

In the last post I briefly touched on the kinds of websites Siobhan liked. They were:

Her two least favourite were:

I wondered what is was that parkrun and communitygarden have in common that I could try to recreate and improve upon in my site. I flicked back and fourth between the two sites and concluded that they were both fresh, white, clean and had definite coloured shapes with no blurry edges. Both had horizontal navigation and a layout that was simple and easy to follow. The sites did not contain clutter or distracting adverts. These were all guidelines for me to follow that were more likely to please Siobhan than something completely different. I didn’t want to copy the sites exactly, but drawing ideas and inspiration from them seemed appropriate as a framework to start of with.

I felt I knew the aim of project well enough to make a start. I knew the problem that had to be solved and the goals that had to be achieved. The mood of the site had to entice potential volunteers and sponsors and impress people enough to want to be a part of Grow in anyway they could.

Wire-framing + inspiration

I sketched the wire-frames I had in mind out. The home page was to include an intro, recent blog posts, links and a weather forecast. The other pages would all be full width apart from the news section, which required a sidebar to show the most recent blog posts. Each blog post would also require a featured image and links to other posts. You can see the wire-frames below:

Click to see this Homepage wire-frame larger

Click to see this Pages wire-frame larger

Click to see this News wire-frame larger

It was Meagan Fisher at Build Conference 2010 who talked about gathering inspiration after the wireframing stage. She would collect everything from images and textures to full websites and videos to gain inspiration for the project at hand. I set about doing that by taking pictures when I was outside of the trees and grass and taking screen shots from the internet. Here are three from my collection of around ten:

Click to see these amazing nature inspired wallpapers

Click to see these lovely icons on the Apple Website

Click to go to the green globe ideas website - great illustration!

ColourScheme

I used Adobe Kuler to help me decide on the colours to use for the site. I prefer Kuler over 0to255 as Kuler is much more sociable and you can share your colour palettes with others. You can see my six main colours below. I made an account and saved the colour scheme on the Adobe website. If you click the graphic below, you’ll be able to see it on Adobe.com.

My Colour Palette for the Grow Website

Designing the Homepage

To make the homepage more exciting, I decided to design the middle section as if you’re looking at a scene from one of the grow gardens. There is a compost heap, a blackboard, a whiteboard, party flags, and a table with a lot of food, dips and a cake! Below this is the forecast section. I would have loved if the forecast was more important than the blog posts, as it would have looked nice on a blue background, but unfortunately it only made sense that the blog posts came directly below the introduction and recent photo gallery. Take a look at a few development pictures below.

Click to see the full design

Click to see the Grow design with the 24 column grid

Click to see the detail on the table, I created in Photoshop

The importance of the Grid

The grid plays a key role in design all over the world. Using a grid structure keeps everything inline and organized. In Mark Boulton’s five part grid system series, Mark comments on the value of using a grid system:

These grids have quickly become a convention, and for good reason too. They are quick to create, fairly stable across many platforms and don’t degrade to the same degree as table based layouts. This is all good.

For the Grow Website, I decided to use Nathan Smith’s 960 grid system. A psd is available from the site, so I based my layers in Photoshop around the guides provided. The sheer quantity of websites using Nathan’s system was more than enough to convince me. If you read on to the coding section of this post, you’ll see how I was more than impressed by the system.

Coding the Homepage in HTML5

I wanted to use the most up to date language available to make the Grow website stand the test of time for as long as it could! I chose HTML5 and CSS3 to build the site. It was the first time I’d really used some of the new HTML5 elements like

and to be honest, I was pleasantly surprised when there weren’t any bugs or glitches thrown up.

The first new piece of code I stumbled across was:

I couldn’t believe that the whole blurb at the start of the HTML had been cut out and it still worked! This was the first line of code in the HTML5 boilerplate code I started out with. I downloaded Snippets, a handy app for mac that makes inserting code snippets a breeze.

I declared the head tag, title, meta data, favicon and the 960grid stylesheets.

The next thing to do was code the header. I used the header tag and made a div with id “toplinks”. To make the header span the width of the 24 columns in the design, I added

class="container_24"

Rather than add the logo as an image, I used “Grow” in an h1 tag and gave it a class of “grid_9″. This made the h1 span 9 columns of the 960 grid. As 24-9 is 15, I figured I’d have 15 columns to make up the navigation if they were to be alongside each other. To do this I gave the nav tag of class “grid_15″, liek this:


 	
 		
 			About
 		
 		
 			Learn
 		
 		
 			Gardens
 		
 		
 			Join
 		
 		
 			Support
 		
 		
 			News
 		
 		
 			Partners
 		
 		
 			Contact

From there, using the 960 grid system was easy. The only problem I came up against was when a column must be blank, for example between the intro paragraph and the watering can. To do this I gave the paragraph a class with a suffix. This made a blank column to the right of the text. The code for creating the text with watering can is:

 
Welcome to Grow
Paragraph Text

So you can see that 12 + 1 + 11 = 24 and that’s how easy the 960 grid is to use!
The rest of the page was easy enough to create.

You can view the HTML for the homepage here.

The CSS

The 960 grid system stylesheet ensured all the elements were within the 960pixels in the middle of the page. It was my job however, to use CSS3 to position them more accurately! I unstuck myself a few times by declaring a misbehaving div as bright red. That way I could see exactly what it was doing and I could start to correct the problem. Most other problems were float related and were quickly solved by adding overflow:hidden or clear:both. One of my favourite parts of the CSS is the blue CSS3 button at the top of the homepage. The button makes use of CSS3 gradients in firefox and webkit browsers and has a hover over set of declarations too! If you’re interested in creating CSS3 buttons, you should check out this great list of resources over at Speckyboy.

Another of my favourite CSS3 features that I used was CSS3 transitions to fade the navigation hover-overs in, in webkit browsers. Andy Clarke’s Hardboiled Web Design came in very useful for explaining how to do this. If you haven’t got the book, you are missing out!

You can view my entire CSS Stylesheet from the web developer toolbar in firefox.

Here are some screenshots of the CSS being applied, after I sliced the PSD up!

Click to see this screen larger

Integrating Starkers

Starkers is a striped down version of the standard twenty-ten WordPress theme. It was created by Elliot-Jay Stocksfor anyone to use as a base to create their own WordPress themes.

I found it very easy to use as a lot of the code was already commented with things like “Don’t delete this!” or “This is the start of the loop”. A great help to me was the Smashing WordPress book by Thord Daniel Hedengren. It helped me understand the WordPress loop and basically how to create an entire theme! The hardest part was to display the most recent posts on the two boards on the home page.

The Helen’s Bay posts would need to go to the Whiteboard and the Waterworks posts to the Blackboard. To do this, I gave a waterworks related post a tag called “Waterworks”. I called it from the homescreen with this snippet:

$args = array( 'posts_per_page' => 2, 'order'=> 'DESC',
'orderby' => 'date', 'category_name'=> 'Waterworks' );
$postslist = get_posts( $args );
foreach ($postslist as $post) :  setup_postdata($post); ?>

You can see above how the code will display two posts, in a descending order by date, with category name “Waterworks”.

Typography

As a user of Typekit, I could not resist adding three or four of their typefaces sparingly to the Grow site. You’ll see on the homepage typekit fonts have been used on the compost heap and for the word “Food”. I picked a rough looking font for the compost heap and an elegant handwritten font for food, to portray the daintiness and sophistication of the food grown and cooked by the Grow Community team! The titles on the black and whiteboards are also from Typekit as I wanted it to look like a grow member had just scribbled them on! It was important to me that “Waterworks News” and “Helen’s Bay News” were actual headings rather than images, to make my markup more semantic! Check out the fonts I used below.

Click to see the Typekit fonts used in the website

Grow – A Logo Design Process

Ben — Mon, 27 Dec 2010 14:41:48 +0000

This post looks in-depth at how I came up with a logo for Grow Community Gardens, a not-for-profit community based charity in Northern Ireland, looking for a brand identity and a website to raise awareness of their cross-community work in Belfast. I will talk a bit about the brief, guidelines and my logo thought process.

The Client Brief

The lovely Siobhan Craig from Grow Community Gardens came to speak to us in University of Ulster Belfast about our final year live project. I took my seat and unleashed my two moleskins for writing down key words that I’d hear throughout the clients speech. I was delighted when I heard that it was a charity that Siobhan was in charge of and that I’d have to help her by creating a Grow Community Gardens website. As well as expanding my own portfolio, I’d be giving something of great use back to the community. A lot of the people working for Grow find it hard to afford a few meals a day and luxuries are difficult to come by for a few of the gardening volunteers who only receive meal tokens every week from the government.

Siobhan made it very clear that Grow is not the same as allotments, grow-your-own or renting a space to garden. Grow is all about bringing the community together, sharing space and spending quality time with new friends. Grow is about meeting people and strengthening the local community.

Anyone is welcome to come and help Grow, who have two gardens based near the Waterworks and Helen’s Bay. Grow welcome different ages, races and religions to come and spend time with the rest of the community in their gardens, which are open for majority of the year.

The peace fence around the area at the Waterworks is ideal for sweet pea, which locals often pick through the fence. Volunteers at Grow use common gardening tools and with the help of poly-tunnels, are able to grow courgettes, tomatoes, brocolli, basil and plenty more.

They often have community days, involving plenty of carrots, cooking, and craic. The Mayor of Belfast even attended one of the events so the cooking had to be top class. The team know the supreme quality of their own produce and Siobhan remarked that the fresh tasting vegetables are unrivaled in the Belfast area.

Crucial 20

When it comes to creating something for a client, research is critical, whether it be a logo or an entire website. Getting to know the company, client and reasons behind why they need your services are paramount. Research provides us with a vital foundation to base our work off of and get to know the project area as well as, if not better than the client.

I found a fantastic list of questions at the design cubicle to ask a client before designing a logo. Fortunately we had some time to ask the client questions at the end of the brief. I was a bit disappointed not to get a one-to-one with the client due to our class size being just under one hundred students.

A great help to me was the client brief documentation, collected, organized and shortened by the fantastic Nicklas Persson. He went out of his way to ensure every student had accurate, valuable information and specific content requested by the client.

It wouldn’t be professional of me to copy and paste this all over the web, but I’ve picked out some key points and merged them with the client brief notes above.

I was able to find out the answers to most of the questions I had using the client brief and technical brief combined. Here are a few I’ve picked out;

How can the products/services of the company be described?

Started in 2008, Grow is a small charity working with communities to create community gardens in their area. It’s as much about growing community as it is about growing food and flowers!

What are the long term goals of the company?

To expand the community helping Grow by getting more people involved! There are currently a number of action days and cooking/healthy eating days. These will continue at Grow.

Grow will continue to support, represent and promote community-managed gardens, allotments and other green spaces, creating opportunities for local communities to grow. Grow will continue to work empower local people of all ages, backgrounds and abilities to build better communities and make a positive impact on the surrounding environment.

Why does the company require a logo? What should the new logo accomplish?

The company does not have a thoughtful, suitable, well-designed logo at present. The new logo should reflect the personality of the company and the hard working, charismatic personalities of the individuals within it.

Who are the main competitors?

This was a difficult one for me to answer. Can a charity have rivals? I believe they hope to earn as much money as possible to help their cause and inspire people but wouldn’t have “rivals” as such. Charities are all working for the greater good and should support each other if anything.

How is the company different from competitors?

Although I don’t believe Grow has rivals, there are obviously other charities out there. Grow is different from other charities and allotments due to its community focus. I was able to locate a number of other community gardens from belfastcity.gov.uk which states:

In terms of the Council’s current provision, the Committee has given approval to community gardens at:

- several school projects in the west of the city;

- Waterworks;

- Derelict land adjacent to Ballysillan allotments;

- Glenbank (Peace III);

- Glen Community Centre (Peace III); and

- Suffolk (Peace III).

Another great link from the site is http://www.belfastcity.gov.uk/beinggreen/growyourown.asp which outlines the benefits of growing your own food!

Imagining the Grow Brand

Siobhan’s outlined some of her favourite websites, similar to the one I’d be creating. They were CommunityGarden.org and parkrun.com/home.aspx. Her two least favourite were farmgarden.org.uk, giyireland.com and thrive.org.uk. The existing Grow brand and website can be found at growwaterworks.blogspot.com.

Mind-Mapping

The first thing I wanted to do was get some ideas on paper. The Standardistas paper prototyping lecture really taught me the significance of this and why it is important not to jump straight onto the computer. The first thing I did, was jot down key words relating to the project. I wanted to get as many as possible, broadening the scope of possible logo designs.

Click to see my first GROW mind-map

You can see from the mind-map above how I divided the words into broad groups such as “Charity”, “Area” and “Gardening”. This way, I was able to get more words than expected as I didn’t purely have Community Gardens running through my mind the whole time. Words like “Pride”, “Awareness” and “Opportunities” came out of this method. I can assure you those words would not have come out of just one heading plonked in the middle of the page.

The next stage was to narrow this down and pick out my favorite words. By “Favorite”, I mean the words I felt related to the brief and summarized the aura that I felt from the grow team.

Click to see my second GROW mind-map

As you can see from the mind-map above, I began to link words and become more specific in the direction I wanted to go. The arrows show my thought process and how I saw things relating. These words were the ones I wanted to use to help me come up with a logo. After a quick look at 20 stupid mistakes logo designers make and 45 nature inspired logos, I was ready to go.

Concepting

I began drawing out logo ideas in my moleskin. There were of course a few ridiculous cliches like the shaking hands thing that could really be used for any business and wasn’t specific enough. I realized relating gardening to community was certainly going to be a challenge. You’ll see from the sketches below how I pretty much covered everything from worms and gardening tools to, well…drawings that weren’t meant to look the way they did.

Click to see GROW logo sketeches

Three great ideas came out of my sketching. Well, two and a dodgy looking one that could have some sort of sexual connotation. Lets get that one out of the way first.

The Community Spade

The idea behind this one was to use a spade to represent the community. The spade is a tool that I see as really representing gardening. To tie it in with community, I changed the actual spade head to be heart shaped. I also broke the spade into segments, showing the coming-togetherness of the community. I think you’ll understand why I changed the end of the spade to green instead of heart-colored pink.

The first idea was a spade with a heart-shaped end representing community spirit

The Community Flower

The second idea was based on using people to make a flower shape. I sketched the idea out in two ways. The first was to put the peoples heads to the outside, meaning they actually looked like stickmen and a flower. The shape didn’t seem right, so I flipped all the stickmen so that their head made up the center of the flower, where the pollen is stored.

Click to see full-size flowers drawing

Click to see this logo larger

The two issues I had with this logo were:

Grow are more fruit and veg growers rather than flowers and plants
The stickmen weren’t clear enough as representing community

To try and tackle the problem, I came up with the two concepts below. After a large amount of thought, I decided to leave the idea and pursue another.

Click to see this version larger

Click to see this logo larger

The Watering Can

My third and final idea was to use a watering can in some way to represent Grow. The idea of water relating the survival of plants and humans was a correlation I had yet to explore. Where there’s water, there’s life. That’s the kind of theory astronauts have been using for decades to search for extra terrestrial life on other planets.

Creating the word grow out of water wouldn’t have meant anything to anyone. The water needed another physical form of some sense or a container that would relate it to plants and humans. The watering can idea hit me after I checked back over my sketches and I began creating a watering can-based logo.

My Grow Watering Can Idea - slightly overpowering!

A more subtle approach but slightly too small! Click to see it bigger

One idea turned out to be too large and the other too small! I was at a loss as how to get the watering can in without making it dominate the beautiful typeface.

I began studying the Typeface I had chosen on Dafont. When I had chosen it, it just felt like the right one and I hadn’t really thought why. The font was called Goudy Bookletter 1911. The lovely serifs had made it possible for me to make the “G” look like it was watering the “R”. There was no reason why the typeface could not hold its own, with a watering can as the background!

I decided that this would be the right idea to continue with indepth. I set about creating the watering can in illustrator. I thought a 3D looking icon would be more of a challenging and look better!

Click to see this stage larger

Click to see stage 2 larger

Click to see stage 3 larger

Click to see stage 4 larger

Click to see stage 5 larger

Branding The Major Project Based on Market Research

Ben — Tue, 21 Dec 2010 04:37:31 +0000

The time had come to work on the branding for my major project. Rather than design what I thought looked good, I decided to quiz others on the idea behind my major project and base the branding on the requirements and expectations of my target market.

Teaching the Drums

For my major project I am going to teach the drums using videos on a CMS controlled website. The first step to take, is to see whether this has been done before and if so, who are the market leaders? The information I come back with from this could change the entire direction of the Major Project!

Who Already Does It?

There are many advantages for drummers wishing to learn the drums through videos on the internet. For most of them, drummers don’t have to pay! Another reason is that you can constantly replay a video and go over what was covered in the video before very quickly. Many drummers use the Internet solely to teach themselves the drums whilst others attend lessons.

I personally took lessons and believe everyone playing the drums should at some stage. There is room in the drumming market for the two mediums. Both have advantages and disadvantages that I’ve listed below.

Going to a tutor for lessons

Advantages

Practical hands on experience
Invaluable advice provided
Direct communication with someone that knows what they’re talking about

Disadvantages

Drummers have to pay
Drummers have to leave the house
A lesson can’t be repeated exactly as before like a video can

Learning from the internet

Advantages

Can replay a video
No cost in most cases
Can learn from the best drummers in the world

Disadvantages

Impractical…difficult to watch a video on computer whilst playing
Quality of videos often poor
Requires computer and internet connection

FreeDrumLessons.com

One of the best sources for drummers to learn online is http://www.freedrumlessons.com/. The site is obviously free, useful and well edited. The site itself isn’t very well designed and doesn’t ooze cool like I think it could. There is plenty to choose from in the site with over 200 play alongs and tutorials under the one “Drum Lessons” tab. Jared is a great teacher, though a bit of a nerd. You only need to watch the headbanging in this to realise that the site is a bit geeky.

Click to see the site

OnlineDrummer

Onlinedrummer.com is Another badly designed website that’s done awfully well, which is purely down to the talent of Nate Brown. The guy knows his stuff alright and comes across very well on camera. The lessons slow rhythms and songs right down, making learning easy. The ads, the poor video quality and the dreadful Chroma Keying are unforgivable in some cases. The videos are posted on YouTube, giving the guys at online drummer a larger audience. The donate button on the website makes me wonder if they make any money from it.

Click to go to the site

DrummerWorld

DrummerWorld is a website containing everything you need to know about the best drummers in the world. This includes a bio, pictures, videos and tutorials. The fact you’re being taught by globally renowned drummers makes a visit to the site worthwhile. The logo is simple and the website clean, though requires a lot of scrolling! As with the other sites, there is a lot of advertising geared towards buying DVDs and all sorts, which may attract some but I personally find off-putting.

Click to go to the site

Mikes Lessons

Mikeslessons.com is one of the few websites that gets everything right. The website is a stylish black and orange and the lessons have clear audio, sharp visuals and Mike himself is a funny guy. In one instance he uses a drumstick as a timeline to show the where the good drummers are on the timeline and where the bad ones are. The lessons are light-hearted and Mike even offers “Live Lesons” over the internet at a cost.

Click to go to the site

Taking on the Big Four

I do not want to create a site that is exactly like the ones above. For it to be successful, I will have to do something completely different that hasn’t been done before. I will have to combine the best elements of the top lessons out there
and merge them into something spectacular.

As a heavy metal listener, I want to teach others heavy metal. This is something the other sites do not cover thoroughly and some don’t touch it at all. Heavy metal is one of the toughest genres of music to play along to on the drums, due to the speed and ferocity so I can imagine there are a number of drummers struggling out there!

The second way that my site will be different, is that I will only teach drum songs. I will not teach basic rhythms as there are all these other great resources online for doing that. By making my website different than theirs, I may actually attract sponsorship and businesses wishing to advertise with me in some way.

Getting Feedback

Davy Bates of StormZone showing me a few moves on his kit

With an idea firmly planted in my head, I set about asking other drummers what they thought of the idea. A lot of drummers around my age (22) thought the idea was great. Most under 20 or above 30 didn’t have much of an interest.

I arranged a visit with my old drum teacher, Davy Bates at Ossia music who is the current drummer for StormZone. I was nervous to see if Davy would see the site as competition with his lessons, or whether he would agree that a drumming website could actually promote lessons. Upon explaining that I would be teaching popular heavy metal songs through videos over the Internet, Davy was shocked at the ambition and enormity of the task.

He told me that it was a fantastic idea, as no one had ever done it before and said,

It actually sounds like a very exciting project. You could be changing the way drums are taught over the Internet forever.

Useful for those with Disabilities

Davy made a valid point that learning by ear is the only way certain drummers can learn. He told me about a dyslexic student he has who is working towards his grade 8 and finds it very difficult to read the music whilst playing the drums. Davy remarked that a site like the one I was suggesting could help these sorts of drummers who need to see and listen to the task they are to complete, before attempting it.

Davy wondered if I would be limiting the site to just metal. He commented on the syllabus he teaches, called “Rock School”;

It would be great if you could teach others stuff from the rock school syllabus. Some of that stuff is difficult. Then they could come to me having heard the songs and have a basic understanding of what to do.

For launch, I will only be teaching metal due to time restraints, however, the options for this project are endless as there will always be drummers wishing to learn something! Since rock and metal are so closely related, I will certainly help Davy out should he feel there is a market for the rock school material. It’s great that I’ve established a link with someone in the industry to bounce ideas off!

The Survey

I left surveys with Davy to give to his students so that I could understand what sort of market my site would be aimed towards.

An online version of the survey is available at http://www.surveymonkey.com/s/FHBCCBL. I felt it was important to only ask drummers to complete the survey as they would be the ones using the site. Emailing the survey to everyone I knew would have been pointless!

Coming Up with a Name

I knew the importance of picking the right name for my site from day 1. Benslessons.com didn’t have the cool that I was looking for and deathbydrums.com sounded a bit too much. Resonate was on the cards until I realized most people didn’t know whether it had a “Z” or not. The strongest contender was “Metalbeat” as it combined metal and drumming in a short simple word. The word “deadbeat” came up in conversation and a lightbulb pinged above my head. Though the word deadbeat has a negative connotation, the too elements of the word are a perfect for the type of project I will be doing and are memorable. “Deadbeat Drums” just sounded right. Below are the Iogo ideas I played around with:

Click to see this logo idea larger

Click to see this logo larger

Click to see this logo idea larger

Coming Up With Final Logo

A metal band called Throwdown posted a great image on twitter with the title, “guess the band”. You can see the image below which shows the importance of picking a distinct typeface. And id I mention they all come from rock or metal bands?! See how many you can get!

Click to have a go at the ABC's of Metal!

This really inspired me to come up with something unique. I came across the font “FKR Area51Life” and set about sharpening the serifs in Illustrator to really emphasize what already looked like something that was high-class and expensive but yet metallic and gothic. You can see the result and business card design below.

Click to see the final Deadbeat Drummer logo

Click to see the business card design

I also decided to use the graphic that previously accompanied my DeathByDrums idea, should any sites like Twitter or facebook require a more square shaped icon. The icon is the silhouette of a face screaming, but I designed it to look like a drum kit. You can see that below.

Click to see the Deadbeat Drummer icon

Susan Boyle and a Drum Kit

Ben — Fri, 17 Dec 2010 20:11:39 +0000

How can Susan Boyle and a drum kit possibly be related? In this post, I will use the Susan Boyle story as a means of introducing and explaining how I chose a major project idea and why I think my idea will help people all over the world.

The Decision

Rather than waste your time or have you scroll down a million lightyears, I’m just going to tell my major project selection and then justify it. You’ll remember of course that I had to choose one of the Three Musketeers. I’ve decided that I will be teaching the drums online! I do, of course play the drum kit and having a knowledge of the web and drums – a combination that only a few drummers fuse together to create video tutorials.

My video tutorials will be better than anyone else’s in the world, I can promise you that. So I’ve explained the drumkit part of this post title, but where exactly does Susan Boyle come into it?

I Dreamed a Dream

To explain how I came up with such an unusual post title, I must explain a dream that I had two nights ago. I went to bed, exhausted from doing so much final year work (of course) on a typical week night. Nothing inspiring had struck me the day before and I had been lacking enthusiasm for the majority of the day.

I fell asleep and had an unusual dream involving an Apple Press Conference in the yerba buena center, San Francisco. I arrived at the event about an hour early, so that I didn’t miss anything and tweeted updates about the location and speculation.

We all entered the main auditorium and took our seats. There were a number of gentlemen around me on their laptops and iPads, speculating that the next Apple Device would change the world. I asked what it could be and not a single person could tell me. The event would be streamed live and was said to be Apple’s most significant breakthrough yet. Steve Jobs took to the stage, reached into his pocket and then I woke up.

I felt ecstatic as soon as I woke up, anticipating the next big thing but became extremely disappointed as soon as I realized it had not been real. I’m not one for looking into the meaning of dreams but this one had a message that I could use for my final year project.

Apple is the best company in the world at generating hype. This is due to their technological achievements, the thought behind their products and clever marketing.

The dream had been about the anticipation of something great, not the actual product. It’s that feeling that makes people want to be a part of something.

I need to fully understand what it is that a specific target audience require, excite them with a concept and over-achieve on the delivery. Unlike Apple however, the world is not awaiting my product. I am not yet a global success. How is it that something can go from unattractive and unknown, to inspirational and globally appealing?

Make the Right Choice at the Right Time

Making the right choices has made Susan Boyle the oldest person to reach number one with a debut album in the UK

Susan Boyle’s life changed on April 11th, 2009 when she entered Britain’s Got Talent and sang “I Dreamed a Dream” from Les Miserables. A year and a half later, Boyle was officially recognized by Guinness World Records as having had the fastest selling debut album by a female artist in the UK.

This jump from unknown to global phenomenon is something that fascinates me. Within nine days of her first audition, Susan had over 100 million views on youtube. How did that happen? Would Susan be where she is today had she not made that crucial first decision of entering Britain’s Got Talent?

I don’t believe so. The first decision is often the most important. In my case, that decision was between three ideas for a major project. One of those ideas could be the key to global recognition and success. A wrong choice could simply leave me with a Third-Class Honours and a lifetime full of regret.

Dynamic writer and speaker Steven Johnson gave a talk at TED 2010 where he talked about the launch of Sputnik in 1957 and the side-project of two MIT researchers, which ultimately led to the invention of GPS. Had the researchers not made the decision to listen for Sputnik, they never would have come back with the idea of tracking its location. You can watch Steven’s inspiring talk below:

Captivate the Audience

My drumming needs to inspire and impress my chosen target market

I’ve chosen to teach the drums using videos on the internet. I can be as enthusiastic as I like about it, but if the quality and usefulness of the videos is no good, my audience will not return to my site. I found a great post on Frank Chimero’s blog about enthusiasm and hype:

If you want to make things people are enthusiastic about, you must start with a message or content people can be excited about. Sincerely. Enthusiasm isn’t some sort of icing you can smear on top of anything. Do that, and it’s hype. Hype at its best is embraced and then quickly forgotten. At its worst, it’s loathed.

Before reading Frank’s post, I had thought that hype was something I would desperately need for my project. However, upon reflection, Frank is right in saying that hype is quickly forgotten. It’s not hype that I need; It’s excitement and sincere enthusiasm. I need to trigger these emotions in my target audience to really make them engage and connect with my lessons.

The design of my site is just as important as the quality of the videos. It was Paul Rand who said:

Good design adds value of some kind, gives meaning, and, not incidentally, can be sheer pleasure to behold; it respects the viewer’s sensibilities and rewards the entrepreneur.

The design of my site must give meaning to the content within it. As Paul Rand says, design can be a sheer pleasure to behold. The design of my website must reward my viewers by offering simple navigation, practical layout and semantic markup.

Locate a Gap in the Market

My drumming website will need to attract users with something that's never been done before

If something better already exists, people will not use a new service. There needs to be a demand for the product or service I create, otherwise I may as well give up now! I believe I have found a gap in the market for a drumming website that is well designed and easy to use. I will of course be finding out more about my target audience over the coming weeks by conducting surveys and getting feedback from drummers in the Belfast area. Obviously the larger the survey, the more accurate the results will be provided the survey targets the right sort of people i.e. drummers! Due to time constraints, my research will only be local but that’s for a later post!

From what I’ve observed online there aren’t any younger drummers, around my age teaching others through a website. Most of the videos on YouTube aren’t tutorials, they are posted purely for showmanship. They’re enjoyable to watch but I don’t want to go down the route of purely demonstrating what I can play – it wouldn’t feel like the site was benefiting anyone else. Even if those sorts of drum videos do benefit others, there are far more constructive and interesting things I can do with a drum kit and a video camera!

Be Better Than Anyone Else

Thomas Lang: one of the most respected drummers worldwide

What does it mean to actually be better than a competitor? Is it that you make more money than them, attract more customers or do you share a common goal that you usually prevail at? To be honest, I don’t believe it’s any of these things. There’s a great section in REWORK by 37 Signals that explains how you should actually let your competitors try to be pioneers in their field while you sit back and let them solve the problem! The chapter is called “Underdo your competition”.

Do less than your competitors to beat them. Solve the simple problems and leave the hairy, difficult, nasty problems to the competition. Instead of one- upping, try one- downing. Instead of outdoing, try underdoing.

There is also a section in the book about picking a fight with your competitor in the hopes of rallying others against them. This is something I certainly won’t be doing for my project. It’s not that I’m not prepared to take risks, it’s that I’m not prepared to take risks where the most likely outcomes are incivility and disregard for my site. The drum community is one similar to the design community. Drummers love to help other drummers and show them the ropes. In my case, picking a fight with a competitor simply wouldn’t achieve anything. I’m not doubting the credibility of 37 Signals, I’m merely emphasizing that attacking a similar site would not work in my situation!

When I say “Be better than anyone else”, what I really mean is “Work as efficiently as possible to achieve goals and solve problems as quickly as you can. You may just become a leader in that area!” To do this I will work towards providing the highest quality drumming tutorials on the internet. Elements of this goal including HD camera setup, lighting, background design, video editing and tutorial quality. I can get all the design and setup components right, but if the drumming isn’t any good, there’s no point in any of it! The drumming is the star of the show, the rest contribute towards emphasizing this.

Overcome Hurdles

There will be a lot of setbacks...my job is to conquer them

Every business faces challenges and obstacles. There is no business in the world that doesn’t have to make tough choices everyday and as I said before, its these choices that define the business and what it is capable of. I am expecting to be faced with daunting tasks, disgruntled web users and challenging video work. How I overcome these problems will show how resilient and hard-working I am (and therefore my brand is!). As I’m working on my own for the duration of the project, I can’t afford to rely on anyone else to solve problems I come up against!

Engage, Attract, Inspire

Steve Smith is renowned for inspiring other drummers. Click for YouTube video!

The whole purpose of the site I want to create is to engage, attract and inspire drummers. You’d probably think I put those in the wrong order…attract should come first. However, it is important to me that drummers keep coming back to the site! I don’t want to attract them once. I want them to keep coming back for my tutorials. The three words don’t happen in a linear process with a start and an end. They go round in a circle as the user continually keeps being attracted to the site to be engaged and inspired!

The process of attracting users is a continual thing. Though slow to begin with I will be hoping to attract hundreds of drummers worldwide by the end of the year. This isn’t just going to be a Belfast thing. People will be using my site all over the world provided it’s done the right way. And then they’ll come the next day and then the next day.

Constantly Improve and Evolve

It is important that I constantly evolve the website and improve it as time goes on

The website must improve, not just during the twelve weeks I have to develop and test it, but for the time after. I have no plans of preventing the site growing after week twelve launch. It’s up to me to come up with new ideas for it and listen to what the users want! For this reason, I think a forum is a good idea. It would be better than being hassled constantly over email with requests.

I’d like to leave you with an article over at Fast Code Design that looks at the difference between a mouse and a hand axe. Sounds lame? Yes I know, but the core of the article is really about exchanging and merging ideas. This ties in nicely with what I’ve been talking about being open with others and sharing my drum knowledge as well as improving my product!

10 Reasons You Should’ve Attended Build Conference 2010

Ben — Thu, 18 Nov 2010 01:46:29 +0000

Build conference is Belfast’s biggest web design conference, hosted in the Waterfront Studio. Every year, geeks from around the World arrive in Belfast to witness a variety of talks by globally renowned designers and talented web practitioners. I had the pleasure of attending the event, organized by Andy McMillan and will now embark on explaining why the event was such a success and why you should go next year.

The Build Up

1) Learn from the Best in the Business

The Speakers at Build with Andy McMillan, Image provided by Melissa Keizer

As soon as I booked my ticket for Build, I knew that I had just booked something special. I was going to be sitting a few feet away from the best designers and most experienced web practitioners from around the World. Build was literally an opportunity for me to improve my knowledge and build upon what I already knew about design practice, techniques and programming. It was a chance for me to gain vital inspiration, the magic behind any great design. Speakers at the conference on Wednesday included:

Dan Cederholm – founder of Simplebits, co-creator of Dribblbe and author of best selling books Bulletproof Web Design, Web Standards Solutions and Handcrafted Css.
Meagan Fisher – freelance interface designer, Simplebits designer and Art in my Coffee co curator.
Liz Danzico – New York based independent user experience consultant, blogger, designer, educator and editor. Liz is also a chairperson of the MFA in Interaction Design at the School of Visual Arts.
Frank Chimero – Blogger and managing partner of Thinking for a Living, graphic designer, illustrator and teacher of graphic design at Portland State University.
Tim Brown – Type Manager at Typekit, writer at Nice Web Type, promoter and crafting expert of web typography
Keegan Jones – User Interface designer for location-based networking game, Gowalla. Mobile design guru and speaker all over the world.
Tim Van Damme – Expert Interface designer, contributing hugely to the critically acclaimed Gowalla redesign.

2) Meet New People, Grab a Coffee

Caffeine Monitor - Fantastic web app! Hats off to Nicholas Feltron on the design

Build conference was a chance for me to familiarize myself with up and coming and established designers and programmers from around the world. There are a lot of exciting things happening locally and globally in the design and implementation of websites, systems and mobile apps at the moment.

I introduced myself and spoke to many talented people from around the world who I had never met before. A lot of the conversation was focused around the fascinating talks that the speakers gave. I am looking forward to seeing where everyone’s at this time next year at Build conference.

I am especially looking forward to seeing the adoption of Onotate over the coming year. Onotate is a new way for clients and designers to annotate design concepts and mock-ups online. The guys at Rumble Labs held their launch party for Onotate during Build week. You can sign up for a 30 Day Free Trial over at http://onotate.com/

I grabbed a free coffee and talked to some very interesting people. I later found out that the amount of tea and coffee being consumed at Build was being monitored! Caffeine Monitor provided some interesting and humorous facts that were appreciated by everyone.

3) Free Schwag

This years Build offered more free schwag than ever before

Who doesn’t like free stuff? Build was like the hub of free food, alcohol and general schwag. General schwag may sound cheap but believe me it wasn’t. An iPad was won at the Standardistas Open Book Exam among other gear, generously donated by all sorts of companies. A full list of prizes and contributors can be found at http://openbookexam.org/.

Fourth Year IMD student Barry Hassan was lucky enough to win another iPad for checking in at Build using Gowalla and everyone was treated to free tea/coffee, Typekit cupcakes, pick n’ mix, pencils, maps, badges, stickers, threadless vouchers and lanyards. Free booze kept those at the after-conference party at Hughes in high spirits.

The United vs City result didn’t seem to resonate too badly amongst the group, as web focused bant continued all night.

4) Watching a Bunch of Hungover Nerds Try and Play Sports

The Build Fr00tball tournament made a tonne of money for charity

The morning after the conference and after party saw more than ten football teams battle it out for the Fr00tball 2010 Trophy. It was unusual for a team member not to be hungover from the Build after-party, the night before.

Hangovers, weren’t the only thing commonplace though, as people’s generosity continually surprised and delighted. 100% of money collected on the day went to charity and a cracking day was had by all!

5) Dinosaurs

Watch out for the Build-o-raptors!

The last day of Build week saw the 35th most thrilling film of all time being played at Queens Film Theatre. The 1993 cult classic, Jurassic Park went down well as a relaxing end to a busy week for most.

Others found it difficult to sleep with the lights off that night.

6) What Is’s

Theory based design talks that made you really scratch your head!

A lot of the talks at this year’s Build weren’t just tutorials on how to do something or overcome a code barrier. The theory talks or “What is..” talks, looked in depth at the way we perceive and think about design.

Keegan Jones and Tim Van Damme – From Click to Tap

The first talk of the day brought two of the leading designers behind Gowalla’s redesign to the stage. Keegan and Tim described what you need to do to be successful in the mobile app market and where to start. Keegan explained the rapid growth in mobile internet devices and how this can only grow in the future.

They both explained the importance of paper prototyping and how to decide which links are most important on your site. Once the most important links are established, only these should be used in the mobile version of the site, otherwise the interface becomes too cluttered. What should be considered when designing and developing a great mobile app? Keeping it simple, thinking about context, finger-friendly design, real-life testing and picking a flagship platform.

Tim Brown – More Perfect Typography

Tim Brown’s talk on More Perfect Typography answered lots of “what is” type questions. These included things like what is the golden ratio, what is a modular scale, what is an Em-box, what is the best typeface for my website and what is the best way to use type on the web.

I enjoyed Tim’s talk immensely as it wasn’t just another typography talk. It fused mathematics with type perfectly and nobody was left asking questions. It’s easy to get lost in maths when aiming for perfect typography, but Tim really emphasized the importance of how a font makes people feel and whether that emotion is what the website should portray.

Be more perfect, perfection is inflexible!

Frank Chimero – The Shape of Design

Frank Chimero began with an interesting question, and one that he had been puzzled over for quite some time; What is a designer? At first I thought it was quite a simple question but as Frank continued through his slides, I realized how unaware I actually was at the time.

Frank explained that one of the reasons why the position of a designer is so difficult, is because design cannot be measured. The designer thinks the design “magic” is most important, while the client feels the relationship and the “sell, sell, sell” is more important. Frank covered the Logic machine, various paradoxes and how stories bond us. Design is superpower that makes someone feel something and we must stay skillful, thoughtful, vulnerable and human to pass on the gift of design to others.

7) How To’s

Tutorial and practical talks that took place at Build 2010

The “How to” talks were often focused on design and programming and what needs to be done to ensure your website is compatible with all browsers. As a web designer I was keen to write down as much as I could.

Liz Danzico – Adding by Leaving Out

I really enjoyed Liz’s talk on the power of the pause for a number of reasons. Liz didn’t just come and talk about having nice spaces in your website. She explained the importance of the pause in communication, physical spaces, personal spaces, sound and in user experience.

People are too impatient. Sometimes we need to slow down, and pause to take in the masses of these types of information around us. Liz covered everything from Jaws to Niagara Falls and we were even lucky enough to hear John Cage’s 4.33 (it was a real masterpiece). Liz covered how we can use a pause in our everyday life to slow down and not overload ourselves with information. Words by Everynone was the perfect time for me to pause and enjoy the silent thinking of those around me.

Meagan Fisher – Conquer the Blank Canvas

Meagan Fisher’s slides blew me away. The design of the slides complimented the quality of the content in her talk beautifully. Meagan laid out the four step process that she uses for designing sites for clients (and herself). Meagan’s process involved research, inspiration/wire-framing, typography/colour/shape and lighting/texture.

I found it strange that she doesn’t dive straight into Photoshop and work it out from there. Meagan is one of the few designers I’ve come across that show an HTML/CSS version of the site to the client towards the beginning of the process, a time-consuming but rewarding method. From here, the design is enhanced provided the client is happy with the layout and colours.

Megan went on to cover some useful texture resources, royalty-free image websites and basic CSS3 effects.

Dan Cederholm – Handcrafted CSS

When something is well crafted, it reflects that a human is behind the design. Flexibility is the mark of a true craftsman. Everyone’s ears certainly perked up as Dan alluded to the practice of the majority of the audience. Dan continued on the theme of craftsmanship by explaining what bulletproof web design is and how we all can use the bulletproof dashboard. Dan’s nine bulletproof tips for better web design were both practical and current as CSS3 was covered throughout. The talk backed up exactly what I’d read about Dan on the front of Web Standards Solutions:

Dan Cederholm is no standards zealot. He’s a guy on the front line who knows that web standards save both time and money.
- Drew McLellan, The Web Standards Project

8) It’s Your Type

Build hosted a number of Typography based workshops and talks

Love typography?! You should have been at Build! Tim Brown’s talk on more perfect typography left me feeling inspired and motivated to improve how I use and think about web typography. Tim also ran a workshop on Designing with Real Fonts. On top of these events, Brooklyn based letterer, designer and illustrator Jessica Hische hosted two Typography focused events at Build.

The first was the ‘Illustrative Initials’ Exhibition which took place in the University of Ulster. The exhibition featured a number of letter-pressed drop caps from Jessica’s Daily Drop Cap project. The second was “An Evening with Jessica Hische”, an inspiring look into the meticulous portfolio of the award winning typographer.

9) Nice Fringe

After An Evening with Threadless - one of the many Fringe Events

The six fringe events that accompanied Build played as important a role (if not more important) as the conference itself. On top of the two excellent events with Jessica Hische and the showing of Jurassic Park that I previously mentioned, Build hosted three other fantastic fringe events including “An Evening with Threadless”, “The Standardistas Open Book Exam” and the “Inspired Interfaces” Exhibition.

The UX Book Club Belfast, hosted by Front kindly opened their doors to any Build attendees interested in discussing Alan Cooper’s The Inmates are Running the Asylum.

Even without all the free schwag, beer and pizza, Build would not have been the same without these events.

10) Workshops

Moleskins and Sharpies - Invaluable tools for Build Conference

On top of the fringe events, the conference, the football, the dinosaurs and all the rest of it, there were workshops running all week. These included Liz Danzico’s “Hidden Art of the Interview”, Frank Chimero’s “Baking in Enthusiasm”, Tim Brown’s “Designing with Real Fonts” and “Paper is Your Friend” by the Web Standardistas.

I was lucky enough to get a preview of the Standardistas Paper Prototyping workshop at one of my recent University lectures and had it not been for my new moleskin I bought after the lecture, I wouldn’t have remembered the masses of information being passed along at Build.

11) The Experience

If you didn't get to Build this year, next year is a MUST

OK OK, I know this was only meant to be a ten point list. However, this eleventh point is one I just couldn’t leave out. I mentioned before, the excitement I felt once I had established that I would be going to Build. The whole Build experience was a reason to go in itself. From the organization of the events and the superb venue, to the precision of the banners, maps and stationary; no detail large or small was forgotten.

I personally loved the variety of talks and the different styles of the speakers. I loved the experiences and stories everyone had to share, and I loved wandering over to St. Georges Market for lunch, to be greeted by a rendition of trololo on the piano by @zcott.

The entire week was a delight and great for Belfast. A big thank you to Andy McMillan, Jez Burrows and all those involved in making Build Belfast’s best and most important event of the year.

Citations

Build Conference
KeizGoesBoom on Flickr
Onotate
Web Standards Solutions by Dan Cederholm

Why Everyone Should Use HTML5…Including Borat!

Ben — Sun, 31 Oct 2010 19:03:50 +0000

In the last lecture (which I aptly named Reachforthe…Alcohol) I researched billing clients, aiming high and looked at some beautifully designed websites. In this lecture, the Standardistas ran through the next major revision of HTML, HTML 5. In this post we will explore the possibilities using HTML 5 and how it will benefit me.

HTML…High Five!!

You guys know already how I like to put a twist on things. For a lot of you, these posts probably don’t need a theme, but for others, reading paragraphs and code can become a chore after a while. So to make my blog a bit different from everyone else’s and spice things up a bit, today’s post is about why everyone loves HTML5, including Sacha Baron Cohen’s Borat.

HTML5 is fast becoming the norm for structuring and presenting content on the World Wide Web. HTML5 offers web developers the chance to code more semantic websites. This means the site is more structured than an HTML4 website, in terms of information hierarchy and accessibility.

Mark Pilgrim explains in his book, Dive Into HTML5 how we can all begin using HTML5 today:

HTML5 is not one big thing; it is a collection of individual features.

What Mark is saying, is that HTML5 doesn’t mean you have to fully reorganize or redo a website. You may just need to add in a few tags or update others to get started. Despite HTML5′s predicted 2022 completion date, a handful of useful HTML5 elements and features are already at our disposal. Take a look at Jeffrey Ways video below, initially posted at NetTuts, on HTML5 Features you should be using right now:

Jeffrey quite rightly points out that a lot of the tags can either be merged into one, shortened or deleted making the file size a bit smaller. This means the code can look neater and run faster!

HTML5 elements…Very Niiiice

The elements of HTML5 explained at simon.html5.org

I came across a detailed list of HTML elements and attributes at simon.html5.org. If you click on an element, you’ll be given a detailed explanation and example of where that element can be used. I found this to be a very useful resource for learning about the new elements in HTML5.

My HTML is 4 not

A test page I set up for exploring the new HTML5 elements

I decided to try out some of the new HTML5 elements on a test HTML5 page. You’ll see I included several of the new tags, including article, section, nav, aside, header, hgroup and footer. After a bit of research, I found the HTML5 Boilerplate template a great help and I could begin coding quickly with the starting HTML5 tags already in place. I also decided to use the gangster version of lorem ipsum, Lorizzle. This has nothing to do with HTML5, but it makes good reading, right?!

Although HTML5 glorious language, it have problem…social, compatible and due

Social

Although not a direct problem with HTML5, there has been a lot of scandal surrounding the language. A fantastic post by the Standardistas highlights how Apple intentionally misled users. Apple created a page of HTML5 demos that users could only view in Safari whilst still claiming they support standards and an open web. They are using HTML5 to promote themselves and their own browser, rather than promoting Safari as one of the many browsers that supports HTML5.

Compatible

Internet Explorer 8 does not support some of the HTML5 elements. This is a big problem for developers who need their websites to work on all browsers! Some browsers are more compatible than others. Over the next few years, we will see more and more browsers being updated to support the HTML5 elements. The team behind the upcoming Internet Explorer 9 are focusing on improving support for HTML5 and adding support for SVG and XHTML.

Until that time, the Internet Explorer Shiv is available to trick IE into displaying these elements. Using some basic CSS, and a single JavaScript DOM statement, the shiv is a starting point for getting IE to display HTML5 content.

Due

In an interview with Justin James of Tech Republic, HTML 5 Editor Ian Hickson talked about HTML5 not being ready until 2022! If you want a countdown to HTML5′s approximate release date, why not head over to ishtml5readyyet.com! Though as I’ve said before, we can all start using HTML5 elements today!

How HTML5 can benefit Borat and I

You remember in the Borat movie, when Borat was describing his relationship with his neighbour?

This my neighbor, Nursultan Tuleiakbay. He is pain in my ass. I get a window from a glass, he must get a window from a glass. I get a step, he must get a step. I get a clock-radio, he cannot afford. Great success!

Borat always wants the best available technology, to improve his day to day life and make his house more accessible. HTML5 is a bit like that. It will make your code more accessible and improves it by making it more organized and structured (if you use the right tags in the right place!).

How will I use HTML5? As the foundation of my final year project website! By researching and experimenting with HTML5, I am now confident that it will be useful for my major project website and benefit those with screen readers for example.

Now I just need to pick one of the three musketeers and settle on an idea that I am most passionate about. High Five!

Citations

Dive into HTML5
Net Tuts
HTML5.org
HTML5 Boilerplate
WebStandardistas.com
Apple.com/html5
HTML5Test.com
HTML5.AdamHunter.me
Blogs.techrepublic.com
IsHTML5readyyet.com

The Three Musketeers

Ben — Fri, 15 Oct 2010 22:52:17 +0000

In week 1′s lecture, I was given my first task of IMD’s Final Year Design module. I had to come up with three major project proposals. It took me a while to come up with three ideas, but in the end I filtered my ideas to the ones that I thought had the most legs…and yes I’m talking virtual legs. In this post I will explain how I came up with the three ideas.

The Three Musketeers

Like D’Artagnan from the Three Musketeers, I must be brave and fall in love. Perhaps I should explain that last bit. I have three ideas. Only one can make it. Whichever idea I choose, I want to be 100% sure that it is the right decision. I have to fall in love with my idea and make my passion shine through in this project. I will not be a success if I produce a half-hearted attempt at something that’s already been done before. Most things have been done before but it is my job to pick something that I can do better than anyone else in the world. Slightly ambitious? Perhaps. Possible? Absolutely! Let’s get right into it:

Swording Out my Ideas

To explain how my ideas came about, I have to mention the Three Musketeers. The Three Musketeers was a novel by Alexandre Dumas first serialized in July 1844. The book is a classic with adaptions in television, film, musical theatre and in 2009, a three musketeers video game for PC and Mac (which I am determined to get).

My final year project must be sustainable, adaptable, timeless and better than anything else in its category once completed, like the Three Musketeers. It must be new, thrilling and talkaboutable. A major project is for life, not just for Christmas. Let’s take a look at my thought process.

A few personal goals that I set myself. I'll be annoyed at myself if I don't achieve them all!

I thought it was important to set a few goals, no matter what my final project is. That way, I have something to aim for and something to keep my motivation up, if I begin to procrastinate.

Once I had established these goals, it was time to come up with a project that would fit within my specified criteria. Rather than wasting time being neat and structuring my ideas, I felt at this point it was important just to get them into loose categories and on the page!

The Pen is Mightier than the Sword

Click the above image to see my initial thought process, jotted down on paper

I can understand how at first glance this looks like a huge muddle of words. You’d be right, it’s not a mind map, as there is lack of map. It’s more me getting my ideas semi-structured and onto paper. I bunched them into six categories that inspire me; sport, technology, film/TV/gaming, music, nature and kids. The idea was that I could pick out my favourite ideas and create a more organized mindmap. So that’s exactly what I did!

Click the above image to see my more organized major project mind-map

The above mind-map is a lot clearer, with arrows showing thought direction and potential outcomes. These were my better ideas that I felt I could use for a major project. I somehow had to whittle this list down to just three. Some serious thought had to go into the next stage. I began discounting some ideas and hoped that if I kept going, I’d get it down to just three. It was the first and last time I ever felt like Simon Cowell (thankfully); picking the best contestants by pointing at a page and saying, “Like, like, like, hate, like, like”. I got it down to nine, which I was reasonably pleased with. Nine ideas was certainly a nice choice to have, due to my planned and organized thought process which had all been done on paper. The nine finalists were:

The Competition Heats Up

Click to see my nine major project finalists. Only 3 can make it...

All for One and One for All

Click to see my final 3 major project ideas

So that pretty much sums up how I reached the proposed ideas found in my Lecture 1 Research! You can also find my thoughts on each idea in my week one blog post and see what the pros and cons of each are!

Stay tuned for the rationale behind my major project choice, branding inspiration and plenty of major project related testing!

Citations

Wikipedia
The Literature Network

ReachForThe…Alcohol

Ben — Thu, 14 Oct 2010 13:44:22 +0000

The Lecture

The hashtag to use for this weeks IMD tweets is #reachforthestars. The lecture for this week gave me a good kick up the backside though, as I wasn’t in the right gear for getting work done. The @Standardistas told us what they expect from our final year projects. To be honest, I had been expecting it, but just not so soon. Before running through what might work and what might not for a final project, Chris announced that a woman wanted a website with all the razzle dazzle of the day for a mere £300. She wanted a fully functional, standards compliant site with CMS and blog for £300. To be honest, I was quite taken aback by this figure. Are my skills really worth that little? Will I come out of the course and be making great websites for such a low cost?

As soon as I heard the number, I knew it was far too low and it scared me a bit that people think a substantial project like this is possible for that price. They expect it. Sure throw a site up on the web and I’ll give you a few hundred. Should be simple they think. Should only take a few days. WRONG! If you want a website that doesn’t use tables and look like it’s from the nineties, it will take a lot longer to design and code, thus increasing the cost. Alternatively you could get something like this for £50, sound effects not included.

Thinking About Rates

This got me thinking though, how valuable is my time and how do I value my work? A three part mini series from davidairey.com got me thinking. The article includes interviews with some of the top bloggers and web designers from around the world. Paypal is certainly the most common payment option and I can understand why. From David Airey’s interview with Gino Orlandi, of “You the Designer”:

What methods of payment do you accept?
I usually take payments via PayPal, because its fast.

Why would you recommend working this way?
PayPal allows me to being projects quicker and have access to funds faster, and the dowpayment and requiring the final payment before final files are sent ensure you do not get cheated.

Gino Orlandi has a point. Paypal has over 227, 000, 000 accounts worldwide. It is secure, reliable and used by people from all over the world. I also found that a lot of designers use Freshbooks to send, track and collect payments online. I had never heard of Freshbooks before. After signing up for a free account, I was impressed. It will definitely be a useful tool for me to use in the future to manage payments.

Deposits

How 20 Designers Charge Their Clients

As I continued to read parts 1-3 of David Airey’s interviews, I also learnt how a deposit is important before starting a project. The total figure needs to be approved by the client first of course before they pay the first installment. The likes of Chris Spooner takes 50% upfront, whereas others like Jonathan Selikoff, of Selikoff+Company only take 30%. As Chris rightly points out:

From the client’s point of view this also helps show how the designer values their service and work.

I personally feel 50% is reasonable. Half up front and the remaining 50% when the project is completed. Really, a lot of it comes down to how good you are at estimating the number of hours a project will take. Under estimate the number of hours and your pricing will be all wrong leading to the inevitable, “I’m going to need more money to continue”. Over estimating is equally as dodgy. The client is paying you for the hours you work, not the hours you don’t! Figuring all this out is critical before taking on big projects after university.

Charging Per Hour

A post at Mirificam Press lists 7 reasons not to charge by the hour

On the other hand you could set a price not based on an hourly rate. An article over at Mirificam Press gives a few disadvantages of charging by the hour. There are some points in the post that I don’t agree with, like:

It encourages lower productivity

Charging by the hour would more than likely increase my productivity. I know I’d keep saying, “Oh go on, I’ll just do another hour!” which is fine, provided I’d meet the deadline and not stray too far from my initial cost estimate.

To wrap up this exciting billing section, I’d like to comment on a post over at Just Creative Design. The post is a collaboration of useful resources from other designers. The most valuable piece of information that I took from it, is from Steven Vandelay’s “12 realities of pricing your design services“. He states:

There’s no exact formula.

Unfortunately, there’s no right or wrong way to price your services. Every designer needs to develop his or her own method for pricing, and even then, you probably won’t be able to follow the same formula on every project. Because each job will be different, it’s difficult to develop a method that will work well every time.

This is a comfort to me, as now I can continue to research effective ways to determine design rates and know that everyone will more than likely have their own way of doing things. It’s now about finding out which method works best for me and my services!

Theme of the Week

As I touched on earlier, the theme of the week was “Aim for the stars: You might just hit the moon”. By this, Nick and Chris were suggesting that we could produce something magnificent for our final year projects by having a great idea and not being scared to carry it out. If you aim for something that seems impossible, you might end up with something that isn’t too far from it. With optimism and imagination, I will be aiming for the stars, forget the moon!

Unlike week one, there was no alcohol for the lecturers (poor them). Chris and Nick ran through a few things that they expect from the major project and a few past examples. Some were so good, that I was the one wanting to pop open that ice cold beer (like Paul had in week one) and forget about the truckloads of work that would amount over the following weeks.

Here are a few points I jotted down from the lecture:

Sites of Interest

Belfi.co.uk

Belfi.co.uk, the powerful WiFi hotspot finder by Andrew McCrum

Belfi is a really great site based on the Google Maps API. Users of the site submit a WiFi location along with valuable information such as the cost of the WiFi and the WiFi type. Small WiFi icons then appear on the map, showing that WiFi is available in that part of Belfast. It’s a site that anyone with a laptop in Belfast would find useful and that’s what makes it so clever! It’s a simple system, well executed with a great idea behind it. Even the logo is incredibly simple but understandable at a glance.

Pros

Find WiFi hotspots in Belfast quickly
Submit a WiFi hotspot easily

Cons

Limited to Belfast, though potential to roll out elsewhere
No streetview

Small White Bear

Small White Bear is a website about global warming, aimed at kids aged 9-11

The main feature of Small White Bear is the 4 minute opening animation with Capper the Polar Bear. Accompanied by great sound effects and a magical theme tune the site certainly captures your imagination. Capper, voiced by 8 year old Ewan Milburn, goes on to explain why his home in the North Pole is gradually being destroyed. The language used is simple and easy for children to understand. The animation provides useful facts but also keeps your attention with comical statements like, “Oh there’s a martian!”. The great thing about the site is that it is a journey. Once you watch the animation, there’s so much more to do! Download the pack of 7 funsheets, win a special prize and go on to download some well illustrated wallpapers. It’s easy to understand why Jordan got a First Class Honours in IMD as the site is just fantastic!

Pros

Well animated
Well suited to the target audience
Plenty of downloadables

Cons

The animation isn’t interactive
I wish there were more videos to watch as I love the first

Artwiculate

Learn a new word everyday, with Artwiculate

Built using the Twitter API, artwiculate is a clever, javascript enriched website that “helps clever people look clever and helps the rest of us learn new words!”. A new word appears on the site everyday with definition. Tweets using the word appear on the homepage, where users can vote on their favourite use of the word. The winning tweet may either appear in the “Yesterday’s winners” or the “Hall of Fwame” sections.

Pros

The voting system makes the site fun and interactive
Informative and intuitive
Clean design-excellent choice of typography

Cons

The homepage could be slightly confusing for new users
Is a site where you can learn new words really talk-about-able?

Postography

Beautifully designed, limited edition posters with a typographic theme

A simple, well executed website from the people at Friendly Duck. Typography lovers can buy text-based posters by adding them to the shopping cart and proceeding to the checkout. The site itself is yellow and black themed with the mustard yellow being the main background colour and the black being used for the text and footer. I really like the transitions on the homepage when studying the varying posters.

Pros

Pixel perfect posters
Various poster sizes available
Not overcrowded – a few posters with a rightful slot on the site

Cons

Homepage transitions aren’t controllable with arrows
Upon entering an incorrect value for billing information, the error message is unclear
The maximum zoom isn’t enough for reading the smallest text on a poster
Bright yellow is a bit harsh on the eyes

0to255

A useful tool for comparing different tones of one colour

Dreamt up and designed by Shaun Chapman of Vaynermedia in New York, 0 to 255 is a simple way of finding variations of one given colour. The user firstly picks a colour from the homepage (even by entering its hexadecimal code). Once a colour has been chosen, the user will be shown a full palette of this colour, ranging from light to dark. The best feature of the site, is the ability to copy a hex code straight to the clipboard. It’s a valuable time saver and you don’t have to fiddle around with colour wheels or swatches.

Pros

Easy to use, copy to clipboard makes life easier
Colourful design

Cons

Limited to the number of tones of any one colour
Is it better than Adobe Kuler?

It’s all about the cheese

Am I writing this blog in the correct manner? Is my markup semantic? How should I go about quoting references from external sources? These were all questions that can be answered by one animal; the research cow. Unlike the traditional cow who eats grass, digests it and produces lovely cheese, the research cow is a fictitious creature that eats research, digests content and produces a great article. Sounds crazy, right? Well it didn’t come from my brain, it came from the Standardistas’.

The concept is true though. Research well and find good sources (the grass), think about the content and what it’s about (the digestion) and then produce a well marked-up blog post, based on facts that is well presented, written and uses Harvard referencing so that it’s easy to distinguish my content from someone else’s (the delicious cheese).

Since my third Major Project Idea involves animating and cartoons, I thought I'd give it a go!

The Return of the Uni

Ben — Fri, 01 Oct 2010 00:26:20 +0000

The Lecture

The first design lecture of final year taken, kindly taken by @eleventhirty as the @Standardistas were away saving the world and opening a school for orphans or something with @PaddyDonnelly.

They were able to appear live using video-link from the other side of the world though and it was great. You know things aren’t too bad when the lecturer cracks open a beer and spills it whilst telling you how hard you have to work.

The final countdown (with theme tune) and hard work equals success were two prominent themes throughout the lecture. We ran through the module aims quickly which include developing our researching skills, developing our prototyping skills and developing project experience prior to the final project.

The module is 100% coursework based and I will be marked on;

Quality of research preparation
Quality of multimedia work
Major project proposal document
Citation, grammar and ~~spleling~~ spelling

It was a very short lecture, perhaps as it was Paul’s Birthday. We were given our homework to be completed for the following week.

The Homework

From the IMD Design Website:

As will be covered during the lecture, this week’s homework is quite simple. All we ask is you email a text document with the following details:

1. Your Name
2. A 50 Word Pen Portrait
3. Three Prospective Projects (Title, Brief Description, Pros and Cons)
4. Five Inspiring Websites

I found it odd that we had to contruct it as a .text document and didn’t have to add it to our website. Instead it had to be sent to @fehler’s email address. The reason behind it was a simple one. The Standardistas were looking for good content rather than bells and whistles for this homework. My aim was to produce something that fulfilled this brief to the best of my ability. As I’ve learnt from studying design over the years, research from an ecletic collection of sources is crucial.

The Research

It was strongly advised that we submit our homework with markdown. When I first heard this I wondered why I had never heard of the program “Markdown”, however it turned out that markdown is a type of coding that allows documents to easily be converted to HTML ready files with heading tags, p tags and all the rest of it. Looking back on it, I now know why Paul initially didn’t say, “Your homework should be marked down”. This would’ve lead to all sorts of confusion about why the homework needed to earn a low mark.

Above is my rough translation of what markdown is. Using some reliable sources though, I can give a more accurate description.

From John Gruber’s Daring Fireball

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

I used the Markdown Dingus to help me learn the basics of markdown. I found it very useful and the syntax interesting. Hash tags are used to denote heading tags. An

would be # Header 1 #. To use any other heading styles, the number of hashtags at the start is simply increased to the heading you wish to use. For example

Heading 4 would be #### Heading 4 ####. The closing tags are optional but I include them. I want to get into good habits and creating neat semantic code is one of them.

To use markdown, I simply had to install a plugin for Coda, found on the devloper section of their website. I actually installed two markdown plugins both found here. One is simply called “Markdown” and the other “Markdown to HTML Preview”. From Coda, seeing how markdown is converted is easy.

Using the markdown plugin for Coda is simple and useful.

Fully geared up with my new found knowledge of markdown, I was ready to start my 50 word “pen portrait”. To be honest, I wasn’t too sure what to say, so of course I did some of my favourite thing, research.

How to write a pen portrait

An article on chrisg.com suggests a few questions that I should be asking of my pen portrait.

I feel the most important ones are:

Who is my target audience?

What are they interested in?

What are their driving ambitions?

What do they like?

What do they dislike?

From this, I gathered that my pen portrait is actually all about my target audience. I have to portray myself in a way that Chris and Nick find interesting. The best way to do this is to just be myself and not pretend to be better than I am. I want to give facts but add a touch of humour. Mentioning my placement at www.usedcarsni.com and www.medialightbox.com is vital.

Here’s what I came up with:

Ben loves final year. The reason is simple. Boys are separated from men (and girls from women to be politically correct). Ben is a man who believes detail is paramount. He is a man who last year worked for Media Lightbox and this year will be aiming for a First.

I wanted to capture the reader’s attention with the first sentence and restrict it to a few words. That way, the reader is interested enough to keep reading. The next section explains the first, whilst adding a hint of comedy. The pen portrait continues on a more serious note, informing the reader of my design style and experience. To draw it to a close, I mention my aim for final year.

Major Project Ideas

Drum tutorials

My electronic drumkit from which I would give lessons. Click for Roland V-Drums Specs.

I play the drum kit every week and love it! I practice everyday and play in Church every Sunday morning and evening with a band. I love having the experience of playing in front of hundreds of people every week and helping them through music. I am a versatile drummer and enjoy playing everything from slow jazz songs to fast heavy metal songs.

Heavy metal is a big part of my life and I would love to show others how to play along to it and pass on some advice. The website would have a number of sections, including tutorials, drummers, drummer news, blog, forum and possibly a shop.

I want to push myself with this final year project but not aim for the unachievable. This site is possible and within my abilities. It would also be challenging and I’d have to do plenty of research. For something to be a success, knowing the target audience is crucial though going out and talking to fellow heavy metal lovers about a website designed to help them, sounds class!

Pros

Giving something back to a community that I love
Have the basics i.e. a drum kit
Have the knowledge to achieve it
A unique final project idea

Cons

Would need to purchase recording equipment
Already some tutorial websites out there
Not too good at reading drum music
May have to sacrifice my bed for the sake of good camera angles

Heroes of the Web

My depiction of the Youtube star, Jacob Isom. Click to watch it on Youtube

Youtube is filled with heroes and villains. It seems like a new viral is taking off almost everyday. The best humour is usually something that people around the world can all relate to and have a common opinion on. For example we all wondered where Old Spice guy was going to appear next, if Keyboard Cat actually enjoyed playing the keyboard and whether Miss South Carolina could do anything except look good.

My idea is to create these characters in a comic-book strip and send them on various adventures through time. Titles would certainly draw attention on Twitter. An example would be, the Youtube star Jacob Isom, who stole the Quran from a protestor in an Amarillo city park and made his youtube debut by announcing, “I snuck up behind him and took his Quran!”. In my strip, he could steal the French football team’s captain in 1998. “I snuck up behind them and stole their Zidane. They said something about playing Zidane and I was like dudes you have no Zidane!” On Twitter the title would be, “Jacob Isom steals French football captain!” Through clever drawings, the comic strip would tell the story of how Jacob Isom changed history with his outlandish statement by being in the wrong time period. This would only be the first of many comic strips featuring different characters. These could take off and become more well known than the Oatmeal.

Sound editing group, “Autotune the News”‚ is already getting millions of hits on Youtube by making fun of internet stars such as Jacob Isom and Antoine Dodson through song. Perhaps it is time for a visual interpretation.

Pros

Has the potential to be hilarious if graphics are done correctly
Huge potential for the future as youtube phenomenons are appearing all the time
Once I have the characters in templates, they could easily be re-used
I would be aiming for thousands of website hits per day

Cons

Could run into copyright issues if names or logos used
Characters could appear in a light that I see them in, and they don’t see themselves in
Would have to be careful about portraying historical events
Everyone would have to know the characters for it to be a success

Factual, informative stories for kids

Harry the Historian would be a time-traveling dog, teaching kids about events gone by

I have yet to come across a website that offers free, online, interactive stories for children that is well thought-out and researched. My idea is to create online flash books for children where they learn something from the story. An idea would be a range of online history books, which tell the story of famous rulers hundreds of years ago.

I would need to think of a main character that does the time travelling. I’m imagining a talking dog, perhaps called “Harry the Historian”. By the end of the story, Harry returns to our time and his owners never even know he is travelled back in time. The kids reading the book would love the amount of interactivity that I’d put into the site and the parents would love the fact that their children are actually benefitting from being on the computer and not just wasting their time playing online games.

Pros

Attaining market research and ideas would be easy; visit a school etc.
Would involve simple animations
Helping both children and parents

Cons

Do parents let their children on the computer?
Flash based so wouldn’t work on devices not supporting flash
Would have to research action script and flash capabilities

Websites of Interest

Kaleidoscope App

The Kaleidoscope website makes you trust them and want their product!

A beautifully designed, standards compliant website by MadebySofa. Kaleidoscope is an application that spots the difference between two files. The files can be anything from code to images, allowing you to quickly find and correct any differences if necessary. The homepage of the website is divided up into five sections, each with a seemingly different theme and colour scheme. They’ve cleverly added spots of blue/purple and green throughout each section to remind you of their brand colours and maintain a similarity/link between sections. The radial gradient at the top has been created in HTML5 and overlays a repeating pattern, the same shape as the Kaleidoscope logo. The site loads quickly and the content is a joy to scroll through. The icons break up the text and add a splash of colour throughout. The purpose of this website is firstly to help users understand the app and secondly to promote them to download it. For me, it has been successful in achieving both!

Giant Nerd

The Giant Nerd online social shopping experience is one like no other

Giant Nerd is a great website for outdoor enthusiasts who need gear but may have lots of questions. Its a community based website, meaning the shopping experience is more social. If a user has a question about an item, another user can answer it. Whether you are a nerd or not, the CMYK based colour scheme of this site grabs your attention immediately. I love how the navigation is so big and blocky in comparison to the rest of the content. The various font sizes in the navigation gives you the information hierarchy you require to understand your way around this goliath of a site. The online shop itself is easy to use, featuring an important breadcrumb trail at the top and a range of sorting options to the left. I believe the designers may have rushed the footer. However, the lack of space inside it is an advantage for users who hate scrolling through footers larger than their arm. It’s a useful site for outdoorsy people, with a clean design and fantastic social-shopping experience.

Bidchase

Founded in 2009 by Brian Clarke and David Taylor, this system will get you hooked!

Forget design and start thinking “systems that just work because of a good idea”. Bidchase is one of them, making thousands of pounds everyday. The idea is simple; you have fifteen seconds to bid on an item. If you bid, the timer goes back to fifteen, the item goes up by a penny and if the timer reaches zero, you win the item for that price. Sounds easy right? Wrong, there’s a catch. Bidchase charges you 75p per bid even though the item is only increasing by 1p if you click “Bid Now”. An iPad could sell for £23.00. That’s 2300 bids at 75p each, giving Bidchase a huge profit and keeping bargain-bagging users happy. You can see where I’m coming from when I say the site makes easy money from users addicted to online deals and gambling.

Hoodie Remix

The Champion of flash sites built by masses of perfect actionscript

A flash sight designed by “Night Agency”. Despite slow loading times and a clunky feel to the site, the design makes it easy to understand. I don‚it love Hoodie Remix for being a flash website, but rather for the idea behind it; design your own hoodie using an in-browser interface and submit it for entry into the competition. You can choose from a number of colours and patterns and set one of the 14 panels on the hoodie to be a style of your choosing. The result often looks ridiculous, but that’s the fun behind it; you’ve come up with something that no one else on earth might have thought of. I love the fact the strings and zipper are 2 of the customisable panels and the “undo” and “redo” buttons are handy additions for those unsure about their chosen design.
Competitions get people involved, and the Champion hoodies are certainly attracting more visitors to the site through the competition. At present you cannot order your chosen hoodie design but give it a few months and I reckon you will – they’d be fools not to be thinking about this!

Starbucks Coffee at Home

Intuitive, interactive and informative! Starbucks clearly don't just brew great coffee!

I love a good cup of coffee and I also love this flash site from Starbucks. Unlike Hoodie Remix, I like the fact that it is a flash site. Alright, so it won’t run on your iPad, but that is stressed in the title, “Starbucks Coffee at Home”. Travelling businessmen and women with tablets will hardly be wondering if they like coffee or not. The content of the site displays on a blackboard (or in this case a greenboard) and I think the sound effects and hover-overs are what make it so special. Every time something appears on the board, small particles fall away giving a sense of realism that other flash sites could only dream of achieving. In a few years, I believe sites like this will run using HTML5, meaning quicker loading times and no need for plugins.
At the moment, 99% of PCs are running flash player (see http://www.adobe.com/products/player_census/flashplayer/). Flash is merely a tool for creating interactive content and a large company like Starbucks will use whatever technology they feel is easiest for their target audience to get their message and buy their products.

Ben Willis Design Blog

The Technicalities of Creating a Drum Tutorial Website

The Plan

Linking the Drums to the Computer

Audio Quality

Sound Quality Tests

Pure stereo out, no EZ Drummer

Drums with EZ Drummer, cymbals stereo out

Pure EZ Drummer sound

Lighting

Background

Visuals

A Different Approach to Video

Other angles

Camera and Lighting Setup Ideas

Location

Wire-framing the Site

Grow – A Website Development Process

Website Background

Wire-framing + inspiration

ColourScheme

Designing the Homepage

The importance of the Grid

Coding the Homepage in HTML5

Grow – A Logo Design Process

The Client Brief

Crucial 20

How can the products/services of the company be described?

What are the long term goals of the company?

Why does the company require a logo? What should the new logo accomplish?

Who are the main competitors?

How is the company different from competitors?

Imagining the Grow Brand

Mind-Mapping

Concepting

The Community Spade

The Community Flower

The Watering Can

Branding The Major Project Based on Market Research

Teaching the Drums

Who Already Does It?

Going to a tutor for lessons

Advantages

Disadvantages

Learning from the internet

Advantages

Disadvantages

FreeDrumLessons.com

OnlineDrummer

DrummerWorld

Mikes Lessons

Taking on the Big Four

Getting Feedback

Useful for those with Disabilities

The Survey

Coming Up with a Name

Coming Up With Final Logo

Susan Boyle and a Drum Kit

The Decision

I Dreamed a Dream

Make the Right Choice at the Right Time

Captivate the Audience

Locate a Gap in the Market

Be Better Than Anyone Else

Overcome Hurdles

Engage, Attract, Inspire

Constantly Improve and Evolve

10 Reasons You Should’ve Attended Build Conference 2010

The Build Up

1) Learn from the Best in the Business

2) Meet New People, Grab a Coffee

3) Free Schwag

4) Watching a Bunch of Hungover Nerds Try and Play Sports

5) Dinosaurs

6) What Is’s

Keegan Jones and Tim Van Damme – From Click to Tap

Tim Brown – More Perfect Typography

Frank Chimero – The Shape of Design

7) How To’s

Liz Danzico – Adding by Leaving Out