User:Supisara/Final presentation: Difference between revisions

From XPUB & Lens-Based wiki
mNo edit summary
mNo edit summary
 
(28 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Intro ==
== Intro ==
[https://docs.google.com/document/d/1-SpWjJc_fYaZn0XL-gj4mumHAT13e6i9Kai6t9kxLMk/edit Letter 1]
{| class="wikitable"
{| class="wikitable"
|+
|+Approach
! colspan="3" |Process
|-
|-
|[[File:Ref-walls-1.png|center|1. Obstacle|thumb]]
|[[File:Ref-walls-1.png|center|1. Obstacle|thumb]]
|[[File:Wall-3.png|center|2. Objective|thumb]]
|[[File:Wall-3.png|center|2. Objective|thumb]]
|[[File:Tool crack.png|center|3. Approach|thumb]]
|[[File:Tool crack.png|center|3. Approach|thumb]]
|}
{| class="wikitable"
|+
! colspan="4" |Walls
|-
|
|
|
|
|-
|a. Tool
|b. Environment
|c. Activity / movement / interaction
|d. Practice
|}
|}


== Examples ==
== Examples ==
Categories:
# Using tools in ways that they're not meant to be used
# Stretching the potential of small tools and gestures
# (Cross)making as a way to learn
{| class="wikitable"
{| class="wikitable"
|+
|+
!No.
!Category
!Category
!Obstacle
!Wall
!Context
!Approach
!Approach
!Outcome
!Outcome
!Reference
!Reference
|-
|-
|
| rowspan="4" |'''1. Using tools in ways that they're not meant to be used'''
|Tool
|'''1. Software (Adobe alternatives)'''<nowiki> | Pre-XPUB</nowiki>
|Adobe
| rowspan="2" |Former training
|Mimic expected behavior of industry-standard software  in other environments
|Mimic expected behavior of industry-standard software  in other environments
|[https://supisara.info/Software-Misuse-Index Software Misuse]
|[https://supisara.info/Software-Misuse-Index Software Misuse]
|
|
|-
|-
|
|'''2. Input device (mouse/keyboard alternatives)'''<nowiki> | Pre-XPUB</nowiki>
|Tool
|Mouse + Keyboard
|Alternative mouse + keyboard
|Alternative mouse + keyboard
|[https://supisara.info/2019-Flatland 'Flatland']
|[https://supisara.info/2019-Flatland 'Flatland']
|<gallery widths="50" heights="50">
|<gallery widths="50" heights="50">
File:Flatland-1.gif|Conductive thread
File:Flatland-1.gif|Prototype 1
File:Flatland-2.gif|Conductive tape
File:Flatland-2.gif|Prototype 2
</gallery>
</gallery>
|-
|-
|
|'''3. Interaction (annotating)'''<nowiki> | XPUB1––Special Issue #16</nowiki>
|Practice, Tool
|Annotating, annotation tool
|Special Issue #16
|Alternative ways to annotate with the [https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/ Annotation Compass]
|Alternative ways to annotate with the [https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/ Annotation Compass]
|[https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/inverse_annotations/ Inverse Annotations]
|[https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/inverse_annotations/ Inverse Annotations]
|[[File:Inverse annotations 1.png|thumb|Sample annotation method|center]]
|<gallery widths="50" heights="50">
|-
File:Selection process 09.jpg|Annotation sample 1
|
File:Inverse annotations 1.png|Annotation sample 2
|Tool
</gallery>
|
|Special Issue #17
|Alternative way to
|
|
|-
|-
|
|'''4. Electronics component (piezo buzzer)'''<nowiki> | XPUB1––Special Issue #18</nowiki>
|Practice
|Manually manipulating the sound of a piezo buzzer
|Piezo buzzer
|Special Issue #18
|Contact between jumper wire and breadboard
|Weekly Release #1: Breadboard experiments with Jian  
|Weekly Release #1: Breadboard experiments with Jian  
|
|https://vimeo.com/700766101
|-
|-
|
| rowspan="3" |'''2. Stretching the potential of small tools and gestures'''
|Practice
|'''1. Environment (gaming)'''<nowiki> | XPUB1––Special Issue #17</nowiki>
|HTML, CSS, Javascript
|Bitsy to (1) create a loot box environment (2) mimic Etherpad
|Special Issue #18
|[https://issue.xpub.nl/17/unfinished-thoughts/ Unfinished Thoughts]
|Learn coding through Twine and SugarCube
|<gallery widths="50" heights="50">
|[https://issue.xpub.nl/18/05/ Weekly Release #5: Nested Narratives] website
File:Unfinished thoughts.gif|Title
|
File:Unfinished thoughts intro2.gif|Loottery
File:Unfinished thoughts avatar.gif|Player selection
File:Unfinished thoughts gasha.gif|Gashapon
File:Unfinished thoughts etherpad.gif|Etherpad
</gallery>
|-
|-
|
|'''2. File format (.zip)'''<nowiki> | XPUB2––Midwives labor unit</nowiki>
|Tool
|Recreating the zip file opening experience
|BASTL Kastle v1.5
|.zip origami
|Research
|<gallery widths="50" heights="50">
|Learn (1) how a mini modular synthesizer works (2) how front and back ends work
File:Midwives-1.png|Gift pt. 1
|(1) Workbook
File:Midwives-2.jpg|Gift pt. 2
[https://hub.xpub.nl/soupboat/workbook/ (2) Workbook] with Kamo
</gallery>
|
|-
|-
|
|'''3. Exhibition format (book fairs)'''<nowiki> | XPUB2––Exhibition: </nowiki>[http://notjustacollective.nl/#/event/Tc8OLXwAC3Xa9pgsKE9T Not Just a Fair 2023]
|Practice, tool
|Book fair expectations (tables, publications, uniform)
|Exhibition: [http://notjustacollective.nl/#/event/Tc8OLXwAC3Xa9pgsKE9T Not Just a Fair 2023]
|DIY vending machine and publication
|DIY vending machine and publication
|'Street Vendor-Publisher' with Chae
|'Street Vendor-Publisher' with Chae
Line 109: Line 84:
</gallery>
</gallery>
|-
|-
|
| rowspan="4" |'''3. (Cross)Making as a way to learn'''
|Tool
|'''1. Language (HTML, CSS, Javascript)'''<nowiki> | XPUB1––Special Issue #18</nowiki>
|Pen
|Learn coding through Twine and SugarCube
|Research
|[https://issue.xpub.nl/18/05/ Weekly Release #5: Nested Narratives] website
|(1) Drawing as (1a) information processing method, (1b) user behavior observational method; (2) Exhibition as  
|<gallery widths="50" heights="50">
File:Si18-wr5-ref1.png|Interactive fiction example 1
File:Si18-wr5-ref2.png|Interactive fiction example 2
File:Si18-wr5-ref3.png|Interactive fiction example 3
</gallery>
|-
|'''2. Instrument (Bastl Kastle v1.5)'''<nowiki> | XPUB1–– Research</nowiki>
|Learn (1) basic HTML/CSS + how a mini modular synthesizer works (2) how [https://git.xpub.nl/supisara/workbook-front front] and [https://git.xpub.nl/supisara/workbook back] ends work
|(1) Workbook 
[https://hub.xpub.nl/soupboat/workbook/ (2) Workbook] with Kamo
|<gallery widths="50" heights="50">
File:Kastl-workbook-v1.png|(1)
File:Workbook-2.png|(2)
</gallery>
|-
|'''3. Instrument (pen)'''<nowiki> | XPUB1-2–– Research</nowiki>
|(1) Drawing as information processing + user behavior observational methods; (2) Exhibition as interactive storytelling method
|(1) [[User:Supisara/Hackpact|Hackpact]]
|(1) [[User:Supisara/Hackpact|Hackpact]]
(2) Exhibition: Groot Rotterdams Atelier Weekend 2022
(2) Exhibition: Groot Rotterdams Atelier Weekend 2022
|
|<gallery widths="50" heights="50">
File:Pen-study-2.jpg|(1) Pen study 1
File:Pen-study-1.jpg|(1) Pen study 2
File:Pen-study-3.jpg|(2) Exhibition
</gallery>
|-
|-
|
|'''4.''' '''Environment (notebook)'''<nowiki> | XPUB2––Research</nowiki>
|Tool
|A notebook that can start and end whenever you want
|Notebook
|Spineless, coverless notebook
|Research
|[[File:Group 48.png|thumb|left|100x100px]]
|
|
|
|-
|
|Practice
|Writing
|XPUB2: Thesis
|Letter writing to fictional Cross-Making program participant
|Thesis
|
|}
|}
== Thesis - Project ==
==== '''Thesis''' ====
[[File:Kit-1.jpg|none|thumb]]
[https://docs.google.com/document/d/1VQHGE1uvqbxlwoKzbjYMfuBseGjZm210DtOtD4Iip2Q/edit Cross-Making]


== Learning methods ==
==== '''Project''' ====
Making
[[File:Kit-2.jpg|none|thumb]]
[[File:Thesis-process-2.jpg|none|thumb|1. Publication: Letters]]
[[File:Cross-making-wip.png|none|thumb|2. Back-end: [https://hub.xpub.nl/soupboat/supwiki/index.php?title=Main_Page MediaWiki]]]


== Thesis - Project ==
=== Process ===
{| class="wikitable"
{| class="wikitable"
|+
|+
! colspan="3" |A Wall is an Envelope
!Stage
!Output
!Format
!Reference
|-
|-
|[[File:Envelope-1.png|thumb|Wall / Envelope #1|center]]
| rowspan="2" |'''1 –– Project proposal'''
|[[File:Envelope-2.png|thumb|Wall / Envelope #2|center]]
|XPUB Takeaway
|[[File:Envelope-3.png|thumb|Wall / Envelope #3|center]]
|Zine
|}
|<gallery widths="50" heights="50">
<gallery widths="400" heights="400" perrow="2">
File:Takeaway sb 1.png|p.1
File:Kit-1.jpg|Obstacle
File:Takeaway sb 2.png|p.2
File:Kit-2.jpg|Method
</gallery>
|-
|DIYry
|Diary (+ [https://git.xpub.nl/supisara/DIYry git] tryout)
|<gallery widths="50" heights="50">
File:Zine-mockup-2.png|Tool board
File:Zine-mockup-1.png|Bookshelf
File:Diyry-1.png|DIYry sample 1
File:Diyry-2.png|DIYry sample 2
File:Diyry-3.png|DIYry sample 3
</gallery>
|-
| rowspan="2" |'''2 –– Thesis (writing)'''
|1. ChipF(r)ic
|Interactive fiction
|[[File:Cf-mock.png|none|thumb|[[User:Supisara/Project Proposal Update|ChipF(r)ic: Project proposal]]]]<gallery widths="50" heights="50" caption="Interactive fiction components">
File:Cf-wall.png|Walls
File:Cf-powers.png|Powers
File:Cf-habitat.png|Habitats
File:Cf-energy.png|Energy
File:Cf-language.png|Languages
File:Cf-gear.png|Gears
</gallery><gallery widths="50" heights="50" caption="Storyboards">
File:Cf-storyboard-0.png|1
File:Cf-storyboard-1.png|2
File:Cf-storyboard-2.png|3
File:Cf-storyboard-3.png|4
</gallery><gallery widths="50" heights="50" caption="Prototyping">
File:Chip-1.jpg|IC555
File:Chip-2.jpg|The Three Fives Kit: A Discrete 555 Timer
</gallery>
</gallery>
[[File:Cross-making-wip.png|thumb|900x900px|Cross-Making MediaWiki: Version 2023-06-15 at 8.05.21 PM|none]]
=== Process ===
Google Docs ↔︎ Wiki ↔︎ envelopes ↔︎ Google Drive
{| class="wikitable"
|+1. Writing
!No.
!Environment
!Environment: in use
|-
|-
|1
|2. "Dear Maker,"
|[[File:Environment-1.png|thumb|Google Docs: document outline|center]]
|Letter
|[[File:Thesis-process-1.png|thumb|Document outline with Heading 1 and Heading 2|center]]
|
|-
|'''3 –– Thesis (submission)'''
| rowspan="2" |Cross-Making: Cross-Training as a Method for Learning Through Making by Graphic Designers
|Letter
|<gallery widths="50" heights="50" caption="Environments">
File:Environment-1.png|1. Google Docs: document outline
File:Environment-2.jpg|2. DL window envelopes
File:Environment-3.png|3. Google Drive folders
File:Cross-making-wip.png|4. MediaWiki
</gallery><gallery widths="50" heights="50" caption="Process">
File:Thesis-process-1.png|1. Google Docs
File:Thesis-process-2.jpg|2. Converting document headings to envelopes
File:Thesis-archive.jpg|3. Submission for archive
</gallery>
|-
|-
|2
|'''4 –– Thesis (circulation prototype)'''
|[[File:Environment-2.jpg|thumb|HEMA envelopes DL: windows|center]]
|Letter
|[[File:Thesis-process-2.jpg|thumb|1. Converting Headings 1 & 2  → Envelopes|center]][[File:Thesis-archive.jpg|thumb|2. Thesis as envelope bundle (submission for archive)|center]]
|<gallery widths="50" heights="50" caption="Prototypes">
File:Thesis-process-3.png|Google Drive
File:Cm-prototype-1.0.png|Google Docs #1.0
File:Cm-prototype-1.1.png|Google Docs #1.1
File:Cm-prototype-2.png|Google Docs #2
</gallery>
|-
|-
|3
|'''4 –– Project'''
|[[File:Environment-3.png|thumb|Google Drive folders|center]]
|A Wall is an Envelope [working title]
|[[File:Thesis-process-3.png|thumb|Alternative circulation method when the envelopes were running low|center]]
|Letter, [https://hub.xpub.nl/soupboat/supwiki/index.php?title=Main_Page MediaWiki (WIP)]
|<gallery widths="50" heights="50" caption="Wall / Envelope types">
File:Envelope-1.png|Type 1
File:Envelope-2.png|Type 2
File:Envelope-3.png|Type 3
File:Envelope-brick-ref.png|Visual identity
</gallery>
|}
|}
 
=== Mock-ups ===
=== Visual identity ===
[[File:Envelope-brick-ref.png|none|thumb|Reference / starting point: DL envelope|800x800px]]
 
==== Applications ====
{| class="wikitable"
{| class="wikitable"
!Mock-up
!Sample
|-
|[[File:Set-1-test.png|thumb|'''Publication''' –– Envelope + Letter type 1|center|800x800px]][[File:Set-2-test.png|thumb|'''Publication''' –– Envelope + Letter type 2|center|800x800px]][[File:Set-3-test.png|thumb|'''Publication''' –– Envelope + Letter type 3|center|800x800px]]
|-
|-
|'''Stationery''' [[File:Set-1-test.png|thumb|Type 1|center|800x800px]][[File:Set-2-test.png|thumb|Type 2|center|800x800px]][[File:Set-3-test.png|thumb|Type 3|center|800x800px]]
|[[File:Letters-editions-mockup.png|center|thumb|800x800px|'''Publication ––'''  6 mini publications / exercises to choose from / subscribe to]]
|-
|-
|'''Training punch card'''[[File:Punchcard-test.png|center|thumb|800x800px]]
|[[File:Punchcard-test.png|center|thumb|800x800px|'''Publication''' –– Loyalty/punch card as learning incentive]]
|-
|-
|'''Promo'''[[File:Promo-test.gif|center|thumb|Sample 1: Title card]][[File:Promo-test-2.gif|center|thumb|Sample 2: Envelope reveal]][[File:Promo-test-3.gif|center|thumb|Sample 3: Brick selection]]
|[[File:Promo-test.gif|center|thumb|'''Promo''' –– Title card animation]][[File:Promo-test-2.gif|center|thumb|'''Promo''' –– Envelope reveal animation]][[File:Promo-test-3.gif|center|thumb|'''Promo''' –– Brick selection animation (sample content from the ''Dear Pusher'' letter)]]
|}
 
=== Activation ===
{| class="wikitable"
|+
!Graduation show: mock-up
|-
|-
|[[File:Exhibition-test-1.png|center|thumb|800x800px|Letter opening + writing area]]
|[[File:Exhibition-test-1.png|center|thumb|800x800px|'''Graduation Show / Shop ––''' Sample activity 1: letter opening + writing]]
|-
|-
|[[File:Exhibition-test-2.png|center|thumb|800x800px|Sign-up form]]
|[[File:Exhibition-test-2.png|center|thumb|800x800px|'''Graduation Show / Shop ––''' Sample activity 1: sign-up form]]
|}
|}

Latest revision as of 12:21, 19 June 2023

Intro

Letter 1

Approach
1. Obstacle
2. Objective
3. Approach

Examples

Categories:

  1. Using tools in ways that they're not meant to be used
  2. Stretching the potential of small tools and gestures
  3. (Cross)making as a way to learn
Category Wall Approach Outcome Reference
1. Using tools in ways that they're not meant to be used 1. Software (Adobe alternatives) | Pre-XPUB Mimic expected behavior of industry-standard software in other environments Software Misuse
2. Input device (mouse/keyboard alternatives) | Pre-XPUB Alternative mouse + keyboard 'Flatland'

  • Prototype 1

  • Prototype 2

3. Interaction (annotating) | XPUB1––Special Issue #16 Alternative ways to annotate with the Annotation Compass Inverse Annotations

  • Annotation sample 1

  • Annotation sample 2

4. Electronics component (piezo buzzer) | XPUB1––Special Issue #18 Manually manipulating the sound of a piezo buzzer Weekly Release #1: Breadboard experiments with Jian https://vimeo.com/700766101
2. Stretching the potential of small tools and gestures 1. Environment (gaming) | XPUB1––Special Issue #17 Bitsy to (1) create a loot box environment (2) mimic Etherpad Unfinished Thoughts

  • Title

  • Loottery

  • Player selection

  • Gashapon

  • Etherpad

2. File format (.zip) | XPUB2––Midwives labor unit Recreating the zip file opening experience .zip origami

  • Gift pt. 1

  • Gift pt. 2

3. Exhibition format (book fairs) | XPUB2––Exhibition: Not Just a Fair 2023 DIY vending machine and publication 'Street Vendor-Publisher' with Chae

  • Vending machine

  • Publication

  • Staff uniform

  • Publication restock

  • 'Drawing' tools

  • 3D-printed tools

  • Promo

3. (Cross)Making as a way to learn 1. Language (HTML, CSS, Javascript) | XPUB1––Special Issue #18 Learn coding through Twine and SugarCube Weekly Release #5: Nested Narratives website

  • Interactive fiction example 1

  • Interactive fiction example 2

  • Interactive fiction example 3

2. Instrument (Bastl Kastle v1.5) | XPUB1–– Research Learn (1) basic HTML/CSS + how a mini modular synthesizer works (2) how front and back ends work (1) Workbook

(2) Workbook with Kamo

  • (1)

  • (2)

3. Instrument (pen) | XPUB1-2–– Research (1) Drawing as information processing + user behavior observational methods; (2) Exhibition as interactive storytelling method (1) Hackpact

(2) Exhibition: Groot Rotterdams Atelier Weekend 2022

  • (1) Pen study 1

  • (1) Pen study 2

  • (2) Exhibition

4. Environment (notebook) | XPUB2––Research A notebook that can start and end whenever you want Spineless, coverless notebook
Group 48.png

Thesis - Project

Thesis

Kit-1.jpg

Cross-Making

Project

Kit-2.jpg
1. Publication: Letters
2. Back-end: MediaWiki

Process

Stage Output Format Reference
1 –– Project proposal XPUB Takeaway Zine

  • p.1

  • p.2

DIYry Diary (+ git tryout)

  • Tool board

  • Bookshelf

  • DIYry sample 1

  • DIYry sample 2

  • DIYry sample 3

2 –– Thesis (writing) 1. ChipF(r)ic Interactive fiction
ChipF(r)ic: Project proposal
  • Interactive fiction components

  • Walls

  • Powers

  • Habitats

  • Energy

  • Languages

  • Gears

  • Storyboards

  • 1

  • 2

  • 3

  • 4

  • Prototyping

  • IC555

  • The Three Fives Kit: A Discrete 555 Timer

2. "Dear Maker," Letter
3 –– Thesis (submission) Cross-Making: Cross-Training as a Method for Learning Through Making by Graphic Designers Letter
  • Environments

  • 1. Google Docs: document outline

  • 2. DL window envelopes

  • 3. Google Drive folders

  • 4. MediaWiki

  • Process

  • 1. Google Docs

  • 2. Converting document headings to envelopes

  • 3. Submission for archive

4 –– Thesis (circulation prototype) Letter
  • Prototypes

  • Google Drive

  • Google Docs #1.0

  • Google Docs #1.1

  • Google Docs #2

4 –– Project A Wall is an Envelope [working title] Letter, MediaWiki (WIP)
  • Wall / Envelope types

  • Type 1

  • Type 2

  • Type 3

  • Visual identity

Mock-ups

Sample
Publication –– Envelope + Letter type 1
Publication –– Envelope + Letter type 2
Publication –– Envelope + Letter type 3
Publication –– 6 mini publications / exercises to choose from / subscribe to
Publication –– Loyalty/punch card as learning incentive
Promo –– Title card animation
Promo –– Envelope reveal animation
Promo –– Brick selection animation (sample content from the Dear Pusher letter)
Graduation Show / Shop –– Sample activity 1: letter opening + writing
Graduation Show / Shop –– Sample activity 1: sign-up form
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Supisara/Final_presentation&oldid=244262"