lecture seven
agenda
- information design
- function design
- best practices in page design
- online design assistance
- getting started with photoshop
- group exercise
- readings
information design
- designing the presentation of information
content- text
- graphics
- colour
- shape
- layout
- examples:
- transit map
- restaurant menus
- magazine story
- See: CSS ZenGarden
interaction design
- designing features that allow customers to accomplish tasks
- essentially we're identifying what people can do and how we're going to help them do it
- in web design we have the added challenge of designing the presentation of functional elements - buttons, navigation, interactive forms, tools, etc. - so that the site is useable
- putting it all together:
the interface of a site is all of the things we've been talking about:- features
- content
- visual design
- layout
- usability
- users interact with your site because of the content, not the design
- an interface should be simple, clear and intuitive, and help people access content and accomplish tasks
getting started with photoshop
- most sites use some degree of graphics, even if just for backgrounds
- imaging software is essential, even if just for graphic resizing and conversion (from .bmp to .gif, for example)
- Photoshop is not the only option but it is an industry standard:
- powerful - we could do 12 weeks on PS alone
- been popular with web designers since v.3 (1995) - we are now on the equivalent of about v.13
- features of PS have, over the years, been developed with web designers in mind
- main uses:
- image resizing - reduce file size based on resolution (shouldn't resize photos using HTML attributes)
- page layout and mockup
- need to walk before we can run, so we'll just do a short intro today and then spend the bulk of next week looking at practical uses
- download the Photoshop Orientation [DOC] - also available on the bcitwebdev.com shared space
- don't have Photoshop? download a free trial to get familair with it
- if you just want to create some images, try this free online editor.
- More tutorials:
- Getting Started with Photoshop
- Photoshop's Toolbox
- Photoshop For Beginners: The Power of Layers
- Retouch and Healing Tools
- Photoshop 101: How To Use The Free Transform Tool
- A Comprehensive Introduction to the Type Tool
- Master Photoshops Selection Tools in Under 30 Minutes
- 10 Must-know Introductory Photoshop Skills For Beginner Photographer
- How To Remove People and Objects From Photographs In Photoshop
best practices for page design
As mentioned above, there are many elements to page design:
- page layout
- typography
- graphics
- Some key points to remember:
- ensure a high contrast ratio for all foreground content
- use repetition to establish layouts, navigation locations, etc, from page to page
- all content should align well together both vertically and horizontally
- use an even distribution of whitespace to keep the proximity of content blocks pleasing
Let's talk about some best practices in page design.
exercise
Your instructor will split you into groups. Follow the instructions below. You will be asked to present your ideas to the rest of the class.
- Choose two site that are similar in nature or have a similar target audience such as:
- Review each of the sites in depth (i.e., don't just look at the home page).
- Discuss how the two sites you chose to review exhibit the design principles of contrast, repetition, alignment and proximity.
- Discuss how the two sites exhibit web design best practices.
- For each site, choose something from your discussion that they are doing well and something that could be improved. This should be related to design principles, and not simply "we like this navigation better."
- Assign a team leader (or leaders) and present your conclusions to the class.