If you want to see the whole progression I suggest you go to part 1.

Step 3: Don’t even touch that computer!

After I’ve collected all the information that I need, I put my computer to sleep and take out the old notebook and BRAINSTORM!

Sketch sketch sketch, get all your ideas down before you start coding. Here’s an example of what one of my sketches look like:

notebook

They are usually a lot messier than this but for the sake of your eyes I cleaned one up a bit.

Step 4: Turn on that computer but don’t start coding just yet!

Now comes the fun part…translation from notepad to photoshop (or gimp or whatever).

• If you are like me always remember to organize from the very beginning, those 2 or 3 layers will soon turn into 30 or 50.
• Make variations! Don’t just settle on one design you never know what your client is going to like.
• Optimize your images for the web. It’s very important to do this step because it cuts down the file size when it comes to loading them on the web.

Everyone’s photoshop process is different and mine changes from project to project. There are plenty of tutorials out there to help you learn web design photoshop techniques. Some of my favorites are:

• Web 2.0 style buttons
• Large sprite piece photoshop tutorial
• Graphic design studio web layout tutorial

Step 5: Show off to your clients.

Now that you’ve got a presentable layout and design, show it off. Usually I like to batch the photos into pdf format and send it that way.

Step 6: Now wait, and get out of the computer chair.

If you’re like me you haven’t stopped until step 5 has finished. I like to follow through if I have a good design. Get out of your computer chair, get some coffee, take a walk, kiss your cat that you’ve been neglecting unkakjjfekffifele it stefrerereps on yourrryyytyt keybkjaljreahlkjrd.

Ok that’s it for Part 2, hope you’ve enjoyed it! Want to read more? Go to Part 3.

Filed under: Web Design by Afarr