ReachForThe…Alcohol

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

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 <h1> 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 <h4>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.