A5: Skeleton and a plan

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

Optional project starter code (same tech stack as labs): https://github.com/DesignAtLarge/ixd-skeleton

Evaluation Rubric

Students earn 1/2 point for each binary criterion met.

    Revisit the Brief
  1. Write a few detailed sentences identifying your point of view, user base, and core interaction
  2. Write a few detailed sentences how your point of view, user base, and core interaction align with your studio brief
  3. 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?

    4. Development Plan
  4. 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.
  5. 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
  6. 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
  7. Submit a clickable or easily typable link to, or a readable and complete snapshot of, your plan. Make sure the grader has access

    8. Wireframes (Can have color)
  8. Create a digital, non-functional wireframe/mockup of your home screen (no login screens)
  9. Visualize all potential interactions via content/buttons/text boxes/functions for your home screen wireframe
  10. Constrain time spent on home screen wireframe by leaving out minor details and styling
  11. Create a digital, non-functional wireframe/mockup of your next highest priority screen (no login screens)
  12. Visualize all potential interactions via content/buttons/text boxes/functions for your second wireframe
  13. Constrain time spent on your second wireframe by leaving out minor details and styling
  14. Content of both wireframes should be specific and not placeholders (eg. Lorem Ipsum)
  15. Submit a readable and complete snapshot of both wireframes

    16. Screens (no color)
  16. Screens are HTML. The reason to omit color at this stage is to use the other visual tools available to you: scale, relationships, spacing, layout, etc. Once you get those right, then you can add color.
  17. 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 to this link
  18. Based on the wireframe, use the content in the labs to code up a semi-functional home screen
  19. Include all content/buttons/text boxes/functions sketched out in the home screen wireframe
  20. Link all interactive functions on the home screen to placeholder html pages where applicable
  21. Create a “flowing” sense by providing escape routes and removing dead ends
  22. 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
  23. Include all content/buttons/text boxes/functions sketched out in the second screen wireframe
  24. Link all interactive functions on the second screen to placeholder html pages where applicable
  25. 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.

Development plans: (1) (2) (3) (4)

Here is a cool video of the dynamic nature of implementation plans throughout the project.

Wireframe Examples: (1) (2) (3)

Skeleton Example: (1)