Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
David Brooks, profile picture
Uploaded byDavid Brooks
5,555 views

Your first web application. From Design to Launch

This document outlines the comprehensive process of building a web application, from conception and planning to launch and post-launch monitoring. Key phases include identifying the problem to solve, conducting research and design, front-end development, setting up APIs and databases, and choosing appropriate platforms. It emphasizes the importance of continuous involvement from designers to adapt the application based on user feedback after launch.

Design◦
Related topics:
Web Design and Development•
Your First Web Application, from Design to Launch
Hello! I’m David Brooks Owner of Northward Compass Designer at Artletic I write at DavidNBrooks.com @DavidNBrooks
So you want to build a (web) application…
Have you told anyone else about this plan? Because they're probably going to commit you.
Why build a web application?
Facebook Killaz
A Simple Question: “What is Your Favorite Web Application?” Gmail Github/Bitbucket Mint.com Evernote
What’s Missing? Facebook Twitter Flickr Youtube Basecamp
Successful Applications Solve a Problem. Memorable Applications Make You Love Solving That Problem.
Why a Web Application? Why Not A Mobile App? Legos versus Wrought Iron
Phase 1: Planning
The Problem to Solve is Up To You... But Make it a Good One
Solve For The Biggest Group Possible But no more
“This is cool, but I would never use this.” - Non Thousand Wires Users Everywhere
How Will You Fund This?
Kickstarter
Bootstrapped Startup
“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
“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
Investors
No Funding Necessary
Who Are Your Competitors?
What Products Do They Make
How Similar Are Your Concepts
How Big Are They?
Phase 2: Research and Design
The Focal Problem
Who Else Has Noticed?
Who Is Your Target Audience?
Where will they encounter this problem?
Is the problem worth solving?
The “Design” Process
Wireframing Dashboard Sketch - Kerem Suer - Dribbble Biosensor UI - Lance Cassidy - Dribbble
Gray-boxing http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
The Polished Design
Gamification Pick a number, make it go up
“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/
Responsive Design
Phase 3: Front-End Development
“When I was your age, we wrote our HTML and CSS by hand, from scratch... and we liked it that way!”
Template Creation
CSS Grids
CSS Pre-Processors
Interaction
Front-End Frameworks
Media Queries And Additional Content Adjust the application based on device Optionally load content Move/load content using JavaScript http://adactio.com/journal/5042/
Phase 4: API and Database
An AP What? Application Programming Interface http://api.dribbble.com/shots/21603
Why Bother? DRY - Don’t Repeat Yourself All your data, available from any platform APIs often create interest on their own
Database Options MySQL PostgreSQL MongoDB CouchDB Amazon
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/
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
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/
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
Amazon
Phase 5: Platforms Web iOS (iPhone/iPad/iPod) Android (phones and tablets) Windows Phones Blackberry
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/
Web C/C++/C# JAVA .NET Node.js Perl PHP Python Ruby on Rails
Native vs Non-Native
PhoneGap and Titanium
"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
"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
Phase 6: Launch Hosting/Scalability Deployment/Version Control Caching Payment Processing When to Launch
Hosting and Scalability “When did all these users sign up?!”
Deployment and Version Control CVS SVN Git Mercurial
Caching
Payment Processing Paypal Recurly Stripe WePay Your Bank
When to Launch
“If you aren’t ashamed of your product, you shipped to late” -Reid Hoffman - LinkedIn
Launch when the problem is solved, not before, and not after.
Phase 7: Post Launch Monitoring Ongoing Design Work and Improvements
Monitoring
Ongoing Design Work
“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