In this tutorial we will explore what separates
good design from bad design and how to
apply the techniques you’ll learn to your
• Target Audience
• Keep it simple
• Navigation is Key
• Compatibility Issues
What your site?
Remember who you are targeting!
• If you don't need it, don't use it!
• Every image/animation wants attention!
• Backgrounds should be backgrounds
• Don’t use animated backgrounds
• Certain colours are just bad
• Check out colourlovers.com for popular color
• This is the most important part of your site.
• It needs to be:
o easy to understand
• Keep navigation easy and simple
• Five groups of five, instead of one group of
• The "three clicks or less" concept
• Home should never be more than a single
• use drop-down menus
• use splash pages
• use standard link colours
• use pop-up windows sparingly
• Can depend on the target audience
• current resolution standard is: 1024 x
• Be as compatible as possible
• Validate your website’s compatibility at
If your website takes too long to load, people
Here are some tips:
• use thumbnails
• take advantage of page caching
• use one theme throughout the website.
In this tutorial you will learn techniques to
preserve quality of your design even if you
upscale to meet new resolution standards.
• Layer Styles
• Menu System
• Use layers!
• Every new object or feature (such as a
gradient) needs a new layer.
• On a PC press Shift+Ctrl+N to create a new
• Double-click on the Layer Icon to enter the
• Use Layer styles as much as possible.
• Q: Why use Layer styles?
A: To retain quality even after scaling.
• Drop Shadow
• Bevel and Emboss
• Color Overlay
• Gradient Overlay
Hint: Keep the styles subtle.
• Make an awesome high-resolution Logo.
• Select the layers that are part of the logo,
right-click and select ‘Convert to Smart
• Now, even if you downscale you can always
revert to the original size.
• Plan out how the menu system will look.
Across the top?
Down the side?
• Don’t forget to design the look of the menu
• Backup your design.
• Click the layer-menu and then ‘Flatten
• When slicing select the features that are
different from the background color.
• A technique I use to help me with slicing is to
select the Magic Wand tool, set tolerance to
0 un-check Anti-alias and select the
background color regions to pick out the
• Once you’ve sliced up the design, save the
images out as gif, png, or jpeg in the images
• Make sure you get the least possible file size
without loosing image quality.
• These techniques will help your site load