Assignments

 6 Projects + 1 Exam + 2 Papers + Quizzes (1000 points)

(The professor reserves the right to make minor changes to the assignments up to the time when the assignment is presented in class and students begin to work on it.)

Important:

Competent completion of all requirements at stated will likely lead to a grade of B+. Superior work, completing the assignment at a greater professional and creative level, will result in a grade of A- or A.

Failure to post the site as required with all elements working (images, CSS) will result in a maximum grade of C-.

  • Web Page Analysis (50 points) DUE September 11
  • Personal Page DUE (50 points) DUE September 22
  • Personal Page Redux (75 points) DUE October 2
  • Exam (100 points) IN CLASS October 6
  • All About the Visuals (75 points) DUE October 20
  • Sales and Business 1-Page Site (135 points) DUE November 8
  • Case Study Client Project Proposal (235 points) DUE November 27
  • Case Study Client Project (235 points) DUE December 11
  • Reading Quizzes (45 points) IN CLASS on various dates

 

Use of Images

All photographs/images used in exercise and projects must be royalty free and not “stolen” off of the web.  Students may take their own pictures; use fotolia.com  or istockphoto.com; have a friend create images (and credit him/her); or find another site with royalty-free images (e.g., everystockphoto.com) and pay attention to the Creative Commons licenses.

Web Page Analysis

Student will analyze an assigned website according to elements of design and usability.  Students will consider the following in their 2-3 page paper.  Grammar, style, punctuation all count.  Headings are strongly encourage.  The assignment will be handed in on Blackboard.

  1. The audience for the site.  Discuss two tasks that a user is likely to complete.
  2. The usability of the navigation.
  3. The effectiveness of the focal point.
  4. The visual interest of the overall page (typography, color, amount of text/images, etc.).
  5. The appropriateness and accuracy of the text.
  6. Suggestions to improve the site.

Personal Page

You will create a home page which includes a list to all the assignments.

You will create an HTML page that includes all the content in a proper arrangement in preparation for creating a CSS layout. The page should be placed in your webdesign folder and named index.html. The link on the first page of this syllabus should lead to this file.  You should include:

  • A title in the title bar.
  • One image.
  • Your name.
  • A navigation scheme for the assignments: you should use “#” in place of the not-yet-completed links.
  • You also may include basic links to social media.
  • Other background information.

The text and the links should be formatted using an external CSS page.

The site should validate: https://html5.validator.nu/

The URL of your site is: http://keep3.sjfc.edu/students/username/webdesign, assuming that you place the html page in your webdesign folder and name it index.html

If you want to access your P: drive from off campus, use Internet Explorer (on a Windows PC). Type in the address bar: ftp://keep3.sjfc.edu. Then, for username, type academia/username and your password for the password. (The italics above refers to the fact that your username and password are specific to you.)

Personal Page Redux

You will create the finished site (from the first project of the semester), with a reasonably complex, “non-Word” layout.

  • Create an assignment page using HTML and CSS.
  • Make sure you include a title in the title bar, at least one image, your name (perhaps as a logo), and a navigation scheme for the assignments: you should use “#” in place of the not-yet-completed links.
  • You also may include basic links to social media and other background information.
  • The links should include some sort of rollover effect.

Your grade will be determined by:

  • Technical competence (everything appears that should)
  • Presence of a title
  • Correct HTML/CSS
  • Links with rollovers
  • Aesthetic choices:
    • Legible text
    • Non-clashing colors
    • Reasonable used of space (items line up)
    • A clear focal point.
  • Creativity
  • Appropriateness to purpose
  • The use of CSS Grid Layout (and perhaps Flexbox)

Exam/Quizzes

The exam will be both multiple choice and short answer and will be open note/open book.

The quizzes (an undisclosed number) may be offered at any time and will cover the assigned readings for the day.  Only text in red will be on any quiz.

All About the Visuals

(program goal #1)

You will be assigned a state of being.

Create a home page and a second page (other links need not work), using all the techniques learned so far during the semester, that represents that state of being. You are strongly encouraged to consider an appropriate navigation scheme, create a clear focal point, and use absolute positioning.  Your choice of color and typography selections will be considered in grading.  You should “invent” appropriate text, if necessary.  Think big. Think bold.  The first page should be different from the second page, with the first page specifically aimed at attracting attention.

 

You should link to this page from your first assignment.

Your grade will be determined by:

  • Effective application of the “state of being.”
  • Presence of a title
  • Correct HTML/CSS
  • Aesthetic choices:
    • Font choice
    • Color choice
    • A clear focal point.
  • Creation of a reasonably complex layout (multiple divisions/content areas), although there may be exceptions to this expectation.
  • Creativity
  • Working links between the first and second page.

Responsive Sales/Business 1-Page Site

Students will create a responsive web page following the model of a catalog-based business.  The page will include a text (and possibly image) based logo and at least six images, along with text added to the images (in Photoshop, or not).  A header (and title) must be included, as must (non-working) links to at least six pages within the site (that should not be created.)

Color choice, typography, and simplicity/appropriateness of images will be considered in grading.  The HTML should validate with an external CSS file. The site must be responsive and the transitions will be considered.  The menu should also collapse to a pull-out style at the smallest size.

Consider: http://www.landsend.com/ and http://www.neimanmarcus.com/ and http://www.menswearhouse.com/

Students should take photos of one’s friends or family modeling to obtain images to place.  Please consider location (or mask out background).

Case Study Client Project (40% of final grade)

(program goals #2, 4, program goals #3, 5 for proposal)

Students will (in groups) create a final project for a fictional company or organization.  The group will conduct a series of tests and studies prior to the creation of the site. A Project Proposal is due on November 27.  

Teams of students will develop fictional companies and then hire another group in the class to develop the website.  Therefore, each student team will function as another team’s client.

You must write up a design document with the following information:

  1. A title of the site, with the design team listed.  This is to be written up like a business document, with clearly marked headings, a table of contents, and perfect grammar/usage.
  2. A paragraph describing the purpose of the site
  3. A paragraph describing the audience of the site, leading to:
    1. The definition of two to three personas that represent the typical users of the site.
  4. A preliminary mockup (including the home page and one additional page) made in Axure.  Screen shots are expected and must include information about color and font choices.  (A working Axure site would be acceptable.)
  5. The information architecture of the site.
  6. The results of a usability testing (4 participants) that tests the design in terms of 3 common interactions with the site (task analysis).
  7. A competitive analysis with two similar sites.
  8. Suggestions moving forward on adapting the initial design to the development phase of the project.

Then, the team must at least 6 pages of the site, which considers the design documents and its suggestions.

Your grade on the project will be determined by:

  • An appropriate design for the selected “client”
  • A sophisticated and consistent design for the entire site
  • Easy-to-use and logical navigation
  • Application of good design principles
  • A responsive design
  • Effective use of images, color and typefaces
  • Well written content with a consideration of SEO principles and the inclusion of Google Analytics: see immediately below:
    • https://analytics.google.com/
      Click on Admin (the asterisk/gear near the bottom left)–and then under the Account Drop Down Menu, choose Create New Account.
      Then, in the Property (middle) column under Tracking Info, choose, Tracking Code to find the code to copy and paste into the <head> of each page.

Students may focus on whichever part of the project fits their interests/need most closely.  In the end, the group must write up a document, signed by everyone, that clearly delineates the work that each member completed.  There must be a description of work completed—not just the names of the roles: “John was a designer.” Based on the result of this document, the professor reserves the right to issue the same, or different grades, for the one team project.

For your consideration, the team roles include:

  • Usability testing lead and assistant (2)
  • Competition researcher (1-2)
  • Proposal writer (1-2)
  • Designer (1-2)
  • Asset creator (Photoshop designer, photographer, videographer) (2)
  • HTML/CSS Coder (2)
  • Project Manager (1)

The course ends after the presentations of the Final Project. No assignments will be accepted after the end of the assigned final exam period.