One site, two designs

Due: 21 May 2015, 9:15am
Turn it in
HER L210 | Summer 2015
Instructor: Aaron Ganci


In this project, you will practice using visual design to inform the perception of information. Using the same wireframe for a page, you will apply two distinct visual styles in an attempt to make the page look and feel very different. We will build a wireframe together to use as your page layout.

Learning Objectives

At the end of this course, students will be able to:

  • Use the elements of visual design to create a balanced, legible, pleasing design.
  • Construct a webpage mockup using the appropriate software.
  • Use a grid to structure the content of a webpage.


  1. Construct a wireframe together, in class.
  2. Create two Style Tiles that reflect the defined emotions.
  3. Translate the wireframe into a digital file.
  4. Apply the each style tile to the layout.
  5. Turn in Style Tiles and Page Mockups here.

Grading criteria

  • Appropriate use of elements and principles of design.
  • Appropriate use of web design layout conventions.
  • Ability to convey emotional qualities through visual design.


Week Class Topic
1 14 May Intro to course. Getting familiar with visual language of the web.
2 19 May One site, two designs
21 May Analog + Digital
3 26 May Analog + Digital
28 May Connecting people online
4 2 June Connecting people online
4 June Connecting people online
5 9 June Responsive Design Plus
11 June Responsive Design Plus
6 16 June Responsive Design Plus
18 June Responsive Design Plus
7 23 June Final Critique
24 June Summer Session 1 courses officially over.


Your grade will be broken down into the categories below*. Participation includes: being present and on time, asking and answering questions, helping to improve understanding of course content for others. Your full attention is expected during class time.

Category % of total
One site, two designs 10%
Analog + Digital 20%
Connecting People Online 30%
Responsive Design Plus 40%

*Categories and percentage breakdown subject to change.

How Attendance might impact your grade

It is important that you are present for class. Excused absences (course conflicts, illness, death in the family, etc.) will be allowed with documentation. You have two unexcused absences in this course. Every absence after two (starting with the third absence) will result in a 5% reduction in your overall grade. For example, if you miss 3 classes, you will receive a 5% reduction; if you miss 5 classes, you will receive a 15% reduction. I hope that this policy stresses the importance of being present and active in class.

Late work

Every assignment in this course will be due at the beginning of the class of its defined due date. Work that is not handed in via the method requested by the instructor (OnCourse, email, etc) by the predetermined time will be considered late. The consequences of late submission fall on sliding scale, increasing in severity over time. If late work is handed in within the following parameters, the grade will be reduced in the following ways:

Due date/time – same day, end of class -10%
Same day, end of class – same day, end of day (11:59pm) -15%
Next day (midnight – 11:59pm) -20%
Any subsequent day -50%
Grading scale
A+ 100-98
A 97-93
A- 92-90
B+ 89-87
B 86-83
B- 82-80
C+ 79-77
C 76-73
C- 72-70
D+ 69-67
D 66-63
D- 62-60
F 59-0