Embed Size (px)
Citation preview
Common tools
04.02.2010 - Sjur
Common tools• What makes be buzz• The case
• Case description• The brief• The structure - Sitemap• The content - Wireframes• Design• Delivery• Solution
• Sitemaps• Structures• Rules• Examples• Assignment
• Wireframes• Organizing information• 20 Rules• Examples• Assignment
• Tools• Use case example for production of Flash• Literature
The case
Case description• Customer
• CBB Mobile• Owned by Telenor
• Assignment:• Creating a new sub brand for prepaid phone card• The new brand will take over marked from existing sub brand; TELE2
• Competitor in Denmark: • Primary: Lebara• Secondary: TDC MobilTid & Click / Telia Ringo / Telenor Selvhente / Telmore
• Target groups:• Ethnic Danes• Young people• Foreign workers (Poland, Germany etc.)
The brief
The structure I - Sitemap• Creating the hierarchy of information. What goes where• After finishing;
• We know what kind of additional information/content we need from the• The developers can estimate time and budget• The developers can start up preparing• Copywriter can start collecting information's and write• We have an agreement with customer
The structure II - Sitemap
Low tech approach – It’s not that difficult
The structure III - Sitemap
Link
The content I - Wireframes• Organizing information on every page
• After finishing;• We are sure we don’t miss out on something• We can start to design• The developers can move on with planning etc.• Copywriter can go into detail with content• We have an agreement with customer
The content II - Wireframes
Link
Design I
• Design upon existing / mandatory design elements• Examples of design implemented on other
platforms. PDF
Conduid ITCVerdana
Design II
• Using Sitemap + wireframes + design elements. PSD
• Insert sitemap + wireframe of frontpage• Finished design. PDF
Delivery
• Sitemap• Wireframes• Design• Specifications. PDF
Sitemaps
Design is not just what it looks like and feels like. Design is how it works.
—Steve Jobs
Structures
Rules
• Hierarchy of information and details• Organize in sectors• Make navigation logic – create flows• Number your pages• Connect your pages• The 7 plus minus 2 rule• Show external connections/systems• Use names that are easy to understand• Use colors or forms• Test, test and test
Examples
Assignment
• The family three
Wireframes
Organizing information• Wireframes are the blue prints that define and allocate a web sites
(or other) content and behavior. • They are not bound by colors, fonts, and anything that may surface
on the site as part of any content. • Wireframing compliments good web development and offers a
visual of where the content will be laid out within the sites design. • A simple wireframe displays the location of a:
– Header– Main content– Footer– Sidebars– Ad placement– Navigation.
• Decide if wire-framing all pages or templates
20 rules 1-20
1. Be clear about your objective – don’t hurry, it’s easier to make changes on paper
2. Make it functional, not pretty – map down functionality
3. Draw on your experience – and common sense, you do not have to be a developer or designer
4. Decide who’s in charge? – who’s responsible for updating
5. Involve everyone – involve key stakeholder (customer – developers – designers – project managers)
6. Set a deadline for completing the wireframe – get signoff from customer so you can move on
7. Keep it clean – only include the details you need, a empty page is not a bad page
8. Avoid designing your wireframe too much – this is NOT design + explain to everyone
9. Remember that UI (User Interface) is not UX (User Experience) – forget about presentation
10. Think about the user – and make it easy for him and her
20 rules 11-20
11. Don’t get lazy – create all unique pages. Nothing is obvious
12. Organize your wireframe into sections – follow structure
13. Number your pages – and do this according to sitemap (1.0 - 1.1 – 1.1.1 – 1.1.1.1)
14. Look for repetition – same type of pages look the same (templates). Fields are always the same place
15. Check it all makes sense – everybody should be able to understand
16. Ads are Functional - it is functional, not design, so get it in there
17. It’s not just the public site – remember that also the administrator have needs
18. Know when to stop – not everything needs to be in
19. Choose the right tools – that everyone on the team can work on
20. Consider dependencies – are there 3rd parties that should be taken into consideration
Examples
Assignment
• Google.com
• Adobe.com
Tools• Word• PowerPoint• Excel• Visio• Photoshop• Illustrator• Balsamiq• Omni Gaffle• iPlotz• Pencil Project• templatr• Flair Builder• GUI Design Studio• Proto Share• Serena• DUB
Literature and further reading• Mandatory literature
• http://webstyleguide.com - Chapter 3-6
• Further reading• wireframe magazine• wireframe resources• wireframe examples
