common tools 04.02.2010 - sjur. common tools what makes be buzz the case case description the brief...
TRANSCRIPT
![Page 1: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/1.jpg)
Common tools
04.02.2010 - Sjur
![Page 2: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/3.jpg)
The case
![Page 4: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/4.jpg)
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.)
![Page 5: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/5.jpg)
The brief
![Page 6: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/7.jpg)
The structure II - Sitemap
Low tech approach – It’s not that difficult
![Page 8: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/8.jpg)
The structure III - Sitemap
Link
![Page 9: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/10.jpg)
The content II - Wireframes
Link
![Page 11: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/11.jpg)
Design I
• Design upon existing / mandatory design elements• Examples of design implemented on other
platforms. PDF
Conduid ITCVerdana
![Page 12: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/12.jpg)
Design II
• Using Sitemap + wireframes + design elements. PSD
• Insert sitemap + wireframe of frontpage• Finished design. PDF
![Page 13: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/13.jpg)
Delivery
• Sitemap• Wireframes• Design• Specifications. PDF
![Page 15: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/15.jpg)
Sitemaps
Design is not just what it looks like and feels like. Design is how it works.
—Steve Jobs
![Page 16: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/16.jpg)
Structures
![Page 17: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/18.jpg)
Examples
![Page 19: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/19.jpg)
Assignment
• The family three
![Page 20: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/20.jpg)
Wireframes
![Page 21: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/21.jpg)
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
![Page 22: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/24.jpg)
Examples
![Page 25: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/25.jpg)
Assignment
• Google.com
• Adobe.com
![Page 26: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/26.jpg)
Tools• Word• PowerPoint• Excel• Visio• Photoshop• Illustrator• Balsamiq• Omni Gaffle• iPlotz• Pencil Project• templatr• Flair Builder• GUI Design Studio• Proto Share• Serena• DUB
![Page 27: 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](https://reader038.vdocuments.net/reader038/viewer/2022110403/56649e705503460f94b6d3e8/html5/thumbnails/27.jpg)
Literature and further reading• Mandatory literature
• http://webstyleguide.com - Chapter 3-6
• Further reading• wireframe magazine• wireframe resources• wireframe examples