Assignment #8: First Drafts

Overview

This will be a live version of your site, with pages built and styles applied. It will also be the first time we get to see your sites live, and hear in class your explanations for what you've built.

Due date

This assignment is due by class time on March 15, 2016.

Points possible

100

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 at least three pages that showcase different types of content or different templates that you're 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 devices (the desktop can come later);

• to use only one external stylesheet for your site styles (note: you can use a secondary stylesheet if you're using a pre-made grid system or something similar, we'll go over any exceptions);

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

You will not need:

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

• to build things you don't know how to build yet (ex: items that need to be built with JavaScript or jQuery or another thing we haven't learned), but you should have some type of a placeholder in what you turn in to indicate that something should go there.

• to make this pixel-perfect on every device, or make it look good on the desktop. Yet.

What to turn in

You'll need to build a home page, an index page that includes links to all the content (this can also be the home page), and at least three pages that showcase different types of content or different templates that you're using. If you don't have three types of template in your site, or if you're confused about what any of this means, talk to Elizabeth and Rob to clarify.

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.

• Assess the content. Consider the storyboard exercises you've been through, and spend much time on planning out the site, way before you consider executing it.

• Are your information architecture and navigation easy to follow? Does each section tell its own part of the story?

• With this assignment, design starts to count. Think carefully about your typography and color choices, and about the overall tone of your package. 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?

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 leave something out, 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.

• Test your site on multiple phones, big and small, iPhones and non-iPhones. In your one-page statement, mention what you learned from that, and what changes you made based on it, if any.

Grading:

• Introduction (20) 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 (30) 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 (10) 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 (30) 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?

• Validation/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 HTML and CSS must validate.

Total: 100 points possible

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

tl;dr:

Build a draft of your website, and push it to GH-Pages. Be ready to present it in class. If you have any questions, see Elizabeth or Rob. Worth 100 points, 10 percent of your semester grade.