1. Your First Web
Application, from Design
to Launch

2. Hello! I’m David Brooks
Owner of Northward Compass
Designer at Artletic
I write at DavidNBrooks.com
@DavidNBrooks

3. So you want to build a
(web) application…

4. Have you told anyone else
about this plan? Because
they're probably going to
commit you.

5. Why build a web
application?

6. Facebook Killaz

7. A Simple Question: “What is
Your Favorite Web
Application?”
Gmail
Github/Bitbucket
Mint.com
Evernote

8. What’s Missing?
Facebook
Twitter
Flickr
Youtube
Basecamp

10. Successful Applications
Solve a Problem.
Memorable Applications Make You Love Solving
That Problem.

12. Why a Web Application?
Why Not A Mobile App?
Legos versus Wrought Iron

13. Phase 1: Planning

14. The Problem to Solve is Up
To You...
But Make it a Good One

15. Solve For The Biggest
Group Possible
But no more

16. “This is cool,
but I would
never use this.”
- Non Thousand Wires Users Everywhere

17. How Will You Fund This?

18. Kickstarter

20. Bootstrapped Startup

21. “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

22. “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

23. Investors

25. No Funding Necessary

26. Who Are Your Competitors?

27. What Products Do They Make

28. How Similar Are Your Concepts

29. How Big Are They?

31. Phase 2: Research
and Design

32. The Focal Problem

33. Who Else Has Noticed?

35. Who Is Your Target Audience?

38. Where will they encounter this problem?

40. Is the problem worth solving?

41. The “Design” Process

42. Wireframing
Dashboard Sketch - Kerem Suer - Dribbble Biosensor UI - Lance Cassidy - Dribbble

43. Gray-boxing
http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php

44. The Polished Design

46. Gamification
Pick a number, make it go up

48. “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/

49. Responsive Design

50. Phase 3: Front-End
Development

51. “When I was your age, we wrote our HTML
and CSS by hand, from scratch... and we
liked it that way!”

52. Template Creation

53. CSS Grids

54. CSS Pre-Processors

55. Interaction

56. Front-End Frameworks

57. Media Queries And Additional Content
Adjust the application based on device
Optionally load content
Move/load content using JavaScript
http://adactio.com/journal/5042/

58. Phase 4: API and Database

59. An AP What?
Application Programming
Interface
http://api.dribbble.com/shots/21603

60. Why Bother?
DRY - Don’t Repeat Yourself
All your data, available from any platform
APIs often create interest on their own

61. Database Options
MySQL
PostgreSQL
MongoDB
CouchDB
Amazon

62. 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/

63. 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

64. 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/

65. 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

66. Amazon

67. Phase 5: Platforms
Web
iOS (iPhone/iPad/iPod)
Android (phones and tablets)
Windows Phones
Blackberry

68. 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/

69. Web
C/C++/C#
JAVA
.NET
Node.js
Perl
PHP
Python
Ruby on Rails

75. Native vs Non-Native

76. PhoneGap and Titanium

77. "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

78. "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

79. Phase 6: Launch
Hosting/Scalability
Deployment/Version Control
Caching
Payment Processing
When to Launch

80. Hosting and Scalability
“When did all these users sign up?!”

81. Deployment and Version Control
CVS
SVN
Git
Mercurial

82. Caching

84. Payment Processing
Paypal
Recurly
Stripe
WePay
Your Bank

86. When to Launch

87. “If you aren’t ashamed of your product,
you shipped to late”
-Reid Hoffman - LinkedIn

88. Launch when the problem is solved, not
before, and not after.

89. Phase 7: Post Launch
Monitoring
Ongoing Design Work and Improvements

90. Monitoring

92. Ongoing Design Work

93. “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