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    cou...
Assemble a team      •     Try to work with at          least one other person      •    Share ideas      •     Delegate r...
Content Planning•    What data are you storing?•    How is it related?•     Organize this data into models and    views•  ...
Model•    A structure for organizing related data•     Usually corresponds to a database    table•    Can be connected to ...
Model• Letter: represents a user-uploaded glyph. • character: character the letter     represents •      image: stores ima...
View•    A template for organizing your    webpages•    Displays data from your models•     Primarily concerned with dynam...
View•      Letter detail page: show letter’s image,    thumbnail of parent, creator’s name and    link to profile, letter’...
Wireframing•    Extension of content plan•    Visual organization of content•     Specify where content goes in your    vi...
Wireframing•     Involve everyone!•     Reference your models•     NO specific content, copy, buttons,    shapes, sizes, i...
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 specif...
Starting work•    Big stuff first, small stuff later.•    Communicate and collaborate often.•     MVC framework allows fro...
Feature Creep•    “Hey, wouldn’t it be cool if...”•     “This competitor supports _____, we    should too.”•    It’s not a...
Feature Creep•    Perfect is the enemy of done.•    Stick to your original plan.•    File requests and bugs for later.•   ...
Design & UX•     An application presents an unfamiliar    experience and functionality•    Serve your users, not yourself•...
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 ...
Back-End Dev•    Frameworks: Django, Rails, CakePHP,    CodeIgniter, Node.js/Backbone.js•     Work locally and use version...
Back-End Dev•     Set up a staging or production server    early on.•    Get a decent hosting plan•    Platform vs. infras...
Release Cycles•    Iterative (agile) development•    Thoroughly test the site•    Squash bugs•     Consider which ideas ar...
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!•     S...
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•   ...
Upcoming SlideShare
Loading in …5
×

Jumpstart Your Web App

1,007 views
953 views

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,007
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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. glyphosaurus.com
  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!

×