Assignment #13: Second Drafts - J4502-SS19/class GitHub Wiki

Overview

The second draft of your site should incorporate feedback that you got on your first draft and build out the desktop version. It would be highly unusual to present a second draft that's unchanged from the first draft. These sites should also be using media queries or some similar technique to switch the display when it goes from mobile to desktop view.

Due date

This assignment is due by class time, 2:30 p.m., on Wednesday, April 18

Points possible

75

What should you build?

You will need:

  • to build out a home page, an index page that includes links to all the content (this can also be the home page), and any unique type of page that your project/templates will be using (this will depend on your project);

  • to build a substantially complete product (this is a draft, but the pages should be as polished/finished as you can make them);

  • to consider carefully typography, grids, space, color and other design elements;

  • to make sure this works well on mobile and desktop sites;

  • to use only one external stylesheet for your site styles (note: you can use a secondary stylesheet if you're using Google Fonts or something similar);

  • to submit the project in the spirit of accepting thoughtful feedback.

You will not need:

  • to match your creative brief, your storyboard or your first draft exactly (this is a process) but please explain your logic in including/excluding content in your design statement.

  • to make this pixel-perfect on every device, but you should have fallbacks in place for items that may not work.

What to turn in

A home page, an index page (which could also be the home page), and one type of each page you're building. In other words, if there is a type of page that's used frequently, you only need to build one of them; but, you need to build an example of each different type of page your site will have. If you're confused about what to build, talk to Rob.

Push your pages to Github Pages. Whatever you push, you should be ready to present in class. You'll present your designs in whatever section you happen to be in.

Journalism, organization and design:

  • This is a journalistic exercise. What story are you telling? How are you going to get the main points across? Don't get so distracted by technology that you forget to focus on the story.

  • With this assignment, design matters more than it did in the first draft. Have you taken feedback into account? Are you matching the tone of the content? Does your site feel professional? Does it feel intentionally designed, with no default type or stylings? Does the design enhance the content rather than distract from it? Does the design work on mobile and desktop sites?

Requirements:

  • All positioning and styling are to be done in one external css file, not in the html. Tables should be used only if you have an actual table, not for layout. Make sure every page has a title.

  • Include a one-page statement about the decisions you made. If you decide to ignore some portion of your feedback from A8, defend that decision in your statement. Explain what story you're trying to tell, and how you're telling it through the design and organization of your site. Be sure to include content-based reasons for your design decisions. Submit the one-page statement via Slack by 2:30 p.m. April 19.

  • Test your site on multiple phones, big and small, iPhones and non-iPhones, as well as on the desktop. At a minimum, test with Chrome on a Mac and IE on a PC. In your one-page statement, mention what you learned from that, and what changes you made based on it, if any.

Grading:

  • Introduction (5) Is the topic clear without having to read too much? Do I get a clear picture of what kind of story this is, so I can make an informed decision about whether I want to dive in? Do I feel invited in? Does the the display type reflect the tone of the content? If one of the designer's jobs is to sell the content, are you selling it?

  • Organization (15) How did you choose to separate this huge package into smaller chapters? Do the parts of the story work where they are? Does each section tell its own part of the story? Could each section stand on its own, if I were to click there first or land there on a search? Does each section feel like it's worth my time? Did you showcase each kind of media well? And each kind of information well? Did you think critically about whether the parts of the story work well together, and about how to highlight the most interesting parts of the package?

  • Navigation (5) Is the navigation intuitive and consistent? Can I tell where I am, where I want to go, and where I've been? Do I as the user have control over how I work my way through the story?

  • Design (40) Do you have a color palette that is used consistently and reflects the mood of the package? Did you establish typographic styles that are used consistently? Do you have typographic hierarchy that helps me figure out what purpose each piece of type serves? Is the type all legible? Does the site feel intentionally designed, with no default type or styles? Does the design enhance the content rather than distract from it?

  • The Back End (10) Did you style using only CSS, keeping all styling, including positioning, out of the html? Did you use one external stylesheet for the whole site? Does every page have a title? Does your site render acceptably on various phone sizes? Your site does NOT have to validate.

Total: 75 points possible

Note: Assignments not turned in by deadline will drop a letter grade for each day late.

tl;dr:

Build a website that improves on your first draft and includes the desktop buildout. Make sure to take into account the feedback you've gotten from the first draft. Worth 75 points, 7.5 percent of your semester grade.