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.

Your first web application. From Design to Launch

3,471 views

Published on

Everyone has an idea for the next big web application, but what does it take to bring that application to life?

David Brooks walks you through the process from planning and design to launch. You'll learn what you need to know to build it, and how to fill the gaps you might have in your skill set.

Published in: Design
  • Be the first to comment

Your first web application. From Design to Launch

  1. 1. Your First WebApplication, from Designto Launch
  2. 2. Hello! I’m David BrooksOwner of Northward CompassDesigner at ArtleticI write at DavidNBrooks.com@DavidNBrooks
  3. 3. So you want to build a(web) application…
  4. 4. Have you told anyone elseabout this plan? Becausetheyre probably going tocommit you.
  5. 5. Why build a webapplication?
  6. 6. Facebook Killaz
  7. 7. A Simple Question: “What isYour Favorite WebApplication?”GmailGithub/BitbucketMint.comEvernote
  8. 8. What’s Missing?FacebookTwitterFlickrYoutubeBasecamp
  9. 9. Successful ApplicationsSolve a Problem.Memorable Applications Make You Love SolvingThat Problem.
  10. 10. Why a Web Application?Why Not A Mobile App?Legos versus Wrought Iron
  11. 11. Phase 1: Planning
  12. 12. The Problem to Solve is UpTo You...But Make it a Good One
  13. 13. Solve For The BiggestGroup PossibleBut no more
  14. 14. “This is cool,but I wouldnever use this.”- Non Thousand Wires Users Everywhere
  15. 15. How Will You Fund This?
  16. 16. Kickstarter
  17. 17. Bootstrapped Startup
  18. 18. “But getting there requires, in most cases, thewillingness to make up-front personal sacrifices—serious personal sacrifices—dedicating yourselfconsistently and with discipline to the goal, forwhat can seem like a long time. And the demandsduring this time can seem unreasonable, or evenimpossible.”- Matt Henderson (ThisUX.com/Makalu Interactive)http://bit.ly/VpGhV9
  19. 19. “Climbing shows you at your most humble. Youare literally at the mercy of your elements. Butyou are also at your strongest when you get up,wind or no wind”-Jane Lee, Mt. Everest Conqueror
  20. 20. Investors
  21. 21. No Funding Necessary
  22. 22. Who Are Your Competitors?
  23. 23. What Products Do They Make
  24. 24. How Similar Are Your Concepts
  25. 25. How Big Are They?
  26. 26. Phase 2: Researchand Design
  27. 27. The Focal Problem
  28. 28. Who Else Has Noticed?
  29. 29. Who Is Your Target Audience?
  30. 30. Where will they encounter this problem?
  31. 31. Is the problem worth solving?
  32. 32. The “Design” Process
  33. 33. WireframingDashboard Sketch - Kerem Suer - Dribbble Biosensor UI - Lance Cassidy - Dribbble
  34. 34. Gray-boxinghttp://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
  35. 35. The Polished Design
  36. 36. GamificationPick a number, make it go up
  37. 37. “I believe that if you can’t explain your gamificationidea in one sentence, it’s broken.”Tadhg Kelly - Everything You’ll Ever Need To Know About Gamificationhttp://techcrunch.com/2012/11/17/everything-youll-ever-need-to-know-about-gamification/
  38. 38. Responsive Design
  39. 39. Phase 3: Front-EndDevelopment
  40. 40. “When I was your age, we wrote our HTMLand CSS by hand, from scratch... and weliked it that way!”
  41. 41. Template Creation
  42. 42. CSS Grids
  43. 43. CSS Pre-Processors
  44. 44. Interaction
  45. 45. Front-End Frameworks
  46. 46. Media Queries And Additional ContentAdjust the application based on deviceOptionally load contentMove/load content using JavaScripthttp://adactio.com/journal/5042/
  47. 47. Phase 4: API and Database
  48. 48. An AP What?Application ProgrammingInterfacehttp://api.dribbble.com/shots/21603
  49. 49. Why Bother?DRY - Don’t Repeat YourselfAll your data, available from any platformAPIs often create interest on their own
  50. 50. Database OptionsMySQLPostgreSQLMongoDBCouchDBAmazon
  51. 51. MySQL“The MySQL database has become the worldsmost popular open source database because of itshigh performance, high reliability and ease of use.It is also the database of choice for a newgeneration of applications built on the LAMP stack(Linux, Apache, MySQL, PHP / Perl / Python.)”http://www.mysql.com/why-mysql/
  52. 52. PostgreSQL“PostgreSQL is an object-relational databasemanagement system (ORDBMS) based onPOSTGRES, Version 4.2, developed at theUniversity of California at Berkeley ComputerScience Department. POSTGRES pioneered manyconcepts that only became available in somecommercial database systems much later.”http://www.postgresql.org/docs/devel/static/intro-whatis.html
  53. 53. MongoDB“MongoDB is document-oriented DBMS. Think ofMySQL but with JSON-like objects comprising thedata model, rather than RDBMS tables.”http://docs.mongodb.org/manual/faq/fundamentals/
  54. 54. CouchDB“CouchDB is a database that completely embracesthe web. Store your data with JSON documents.Access your documents with your web browser,via HTTP. Query, combine, and transform yourdocuments with JavaScript. CouchDB works wellwith modern web and mobile apps. You can evenserve web apps directly out of CouchDB.”http://couchdb.apache.org
  55. 55. Amazon
  56. 56. Phase 5: PlatformsWebiOS (iPhone/iPad/iPod)Android (phones and tablets)Windows PhonesBlackberry
  57. 57. WebC/C++/C#JAVA.NETNode.jsPerlPHPPythonRuby on Rails http://blog.famzah.net/2010/07/01/cpp-vs-python-vs-perl-vs-php-performance-benchmark/
  58. 58. WebC/C++/C#JAVA.NETNode.jsPerlPHPPythonRuby on Rails
  59. 59. Native vs Non-Native
  60. 60. PhoneGap and Titanium
  61. 61. "Given their apparent strategy of delivering app-likebehavior in mobile rather than providing quickaccess to a users friends content, the decision toswitch to native is long overdue. If they had chosento focus on providing faster access to *content*(rather than providing slick app-like behavior), theycould have stayed with standard web technologies.The goal determined the technology choice.”- Jeffrey Zeldman - Zeldman.comhttp://www.netmagazine.com/news/facebook-iphone-app-go-native-122048
  62. 62. "The way one should be handling network traffic foran iPhone (or any mobile) app is to retrieve only thedata that is unique. So, rather than sending HTML/CSS/JS down the wire to your embedded mobile app,all of that should be bundled with the app itself.”- Nathan Smith - Sonspring.comhttp://www.netmagazine.com/news/facebook-iphone-app-go-native-122048
  63. 63. Phase 6: LaunchHosting/ScalabilityDeployment/Version ControlCachingPayment ProcessingWhen to Launch
  64. 64. Hosting and Scalability“When did all these users sign up?!”
  65. 65. Deployment and Version ControlCVSSVNGitMercurial
  66. 66. Caching
  67. 67. Payment ProcessingPaypalRecurlyStripeWePayYour Bank
  68. 68. When to Launch
  69. 69. “If you aren’t ashamed of your product,you shipped to late”-Reid Hoffman - LinkedIn
  70. 70. Launch when the problem is solved, notbefore, and not after.
  71. 71. Phase 7: Post LaunchMonitoringOngoing Design Work and Improvements
  72. 72. Monitoring
  73. 73. Ongoing Design Work
  74. 74. “The most critical time for designers to be involved in adigital product is all the time, but it’s perhaps mostimportant for them to stick around after the launch,when they can see how a real user base is using it, andthen amend, refine, revise and evolve it. But it’s at justabout this time that most studios are preparing invoicesand shuffling their staff on to other clients’ projects.”-Khoi Vinh - The End of Client Serviceshttp://www.subtraction.com/2011/07/20/the-end-of-client-services

×