SlideShare a Scribd company logo

Jumpstart Your Web App

•
•
Harvard Web Working Group
Harvard Web Working Group

This document provides guidance on developing a web application. It discusses preparing by planning content and wireframing, developing the front-end using frameworks, working on the back-end, and releasing in iterative cycles. The key steps are to start with the problem, assemble a team, plan models and views, create wireframes without design details, develop the front-end and back-end simultaneously, release iteratively to test groups, and continue improving post-release.

Related slideshows

Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
 
Drupal content editor flexibility
Drupal content editor flexibilityDrupal content editor flexibility
Drupal content editor flexibility
 
Edy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson Notes on SF HTML5 Dev ConfEdy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson Notes on SF HTML5 Dev Conf
 
1 of 32
Download to read offline
Jumpstart Your Web App Ari Rizzitano / @arizzitano July 11, 2012 Harvard Web Working Group
Overview • Preparation • Content planning • Wireframing • Design, UX, & front-end dev • Back-end dev • Release cycles
glyphosaurus.com
What’s a Web App?
Start with a problem. • Is there a website or service you wish existed? • Do you know of other people that could benefit from it? • Is it feasible for you to organize and assemble?
Assemble a team • Try to work with at least one other person • Share ideas • Delegate roles and responsibilities • Argue!
Content Planning • What data are you storing? • How is it related? • Organize this data into models and views • Start a written content plan
Model • A structure for organizing related data • Usually corresponds to a database table • Can be connected to other models • Letter, Comment, User, Tag, Notification
Model • Letter: represents a user-uploaded glyph. • character: character the letter represents • image: stores image connected with letter • parent: original file image was cropped from
View • A template for organizing your webpages • Displays data from your models • Primarily concerned with dynamic data - static content comes afterward.
View • Letter detail page: show letter’s image, thumbnail of parent, creator’s name and link to profile, letter’s tags which link out to tag pages, previous comments, and functionality for favoriting and commenting on the letter
Wireframing • Extension of content plan • Visual organization of content • Specify where content goes in your views. • Starting point for both design and dev
Wireframing • Involve everyone! • Reference your models • NO specific content, copy, buttons, shapes, sizes, images, colors, etc. • Digital tools (Balsamiq, Mockingbird, Illustrator) vs physical (whiteboards, post- it notes)
Wireframe Dos • Generic, plain, modular, easily changeable
Wireframe Don’ts • Developed design, pixel sizes, specific copy & images
Starting work • Aim for a particular goal: a minimum viable product, or alpha version. • Try to hit it by a specific date. • Set smaller personal milestones to help break up the work.
Starting work • Big stuff first, small stuff later. • Communicate and collaborate often. • MVC framework allows front-end and back-end work to commence simultaneously
Feature Creep • “Hey, wouldn’t it be cool if...” • “This competitor supports _____, we should too.” • It’s not a bug, it’s a feature request!
Feature Creep • Perfect is the enemy of done. • Stick to your original plan. • File requests and bugs for later. • Finish building the house before installing the fixtures.
Design & UX • An application presents an unfamiliar experience and functionality • Serve your users, not yourself • User experience should be seamless and intuitive
Design & UX • Use familiar elements
Design & UX • Minimize excess verbiage
Design & UX • Have personality, but don’t get too gimmicky
Design & UX • Don’t forget the sauce
Front-End Dev • Get designs into the browser ASAP • AJAX is a privilege, not a right • Keep mobile & older browsers in mind
Back-End Dev • Frameworks: Django, Rails, CakePHP, CodeIgniter, Node.js/Backbone.js • Work locally and use version control • Finish the essentials first, worry about specifics (AJAX, auth, etc) later • Build first, optimize later.
Back-End Dev • Set up a staging or production server early on. • Get a decent hosting plan • Platform vs. infrastructure
Release Cycles • Iterative (agile) development • Thoroughly test the site • Squash bugs • Consider which ideas are worth implementing and do it
Release Cycles • Build a beta user base • Release to a test group • Take feedback on functionality & UX
Release Cycles • Address beta feedback • Build buzz: Twitter, Facebook, landing page, email list, stickers! • Seed your app with plenty of great content
Release Cycles • It doesn’t have to be 100% perfect to ship!
Post-Release • Keep improving on it • Think about future possibilities: monetizing, collaborating, or expanding • Once you make one, future apps are much easier!

More Related Content

Jumpstart Your Web App

  • 1. Jumpstart Your Web App Ari Rizzitano / @arizzitano July 11, 2012 Harvard Web Working Group
  • 2. Overview • Preparation • Content planning • Wireframing • Design, UX, & front-end dev • Back-end dev • Release cycles
  • 5. Start with a problem. • Is there a website or service you wish existed? • Do you know of other people that could benefit from it? • Is it feasible for you to organize and assemble?
  • 6. Assemble a team • Try to work with at least one other person • Share ideas • Delegate roles and responsibilities • Argue!
  • 7. Content Planning • What data are you storing? • How is it related? • Organize this data into models and views • Start a written content plan
  • 8. Model • A structure for organizing related data • Usually corresponds to a database table • Can be connected to other models • Letter, Comment, User, Tag, Notification
  • 9. Model • Letter: represents a user-uploaded glyph. • character: character the letter represents • image: stores image connected with letter • parent: original file image was cropped from
  • 10. View • A template for organizing your webpages • Displays data from your models • Primarily concerned with dynamic data - static content comes afterward.
  • 11. View • Letter detail page: show letter’s image, thumbnail of parent, creator’s name and link to profile, letter’s tags which link out to tag pages, previous comments, and functionality for favoriting and commenting on the letter
  • 12. Wireframing • Extension of content plan • Visual organization of content • Specify where content goes in your views. • Starting point for both design and dev
  • 13. Wireframing • Involve everyone! • Reference your models • NO specific content, copy, buttons, shapes, sizes, images, colors, etc. • Digital tools (Balsamiq, Mockingbird, Illustrator) vs physical (whiteboards, post- it notes)
  • 14. Wireframe Dos • Generic, plain, modular, easily changeable
  • 15. Wireframe Don’ts • Developed design, pixel sizes, specific copy & images
  • 16. Starting work • Aim for a particular goal: a minimum viable product, or alpha version. • Try to hit it by a specific date. • Set smaller personal milestones to help break up the work.
  • 17. Starting work • Big stuff first, small stuff later. • Communicate and collaborate often. • MVC framework allows front-end and back-end work to commence simultaneously
  • 18. Feature Creep • “Hey, wouldn’t it be cool if...” • “This competitor supports _____, we should too.” • It’s not a bug, it’s a feature request!
  • 19. Feature Creep • Perfect is the enemy of done. • Stick to your original plan. • File requests and bugs for later. • Finish building the house before installing the fixtures.
  • 20. Design & UX • An application presents an unfamiliar experience and functionality • Serve your users, not yourself • User experience should be seamless and intuitive
  • 21. Design & UX • Use familiar elements
  • 22. Design & UX • Minimize excess verbiage
  • 23. Design & UX • Have personality, but don’t get too gimmicky
  • 24. Design & UX • Don’t forget the sauce
  • 25. Front-End Dev • Get designs into the browser ASAP • AJAX is a privilege, not a right • Keep mobile & older browsers in mind
  • 26. Back-End Dev • Frameworks: Django, Rails, CakePHP, CodeIgniter, Node.js/Backbone.js • Work locally and use version control • Finish the essentials first, worry about specifics (AJAX, auth, etc) later • Build first, optimize later.
  • 27. Back-End Dev • Set up a staging or production server early on. • Get a decent hosting plan • Platform vs. infrastructure
  • 28. Release Cycles • Iterative (agile) development • Thoroughly test the site • Squash bugs • Consider which ideas are worth implementing and do it
  • 29. Release Cycles • Build a beta user base • Release to a test group • Take feedback on functionality & UX
  • 30. Release Cycles • Address beta feedback • Build buzz: Twitter, Facebook, landing page, email list, stickers! • Seed your app with plenty of great content
  • 31. Release Cycles • It doesn’t have to be 100% perfect to ship!
  • 32. Post-Release • Keep improving on it • Think about future possibilities: monetizing, collaborating, or expanding • Once you make one, future apps are much easier!