Web Development Process - updated!


Published on

An updated presentation to showcase Whytespace's professional team and our finely tuned website design and development process.

Tuesday, June 28, 2011

Published in: Design, Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Development Process - updated!

  1. 1. Travis Whyte<br />Whytespace Ltd.<br />
  2. 2. Presentation Outline<br />Whytespace, an Introduction<br />Our Web Design & Development Process<br />
  3. 3. Whytespace, an Introduction<br />The evolution of a local web design & development company<br />
  4. 4. History of Whytespace<br />Travis Whyte:<br />1999 B.Sc. Chemistry (Physics/Astronomy)<br />Kings University College<br />Built my final research project as a website<br />2001 M.Ed. Instructional Technologies<br />University of Alberta<br />Researched effective web design<br />Learned about process development<br />
  5. 5. History of Whytespace<br />Educational Media Technologies <br />2001 – 2004Sole Proprietor<br />Canadian Space Agency<br />Canadian Astronomical Society<br />LearnAlberta.ca(Gov. Alberta)<br />Small web projects on the side<br />New Media Solutions<br /> 2004 – 2005 Partnered with a Comp. Sci. grad<br />Needed developer experience<br />Started building & hosting websites<br />
  6. 6. History of Whytespace<br />April 2005 Partnership Dissolved<br />Reinventing the wheel, not servicing clients<br />Financial instability<br />Conflicting visions<br />Separation of clients and Code<br />July 2005 Incorporated Whytespace Ltd.<br />Travis & Sarah Whyte<br />Old clients, New vision<br />How do we create a Great Company?<br />Powered by:www.whytespace.ca<br />
  7. 7. Whytespace’s Hedgehog<br />Best at:<br />Teams & Processes<br />Dynamic Portal <br />Websites<br />Economic:<br />Website Development &<br />Hosting<br />Passion:<br />Client-Focused<br />Customer Service<br />Dynamic Portal Websites<br />are websites custom <br />designed and built on a <br />Content Management <br />System (CMS) framework that allows us to pass control of the website to <br />our clients.<br />
  8. 8. Assembling a Team<br /><ul><li>Getting people in the right seats</li></ul>Contractors<br />Bubble Up Marketing<br />Solid Technology Solutions<br />E-Commerce Developer<br />Flash Developer<br />Employees<br />Travis President & PM<br />Sarah Director of Design<br />Jordan Lead Developer<br />James Junior Developer<br />Joel Graphic Artist<br />Angie Graphic Artist<br />Carla Bookkeeper <br />
  9. 9. Website Design & Development Processes<br /> Process Outlined<br />
  10. 10. Whytespace Web Development Process<br />Environmental Scan<br />Content<br />Design & Development<br />Assembly<br />Testing & Pre-Launch<br />Launch Day & Follow-Up<br />
  11. 11. Whytespace Web Development Process<br />Environmental Scan<br />Website consulting<br />Orientation to the client<br />Business analysis<br />Estimate & Quote<br />Proposal preparation <br />
  12. 12. 1. Environmental Scan<br />Domain name<br />.cavs .com<br />Business name, acronym, or other<br />Marketing materials<br />Logos, brochures, graphics, business plan<br />Industry<br />Competitors, partners, organizations<br />Website goals<br />Short term, long term<br />Need email?<br />Number of accounts, groupware<br />
  13. 13. 1. Environmental Scan<br />Type of website?<br />Static site (developer develops and developer required for all updates)<br />Splash page<br />Brochure site<br />Hosting anywhere (Whytespace, TELUS, Shaw, etc.)<br />Portal site (developer develops and client does updates themselves)<br />Content Management System (CMS)<br />Easily control content<br />One-time management<br />Interaction (do something)<br />Modules<br />Forums, blogs, feedback, gallery, e-com<br />Whytespace hosting only<br />
  14. 14. Whytespace Web Development Process<br />Content<br />Who’s responsibility is it?<br />Organization, information architecture<br />Content & Design closely related<br />Content should be considered preliminary<br />Design the content<br />
  15. 15. 2. Content<br />Writing<br />Consulting with client<br />Client research and writing <br />Organization<br />Topics, sections and pages<br />Entry points<br />Flow & Leading and guiding<br />Sitemap <br />Later helps the developer<br />
  16. 16. Whytespace Web Development Process<br />Design & Development (Programming)<br />Let the professionals do the work <br />Designers work directly with the clients<br />No miss-communications<br />Designers in close contact with Developers<br />
  17. 17. 3. Design & Development<br />3a. Design<br />Graphics Research (stock photos, new pictures)<br />Design Samples<br />Layout<br />White-space, how much text<br />Design Comp (comprehensive layout)<br />
  18. 18. Side Bar: Tien Lung<br />A lesson in patience & perseverance <br />
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24. 3. Design & Development<br />3b. Development<br />Source code installed<br />Website setup and configured <br />Blank pages created<br />Modules installed & configured<br />Website skeleton – Alpha<br />Custom development<br />
  25. 25. Whytespace Web Development Process<br />Assembly<br />Design and Development comes together<br />Designing the content<br />Close interaction with clients<br />New content added<br />Custom modules configured<br />
  26. 26. 4. Assembly<br />Website skin (template)<br />Bring comps alive<br />Content migration & new content insertion<br />Important to have approved content<br />Graphics to complement content<br />Stock photos & client photos<br />Page linking and organization<br />Visitor flow<br />Culminates with Beta Launch<br />
  27. 27. Whytespace Web Development Process<br />Testing & Pre-Launch<br />Starts with Beta launch <br />Testing is important<br />Specific & Structured feedback is helpful<br />http://browsershots.org/<br />
  28. 28. 5. Testing & Launch<br />Beta-launch<br />Testing and feedback<br />Presentation<br />Website is made available via temp web address<br />Email feedback and changes<br />Training<br />Introduction to CMS, modules<br />Website user guide, client does updates themselves<br />Live Launch <br />Google Analytics installed<br />Website connected to the domain (DNS)<br />Website submitted to search engines (Web Master Tools)<br />Email configured<br />
  29. 29. Whytespace Web Development Process<br />Launch Day & Follow-Up<br />Important to finish strong<br />Initial support is key<br />Long-term relationship are formed<br />Friday launch days<br />
  30. 30. 6. Launch Day & Follow-Up<br />Day of the launch<br />Sign-Off email & Invoice<br />One Week later<br />Email check-in<br />Site analytics (Google, other)<br />Page popularity, entry points, user flow, bandwidth<br />Two to Six Months later<br />Review analytics<br />Site growth plan<br />Referral to SEO company<br />
  31. 31. Website Design & Development Process<br /> Flow Chart, for the visual learner<br />
  32. 32.
  33. 33.
  34. 34.
  35. 35.
  36. 36.
  37. 37. Whytespace Ltd.<br />Find us Online<br />www.whytespace.ca<br />www.twitter.com/whytespace<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.