Learning Web Design ’19

Using the book Learning Web Design by Jennifer Nierderest Robbins we are going to be reviewing basic web coding and terminology. You will need to read the chapters, answer the test questions and complete the exercises for each. The Chapters and when they are due are listed below. Refer to the specification sheet for details needed. Remember to upload them before the class it is due!

Chapters 1, 2 and 3 Due: Friday January 18th

Chapters 4, 5, 6 and 7 Due: Wednesday January 23rd

Chapters 8 and 9 Due: Friday January 25th

Chapters 10, 11 and 12 Due: Monday January 28th

Chapters 13 and 14 Due: Wednesday January 30th

Chapter 15 Due: Friday February 1st

Specification sheet (pdf)

FYI: Not all chapters have the same number of exercises! For example chapter 1 has questions for its exercise, and chapter 2 and 3 do not have any exercises.


Web Research ’19

In order to understand where we are and what we use to determine what web design is and encompasses we need to look at the current websites and evaluate what we see. We will be doing this in three parts.

Part 1: Find 5 websites (2 like, 2 dislike and 1 extra) and evaluate them based ONLY on their desktop versions. DO NOT look at their mobile version!

Due: Wednesday, January 23rd

Specification sheet (pdf)

Syllabus ’19

PDF Version

This course is an introduction to the web designer (some developer) world that is ever evolving. We will be working on developing and refining our standards of good web design. In order for us to do this we must develop an understanding of the limitations of the technical side (code) that web development can present. This will allow us to design accordingly. On the development side we will look at HTML5, CSS3, JavaScript and HTML5’s canvas/Action-script. A look at responsive design utilizing the Bootstrap structure. We will be focusing on the design side for best practices and rules that need to be understood for use in real world application. This class will include lectures, demonstrations, in-class critiques/reviews and in/outside-class studio activities/assignments.
If you have any questions during the semester, please don’t hesitate to contact me by email, or in person in my office.

Catalog Description
Intermediate-level design course in web design. Web layout and motion applications are used to explore design structure, navigation, aesthetics, strategy, concept, and project planning with an emphasis on the user interface and experience.

Course Objectives

  • To recognize good responsive web design and have a good idea if it is actually doable with current coding technologies as well as being able to create it based on another’s work.
  • To be able to create a good responsive design (with an introduction of Bootstrap structure) for a website and be able to understand how to create it with the coding.
  • To be able to understand and interpret HTML5 and CSS3 along with some JavaScript to take advantage of jquery and HTML5 canvas.
  • To have a basic understanding of best practices for web development.

Meeting Times
January 14th through May 3rd 2019, Monday, Wednesday and Friday, 11:30 to 1:20 p.m. in Ophelia Parrish room 1250.
Three credit hour studio course, meets for six in class hours and a minimum of six hours of work outside of class per week.


Learning Web Design: A Designer’s Guide to HTML, CSS, JavaScript and Web Graphics (4th or 5th edition) by Jennifer Niederst Robbins (required)
Hardboiled Web Design by Andy Clarke (required)
Mobile First by Luke Wroblewski (recommended)
Responsible Responsive Web Design by Scott Jehl (recommended)
Responsive Web Design by Ethan Marcotte (recommended)
Real-Life Responsive Design by Smashing Book (recommended)
Responsive Design Patterns & Principles by Ethan Marcotte (recommended)

Tracking Time
You will be tracking the time spent on all work for this course using the website Toggl.com. You should not have to pay for the basic service. You will need to turn in the time-sheet for an assignment (when requested) as well as a full and summary report when requested.

Assignments, homework and/or projects will be given with assigned due dates specific to each. These will vary in value based on amount of work and/or time required and/or expected.

Quizzes will be over any information from the class blog, lectures, assignments and handouts. If you are tardy the day of a quiz you can only take the quiz if there are still students completing, once all are turned in the opportunity for the points is missed. Unexcused absence the day of the quiz forfeits the quiz points.

Tracking Time
You will be tracking the time spent on all work for this course using the website Toggl.com. You should not have to pay for the basic service. Turn in requests of the time-sheet for a project will be at the professor’s discretion on the date assignment is due or to be tracked for inclusion in the process book.

Process Book
In this course you will need to have a process book/design idea diary/journal for the semester. This book should be kept in a 3-ring binder (8.5” x 11”), best with folders/separators for the sections. Will be checked and graded incrementally throughout the semester. The purpose is to organize your thoughts, ideas and process for preparation in the real world!

Items to include in your process book:

  • Toggl.com time tracking – full and summary report printed for each check, to include time logged for each assignment
  • Ideas/Visual Inspirations/Imagery from magazines, books, on-line, etc. – each assignment should have multiple that you looked at and researched for ideas
  • Sketches – multiples for each assignment, even if not a part of what is turned in
  • Notes/Journal – daily record for each class including information on demos, activities, lectures and projects
  • Quizzes
  • Extra Credit available for organization – Using a 3-ring binder, dividers,
    folders and labeling, can add to it. The easier it is for me to check the more you get.

Supplies, Software and Extras

  • Laptop or desktop computer – A laptop can be brought to class to work, but usually has less capability than desktop. A minimum of 8GB of RAM for this class, but 16GB or more RAM recommended to be suitable for future classes.
  • Sketchbook with removable pages to be placed into process book
  • Notebook/paper for idea generation, preparation, setup and note taking
  • 3-ring binder and folders/dividers for process book
  • Storage Device 32GB minimum (64GB+ recommended)
  • Digital Camera (recommended)
  • Adobe Creative Cloud Software Subscription – We will be using multiple programs of software from this collection including InDesign, Photoshop, Illustrator, and Dreamweaver mostly, though we may touch on others.
  • Your own domain and hosting service
  • Web browser: Chrome (others are necessary for testing)
  • Inkjet Paper – 8.5 x 11 and 13 x 19 glossy or luster (Epson recommended)
  • Spray mount – Super 77 recommended (DO NOT use or even get out when in the OP!)
  • Black Foam Core – to mount some projects on
  • 36” –  48” metal ruler for cutting foam core, paper and mat board
  • Cutting knife – It is up to you what kind of knife you get (x-acto, utility, etc), it is vital that it is sharp and has replaceable blades such that you are able to cleanly cut through foam core, mat board and paper with it
  • You may also need to purchase additional supplies as needed.

Absentee Policy
Roll is taken daily. Greater than 4 unexcused absences will result in a reduction of your final grade by one letter (five is one letter, six is two, seven is three and eight auto fails). Requests for excused absences should be submitted to the professor (and acknowledged as such) before the class to be missed. This includes sports practice or away competitive events, band or other professor-led group trips sponsored by faculty/university administration. This does not include Fraternity, Sorority or other extra curricular type of activities. If you are sick you must notify the professor as quickly as possible. Determination of the absence (excused or not) is at the discretion of the professor. DO NOT ABUSE!

Tardiness & Leaving Early Policy
Tardiness will not be tolerated and if abused tardiness and leaving early will count as full absence. You will be notified when the next tardy will count as a full absence. If tardiness is greater than 30 minutes it will be counted as a full absence. I keep very strict attendance records, be warned! Determination of the absence is at the discretion of the professor. DO NOT ABUSE!

Effort Policy
Students who are late to class, unprepared or who do not participate will receive reduced grades when applicable. Any late or incomplete projects will result in failure on the project; unless such is the result of an excused absence (in which case every effort should be made to turn in the project early). Excuse-ability will be determined by your effort throughout the course of the project and at the professor’s discretion.

Cell Phones
Turn it OFF or leave it on mute, so that phone does not disrupt the class. If it becomes a problem you may be asked to leave the class and an unexcused absence will be assessed.

Laptop computers are allowed in the classroom and work good for working on assignments during class. Audio should be muted during class time. Headphones may be used once the time for work during class has begun, otherwise they should be put away. Laptops should be closed and notes taken by hand during lectures and critiques. If necessary you may be asked to close the computer to be sure attention is on the activity of the day.

Computer labs
Food or drinks are allowed in the labs but NOT at the tables with computers in the lab at ANY time! If this privilege is abused food and drink will be removed from the lab for the remaining of the semester.

Spray Mount
Spray mount is not allowed in any of the graphic design labs. If you are caught spraying in this building (other than a designated area in studio area), you will drop one letter grade from the course. Do NOT bring in any bottles/cans of spray mount or the professors will confiscate it.

By enrolling in this Truman State University Art Department course, permission is granted by the student, to the university to use any artwork, designs or illustrations, as demonstrative samples of student work for the stated course, in competitions, university publications, websites or multimedia promotions.

Plagiarism/Cheating Policy
Plagiarism and cheating are serious offenses and may be punished by failure on the exam, paper or project; failure in the course; and/or expulsion from the university.

TSU will make reasonable accommodations for persons with documented disabilities. Students need to contact the Director of Disability Services and the professor as early in the semester as possible to ensure that classroom and academic accommodations are implemented in a timely fashion. All communication between students, the Office of Disability Services, and the professor will be strictly confidential.

As an professor, one of my priorities is to help create a safe learning environment. I also have a mandatory reporting responsibility related to my role as a faculty member. I am required to share information regarding sexual misconduct or information about a crime that may have occurred on Truman’s campus with the University. Students may speak to someone confidentially by contacting University Counseling Services at 660-785-4014 (660-665-5621 for after-hours crisis counseling).

Final course grade will be determined based on points acquired throughout the semester. Each assignment will be given a point value and graded based on requirements set at the time it is assigned. This can/will include toggl.com reports, critique participation, quizzes, projects and assignments. Every assignment must be completed and turned in on time to get full credit. If a project or assignment is turned in, but not satisfactorily completed based on the given requirements the professor may require you to re-do it.

A – 100-90%. Excellent Work, reflected by:
• Meeting deadlines for all stages of projects as scheduled.
• The development of preliminary research as outlined by the professor.
• Strong evidence of creative process demonstrated via the idea diary.
• Communicating desired concepts/ideas to a selected audience.
• Using space effectively by creating dynamic, foundational elements of visual communications:
   letter forms, image/illustrations, organizational strategies.
• Technical proficiency
• Maintaining a professional attitude in your work.
• Shows quality project presentation to the class (demonstrating communication skills).
• Top project(s) in class.
• Will almost certainly do well in the professional field

B – 89-80%. Good Work (above average)
• Very solid effort.
• May be lacking qualities listed in A description.
• Will likely do well in the professional field

C – 79-70%. Fair Work (average)
• Completes projects as assigned.
• May be lacking qualities listed in A description
• May or may not remain in the field

D – 69-60%. Poor Work (below average)
• Effort lacking, poor attendance to class
• Suggest dropping course if received frequently.
• Meet with the professor for guidance.
• Should be guided into a more appropriate field

F – 59-0%. Failure
• Major problems with projects (or not turned in).
• Suggest dropping course if received frequently.
• Should be guided into a more appropriate field

Grading Reminder:
More than four absences will result in letter grade reductions (five is one letter reduction, six is two, seven is three, eight is auto fail).
Unexcused absence on a project due date will result in a letter grade reduction for said project or assignment. If a quiz is missed due to tardiness or unexcused absence no credit will be awarded.

Final Project ’18

This is a competition based on real-life project. You will be creating all necessary collateral and selling it to the client. As your instructor I will be acting as the client contact and the other design professors will also be acting as part of the client team for you to present to.

The first part of this project will require you to select an industry/company type for this project. This will be selected as a class.

Industry/Company Selected: Non-Profit
Presentation Date: Monday, April 30th 2:30 – 4:30 p.m.

Company Name: One More Green

#1 – Meridith, Joshua Fi and Jenna
#2 – Jessica, Jeff and Tim
#3 – Nick, Annie and Cameron
#4 – Joshua Fa and Anna

Final Rankings
First – #4
#1, #2, #3

Build Due: Monday, May 7th at 11:30 a.m.

Specification sheet (pdf)

New Site ’18

With all the work we have done to this point, looking at websites, evaluating websites, working in some HTML, CSS and Bootstrap, designing a little in browser and getting familiar with the interface we now need to focus on steps to design a site. Remember the information we have gathered and talked about up to this point to use for this project.

Things to keep in mind: Size of your thumb on mobile, one action click for mobile versus the added hover on desktop. Content highlights, feel of the site that you want, color choices. What is important to showcase on the homepage. Where do you want them to navigate, and how. Any extras you want to include that add to the experience.

Step 1
This step will be to get us started. I need you to decide on a type of site you want to create that has at least 5 pages. What kind I do not care, but your research and sketches need to follow the purpose of that site.

Due: Friday, February 23rd

Step 2
Once settled on a design (or 2) we need to create composites for the client to see and decide on. This will include both digital and printed comps. The digital comps, done correctly, give us our files ready to go when we begin developing and a digital view for the client.

Mobile and Tablet Due: Wednesday, February 28th

Desktop and Theme Due: Monday, March 5th

Step 3
This step we will be taking the set designs created in Photoshop and setting them up to print. Remember your print requirements; dpi, color space and dimensions. Photos must be optimized for print. This will be what we create for the client to hold and take with them for discussion after you have met with them. All the pages should be done in one InDesign file.

Due: Friday, March 9th

Step 4
Now that we have our designs set and assets generated we ned to put them together to sell them to a client. This will include live view of the digital comps, prints comps an information packet and a presentation. Refer to eh specification sheet for details.

Due: Wednesday, March 21st

Step 5
Build it!

Due: Wednesday, March 28th

Specification sheet (pdf)