View
834
Download
0
Category
Preview:
DESCRIPTION
Jumpstart Your Web AppPresented by Ari Rizzitano onJuly 11th, 2012Just 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.
Citation preview
Ari Rizzitano / @arizzitanoJuly 11, 2012
Harvard Web Working Group
Jumpstart Your WebApp
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 wishexisted?
Do you know of other people thatcould benefit from it?
Is it feasible for you to organize andassemble?
•
•
•
Assemble a teamTry to work with at
least one other person
Share ideas
Delegate roles andresponsibilities
Argue!
•
•
•
•
Content PlanningWhat data are you storing?
How is it related?
Organize this data into models andviews
Start a written content plan
•••
•
Model
A structure for organizing related data
Usually corresponds to a databasetable
Can be connected to other models
Letter, Comment, User, Tag,Notification
•
•
•
•
ModelLetter: represents a user-uploaded glyph.
character: character the letterrepresents
image: stores image connected withletter
parent: original file image was croppedfrom
tags: list of tags applied by user
•
•
•
•
•
View
A template for organizing yourwebpages
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 andlink to profile, letter’s tags which link outto tag pages, previous comments, andfunctionality for favoriting andcommenting on the letter
•
Wireframing
Extension of content plan
Visual organization of content
Specify where content goes in yourviews.
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, easilychangeable
•
Wireframe Don’ts
Developed design, pixel sizes, specificcopy & images
•
Starting work
Aim for a particular goal: a minimumviable product, or alpha version.
Try to hit it by a specific date.
Set smaller personal milestones to helpbreak up the work.
•
•
•
Starting work
Big stuff first, small stuff later.
Communicate and collaborate often.
MVC framework allows front-end andback-end work to commencesimultaneously
•
•
•
Feature Creep
“Hey, wouldn’t it be cool if...”
“This competitor supports _____, weshould 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 beforeinstalling the fixtures.
•
•
•
•
Design & UX
An application presents an unfamiliarexperience and functionality
Serve your users, not yourself
User experience should be seamlessand intuitive
•
•
•
Design & UXUse familiar elements•
Design & UX
Minimize excess verbiage•
Design & UXHave personality, but don’t get too
gimmicky•
Design & UX
Don’t forget thesauce
•
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 aboutspecifics (AJAX, auth, etc) later
Build first, optimize later.
•
••
•
Back-End Dev
Set up a staging or production serverearly on.
Get a decent hosting plan
Platform vs. infrastructure
•
•
•
Release Cycles
Iterative (agile) development
Thoroughly test the site
Squash bugs
Consider which ideas are worthimplementing 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, landingpage, email list, stickers!
Seed your app with plenty of greatcontent
•
•
•
Release Cycles
It doesn’t have to be 100% perfect toship!
•
Post-Release
Keep improving on it
Think about future possibilities:monetizing, collaborating, or expanding
Once you make one, future apps aremuch easier!
••
•
Recommended