SlideShare a Scribd company logo
1 of 65
Download to read offline
Simple Steps to
         Great Web Design

Sunday, March 14, 2010
Introductions


Sunday, March 14, 2010
my name is

         Matthew Smith


Sunday, March 14, 2010
I am the Principal at

         SQUARED EYE


Sunday, March 14, 2010
I am a

         Husband         &   I am a

                             Father


Sunday, March 14, 2010
I am a

         Beerdiot (Beer Idiot)


Sunday, March 14, 2010
I worship

         These Guys


Sunday, March 14, 2010
Welcome to

         Simple Steps to
         Great Web Design

Sunday, March 14, 2010
Lets define some

         Definitions


Sunday, March 14, 2010
What is

         Web Design?


Sunday, March 14, 2010
Web design is the skill of creating presentations of content
         (usually hypertext or hypermedia) that is delivered to an
         end-user through the World Wide Web, by way of a Web
         browser or other Web-enabled software like Internet
         television clients, microblogging clients and RSS readers.




Sunday, March 14, 2010
Web design helps content get stuff done — on the web.




Sunday, March 14, 2010
Great web design helps content get stuff done — on the web




Sunday, March 14, 2010
Great web design helps content get stuff done — on the web


         with
                         Pleasure
Sunday, March 14, 2010
So, what are these

         Simple Steps?


Sunday, March 14, 2010
Everything starts with

         Knowing the Brand


Sunday, March 14, 2010
Everything starts with

         Knowing the Brand


Sunday, March 14, 2010
Next you must

         Know their Audience


Sunday, March 14, 2010
Next you must

         Know their Audience


Sunday, March 14, 2010
Next you must

         Know their Audience


Sunday, March 14, 2010
and if you’re going to pursue great design, then

         Know their Content


         IA sketch by Mike Rohde


Sunday, March 14, 2010
Know the Medium


Sunday, March 14, 2010
Know the Medium


Sunday, March 14, 2010
Helping content get stuff done:

         Design Technique


Sunday, March 14, 2010
Balance


Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Hierarchy


Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Pleasure


Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Moving Pleasure


Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
Sunday, March 14, 2010
A few Helpful

         Resources


Sunday, March 14, 2010
Art & Visual Perception
         The Psychology of the Creative Eye
         by Rudolph Arnheim




         Understanding Comics
         by Scott McCloud




Sunday, March 14, 2010

More Related Content

Viewers also liked (6)

A Step-By-Step Guide To Building Your Own Website - Website Building Helper
A Step-By-Step Guide To Building Your Own Website - Website Building HelperA Step-By-Step Guide To Building Your Own Website - Website Building Helper
A Step-By-Step Guide To Building Your Own Website - Website Building Helper
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 
Web design proposal sample
Web design proposal sampleWeb design proposal sample
Web design proposal sample
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
 
Sample Website Proposal Presentation
Sample Website Proposal PresentationSample Website Proposal Presentation
Sample Website Proposal Presentation
 

Similar to Simple Steps to Great Web Design

The Art of the Spike
The Art of the SpikeThe Art of the Spike
The Art of the Spike
Aaron Bedra
 
Social Media For Museums
Social Media For MuseumsSocial Media For Museums
Social Media For Museums
michellej
 
Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)
niti slideman
 
Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)
Nitish Bhardwaj
 
Advicefortheinterns 100721141420-phpapp01 (1)
Advicefortheinterns 100721141420-phpapp01 (1)Advicefortheinterns 100721141420-phpapp01 (1)
Advicefortheinterns 100721141420-phpapp01 (1)
Nitish Bhardwaj
 
Agile teams as innovation teams
Agile teams as innovation teamsAgile teams as innovation teams
Agile teams as innovation teams
OpenAgile Romania
 
Participating Isnt Leading: Facebook, Twitter, and the Rise of Tribes
Participating Isnt Leading: Facebook, Twitter, and the Rise of TribesParticipating Isnt Leading: Facebook, Twitter, and the Rise of Tribes
Participating Isnt Leading: Facebook, Twitter, and the Rise of Tribes
Michael Vaughn
 

Similar to Simple Steps to Great Web Design (20)

Sxsw Presentation Blamestorm
Sxsw Presentation   BlamestormSxsw Presentation   Blamestorm
Sxsw Presentation Blamestorm
 
The Art of the Spike
The Art of the SpikeThe Art of the Spike
The Art of the Spike
 
TwitterOne
TwitterOneTwitterOne
TwitterOne
 
Melvin Vivas' talk at Phil. Tech Startups Meetup
Melvin Vivas' talk at Phil. Tech Startups MeetupMelvin Vivas' talk at Phil. Tech Startups Meetup
Melvin Vivas' talk at Phil. Tech Startups Meetup
 
Blueshots Onlinetuesday
Blueshots OnlinetuesdayBlueshots Onlinetuesday
Blueshots Onlinetuesday
 
Agile Project Management Basis Software Exposition 2010
Agile Project Management Basis Software Exposition 2010Agile Project Management Basis Software Exposition 2010
Agile Project Management Basis Software Exposition 2010
 
Social Media For Museums
Social Media For MuseumsSocial Media For Museums
Social Media For Museums
 
Refactoring
RefactoringRefactoring
Refactoring
 
Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)
 
Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)
 
Advicefortheinterns 100721141420-phpapp01 (1)
Advicefortheinterns 100721141420-phpapp01 (1)Advicefortheinterns 100721141420-phpapp01 (1)
Advicefortheinterns 100721141420-phpapp01 (1)
 
Agile Teams as Innovation Teams
Agile Teams as Innovation TeamsAgile Teams as Innovation Teams
Agile Teams as Innovation Teams
 
Agile teams as innovation teams
Agile teams as innovation teamsAgile teams as innovation teams
Agile teams as innovation teams
 
Summer of Tech Careers Seminar 2010
Summer of Tech Careers Seminar 2010Summer of Tech Careers Seminar 2010
Summer of Tech Careers Seminar 2010
 
Double Your Website’s Success
Double Your Website’s SuccessDouble Your Website’s Success
Double Your Website’s Success
 
Gould Academy: Web 3.0 - Integration. For IECA Conf. 5/13/10
Gould Academy: Web 3.0 - Integration. For IECA Conf. 5/13/10Gould Academy: Web 3.0 - Integration. For IECA Conf. 5/13/10
Gould Academy: Web 3.0 - Integration. For IECA Conf. 5/13/10
 
How to be a better designer
How to be a better designerHow to be a better designer
How to be a better designer
 
Social Media Tips for Small Business
Social Media Tips for Small BusinessSocial Media Tips for Small Business
Social Media Tips for Small Business
 
Participating Isnt Leading: Facebook, Twitter, and the Rise of Tribes
Participating Isnt Leading: Facebook, Twitter, and the Rise of TribesParticipating Isnt Leading: Facebook, Twitter, and the Rise of Tribes
Participating Isnt Leading: Facebook, Twitter, and the Rise of Tribes
 
How to Hit the Hiring Ground Running in 2011
How to Hit the Hiring Ground Running in 2011How to Hit the Hiring Ground Running in 2011
How to Hit the Hiring Ground Running in 2011
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Recently uploaded (20)

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 

Simple Steps to Great Web Design

Editor's Notes

  1. Their Personality, Stakeholders, Business Objectives, Site Objectives. What should their content DO?!
  2. What’s the personality of those you’re trying to communicate with?This can be exhaustive study, or just good thinking at its core.
  3. Information Architecture and Copywriting Art direction. The Content should inform the design
  4. Don’t just know browsers, understand your medium. It’s dynamic. It’s fluid. It’s NOT print. It’s not containable. It needs to be flexible, MOVEABLE, and it needs to get business done. Dynamic Content and Content Types Speed of digestion. Active vs Passive Web. Standing in Line Normal design theories, practices, or guides don't always hold up on the web.
  5. Information Architecture and Copywriting Art direction. The Content should inform the design
  6. Information Architecture and Copywriting Art direction. The Content should inform the design
  7. Information Architecture and Copywriting Art direction. The Content should inform the design
  8. Information Architecture and Copywriting Art direction. The Content should inform the design
  9. Information Architecture and Copywriting Art direction. The Content should inform the design
  10. Information Architecture and Copywriting Art direction. The Content should inform the design
  11. Information Architecture and Copywriting Art direction. The Content should inform the design
  12. Information Architecture and Copywriting Art direction. The Content should inform the design
  13. Size
  14. Size
  15. Size
  16. Information Architecture and Copywriting Art direction. The Content should inform the design
  17. Information Architecture and Copywriting Art direction. The Content should inform the design
  18. Information Architecture and Copywriting Art direction. The Content should inform the design
  19. Information Architecture and Copywriting Art direction. The Content should inform the design
  20. Information Architecture and Copywriting Art direction. The Content should inform the design
  21. Information Architecture and Copywriting Art direction. The Content should inform the design
  22. Information Architecture and Copywriting Art direction. The Content should inform the design
  23. Information Architecture and Copywriting Art direction. The Content should inform the design
  24. Color
  25. Color
  26. Information Architecture and Copywriting Art direction. The Content should inform the design
  27. Simplicity, and isolation
  28. lack of clear direction will frustrate, even if its a small and nearly unknown thing
  29. blur
  30. Contrast
  31. Contrast
  32. Contrast
  33. Contrast
  34. Information Architecture and Copywriting Art direction. The Content should inform the design
  35. Information Architecture and Copywriting Art direction. The Content should inform the design
  36. Information Architecture and Copywriting Art direction. The Content should inform the design
  37. Information Architecture and Copywriting Art direction. The Content should inform the design
  38. Information Architecture and Copywriting Art direction. The Content should inform the design
  39. Information Architecture and Copywriting Art direction. The Content should inform the design
  40. Information Architecture and Copywriting Art direction. The Content should inform the design
  41. Information Architecture and Copywriting Art direction. The Content should inform the design
  42. Information Architecture and Copywriting Art direction. The Content should inform the design
  43. Information Architecture and Copywriting Art direction. The Content should inform the design