Your SlideShare is downloading. ×
0
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Your first web application. From Design to Launch
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Your first web application. From Design to Launch

1,774

Published on

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

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,774
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Your First WebApplication, from Designto Launch
  • 2. Hello! I’m David BrooksOwner of Northward CompassDesigner at ArtleticI write at DavidNBrooks.com@DavidNBrooks
  • 3. So you want to build a(web) application…
  • 4. Have you told anyone elseabout this plan? Becausetheyre probably going tocommit you.
  • 5. Why build a webapplication?
  • 6. Facebook Killaz
  • 7. A Simple Question: “What isYour Favorite WebApplication?”GmailGithub/BitbucketMint.comEvernote
  • 8. What’s Missing?FacebookTwitterFlickrYoutubeBasecamp
  • 9. Successful ApplicationsSolve a Problem.Memorable Applications Make You Love SolvingThat Problem.
  • 10. Why a Web Application?Why Not A Mobile App?Legos versus Wrought Iron
  • 11. Phase 1: Planning
  • 12. The Problem to Solve is UpTo You...But Make it a Good One
  • 13. Solve For The BiggestGroup PossibleBut no more
  • 14. “This is cool,but I wouldnever use this.”- Non Thousand Wires Users Everywhere
  • 15. How Will You Fund This?
  • 16. Kickstarter
  • 17. Bootstrapped Startup
  • 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. “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. Investors
  • 21. No Funding Necessary
  • 22. Who Are Your Competitors?
  • 23. What Products Do They Make
  • 24. How Similar Are Your Concepts
  • 25. How Big Are They?
  • 26. Phase 2: Researchand Design
  • 27. The Focal Problem
  • 28. Who Else Has Noticed?
  • 29. Who Is Your Target Audience?
  • 30. Where will they encounter this problem?
  • 31. Is the problem worth solving?
  • 32. The “Design” Process
  • 33. WireframingDashboard Sketch - Kerem Suer - Dribbble Biosensor UI - Lance Cassidy - Dribbble
  • 34. Gray-boxinghttp://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
  • 35. The Polished Design
  • 36. GamificationPick a number, make it go up
  • 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. Responsive Design
  • 39. Phase 3: Front-EndDevelopment
  • 40. “When I was your age, we wrote our HTMLand CSS by hand, from scratch... and weliked it that way!”
  • 41. Template Creation
  • 42. CSS Grids
  • 43. CSS Pre-Processors
  • 44. Interaction
  • 45. Front-End Frameworks
  • 46. Media Queries And Additional ContentAdjust the application based on deviceOptionally load contentMove/load content using JavaScripthttp://adactio.com/journal/5042/
  • 47. Phase 4: API and Database
  • 48. An AP What?Application ProgrammingInterfacehttp://api.dribbble.com/shots/21603
  • 49. Why Bother?DRY - Don’t Repeat YourselfAll your data, available from any platformAPIs often create interest on their own
  • 50. Database OptionsMySQLPostgreSQLMongoDBCouchDBAmazon
  • 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. 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. 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. 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. Amazon
  • 56. Phase 5: PlatformsWebiOS (iPhone/iPad/iPod)Android (phones and tablets)Windows PhonesBlackberry
  • 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. WebC/C++/C#JAVA.NETNode.jsPerlPHPPythonRuby on Rails
  • 59. Native vs Non-Native
  • 60. PhoneGap and Titanium
  • 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. "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. Phase 6: LaunchHosting/ScalabilityDeployment/Version ControlCachingPayment ProcessingWhen to Launch
  • 64. Hosting and Scalability“When did all these users sign up?!”
  • 65. Deployment and Version ControlCVSSVNGitMercurial
  • 66. Caching
  • 67. Payment ProcessingPaypalRecurlyStripeWePayYour Bank
  • 68. When to Launch
  • 69. “If you aren’t ashamed of your product,you shipped to late”-Reid Hoffman - LinkedIn
  • 70. Launch when the problem is solved, notbefore, and not after.
  • 71. Phase 7: Post LaunchMonitoringOngoing Design Work and Improvements
  • 72. Monitoring
  • 73. Ongoing Design Work
  • 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

×