Elliot Jay Stocks' talk at iDesign: Design For Life (part of the London Design Festival)

1. Debunking
Web Design Myths
by Elliot Jay Stocks
elliotjaystocks.com/idesign

2. Usability & Beauty
Friends, not enemies
The Transparent
Creative Process
Decent exposure
by Elliot Jay Stocks
elliotjaystocks.com/idesign

3. In the
red corner

4. In the
red corner
Usability
Accessibility
Web Standards
Guidelines

5. In the In the
red corner blue corner
vs
Usability
Accessibility
Web Standards
Guidelines

6. In the In the
red corner blue corner
vs
Usability
Accessibility Beauty
Web Standards
Guidelines

7. Usability
As Designers, we’re already experts in this field whether
we know it or not.

8. Usability
As Designers, we’re already experts in this field whether
we know it or not.
• Design is functional art

9. Usability
As Designers, we’re already experts in this field whether
we know it or not.
• Design is functional art
• Design exists to create meaning and understanding

10. Usability
As Designers, we’re already experts in this field whether
we know it or not.
• Design is functional art
• Design exists to create meaning and understanding
• In web design (unlike print design),
there is no ‘final output’ - usability
is influenced by devices

11. Accessibility
“Feared by the bad, loved by the good...”

12. Accessibility
“Feared by the bad, loved by the good...”
• Typically associated with catering for disabled users

13. Accessibility
“Feared by the bad, loved by the good...”
• Typically associated with catering for disabled users
• It goes much further than that:
it’s about catering for devices

14. Accessibility
“Feared by the bad, loved by the good...”
• Typically associated with catering for disabled users
• It goes much further than that:
it’s about catering for devices
• Devices include search engines
... and we like them!

15. Web Standards
The best thing to happen to the web in recent years

16. Web Standards
The best thing to happen to the web in recent years
• Unification through guidelines

17. Web Standards
The best thing to happen to the web in recent years
• Unification through guidelines
• It’s not about rules and regulations;
it’s about attaining a level of quality

18. Web Standards
The best thing to happen to the web in recent years
• Unification through guidelines
• It’s not about rules and regulations;
it’s about attaining a level of quality
• Makes life easier for you and your users

19. Guidelines
There are various guidelines

20. Guidelines
There are various guidelines
• Web Content Accessibility Guidelines, etc.:
more specifically tailored for disabled users

21. Guidelines
There are various guidelines
• Web Content Accessibility Guidelines, etc.:
more specifically tailored for disabled users
• Guidelines within your own organisation
(governmental bodies / style guides)

22. Guidelines
There are various guidelines
• Web Content Accessibility Guidelines, etc.:
more specifically tailored for disabled users
• Guidelines within your own organisation
(governmental bodies / style guides)
• Restriction allows for more creativity!

23. Under the hood
So what’s underneath the design of a web site?

26. <link
rel=quot;stylesheetquot;
type=quot;text/cssquot;
media=quot;allquot;
href=quot;/siteWideAssets/style/styleMain.cssquot;
/>

36. Under the hood
The fundamental structure of a website hasn’t changed
since the early 1990s.

37. Under the hood
The fundamental structure of a website hasn’t changed
since the early 1990s.
• This is the key to usability and accessibility

38. Under the hood
The fundamental structure of a website hasn’t changed
since the early 1990s.
• This is the key to usability and accessibility
• Everything we need is already there:
a great framework!

39. Under the hood
The fundamental structure of a website hasn’t changed
since the early 1990s.
• This is the key to usability and accessibility
• Everything we need is already there:
a great framework!
• Clean, semantic markup = search engine friendly

40. Friends...
Usability
Accessibility
Web Standards
Guidelines

41. Friends... ... and lovers
Usability Pleasure of use
Accessibility Functionality
Web Standards A forward-thinking ethos
Guidelines Creativity through restraint

42. Friends... ... and lovers
Usability Pleasure of use
Accessibility Functionality
Web Standards A forward-thinking ethos
Guidelines Creativity through restraint
= BEAUTY

43. What about Flash?

44. What about Flash?
• Flash can be accessible but it’s harder

45. What about Flash?
• Flash can be accessible but it’s harder
• Flash still has to sit within an HTML page

46. What about Flash?
• Flash can be accessible but it’s harder
• Flash still has to sit within an HTML page
• Flash-only sites conflict with Web Standards

47. Accessibility:
Making Yourself Accessible

48. Accessibility:
Making Yourself Accessible
• Connect with your audience

49. Accessibility:
Making Yourself Accessible
• Connect with your audience
• Become part of the community, not above it

50. Accessibility:
Making Yourself Accessible
• Connect with your audience
• Become part of the community, not above it
• The internet is all about sharing, so share!

51. The Carsonified Rebrand
We made the creative process of rebranding our
company completely ‘transparent’:

52. The Carsonified Rebrand
We made the creative process of rebranding our
company completely ‘transparent’:
• We wrote about why we were rebranding

53. The Carsonified Rebrand
We made the creative process of rebranding our
company completely ‘transparent’:
• We wrote about why we were rebranding
• We uploaded sketches, videos, etc.

54. The Carsonified Rebrand
We made the creative process of rebranding our
company completely ‘transparent’:
• We wrote about why we were rebranding
• We uploaded sketches, videos, etc.
• Readers gave feedback

55. The Carsonified Rebrand
We made the creative process of rebranding our
company completely ‘transparent’:
• We wrote about why we were rebranding
• We uploaded sketches, videos, etc.
• Readers gave feedback
• We responded to the feedback

56. The Carsonified Rebrand
We made the creative process of rebranding our
company completely ‘transparent’:
• We wrote about why we were rebranding
• We uploaded sketches, videos, etc.
• Readers gave feedback
• We responded to the feedback
• Rinse and repeat!

57. Has anyone ever heard of...

58. ?

61. Has anyone ever heard of...

62. ?

65. Good comments
On August 24th, 2007 at 1:45 pm, NICK said...

66. Good comments
On August 24th, 2007 at 1:45 pm, NICK said...
“The relaunch of MTV’s US site is a great example of
how to avoid creating a brand and overall aesthetic that
leads to a company being pigeon-holed. They came up
with the concept of a site “hat” - a playlist of user-
submitted site headers that loaded at random on each
refresh of their page. The result is a strong site feel that
remains perfectly recognisable as the big daddy of the
MTV family, but serves to strengthen the brand by
suggesting that their look and appeal is one that wears
many hats, caters to all, and still celebrates its userbase;
a concept very much in line with your own.”

67. Bad comments
On September 10th, 2007 at 2:46 pm, KARL said...

68. Bad comments
On September 10th, 2007 at 2:46 pm, KARL said...
“Is there any way I can get you guys to stop posting this
stu? It’s not simply that it’s in front of me, it’s that it
exists in the world at all.”

71. Show Tell
It’s just like being back at school!

72. Show Tell
It’s just like being back at school!
• Perfect for remote working

73. Show Tell
It’s just like being back at school!
• Perfect for remote working
• Allows you to quickly assess your ideas

74. Show Tell
It’s just like being back at school!
• Perfect for remote working
• Allows you to quickly assess your ideas
• Enables you to explain your reasoning to anybody

75. Show Tell
It’s just like being back at school!
• Perfect for remote working
• Allows you to quickly assess your ideas
• Enables you to explain your reasoning to anybody
• A nice, handy record to look back upon

76. In Conclusion...

77. In Conclusion...
• The web is a place for the exchange of information,
but like a printed catalogue, can - should - look
lovely and be a joy to use

78. In Conclusion...
• The web is a place for the exchange of information,
but like a printed catalogue, can - should - look
lovely and be a joy to use
• The actual information exchanged can be
an artefact in itself

79. In Conclusion...
• The web is a place for the exchange of information,
but like a printed catalogue, can - should - look
lovely and be a joy to use
• The actual information exchanged can be
an artefact in itself
• The exchange should happen between designers
and users - it's the beauty of the medium

80. Thank you
elliotjaystocks.com/idesign