State of the Art Documentation✨

Week 1 of Fabricademy 2024 was both exciting and intense! 🚀

By the end of the session, I was buzzing with inspiration from all the amazing past student projects. My brain was exploding with ideas I could explore! 💡

Two projects that truly caught my heart were:

Albertre Bojesen’s Seaweed Dialogues – Her exploration of seaweed felt so poetic and thoughtful! 🌊

Maite Sosa Methol's Movimiento – This one stole my heart completely! 💙

My own ideas are starting to take shape around the intersection of fashion and tech. I’m thinking of incorporating moving lights, bio materials, and more as I continue to learn. Something on the lines of theatrical fashion with the ocean theme is definitely brewing... 💡

Diving into the Assignment 📁

State of the Art – Project Management & Documentation 📝

I eagerly jumped into the first assignment, which focused on project management and documentation. After exploring the assessment criteria from the Fabricademy website.

Coming from the creative industry and someone who has been in design education for over a decade and a half the importance of documentation is like second nature to me.

Good documentation not only helps you reflect on your own process but also provides valuable insights for others (clients, collaborators, future-you!).

Here's what we're working towards for this week:

Building a documentation website: This site will showcase everything I do during Fabricademy.

Documenting everything: Using notion(to save resource links), Google docs to write content, Screenshots!! & my handy notebook

Working on code: Using Gitlab, Markdown and Visual Studio code

I haven’t coded since 2007, so this was a moment of "Oh my god, can I even do this?" 😅😭😅😭

After some calming tunes and going through the videos shared by my mentor Rico (he's a rockstar ⭐), I got to work!

Tools Used 🛠️

1. To learn how to get started Fabricademy's Video Guide
2. To learn Markdown The Only Markdown Course You will Ever Need
3. Understanding Visual Studio Code & Markdown Read This
4. Learning How to Use VS Code Tutorial For Beginners
5. Downloading Git On Mac How To Install Git
6. Markdown Cheat Sheet Guide To Type in Markdown

As I went through the videos, I made some personal notes 📝 on key points I found important. - Using the notion app and my notebook

The first thing I focused on was understanding the different file types 📂 available and how each one functions. This felt like a crucial foundation before diving deeper into the process. 🚀

1. MKdocs.yml : to personalising the website - links in the footer, header colour etc
2. Docs : contains all your markdown documents (all files need to be in this folder)
3. Docs/index.md : homepage - profile
4. Gitlab-ci.yml : instructions for how to build and publish the website

This is How I tackled the overwhelming feeling😅😅😅

I was teary-eyed at first with the amount of new info 🥺. But, if you're a coding newbie like me, 💪🏻 Here's a quick rundown of the tools I used:

1. Git: A version control system that helps track changes in your code.

2. VS Code: A lightweight, powerful code editor.

3. Markdown: Easy-to-use language for writing formatted documents.

4. Adobe Illustrator: Perfect for creating collages of image, apart from vectors

5. XN Convert: Reduced image sizes from MB to KB in seconds.

6. Notion: An all-in-one workspace for keeping notes and ideas.

A little more details of what these tools do :

Git: A version control system that helps track changes in code, allowing multiple people to collaborate on projects while maintaining a history of revisions. It is essential for managing both small and large software development projects.

To use Git on mac press command + spacebar to open spotlight and write Terminal

Terminal : Text-based interface that allows you to interact with your computer using commands instead of a graphical user interface (GUI). It is a command-line environment where you can execute various tasks like navigating through files, running scripts, or installing and managing software. On macOS, the Terminal is based on Unix, which provides powerful functionality for developers and system administrators. I will show you how I used this as you proceed below 😅

Visual Studio Code (VS Code): A powerful, lightweight code editor developed by Microsoft, supporting various programming languages. It includes features like debugging, syntax highlighting, and built-in Git, making it ideal for coding, testing, and collaboration.

Markdown: A lightweight markup language that makes formatting text easy and intuitive. It is commonly used for creating README files, documentation, and blog posts, offering a simple syntax for headings, lists, and links without the need for complex HTML.

Adobe Illustrator: A vector graphics editor used by designers for creating digital illustrations, logos, and artwork. Its user-friendly tools make it easy to create a visual collage by combining images, illustrations, and text, offering creative control over every element on the artboard. You can also use Inkscape or Canva which is free

XN Convert: A batch image conversion tool that allows users to resize, convert, and apply filters to multiple images simultaneously. It supports a wide range of formats and offers powerful options for image processing, saving time for bulk image editing tasks.(This was a life saver to convert all the heavy images from mb to kb) 🔥🔥🔥

Step-by-step Process 📋

Step 1 : Making Sure Everything Is Installed

1. Opened homebrew & copied the code

2. After copying the code, using command + space bar to open spotlight and searched for Terminal & pasted the code

3. There was an indication that asked me for my desktop password. Adding that automated some codes

4. I was then prompted to press enter, a few more code lines with the instructions to copy paste the code that was provided to help add homebrew as a path

5. After this more auto codes appeared post which I added the code “brew install git” and the git was installed.

6. After this I added these two codes for my username & id, faced an error for my "" not being correct- an error I fixed after googling the problem

7. Went on the fablab website and copied the HTTPS link and pasted to Terminal

8. This action cloned all the folders from the website to a folder named shefali-desai on the desktop

1. I finally opened VS Code & added the folder to my workspace on the app & successfully cloned the repository on the VS code app

2. Did a small test to see if it worked 😅

3. Checked the changes & and added them to the staged changes & clicked on commit & sync (As my mentor Rico showed me) & waited patiently for it to sync 🤞🏻🤞🏻

4. A few seconds later I went on the site and hit refresh and it worked!!! 🥳

I treated myself with a chocolate to celebrate this small milestone! 🍫🥳 Feeling confident about this now !

Step 2 : Prepping The Content

I dove into creating my About Me page with excitement! 💻✨ To keep things organized, I started by writing all my content in a Google Doc first. Once I was happy with the wording, I was ready to move forward!

Next, I gathered all the images that went along with my content and created a folder on my desktop 📂.

From there, I opened Adobe Illustrator and began creating collages for the images I planned to upload. My goal was to show multiple visuals in a neat way without overwhelming the page, so I decided to design collages that grouped several images together while keeping it clean and minimal. 🎨

Breaking It Down into Artboards

I organized my content into five sections, each with its own artboard in Illustrator:

1. About Me – a snapshot of who I am 💁🏻‍♀️.

2. My Work – a highlight of my professional journey.💼

3. Achievements – moments I’m proud of 🏆.

4. Educator Profile – sharing my experience in design education 🎓.

5. Artist Side – showcasing my creative flair 🎨.

Once the collages were complete and looking awesome, I exported them as JPGs. However, the image sizes were way too large, so I downloaded XN Converter to fix that problem.

Here’s what I did:

1. Uploaded the images by clicking on Add Files.

2. Went to Output, selected JPG as the format.

3. In Settings, reduced the image quality to 10 (trust me, they still looked good!).

4. Clicked Convert at the bottom, and in 3 seconds, five images went from a total of 13.50 MB to just 4.79 MB! 🎉

With my content and images ready, it was time to roll up my sleeves and start coding! 😎💪

Step 3 : Getting The Code To work 👾

I opened VS Code, navigated to the index.md file, and used the split editor view to see my coding come to life as I worked.

Having the basic template already set up made things much easier – all I had to do was paste my content from the Google Doc and start formatting

Using Markdown and the cheatsheet, I was able to:

1. Make text bold and italic

2. Add links to text 🔗,

3. Resize text to make certain parts stand out

Adding Images: To add my images, I simply dragged and dropped them into the images>>home folder in VS Code.

From there, I added the image path into the code, as I typed the code the image snugly fit to size letting me skip the width and alignment details, and voilà – my images were in place! 🖼️

I continued this process until all the content and images were in.

It was finally time for the finishing touches...

I updated the colours to black as primary and deep purple as accent of my site and added my social links on the footer template. To do this I clicked on mkdocs.yml and followed the template and replaced the content with details of my social media handles

I wanted to update my website’s icon and favicon to give it a personal touch. I followed the instructions from this material guide

and changed my logo and favicon to a star ⭐ – perfect, right? 😅

---

With that, my Welcome Page was live and looking great! 🎉

I followed the same steps to create the page you're currently reading, and I couldn’t be more excited about how it turned out!

It was such a fun and creative process, and seeing everything come together was worth all the effort. 😅🥳

Reflections: 🪞

1. Don’t panic! If something goes wrong, take a breath, read the error message, and either Google it or ask your mentor. It’s all part of the learning journey.

2. Screenshot everything like you’re conducting a science experiment. Or, if that's too much, record your screen while working and go back for screenshots later.

3. Find your personal workflow for documentation. What process makes you feel organized and stress-free? Is the way to go For me having the content, images and the basic learning ready made it easier to then just dive in and begin

4. Everything can be Googled. There are tons of tutorials and resources out there. You're not alone! 👩‍💻

With that week 1 comes to an end & I'm looking forward to the upcoming learnings of week 2! 🥳 🥳