User:Supisara/Final presentation: Difference between revisions

From XPUB & Lens-Based wiki
mNo edit summary
mNo edit summary
 
(15 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]]
Line 9: Line 9:
|}
|}


== Method ==
== Examples ==
{| class="wikitable"
Categories:
|+
 
! colspan="4" |Walls
# Using tools in ways that they're not meant to be used
|-
# Stretching the potential of small tools and gestures
|[[File:Envelope-1.png|thumb|(A) Tool / Instrument|none]]
# (Cross)making as a way to learn
|[[File:Envelope-1.png|thumb|(B) Environment|none]]
|[[File:Envelope-1.png|thumb|(C) Interaction|none]]
|[[File:Envelope-1.png|thumb|(D) Standardized practice|center]]
|}


=== Examples ===
{| class="wikitable"
{| class="wikitable"
|+
|+
!No.
!Category
!Wall
!Wall
!Category
!Context
!Approach
!Approach
!Outcome
!Outcome
!Reference
!Reference
|-
|-
|
| rowspan="4" |'''1. Using tools in ways that they're not meant to be used'''
|Software (Adobe)
|'''1. Software (Adobe alternatives)'''<nowiki> | Pre-XPUB</nowiki>
|A, D
| rowspan="2" |Pre-XPUB
|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>
|Input device (mouse/keyboard)
|A, C, D
|Alternative mouse + keyboard
|Alternative mouse + keyboard
|[https://supisara.info/2019-Flatland 'Flatland']
|[https://supisara.info/2019-Flatland 'Flatland']
Line 49: Line 38:
</gallery>
</gallery>
|-
|-
|
|'''3. Interaction (annotating)'''<nowiki> | XPUB1––Special Issue #16</nowiki>
|Interaction (annotating)
|A, C
|XPUB1––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]
Line 60: Line 46:
</gallery>
</gallery>
|-
|-
|
|'''4. Electronics component (piezo buzzer)'''<nowiki> | XPUB1––Special Issue #18</nowiki>
|
|Manually manipulating the sound of a piezo buzzer  
|
|XPUB1––Special Issue #17
|
|
|
|-
|
|Electronics component (piezo buzzer)
|
|XPUB1––Special Issue #18
|'Manipulating' the sound of a piezo buzzer via 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'''
|Language (HTML, CSS, Javascript)
|'''1. Environment (gaming)'''<nowiki> | XPUB1––Special Issue #17</nowiki>
|
|Bitsy to (1) create a loot box environment (2) mimic Etherpad
|XPUB1––Special Issue #18
|[https://issue.xpub.nl/17/unfinished-thoughts/ Unfinished Thoughts]
|Learn coding through Twine and SugarCube
|[https://issue.xpub.nl/18/05/ Weekly Release #5: Nested Narratives] website
|
|-
|
|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 
[https://hub.xpub.nl/soupboat/workbook/ (2) Workbook] with Kamo
|<gallery widths="50" heights="50">
|<gallery widths="50" heights="50">
File:Kastl-workbook-v1.png|(1)
File:Unfinished thoughts.gif|Title
File:Workbook-2.png|(2)
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>
</gallery>
|-
|-
|
|'''2. File format (.zip)'''<nowiki> | XPUB2––Midwives labor unit</nowiki>
|File format (.zip)
|
|XPUB2––Midwives labor unit
|Recreating the zip file opening experience  
|Recreating the zip file opening experience  
|.zip origami
|.zip origami
Line 107: Line 71:
</gallery>
</gallery>
|-
|-
|
|'''3. Exhibition format (book fairs)'''<nowiki> | XPUB2––Exhibition: </nowiki>[http://notjustacollective.nl/#/event/Tc8OLXwAC3Xa9pgsKE9T Not Just a Fair 2023]
|Exhibition format (book fairs)
|
|XPUB2––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 123: Line 84:
</gallery>
</gallery>
|-
|-
|
| rowspan="4" |'''3. (Cross)Making as a way to learn'''
|Instrument (pen)
|'''1. Language (HTML, CSS, Javascript)'''<nowiki> | XPUB1––Special Issue #18</nowiki>
|A
|Learn coding through Twine and SugarCube
|XPUB1-2–– 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>
|Notebook
|A notebook that can start and end whenever you want
|A
|Spineless, coverless notebook
|XPUB2––Research
|[[File:Group 48.png|thumb|left|100x100px]]
|
|
|
|-
|
|Writing
|
|XPUB2––Thesis
|Letter writing to fictional Cross-Making program participant
|Thesis
|
|}
|}
== Thesis - Project ==


== Thesis - Project ==
==== '''Thesis''' ====
{| class="wikitable"
[[File:Kit-1.jpg|none|thumb]]
|+
[https://docs.google.com/document/d/1VQHGE1uvqbxlwoKzbjYMfuBseGjZm210DtOtD4Iip2Q/edit Cross-Making]
! colspan="3" |A Wall is an Envelope
 
|-
==== '''Project''' ====
|[[File:Envelope-1.png|thumb|Wall / Envelope #1|center]]
[[File:Kit-2.jpg|none|thumb]]
|[[File:Envelope-2.png|thumb|Wall / Envelope #2|center]]
[[File:Thesis-process-2.jpg|none|thumb|1. Publication: Letters]]
|[[File:Envelope-3.png|thumb|Wall / Envelope #3|center]]
[[File:Cross-making-wip.png|none|thumb|2. Back-end: [https://hub.xpub.nl/soupboat/supwiki/index.php?title=Main_Page MediaWiki]]]
|}
<gallery widths="400" heights="400" perrow="2">
File:Kit-1.jpg|Obstacle
File:Kit-2.jpg|Method
</gallery>
[[File:Cross-making-wip.png|thumb|900x900px|Cross-Making MediaWiki: Version 2023-06-15 at 8.05.21 PM|none]]


=== Process ===
=== Process ===
Line 171: Line 136:
!Format
!Format
!Reference
!Reference
!
|-
|-
|1 –– Project proposal
| rowspan="2" |'''1 –– Project proposal'''
|XPUB Takeaway
|XPUB Takeaway
|Zine
|Zine
|
|<gallery widths="50" heights="50">
|
File:Takeaway sb 1.png|p.1
File:Takeaway sb 2.png|p.2
</gallery>
|-
|-
|
|DIYry
|DIYry
|Diary
|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)
| rowspan="2" |'''2 –– Thesis (writing)'''
|ChipF(r)ic
|1. ChipF(r)ic
|Interactive fiction
|Interactive fiction
|<gallery widths="50" heights="50">
|[[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-wall.png|Walls
File:Cf-powers.png|'Powers'
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>
|
|-
|-
|''Dear Maker,''
|2. "Dear Maker,"
| rowspan="3" |Letter
|Letter
|
|
|
|-
|-
|3 –– Thesis (submission)
|'''3 –– Thesis (submission)'''
|Cross-Making: Cross-Training as a Method for Learning Through Making by Graphic Designers
| 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>
|-
|-
|4 –– Project
|'''4 –– Thesis (circulation prototype)'''
|
|Letter
|
|<gallery widths="50" heights="50" caption="Prototypes">
|
File:Thesis-process-3.png|Google Drive
|}
File:Cm-prototype-1.0.png|Google Docs #1.0
Google Docs ↔︎ Wiki ↔︎ envelopes ↔︎ Google Drive
File:Cm-prototype-1.1.png|Google Docs #1.1
{| class="wikitable"
File:Cm-prototype-2.png|Google Docs #2
|+1. Writing
</gallery>
!No.
!Environment
!Environment: in use
|-
|-
|1
|'''4 –– Project'''
|[[File:Environment-1.png|thumb|Google Docs: document outline|center]]
|A Wall is an Envelope [working title]
|[[File:Thesis-process-1.png|thumb|Document outline with Heading 1 and Heading 2|center]]
|Letter, [https://hub.xpub.nl/soupboat/supwiki/index.php?title=Main_Page MediaWiki (WIP)]
|-
|<gallery widths="50" heights="50" caption="Wall / Envelope types">
|2
File:Envelope-1.png|Type 1
|[[File:Environment-2.jpg|thumb|HEMA envelopes DL: windows|center]]
File:Envelope-2.png|Type 2
|[[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]]
File:Envelope-3.png|Type 3
|-
File:Envelope-brick-ref.png|Visual identity
|3
</gallery>
|[[File:Environment-3.png|thumb|Google Drive folders|center]]
|[[File:Thesis-process-3.png|thumb|Alternative circulation method when the envelopes were running low|center]]
|}
|}
 
=== Mock-ups ===
=== Visual identity ===
[[File:Envelope-brick-ref.png|none|thumb|Reference / starting point: DL envelope|800x800px]]
 
==== Applications ====
{| class="wikitable"
{| class="wikitable"
!Category
!Sample
!Mock-up
|-
|-
|'''Stationery'''
|[[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]]
|[[File:Set-1-test.png|thumb|Envelope + Letter type 1|center|800x800px]][[File:Set-2-test.png|thumb|Envelope + Letter type 2|center|800x800px]][[File:Set-3-test.png|thumb|Envelope + Letter type 3|center|800x800px]]
|-
|-
|'''Training punch card'''
|[[File:Letters-editions-mockup.png|center|thumb|800x800px|'''Publication ––'''  6 mini publications / exercises to choose from / subscribe to]]
|[[File:Punchcard-test.png|center|thumb|800x800px|Sample 1: Loyalty card as learning incentive]]
|-
|-
|'''Promo'''
|[[File:Punchcard-test.png|center|thumb|800x800px|'''Publication''' –– Loyalty/punch card as learning incentive]]
|[[File:Promo-test.gif|center|thumb|Sample 1: Title card animation]][[File:Promo-test-2.gif|center|thumb|Sample 2: Envelope reveal animation]][[File:Promo-test-3.gif|center|thumb|Sample 3: Brick selection animation (sample content from the ''Dear Pusher'' letter)]]
|}
 
=== Graduation Show & Shop ===
 
==== Activation ====
{| class="wikitable"
|+
!Category
!Mock-up
|-
|-
| rowspan="2" |'''Show'''
|[[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)]]
|[[File:Exhibition-test-1.png|center|thumb|800x800px|'''Sample activity 1:''' letter opening + writing]]
|-
|-
|[[File:Exhibition-test-2.png|center|thumb|800x800px|'''Sample activity 2:''' sign-up form]]
|[[File:Exhibition-test-1.png|center|thumb|800x800px|'''Graduation Show / Shop ––''' Sample activity 1: letter opening + writing]]
|-
|-
|'''Shop'''
|[[File:Exhibition-test-2.png|center|thumb|800x800px|'''Graduation Show / Shop ––''' Sample activity 1: sign-up form]]
|[[File:Letters-editions-mockup.png|center|thumb|800x800px|'''Sample publication 1:''' 6 mini publications / exercises to choose from / subscribe to]]
|}
|}

Latest revision as of 13: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"