A Visual History of the Web


Published on

This presentation talks about trends in web design since 1996. It is a work in progress so if you have any thoughts on what should be included please let me know, it is a work in progress that will probably never end.

Published in: Design
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • I’m Monica Tailor
    I run a web agency called kilo75 and I’ve been working at Digital Agencies for almost 15 years now.
    I started looking back at the history of the web about 6 months ago out of interest but discovered that it’s difficult to even find a visual history. If you know what you’re looking for then the Wayback Machine is great.

    Maybe there hasn’t been enough time yet but I was curious to see if there were any trends or seminal moments in web design that can be used to start compiling a history.

    This is my no means a complete work. I’ve presented it a couple of times now and each time I get more and more feedback about what’s missing so please view this as a work in progress and if you have any suggestions I would welcome your input.

  • Mostly to speed up loading
    Died mainly due to it being terrible for seo
    Is AJAX the new frames?

  • Slight over kill but you get the idea. Tiled background - done for a good reason and done well it was great but done badly and it was hideous.
    Tiling is still used
  • Entropy8
    1997 Webby Award winner

  • Jan 1997
  • 1997

  • Up until around 2003-5 we were building websites in tables. A bit of a hang over from the days when the Internet was for academics and most information was presented in tables. As designs began to make things look ‘pretty’ designs were still governed by tables, so a design was essentially a combination of complicated tables within tables.

    And although this screenshot from 2003 for Wired Magazine doesn’t look all that revolutionary it was game changing because it was made out of tables at all ... although it looks like it could be and it helped web designers realise what was possible.

    Another site at around the same time which again doesn’t look particular amazing had the same impact:

  • CSS Zen Garden
  • Probably something we do all remember and often used in the 2000 era for a number of reasons:

    1. Load the site in the background
    2. Make a language choice
    3. Most common - choose a low bandwidth version

    We see far fewer splash screens than we used to because people recognise they’re not good for seo or usability.

    All current examples
  • Tells people they need Flash to view the site but not strictly necessary as you’re putting a click in the way. Far better to launch the site and present a non-flash version if necessary. May be makes people think they don’t have flash installed?

  • Sometimes people feel the need offer a language choice. This one get’s away with it because it’s lovely

  • And this is lovely ....
  • And we can’t talk about splash screens without talking about flash loading screens. There aren’t many of these around anymore but this one is one I worked on back in 1999

  • Tabbed Navigation made an appearance as early as
  • December 12th 1998
  • Later screen (2002) but Apple started using the tabbed navigation in 2000 but combined it with with the hugely successful candy buttons

  • iMac and multi colour iMacs especially - a sign of product design influencing web which is rare

    May 8th 1998

    and the combination of candy buttons and tabbed navigation led to the next Apple site navigation
  • Feb 2002

    Tabbed navigation is still a favourite but not always in this obvious file top tab style
  • As websites grew in size the need for better organisation and ability to navigate to deep within a site lead to drop down menus as well as better support for javascript. Many a web developer in 2000 - 2002 has lost sleep over cross browser compatibility for drop down menus.
  • Department stores use drop down menus to the extreme and usuability studies show this isn’t great for users.

  • Thesis Theme

  • Right now we seem to be on the verge of change but still catering to IE6 is holding things back a bit so techniques like font replacement and transparency don’t work in IE6

    What’s now?
  • Rather than burying information, it is laid out clearly, giving access to links deep within a site with one click. The footer has long been ignored but there’s a bit of a trend to making it a more prominent feature.
  • Smashing Magazine 2010
  • Darji Mandal - Community site 2009
  • timeline based facebook, friendfeed, twitter

  • More and more ie6
    our designs gracefully degrade for ie6 but no long allow ourselves to be contrained by it
    transparent layers and transparent PNG
  • http://rustinjessen.com/
  • Qubee - more subtile titles on a textured background

  • An area of much frustration for designers and clients alike is the limited number of fonts we can use. System fonts are restricted to just 5. The only way until recently to show different fonts has been to make them into images, offering actual text in a font of your choice is possible. Even now it isn’t quite there because of the complication of the alternatives available and cross browser compatibility.

    The new HTML 5 standards have been published but until there is true cross browser support for the new standards it is difficult to see font replacement becoming mainstream.

  • Maybe this is about going back to ideas of making and craft but there seems to be a revival of illustration and hand drawn fonts
  • hdlive09
  • http://www.charmingwall.com/

  • Design for mobile first
  • Mobile web -
    We’re hearing about apps for all mobiles, yeah yeah we know theres an app for that!
  • An app
  • but will we move away from apps and onto mobile optimised sites built especially for mobile use.

    i think there is about to be a huge shift were we see sites built for mobile first, desktop second. This isn’t an app - looks the same doesn’t it?
  • An what about mobile optimised sites. The blogging platform Wordpress offers a mobile friendly version of sites they host.

  • A Visual History of the Web

    1. 1. Visual Design Trends in Web Design since 1996 http://kilo75.com @monicatailor
    2. 2. Frames http://kilo75.com @monicatailor
    3. 3. http://kilo75.com @monicatailor
    4. 4. http://kilo75.com @monicatailor
    5. 5. http://kilo75.com @monicatailor
    6. 6. Drop Shadows http://kilo75.com @monicatailor
    7. 7. http://kilo75.com @monicatailor
    8. 8. Tiled Background Images http://kilo75.com @monicatailor
    9. 9. http://kilo75.com @monicatailor
    10. 10. http://kilo75.com @monicatailor
    11. 11. Tables of Contents http://kilo75.com @monicatailor
    12. 12. http://kilo75.com @monicatailor
    13. 13. http://kilo75.com @monicatailor
    14. 14. Tableless Design http://kilo75.com @monicatailor
    15. 15. http://kilo75.com @monicatailor
    16. 16. http://kilo75.com @monicatailor
    17. 17. Splash screens http://kilo75.com @monicatailor
    18. 18. http://kilo75.com @monicatailor
    19. 19. http://kilo75.com @monicatailor
    20. 20. http://kilo75.com @monicatailor
    21. 21. Flash Intros http://kilo75.com @monicatailor
    22. 22. Studio Hagger http://kilo75.com @monicatailor
    23. 23. Tabbed Navigation http://kilo75.com @monicatailor
    24. 24. http://kilo75.com @monicatailor
    25. 25. http://kilo75.com @monicatailor
    26. 26. Candy buttons http://kilo75.com @monicatailor
    27. 27. http://kilo75.com @monicatailor
    28. 28. http://kilo75.com @monicatailor
    29. 29. Drop down menus http://kilo75.com @monicatailor
    30. 30. http://kilo75.com @monicatailor
    31. 31. http://kilo75.com @monicatailor
    32. 32. Blogs http://kilo75.com @monicatailor
    33. 33. http://kilo75.com @monicatailor
    34. 34. http://kilo75.com @monicatailor
    35. 35. http://kilo75.com @monicatailor
    36. 36. What’s now and next http://kilo75.com @monicatailor
    37. 37. Over sized footers http://kilo75.com @monicatailor
    38. 38. http://kilo75.com @monicatailor
    39. 39. http://kilo75.com @monicatailor
    40. 40. Information heavy http://kilo75.com @monicatailor
    41. 41. http://kilo75.com @monicatailor
    42. 42. http://kilo75.com @monicatailor
    43. 43. Social Design Elements http://kilo75.com @monicatailor
    44. 44. http://kilo75.com @monicatailor
    45. 45. Transparency http://kilo75.com @monicatailor
    46. 46. http://kilo75.com @monicatailor
    47. 47. http://kilo75.com @monicatailor
    48. 48. Rounded Corners http://kilo75.com @monicatailor
    49. 49. http://kilo75.com @monicatailor
    50. 50. Big fonts http://kilo75.com @monicatailor
    51. 51. http://kilo75.com @monicatailor
    52. 52. http://kilo75.com @monicatailor
    53. 53. Font replacement http://kilo75.com @monicatailor
    54. 54. http://kilo75.com @monicatailor
    55. 55. Hand drawn fonts http://kilo75.com @monicatailor
    56. 56. http://kilo75.com @monicatailor
    57. 57. http://kilo75.com @monicatailor
    58. 58. http://kilo75.com @monicatailor
    59. 59. Mobile http://kilo75.com @monicatailor
    60. 60. http://kilo75.com @monicatailor
    61. 61. http://kilo75.com @monicatailor
    62. 62. http://kilo75.com @monicatailor
    63. 63. http://kilo75.com @monicatailor
    64. 64. Thank you I’m ‘monicatailor’ I blog at kilo75.com http://kilo75.com @monicatailor