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.

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

3. glyphosaurus.com

4. What’s a Web App?

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!