Assignment 13: Final Part 3

PART 1. Based on the feedback, finalize the design of your three screens for the Course Final Project Exhibition on May 8th. If your design is for devices other than a laptop, prepare your design to be shown on the actual device (e.g., phone, tablet, watch, etc.).

PART 2. Print 6 process documents for the exhibition. These prints will showcase your design process at the exhibition along with your final design. The Files should be:

Workshop02.Comp2 (A3) [last page, “Version 2”]
Workshop05.Type3 (A8) [last page]
Process05.Wireframes (A9) [one of the three screens]
Process.Final.Document.v2 (A12) [screen set 1]
Process.Final.Document.v2 (A12) [screen set 2]
Process.Final.Document.v2 (A12) [screen set 3]

Please print in color, and you may invert the slide template background with text color to use less ink (please keep borders on your composition assignment).

PART 3. Compile all your assignment files into one PDF and upload it to the course website. Due Monday May 11th at 5PM.

Process01.Place (A1)
Workshop01.Comp1 (A2)
Workshop02.Comp2 (A3)
Process02.Research (A4)
Process03.Aesthetic.Analysis (A5_2) (started using the A_ naming convention this week)
Workshop03.Type1 (A5_1)
Process04.Blocking (A6)
Workshop04.Type2 (A7)
Workshop05.Type3 (A8)
Process05.Wireframes (A9)
Design.Process.Color.Document (A10)
Process.Final.Document.v1 (A11)
Process.Final.Document.v2 (A12)

Assignment 12: Final Part 2

Considering the feedback you received in class and the four visual design elements summarized on slide 2, continue to refine the design of your three chosen screens.

For each of your three screens, document your design study as well as your final design (i.e., each screen you present on page 3-5 should be different to document/illustrate your process) in the Process.Final.Document.v2 document (available in Powerpoint and Keynote). Provide rationale for your design.

Please use your name in the following filename format: LastnameFirstnameA12.pdf. Due as a blogpost with PDF attachment on Thursday, April 23rd 9AM.

Assignment 11: Final Part 1

Carefully review the visual design elements discussed in class and summarized on page 2 of this document. Continue to refine the design of your three chosen screens based on these four design elements.

For each of your three screens, document your design study as well as your final design (i.e., each screen you present on page 3-5 should be different to document/illustrate your process) in the Process.Final.Document.v1 document (available in Powerpoint and Keynote). Provide rationale for your design.

Please use your name in the following filename format: LastnameFirstnameA11.pdf. Due as a blogpost with PDF attachment on Thursday, April 16th 9AM.

Please also see the syllabus for readings.

Assignment 10: Color and Design

Continue to refine the composition of your three chosen screens. And then, this time, apply colors objectively and systematically to your three screens with reference to Itten’s color contrasts discussed in the color lecture. Discuss which color contrast(s) used in your design and why you chose the(se) particular color contrast(s).

You may use ANY design elements, but color, typography, and ease of use should be your main priority. Document your results in the “Design.Process.Color.Document” document (available in Keynote or PowerPoint).

Please use your name in the following filename format: LastnameFirstnameA10.pdf. Due as a blogpost with PDF attachment on Thursday, April 9th 9AM.

Assignment 8: Type 3

Type 3

You will design UI of a new mobile weather app again, this time utilizing a combination of fonts (at least 2). Create typographic hierarchy with the following set of rules:

Use Comic Sans, Georgia, and Helvetica
Use scale
Use weight
You may use rotation of text
Background is white and figure is black
No gray scale (only black or white)
No images/photos/illustrations
No italics
Screen size is 750 × 1334px
You can choose to omit punctuation
Use all the copy below:

  • February 23, 2015
  • Berkeley, CA 94720
  • Monday Clear
  • Precipitation: 0%
  • Humidity: 62%
  • Wind: 7mph
  • 68°F
  • Tuesday 64
  • Wednesday 64
  • Thursday 66
  • Friday 66

Create two variations of design. Version 1 should focus on typographic hierarchy (i.e., help a user understand information through a logical and meaningful journey). Version 2 in contrast, should play with possible emotional aspects of interaction with weather app (e.g., funny, nostalgic, angry, etc.). However, the same rules apply to this version. You should use the same emotion you used for Type 1. Document your results in your “Workshop Document” (available in Keynote or PowerPoint). Please use your name in the following filename format: LastnameFirstnameA8.pdf. Due as a blogpost with a PDF attachment on Thursday March 19th 9AM.

Assignment 7: Type 2

Type 2

You will design UI of a new mobile weather app again, this time utilizing weight. Create typographic hierarchy with the following set of rules:

Use Verdana as typeface
Use scale
Use weight
You may use rotation of text
Background is white and figure is black
No gray scale (only black or white)
No images/photos/illustrations
No italics
Screen size is 750 × 1334px
You can choose to omit punctuation
Use all the copy below:

  • February 23, 2015
  • Berkeley, CA 94720
  • Monday Clear
  • Precipitation: 0%
  • Humidity: 62%
  • Wind: 7mph
  • 68°F
  • Tuesday 64
  • Wednesday 64
  • Thursday 66
  • Friday 66

Create two variations of design. Version 1 should focus on typographic hierarchy (i.e., help a user understand information through a logical and meaningful journey). Version 2 in contrast, should play with possible emotional aspects of interaction with weather app (e.g., funny, nostalgic, angry, etc.). However, the same rules apply to this version. You should use the same emotion you used for Type 1. Document your results in your “Workshop Document” (available in Keynote or PowerPoint). Please use your name in the following filename format: LastnameFirstnameA7_1.pdf. Due as a blogpost with a PDF attachment on Thursday March 12th 9AM.

Assignment 6: Blocking

This week’s assignment is due on Thursday March 5th 9AM.

Create 3-5 wireframe sketches with grids by only using the blocking method. Must use the final format size. Show examples in full size if possible, on black, no other type or information on screen. Show with and without grids. Grid to include, Column, Rows, Modules, and definition of why you chose this grid. Which constraint helped you set this grid? Document results of your UI aesthetic analysis in your “Blocking Document” (available in Keynote or PowerPoint). Please use your name in the following filename format: LastnameFirstnameA6.pdf. Due as a blogpost with a PDF attachment on Thursday March 5th 9AM.

Assignment 5: Aesthetic Analysis and Type 1

This week’s assignment has two parts and they are both due on Thursday Feb 26th 9AM.

Part I: Type 1

You will design UI of a new mobile weather app. Create typographic hierarchy with the following set of rules:

  • Use Verdana as typeface
  • Use scale
  • You may use rotation of text
  • Background is white and figure is black
  • No gray scale (only black or white)
  • No images/photos/illustrations
  • No italics or weight (bold)
  • Screen size is 750 × 1334px
  • You can choose to omit punctuation
  • Use all the copy below:

February 23, 2015
Berkeley, CA 94720
Monday Clear
Precipitation: 0%
Humidity: 62%
Wind: 7mph
68°F
Tuesday 64
Wednesday 64
Thursday 66
Friday 66

Create two variations of design. Version 1 should focus on typographic hierarchy (i.e., help a user understand information through a logical and meaningful journey). Version 2 in contrast, should play with possible emotional aspects of interaction with weather app (e.g., funny, nostalgic, angry, etc.). You are free to interpret the possible emotional aspects. However, the same rules apply to this version. Document your results in your “Workshop Document” (available in Keynote or PowerPoint). Please use your name in the following filename format: LastnameFirstnameA5_1.pdf.  Due as a blogpost with a PDF attachment on Thursday Feb 26th 9AM.

Part II: Aesthetic Analysis

Pick two UI exemplars to engage in UI aesthetic analysis. The two example UIs you choose will serve as pieces of “competitor analysis” for your UI, with an emphasis on aesthetic. Document results of your UI aesthetic analysis in your “Research Process Document” (available in Keynote or PowerPoint). Please use your name in the following filename format: LastnameFirstnameA5_2.pdf.  Due as a blogpost with a PDF attachment on Thursday Feb 26th 9AM.