Mar 10

You only have 5 minutes. (this is to ensure we get through everyone and have time to switch between everyone. Come ready and prepared!)

Verbally Explain the following and Show the Website:
(no corresponding slides. there just isn’t time.)

• Provide a clear and brief synopsis of your story.
• Who is your audience?
• What was your approach in representing the story?
  • structurally – how you chose to break down and organize the content
  • tonally – what tone or mood were you going for overall
  • visually – overall design choices – type, image, color, layout…
  • dynamically – how you elevated it for the digital platform beyond what you can do on a printed page.
• Take us through the website. You can be doing this while explaining the above or you can explain everything before and then take us through it.

1. Responsive Website (linked to Sandbox)
2. PDF or Prototype of Final Intended Design: this is just in case you cannot get the layout coded exactly how you intended, so I can evaluate your design. (linked to Sandbox – if you don’t have a link – please create one for it.)
3. Case Study PDF (linked to Sandbox) Your case study should be robust and have plenty of images, process, and insights documenting and narrating each step. See the Case Study Outline below and Student Examples.

1. single-page (unless your concept promotes multiple pages then I am open)
2. html / css / Skeleton css framework
3. responsive (desktop + mobile breakpoints)
4. works on Chrome
5. at least 1 css animation or transition
6. Google Fonts and/or Typekit Web Fonts
7. 1,000-1,500 words
8. original or copyright-free assets
9. optimized images 
10. organized files / folders / code (utilize comments and indention in the code)

1. Background: A brief introduction of the project: the brief, synopsis of the story you chose, why you chose it, etc.
2. Solution: What was your proposed solution for the project? This includes how you approached the problem and overall strategy statement.
3. Process: What steps did you take to reach the final product. Show images and narrate each step.
   1. Research – What kind of research did you conduct to immerse yourself in the project? Competitor research/inspirational research? What were the main takeaways?
   2. Content Breakdown – How did you break down the structure of the story? What themes arose? What image associations were there?
   3. Target Audience – Who is your target audience? How did you determine this?
   4. Brainstorming – What type of brainstorming did you do? Did you do a free-write, word list, mind-map, do’s and don’ts list, and more breakdown of your narrative? What came out of it? 
   5. Concept Evolution – Why did you choose the direction that you did? What were your user and narrative goals? Were there other concepts or ideas you considered before coming to the final direction?  
   6. Visual Design Development – How did you reach your final visual design? Show moodboard, several sketches, initial visual designs, refinements, wireframes. What feedback did you receive about the different designs and refinements?
   7. Usability Testing –What did you learn during testing? Were there any patterns? What refinements did you implement for the final design?
4. Outcome: What was the end result?
   1. Final Design – Clearly show final comps for both mobile and desktop.
   2. Challenges – What were the challenges you had to overcome?
   3. Reflection – What did you learn from completing this project?
   4. Vision/Future Goals – Is there any room for growth with this project?

Concept/Design/Usability: 60%
Functionality: 20%
Case Study: 20%

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