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.

One Response to The Return of the Uni

1. Pingback: The Three Musketeers | Ben Willis Design Blog