Skip to content

Latest commit

 

History

History
121 lines (63 loc) · 6.97 KB

wireframes.md

File metadata and controls

121 lines (63 loc) · 6.97 KB

Wireframes, UML

The goal of this assignment is

(1) to outline how your user will interact with your app by detailing the app flow using wireframes, and

(2) to document the technical design of your project by creating CRC or UML diagrams.

This assignment aims to help you create visualizations that allow you to show an overview of your project, and to get you started thinking about the data that you will be collecting and/or storing.

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. (source: https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 (Links to an external site.)Links to an external site.)

The UML diagrams allow you to create a high-level description of your application. Class diagrams, in particular, help with visualizing "the classes in a system, attributes, and operations of each class and the relationship between each class." (source: http://creately.com/blog/diagrams/uml-diagram-types-examples/ (Links to an external site.)Links to an external site.)

Wireframes

There are multiple free tools for creating wire frames available on the web that let you simulate pressing buttons and moving between screens (a list can be found hereLinks to an external site. and here (Links to an external site.)Links to an external site.; but there are many out there).

Be aware that these tools may come with restrictions for free accounts on the number of users on a project, etc., in addition to a learning curve if you haven't used similar services before. If you plan to try a wire framing tool out, give your team ample time to learn your way around the tool.

A simpler (and free) method is to first draw screens using paper and then convert them into a digital version using a word-processing or presentation-creation application, Photoshop, GIMP, or another art program, and create a flow-chart from them. Remember: whether you use a dedicated wire frame tool or not, you must create a flow-chart in your document that demonstrates how a user moves between screens in the app.

We expect you will develop a wire frame that is very simple. It will probably be (1) black and white and (2) composed only of rectangles and text. The example below is much more detailed than we expect you will develop, but shows you how these flowcharts might help communicate the front-end design of the applications. If you have questions please speak with course staff.

Flowchart of wire frames example from Kick Punch labs.

Here's another example that shows the app flow:

CRC / UML

CRC cards are Class-Responsibility-Collaboration cards and present an alternative to UML diagrams. This linkLinks to an external site. has great resources and examples on the basics of CRC cards.

We would like you to create a CRC card for each of the classes that you have created and each of the classes you plan to have for your MVP. Although you may not have all of your features completely figured out, you should have a pretty good idea of what classes you will need and how they will work within the larger scope of your application. We understand that these classes will probably change as the semester progresses.

Each card should be formatted as follows (see the examples below):

  • Split each card into three sections.
  • The top section should include the class name.
  • The left section should include the all of the different data that the class should contain, as well as the functionality that the class needs.
  • The right section should include the other classes that this class needs to know about.

As you write your CRC cards, look out for cards that seem to be bloated (if one class is doing a ton of stuff, it is usually a sign that it should be split into different classes).

You will be graded on the formatting of your cards (this should be free points if you follow the 4 bullet points above), the content of your classes, and the completeness of your cards. We should be able to get a rough idea of how your application will function just by seeing the interaction of your classes.

Note: As an alternative to the cards as formatted above, you can use submit a UML class diagram. There tend to be more online tools for diagramming UML classes; for example, see one tool hereLinks to an external site.. You do not have to present a full-blown UML class diagram. You can leave off any "non-meaningful" methods (e.g., getters and setters). Just make sure all of the required information (name, responsibilities, relationships) is represented in your diagram.

HereLinks to an external site. is an example set of cards:

CRC example.

and here (Links to an external site.)Links to an external site. is an an example UML class diagram:

Optional: Extra credit

If your team would like to learn about and get practice using different UML diagrams, you are free to do so. (Note that the way the scores work out, you can also substitute the diagram of your choice for the requested CRC / UML Class diagram.)

Template

[Your document should be approximately 4 pages.]

Project:

Client:

Development Team: (PM), , …

Wireframes

<Flowchart showing how a user can move between screens in your app (ie. "if I press this button, what happens in the app?").>

CRC / UML

<CRC or class diagram for each of the classes you expect to have in your project, and how they relate to one another.>

<Optional: Extra credit>

<An additional UML diagram (make sure you include its name, and if you used any references, list them as well).> Rubric

An approximate breakdown is as follows.

  • Wireframes [7 pts] 
    •   Purpose of each screen is clear [2 pts]

    •   Relationship between screens communicates app flow [2 pts]

    •   Wireframes cover MVP [2 pt]

    •   Formatting [1 pt]
  • CRC / UML [7 pts] 
    •   Purpose of each class is clear [2 pts]

    •   Relationship between classes communicates dependencies [2 pts]

    •   Diagrams cover MVP [2 pt]

    •   Formatting [1 pt]
  • Optional: Extra credit [7 pts] 
    •   Purpose of the diagram is clear

    •   Diagram(s) cover MVP

    •   Formatting

Additionally, be sure that your document satisfies the following criteria:

  • Timeliness - The document was submitted before the deadline.
  • Readability - The content presented in the document should be well-formatted, clear, and readable.
  • Completion - The document is complete, clearly written, and submitted on time.
  • Accessibility - This document should be written such that someone not on your project can understand the content.
  • Depth - This document should include details that are specific to your project and help document the architecture of your project. For example, even if you are using the same framework as another team, the write-up should include your project-specific details, which are different than other teams.