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.

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!

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

Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site.

Web Developer Toolbar

This handy toolbar includes features such as in browser CSS editing which lets you see CSS changes live, the ability to disable Javascript, Cookies, CSS and Images (for usability testing) and includes many handy features.

Some fancy tricks also include:

• Element outlining
  This allows you to see which <div/input/anything> tags are lining up wrong and combined with the CSS editor proves a powerful tool in element alignment.
• Disabling CSS
  This allows you to see how your layout holds up with browsers which don’t support CSS (such as screen readers). If your content is laid out poorly, it. will. be. read. out. loud. poorly.
• Browser Resizing
  Want to see how your site looks in a 1024×768 browsers? Click the re-size button and the toolbar will set your browser window to any size you specify!
• Quick Validation links
  Want to know if your XHTML or CSS validates? There’s quick handy links under the Tools drop-down.
• Generated Source vs Source
  Is your Javascript messing up your code? Then view the Generated Source to see what it’s actually doing to your pages.
• Quickly Edit HTML & CSS in-line
  It’s a quick and dirty way to see how your new CSS/HTML code works in your site. Simply open the editor and type away to see your page update live.

There’s many more options you can play with. All you need is Firefox and the Web Developer Toolbar.

Firebug

Firebug is a tool used by almost every web developer in the world. If you’ve not installed it yet, do it immediately as it will save you many man hours fixing bugs in your websites code. It’s had over 19 million downloads and averages 22,000 downloads every day.

Colorzilla

When I can’t remember how to count in hex (which often happens) I use Colorzilla. It makes sure my #009ecc is not #02a4d3 and that my #666 isn’t #999. It’s best to keep consistency and is what separates a good designer, with a great designer.

There’s loads more Firefox Add-ons you could also check out:

• YSlow https://addons.mozilla.org/en-US/firefox/addon/5369
• Pixel Perfect https://addons.mozilla.org/en-US/firefox/addon/7943
• Firecookie https://addons.mozilla.org/en-US/firefox/addon/6683
• PageDiff https://addons.mozilla.org/en-US/firefox/addon/4274

Internet Explorer Developer Tools

On the Internet Explorer front there’s not much for the modern Web Developer. However, using the Firefox tools above covers most if not all of your needs, except for IE8, IE7 and IE6 testing. This is what I’ll go over next.

The best tool is actually one released by Microsoft themselves. The aptly named Internet Explorer Developer Toolbar which gives you a few tools to play with which include a CSS and HTML editor, the ability to disable CSS and images, use a colour picker and outline elements. It’s basically a shorter version of the Firefox web developer toolbar. It also allows you to quickly switch between IE7 and IE8 browser rendering. Simply select which browser mode you need and you can see what your page looks like in IE7.

Now for IE6 (cringe). I know a lot of developer are now dropping support but as previously mentioned sometimes it’s not an option, and we sometimes need to think about this when developing mass market websites.

Spoon.net

It’s a tool I only recently found and because Microsoft won’t properly develop something which lets you run IE6 on your machine, Spoon developed a browser plug-in which lets you run ANY browser, well, IN browser. They call it “App Virtualization” and I call it magic as it let’s you run IE6! (note, as of writing I couldn’t get it to buffer on Windows 7 64-bit but could on Vista (32) and XP (32), let me know, maybe it needs to be XP Virtualized?)

Adobe BrowserLab

This amazing tool lets you preview your pages side by side and even overlay pages (known as onion skin). You can also preview your site in many browsers which include Internet Explorer 6/7/8, Safari 3/4 and Firefox 2/3. The only downside is you can’t preview it as a functional page so can only be used for styling sakes, and it’s a little slow to run sometimes.

I hope you found these tools useful for your web developing needs and good luck (you’ll need it if your working with IE6)

The Orange advert always makes me smile. It’s so fluid and random at the same time. It makes you think like a child for a second and ultimately drops Orange in an exciting, fresh and great advertising niche. Hopefully after the T-Mobile merge these adverts will stay as the T-Mobile adverts are really sh**.

Clever use of an old stereotype. Kids hate going to Grandmas. So bring her cooking home.

http://www.greyparis.fr/

Disturbing in every way yet after reading the tagline it makes sense, in a sick twisted way.

http://www.milc.it/

Putting textures into Billboards is probably no easy feat although the guy who put it up probably saved time getting each one smooth.

http://www.seetheperson.info/

OTT for sure but a brilliant way to advertise…a magnifying glass!

Y&R Dubai

Golden Age Integrated Marketing & Communication. (Ignore the “Sprinking the Passion” Haiku.)
I like it when companies “dirty” their cars up. Most 4×4′s are pathetic excuses for offroad vehicles, finally Audi saw the light and slapped some mud on there…or did they?

Update 6th Nov 09: My panoramic wembley photo has been used in Main Event Magazine (Thanks Ky for sorting this)
Update 12th Oct 09: This photo is now part of the Wikipedia page on Wembley Stadium as the header image

The game was full of controversy, foul play, substitutions and of course, goals. Chelsea finished up beating the Champions 4-1 on penalties and I took along my trusty SLR to photograph some of the action and I got some pretty good shots! Note: all the photos are licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales licence which means they are free to use along with attribution to this site! Enjoy!

These vectors are released under a Creative Commons Attribution Licence. This means you CAN use them for ANYTHING, commercial or personal and you can even modify them without asking permission. All I ask is that you attribute my work by linking to this website.

That’s it. The rest is history, as they say…Download characters.zip (3.3MB)!

Included in the ZIP file are the four characters in vector EPS format and three wallpapers, 1920×1080, 1440×900, 1024×768.

A good mate of mine (Ky Wilkinson) is giving away 5 FREE floral prints.

Make sure you head over to his blog and drop him an email to claim one!