Author: kmorrow

Feb 10

via GIPHY

Project 2: Interactive Storytelling

Due today: Sketches/Wireframes

Next Steps:

Initial Desktop Design Comps
After you have chosen sketches/wireframes, try to flesh them out in Figma or Adobe XD. Design three different variations demonstrating your website’s look-and-feel. Try different visual structures, styles, colors, type, imagery, etc. Base them off of your sketches to help you get started. (see more details below under Due Next Class).

Figma or Adobe XD

Click here to get help with Figma and Adobe XD

Visual Inspiration

Click to see inspo:

Web Design Trends/UI

Professional Interactive Stories

Web Typography

Click to see resources:

Tips and Inspo

Web Fonts

Font Pairings

Due Next Class

Project 2: Interactive Storytelling

Initial Design Comps

  • How to turn in: Print in Color for class critique.
  • 3 desktop variations – Create 3 distinct approaches to style and layout.
  • Sizing: Desktop width can be between 960px-12oopx. Height must be at least the top portion of your story and enough to demonstrate your concepts/styles. At least 2 screen heights which would be between approx. 1500px–2000px.
  • Use a 12-column grid for desktop and 2-4-column grid for mobile.
  • Be prepared to give a clear verbal elevator pitch (strategy statement) to your classmates about your story’s website, so they know how to respond to your design variations. (including synopsis of story, intended audience, mood/tone, prioritized goals…)
  • Considerations when we critique on Tuesday
    • Concept/Innovation
    • Communication of Story
    • Composition/Layout/Grid
    • Typography
    • Style of Graphics
    • Color Scheme
    • Design Consistency/Variety
    • Structure of Content
    • Usability
    • Responsive translation possibilities

Exercise 5: Skeleton Practice

Helpful Skeleton Resources: