Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jumpstart Your Web App


Published on

Jumpstart Your Web App
Presented by Ari Rizzitano on
July 11th, 2012

Just about everyone has an idea for a web app, whether you want to implement a business tool, found a startup, or just host a fun project. Learn how to tackle design and technical challenges, take advantage of best practices, power through obstacles, and grow your idea into a successful application.

Published in: Technology, Design
  • Be the first to comment

Jumpstart Your Web App

  1. 1. Jumpstart Your Web App Ari Rizzitano / @arizzitano July 11, 2012 Harvard Web Working Group
  2. 2. Overview• Preparation• Content planning• Wireframing• Design, UX, & front-end dev• Back-end dev• Release cycles
  3. 3.
  4. 4. What’s a Web App?
  5. 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. 6. Assemble a team • Try to work with at least one other person • Share ideas • Delegate roles and responsibilities • Argue!
  7. 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. 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. 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. 10. View• A template for organizing your webpages• Displays data from your models• Primarily concerned with dynamic data - static content comes afterward.
  11. 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. 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. 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. 14. Wireframe Dos• Generic, plain, modular, easily changeable
  15. 15. Wireframe Don’ts• Developed design, pixel sizes, specific copy & images
  16. 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. 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. 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. 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. 20. Design & UX• An application presents an unfamiliar experience and functionality• Serve your users, not yourself• User experience should be seamless and intuitive
  21. 21. Design & UX• Use familiar elements
  22. 22. Design & UX• Minimize excess verbiage
  23. 23. Design & UX• Have personality, but don’t get too gimmicky
  24. 24. Design & UX• Don’t forget the sauce
  25. 25. Front-End Dev• Get designs into the browser ASAP• AJAX is a privilege, not a right• Keep mobile & older browsers in mind
  26. 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. 27. Back-End Dev• Set up a staging or production server early on.• Get a decent hosting plan• Platform vs. infrastructure
  28. 28. Release Cycles• Iterative (agile) development• Thoroughly test the site• Squash bugs• Consider which ideas are worth implementing and do it
  29. 29. Release Cycles• Build a beta user base• Release to a test group• Take feedback on functionality & UX
  30. 30. Release Cycles• Address beta feedback• Build buzz: Twitter, Facebook, landing page, email list, stickers!• Seed your app with plenty of great content
  31. 31. Release Cycles• It doesn’t have to be 100% perfect to ship!
  32. 32. Post-Release• Keep improving on it• Think about future possibilities: monetizing, collaborating, or expanding• Once you make one, future apps are much easier!