• Like
Jumpstart Your Web App
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Jumpstart Your Web App …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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!