Communication Through the Web

DCI 108

Fall 2021

Credits: 3

Requirements Met: DCI Minor Core

Class Meeting Metadata
Meets: MW 2:45 - 4:15
Classroom: Tucker 114
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 1-2
T 1-2
W 10:30-11:30
Or by appointment

Project Deliverable #2: Client Website UX Proposal100 points

Due Wednesday, November 10 @ 11:55pm ET

Overview

Now that you have a grasp on what your client expects and who their audience is, you can define what story can be told and design how that story is presented. In this deliverable, you will create a design document and wireframes that reflect your design.

Steps to Complete Deliverable #2

Draft a document that addresses the following:

  • What is the story being told? Why this one?
  • What pieces will you need to assemble to tell the story? How will the text be broken down into sections? What kinds of images? What video/audio will you use and how will it enhance the story?
  • How will the page be laid out? What elements will be used? Why?
  • Will the page look different on a mobile device versus a laptop/desktop? If so, how? If not, why not?

Based on your design document, create two wireframes:

  • The first should depict the site on a standard laptop or desktop screen.
  • The second should depict the site on a mobile device in portrait (tall) mode. Even if you decide above that the site will not be significantly different, the mobile wireframe should reflect the different proportions forced by the device.

Expectations

Design Document

  • 1,500 to 2,000 words
  • Double-spaced
  • Arial or Times New Roman
  • Organize into sections that clearly address each question above
  • Make clear reference to the sources assigned as reading/viewing. You should cite using the academic format you are most familiar with (APA, MLA, etc.). If you need help, refer to the University Library's guide to citation and plagiarism.
  • Writing should be of professional/academic quality — free of errors in spelling, grammar, and usage; well-organized; well-argued; well-supported

Wireframes

  • Two designs created by hand, in Moqups, or in Invision Freehand
  • Elements should indicate placement of all blocks of content including headings, text, navigation, and media.
  • Include a navigation element that allows the user to jump to the sections defined within the page
  • Designs should cover the design of the page from top to bottom, not just "above the fold".

Grading Specifications

Grading Rubric
Sophisticated Very Competent Fairly Competent Not Yet Competent
Argument/depth of analysis of design document
100 points total
Fully meets requirements of assignment. Explores implications of choices in thoughtful and/or original ways. Makes convincing case for why selected key ideas connect (or contradict) with the material studied thus far. Web page story is clearly conveyed. All pieces needed for the story are clearly described, defended, and placed in the context of the story. (100/100) Paper fully meets the requirements but does not exceed them. Makes good case for why selected key ideas connect (or contradict) material studied thus far. Web page story is described with some need for improvement. Most pieces needed for the story are clearly described, defended, and placed in the context of the story. (90/100) Paper does not address some aspects of the assignment. Makes mildly convincing case for why selected ideas connect (or contradict) material studied thus far. Web page story is related but lacks clarity. Some pieces needed for the story are described, defended, and placed in the context of the story but not clearly. (77/100) Paper does not address the assignment. Selects minor rather than key ideas, and/or does not show why the selected ideas connect (or contradict) material studied thus far. Web page story is irrelevant or missing. Pieces needed for the story are not described, defended, or placed in the context. (65/100)
Clarity of design document
30 points total
Consistently precise and unambiguous wording, clear and lucid sentence structure. All citations are well chosen, effectively framed in the text and explicated where necessary. (30/30) Mostly precise and unambiguous wording, mostly clear sentence structure. Mostly effective choice of citations. Mostly effective framing and explication of citations where necessary. (27/30) Imprecise or ambiguous wording. Confusing sentence structure. Poorly chosen citations,or ineffective framing and explication of citations. (24/30) Consistently imprecise or ambiguous wording, confusing sentence structure. Citations contradict or confuse student's text. Citations used to replace student's own ideas. (21/30)
Presentation of design document
20 points total
Paper is clean, well formatted, and written in complete sentences. Citations are all properly attributed in a consistent style. Virtually no spelling or grammatical errors. (20/20) Paper is clean, well formatted, and written in complete sentences. Citations are all properly attributed in a consistent style. A few minor spelling or grammatical errors. (18/20) Paper is clean, well formatted, and written in complete sentences. Some improperly attributed citations and/or inconsistent citation style. A number of spelling or grammatical errors. (15/20) Paper is sloppy, incorrectly formatted, and/or not written in complete sentences. Many improperly attributed citations or inconsistent style of citation. Many spelling or grammatical errors. (12/20)
Wireframes
50 points total
Wireframes clearly show the structure of the page in both desktop and mobile format. Illustrate all pieces (text boxes, media, menus, headers, footers, etc) intended to be on the page and their placement and purpose is obvious. (50/50) Wireframes demonstrate the structure of the page in both desktop and mobile format. Illustrate most pieces (text boxes, media, menus, headers, footers, etc) intended to be on the page and their placement and purpose is somewhat clear. (45/50) Wireframes show some structure of the page in both desktop and mobile format. Illustrate some pieces (text boxes, media, menus, headers, footers, etc) intended to be on the page but placement and purpose of all pieces is not immediately obvious. (38/50) Wireframes show minimal or no clear structure of the page in desktop and mobile format or one is missing. Illustrate minimal pieces (text boxes, media, menus, headers, footers, etc) intended to be on the page and their placement and purpose is not obvious. (32/50)

Rubric adapted from https://www.cmu.edu/teaching/assessment/examples/courselevel-bycollege/cfa/tools/reflectionpaper-cfa.pdf