I’ve been a “reputable” designer for a while now. I build websites, it’s what I love to do and have a passion for. Not many people understand the technicalities, the challenges and the experience of what design means to a person. Great design can only really work when the regular users “don’t notice it” so to speak, while the creatives notice the 1px shading and drop shadows. I’m not just talking web design though, but ergonomic, interaction and user experience design. It can range from a simple CTA button, to a complex and expressive JavaScript banner. It’s all in the details. KISS.

Never have those last 5 words ever been more true when I finally jumped onto the Mac bandwagon. I’ve had an iPhone for nearly two years now, and I can’t imagine having any other phone. It’s just so integrated with my life it’s unbelievable. I have an expensive sound system with a universal dock. I have a very expensive car stereo system designed around the iPod. I have bought cases to protect it, earphones to harness it’s output and now finally, a MacBook pro to add to my growing urge to buy all things with a glowing fruit on it’s backside.

I’m a Windows user, always have been, and Windows 7 is actually an operating system I like, and still do to some degree. I’ve resisted buying a Mac because I thought they were just flash, overpriced gadgets, and to a degree they are. But now I’ve started with the Mac OS I realise just how cumbersome and annoying W7′s little niggles really were. The search box for example, it never seems to find anything I want. I still haven’t to this day managed to find putty.exe through it and I use it weekly, yet, typing in Spotlight instantly brings up what I’m looking for. I still don’t think I’ll actually use the applications folder at all. I simply hit cmd-Space bar and I’m there, ready to search in a split second.

Since I bought it (I’m typing on it right now) I’ve explored many of the features and settings and I am yet to find a problem I can’t solve. Heck, “problem” is an overstatement, as I’ve not really had one.

I had a meeting with a client last week and he said two things which were spot on regarding Macs;

1. Apple’s slogan should be “It just works.”
2. Get one, they’re f**king brilliant.

I went out and bought the 13″ MacBook Pro, the 2.4 and it feels rapid. I don’t know if I’d need anything more powerful.

It’s also making me consider chucking my desktop, and buying a NAS drive caddy for its hard drives.

I seem to be in a world of innovation and joy recently, building new products I never thought I’d be working on, starting back for the final year of university, working with some awesome new people and clients, listening to some awesomely innovative music (you should year the amazing new Linkin Park album) and attending some great gigs locally.

If you have the cash, get a Mac, and you’ll probably want to write something similar to what you’ve just read. So for all those who said “get a mac”, You were right, you were always right. It was inevitable…

Things which inspired this article:

• MacBook Pro http://www.apple.com/uk/macbookpro/
• Linkin Park – A Thousand Suns
• F1 2010 (it’s brilliant) http://formula1-game.com/
• Jimi Hendrix (you have to know who he is)
• Dead Sons http://www.reverbnation.com/deadsons
• The Book Club http://www.myspace.com/thebookclubofficial
• The Matrix

It’s finally happened to me. Normally you probably don’t have the privilege to see this blatant ripping of ones own work but today it was brought to my attention.

Exhibit A, The Logo:

Wow, looks awfully familiar. This is the second version of his defamation, the first version looked like this:

It gets better.

Exhibit B, Twitter Page.

Now this didn’t bother me as much, but I figured I’d put it online anyway, just to finish off the point.

Great work at disguising it, I can hardly tell where your inspiration came from!

To finish off here’s the copy of the first email I sent to the guy.

Hi XXX,

Could you please provide me with an email address or telephone number to get in touch with you.

It has been brought to my attention that you have recently created Creative Collusions which can be found here http://twitter.com/CCollusions.

The logo is quite obviously a complete rip off of my own copyrighted logo for Zero One Hundred, my freelance persona. I created the logo nearly three years ago as the main feature of my brand. I could go into detail about how the logo was created, why and where but I’m not going to bore you.

Frankly I’m flattered you would attempt such a logo but to be honest, it’s a very poor attempt and I am therefore issuing you notice of a Request for Removal. Please delete all references which vaguely look like my logo, please remove it from Twitter and please stop using any colours associated with Zero One Hundred. This includes the background colours on my website http://0100.tv, the background colours on my Twitter page and even includes and design work I have produced that you blatantly decided to rip off.

By all means use me as inspiration, but don’t blatantly rip off other peoples copyrighted work. It could get you into a lot of trouble in the future.

Yours sincerely,

Mark Goddard

I appreciate not everyone knows about copyright law, to combat that I suggest you read the latest UK copyright law http://en.wikipedia.org/wiki/Copyright,_Designs_and_Patents_Act_1988 so you know the basics. What it means (in it’s basic terms) is that any work you create is copyrighted to you. As long as you can prove you created it before someone else did, you’re in the right. Just bear that in mind for the future.

So you may or may not have noticed the iPhone notifications which popup every now and then subtly dropping you information. They come in real handy for AJAX calls on the iPhone.

I’ve been recently developing a Web App for the iPhone and came across the problem of displaying these. I couldn’t find a suitable notification plugin (that was simple) for jQuery so decided to whip one up myself (yay my first jQuery Plugin).

This mimics the iPhones native Growl notifications. I first saw these in Tweetie (now Twitter for iPhone) when hitting the retweet button.

It has three options, to use simply include the jQuery Library and then any of these three things:

1. AJAX Spinner

$.iGrowl(1,"Please wait..."); //1 = ajax spinner

2. Success!

$.iGrowl(2,"Success!"); //2 = the tick icon

3. Error

$.iGrowl(3,"Error"); //3 = the cross icon

The idea is a simple notification system for iPhone and works perfectly for AJAX callbacks. You can customise the message to display anything you like and it works on all the modern browsers. It was intended for use only on Apples mobile devices but works and looks great in Firefox, Safari and Chrome and doesn’t look too bad in IE either.

Any problems let me know and I’ll be right on to fix them. Enjoy!

Download iGrowl v0.1 – 7.6kb | View a Demo

Tip: View the demo in your iPhone and add it to your homescreen for a true Web App demo.

In truth it’s not a fix as the iPad doesn’t have the ability to hover.

Apple has developed extra events to replace hover on it’s mobile touch devices. I’ve recently been working a lot on the iPad and came across the problem of hovered navigation not showing up. It’s a css :hover event that fires through a CSS selector on an <a> element with no href attribute.

To emulate the hover we simply add an event listener to the element we want to have a hover event. In jQuery we do this (make sure you insert it into document.ready):

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

That should enable the element to be touched, and stimulate and iPad hover event.

If you’re having problems getting hovered elements to fire you could also try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").bind('touchstart', function(){
        console.log("touch started");
    });

    $(".menu li a").bind('touchend', function(){
        console.log("touch ended");
    });

}

Here in the UK a General Election is upon us. The different parties are fighting for your vote and to promote themselves online most of the parties have launched brand new websites. Here is an analysis of the different technologies used to see who is the HTML5 of British Government.

The Labour Party

Notable technologies used:

• jQuery 1.3.2 + jQuery UI 1.7.2
• Prototype 1.6.1.0
• Scriptaculous 1.8.3
• Tiny MCE
• CSS3 (or at least what’s possible using 2.1)
• XHTML 1.0 Transitional

How does it stack up against web standards?

XHTML 1.0 Transitional with 301 Errors, 45 warnings (oh no Labour, thats bad!)

The Labour Party’s website is well laid out with a solid grid system organising content well. It has a great use of colour clearly defining the brand of Labour (Red). Overall a nice design worthy of any Government site. The use of jQuery seems to be a no brainer in modern websites and so it should be, it works so well.

Liberal Democrats

Notable technologies used:

• jQuery 1.3.2
• XHTML 1.0 Strict

The Lib Dems don’t really use a lot of next generation technologies. It pushes the boat out with jQuery, and that’s only used for the rotating banner.

How does it stack up against web standards?

XHTML 1.0 Strict with 1 Error (such a shame! It was only a target="_blank" too, never heard of window.open?)

The Lib Dems website is pretty horrible really. It’s untidy, poorly organised and their use of colour is pretty much horiffic. First impressions of the Lib Dems site is “Mothercare”, as they use the old Mothercare green their brand was originally built on.

Conservative Party

Notable technologies used:

• jQuery 1.2.6 + jQuery UI 1.8
• jQuery 1.4.2 (yes they really do include two versions, and ones not even Minified :-O )
• Dreamweaver Flash AC_RunActiveContent.js (why in gods name? swfobject anyone?)

How does it stack up against web standards?

XHTML 1.0 Transitional with a pass! Huzzah! (With 2 warnings)

Well after that win for Tory (pass) their design doesn’t do too badly either. With a great use of colour and clear use of typography and layout the Conservatives website is a joy to look at and play with (Homepage). It’s just a shame this is a front for an actually poor site overall. The design completely changes when visiting alternative pages, which is a shame indeed. But at least it passed validation!

Additional Information

Lets compare their Twitter followers:

Let’s be honest though this is a bit of fun, vote for who you like, not how popular they are online, but I know who I voted for!

© Martin Heigan – http://www.flickr.com/photos/martin_heigan/1518652806/

© rawhead – http://www.flickr.com/photos/rawhead/3084435035/

© gadl – http://www.flickr.com/photos/gadl/376352180/

© gadl – http://www.flickr.com/photos/gadl/360929190/

© heiwa4126 – http://www.flickr.com/photos/heiwa4126/3022320352/

© heiwa4126 – http://www.flickr.com/photos/heiwa4126/2932811133/

© Irargerich – http://www.flickr.com/photos/lrargerich/3294891585/

© Irargerich – http://www.flickr.com/photos/lrargerich/2889652675/

© vitroid – http://www.flickr.com/photos/vitroids/2613654706/

© vitroid – http://www.flickr.com/photos/vitroids/3914674473/

Update: Competition closed! Winner should expect an email very shortly with details on how to get their business cards! Thanks to everyone for entering!

Update: Winner was Matt, thanks for retweeting and commenting. I’ll get a photo of his cards when they are posted ;)

Courtesy of Overnightprints.com we have a batch of 500 professionally printed business cards up for grabs!

There are two ways you can enter into this prize draw;

1. Enter your comment below (any pleasant comment will do) and you’re entered
2. Retweet this twitter message I posted (tweet must be identical)

What you win…

1. 500 custom business cards, completely yours, no strings attached
2. Free business card design by me (optional, but there if you want it)
3. Humbleness (until you hand out that first card and make that first contact!)

That’s it! Easy peasy. You can enter via either stream (twitter.com or comment below).

This promotion is thanks to the guys at overnightprints.com who are promoting their postcards and business cards ready for the holidays.

Competition closes at 7pm GMT on Friday December 11th 2009 Saturday 12th December at 12pm GMT so get your entries in quick.

Winner will be chosen from the collated comments and tweets then chosen at random by software. Competiton is open to everyone!

We’ve all been there, with an opportunity to impress only to fail by handing out a scrappy piece of paper with your name and number on. Is anyone likely to find that piece of paper again once they’ve put it down? Are they likely to pass it along to another potential client? Or are they more likely to throw it in the trash?

A business card is an important piece of promotional material. Something that is unlikely to be thrown away if it does it’s job properly. It must be memorable, easy to read and contain all the information needed in a short amount of space.

Making an impact…

A business card usually comprises of two separate sections, and these two sections give you ample opportunity to get your point across quickly and concisely.

Section 1 – The imagination

The first section (namely the front of the card) is your canvas to create whatever you like. Try a doodle on your Wacom, write a funny line or even pop your tag line on there (mine for example is Artfully Illuminating Design, something I’ve stuck with from day one). It allows you to show a bit of personality, a bit of creativity and create something more eye catching than a scrap of paper.

The above design is quite eye catching using a bright blue (my trademark colour). Someone is unlikely to throw it away and is likely to remember the card. The little tag-line of “all your design are belong to us” probably won’t be understood by most clients as it’s a rip off of a humorous online phrase. It can however add that little extra in allowing the potential client to remember you.

Try drawings, jokes, fancy patterns, cartoons, phrases, photographs or even Haiku. It can really make a boring piece of card interesting.

Section 2 – The details

So you’ve got your potential clients attention, how do we hammer home the contact details?

It’s all about organisation and importance. You need to gently organise your details according to what you want on there. Obvious details are telephone number, email address and website (if you have one). Additional details you could apply are (depending on your industry);

1. Address
2. Work & Mobile telephone numbers
3. Social networking links (such as Twitter)
4. Alternative contact details such as Skype
5. Fax number (not so common lately)
6. Your job title
7. Your skills/attributes

Don’t overload the card with details, only list the important stuff and make sure the important stuff is the largest test on the card. Also ensure it’s readable when printed before you go an order 500 business cards. You have to bear in mind that just because it’s large on your 27″ monitor, it’s not when it’s printed only 3 inches wide.

Free Photoshop Template (UK sizes)

I’ve drummed up a few free templates for you to use. Simply pop in your details, print them and see how the look!

Please note these are set at 85mm x 55mm which may need changing before printing depending on which country your in.

Please also make sure your guide lines are on by using the shortcut Ctrl+H/Apple+H or clicking View>Extras. The outer border is your cropping area and the innder border is your bleed area. The inner rectangle is your safe zone. Try to keep everything in there. Happy designing!

Section 1 – The Imagination | Section 2 – The Details

Yesterday I launched the brand new homepage of my portfolio. It was a long time in the making trying to get everything looking good and now I’m going to explain the reasons behind the design, how I came to it and how you can apply the same techniques.

Keep it simple

It’s a portfolio right? When people visit your site what do you want them to see? If you’ve not said “my portfolio” then your wrong. If someone is looking for a web designer they need to see your work. How can anyone gauge your quality if they don’t see it!?

According to the analytics on this site just under 9% of people visiting the site in September went to the Portfolio page after visiting the homepage. That’s pretty poor in anybody’s book. It means they saw the homepage, scanned it and decided it wasn’t for them. Keep it lite, simple and clear to distinguish what you want people to actually see. I decided that instead of hoping people would visit the portfolio I’d make it the first thing they see.

Think of it as a CV (Resume)

You don’t need to put your qualifications on there or anything detailed but imagine it’s a CV dropped on someones desk. Are they going to see the information they need to see? Critical things to put on a homepage at minimum include;

• Examples of recent work completed.
• A short bio on yourself (including a personal photo to “connect” with the visitor)
• Contact information

They need to see who you are, what you do, and an example of what you’ve done. They also need to get in touch with you if they like what they see.

Personalise it

This is where my original homepage initially went wrong. It looked too professional and didn’t feature any personal touches. It now features my Twitter posts, which is great if your twitter posts are acceptable for the public, and a short description on who I am, what I do and what I like to do. Visitors can then “connect” by reading your tweets or even following you.

You could also include your LinkedIn profile, flickr photos (I include TwitPic photos), blog posts, journal entries, Google Maps (when I tweet I can select to locate, which updates the Google Maps in the top blue bar) practically anything personal. It can give your work that extra edge in helping people remember you.

Try something different

If someone sees a neat little feature of your website that they like they’re probably more inclined to remember you. I’ve really wanted to tinker with the Last.FM API for a while now but have never needed to. I decided to implement it onto the homepage so people can see what I like to listen to. It’s always nice to know if someone listens to a lot of Slipknot or a bit of Robbie Williams. It could be that extra connection your looking for. Kean Richmonds site explores this perfectly on his about page and was recently showcased on CSS Mania.

Subtlety is the key

It’s the latest web trend. Not everything has to be black on white or yellow on black. Take it down to a pixel level as it definately makes a difference.Try using gentle shadows, 1 pixel width highlights, 1 shade different hovers on hyperlinks, subtle backgrounds, light colours and small gradients to take your design to the next level.

Take Adii Rockstars website for example. If you look closely at the edge of elements you’ll see the 1px wide shadows and highlights and very simple gradients which make this a very nice design.

Check out my homepage for another example. I tried to stick to as little amount of colours as possible to keep consitency. By using very light shadows I was able to re-use the same colour to create a border around the images without including an extra colour such as white. It really simplifies the design and keeps it clean.

Don’t pretend

Like to think of yourself as a company, rather than a freelancer? Think again. If your a freelancer exploit it! You’ve done all this work yourself, don’t let people think for a second that it’s a company behind the brand, it’s you, and your visitors should know that from the get-go.

To sum up…

Don’t be afraid to…

• try something different. If your stuck, look deep into some of the greater designs you like.
• be personal, most people are more willing to employ you if they already know who you are
• think outside the box, how do you display your CV? Can you take some pointers from that?
• show off! It’s your work, your visitors should be able to see it straight away!
• open up a bit. Having a blog or a Twitter feed can enforce that connection

I hope you like the design as much as I enjoyed building and researching it. If you have any questions or opinions please feel free to air them!

Here we go with the biggies…

1. SmashingMagazine.com

Packed full of daily web resources from desktop calendars to tips on learning CSS. They have also recently had a redesign massively cleaning up the content (which was pretty bad on my opinion) and also aggregating content from websites such as spyrestudios.com, buildinternet.com and webdesignerwall.com. All of which are also great resources…

2. WebDesignerDepot.com

Not specific in it’s content, Web Designer Depot seems to feature everything from Illustrator spotlights (like the recent one on the amazing Archan Nair) all the way to freebies such as the nice RSS icon set. I do however recommend they remove the horrible “I WAS a fat slob” adverts on the right as it’s pretty dire to see (see screenshot to the right)…

3. Spyrestudios.com

Is very good at eyeing up great web designs and showcasing them on their site. They are a small design agency in Canada but have a great blog. They also recently showcased my website because of it’s use of cufon, the amazing javascript text replacement (towards the bottom of the list).

4. BestWebGallery.com

Not a brilliant resource per se but it does feature some amazing modern designs. Not to be used as a starting point for designs but rather as “subliminal inspiration”.

5. BuildInternet.com

Build Internet is managed by twins Sam and Zach Dunn and is a great place to read more about the business side of website design. It’s packed full of jQuery tutorials, graphic design resources, CSS information and HTML tips. Give it a look.

Now for the smallies, generally sole developers who blog about their industry, not necessarily “small”…

6. Adii Rockstar

Now Adii is quite a little celebrity online. He’s known well for his work on the WooThemes project which sells premium wordpress themes but makes for a very interesting read.

7. Fabio Sasso

He’s the guy behind abduzeedo.com and seems to be in deep in the website design world. He has some great work to check out and is involved in a large number of successful websites packed full of resources and inspiration.

8. Veerle Pieters

A graphic/web designer from Belgium, Veerle has tons of posts from over the years covering stuff from html to illiustrations. It makes for an interesting read if you dig deep into the older content. You’ll also see just how much a great designer knows about their industry when you read Veerle’s blog.

9. Collis

Probably should reside in the biggies list but because we aren’t talking about his amazing success story, Envato, he slots into the smallies. He’s the CEO of one of the largest and greatest design marketplaces on the web. He has his own blog called the Netsetter which covers mainly covers the business side of the design industry. (he also features a lot of guest writers too)

10. Chris Spooner

Because he’s a local boy! Chris was born and raised in Sheffield, UK, and runs his blog over at Spoon Graphics. He posts some great content covering mainly graphic design but it a great source of inspiration.

There are many more people to check out in the web design world, you just have a dig, and when you find them either subscribe to their RSS feed or follow them on Twitter like a stalker. Either way you’ll get great resources and good reads!

Also see @liammckay @kevinrose @shauninman @jasonfried