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