SlideShare une entreprise Scribd logo
1  sur  64
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

Contenu connexe

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

A Visual History of the Web

Notes de l'éditeur

  1. 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.
  2. Mostly to speed up loading Died mainly due to it being terrible for seo Is AJAX the new frames?
  3. 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
  4. Entropy8 1997 Webby Award winner
  5. Jan 1997
  6. 1997
  7. 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:
  8. CSS Zen Garden
  9. 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
  10. 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? http://www.hrubes.com/
  11. Sometimes people feel the need offer a language choice. This one get’s away with it because it’s lovely http://www.zarovka.de/
  12. And this is lovely .... http://www.lorenzomarri.com/
  13. 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
  14. Tabbed Navigation made an appearance as early as
  15. December 12th 1998
  16. Later screen (2002) but Apple started using the tabbed navigation in 2000 but combined it with with the hugely successful candy buttons
  17. 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
  18. Feb 2002 Tabbed navigation is still a favourite but not always in this obvious file top tab style
  19. 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.
  20. Department stores use drop down menus to the extreme and usuability studies show this isn’t great for users.
  21. Thesis Theme
  22. 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?
  23. 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.
  24. Smashing Magazine 2010
  25. Darji Mandal - Community site 2009
  26. timeline based facebook, friendfeed, twitter
  27. 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
  28. http://rustinjessen.com/ 2009-2010
  29. Qubee - more subtile titles on a textured background
  30. 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.
  31. 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
  32. hdlive09
  33. http://www.charmingwall.com/
  34. Design for mobile first
  35. Mobile web - We’re hearing about apps for all mobiles, yeah yeah we know theres an app for that!
  36. An app
  37. 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?
  38. An what about mobile optimised sites. The blogging platform Wordpress offers a mobile friendly version of sites they host.