UW Website Designers

Document Sample
UW Website Designers Powered By Docstoc
					Design
Fundamentals
Photoshop
In this tutorial we will explore what separates
good design from bad design and how to
apply the techniques you’ll learn to your
website.
•   Target Audience
•   Keep it simple
•   Navigation is Key
•   Compatibility Issues
•   Bandwidth
What your site?
     is
Remember who you are targeting!
• Children?
• Students?
• Adults?
• Employers?
• Peers?
•   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
    schemes.
• This is the most important part of your site.
• It needs to be:
   o intuitive
   o easy to understand
• Keep navigation easy and simple
• Five groups of five, instead of one group of
  twenty-five
• The "three clicks or less" concept
• Home should never be more than a single
  click away.
Don’t
• use drop-down menus
• use splash pages

Do
• use standard link colours
• use pop-up windows sparingly
Display Problems
• Can depend on the target audience
•  current resolution standard is: 1024 x
  The
  768

Browser Compatibility
• Be as compatible as possible
• Validate your website’s compatibility at
  http://validator.w3.org/
If your website takes too long to load, people
will leave.
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.
•   Layers
•   Layer Styles
•   Fonts
•   Logo
•   Menu System
•   Slicing
• 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
  layer.
• Double-click on the Layer Icon to enter the
  Style editor.
• Use Layer styles as much as possible.
• Q: Why use Layer styles?
   A: To retain quality even after scaling.
Useful styles
• Drop Shadow
• Bevel and Emboss
• Color Overlay
• Gradient Overlay
• Stroke
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
  Object’.
• 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
  roll-over.
• Backup your design.
• Click the layer-menu and then ‘Flatten
  Image’.
• 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
  distinct regions.
• Once you’ve sliced up the design, save the
  images out as gif, png, or jpeg in the images
  folder.
• Make sure you get the least possible file size
  without loosing image quality.
• These techniques will help your site load
  faster.
FIN. Questions?