1. Single-page Responsive Website (linked to Sandbox)
2. Usability link (InVision, Sketch, Adobe XD, or other)
3. Case Study PDF

1. Competitive and Inspirational Research
   Find different websites relevant to your site. These sites are your possible competition and can be inspiration. In order to attract your audience to your site, see what’s possible, and stay current, you need to know what’s out there. Compare and contrast the sites you found:
   • What is your first impression / first impulse?
   • Is the site organized and consistent?
   • Is there enough or too much content? Is the content interesting/relevant?
   • Does the appearance of the site reflect the content?
   • What stands out, both good and bad?
   • Take screen shots of relevant pages of these websites and explain why you chose them.
2. Content Breakdown: Breakdown the text. Are their any word/image associations? What is the story structure? How can the story be broken down? What are innovative approaches to organize and represent the story?
3. Brainstorming
   Conduct a free-write on your topic. Create a word list from this free-write and then mind-map around these words and build out associations. Ask yourself: What stands out about the story or theme? What are the goals of the story?
4. Target Demographic
   To help focus the intentions, goals, and design of the website, briefly define your target demographic in a short statement. Try to explain what type of user may visit your site, including age range, technological usage, interests, how they find your site and what they get out of it.
5. Written Strategy Statement and Goals
   Based on your competitive and inspirational research, brainstorming, content breakdown, and defined audience – write your concept for how you will represent the story you were given. What are the design and user goals of the website?
6. Moodboard
   Collect images, colors, type, etc. and any other visual inspiration that represents the personality of your story. Compile them into a moodboard that you will use to inform your design decisions.
7. Sketches
   Knowing what content goes on the page, create rough sketches to help with grid structure, hierarchy, and consistency. Develop multiple sketches for desktop and mobile layouts.
8. Design Comps
   After you have chosen sketches, flesh them out in Sketch. Design three different variations demonstrating your website’s look-and-feel. Each variation must include designs for both desktop and mobile.
9. Design Refinements & Wireframes
   Choose a style, refine, and design the final desktop and mobile layouts, thinking about how it will translate into HTML/CSS by creating corresponding wireframes.
10. Coded Website
    Your project grade is ultimately based on the final working prototype of your website and your process towards it. You will be building the website in Brackets using Skeleton framework, HTML, and CSS.
11. Usability Testing
    Test classmates on the usability and design of your coded website. Make any necessary adjustments.
12. Case Study
    Complete a case study that narrates your journey through decision making and learning insights. It provides rationale for your solution.

These checkpoints will be evaluated and discussed over the course of the project.

1. Audit
1. research – competitors and inspirational
2. content list – words in story, list of possible images and interactions
3. brainstorm results
2. Define
1. target demographic statement
2. goals of concept (example: inform, entertain, interact, instruct, persuade. Visual goals. Interaction goals. Usability goals.)
3. strategy statement
3. Design
1. moodboard
2. site-map (if there are any interactions or links)
3. sketches
4. design ideation
4. Build
1. wireframes
2. coding prototype
3. usability testing

• Single page (unless your concept requires more).
• HTML / CSS / Skeleton.
• Minimum of 1 CSS animation/transition behavior.
• Google Fonts.
• Min. 700 words.
• Original assets.
• Optimized Images.
• Organized files/folders/code.

Usability is crucial for this project, and should be a key component of your design process and final design decisions. Not only will you create interactive prototypes for testing and your own creative process, but these experiences should also be reflected in your case study, outlining the evolution of your process.

That being said, we're going to keep your approach options flexible for this one. You are not required to use a specific software. Choose whatever software you desire. InVision, Sketch, Adobe XD, or another. The goal is not in what software being used, but what the final result is, and what value it brings to your final project.

Note: Usability is a key component of the evaluation for Project 2. Your Usability Prototype should answer these questions: Usability Testing Sheet. For more information, see Evaluation below.

CONCEPT

• concept strength & execution
• communication of story
• appropriate audience
• enhancement of story for digital platform

DESIGN

• visual structure
• typography
• visual assets, supporting graphic elements, & color scheme
• responsive visual design translation

USABILITY

• overall user-friendliness
• information architecture (organization of content)
• clarity of buttons, links, or interactive elements
• usability of responsive design translation

FUNCTIONALITY

• overall functionality on desktop & mobile (lack of error, image optimization, web fonts)
• CSS (one custom CSS document, skeleton CSS, organization, execution)
• HTML (organization, execution)
• integration & quality of css animation/transition

CASE STUDY

• Background: clear & convincing argument explaining the brief, story, and strategy statement

• Research: demonstration of process through research, content breakdown, brainstorm, free-write, word list, mind-map, audience, moodboard

• Concept Evolution: demonstration of concept evolution through goals, user flow, sketching/wireframing, visual design iterations, refinements, user testing

• Outcome: explanation of outcome through final design, challenges, reflection, and vision
• Design: overall case study design and appropriate amount of content (1000 words + images)