Style Vs. Substance - Cooper
•
0 likes•666 views
The document discusses the balance between style and substance in visual design. It provides examples of designs that are either too focused on style over substance or vice versa. Effective design considers the needs and expectations of the intended users across different platforms and devices. Both style and content are important, but the priority should be meeting users' needs in an intuitive, credible way rather than just following current trends or the designer's vision.
Recommended
More Related Content
Similar to Style Vs. Substance - Cooper
Similar to Style Vs. Substance - Cooper (20)
More from Information Development World
More from Information Development World (20)
Recently uploaded
Recently uploaded (20)
Style Vs. Substance - Cooper
- 1. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Style vs Substance
- 2. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Style vs Substance Meeting the needs of the user
- 3. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com About The Rockley Group • Work with companies in pharmaceutical, medical devices, high technology, and finance • These companies translate content in 4-70 languages • Deliver content on paper, traditional web and various mobile devices • Create intelligent content strategies from creation through translation and delivery • Optimizing information plays a big part in this process • Component content management plays a key role in the solution
- 4. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Rockley Customers
- 5. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Debate has been around forever… Plato Aristotle
- 6. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com …and continues Hollywood is in the perception business where you create layers to create mystery. In Silicon Valley it's about taking away the layers to get to the substance.
- 7. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Hollywood is in the perception business where you create layers to create mystery. In Silicon Valley it's about taking away the layers to get to the substance. MC Hammer photo credit: Annie Leibowitz
- 8. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Form follows function • Louis Sullivan, Architect • The Tall Office Building Artistically Considered (1896) Prudential Building, Buffalo (1894)
- 9. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Until it doesn’t • Empress of Japan, 1930
- 10. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Until it doesn’t • Gigantic, 1932
- 11. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com The form can become a style
- 12. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com The form can become a style
- 13. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com The form can become a style
- 14. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com The form can become a style
- 15. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com What’s really important?
- 16. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com • Should ‘look good’ • ‘Looks good’ can vary • Provide information • Work across all platforms • Print is still ‘a platform’ • Balances the needs of the user/viewer/reader and the content owners
- 17. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com What’s good visual design?
- 18. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com • Consultants answer… It depends.
- 19. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com • Consultants answer… It depends. It’s more of an art than a science Let’s look at some examples…
- 20. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Mini
- 21. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Ford
- 22. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Ford Focus
- 23. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Brand level compared
- 24. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Brand level compared
- 25. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Mini • The wrong type of responsive design • Forces the user to respond to the designer’s ‘vision’
- 26. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Mini • The wrong type of responsive design • Forces the user to respond to the designer’s ‘vision’
- 27. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Mini
- 28. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Mini • On a mini screen (iPhone 4s)
- 29. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Ryanair - old
- 30. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Ryanair - new
- 31. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Appearance and credibility • Nearly half of all site evaluators (46.1%) used visual cues, such as the site’s overall design or look, to assess a site’s credibility. How Do People Evaluate a Web Site’s Credibility? - Results from a Large Study (B.J. Fogg, Ph.D., Cathy Soohoo, David Danielson, Leslie Marable, Julianne Stanford and Ellen R. Tauber - Persuasive Technology Lab Stanford University) 2002
- 32. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Appearance and credibility • My eyes hurt http://www.mikesmarina.info/
- 33. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Appearance and credibility • Dull, but probably informative http://www.firstclassfishing.com
- 34. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Appearance and credibility • To the point, updated design http://www.fishingpuntacana.com
- 35. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com How much time do you have? • You have less than a half second! Evaluating the consistency of immediate aesthetic perceptions of web pages ( Noam Tractinskya, Avivit Cokhavia, Moti Kirschenbauma, Tal Sharfi) 2008 No statistically significant difference in ‘attractiveness’ if the webpage was viewed for 1/2 second or 10 seconds.
- 36. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Techniques
- 37. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Know who your user is • Apollo Guidance Computer • 1966 -1972 • 19 pushbutton keys • 12 status lights for output • 32K of RAM • 1 Mhz clock speed • Worked for the intended users though!
- 38. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Meet their needs http://xkcd.com/773/ University Website
- 39. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com What does your audience expect?
- 40. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com What does your audience expect?
- 41. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com What does your audience expect?
- 42. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Use standard form • Too much Style http://www.thefrisky.com/2013-04-11/flowchart-should-i- throw-that-thing-out/
- 43. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Use standard form • Too much Substance
- 44. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Don’t go overboard https://www.youtube.com/watch?v=MbspMfAWq48
- 45. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Don’t go overboard • Unless that’s the point! https://www.youtube.com/watch?v=MbspMfAWq48
- 46. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Match the visual to the message
- 47. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Match the visual to the message
- 48. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Match the visual to the message
- 49. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Match the visual to the message
- 50. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Match the visual to the message
- 51. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Match the visual to the message
- 52. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Match the visual to the message
- 53. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Do what you should, not what you can • Movies or Flash required to get any useful information
- 54. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Consider different mobile devices
- 55. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Do what makes sense
- 56. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Yer doin’ it wrong…
- 57. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Choose colours wisely
- 58. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Colour blindness • As many as 8% of men have some form colour blindness • You may see: • 74 • 21 • No number at all http://upload.wikimedia.org/wikipedia/commons/e/e0/Ishihara_9.png Web page renderer: http://colorfilter.wickline.org/ Image renderer: http://www.color- blindness.com/coblis-color-blindness- simulator/
- 59. @Cooper_42 © The Rockley Group, Inc. #Infodevworld cooper@rockley.com Finally - Balance • It’s really style and substance • Too much of either and everybody loses • There is no right way, there are many wrong ways • What works is what’s right • Respect your users