Skip to content

1. State of the art, project management and documentation

⚔︎Things I'm thinking about going into Fabricademy⚔︎

Here are some people and things that are inspiring me. I'm not sure where the Fabricademy journey will take me but this is what lives on my Desktop and in my dreams. I am going to keep compiling images at the beginning of each week on Pintrest and uploading scans from my sketchbooks.

I am very interested in Speculation, and how it is used in contexts such as contemporary art, design and material research. I'm excited about the idea of fictioning and speculatively designing for different worlds. These could be utopian, dystopian, posthuman or the worlds of non-human life. Because of this, I am going to be thinking a lot about storytelling through objects, how collective wisdom is communicated through societies and also about cultural production such as myths, ritual and religion and how these things help us construct our understanding of the world.

I am inspired by the work of Marguerite Humeau, OXMAN, Hannah Imlach and Pakui Hardware.

margueritehumeau FOXP2, Marguerite Humeau, Nottingham Contemporary, 2017.

oxman Project Lazarus, OXMAN, London Design Museum, 2016.

moodboard

  1. Hannah Imlach, Folding Glacial Boat, 2014.
  2. Marguerite Humeau, Guardians of the Fungus Garden, 2023.
  3. OXMAN, Project Aguahoja, 2014-2020.
  4. Pakui Hardware, Underbelly, MdbK Leipzig, Germany, 2019.
  5. Images from notebooks and sketchbooks including Marguerite Humeau, Studio Drift and Alison Wilding.
  6. OXMAN, Project Silk Pavillion, MoMA, New York, 2020.

Moreover, I am eager to incorperate interactive and immersive elements into my sculpture through electornics, soft robotics and e-textiles. I am interested to see how movement and light can create an immersive and sensory experiences for an audience and help to build a world within an installation. The kinetic sculpture of artists such as Casey Curran, Studio Drift, Jason Bruges and William Darrell inspire me with their attention to embodied experience and the effect of movement on the senses. This also plays into my fascination with forms in nature and using biomimicry in my work. I would love to see what movement can add to this exploration.

Because I am thinking about movement, I am also excited to learn about techniques such as pattern making and textile scaffolds. I am starting to think a lot about sculpture for performance and making objects that interact with the body. The interdisciplinary nature of Iris Van Herpen's work and her study of the human body inspires me.

irisvanherpen

Iris Van Herpen, Weightlessness of the Unknown

Finally, I am curious about the material and aesthetic properties of biomaterials and the affects they can produce. I am particularly interested in materials that change state or bare evidence of their temporality. This is beause I am thinking a lot about material metamorphosis and how our bodies and constructed world are increasingly changing material, in a state of hybridisation or becoming immaterial.

I have been looking at artists such as Sophie Mei Birken, Urte Janus and Delphine Lejeune's use of materials and their focus on processes such as decomposition, crystallisation and reconstitution.

materialsmoodboard

  1. Sophie Mei Birkin, hǎidǐlāoyuè.
  2. Urte Janus, In Exchange to Ages, JCDecaux Art Prize - National Gallery of Art, Vilnius, Lithuania, 2023.
  3. Delphine Lejeune, Blossoming Garden,2021.
  4. Urte Janus, I Grew Up In a Haunted House - 72 Rivington street, London, 2022.
  5. Sophie Mei Birkin

I am inspired by alumni projects such as: Amanda Jarvis, Monteserrat Ciges and Ninon Lizé Masclef. These beautiful projects look to nature and imitate and augment with the use of biomaterials and digital fabrication and I am in awe of their effects.

☆Documentation Workflow☆

For the first week, our main task was to get to know the many platforms we would be using to document our work, communicate with each other and recieve feedback:

  • Fablabs.io is a network that maps out global labs and gives us an easy, single log in for all the platforms we use.

  • GitLab is an open source service which hosts our documentation websites. We can publish and edit our sites through this platform.

  • NuEval is where our work will be evaulated by our instructors and we can recieve feedback.

  • Mattermost is a open source alternative to sites such as Whatsapp. Through this platform we can chat in channels relating to different assignments.

After this, we had lectures on Visual Documentation and how to use Gitlab to build our personal websites. We will use these to document our fabricademy journey. I started by looking at past alumni websites and rewatching the weekly lectures so that I could really understand what was possible with my own website, both aesthetically and structurally.

Assignment Criteria: Week 1

  • Build a documentation website describing you and your motivation for the textile-academy, including your previous work

  • Upload the documentation to your project page on class.textile-academy.org

  • Add references and research based on the topic of your interest

  • Learn how to upload images, videos, references and how to use Markdown and Gitlab

  • Learn about the fab lab processes, booking system, usage, machine demos, tools and safety rules

  • Customize your website and document how you did it (extra credit)

Top Tip!!

A life changing tip from Carolina Beirão: you can scan documents with your iphone! This blew my tiny mind ✹. You just need to go into your notes app, click on the camera icon and press scan documents!! This allowed me to easily edit my hand-drawn illustrations in photoshop and upload them.

Inspiration!!!

Alumni Pages that inspired my website customization:

  • For compliling images and clear captioning- Riley Cox

  • For visually appealing layout and clear documentation- Emma Picanyol

  • For nice, nice visuals - Alberte Bojesen

  • For explaining and structuring your documentation clearly - Asli Aksan

⚙︎Get Coding⚙︎

I was initally intimidated by the task ahead as I had never so much as made a Squarespace website. However, once I got my head around what a website really was everything made much more sense.

* A website is written in HTML code * A browser reads this code to render the content * HTML is a complex language, so we use Markdown , a simple text language we can learn. This is translated into HTML using the tool Mkdocs . This way we can make simple edits to our website using Markdown language *(see cheat sheet below)*. * With CSS we can add styling e.g colours, font size and layout that is beyond the Theme:_Materials_ in our case. We can create CSS classes which allow us to apply styling properties to specific HTML elements (see my experients with CSS below). 

MARKDOWN CHEAT SHEET

Header 1 : #
Header 2 : ##
Header 3 : ###

Italic: _TEXT_ or *TEXT*
Bold: **TEXT** or __TEXT__
Bullet Point: *(space)TEXT
Horizontal Rule: ---

To add a Link: [TITLE](URL)

To add an Image: ![IMAGE DESCRIPTION](PATHWAY TO IMAGE/IMAGE NAME. EXTENSION)
 * Remember to resize and optimize your image before uploading. You can optimize with: https://tinypng.com/

 * To explain how to instruct Markdown where your image is (pathway) I have created an infographic and uploaded it below this cheatsheet.

Two images side by side: 
![describe what you see in this image](../images/home/sample-image.jpg){ width=300 align=left }
![describe what you see in this image](../images/home/sample-image.jpg){ width=300 align=right }

To add a Table: 
|| (NUMBER OF COLOUMNS)
First Header | Second Header (HEADERS)
------------ | ------------- (BORDER)
Cell 1 | Cell 2
 Row 1 of Cell 1 | Row 2 of Cell 2

To hide something in your code (it won't publish to site): <!-- NOTE TO SELF -->

For emojis, here is the cheat sheet: https://www.webfx.com/tools/emoji-cheat-sheet/

NOT MARKDOWN, but good to know HTML

Highlight: <p><b><mark style="background-color: #HEXCOLOURCODE;"> TEXT
</mark></b></p>

Caption: <p><font size=1>TEXT</font></p>

To change the font size of one section: 
<h1 style= "font-size: 24px;"> TEXT 
</h1>

infographic

Tools

⌨︎Uploading Media⌨︎

Upload a Video

To upload a video from Youtube:

Youtubescreenshot

Go to video> Press Share> Embed > Take the begining of the embed code and place in this phrase of code adjusting size and border accordingly: 

<iframe width="560" height="315" src="EMBED LINK" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

or use an embed code generator such as iframe generator

Upload a Gif

I made my gifs using Ezgif. It was super easy to load photos or video and it will generate a gif for you. Make sure to resize and optimize the gif using the tools in Ezgif.

Ezgifscreenshot

The code to upload a gif is the same as an image: 

![gifdescription](.pathwaytogif.gif)

Upload Google Slides

  1. To upload a google slide portfolio, I made a pdf of my portfolio using Canva.
  2. Upload the pdf to Google Drive.
  3. Ensure that the file is set to public.
  4. Press share> Copy Link
  5. Insert the Link into this code: 
    <iframe src="LINK" width="640" height="380" allow="autoplay"></iframe>

or use an embed code generator such as iframe generator

This can be done easily in the mkdocs.yml file. You just upload the image as you would any other. However, make sure that the image is square and has a transparent background.

E.g in Mkdocs: 

logo: images/home/iconcat.png
favicon: images/home/iconcat.png

❤︎Editting the CSS❤︎

I learnt how to edit a few things in the CSS to style beyind the Materials theme. Below are a few extras that I added with the help of Asli, Michelle and Carolina.

Changing colours

You can change the colours using the set ones templated by the Materials theme on the Mkdocs.yml page.

mkdocs.ymlscreenshot

You can see the available colours here on Squidfunk.

Or you can load custom colours by editing the CSS and using a Hex Colour Code.

  1. Set the primary colour to custom
  2. Go to Docs> Stylesheets> extra CSS.

  3. Here you can write specific styling instructions. To set the primary colour to a custom colour use this code: 

    :root {
--md-primary-fg-color:#HEXCODE
}

  4. To find the Hex Code you can use photoshop or a site like this: Hexcolorcodes.

To change the colour of specific elements e.g Headers, you need to edit the CSS as so: 

.md-typeset h1 {
 color: #HEXCODE;
}

You can find out what code to use by Inspecting your webpage and clicking on the specific part you want to change. Like so:

inspectscreenshot

Changing fonts

You can also change the font of your text. You can search in google fonts, find the font you like and then change it on mkdocs.yml page.

To make specific sections a different font, e.g your header 1 or 2 you need to add styling edits to the CSS.

  1. Go to google fonts and select a font.
  2. Click >get fonts>get embed code and select import.
  3. Add the embed code at the head of your html and then add instructions in the CSS to style the specific headings with this font.

googlefontsscreenshot

CSSscreenshot

To center images

This is not possible with Markdown so you need to edit the CSS. Use this addition to your CSS: 

.centerImage {
   margin: 0 auto;
}

When you go to insert the image you can alignit to center simply by adding this to your image: 

<figure markdown class="centerImage">

![metalsculpture](images/home/biopic.png)

</figure>

To align a specific element of HTML

Finally, we worked out how to align specific elements such as Headers or paragraphs so they will behave the same way across your site. Again this is by editting the CSS. It works similarly to changing the colour or font of a specific element. You can find out what you need to write by Inspecting your page (as explained above).

inspectscreenshot

For instance if you want to align all Header2s to the right: 

.md-typeset h2 {
  text-align: right;
 }

Or if you want to justify all paragraphs: 

p {
  text-align: justify;
}