Day: February 3, 2022

via GIPHY

Announcement!

Guest Speaker: Sekani Solomon

Thursday, February 3 at 5 p.m.
Register to join online via Eventbrite

Sekani Solomon spent two and a half years at Imaginary Forces before entering the world of freelance, where he worked with various studios such as Buck, Method, Psyop MPC and Apple. He eventually found a home at Cash App in NYC, where he is now a Creative Director and Motion Design Lead.

---

Project 2: Interactive Storytelling

Due today: Story choices, Competitive/Inspirational Research, Content Breakdown of story.

Next Steps:

See Steps 4–7 PDF here

4. Brainstorming (Take 8-10 min on the Free Write) 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? Then create a Do’s and Don’ts list of what you want and don’t want to do with this project to help focus your outcome.

5. 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.

6. Written Strategy Statement and Goals
Based on your competitive/inspirational research, brainstorming, story content breakdown, and defined audience – write your concept for how you will represent the story you were given. What are the goals of the website for the story and for the user?

7. Moodboard
Collect images, colors, type specimens, etc. any any other visual inspiration that represents the personality of your story. Then compile them into a moodboard that you will use to inform your design decisions.

---

Media Queries

Media Query Help

• RWD Web Design Media Queries
• CSS3 Media Queries
• Example of Responsive Webpage Layout
• Min-width | Max-width
• Responsive Top Nav
• Full Screen Overlay Nav
• Responsive Header
• Responsive Images

Float/Flexible Layout Reminders

• CSS Website Layout
• CSS Layout – float and clear

Resources

• Designing For Breaking Points
• Correct Way to do CSS Break Points
• Viewport MetaTag Explained

---

Exercise 4: Media Queries

In-class Demo and example layout files

---

Due Next Class

Project 2: Interactive Storytelling

• Complete Steps 4–7
  1. 4-step Brainstorm
  2. Target Demographic Statement
  3. Moodboard
  4. Written Concept and Goals (a.k.a – “elevator pitch”)
     • What are the goals for the user and of the narrative?
     • What is it? Who’s it for? Why? and How are you doing it?

Exercise 4: Media Queries