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

9.
Successful Applications
Solve a Problem.
Memorable Applications Make You Love Solving
That 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 Up
To You...
But Make it a Good One

13.
Solve For The Biggest
Group Possible
But no more

14.
“This is cool,
but I would
never 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, 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.
“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.
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: Research
and 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.
Wireframing
Dashboard Sketch - Kerem Suer - Dribbble Biosensor UI - Lance Cassidy - Dribbble

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

35.
The Polished Design

36.
Gamification
Pick a number, make it go up

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.
Responsive Design

39.
Phase 3: Front-End
Development

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

41.
Template Creation

42.
CSS Grids

43.
CSS Pre-Processors

44.
Interaction

45.
Front-End Frameworks

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.
Phase 4: API and Database

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

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

50.
Database Options
MySQL
PostgreSQL
MongoDB
CouchDB
Amazon

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

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

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.
Web
C/C++/C#
JAVA
.NET
Node.js
Perl
PHP
Python
Ruby on Rails

59.
Native vs Non-Native

60.
PhoneGap and Titanium

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.
"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.
Phase 6: Launch
Hosting/Scalability
Deployment/Version Control
Caching
Payment Processing
When to Launch

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

65.
Deployment and Version Control
CVS
SVN
Git
Mercurial

66.
Caching

67.
Payment Processing
Paypal
Recurly
Stripe
WePay
Your 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, not
before, and not after.

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

72.
Monitoring

73.
Ongoing Design Work

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