Web page template with 960 grid system

I pretty much use this PSD on a day to day basis as my starting point to designing web pages.

The PSD has the 12 and 16 bar 960 grid system. Even if you don’t like using the 960 Grid system you will find this template useful. Guidelines mark out your 940, 960, and the 1024 pixel lines. If you can’t see any Guidelines turn them on by pressing CTRL ‘H’ (pc) or CMD ‘H’ (mac). Using this as a default base will hopefully give you a starting point for your web designs in Photoshop.

On each of my PSD’s I will release this week you will see I have one white layer above all other layers. Saving a PSD out like this reduces its size by up to 20%. Just a little handy tip if you are struggling to reduce your PSD size.

The PSD’s dynamics are – Width: 1100px Height: 960px

Download the web page template with 960 grid system below

The iPad has been designed and created for media consumers. It is not geared towards the design community which is probably why we have had such an outcry about the usability of Apple’s new product. It runs the OS software the iPhone uses and not full OS X which is seen as a big let down by designers. Using the same software as the iPhone means that like iPhone the iPad will not allow multitasking.

The size of the device however I really do like. I like the large bezel around the edge it has be thick because of the way it’s held! Not quite sure why everybody keeps slagging this feature so much. The size of the screen is perfect for browsing sites I really don’t think there will be too many arguments about its outstanding browsing capabilities.

What the iPad does not have is a real usefulness and an area it can currently fill and help me with my design. Which brings me to my main point…

How Adobe can help the iPad and themselves

A few days ago Steve Jobs had an alleged rant about Adobe in a meeting screaming:

“Adobe are f#cking lazy! AHHHHHHH” – something like that

His comments were aimed mainly at Flash the fact he thinks it is buggy and this being the reason for not incorporating it into the iPad or the iPhone. Also saying the progress of HTML5 will make Flash more or less pointless for online videos.

However what he may have created with the iPad is the opportunity for Adobe to create a program/app so good for designers I think every designer would want it. If Adobe did get their finger out of their arse and created a PhotoShop app capable of allowing illustration with a pen straight onto the screen it could revolutionize the way we work.

It would turn the iPad into an awesome Wacom almost incomparable to other Wacoms. Small, sleek, sexy, it’s constantly connected to the internet, affordable, and most importantly, it could be superbly productive. For an app like this I would pay up to £200 for.

If you were able to create an illustration or a design layout within a PhotoShop app and then have the ability to save out the PSD you could put it on a USB device upload it to your main computer or even upload it on Dropbox through their free app on the iPad.

This wouldn’t be Apple going into the Wacom market it is them allowing programmers to make apps within the iPad that gives it the same ability’s of a Wacom. It would be small enough to carry everywhere in your rucksack/large handbag. You would be able to sketch down ideas while on the train in the park or even sitting in the pub!

The iPad already does have a working illustration app called Brushes which you draw with your finger. I personally feel this app just isn’t a strong enough reason for me to even think about buying the iPad as it is still so limited with layers and does not allow the creation of vector images.

I’m no genius when it comes to saying how the iPad will do sales wise but even if the iPad had just this one app, I would buy one and I have a feeling that a lot of designers illustrators out there would too.

In order to show the design and development process as transparently as possible they have created Blog Lettuce Tomato. Every Tuesday and Thursday they release updates on what’s going down with ‘Project Truffle’.

What is Project Truffle then I hear you say?

Project Truffle is an App that will make finances easier to understand for the masses and ultimately save people money. Sick of big corporate financial comparison sites that only show half the picture, Decode have teamed up with some more inspiring web folks to create a community where the best interests of the people are what really matters.

Here is a video from the team explaining a little more:

As you can see from the video, Decode have brought in former Carsonified teammate Mel Kirk for the social media side of things.  For the design and branding they have another former member of Carsonified Elliot Jay Stocks, leading the visual side of things.

What has got me interested in this project is the way that I am now intrigued to follow the progress of a financial app, even though I am usually not really that interested in this sort of thing. By giving me details of the people involved and why they are all collaborating to make this app special makes me feel connected to the development progress and so interested in what they come up with. The openness of the BLT blog has also been great to read. It feels like a behind the scenes tour of a websites creation, where you can just sit back follow and learn.

By sitting down and discussing the brands they loved, the Project Truffle team were able to decide on what they stood for and were against before starting on the website. Giving them clear direction on their brand identity before briefing a designer.

“We don’t want to be Money Supermarket, we want to be better! The challenge is about to begin and by jove are we ready for it!!!” – Mel Kirk

After long meetings with Elliot Jay Stocks he was let loose on the branding of Project Truffle. It had to include a pig which made his branding process quite enjoyable to read. Have a read of Elliots’ branding process here.

So with all this teasing I was ready to burst! (forgive the pun) What was the actual app and site going to be called?! I was relieved and very pleased to find out its name in the end. Once the initial branding for the Financial App was finished it was announced and put online as a holding page – http://themoneypig.com/

As you can see the branding is easily recognisable and I find it much more inviting and friendly than the usual dull financial website designs. I mean they are using a tiny cute pig! Piglet, Babe, Pumba, Porky Pig, even Miss Piggy! Everybody loves pigs! ‘calm down Harry’

So what’s next?

Well the site is now open for registrations to become a beta tester for the app. That is once they have it ready, but for now you can keep up to date on the app through the BLT blog.

Such a transparent development process takes balls and I for one take my hat off to the guys (and girl) for allowing us all to watch their exciting journey and learn from it.

I started of by sketching my character whom I’ve named ‘Father Time’. I have given Father Time a few watches and clocks for effect and a walking stick to add a sense of age and frailty.

Sketch out your character

Once you have your character sketch in Photoshop give it a tidy up with the rubber tool.

Tidy up your line drawing

Adding vectors with the Pen Tool (P) is ultra simple and easy to do. Take your time defining the edges of your character. Make sure you group all edges inside one folder (I named mine lines), to keep things neat and organised inside your PSD. While you create your vector outlines you may find it helpful to give your layers an opacity of 50% or so to enable you to follow your outlined sketch behind. Once finished just put them all back to 100%.

Start creating your vector outlines

Your characters edges will not all be the same thickness. Staggering the thickness of your outlines gives your character a less mechanical style and a more hand drawn look.

Spend time getting your lines perfect

Once you are happy with your outlines you are ready to start giving your character its base colour. Remember to create all your base colour layers in a named group within your PSD below your edges/lines group.

Finished outlined character

I use the Pen Tool again to create my coloured layers below the lines folder.

Adding base colours

Finished base colours

Once you have all of your base colours in place it’s time to start adding the definition and shading to your character. Decide now where your light source is coming from. Above, behind, left, right, maybe below? Once you have decided, start creating your shadows and highlights in a separate group above your base colours group but below the lines group.

Choose your light source angle

You may want to add textures to your character – if so, follow these quick steps.

- Open your texture in Photoshop and go to ‘Edit’ – ‘Define Pattern’ – Here you can name your pattern.

- Select which layer you want the pattern to appear on and open its Layer style. Select your newly created pattern in ‘Pattern Overley’ – Choose the scale of the pattern here also.

- If you wish the pattern to be slightly darker, lighter or even to have a slightly different colour, I apply ‘Colour Overlay’ in ‘Layer Style’ – select your colour then take its opacity down to unveil the pattern underneath.

Adding a jean texture

Once you have your shadows in place take a little time to decide if your character needs more defining or colouring. I found at this stage that little Father Time needed more shadows on his face and his coat as they were far to plain a colour.

Needs slightly more depth

Father Time - Tick Tock

I hope this Tutorial has given you some inspiration to create your own characters in Photoshop. If you find yourself enjoying yourself far too much try your character in several different poses and situations.

Different poses

I’m sure most of you could regale us with countless stories of unrealistic demands from clients or how you’ve anxiously awaited feedback on a design only to get blown out of the water. Forewarned with those experiences you would think that we surely must be a breeze to work for…

Not so. My name is Chris and I am my own worst client. I don’t think I’ve ever had a more stressful project to work on than redesigning my personal site. I would have fired myself if only I wasn’t attached. My own erratic behaviour included approving work one minute and hating it the next, spending ages building sections of the site only to demand they be re-written because I’d used too many classes and so on and so forth.

So why am I so bad at being a client?

Because I didn’t approach the job in the same way as I would for an external client. Before embarking on any type of design project it’s important to have some form of brief, ensuring you and the client are both on the same page. My normal approach for a job would be to then go through a clearly defined process to fully explore the clients needs and ensure that I can meet them. This isn’t how I approached this job – I was trying to be a smart-arse.

I had assumed I knew myself and what I do well enough to skip these first steps. But in doing this I had unwittingly caused this cycle of self-loathing which got me nowhere. I can see why studios like Squared Eye brought in outside help for their redesign. I should have known better.

So in an effort to spare you the stress and strains that I felt, I thought I’d share 3 top tips I hope you will bear in mind when embarking on your own re-design. I promise it will be a smoother process as a result.

1. Have a clear design brief written down

You wouldn’t dream of taking on a client project without a clear brief, so why would you design for yourself without one? Erskine Design set aside time, appointed lead personnel and scheduled regular meetings for their re-design; effectively treating it like a live client project. You need to clearly get down in writing your aims and objectives for the site. I sometimes find it helpful to create a one-sentence summary of the project’s goals and aims so that every time I think of adding something I first think does this fit my summary? – if so keep it, if not get rid of it. Which leads nicely onto…

2. Throw out everything you don’t need

Feature creep is a notorious problem that plagues the most experienced designers and developers. The key here is going through your existing site and asking yourself does this add value to my site? Saying more with less is a laudable goal in this case.

3. Ditch Photoshop until the end is in sight

I made the mistake of coming up with half-formed ideas, then excitedly jumping into Photoshop to mock up the design. Then, when I came to coding it I would invariably encounter layout problems that would not have occurred if I’d spent enough time planning.

Paper and pencil is your friend here – ensure you sketch your ideas loosely but consider everything, for example how much detail will you include in the portfolio? or how much content will you show on the homepage? Only when you have visually considered your whole site should you open up Photoshop.

What do you think? Do you have any top tips to ensure a stress-free redesign? Let us know in the comments.

If you would like a personal icon for your blog/site please leave a comment quoting your site and I’ll create it in due course. Or if you would just like to see more social site icons like DesignBump or Flickr just leave a comment.

If you want to view the animation again just refresh your page and the icons will animate again. I currently have them only scrolling through two times.

Because of this, I’ve decided to create my own list of favourite iPhone design apps that I use, that will hopefully be of some help to you. If you use or know of any others that come highly recommend, please post a comment with the relevant details and I will try and review each one.

Apps for every Designer

Analytics £3.49

0.3MB

Tracking your websites on Google analytics? This is the best app for you. There is a problem with the current version when logging in with your Google account. Sometimes it fails to log you in, but apparently this issue has been fixed in the next update. It is slightly slow loading, however is worth the wait once your detailed site stats are visible.

Ego £1.19

1.0MB

Ego is a simple overview of your  Twitter, Feedburner, Squarespace, Google Analytics and Mint 2′s statistics for your sites. It’s a little bit unnecessary if you have the analytics app, but at least you can check your Mint and Feedburner stats through a single application.

WordPress Free

0.6MB

I was really happy to find that WordPress on the iPhone supports the full landscape keyboard feature. It has made it unbelievably easy to edit and write new blog posts via my iPhone. The app does lag a bit when browsing but the latest update has helped alot. Instead of waiting to get to work or home to my laptop I can now approve comments right away and writing posts has become a lot more fun while on the move.

Byline £2.39

0.3MB

Byline links to my Google Reader and collates all of my collected RSS feeds I read. Also links with the macs Program NetNewWire. I do however think it is slightly overpriced at £2.39.

Sherpa £3.49

0.6MB

If you use Basecamp for your task system then Sherpa is the app you’ll need while your away from the office. It enables you to switch between projects get to your messages , to-dos, milestones and contacts. The app works very quickly and I have never had a problem with it, Personally I think it is worth the £2.39 it costs if you use Basecamp a lot like I do.

Brushes £2.99

2.0MB

Brushes is definitely the best drawing app released so far. There are a good range of brushes and has an easy undo (soooo helpful). The ability to scroll beyond the edges of the picture is really helpful. Also the ability to use a photo from your gallery as a base for a painting or sketch you may want to create. Layer transparency is very helpful when adding photos to your little piece of work. I have recently bought an iPhone pen to use for this app and will update the review for this app and the pen together when I receive it.

SketchBook £1.79  SketchBook Express Free

3.0MB

I was using Sketchbook originally before I discovered Brushes. I found some of the brushes to be slightly laggy and i didn’t like the resizing tool at all, finding myself jumping in and out of the options menu far too frequently. I would definitely recommend Brushes for your iPhone sketching/painting app other this one.

cliqcliq Colours £1.79

0.4MB

There are plenty of colour apps on the iPhone but this is my favourite one. cliqcliq colours allows you to take colours from photos you have taken, which has been an inspiration on its own so far. It also allows you to email your colour palettes to yourself and other in formates compatible with Adobe Illustrator and Photoshop. Awesome app!

iBlueSky £5.99

0.2MB

I do like this app but it it very overpriced for what it actually does. It allows you to create a mindmap whether you are on the train or in a meeting, then export them as a PDF via email. I would maybe wait till it drops down a little in price or a competitive app is created before spending your pounds on this. I tend to use my sketchbook for mindmaps as I want them down quickly without having to type on my tiny iPhone pad.

WhatTheFont Free

0.2MB

WhatTheFont is a great idea and I really wanted it to work a lot better than it currently does. It only recognises very High resolution images. Even when I tested it on Arial it gave me a list of really random fonts. A great start, I just hope they improve the character recognition at some point.

FontShuffle Free

3.1MB

Font Shuffle is a great first release and if some features are released for this app it will definitely be a must for all designers. Perfect way to search for fonts whilst out and about.

CSS CheatSheet £0.59

0.2MB

The idea for this app is sound and I have found it very helpful at times. It has however got  a lot of mistakes in the description of some of the code which is not very helpful. Useful to beginners. Also works offline for when your on the go.

HTML CheatSheet £0.59

0.2MB

This app is in the top 11 essential iPhone apps for designers by Daily designers. Once again like the CSS app some of the descriptions are rather vague but a must for developers needing a quick refresh on HTML now and then. Again it also works offline.

Javascript CheatSheet £0.59

0.2MB

Useful for beginners. Any hardened JavaScript coder will not find this app of much use as it pretty much covers just the basics. Be good to see what any new update brings hopefully a more complete reference. The app also works offline.

jQuery CheatSheet £0.59

0.5MB

The jQuery app is probably the best developer app out of the previous few cheatsheets. What is great about this app is you can actually edit the example code and then test the code out to see the changes in action. This app again also works offline.

Awesome Note £2.39 Awesome Note Lite Free

5.5MB

There are quite a few note systems for the iPhone but I personally wanted one that worked quickly and looked good while at it. Categorizing your notes helps sort work from play and as long as I check mine daily I don’t tend to forget alot like my bosses birthday party next weekend or a daft idea I came up with during the night. Maybe a little overpriced at £2.39 but it is pretty feature rich and very appealing to look at. The free version is worth testing out if you have been looking for a better note system. All round pretty awesome like its name says.

Apps for the Social Designer

Tweetie £1.79

0.7MB

As a designer it is vital to be up to date with all things social on the web the most important to me for research and meeting new people is Twitter. The best app for this after testing lots is Tweetie. It is by far the fastest Twitter app I have so far tested. Compared to other apps I have found it far easier to browse users details followers and @replys. You can choose in your settings what Twitter picture site you want to upload your photos too i.e. Twitpic, Yfrog and Mobypicture. I have however found that when uploading to Twitpic that it compresses the image so much it looks pretty shoddy. Also whatever test you put with the image does not appear within Twitpic. This is why I recommend also using the Twitpic app as well.

TwitPic Free

0.1MB

Twitpic is a pretty simple app it allows you to upload a picture from your current gallery or take one then and there and upload it right away to your chosen twitter account. When taking a picture within this app it will not save to your gallery. Your comment however will appear with your image on Twitpic and Twitter. Would be nice if you could browse your other uploaded photos hopefully they will feature this in a future update.

TwitVid Free

0.3MB

Twitvid allows you to upload your 3Gs videos to your Twitter account. A better looking app than the previous Twitpic one. Once again very simple just allows you to upload your video. Would be nice in future updates to get a full browse new videos section.

Facebook Free

1.3MB

The newest version of the Facebook has been great. Much simpler and fresher. As many designers may be promoting their sites as fan pages on Facebook I wanted to see how well they worked within this app. First off I found them very slow to load the RSS feeds that are usually within the wall section of the fan pages. I did however like the way the app allows you to add a fan page or friend to your main wall as a main options. Allowing you to quickly browse your favourite websites, musicians and friends updates.

The app however does not allow you edit any of your personal fan pages or groups whithin itself. We will have to keep using safari for this for the time being.

LinkedIn Free

0.9mB

For anybody who is a member of LinkedIn this app is pretty useful but has quite a lot of stuff still missing. It allows you to get the latest updates from your network, quickly find contact information from your linked professionals list. Learn more about a person you are going to meet and keep the rest of your network up to date with personal status updates.

A lot of the customers reviews are pretty bad for this app which I understand as premium members expect more from this app which is fair enough. The app allows you to send LinkedIn members a messages and add them to your address book. It doesn’t let you browse groups or LinkedIn members current topics. Just have to wait and see if they include all this in the next few updates.

Skype Free

5.4MB

As time has gone by I have found myself using Skype alot more to talk to my contacts worldwide. You can only make calls from Skype with wifi connection as 3G is not compatible.  Chat however does work with both. It’s not like I need to make phone calls with Skype anyhow.

Google Mobile App Free

2.6MB

This is a great application it runs bug free always returns pretty intelligent results and is very speedy 99% of the time. The awesome voice recognition system allows me to search for destinations while driving or out and about. If I am after a Chinese restaurant I just say it and then click the option ‘find one near me’.

Flickr Free

2.9MB

If your like anything like me and take your camera everywhere you pretty much go then you will probably want to keep a tabs on all your Flickr uploaded photography. You can even upload photos from your iPhone to your Flickr account. The app only allows one upload at a time though which is a little (very) painstaking. It also strips the photo of its geotag information. You can only choose to tag it with your iPhone’s current application. Hopefully this will all be fixed in future versions.

Delicious Bookmarks £0.59 Delicious Bookmarks Free

0.2MB

One of my favourite applications is this Delicious bookmarks apps. This is not an official delicious app but it works perfectly and allows me to fetch my bookmarks to my iPhone and also save more bookmarks within Safari.

Bump Free

0.4MB

As seen on the TV adverts Bump is a pretty well known app now and for good reason it works really well! I have been in meetings and needed several peoples contact details the easiest way to do this (if you all have iPhone’s) is Bump! Edit your personal profile adding as many of your websites emails as you like. Then connect and Bump details great stuff.

Mover+ £1.19 Mover Free

0.6Mb

Mover is handy now and then if you quickly want to give a colleague/friend a photograph, file or bookmark. Older versions stalled quite a bit but that is all sorted now. Mover+ has now got bluetooth but I find the free version fine for what I need. Everything you move across to a friends iPhone will automatically saved which is handy. Only works through wi-fi or bluetooth with the + version.

Apps for the constantly moving Designer

National Rail £4.99

1.8MB

National Rail used to have a great free app that did almost the same thing as this app with MyRail. But they killed that off and now ask for £5! Which is alot to be honest with you for this app. It tends to be 15minutes out a lot when I use it and doesn’t always show cancelled trains. If you do travel a lot by National rail however it will obviously be helpful. Journey planner and next home train features being of great use to me in the past.

TubeMap Free

1.1M

Here is a handy little free app that always helps me when I’m up in the Big Smoke. Full tube map with the Thames on it! Also a line status which is useful to check before the your trek into town.

PetrolPrices Pro £2.99

0.4MB

Like many I have been using PetrolPrices.com for many years and find it a pretty cool service. PetrolPrices Pro allows you to search for the 5 cheapest petrol stations within 5-20 mile range of either your current location or any other you specify. I use it a couple of times a month and find it pretty useful when on my travels.

UkTraffic £1.19

0.2MB

I downloaded UK Traffic purely on the fact I wanted to test it as the reviews for this app were not convincing me to buy it. However I have found it to be pretty much up to date apart from the odd road work or incident warning that has not been updated.

AroundMe Free

1.8MB

One of the best apps I have found for when I am in a town I am unfamiliar with. Finds every place you would possibly need. Best of all it is free and looks good!

Toilet Finder Free

1.1MB

Last but not the least toilet finder! This has to be my favourite app on the iPhone haha seriously handy when in a tight spot! Found myself so many times being in London or out at night needing a public toilet and this app just comes to my rescue every time. Unless you really like peeing in the nearest bush.

Total cost for all apps: £37.61

Total memory used for all apps: 40MB

Does your site need a World of Warcraft retweet icon or a geeky style retweet bird? Let me know by commenting and I’ll create some more custom icons for everyone to use.

You can download a zip file at the bottom of the post with all the current icons in png transparent format. There is no need to attribute us but any links back will be appreciated.

Now with more of your requested Retweet icons! Be sure to request one by commenting.

Retweet offer a smaller version of the retweet button below so you can use it with these icons. The small button will fit anywhere so go crazy!

<script type="text/javascript">
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>;

At Chelsea Football Club of which I am a fan we put forward a petition to the club to get the club’s board to change the logo back to the 1970′s crest. We felt as fans it represented us as a club with more history than the current badge was currently doing. So take a look and check out how some of the worlds largest brands and identities have changed themselves so maybe you would like them more.

1. Canon

2. Ford

3. Batman

4. IBM

5. Firefox

6. Pepsi

7. Nokia

8. BBC

9. Shell

10. BMW

11. Lego

12. Apple

13. NASA

14. BT

15. VolksWagen

16. Superman

17. Vans

18. Chelsea Football Club

19. Toronto Maple Leafs

20. Yahama