Simple Steps to Great Web Design

Matthew Smith
Matthew SmithCreative Director / Designer
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
1 of 65

Recommended

Social media Policy by
Social media PolicySocial media Policy
Social media PolicyMobile Vikings
729 views31 slides
Our Social Media Approach by
Our Social Media ApproachOur Social Media Approach
Our Social Media ApproachMobile Vikings
651 views27 slides
3D Lean Learning Introduction to Demos by
3D Lean Learning Introduction to Demos3D Lean Learning Introduction to Demos
3D Lean Learning Introduction to DemosVirtual iVent
607 views71 slides
Building a web framework: Django's design decisions by
Building a web framework: Django's design decisionsBuilding a web framework: Django's design decisions
Building a web framework: Django's design decisionsJacob Kaplan-Moss
6.9K views84 slides
Building the Real Time Web by
Building the Real Time WebBuilding the Real Time Web
Building the Real Time WebBlaine
2.6K views77 slides
Creating a Website Sitemap by
Creating a Website SitemapCreating a Website Sitemap
Creating a Website SitemapJeannie Melinz
243.9K views30 slides

More Related Content

Viewers also liked

A Step-By-Step Guide To Building Your Own Website - Website Building Helper by
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 HelperJohn Paul Aguiar
4.6K views7 slides
Intro to Web Design by
Intro to Web DesignIntro to Web Design
Intro to Web DesignKathy Gill
10K views32 slides
Web design proposal sample by
Web design proposal sampleWeb design proposal sample
Web design proposal sampleAdviacent
213.3K views12 slides
Web Development using HTML & CSS by
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSSBrainware Consultancy Pvt Ltd
42.3K views47 slides
Web Design 101 by
Web Design 101Web Design 101
Web Design 101T.S. Lim
35.1K views72 slides
Sample Website Proposal Presentation by
Sample Website Proposal PresentationSample Website Proposal Presentation
Sample Website Proposal PresentationReach China Holdings Limited
197.8K views29 slides

Viewers also liked(6)

A Step-By-Step Guide To Building Your Own Website - Website Building Helper by John Paul Aguiar
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
John Paul Aguiar4.6K views
Intro to Web Design by Kathy Gill
Intro to Web DesignIntro to Web Design
Intro to Web Design
Kathy Gill10K views
Web design proposal sample by Adviacent
Web design proposal sampleWeb design proposal sample
Web design proposal sample
Adviacent213.3K views
Web Design 101 by T.S. Lim
Web Design 101Web Design 101
Web Design 101
T.S. Lim35.1K views

Similar to Simple Steps to Great Web Design

The Art of the Spike by
The Art of the SpikeThe Art of the Spike
The Art of the SpikeAaron Bedra
1.6K views72 slides
TwitterOne by
TwitterOneTwitterOne
TwitterOneguest29d746d
141 views38 slides
Melvin Vivas' talk at Phil. Tech Startups Meetup by
Melvin Vivas' talk at Phil. Tech Startups MeetupMelvin Vivas' talk at Phil. Tech Startups Meetup
Melvin Vivas' talk at Phil. Tech Startups MeetupMelvin Dave Vivas
703 views30 slides
Blueshots Onlinetuesday by
Blueshots OnlinetuesdayBlueshots Onlinetuesday
Blueshots OnlinetuesdayMarketingfacts
296 views62 slides
Agile Project Management Basis Software Exposition 2010 by
Agile Project Management Basis Software Exposition 2010Agile Project Management Basis Software Exposition 2010
Agile Project Management Basis Software Exposition 2010nhm taveer hossain khan
377 views27 slides
Social Media For Museums by
Social Media For MuseumsSocial Media For Museums
Social Media For Museumsmichellej
938 views129 slides

Similar to Simple Steps to Great Web Design(20)

The Art of the Spike by Aaron Bedra
The Art of the SpikeThe Art of the Spike
The Art of the Spike
Aaron Bedra1.6K views
Melvin Vivas' talk at Phil. Tech Startups Meetup by Melvin Dave Vivas
Melvin Vivas' talk at Phil. Tech Startups MeetupMelvin Vivas' talk at Phil. Tech Startups Meetup
Melvin Vivas' talk at Phil. Tech Startups Meetup
Melvin Dave Vivas703 views
Social Media For Museums by michellej
Social Media For MuseumsSocial Media For Museums
Social Media For Museums
michellej938 views
Advicefortheinterns 100721141420-phpapp01 (3) by niti slideman
Advicefortheinterns 100721141420-phpapp01 (3)Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)
niti slideman429 views
Advicefortheinterns 100721141420-phpapp01 (1) by Nitish Bhardwaj
Advicefortheinterns 100721141420-phpapp01 (1)Advicefortheinterns 100721141420-phpapp01 (1)
Advicefortheinterns 100721141420-phpapp01 (1)
Nitish Bhardwaj162 views
Advicefortheinterns 100721141420-phpapp01 (3) by Nitish Bhardwaj
Advicefortheinterns 100721141420-phpapp01 (3)Advicefortheinterns 100721141420-phpapp01 (3)
Advicefortheinterns 100721141420-phpapp01 (3)
Nitish Bhardwaj148 views
Agile Teams as Innovation Teams by Robert Dempsey
Agile Teams as Innovation TeamsAgile Teams as Innovation Teams
Agile Teams as Innovation Teams
Robert Dempsey551 views
Summer of Tech Careers Seminar 2010 by summerofcode
Summer of Tech Careers Seminar 2010Summer of Tech Careers Seminar 2010
Summer of Tech Careers Seminar 2010
summerofcode804 views
Double Your Website’s Success by Ross Johnson
Double Your Website’s SuccessDouble Your Website’s Success
Double Your Website’s Success
Ross Johnson543 views
Gould Academy: Web 3.0 - Integration. For IECA Conf. 5/13/10 by Tucker Kimball
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
Tucker Kimball371 views
Social Media Tips for Small Business by Kula Partners
Social Media Tips for Small BusinessSocial Media Tips for Small Business
Social Media Tips for Small Business
Kula Partners702 views
Participating Isnt Leading: Facebook, Twitter, and the Rise of Tribes by Michael Vaughn
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 Vaughn606 views
Real-Time Everything - the Era of Communication Ubiquity by Rob Gonda
Real-Time Everything - the Era of Communication UbiquityReal-Time Everything - the Era of Communication Ubiquity
Real-Time Everything - the Era of Communication Ubiquity
Rob Gonda8K views

Recently uploaded

Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...ShapeBlue
37 views15 slides
Business Analyst Series 2023 - Week 3 Session 5 by
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5DianaGray10
345 views20 slides
NTGapps NTG LowCode Platform by
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform Mustafa Kuğu
28 views30 slides
MVP and prioritization.pdf by
MVP and prioritization.pdfMVP and prioritization.pdf
MVP and prioritization.pdfrahuldharwal141
37 views8 slides
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...ShapeBlue
44 views13 slides
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueShapeBlue
89 views23 slides

Recently uploaded(20)

Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue37 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10345 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu28 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue44 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue89 views
State of the Union - Rohit Yadav - Apache CloudStack by ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue106 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue25 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays33 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue75 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson126 views
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue by ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlueMigrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
ShapeBlue71 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely29 views
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue by ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueCloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
ShapeBlue26 views
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De... by Moses Kemibaro
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Moses Kemibaro27 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue64 views
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by ShapeBlue
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
ShapeBlue38 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue81 views

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