In this assignment, we evaluate whether we are straying from the high-level vision of our studio brief. We recognize how proper planning helps us prioritize tasks and clarify the roles of team members, keeping us focused and preventing “scope creep.” We learn to classify essential vs. non-essential functionality. We balance the low-cost fidelity of digital wireframes/mockups against time constraints to concretize our idea. We develop a feel for a “flowing” interaction using an html skeleton. Lastly, we lay the foundation and make our first online deployment.
The following rubric items are independently assessed. In general, evaluation works such that if the student/team meets, for instance, 9 out of 10 rubric items, then they have earned a grade of 90%. The assignment will not be graded unless it is submitted on a single, well-formatted, and easily readable pdf.
This assignment requires one submission per: team
Revisit the Brief
Write a few detailed sentences identifying your point of view, user base, and core interaction
Write a few detailed sentences how your point of view, user base, and core interaction align with your studio brief
Write a few detailed sentences justifying whether or not you will change your point of view, user base, and/or core interaction, and if so what changes will you make?
Development Plan
Create a column on a spreadsheet listing approximately 50-100 actionable steps necessary to complete the entirety of your app development, with future assignments as a rough guide
In four adjacent columns, assign realistic time estimates, a deadline, an “owner” responsible for completing each task, and identify tasks involving essential vs. non-essential functionality by assigning “high, medium, low” priority
Internally verify the prioritization is accurate, write justifications in a comments column, if needed, and identify potential obstacles or outside constraints, e.g. midterms, in the same column
Submit a clickable or easily typable link to, or a readable and complete snapshot of, your plan. Make sure the grader has access.
Wireframes
Create a digital, non-functional wireframe/mockup of your home screen (no login screens)
Visualize all potential interactions via content/buttons/text boxes/functions for your home screen wireframe
Constrain time spent on home screen wireframe by leaving out minor details and styling
Create a digital, non-functional wireframe/mockup of your next highest priority screen (no login screens)
Visualize all potential interactions via content/buttons/text boxes/functions for your second wireframe
Constrain time spent on your second wireframe by leaving out minor details and styling
Submit a readable and complete snapshot of both wireframes
Skeleton
Establish filesharing and source control architecture via github and submit a clickable or easily typed link to your project repository. Make sure the grader has access.
Submit a clickable or easily typed link to a navigational skeleton mapping the interaction of your app, comprised of html links to different placeholder html pages
Create a “flowing” sense to your skeleton by providing escape routes and removing dead ends
Screens
Based on the wireframe, use the content in the labs to code up a semi-functional home screen, linking to the html skeleton where applicable
Include all content/buttons/text boxes/functions sketched out in the home screen wireframe
Based on the wireframe, use the content in the labs to code up a semi-functional second screen, linking to the html skeleton where applicable
Include all content/buttons/text boxes/functions sketched out in the second screen wireframe
Submit a clickable or easily typed link to your online deployed home screen and second screen
Examples
Here are some examples from prior years. Note assignments change from year to year, so use these examples as a reference, see where they succeed/breakdown, and make sure your final submissions adhere to the rubric for this year.