(Click to enlarge; 1857px by 1354px)

Also have a few larger similar versions on GraphicRiver here and here!

Couple of colour variations:

Red effect;

Blue effect;

I have been working on and off on a theme for a while – I keep going back and tweaking this, nudging that, recolouring the other bits and so on and so forth. If you knew what my life ‘to-do’ list looked like it would make more sense however I do feel so lazy for not keeping up to date and current.

Wordpress though has decided that if I am indeed not going to update the site and not going to pay it attention then it will start to break things on it’s own accord. The major (and seems currently only) problem is that the media image manager will no longer browse for images on a post I have been writing… for no reason… even though I can browse for an image on any other page/post. I am not being presented with an error either so I guess that leaves me scratching my head wondering why it is being difficult; is it because my site was recently moved to a different server and this post I’m editing is pre-move? Or is there something actually wrong with the database or installation? I have no idea, but, for this version I am not going to dedicate too much time finding out.

I am really looking forward to updating the site even if it is just to re-enforce my name on the web. Writing is not my strongest point and neither is simply finding time to write (though I do really enjoy it once I get going… as you can probably see). I will keep you posted!

edit: I can spell. Honest.

I didn’t take long for me to realise that working as a full time web designer somewhat lowers the motivation to then go home and write about my thrilling adventures in the interwebs. With that in mind I decided to make some severe structure improvements to juggle around what is more important.

Looking at stats and the holes in my current site so far I have decided:

• Blog has been neglected and takes up far too much of the site for me.
• The site needs to be more about me, what I do and things I think (rather than trying to nudge into the ‘web design blog’ market).
• Need to add more networked features such as a better looking (or working) twitter feed, facebook links, flickr feed, favourite blogs and sites feed and generally easier to access “self updating” extras.
• Scrap the sidebar – content for me just doesn’t need to be laid out this way.
• Improve the visuals and integrate actual content more into the design (at the moment the layout is far too ‘design here content there’).
• Finish everything I set out to achieve. Minimise page length the actual useful content and maximise on work done using better visuals and scrap tiny thumbnails (I’m not exactly a big enough company to warrant having a huge portfolio!)
• Accept that the site needs to be an online business card and ongoing project rather than a full blown blog and moneymaker.

What do you think?

I would really like to invite any feedback on any ideas which would help me improve my site and ultimately myself in the way I design.

It looks like it will cater to the little bit of me who wants to go nuts and assassinate work colleagues.
Disclaimer: I’m safe, don’t panic and/or fire me

I might get a MacBook one day but I’m currently looking for a decent messenger bag to carry all my junk. If you know of a good place (in the UK or preferably online) that sells messenger bags suitable for a couple of books/ ipod/ cables/ hard-drive etc then please drop me a comment!

Heading to Cambridge on the weekend so hopefully I’ll stumble upon a good “bag” shop.

If everything could be local it would be ideal. If you’re in the UK, wouldn’t it be great to speak to someone who is English? The same applies for the US and all countries – this is all about keeping it local.

The industry is not likely to get nervous about jobs being farmed off to, say, India, in huge quantities but there are sites appearing offering ‘cheap’ web services for western clients. Yes we buy Chinese products because they’re cheap, yes we outsource all kinds of work to foreign countries and yes, I am passionate about the cheap labour problems here in the UK but… do we really want everything to be outsourced and imported?

With tutorials for everything in there absolute abundance all over the web it is easy to find what you need without a lot of effort.

Using Good-Tutorials now and then to find quick fixes can be helpful but it can quickly turn into a long haul adventure trying to find a tut which avoids all the fine details. Video tutorials often turn up with far more information than an advanced user would need and still too dull for a beginner.

Getting to the point

Video tutorials, when created by professionals, can be a useful and a gentle guide to creating that great effect for your next project, but do you ever find that ‘average Joe’ tutorial just does not get to the point quick enough? If you’re in a hurry to complete a project and desperately need to work out how to light this bit or colour that half then having to sit through a video presentation of each fine detail can be very painstaking.

If you are going to create a video tutorial then remember:

• Always have a “final result” image either on the page or at the beginning of the video
  Show what you are creating without having the user download the whole video first
  
• Make sure that you do not take too long to do simple things such as moving an object
  Unless it is a guide for new users then you can keep a good pace – keep it quick and precise
  
• Edit your video properly – by all means go into detail when making it but cut what’s not needed before publishing
  This will save advanced users a lot of time.
• If you tutorial is for an advanced effect then use advanced instructions.
  Catering for every level of designer/developer is going to add a whole lot of extra instructions to your video

Text/image tutorials

Using a page of text broken up with images will provide the easiest to read format for tutorials.

Text tutorials can cater for a wider audience as not only can advanced readers skip additional instructions but readers who are new to the topic will not miss out only the extra help they may need.

Starting a tutorial, especially if it spans a few pages, with a “final result” image can really inspire the reader to proceed with your guidance and it also secures their trust that it is worth it. If possible also ‘rate’ your tutorial with a brief description of its difficultly – this may put some readers off but it will also challenge others and help more experienced readers skip through quicker.

Things to remember when writing

• Use a “final result” image at the very beginning of your tutorial
  Having the complete image inspires the reader to continue
• Highlight physical instructions such as “blend mode > overlay” to allow quicker reading
  A confident user may not need to read anything more than “overlay” to understand the instruction
• Provide any links to resources used if they are essential to complete the tutorial
  “I used fluffies Hard_brushpack1″ with no link would leave the reader stuck
• Write a conclusion but if you are going to show a “this is what you could do next” image then write the basic instructions on how to get there
  Keeping the reader interested past the end of your tutorial will generate returning users and feedback (if possible)

The end result

At the end of the day keeping everyone happy is difficult; there will be new users who will ask questions that you are sure anyone would know and also advanced users who may get frustrated. The problem simply arrives when you try to deal with both extremes and end up over complicating matters. Write your tutorial based on the difficultly of achieving the end result but still leaning slightly on the side of the new user.

Text tutorials are by far easier to follow especially if your are at work or unable to view the video due to lack of a flash player or audio. Being able to move back and forth throughout the tutorial without having to pinpoint that tiny little bit on the time line will greatly help the user achieve the end result in their own time

Feedback welcome as always. Screen shots taken from PSDtuts which is an awesome Photoshop Tutorial site and has great examples of good tutorial writing.

Many sites are overall ‘pleasing’ to look at which give you that “ah, this is nice” feeling but what is in the detail which makes you come back for a second look? Great design is something that sticks without even being sticky – a little flare, light or edge which either brings you back to that site and inspires you to create.

These designs recently caught my eye and have inspired me to create.

It’s the little things that count

At the point at which you decide to take that box and give it a lift, an edge or just a little colour will give it life to make the page have more of a feel then that is eye catching.

ACS SEO – Eye catching simplicity

Beautiful paper style design with a soft organic feel. Navigation is clean and easy to understand without being left with the feeling of “where am I?”. A great example of “light” design promoting ease of use.

Web Fruits – Eye catching colours

A design which uses dark grey and slate blue to create easily readable content. Header, menu and content is well defined even though it is only separated by space and minimal graphical details. Colours are strong on important elements which catches the eye.

This Web Host – Clean lists and content

Simple design with well formatted content – whole site feels “complete” down to the last detail. Lists and points easy to read and are well defined using plenty of padding and the use of large bullets/numbers.

DesignReviver – Organic “complete” feel

Well designed structure with a strong focus on usability. Very inspiring Web 2.0 grunge style throughout the site with a nicely styled “featured” post on the home page which draws attention.

Mollom – Bright and clean

Clean, crisp and clear design. The flash banner is a bit of a distraction and plays havoc with my FireFox causing the script to ‘lock’ the window – otherwise an interesting design.

Karim Zurita – Soft almost touchable feel

This is a well designed portfolio site. The message is clear on the home page, it is easy to work out where you are and what this site is about. Icons make the navigation clear and simple to use.

Icon Kits – Smooth descriptive navigation

Simple navigation and well designed content. Suitable use of headers and short paragraphs.

David Costales – Nice floral background

The floral background of this site adds a small memorable detail to an otherwise simple design.

Avalonstar – Awesome Grunge 2.0 design

This site has all the workings of a web 2.0 blog under the hood but carries a whole new revised image over to the web. A perfect example of dark eye candy.

Colin Grist – Beautiful header image

This could of been a average banner image with a bright photo but the shadow, gloss and curve pick this up off the flat and make it so much more interesting.

Kevin John Gomez – Effective initial impact

The scribbles in the header contrast against a very structured clean site.

Oypro – Eye grabbing header illustration

Large header vectors can hold a users attention but can feel bolted onto a site. Creating an image which weaves and integrates into the site structure can make it feel like it was always there.

Swaylo – Bright, colourful and clean

Good use of vectors and illustration can improve a websites visual quality but too much can throw the visitor off the message. This site has a good balance and presents his portfolio in a easy to find/easy to read block.

Ivan Pik – Effective background image

The detail in the background image can grab attention even away from the screen.

Inkblot Creative – Bright and clean

Clean design promotes a clean image and this site, along with it’s personal approach, is very welcoming. The flash is also subtle enough not to intrude on the experience.

Ayush Saran – Awesome and clever design

Simple site with a simple message backed up by one very clever vector design.

Really Wild Flowers – Eye catching background

Brian and Ariana – Small, pretty and ideal

This is a beautiful little site to promote a wedding but just the little fine details make it a really inspiring design.

Web Design Beach – Colourful header and soft details

Good integrated vector design can make your site “pop” and stick.

Mostly Eating – Beautiful backgrounds

The ripped paper menu is just like all those scribbled recipes my other half leaves around the kitchen! Very fitting for the content.

Ivan Pik – Websites at dusk

A soft organic design backed up with subtle photography.

Chemistry Recruitment – Everyone loves sketches

Adding your unfinished design ideas to a finished design through sketches is a popular eye catching technique.

River Nene – Simple memorable design

A nice design which is easy to use and navigate. Using the site you will find water paint/paper style sketches to illustrate options and links.

The last detail

There you have it; A top list of inspirational designs and all their little details.

The best motivation for creating is looking at someone else’s work, appreciating it and then finding out how to be better. Taking a great design idea and working to improve it can be a real challenge, be it only with yourself, but it can yeild very satisfying results.

With hand fulls of CSS/design showcase websites there is plenty of inspiration for everyone but with the best designs you will be able to go back and pick that design out from the crowd.

Don’t forget

That icon you put next to a link or the slight gradient of colour you put on that button can transform a common experience, like clicking a link, into something visually pleasing – be it very small – but keep up the small details and they soon ammount a great design which will leave a lasting impression on your visitor.

You; You are the hardest client to please – well not you personally, but I mean when you decide to create yourself a personal website it has to be absolutely perfect. No exception. This is the key reason I love CSS Mania because it is full of people doing the same thing – pleasing client number 1.

Being a total perfectionist I struggle to say “right, that’s finished” and walk away from a project with a sense of “a job well done”. Through my eyes everything can be improved and it will never be finished; only usable. This creates no end of problems at work as I am terrible with deadlines because I hate to feel that a project is “unfinished” despite the client and management agreeing it is complete – a recent post on Anywired describes my inner boss perfectly!

So, point, that would be that while looking on CSS Mania at the new sites I decided to dive into the gallery then into 2004 to see how things have changed. Many of these sites are dead or 404ed but it’s almost a perfect timeline of “good design” and how things were a few years ago. It does make me feel like my site will be out of date in no time but being the perfectionist I am, I should be able to keep on top of things.

Have a look at CSS Mania’s archive and think that these sites where showcased once.

I stumbled accross this video earlier and I find it almost hard to believe that this is real and that someone, at some point, in the Windows dev team said “Hey, I have an idea to promote service pack 1…”.

I can understand the words “I have an idea” within any reach of a Microsoft building being the phrase to strike fear into the hearts of PC users but I just can’t understand why this was created.

I’m not sure how long this has been around but enjoy…

Comming next: Jack Howell and the GlassHills Nutty Band!