1. State of the art, project management and documentation¶
INTRODUCTION¶
In the first week of this journey:
-
We got to know more about FABRICADEMY community, and learned about MARKDOWN language.
-
The Mkdocs which converts Markdown files into a website published via GitLab Pages.
-
The best way for the documentation so that every one can prepare their own website.
Research & Ideation¶
When I was preparing to launch Dosam Studio(rsearch & design studio) I read many articles and read about many projects, some of which were successful while other project were failed, to understand the reason behind success and failure which is summerized in two points:
-
scientific: sometimes some of scientific steps or moves due to ambition to acheive greater accomplishments, or due to misscalculated step or external circumstances, caused failure to the whole project.
-
Adminstrative: which related to the project it self, such as clients, funding, marketing,... etc.
I included titles and links for two articles below¶
-
"Biomaterials Reshape The Future of Fashion" an article talking about many types of biomaterials successful projects, you can read it through the Link
-
"Google Jacquard's Levi's Jacket Isn't All That Smart, Or That Great" The article analyzes some aspects of the product, its problems, and its innovations after feedback from many users/reviewers and administrators who indicated that the project did not meet expectations or had weak aspects.
you can read it through the Link
Over the past period, I tried to summarize the trend of design futur especially fashion deign through a mind map that includes the intersection between the main trend.
credited to DOA'A ALHINTY.!!
References & Inspiration¶
The search for inspiration never stops in the world of design, especially with the constant and rapid development. As time passes, you find yourself expanding your search for sources of inspiration and design trends. To keep my search focused and useful, I'v divided the topics into different moodboards based on specializations, the following boards are examples about that which containig inspiration ideas and inspiring figure in its field:
Image reference¶
- BIOMATERIALS:
- FAshion FUTURISM:
siyunhuang pintrest official account
- MEDIA & DIGITAL:
refikanadol instagram official account
AI GENERATED PHOTO FROM PINTREST.
Design Project Timeline¶
Every design project goes through these stages to achieve the best results.
credited to DOA'A ALHINTY.!!
My final project for the program will include all the previous principles of design, research, references, and inspiration to arrive at the idea, develop it, and implement it using what we will learn during the program.
MAKERSPACE FABLAB¶
The Makerspace in Amman is an initiative by the Crown Prince Foundation to support creators and makers.
For Operations¶
• The facilities are divided into work areas (woodworking, 3D printing, lasers, electronics, carpentry, etc.).
• The space is operated by technical supervisors or specialized engineers who oversee use and training.
Usage¶
• Users bring their ideas or designs (digital files) and work on them on site.
• Some equipment is used by members after training or under supervision.
• There may be designated times for open work or group workshops.
• The makerspace may allow free use by members during working hours after training, with guidance from supervisors.
• Staff or guests may hold live demonstrations of machine usage to train new users.
Tools¶
• 3D printers, laser machines, CNC machines, woodworking tools, welding equipment, electronics, hand tools (screws, scissors, etc.).
• Design software such as CAD and CAM is available, or digital designs are required.
Safety Rules¶
• Use safety goggles, gloves, and hearing protection if necessary.
• Machine training is required before individual use is permitted.
• Do not operate machines when a supervisor is not present.
• Adhere to printing/cutting procedures (ventilation, avoiding toxic materials, and cleaning the work area after completion).
• Monitor materials entering the workshop (some materials may be prohibited).
Documentation workflow¶
GitLab intoduction:¶
GitLab is a web-based platform as both a documentation tool and a project showcase platform, using MARKDOWN language. MkDocs, which transforms Markdown files into professional websites hosted on GitLab Pages.
Step 1¶
- First step was to prowse through several accounts of Fabricademy students from different years to get inspiration about the colors,thems,fonts...etc.
Then I moved to watch several tutorials & videos from Fabricademy website & youtube.
Step 2¶
- The next step was to summarize the necessary steps.
Step 3¶
- Here I started to applying all of the above to my website page.
At mkdock.yml I changed the website name as you can see in the below image:
and at the same file also I edited the theme elements like font, colors, adding social media icons and favicon to the website.
I choose the font from google link Google Fonts
I added the favicon & logo code lines through the link Link as you can see in the image below:
you can see how I added the code to the mkdocs.yml folder at the through the difference between the following images:
Step 4¶
after that I started to edit and upload content on the website homepage, the content is mix between text, images, linkes and videos.
After you upload and edit your content you need to COMMIT to save the changes that you made.
Adding floating flowers:¶
To add floating flowers that appears in the first 5 seconds when someone open the landing page just write the following code on the top of the page that you want, Since this is my first time using a programming language, I used a ready-made code, but I made some modifications to it.
I applied three main changes to improve the falling flowers effect on the website:-
-
First, I changed the background from a fixed pink color (background: #fff0f6) to a transparent one (background: transparent), so the flowers fall on top of the site’s original design.
-
Second, to fix the scrolling issue and make buttons and links clickable, we removed overflow: hidden from the
and moved the flowers into a separate fixed container (#flower-container) with pointer-events: none. This ensured that users could scroll normally and interact with the website content while flowers continued to fall in the background. -
Finally, instead of letting the flowers fall endlessly using a continuous setInterval, we added a setTimeout to stop the animation after five seconds, so flowers only appear once when the page is loaded.
Final result of the code after editing:
{<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Falling Flowers Once</title>
<style>
body {
margin: 0;
background: transparent;
min-height: 100vh;
}
#flower-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* don’t block clicks */
overflow: hidden;
z-index: 9999;
}
.flower {
position: absolute;
top: -50px;
font-size: 20px;
animation: fall linear forwards;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
}
}
</style>
</head>
<body>
<!-- Floating flowers container -->
<div id="flower-container"></div>
<script>
function createFlower() {
const flower = document.createElement("div");
flower.classList.add("flower");
flower.innerHTML = "🌸"; // you can change to 🌼🌺🌻
flower.style.left = Math.random() * window.innerWidth + "px";
flower.style.animationDuration = 5 + Math.random() * 5 + "s";
document.getElementById("flower-container").appendChild(flower);
// remove flower after it falls
setTimeout(() => flower.remove(), 10000);
}
// Create flowers for 5 seconds only when page loads
let flowerInterval = setInterval(createFlower, 300);
setTimeout(() => clearInterval(flowerInterval), 5000);
</script>
</body>
</html>}
Mistakes observation:¶
When you start editing your own website many mistake will occure. All you have to do is monitor regularly and track anymistakes that appear, if that happen just refer to the resources and fix it. The following images are an example of one of the mistakes that occured during website preparation:
As you can see on the first image the leters of the text appears between the images and the difference between the codes in the second and the las images.
Images editing and adding steps:¶
After pick the photo from laptop or mobile, check the size and if it is more than 100 kb resize and compress using tools like tinypng.
another tip to upload more photos in good arrangement & small size is to make photo collage using tools like Canva.
you can use it also to make Logos & videos
as you can see in image below this logo sign that I used to my website LOGO & FAVICON, I made using Canva.
.
after compressing upload the images to the files on your website.
then add the following link to the coding page :
to adjust width of the image add { width= }
to adjust alignment of the image add { align=right } or { align=left }
videos editing and adding steps:¶
To add a video to your website in small size just upload your video to vimeo or youtube then copy the link of the video, add it to your website:
links adding code:¶
to add link for your website just write the following into coding page:
links you can use¶
- [Markdown](https://docs.gitlab.com/user/markdown/)
- [Markdown cheat sheet](https://www.markdownguide.org/cheat-sheet/)