(„• ֊ •„)

Monday, 22 Mar

~ idea forming

Schedule

10:05AM - 10:45AM                Hello & Student Introductions

10:45AM - 11:30AM                Stephanie Intro

11:30AM - 12:00PM                Conceptual Introductions: The Interface, Redefined

12:00PM - 12:30PM                Exercise #1 - Interface Annotations

12:30PM - 01:30PM                Lunch

01:30PM - 01:45PM                Exercise #1 - Interface Annotations, Cont.

02:00PM - 02:30PM                Share Annotations, pt. 1

02:30PM - 02:45PM                Coffee Break

02:45PM - 03:30PM                Share Annotations, pt. 2 + Group Discussion

03:30PM - 04:00PM                Questions for Reflection + Assignments

Exercise #1

Interface Annotations

• Pick 3 websites that you interact with on a daily/weekly basis & pick 3 websites from the Web Design Museum or from the Internet Explorers Are.na Channel
• Open up a dictionary app. I love IoS Dictionary app and often use the thesaurus feature. However, you are free to use other ones.

• Collins Dictionary
• Dict.cc
• Urban Dictionary

• Open Figma

• Screenshot the sites at max-width in your workspace.
• Paste the screenshots into Figma.

• Read the interface...

• from left to right,
• up and down.
• Try not to skim!

• Annotate the interface

• Go through each screen and begin to annotate or label the action verbs & language that come to mind.
• Use a thesaurus to find synonyms
• Do not hold back if words you know in other languages come up! Write them down.

• Be prepared to discuss why you chose certain interfaces and the words that came into your heads

Tools

• Workshop info

• Class site

• Are.na

• Get Started
• Living in the Interface Class Are.na channel
  

• Bear Blog

• Get Started
• Bear Blog does not support images. If you want to add images to your blog posts, I recommend adding your image to our are.na channel and then pasting the are.na link in your blog post.

Reflection Questions

• What are some of your favorite words? Write them down in your Bear Blog as a list.
• How have you thought about the ways you live with and in technology since the beginning of 2020?
• How do you live inside the interface?

Assignments & Readings

• Create the accounts in the Tools section

• Send Steph your Are.na account (email) & Bear Blog link on Teams
  

• Read the texts below. We will discuss them together tomorrow.

• While reading, think about how we annotated today.

• Are there sections you want to annotate?
• Are there words and phrases you want to add to the screen-annotations you did today?
• If so, open Figma and screenshot pages from the readings into your workspace; you can further elaborate on your screen annotations as well.
  

• Write reflection in Bear Blog

• Take at least one of the reflection questions & answer with a reflection in your Bear Blog
• Write at least 4 sentences
• Play around with the Markup language
• Optional: Write about something you find interesting from the readings or document your annotations! (We will do this anyway, why not start now?)
  

• Figma

• Rename your workspace and the main layers on your Frames (aka Artboards)
• We want to be intentional with our naming even if it is “just a screenshot”

My website is a shifting house next to a river of knowledge. What could yours be?

By Laurel Schwulst

The Interface Experience: A User’s Guide

By Kimon Keramidas (in Teams “Files”)

The Hand that Rocks the Cradle

By R. Poynor (in Teams “Files”)

。.:☆*:･'(*⌒―⌒*)))

Tuesday, 23 Mar

~ finding the words

Schedule

10:00AM - 10:05AM                Coffee

10:05AM - 11:50AM                Group Reading Discussion

11:00AM - 11:30AM                Annotations, cont.: Vote for fav words, phrases, sentences, etc.

11:30AM - 11:45PM                Introduce Exercise #2 - Layer Statements for Living

11:45PM - 12:30PM                Breakout Rooms for co-creating Layer Statements

12:30PM - 01:30PM                Lunch

01:30PM - 02:00PM                Share & Refine Statements for Living

02:30PM - 03:15PM                Compile Index for Statements

03:15PM - 03:45PM                Introduce Exercise #3

03:45PM - 04:00PM                Questions for Reflection        

Exercise #2

Layer Statements for Living

• Open Figma
• Go to the Layers Panel & find your Workspace

• Tip: Did you rename your layers?! ?!!!  o.O

• Take a screenshot of your layers panel section. Save the screenshot as “Figma_LayersPanel_FirstName”
• Steph will separate you into breakout rooms.
• With your peers, each of you will co-write a statement for living in the interface. You will fill in the statements using the most-liked/favorited words that were chosen in the voting round.
• Fill in this statement:

• _________ for _______ in the Interface
  

• Here is the statement with placeholders:

• MostFavoritedActionVerb         for  NounOfYourChoice     in the Interface

• Have fun with it! We will share your Statements for Living in the group.
• As a group, we will then begin to typeset the statements on Figma in an Index.

• This step will lead us to thinking about linking our Dictionary Prototype. :)

Exercise #3

Experimental SCRUM

• Coming soon :)

Reflection Questions

• How did Day 1’s “Interface Annotations” exercise inform and lead you to how you approached Day 2’s “Layer Statements” exercises?
• Is there a way you imagine the layout and interaction of your Layer Statement?

Assignments & Readings

Teams Virtual Background

• Take time to pick out a Teams virtual background to live in during Wednesday’s workshop!

• Wait how do I change my background?

•  Read this. :)

• But what do I change it to?

• Step 1: Go to the Web Design Museum
• Step 2: Browse through the galleries and take a journey through nostalgic web design
• Step 3: Ask yourself if there are textures, colors, backgrounds, ads, or buttons that interest you. Would you like to live inside of these screens?  
• Step 4: Take a nice quality screenshot of your favorite.
• Step 5: Upload your background and see yourself in the background you’ve uploaded. You’ll live inside this screen during Wednesday’s workshop.

Readings

• Do the readings and visit the project links below.

Are.na

• Pick your most “finished” interface annotation from Day 1. Change the title of the screenshot to “NameOfWebsite_Annotations_FirstName”
• Find the screenshot of your layers panel section. Save the screenshot as “Figma_LayersPanel_FirstName” (if you did not already)
• Add both to the Living in the Interface_Student Exercises channel

• Bonus: Connect your exercise images to other images or channels across Are.na :)  

Bear Blog

• Take at least one of the reflection questions & answer with a reflection in your Bear Blog
• Write at least 2 paragraphs
• How did Day 1’s “Interface Annotations” exercise inform and lead you to how you approached Day 2’s “Layer Statements” and “Experimental CRUD” exercises?

Visual Inspiration

• In your workspace, create a mood board of visual and interactive inspiration for creating the interface for your Living Statements
• Collect your visual inspo & paste it into your Figma board

Skim reading is the new normal. The effect on society is profound by Maryanne Wolf

CRUD Intro

When the Internet Asks You to Fill out a Form, Do it by Paul Ford

Markup Language Basics

Unstable Label by Adit Dhanushkodi

(Optional) Encoding Decoding by Stuart Hall

Wednesday, 24 Mar

~ visualizing the sentences & stories

Schedule

10:00AM - 10:05AM                Coffee

10:15AM - 11:30AM                Virtual Backgrounds We Live In

11:30AM - 11:45PM                Resources + Projects

11:45PM - 12:30PM                Group Reading/References Discussion

12:30PM - 01:30PM                Lunch

01:30PM - 02:00PM                Interface Action Plan + Exercise #3

02:00PM - 05:00PM                Individual Work Time

Exercise #3

Experimental SCRUM

1. Content Discussion

1. Choose a section from the readings, or
2. Choose a text on your own.
3. It must be a text.
   

2. Poetic User Story

1. In software development and product management, a user story is an informal, natural language description of features of a software system. They are written from the perspective of an end user or user of a system. (Wikipedia)
2. Make a “full sentence” User Story from your statement from yesterday
3. This is the template:

1. As a lazy    user, I want to lounge    within the glitch so that I can relax
   

3. User ~Flow~ & Meditative CRUD

1. Think of this next step as a translation step.
2. How will you accomplish your User Story statement from start to finish? This can be a series of steps.
3. How do you translate your design ideas before you start making?

1. Pen and paper? Grab pen and paper!
2. Writing? Open up Bear Blog.
3. Acting it out? Make video clips.
4. Coding it? Take out your text-editor

4. During sketching, ask yourselves the questions of ~Meditative CRUD~

1. Creating

1. How do I create this statement? (e.g. How do I make my glitches in the first place? How do I “add” a glitch?)

2. Read

1. How do I read, retrieve, search or view this statement? (e.g. How do I find my glitch after I have created it? Where does it live?

3. Update

1. How do I update or edit this statement?
2. How do I make different versions of this?

4. Delete

1. How do I remove this?
2. How do I erase this?
3. How do I delete or archive and start fresh?
4. How do I clean up what I’ve created?

4. Figma Interaction

1. Make your interaction sketches come alive in your Figma frames.
2. Use your sketches.
3. Think about Meditative CRUD and your ~User Flows~

Resources

poema circulatorio by Stephanie Marie Cedeño (project rec)

Poke Philosophy by Nicci Yin (project rec)

Cargo 

Mozilla: CSS

readings.design

“As We May Think” by Vannevar Bush

Glitch Feminism: A Manifesto by Legacy Russell (book rec)

。.:╰(*´︶`*)╯｀;:゛;｀;

Thursday, 25 Mar

~ periods, punctuations, & prototyping

Schedule

10:00AM - 10:05AM                Coffee

10:05AM - 11:00AM                Questions & Sharing Progress

11:00AM - 12:15PM                Individual Working Time + Meetings w/ Steph

12:30PM - 01:30PM                Lunch

01:30PM - 03:30PM                ~ Individual Working Time ~

03:30PM - 04:00PM                Quick Regroup + Documentation

04:00PM - 05:00PM                Questions for Reflection        

Tips

Personal Prototyping Space

• In the “Living in the Interface” Team on Figma, add your own project to the Exercises area
• Work in there so that you have more “room to breathe”

Assignments & Final Documentation

Writing - “How did I get here?” (Writing for documenting your process!)

• In your Bear Blog, create a new blog post to document
• Document how you arrived at your interaction from Day 1 to Day 5 :)

• Create a section explaining your finished interaction

• Poetic User Story Title
• Original Statement
• 1-2 sentences on what your interaction does.

• Use the Mark-up Language
• Include images that you made (as links from Are.na) or visual inspiration that inspired you

• Bonus: Add this as a project on your portfolio site!

• Send a link to Steph if you do :)

Prototype Documentation

• Figma

• If you have not already, put your prototype in your own project space
• Name it “YourFirstName’s Prototype” (e.g. Steph’s Prototype)

• The Gif as an Artifact!

• Take a screen recording of your interaction prototype
• Upload your gif to the Living in the Interface_Student Exercises Are.na channel
• Tip: Make a screen recording & use Photoshop (Video Frames to Layers)