Successfully reported this slideshow.
Your SlideShare is downloading. ×

Your first web application. From Design to Launch

Your first web application. From Design to Launch

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.

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.

More Related Content

Your first web application. From Design to Launch

  1. 1. Your First Web Application, from Design to Launch
  2. 2. Hello! I’m David Brooks Owner of Northward Compass Designer at Artletic I write at DavidNBrooks.com @DavidNBrooks
  3. 3. So you want to build a (web) application…
  4. 4. Have you told anyone else about this plan? Because they're probably going to commit you.
  5. 5. Why build a web application?
  6. 6. Facebook Killaz
  7. 7. A Simple Question: “What is Your Favorite Web Application?” Gmail Github/Bitbucket Mint.com Evernote
  8. 8. What’s Missing? Facebook Twitter Flickr Youtube Basecamp
  9. 9. Successful Applications Solve a Problem. Memorable Applications Make You Love Solving That 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 Up To You... But Make it a Good One
  13. 13. Solve For The Biggest Group Possible But no more
  14. 14. “This is cool, but I would never 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, the willingness to make up-front personal sacrifices— serious personal sacrifices—dedicating yourself consistently and with discipline to the goal, for what can seem like a long time. And the demands during this time can seem unreasonable, or even impossible.” - Matt Henderson (ThisUX.com/Makalu Interactive) http://bit.ly/VpGhV9
  19. 19. “Climbing shows you at your most humble. You are literally at the mercy of your elements. But you 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: Research and 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. Wireframing Dashboard Sketch - Kerem Suer - Dribbble Biosensor UI - Lance Cassidy - Dribbble
  34. 34. Gray-boxing http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
  35. 35. The Polished Design
  36. 36. Gamification Pick a number, make it go up
  37. 37. “I believe that if you can’t explain your gamification idea in one sentence, it’s broken.” Tadhg Kelly - Everything You’ll Ever Need To Know About Gamification http://techcrunch.com/2012/11/17/everything-youll-ever-need-to-know-about-gamification/
  38. 38. Responsive Design
  39. 39. Phase 3: Front-End Development
  40. 40. “When I was your age, we wrote our HTML and CSS by hand, from scratch... and we liked 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 Content Adjust the application based on device Optionally load content Move/load content using JavaScript http://adactio.com/journal/5042/
  47. 47. Phase 4: API and Database
  48. 48. An AP What? Application Programming Interface http://api.dribbble.com/shots/21603
  49. 49. Why Bother? DRY - Don’t Repeat Yourself All your data, available from any platform APIs often create interest on their own
  50. 50. Database Options MySQL PostgreSQL MongoDB CouchDB Amazon
  51. 51. MySQL “The MySQL database has become the world's most popular open source database because of its high performance, high reliability and ease of use. It is also the database of choice for a new generation 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 database management system (ORDBMS) based on POSTGRES, Version 4.2, developed at the University of California at Berkeley Computer Science Department. POSTGRES pioneered many concepts that only became available in some commercial database systems much later.” http://www.postgresql.org/docs/devel/static/intro-whatis.html
  53. 53. MongoDB “MongoDB is document-oriented DBMS. Think of MySQL but with JSON-like objects comprising the data model, rather than RDBMS tables.” http://docs.mongodb.org/manual/faq/fundamentals/
  54. 54. CouchDB “CouchDB is a database that completely embraces the web. Store your data with JSON documents. Access your documents with your web browser, via HTTP. Query, combine, and transform your documents with JavaScript. CouchDB works well with modern web and mobile apps. You can even serve web apps directly out of CouchDB.” http://couchdb.apache.org
  55. 55. Amazon
  56. 56. Phase 5: Platforms Web iOS (iPhone/iPad/iPod) Android (phones and tablets) Windows Phones Blackberry
  57. 57. Web C/C++/C# JAVA .NET Node.js Perl PHP Python Ruby on Rails http://blog.famzah.net/2010/07/01/cpp-vs-python-vs-perl-vs-php-performance-benchmark/
  58. 58. Web C/C++/C# JAVA .NET Node.js Perl PHP Python Ruby on Rails
  59. 59. Native vs Non-Native
  60. 60. PhoneGap and Titanium
  61. 61. "Given their apparent strategy of delivering app-like behavior in mobile rather than providing quick access to a user's friends' content, the decision to switch to native is long overdue. If they had chosen to focus on providing faster access to *content* (rather than providing slick app-like behavior), they could have stayed with standard web technologies. The goal determined the technology choice.” - Jeffrey Zeldman - Zeldman.com http://www.netmagazine.com/news/facebook-iphone-app-go-native-122048
  62. 62. "The way one should be handling network traffic for an iPhone (or any mobile) app is to retrieve only the data 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.com http://www.netmagazine.com/news/facebook-iphone-app-go-native-122048
  63. 63. Phase 6: Launch Hosting/Scalability Deployment/Version Control Caching Payment Processing When to Launch
  64. 64. Hosting and Scalability “When did all these users sign up?!”
  65. 65. Deployment and Version Control CVS SVN Git Mercurial
  66. 66. Caching
  67. 67. Payment Processing Paypal Recurly Stripe WePay Your 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, not before, and not after.
  71. 71. Phase 7: Post Launch Monitoring Ongoing Design Work and Improvements
  72. 72. Monitoring
  73. 73. Ongoing Design Work
  74. 74. “The most critical time for designers to be involved in a digital product is all the time, but it’s perhaps most important for them to stick around after the launch, when they can see how a real user base is using it, and then amend, refine, revise and evolve it. But it’s at just about this time that most studios are preparing invoices and shuffling their staff on to other clients’ projects.” -Khoi Vinh - The End of Client Services http://www.subtraction.com/2011/07/20/the-end-of-client-services

×