Web Research ’18

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: Using your own criteria we will 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: Friday, January 19th

Specification sheet (pdf)

Part 2: Using your own criteria we will find 5 websites (2 like, 2 dislike and 1 extra) and evaluate them based ONLY on their mobile versions. DO NOT look at their desktop version!

Due: Monday, January 22nd

Specification sheet (pdf)

Presentations

This will be a three part assignment and each student will present twice. Prepare to present your finding from each research assignment using the specifications below. We will determine who presents the day the research part is due.

Specification sheet (pdf)

Advertisements

Spring 2018 Syllabus

PDF Version

Introduction

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/Actionscript. We will be focusing on the design side for best practices and rules that need to be understood for use in real world application.

The core of the course will be lectures, homework assignments and projects. Quizzes
will cover terminology and “best practices” covered in lectures, homework assignments and projects.

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 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.

Meeting Times

January 16th through May 5th 2017, Monday, Wednesday and Friday, 11:30 to
1:20 p.m. in OP 1250.

Three credit hour studio course, meets for six in class hours as well as a minimum of six hours of work outside of class per week.

Textbooks

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)

Lynda Classroom Subscription

For part of this course you will be reviewing/learning software from Lynda.com. The instructor will select some courses for you to complete at a certain time during the course. There will be a small fee (will make it so only a months subscription will be necessary) to pay for access to the Lynda Classroom. Do not subscribe until it is assigned! Will need to turn in the certificate of the course for you to get credit for its completion.

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 in your process book.

Process Book

In this course you will need to have a process book/design idea diary 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 for each check to include time logged for each homework and project.
  • Ideas/Visual Inspirations/Imagery from magazines, books, online, etc. – each assignment should have a couple that you looked at for ideas
  • Sketches – each assignment even if not a part of what is turned in
  • Notes – lectures and each project
  • Quizzes
  • Extra Credit available for organization – Using a 3-ring binder, dividers,
    folders and labeling, can add to it. Th e easier it is for me to check the more you get.

Supplies and Extras

  • Laptop or desktop computer (laptop can be brought to class to work)
  • Sketchbook
  • 3-ring binder and folders/dividers for process book
  • Storage Device – Jump-drives, external hard drives (put your name on it!)
  • Digital Camera (recommended)
  • Adobe Creative Cloud Software Subscription (we will be using multiple
    programs of software form this collection, InDesign, Photoshop, Illustrator, and
    Dreamweaver mostly, though we may touch on others)
  • Your own domain and hosting
  • Web browser: Chrome and Firefox (more are necessary for testing)

Assignments

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

Quizzes

Quizzes will use information from the blog, lectures, assignments and handouts.

Absentee Policy

Roll is taken daily. Greater than 4 unexcused absences will result in a reduction of your final grade by one letter grade (five is one letter, six is two letter, etc.). Requests for excused absences should be submitted to the instructor (and acknowledged as such) before the class to be missed. This includes sports practice or away competitive events, band or other instructor-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 instructor as quickly as possible. Determination of the absence (excused or not) is at the discretion of the instructor.
DO NOT ABUSE!

Tardiness & Leaving Early Policy

Lateness & leaving early will count as full absence. I keep very strict attendance records, be warned! Determination of the absence is at the discretion of the instructor.
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 instructor’s discretion.

Cell Phones

Turn it OFF or leave it on mute, so that phone does not disrupt the class.

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.

Permission

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.

Accommodation

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.

Disclosure

As an instructor, 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).

Grading

Final course grade will be an average of all graded material. This will include process book checks, Lynda.com courses, toggl.com reports, critique participation, quizzes, projects and assignments. Every project and exercise must be completed and turned in on time to get credit. If a project or assignment is turned in, but not satisfactorily completed based on the given requirements the instructor may require/allow 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 instructor.
  • 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.

B – 89-80%. Good Work (above average)

  • Very solid effort.
  • May be lacking qualities listed in A description.

C – 79-70%. Fair Work (average)

  • Completes projects as assigned.
  • May be lacking qualities listed in A description

D – 69-60%. Poor Work (below average)

  • Effort lacking, poor attendance to class
  • Suggest dropping course if received frequently.
  • Meet with the instructor for guidance.

F – 59-0%. Failure

  • Major problems with projects (or not turned in).
  • Suggest dropping course if received frequently.

Grading Reminder:
More than four absences will result in letter grade reductions (five is one letter reduction, six is two, etc.).
Unexcused absence on a project due date will result in no points allowed for said project or assignment.

Fixing the Pixel density on Mobile Devices

Mobile devices are increasingly more popular, making responsive design very important. Unfortunately as technology has been getting better and better we now have the problem of pixel density. A formerly 320 px width mobile device is now 768 px wide making our responsive designs no longer work. To fix this issue we must reset the pixel density for our code to display on the screen. To do this we need to include the code below in the head tag.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Final Project

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 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: Advertising Agency
Presentation Date: Tuesday, May 2nd during class from 10:30 – 1:20 p.m.

Company Name: The Green Panda Group (Green Panda, Green Panda Group)

Groups
#1 – Sara, Shelby and Cheyenne
#2 – Emily, Mariah and Lindsey
#3 – Lorin and Taylor
#4 – Eva, Van and Aston
#5 – Claire, Amir and Tyler

Specification sheet (pdf)

Site Re-Design

Using the steps we worked on for our own websites we are going to tackle a re-design of an existing website. By now you have chosen a website to re-design. Below is the schedule for the 4 steps.

Research and Sketch
Due: Thursday, March 23rd

Comps
Due: Thursday, March 30th

Presentations
Due: Starting presentations Tuesday, April 4th

Build
Due: Thursday, April 13th

Specification sheet (pdf)

Build it!

Once we have the design set and “in the real world” had it approved we are ready to proceed to the construction of the site. Utilizing the html, css and bootstrap code we have talked about and reference that is available online, we must now build our site. Begin by building a template for your sit that the header and footer are there and behave as they should across screen sizes and devices. Once that is complete duplicate the file and add content for the 5 pages your site includes. Note: there may be adjustments to the template for your home pages (index.htm).

Due: Tuesday, March 21st

Specification sheet (pdf)