• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A Visual History of the Web
 

A Visual History of the Web

on

  • 1,993 views

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 ...

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.

Statistics

Views

Total Views
1,993
Views on SlideShare
1,969
Embed Views
24

Actions

Likes
5
Downloads
18
Comments
1

3 Embeds 24

http://kilo75.com 19
http://www.linkedin.com 3
http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • I&#x2019;m Monica Tailor <br /> I run a web agency called kilo75 and I&#x2019;ve been working at Digital Agencies for almost 15 years now. <br /> I started looking back at the history of the web about 6 months ago out of interest but discovered that it&#x2019;s difficult to even find a visual history. If you know what you&#x2019;re looking for then the Wayback Machine is great. <br /> <br /> Maybe there hasn&#x2019;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. <br /> <br /> This is my no means a complete work. I&#x2019;ve presented it a couple of times now and each time I get more and more feedback about what&#x2019;s missing so please view this as a work in progress and if you have any suggestions I would welcome your input. <br />
  • <br />
  • Mostly to speed up loading <br /> Died mainly due to it being terrible for seo <br /> Is AJAX the new frames? <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • 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. <br /> Tiling is still used <br />
  • Entropy8 <br /> 1997 Webby Award winner <br />
  • <br />
  • Jan 1997 <br />
  • 1997 <br />
  • <br />
  • 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 &#x2018;pretty&#x2019; designs were still governed by tables, so a design was essentially a combination of complicated tables within tables. <br /> <br /> And although this screenshot from 2003 for Wired Magazine doesn&#x2019;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. <br /> <br /> Another site at around the same time which again doesn&#x2019;t look particular amazing had the same impact: <br />
  • <br /> CSS Zen Garden <br />
  • Probably something we do all remember and often used in the 2000 era for a number of reasons: <br /> <br /> 1. Load the site in the background <br /> 2. Make a language choice <br /> 3. Most common - choose a low bandwidth version <br /> <br /> We see far fewer splash screens than we used to because people recognise they&#x2019;re not good for seo or usability. <br /> <br /> All current examples <br />
  • Tells people they need Flash to view the site but not strictly necessary as you&#x2019;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&#x2019;t have flash installed? <br /> <br /> http://www.hrubes.com/ <br />
  • Sometimes people feel the need offer a language choice. This one get&#x2019;s away with it because it&#x2019;s lovely <br /> <br /> http://www.zarovka.de/ <br />
  • And this is lovely .... <br /> http://www.lorenzomarri.com/ <br />
  • And we can&#x2019;t talk about splash screens without talking about flash loading screens. There aren&#x2019;t many of these around anymore but this one is one I worked on back in 1999 <br />
  • <br />
  • Tabbed Navigation made an appearance as early as <br />
  • December 12th 1998 <br />
  • Later screen (2002) but Apple started using the tabbed navigation in 2000 but combined it with with the hugely successful candy buttons <br />
  • <br />
  • iMac and multi colour iMacs especially - a sign of product design influencing web which is rare <br /> <br /> May 8th 1998 <br /> <br /> and the combination of candy buttons and tabbed navigation led to the next Apple site navigation <br />
  • Feb 2002 <br /> <br /> Tabbed navigation is still a favourite but not always in this obvious file top tab style <br />
  • 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. <br />
  • Department stores use drop down menus to the extreme and usuability studies show this isn&#x2019;t great for users. <br />
  • <br />
  • <br />
  • <br />
  • Thesis Theme <br />
  • <br />
  • 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&#x2019;t work in IE6 <br /> <br /> What&#x2019;s now? <br />
  • 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&#x2019;s a bit of a trend to making it a more prominent feature. <br />
  • Smashing Magazine 2010 <br />
  • Darji Mandal - Community site 2009 <br />
  • timeline based facebook, friendfeed, twitter <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • More and more ie6 <br /> our designs gracefully degrade for ie6 but no long allow ourselves to be contrained by it <br /> transparent layers and transparent PNG <br />
  • http://rustinjessen.com/ <br /> 2009-2010 <br />
  • Qubee - more subtile titles on a textured background <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • 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&#x2019;t quite there because of the complication of the alternatives available and cross browser compatibility. <br /> <br /> 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. <br />
  • <br />
  • 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 <br />
  • hdlive09 <br />
  • http://www.charmingwall.com/ <br />
  • <br />
  • Design for mobile first <br />
  • Mobile web - <br /> We&#x2019;re hearing about apps for all mobiles, yeah yeah we know theres an app for that! <br />
  • An app <br />
  • but will we move away from apps and onto mobile optimised sites built especially for mobile use. <br /> <br /> i think there is about to be a huge shift were we see sites built for mobile first, desktop second. This isn&#x2019;t an app - looks the same doesn&#x2019;t it? <br />
  • An what about mobile optimised sites. The blogging platform Wordpress offers a mobile friendly version of sites they host. <br />
  • <br />

A Visual History of the Web A Visual History of the Web Presentation Transcript

  • Visual Design Trends in Web Design since 1996 http://kilo75.com @monicatailor
  • Frames http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Drop Shadows http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Tiled Background Images http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Tables of Contents http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Tableless Design http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Splash screens http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Flash Intros http://kilo75.com @monicatailor
  • Studio Hagger http://kilo75.com @monicatailor
  • Tabbed Navigation http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Candy buttons http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Drop down menus http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Blogs http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • What’s now and next http://kilo75.com @monicatailor
  • Over sized footers http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Information heavy http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Social Design Elements http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Transparency http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Rounded Corners http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Big fonts http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Font replacement http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Hand drawn fonts http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Mobile http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • http://kilo75.com @monicatailor
  • Thank you I’m ‘monicatailor’ I blog at kilo75.com http://kilo75.com @monicatailor