INTERACTIVE STORYTELLING
CREATIVE BRIEF
Online editorial platforms are trying new and exciting ways of presenting content to make full use of the digital experience. Your challenge is to bring a short story to life, while considering the flow of content, visual design, expressive web typography, animated and interactive enhancements, and overall responsive nature. You will be designing and developing a more experiential single-page website of around 1,000-1,500 words. It is critical that you experiment with the format to create a unique viewing experience, while still considering the flow of information and usability.
- Tell the history of a person, place, or thing.
- Tell a story about a collection of objects.
- Choose an existing article or chapter.
- Choose a topic of interest, then inform, persuade, or entertain.
- Demonstrate a “How to” process.
WWU Student Examples
- Why Time Passes Faster as You Age
- Big Boy
- An Open Letter to My Beloved Wooly Armpits
- Doublelift
- 6 Successful People Take Us Through Their Morning Routine
- Endurance
- Tamam Shud
- Honest College Rejection Letter
- Snake Fight
- Pictures of Food with Instagram
- I’m Just a Fucking Cat
- Hamlet Facebook
- Sincerely Baroness Elsa Schraeder
- Famous Writer’s Cosmo Tips
- Fix My Girlfriend’s Grandparents’ Wifi
- Jeff & Jamie’s Birth Plan
STUDENT ADAA SEMI-FINALIST WINNERS
- Banned Books (chapter)
- 27 Club (history)
- Battle Leftovers (collection)
- Appalachian Trail (history)
- History of the Beatles (history)
- Zombie Ants (article)
PROFESSIONAL
- Stanley Kubrick
- Illuminating Radioactivity
- It’s
NotViolent - Dieter Rams
- 8 Design Masterpieces from Everyday Life
- Eames
- Inside The Head
- Wandering Through New York
- Amplify
- Poor Millennials
- 21st C Gold Rush Refugees
- Huffington Post Articles
- Atlantis World’s Fair
- Jess & Russ
- Snow Fall
- A Game of Shark and Minnow
- Pitchfork Cover Stories
CA Interactive Annual 26
- Single-page Responsive Website (linked to Sandbox)
- Usability link (InVision, Sketch, Adobe XD, or other)
- Case Study PDF
- 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.
- 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?
- 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? - 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. - 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? - 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. - 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. - 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. - 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. - 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. - Usability Testing
Test classmates on the usability and design of your coded website. Make any necessary adjustments. - 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.
- Audit
- research – competitors and inspirational
- content list – words in story, list of possible images and interactions
- brainstorm results
- Define
- target demographic statement
- goals of concept (example: inform, entertain, interact, instruct, persuade. Visual goals. Interaction goals. Usability goals.)
- strategy statement
- Design
- moodboard
- site-map (if there are any interactions or links)
- sketches
- design ideation
- Build
- wireframes
- coding prototype
- 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.
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
- 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)
FINALS/PROJECT 2 UPDATE
We will not be meeting for our final on 20 March 2020. I have updated the project submission deadline to reflect the end of our finals period: 10am on 20 March 2020.
Other than these two changes, expectations for your Project 2 Finals submission remain the same.
For more information regarding the SARS-CoV-2 and COVID-19 situation, and it's impact on this course, please see the VIRUS ONLINE CLASS UPDATE page. Also, you can stay up-to-date with the University via the WWU Coronavirus Information Website.
Please let me know if you have any questions regarding this change in scheduling.
RESOURCES
READING
BOOKS
Html & Css: Design and Build Websites
Implementing Responsive Design
Javascript & Jquery: Interactive Front-End Web Development
100 Ideas That Changed The Web
Don’t Make Me Think!: A Common Sense Approach to Web Usability
MAGAZINES/BLOGS
CODING
RESPONSIVE WEB DESIGN
HTML
CSS
FRAMEWORKS
QUICK CODE LINKS
GRAPHIC TOOLS
UX/UI
USER INTERFACE
WEB TYPOGRAPHY
COLOR
TOOLS
USABILITY + TESTING
CASE STUDIES (STUDENT)
CASE STUDIES (PRO)
EXTRAS
ORGANIZATIONS
MORE EDUCATION
STUDENT EXAMPLES
CASE STUDY EXAMPLES
USER JOURNEY MAPPING
PROJECT 2 INSPIRATION
ROYALTY FREE IMAGES
COURSE INFO
INSTRUCTOR
Jason Olsen
Office Hours: TR 1500-1630
Office: ET 273
olsena7@wwu.edu
https://ajasono.com/360
Prerequisites: DSGN 330, 351
LECTURES
HTML
Page Structure
Navigation
CSS Styling
CSS Positioning
Responsive Web Design
Don't Make Me Think
CSS Animations/Transitions
HANDOUTS/PROJECTS
SANDBOXES
0800
Luke AndersonChloe Halbert
Gwendolyn Lawson
Daniel McMorrow
Jonathan Odom
Kourtney Roberts
Charlie Sperry
Isaiah Valera
Annika Wohlf
1100
Kaz BauerJillian Casebeer
Finn Donnelly
Adam Estrada
Abigail Ford
Madison Gonzalez Boesch
Julia Jacky
Katie Jennings
Brookelyn Jones
Amanda Kelley
Nazar Patriy
Sabine Hunter
Sybil Roberts
Josh Shinoda
Kate Taylor
Rhys Templeton
Kyrie Tong
Katie Tran
