Web 1,2,3

Slides from Last year's web Project

Transcript

1. Web 1.0 Adam Procter Thursday, 28 October 2010
2. Foundations Browser Device Thursday, 28 October 2010 What is a browser ? What is a device ?
3. What is the web ? Thursday, 28 October 2010
4. Social web Realtime web Thursday, 28 October 2010
5. Thursday, 28 October 2010 in a nut shell this is the web (and websites) html5 css3
6. What is web design ? ‣ It is not print design ! ‣ It is not only about the desktop ! Thursday, 28 October 2010 predicting the next 5000 days http://www.ted.com/index.php/talks/kevin_kelly_on_the_next_5_000_days_of_the_web.html
7. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” - John Allsopp http://www.alistapart.com/articles/dao/ Thursday, 28 October 2010
8. & it’s NOT Thursday, 28 October 2010
9. It is Content Thursday, 28 October 2010
10. It is Open Thursday, 28 October 2010 http://tantek.com/2010/281/b1/what-is-the-open-web the Open Web is about the ability to openly do three kinds of things: 1. publish content and applications on the web in open standards 2. code and implement the web standards that that content/apps depend on 3. access and use content / code / web-apps / implementations
11. Web 1.1 Thursday, 28 October 2010
12. Information Architecture Thursday, 28 October 2010 http://www.interaction-design.org/encyclopedia/information_architecture.html Information Architecture is a discipline and a set of methods that aim to identify and organize information in a purposeful and service-oriented way. It is also a term used to describe the resulting document or documents that define the facets of a given information domain. The goal of Information Architecture is to improve information access, relevancy, and usefulness to a given audience, as well as improve the publishing entity's ability to maintain and develop the information over time. It is primarily associated with website design and it is directly related to the following professional disciplines: User interface design, content development, content management, usability engineering, interaction design, and user experience design. It is also indirectly related to database design, document design, and knowledge management.
13. Thursday, 28 October 2010 • • • • • • • • • • But they have the same pieces that make up the listing: title description tags materials location payment methods date added photograph category colour
14. Create Pages Create Systems Thursday, 28 October 2010
15. I keep six honest serving-men [they taught me all I knew]; Their names are What and Why and When And How and Where and Who - Rudyard Kipling Thursday, 28 October 2010 where will the site live (url) When does it need to be avaliable (timeline) why is a website needed (goals) Who is the primary audience for the site (audience) what info/functionality needs to be avalible (content/tech) How will the site be discovered and kept up to date (marketing and maintaince)
16. Goals Thursday, 28 October 2010 And that’s what information architecture is all about: 1. Organising content or objects 2. Describing them clearly 3. Providing ways for people to get to them. An IA is often made up of the following parts: • defining what the project is about and its goals • researching people and content • designing the IA, navigation, visual approach and content • building and testing • maintaining 5 whys for UX Australia For example, thinking about the UX Australia website: 1. What is something we know people want from the website?: They want to see what presentations will be at the conference 2. Why do they need to do that?: So they can make a decision about whether to come 3. Why do they need to do that?: Because there are a lot of conferences they could attend 4.Why do they choose one over another?: I don’t know design constraints
17. Audience Thursday, 28 October 2010 /Audience //persona (of the audience) // /competition /writing (styles and guides) /content outline /gap analysis An IA is often made up of the following parts: • defining what the project is about and its goals • researching people and content • designing the IA, navigation, visual approach and content • building and testing • maintaining The main IA deliverables in a project include: • the information architecture • navigation • metadata And that’s what information architecture is all about: 1. Organising content or objects 2. Describing them clearly 3. Providing ways for people to get to them. 5 whys for UX Australia For example, thinking about the UX Australia website: 1. What is something we know people want from the website?: They want to see what presentations will be at the conference 2. Why do they need to do that?: So they can make a decision about whether to come 3. Why do they need to do that?: Because there are a lot of conferences they could attend 4.Why do they choose one over another?: I don’t know design constraints
18. Balanced Design People Content Context Thursday, 28 October 2010 Personas http://uxmatters.com/mt/archives/2010/10/using-personas-during-design-and-documentation.php 1. List the user attributes. Assemble all of your product’s stakeholders and ask them to make a list of user attributes—for example, Male, Computer literate, or Plays football. To help you easily categorize the information you’ve obtained about your users, you can use the following categories of attributes: • Demographic • Technological • Internet Usage • Environment • Lifestyle • Roles • Goals • Needs • Desires • Knowledge • Usage Trends • Tasks 2. Cluster the attributes. Once you’ve gathered your list of user attributes, cluster the attributes. To accomplish this, ask one of the stakeholders to divide his or her user attributes into several clusters. Then ask another stakeholder to place any related attributes in those clusters or, if his or her user attributes don’t fit into any of the existing clusters, to create new clusters. Repeat this exercise with every stakeholder until you have clusters that everyone agrees on. 3. Create a persona for each of the clusters. Add personal details to create a realistic picture of a user, focusing on specific user needs. Note down tasks that persona is most likely to perform. Think about how the attributes in the clusters influence user behavior. 4. Prioritize personas. Prioritize the personas on the basis of business needs. The idea is to ensure that the principal persona you use during design or documentation is a clear and correct representation of your primary user population, not an edge case. 5. Tell stories, or create scenarios. The stories or scenarios you create for each persona describe how that person would behave or think about a particular task or situation. 6. Create persona documentation. When writing personas, include the following information: • name of the persona • demographic description • goals • needs • abilities
19. Balanced Design Customer needs Client needs Developer needs Thursday, 28 October 2010
20. Competition Thursday, 28 October 2010 dont forget them !
21. Terminology Thursday, 28 October 2010 http://www.youtube.com/watch?v=o4MwTvtyrUQ - what is a browser
22. http://www.youtube.com/watch?v=o4MwTvtyrUQ Thursday, 28 October 2010 http://www.youtube.com/watch?v=o4MwTvtyrUQ - what is a browser
23. Thursday, 28 October 2010 Affinity diagramming
24. Content inventory Content outline Thursday, 28 October 2010 At its best, a content strategy defines: • key themes and messages, • recommended topics, • content purpose (i.e., how content will bridge the space between audience needs and business requirements), • content gap analysis, • metadata frameworks and related content attributes, • search engine optimization (SEO), and • implications of strategic recommendations on content creation, publication, and governance.
25. !"#$%"&$'()&$&*+ ,"%+)&$&*+ -$*+. /".&)012"&+2 34(+5 6'77+(&. 8+*+&+9 !"! #$%& '()&*+,-%,)(, ."! '()&*+,-%,)(, /$*0,1&*,2*23(-*4&5&4*6*7(-04,8-*9#(-2$:89 .". #(-2$:8 #(-2$:8 ."; +$<:()1*+,-%,)(, +$<:()1*+,-%,)(, ."= +$<:()1*>()?- +$<:()1*>()?- ."@ '()&*A)7<-2:8*+,-%,)(, '()&*A)7<-2:8*+,-%,)(, ."B A)7<-2:8*C2,2(-2(D-*E*A)F$ A)7<-2:8*C2,2(-2(D-*E*A)F$ ."G A)5&-2%&)2 A)5&-2%&)2 ."H I,:2)&:- '()&*A)7<-2:8*+,-%,)(,*I,:2)&:- ;"! +3&*'()&*J$<2& /$*0,1&*,2*23(-*4&5&4*6*7(-04,8-*9K5&:5(&L9 ;". '()&*:$<2&*$5&:5(&L +3&*L()&*:$<2& ;";"! +,%,:*M,44&8*'()&*J$<2& +,%,:*M,44&8*'()&*J$<2& ;"="! C$<23&:)*'()&*J&1($) C$<23&:)*'()&*J&1($) ;"@"! N,-2*O$,-2*'()&*J&1($) N,-2*O$,-2*'()&*J&1($) ;"B"! /$:23*'&-2*'()&*J&1($) /$:23*'&-2*'()&*J&1($) ="! >,2&-2*/&L- >,2&-2*/&L- /$*D$)2&)2*$)*0,1& @"! N5&)2- /$*0,1&*,2*23(-*4&5&4*6*7(-04,8-*9K5&:5(&L9 @". K5&:5(&L N5&)2- /$*4&F26),5 @"; P$$?()1 N5&)2*Q$$?()1 /$*4&F26),5 @"= I:(5,D8*I$4(D8 I:(5,D8*I$4(D8 /$*4&F26),5 @"@ C&D<:(28*,)7*J&F<)7- C&D<:(28*,)7*J&F<)7- /$*4&F26),5 B"! R&%Q&:- '()&*A)7<-2:8*+,-%,)(,*R&%Q&:- G"! J&-$<:D&- J&-$<:D&- B*IST*F(4&- H"! O$)2,D2*U- O$)2,D2*U- N%,(4*,77:&--*E*D$)2,D2*F$:% http://maadmob.com.au/resources/content_inventory Thursday, 28 October 2010 http://maadmob.com.au/resources/content_inventory
26. Site Diagrams Thursday, 28 October 2010 omnigraffle cmap tools www.mindmeister.com http://dev.opera.com/articles/view/6-information-architecture-planning-o/
27. Thursday, 28 October 2010 omnigraffle cmap tools www.mindmeister.com http://dev.opera.com/articles/view/6-information-architecture-planning-o/
28. Thursday, 28 October 2010 http://dev.opera.com/articles/view/6-information-architecture-planning-o/
29. Page Description Diagrams Thursday, 28 October 2010 none wireframe page descriptions
30. 0AGE $ESCRIPTION $IAGRAM (OME 0AGE V (IGHEST 0RIORITY )TEMS ,OWEST 0RIORITY )TEMS    ,OGO  "RANDING  1UOTE  0HOTO $IRKS SITE IS A PERSONAL ONE BUT THERE ARE PROFESSIONAL GOALS FOR THE SITE AS WELL (ES DEVELOPING A hBRANDv OF SORTS WHILE ALSO KEEPING A PERSONAL SITE 4HIS CAN BE MADE UP OF A COMBINATION OF A PHOTO COLORS LOGO MESSAGING ETC 0RIMARY .AVIGATION 7ELL WANT TO INCLUDE ACCESS TO HIS PRIMARY BLOGS (EART  -IND AND HIS ABOUT SECTION &EATURED !RTICLE OR %SSAY 4HERE SHOULD BE A FEATURED ARTICLE OR POST hBROUGHT OUT TO THE TOPv ON THE HOMEPAGE )T CAN BE SOMETHING POSTED ON THE SITE OR LINKED TO ELSEWHERE LIKE $IGITAL 7EB ETC ,ATEST %NTRIES ) THINK INSTEAD OF A LONG LIST OF ENTRIES WE BRING OUT THE LATEST   FROM EACH BLOG (EART  -IND WITH SOME SORT OF IDENTIlER OR BADGE FOR THEM -AYBE THEY HAVE A DIFFERENT STYLE APPLIED DEPENDING ON THE CATEGORY OR A SMALL ICON 3EARCH 3ITE SEARCH FUNCTION HANDLED DIRECTLY FROM THE HOME PAGE 7HERE IS $IRK ! SMALL IDENTIlER OF SOME SORT IDENTIFYING WHERE $IRK IS AND WHAT HES BEEN UP TO #OULD BE SOMEWHAT GRAPHICAL IN NATURE BUT SET BY A STYLE FOR EASY UPDATE 3EARCH !RCHIVE ,IST 7E COULD EXPOSE HIS ARCHIVE CATEGORIES IN A LIST ON THE HOMEPAGE 4HIS IS MORE IMPORTANT ON THE ACTUAL (EART  -IND BLOG PAGES BUT IF WE CAN WORK IT IN HERE IT COULD BE GOOD NOTES 4HIS DOCUMENT IS TO BE USED TO ILLUSTRATE THE MAIN COMPONENTS ON THE $IRKS NEW HOMEPAGE 4HE GOALS FOR HIS SITE ARE COMPLICATED AND AT TIMES CONmICTING 4HE CORE CONTENT IS COMPRISED OF TWO SEPARATE YET UNITED AR EAS h(EARTv WHERE $IRK WILL BE SHARING MORE PERSONAL THOUGHTS IMAGES AND STORIES RE LATED TO FAMILY AND FRIENDS AND h-INDv WHERE HELL BE WRITING A BIT MORE OF A CEREBRAL IDEA GENERATING WORK RELATED SLANT (ELL ALSO HAVE QUITE A BIT OF CONTENT AROUND THE BASICS WHO HE IS WHAT HE DOES AND WHATS GOING ON WITH HIM AT ANY PARTICULAR MOMENT 4HE GOAL IS TO CREATE HOMEPAGE THAT BLENDS THESE THINGS AND QUICKLY INTRODUCE US TO $IRK )T WILL PROVIDE A WINDOW INTO THE HEART AND MIND OF HIS SITE KEEPING AN EQUAL FO CUS ON BOTH ASPECTS AND PROVIDING A READER A WAY TO EASILY AND INTUITIVELY ACCESS MORE CONTENT +NEMEYERCOM 0AGE $ESCRIPTION $IAGRAM *ANUARY   (OMEPAGE Thursday, 28 October 2010 none wireframe page descriptions
31. Main call to action Gets users thinking about the brand and specific actions they can make. Sign-up A call to action that encourages peo- ple to sign up for recently added con- tent on the site. Featured article or essay Shows the first paragraph of an article with associated image, as well as the day it was published and the number of comments made. Latest entries A short listing of the latest articles or essays that have been posted. There should be between 5-7 shown on the home page. The featured article should not be displayed in this list. Search A useful site search should always be available on the page to allow users an alternative method for finding your content. Link list A list of semi-recently added link con- tent. This list should contain 5-7 links with date and comment meta infor- mation for each. About company An outline of what your company is all about. Privacy, Terms of Use, Etc. Most of the information that is cur- rently listed in the footer should re- main there. The contact and address information can easily be moved to the contact page, though. We also recommend adding in some naviga- tional links, where possible. Notes The homepage has been shifted to emphasize content that’s currently buried elsewhere in your site. The pro- posed navigation structure reinforces this goal. The home page should provide a clean path to the various sections of the site. Monday, September 24, 2007 Ycl\  ]cXmfi Sample Company Name Page Description Diagrams 1 2 3 Highest Priority Lowest Priority Home Page Thursday, 28 October 2010 none wireframe page descriptions
32. Wireframes Thursday, 28 October 2010 http://balsamiq.com/ omnigraffle cmap tools www.mindmeister.com
33. Wireframes Sketches Thursday, 28 October 2010 http://consultingblogs.emc.com/tscottstromberg/archive/2010/10/13/the-fine-art-of-wireframing-a-blatant-repost.aspx
34. Content Management System Thursday, 28 October 2010 backend databases/CMS mysql wordpress drupal joomla expression engine etc etc flat files folders ITS all CMS
35. /site_folder /siteimages /css /javascript /fonts Thursday, 28 October 2010
36. Thursday, 28 October 2010 Interact with web standards is a very good starter book as this includes the why and how. also transcending css book (loads in the library)
37. Thursday, 28 October 2010 http://colly.com/comments/dconstruct_workshop/
38. Web 2.0 Adam Procter Thursday, 28 October 2010
39. User eXperience Thursday, 28 October 2010 buzzword - but
40. http://www.montparnas.com/articles/what-is-user-experience-design/ Thursday, 28 October 2010 more diagrams http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/
41. Don-Norman Thursday, 28 October 2010 http://www.amazon.co.uk/Design-Everyday-Things-Don-Norman/dp/0465067107 loads in the library
42. Thursday, 28 October 2010
43. http://www.slideshare.net/elliotjaystocks/stop-worrying-get-on-with-it-wdc-bristol-2009 “Usability/accessibility/functionality = very important But don’t underestimate the importance of beauty” - Elliot Jay Stocks Thursday, 28 October 2010
44. Responsive web design* http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ * not just media queries mind Thursday, 28 October 2010 http://uxmatters.com/
45. “We need to accept that what makes the web so unique — so special — is this constant flux. We are working in by far the most pioneering creative medium at this point in time” - Simon Collison http://colly.com/ Thursday, 28 October 2010
46. Content first http://www.transcendingcss.com/ Thursday, 28 October 2010 transcending css (book)
47. Semantic Markup Thursday, 28 October 2010 html is all about meaning // means the meaning of word, phrase sentence etc that means your html should be self describing
48. Meaningful Markup Thursday, 28 October 2010 html is all about structure in meaning
49. http://forabeautifulweb.com/ Thursday, 28 October 2010 transcending css book http://forabeautifulweb.com - designing with css (DVD)
50. http://www.themaninblue.com/ Thursday, 28 October 2010 http://www.themaninblue.com/ basic content and functionality should be accessible to all browsers lean, clean, semantic HTML should describe content CSS should accomplish all aspects of visual design behaviour should be enabled using unobtrusive scripting
51. Browser stats Thursday, 28 October 2010 look at future !! not backwards !!
52. Myths Thursday, 28 October 2010
53. should websites look the same in every browser ? Thursday, 28 October 2010 wireframe then into code
54. http://dowebsitesneedtolookexactlythesameineverybrowser.com/ Thursday, 28 October 2010 ”[W]e need to step back from our endless battle to make it look the same across all platforms. We can’t make our site look the same on a PDA as a 21" monitor, we can’t make our site ‘the same’ for someone on a speaking browser, and although things are improving there are still differences in support and implementation of various W3C standards. Let go, it[’]s not going to look the same.” 3 Rachel Andrew wrote that in 2002. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
55. 10,000 browser brands ! Thursday, 28 October 2010 “There are over 10,000 browser brands, versions, and configurations and that number is growing. [...] No two browsers have an identical implementation.” 1
56. “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates an artificial barrier to participation.” http://developer.yahoo.com/yui/articles/gbs/ Thursday, 28 October 2010 'diverse in character or content'
57. also - below the fold is ok Thursday, 28 October 2010
58. Thursday, 28 October 2010
59. Thursday, 28 October 2010
60. Thursday, 28 October 2010
61. Thursday, 28 October 2010
62. Thursday, 28 October 2010 twitter
63. Thursday, 28 October 2010 gowalla
64. Thursday, 28 October 2010 gowalla
65. Never broken Thursday, 28 October 2010 or ugly https://browserlab.adobe.com
66. Thursday, 28 October 2010 or ugly https://browserlab.adobe.com
67. Thursday, 28 October 2010 or ugly https://browserlab.adobe.com
68. 'take full advantage of new technologies, and craft every user's experience so that it's appropriate to the capabilities of the browser they're using. That will likely mean that designs will look different — sometimes very different — across browsers.' - Andy Clarke Thursday, 28 October 2010 'diverse in character or content'
69. *You will not be able to show this in static designs or storyboarding Thursday, 28 October 2010 ok one more thing before some demo sites
70. Thursday, 28 October 2010 designing for the web (not too technical more the why - which is very very good) Books
71. http://silverbackapp.com/ Thursday, 28 October 2010 what the user does....
72. Demo Thursday, 28 October 2010 flexible design - http://www.alistapart.com/articles/responsive-web-design http://unstoppablerobotninja.com/entry/with-good-references/ http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html http://2010.dconstruct.org/ http://saltercane.com/ http://2011.uxlondon.com/ http://simplebits.com/ http://www.informationarchitects.jp/en/ http://www.stpaulsschool.org.uk/ http://huffduffer.com/
73. http://www.flickr.com/groups/accidentalthumb/pool/with/4786099184/ Accidental Thumb (or finger) - just because Chrome Experiments - Arcade Fire http://www.chromeexperiments.com/arcadefire/ Thursday, 28 October 2010 push it !
74. Web 3.0 Adam Procter Thursday, 28 October 2010
75. /seo /search results /hosting /google analytics Thursday, 28 October 2010 meta descriptions meta keywords (not used by google anymore) xml site map robots.txt meaningful mark up trawl hosting, cpanel - 1 click installs GA very good - free - can track multi sites Mint - Shuan inman - but GA is soo good - no sure if its worth buying
76. /tumblr /wordpress /expression engine /drupal Thursday, 28 October 2010 CMS - dont forget it could just be a bunch of folders. tumblr tags etc. wordpress 1 click install or .com for free hosted account I like EE drupal getting a lot of mentions. There are a number of light weight CMS’s as well http://grabaperch.com/ http://mojomotor.com/ indexhibit has been favoured by artists - not so sure about it myself
77. Beyond the wireframe Thursday, 28 October 2010 wireframe - then straight into code • wrongly assume that clients expect cross-browser pixel-precision • don’t frame conversations in ways that matter to a business’s bottom-line • show static Photoshop design visuals and set unrealistic expectations
78. Design in the browser (code) (no really this is a MUST) Thursday, 28 October 2010 design in the medium it is PSD is like a painting of a website ! its nothing like a site its the output - you cannot show transitions etc with clients
79. Espresso CSS Edit // bbedit //coda //netbeans (ide) //komodo edit Thursday, 28 October 2010
80. Tools /firefox // firebug /webdev in safari Thursday, 28 October 2010 design in the medium it is PSD is like a painting of a website ! its nothing like a site Firebug download Safari > prefs > advanced > show developer menu opera, webkit, firefox, safari firebug live client changes ! in the browser !
81. not scary simple basic markup <h1>Hello</h1> Thursday, 28 October 2010 not many tags
82. html5 - html5rocks.com css3 - css3.info JQuery - jqueryfordesigners.com Thursday, 28 October 2010 Might hear meantion of php / mysql in relation to databases (most CMS’s use this too) Above is also good coding order - meaningful markup - css styling - fancy and behaviour stuff good tumblr this http://css3watch.com/ Awesome list of links http://realworldcss3.com/resources/
83. Microformats Thursday, 28 October 2010 - blurb in here //
84. “To help make change possible, we should explain that browser differences are not imperfections but are instead opportunities to enhance a brand experience by making websites more responsive.” Andy Clarke - Hardboiled Web Design Thursday, 28 October 2010
85. “Explain that designing from the top down ensures that everybody will see and experience a website in a way that’s appropriately crafted and responsive to the capabilities of their browser. Most importantly, no one will be left out.” Andy Clarke - Hardboiled Web Design Thursday, 28 October 2010
86. Hardboiled Thursday, 28 October 2010 the cool stuff ! GPS Social iPad iOS Android web apps - seriously HTML+CSS+Javascript - is a massive dev platform !! - its happened on the desktop (ok some is Adobe air wrapped but...) See open web earlier and http://blog.mozilla.com/blog/2010/10/19/prototype-of-an-open-web-app-ecosystem/
87. Games Thursday, 28 October 2010 http://g4tv.com/videos/44277/DICE-2010-Design-Outside-the-Box-Presentation/ http://www.slideshare.net/dings/just-add-points-what-ux-can-and-cannot-learn-from-games
88. People /simon collision /elliot jay stocks /mark boulton /andy clark /Meagan Fisher /veerle pieters /tim van damme //max voltar /jeffery zelman /dan cederholm /Jon Hicks /matthew smith /mike Kus /andy budd Thursday, 28 October 2010 Plus all the other people in previous slides !!!
89. Links http://dribbble.com/ http://24ways.org/ http://www.alistapart.com http://smashingmagazine.com/ http://5by5.tv seriously anyone gets an invite I need one, this year I will be making all efforts to get one Thursday, 28 October 2010 http://stuffandnonsense.co.uk/ http://forabeautifulweb.co.uk/
90. Thursday, 28 October 2010 seriously good..
91. Demo Thursday, 28 October 2010 CSS Animation New tools ? - dont know if they are any good yet but... Sencha animator - http://www.sencha.com/blog/2010/10/26/introducing-sencha-animator-the-html5-css3-alternative-to- flash/ Adobe Edge - http://www.gizmag.com/adobe-edge-html5-animation-tool/16741/ FYI Sencha also do Touch library as do JQTouch & http://jquerymobile.com/ Cycle Plug in for JQuery Animation