lecture seven
agenda
- information design
- function design
- best practices in page design
- 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
- from week five: start page => finished page
function design
- designing features that allow customers to accomplish tasks
- information architecture: organization, labelling, etc.
- interaction design: facilitating actions
- 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
best practices for page design
As mentioned above, there are many elements to page design:
- page layout
- typography
- graphics
Let's talk about some best practices in page design.
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 - we are now on the equivalent of about v.10
- features of PS have, over the years, been developed with web designers in mind
- latest versions come with a web-specific graphics tool called ImageReady
- 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 signalflare FTP server
- don't have Photoshop? download a free trial to get familair with it
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:
- Describe how the two sites you chose to review exhibit the design principles of contrast, repetition, alignment and proximity.
- Describe how the two sites exhibit web design best practices.
- How would you improve these sites? Recommend three improvements for each site.
- Assign a team leader (or leaders) and present your conclusions to the class.