Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Web Design Process: A Strategy for Success

20,201 views

Published on

Before diving into your next website take a step back and examine your design process. Evaluate how you approach building a website to see if it the most effective way possible.

Published in: Design, Business, Technology

The Web Design Process: A Strategy for Success

  1. 1. THE WEB DESIGN PROCESSA STRATEGY FOR SUCCESSShay HoweTechWeek, July 2011www.shayhowe.com – @letscounthedays
  2. 2. SHAY HOWE www.shayhowe.com – @letscounthedaysThe Web Design Process: A Strategy for Success @letscounthedays
  3. 3. THE FIVE PHASE APPROACH1. Discovery Project Definition & Brief2. Plan Information Architecture & Strategy3. Design Web & User Interface Design4. Develop Coding & Development5. Launch Deploy & GrowThe Web Design Process: A Strategy for Success @letscounthedays
  4. 4. The Web Design Process: A Strategy for Success @letscounthedays
  5. 5. DISCOVERY Project Definition & BriefThe Web Design Process: A Strategy for Success @letscounthedays
  6. 6. Phase 1: DiscoveryHAVE A PURPOSE• Cover the five W’s and one H• Define the primary message• Outline any objectivesThe Web Design Process: A Strategy for Success @letscounthedays
  7. 7. Phase 1: DiscoverySET GOALS• Set short and long term goals• Set on site and off site goals• Increase motivation• Provide a metric for successThe Web Design Process: A Strategy for Success @letscounthedays
  8. 8. Phase 1: DiscoveryEVALUATE EXISTING WEBSITE• Most and least effective aspects• Learn from your mistakesThe Web Design Process: A Strategy for Success @letscounthedays
  9. 9. Phase 1: DiscoveryFIND WHAT USERS WANT• Research your users• Observe analyticsThe Web Design Process: A Strategy for Success @letscounthedays
  10. 10. Phase 1: DiscoveryRESEARCH THE COMPETITION• What are competitors doing well• What are competitors doing poorly• Learn from their mistakesThe Web Design Process: A Strategy for Success @letscounthedays
  11. 11. Phase 1: DiscoveryINTERVIEW STAKEHOLDER• Understand real needs and objectives• Make others feel involved and motivated• Avoid design by committeeThe Web Design Process: A Strategy for Success @letscounthedays
  12. 12. Phase 1: DiscoveryOUTLINE INITIAL TECH SPECS• Gather all requirement• Avoid any surprises• Know any limitationsThe Web Design Process: A Strategy for Success @letscounthedays
  13. 13. Phase 1: DiscoveryCOLLABORATE AND LISTEN• Listen, listen, listen• Value other’s opinions• Work as a teamThe Web Design Process: A Strategy for Success @letscounthedays
  14. 14. PLAN Information Architecture & StrategyThe Web Design Process: A Strategy for Success @letscounthedays
  15. 15. Phase 2: PlanDEFINE A TIMELINE• Put the project into realization• Set expectationsThe Web Design Process: A Strategy for Success @letscounthedays
  16. 16. Phase 2: PlanOUTLINE RESPONSIBILITIES• Outline the project work flow• Who is responsible for what• What approvals are needed• How will deliverables be handledThe Web Design Process: A Strategy for Success @letscounthedays
  17. 17. Phase 2: PlanDETERMINE THE STRUCTURE• Outline all pages• Diagram the page hierarchy• Build a visual representationThe Web Design Process: A Strategy for Success @letscounthedays
  18. 18. The Web Design Process: A Strategy for Success @letscounthedays
  19. 19. Phase 2: PlanDIAGRAM PAGE FLOWS• Determine content needs and priority• Diagram how content should correlate• Create an intuitive flowThe Web Design Process: A Strategy for Success @letscounthedays
  20. 20. Phase 2: PlanMAKE CONTENT RELATIONSHIPS• Outline overall messaging• Illustrate page connections• Start writingThe Web Design Process: A Strategy for Success @letscounthedays
  21. 21. Phase 2: PlanPROTOTYPE WIREFRAMES• Organize your layout• Make intuitive decisions• Tie in information architectureThe Web Design Process: A Strategy for Success @letscounthedays
  22. 22. The Web Design Process: A Strategy for Success @letscounthedays
  23. 23. Phase 2: PlanPERFORM USABILITY TEST• Gather meaningful feedback• Help eliminate potential flaws• Study similar case• Make continued refinementsThe Web Design Process: A Strategy for Success @letscounthedays
  24. 24. Phase 2: PlanSET A MAINTENANCE PLAN• Who takes the reigns once live• Make a content creation schedule• Schedule monthly reviewsThe Web Design Process: A Strategy for Success @letscounthedays
  25. 25. DESIGN Web & User Interface DesignThe Web Design Process: A Strategy for Success @letscounthedays
  26. 26. Phase 3: DesignBRAINSTORM CREATIVE CONCEPTS• Brainstorm the look and feel• Concept graphic design elements• Align creative ideasThe Web Design Process: A Strategy for Success @letscounthedays
  27. 27. The Web Design Process: A Strategy for Success @letscounthedays
  28. 28. Phase 3: DesignDESIGN THE VISUAL LAYOUT• Begin putting together the puzzle• Obtain feedback and refine• Remember responsive designsThe Web Design Process: A Strategy for Success @letscounthedays
  29. 29. The Web Design Process: A Strategy for Success @letscounthedays
  30. 30. Phase 3: DesignFOLLOW DESIGN PRINCIPLES• Stay focused• Remember the little thingsThe Web Design Process: A Strategy for Success @letscounthedays
  31. 31. Phase 3: DesignKEEP BRAND IDENTITY• Refresh the brand• Fulfill brand development• Do not stretch the brandThe Web Design Process: A Strategy for Success @letscounthedays
  32. 32. Phase 3: DesignREMEMBER ASSET CREATION• Cover your tracks• Think down the roadThe Web Design Process: A Strategy for Success @letscounthedays
  33. 33. Phase 3: DesignOBTAIN FEEDBACK AND REVISE• Pull stakeholders back in• Catch missed deficiencies• Regroup and reviseThe Web Design Process: A Strategy for Success @letscounthedays
  34. 34. The Web Design Process: A Strategy for Success @letscounthedays
  35. 35. Phase 3: DesignPERFORM USABILITY TEST• Additional feedback• Help eliminate potential flaws• Make continued refinementsThe Web Design Process: A Strategy for Success @letscounthedays
  36. 36. Phase 3: DesignCREATE A STYLE GUIDE• Outline brand guidelines• Use as an ongoing resource• Keep guidelines update to dateThe Web Design Process: A Strategy for Success @letscounthedays
  37. 37. DEVELOP Coding & DevelopmentThe Web Design Process: A Strategy for Success @letscounthedays
  38. 38. Phase 4: DevelopCODE HTML/CSS MARKUP• Develop core shell• Follow web standards and semantics• Keep the code in orderThe Web Design Process: A Strategy for Success @letscounthedays
  39. 39. The Web Design Process: A Strategy for Success @letscounthedays
  40. 40. Phase 4: DevelopDEVELOP ANY APPLICATIONS• Easier said than done• Plan ahead• Stay agileThe Web Design Process: A Strategy for Success @letscounthedays
  41. 41. Phase 4: DevelopADD 3RD PARTY INTEGRATION• Add in any 3rd party integration• Make good documentation• Run quality test• Stay up to dateThe Web Design Process: A Strategy for Success @letscounthedays
  42. 42. Phase 4: DevelopSUPPORT RESPONSIVE DESIGN• Account for different screen sizes• Follow responsive layouts• Make it convenientThe Web Design Process: A Strategy for Success @letscounthedays
  43. 43. Phase 4: DevelopTEST AND VALIDATE CODE• Test multiple browsers• Test different data sets• Validate and fix errorsThe Web Design Process: A Strategy for Success @letscounthedays
  44. 44. The Web Design Process: A Strategy for Success @letscounthedays
  45. 45. Phase 4: DevelopSET UP HOSTING AND LAUNCH• Follow tech specs• Set up proper configuration• Deploy live version• Check for hick-upsThe Web Design Process: A Strategy for Success @letscounthedays
  46. 46. LAUNCH Deploy & GrowThe Web Design Process: A Strategy for Success @letscounthedays
  47. 47. Phase 5: LaunchTRAIN WEBSITE MANAGERS• Provide the best training• Answer all questions• Cover any platforms necessary• Provide future referencesThe Web Design Process: A Strategy for Success @letscounthedays
  48. 48. Phase 5: LaunchMAINTAIN THE WEBSITE• Evolve the website, do not revolve it• Keep content up to date• Use content schedules• Grow the overall strategyThe Web Design Process: A Strategy for Success @letscounthedays
  49. 49. Phase 5: LaunchSTART MARKETING• Try different marketing methods• Find what works best• Experiment with marketing methodsThe Web Design Process: A Strategy for Success @letscounthedays
  50. 50. Phase 5: LaunchMEASURE PROGRESS• Continually watch analytics• How do you compare to the past• How are you trending• Always work to improveThe Web Design Process: A Strategy for Success @letscounthedays
  51. 51. IN REVIEW1. Discovery Project Definition & Brief2. Plan Information Architecture & Strategy3. Design Web & User Interface Design4. Develop Coding & Development5. Launch Deploy & GrowThe Web Design Process: A Strategy for Success @letscounthedays
  52. 52. QUESTIONS? Thank you!The Web Design Process: A Strategy for Success @letscounthedays

×