The future of webdesign (london 2008)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

5 comments

Comments 1 - 5 of 5 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

49 Favorites

The future of webdesign (london 2008) - Presentation Transcript

  1. The future of webdesign (FOWD) Matthijs kleverlaan
  2. Photo by: http://www.flickr.com/photos/bastienlabelle/2424793737/in/set-72157604624144691/
  3. Photo by: http://www.flickr.com/photos/bastienlabelle/2425607744/sizes/l/in/set-72157604624144691/
  4. Photo by: http://www.flickr.com/photos/bastienlabelle/2424852479/
  5. The topics
  6. Finding inspiration for design User Experience v.s. Brand Experience Desiging the user Experience Getting your designs approved: 12 simple Rules Print is the new web From design to deployment Unconventional ways to promote your site Evolving the User Experience
  7. Finding inspiration for design User Experience v.s. Brand Experience Desiging the user Experience curve Getting your designs approved: 12 simple Rules Part 1
  8. Finding inspiration for design
  9. So what is inspiration?
  10. Finding inspiration is a lifestyle and an ongoing view of the world
  11. Inspiration is an ongoing process
  12. Every time a day you can get inspired
  13.  
  14. Direct & Indirect Sources
  15. Direct Sources
    • Trade Magazines
      • Computer Arts, Creatie, Print, ID etc.
    • Cataloging books
      • Typography
      • Color
      • Layouts
      • Design
  16.  
  17.  
  18.  
  19. More direct Sources
    • Everyday life
      • Billboards
      • Restaurant menus
      • Commercials
      • Everything
    • Online
      • Blogs
      • Design showcases
  20. Photo credit http://www.thenextcorner.com/2007/06/ipod_bud_light_.html
  21.  
  22. Indirect sources For fresh ideas, look in fresh places
  23. Fresh ideas in fresh places
    • Art history
  24. Supper at Emmaus by Caravaggio
  25.  
  26. Fresh ideas in fresh places
    • Art history
    • Unexpected Books
  27.  
  28.  
  29. How to avoid abuse Inspiration vs duplication
  30.  
  31. Inspiration Summary
    • Know your sources
    • Try to store your inspiration resources
    • Inspiration is a never ending process
    • Inspiration takes practice
  32. Don’t look at websites Look at the elements on different sites Collect links with elements you want to use
  33. Design trends
  34. Current design trends
    • Homepage big banner spots
  35.  
  36.  
  37. Current design trends
    • Homepage big banner spots
    • Brown colored websites
  38.  
  39.  
  40. Current design trends
    • Homepage big banner spots
    • Brown colored websites
    • Supersize me
  41.  
  42.  
  43.  
  44. Future design trends
  45. Future design trends
    • Softer colors
  46.  
  47.  
  48. Future design trends
    • Softer colors
    • Horizontal vs. Vertical
  49.  
  50.  
  51. Future design trends
    • Softer colors
    • Horizontal vs. Vertical
    • Video
  52.  
  53.  
  54.  
  55. Finding inspiration for design
    • Speaker:
    • Patrick McNeil
    • You know him from:
    • http:// www.designmeltdown.com /
    • The presentation slides:
    • http:// www.slideshare.net / carsonified / inspiration-design-trends-patrick-mc-neil
    • Watch the recorded presentation:
    • http:// www.vimeo.com /946121
  56. User experience v.s. Brand experience
  57.  
  58.  
  59. There is no competition
  60.  
  61. There is no winner of loser
  62.  
  63.  
  64.  
  65. There is no war
  66.  
  67. Client and studio must be in harmony
  68. The user experience
  69.  
  70.  
  71.  
  72. The iceberg is the user experience through the whole website
  73.  
  74.  
  75. You see the top You want to see the whole iceberg..
  76.  
  77.  
  78.  
  79.  
  80. Most designers create a great top of the iceberg But have an poor bottom of the iceberg.
  81.  
  82. You want this
  83.  
  84. But you have this
  85.  
  86. For example take google
  87. Not a great design
  88.  
  89. but a great user experience
  90.  
  91. Look at the whole user experience
  92.  
  93. Work on the whole user experience
  94.  
  95. And then
  96.  
  97. Brand experience
  98. Brand experience Is NOT about billboards It’s about the experience It’s about the emotional attachment It’s people talking to each other
  99. Branding as an experience
  100. Branding is about the emotional aspect
  101. Why do we grab coffee at
  102.  
  103. Instead off
  104.  
  105. It’s branding
  106. Branding is about people talking to each other
  107. Think about virals / word of mouth
  108. http://www.flickr.com/photos/45457688@N00/82283972/
  109. Brand experience in the past
  110. We all use to watch the same television shows
  111. http://www.flickr.com/photos/giaochau/272060799/
  112. And share our thoughts
  113. http://www.flickr.com/photos/nguyenkhanhduy/1336659604/
  114. Back then we consumed media in a different way
  115. Family listening to radio http://www.flickr.com/photos/giaochau/272060780/
  116. That's one small step for man, one giant leap for mankind
  117. Is the most widely watched television broadcast..
  118. These days it’s harder to create something
  119. That’s shares the same experience
  120. Design the experience
  121. Systems-centered design A design philosophy and a process in which the needs, wants, and limitations of the end user of the design process. User-centerd design ask people what they want Activity-centerd design Look what people do instead of asking him Genius-centerd design The apple approach. Create something you think it's perfect and the user will tell you if your were right..
  122. Do not fear failure
  123. Otherwise you will never release something risky.
  124. Learn from your mistakes
  125. User experience vs Brand experience
    • Speakers:
    • Steve Pearces and Andy Clarke
    • You know them from:
    • Steve Pearces http:// www.pokelondon.com /
    • Andy Clarke http:// www.stuffandnonsense.co.uk /
    • The presentation slides:
    • http:// www.slideshare.net / carsonified / user-experience-v-brand-experience-steve-pearce-andy-clarke
    • Some notes are from:
    • http://adactio.com/journal/1439/
    • Watch the recorded presentation:
    • http:// vimeo.com /931504
  126. Design the user experience
  127. First impressions count Attentive Service Personalisation and customisation Attention to detail The user experience Feedback Make it fun Create the perfect environment
  128. First impressions count
  129. http://flickr.com/photos/47313217@N00/1360279731/
  130. http://flickr.com/photos/joshb/58408568/
  131. Attentive Service
  132. http://flickr.com/photos/ari/418042736/ The doorman hailing a cab
  133. http://flickr.com/photos/steve-brandon/414392862/ Opening a new line
  134. Personalisation and customisation
  135.  
  136. Attention to detail
  137. http://flickr.com/photos/kb-a/43723177/
  138. http://www.flickr.com/photos/bmw328driver/2443315790/
  139. Feedback
  140.  
  141.  
  142. Make it fun
  143. http://flickr.com/photos/duncan/2084134925/
  144.  
  145. Create the perfect environment
  146.  
  147.  
  148. Arrive at lobby hotel Checking in at hotel Searching for your room Roomservice The perfect hotel experience
  149. First visit / arrive at Homepage Log in to your account Navigation and searching Support and feedback Perfect website experience
  150. Create the perfect user experience
  151. Designing the user experience
    • Speaker:
    • Patrick McNeil
    • You know him from:
    • http:// www.clearleft.com
    • The presentation slides:
    • http:// www.slideshare.net / carsonified / designing-the-user-experience-curve-andybudd /
    • Watch the recorded presentation:
    • http:// vimeo.com /935747
  152. Getting your designs approved: 12 Simple Rules
  153. Designer
  154. The ideal process
  155. The real process
  156. Why is it such a challenge
  157. Design is often subjective Comps (presentations) are not interactive Innovation can be hard to grasp Everyone has an opinion because we all use the web Why is it such a challenge
  158. Make friends with your client
  159. 1. Make friends with your client
    • Most likely, your clients are overworked and under a lot of pressure with a variety of responsibilities.
    • Be understanding, a positive relationship is key.
  160. 2: Ask lots of questions.
  161. 2. Ask lots of questions
    • Get to know your client’s industry and business objectives.
    • Perform a competitive analysis to see what others in the industry are doing.
    • What does the client want to get out of the site?
    • What is their business all about?
  162. Hotdogs
    • What are hot dogs exactly?
    • Why are they called hot dogs?
    • Are your hot dogs kosher?
    • What makes a hot dog kosher?
    • What is the history of Frankfurters?
    • How are hot dogs stuffed?
    • What is the “outside” made of?
    • What’s in vegetarian hot dogs?
    Ask questions
    • Why are hot dog buns longer than hot dogs?
    • How many ways can you cook a hot dog?
    • What’s the best way to cook a hot dog?
    • Why are hot dogs associated with baseball games?
    • Is there a danger of children choking on them?
    • How much sodium is in your hot dogs?
    Ask some more questions
    • Can hot dogs be eaten cold?
    • What kind of seasoning do you use?
    • What’s the best side to accompany a hot dog?
    • How many calories are in a hot dog?
    • What are the most popular toppings?
    • What are the best toppings?
    Ask EVEN MORE questions
    • What do you think of hot dog eating contests?
    • Have your hot dogs been used in contests?
    • How long have you been making hot dogs?
    • Could you arrange for me to talk on the phone with some of the people who make your hot dogs?
    • Etc...
    You get the idea
  163. 3. Ask more questions
    • Who will be using this site
    • What’s the target age range
    • What are their browser capabilities?
    • What does the user need to take away?
    • The user needs are often different from the business objectives.
    • User profiles will help support your design choices.
  164. 3. Use wireframes but don’t be tied to them
    • Wireframes are a vital part of communicating with your client.
    • They make a great conversation starter.
  165. 3. Use wireframes but don’t be tied to them
    • Wireframes are a vital part of communicating with your client.
    • They make a great conversation starter.
    • Use wireframes to indicate content priority and general placement.
    • It’s okay if they change when you go to comp.
    • Define content blocks and the overall IA for the site
    • Get your clients thinking about functionality and what makes sense for the user
    • Make wireframes to scale
    • Walk your clients through the wireframes
  166. Provide good notes
  167. B Search A A IAB 728x90 D C Featured Content B D IAB 300x250 C E Tag Cloud E F Chronological Content G G Recent Comments F
  168. Subtle Changes Are Okay
  169.  
  170. 5. Talk about design before you open Photoshop
    • Before you start the design process, reference other sites, mood boards or present color palettes to get the conversation started.
    • This will help reduce the number of revisions.
  171. Use site Examples & Color paletts
  172. 6. One design direction will do. It is not a take-out menu!
  173. 6. One design direction will do.
    • Giving the client a variety of design options to choose from might seem like a good idea
    • - but generally it’s not.
  174. 6. One design direction will do.
    • Giving the client a variety of design options to choose from might seem like a good idea
    • - but generally it’s not.
    • It can cause an “add this to that” mentality resulting in a lack of design consistency and poor usability.
  175. 7. Present in the browser
  176. Don’t just E-mail it!
  177. 7. Present in the browser
    • Viewing comps only on paper or PDF doesn’t give a true sense of how the comps will look in a browser.
    • If at all possible, “walk through” the designs don’t just email them.
    • Provide notes: Your clients might have to show the designs to others for approval.
  178. 8. Prototype as needed
    • Simple prototypes will help your clients grasp innovative concepts.
    • It’s not always required, but it can help to sell an idea that your client has never seen before.
  179. Fireworks allows you to rapidly prototype web site designs. Taking your design mockups from sketches to an interactive prototype can help you test your design. It can also help to communicate your vision for the site to your client. Fireworks CS3 is Your Friend
  180.  
  181. 9: Ask for consolidated feedback + limited rounds of revisions.
    • Educate your clients on the importance of providing consolidated feedback.
    • A project can quickly spiral out of control when feedback is given in piece-meal.
    • Limiting the number of revisions will help the project to stay on track.
  182. Too Many Cooks in the Kitchen
  183. Tips to Get the Feedback You Need
    • Help your clients to focus on the user’s needs and not just their own creative “opinions”
    • Ask for specifics if they say “It just doesn’t feel right”
    • If they need to get approval from their superiors, ask that they give you all feedback in a consolidated format per round
  184. 10. Be confident in your work.
    • Don’t fall into the trap of asking your clients what they think is right.
    • Design with the users in mind and have research to back up your decisions.
  185. You are the expert
  186. 11. Time will tell.
    • With time, your client will understand the design process.
    • You will come to find ways to improve the client approval process.
  187. Getting sign-offs is a smoother process after a working relationship has been established.
  188. 12. Make the most of a difficult situation.
    • Web Design is a service industry
    • A top priority is listening to your client’s concerns and feedback.
    • Be sure to recognize and address their concerns with the user in mind.
  189. Stay positive. The client will feel like you are working with them and not against them.
  190. Conclusion
    • Getting approval on designs is not a science
    • Each project is different
    • These 12 simple rules aim for the best case scenario
  191. 12 simple steps
    • 1. Make friends with your client
    • 2. Ask lots of questions - about the client's industry
    • 3. Ask more questions – know the user
    • 4. Use wireframes but don’t be tied to them
    • 5. Talk about design before you open Photoshop
    • 6. One design direction will do
    • 7. Present in the browser
    • 8. Prototype as needed
    • 9. Ask for consolidated feedback & limit the revisions
    • 10. Be confident in your work
    • 11. Time will tell
    • 12. Make the most of a difficult situation
  192. Thats part 1..
  193. Part 2 Next time..
  194. Part 2 contains.. Print is the new web From design to deployment Unconventional ways to promote your site Evolving the User Experience
  195. Questions? Matthijs Kleverlaan Questions just say hello to thaisie@ gmail.com – www.thaisie.com On twitter: http:// twitter.com /thaisie

+ matthijs kleverlaanmatthijs kleverlaan, 2 years ago

custom

6338 views, 49 favs, 14 embeds more stats

This a presentation wich I made about the Future of more

More info about this document

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Go to text version

  • Total Views 6338
    • 5086 on SlideShare
    • 1252 from embeds
  • Comments 5
  • Favorites 49
  • Downloads 409
Most viewed embeds
  • 1129 views on http://www.marketingfacts.nl
  • 46 views on http://www.thaisie.nl
  • 37 views on http://www.verplichtekost.nl
  • 24 views on http://franklinheijnen.blogspot.com
  • 3 views on http://thewebforward.blogspot.com

more

All embeds
  • 1129 views on http://www.marketingfacts.nl
  • 46 views on http://www.thaisie.nl
  • 37 views on http://www.verplichtekost.nl
  • 24 views on http://franklinheijnen.blogspot.com
  • 3 views on http://thewebforward.blogspot.com
  • 3 views on http://weblog.pixelwork.nl
  • 2 views on http://www.maquet.nl
  • 2 views on http://www.oldestliving.com
  • 1 views on https://www.verplichtekost.nl
  • 1 views on http://64.233.183.132
  • 1 views on http://verplichtekost.nl
  • 1 views on http://marketingfacts.onstuimig.nl
  • 1 views on http://www.lincolncesar.com.br
  • 1 views on file://

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories