In this project we’ve developed a new subpage for House of Code with a specific focus on “user experience”. The projects goal was to create a new page for House of Code “start your project”.
The Foundation of the project
For at skabe os et bedre overblik over det generelle projekt har vi udarbejde
To create a better overview of the general project, we prepared a Stakeholder analysis, a risk analysis, PESTEL-model and a Business Model Canvas.
BMC & PESTLE
For at få et overblik af business delen lavede vi en BMC og PESTLE model. Her fik vi ord og finger på specifikt hvordan/hvad/hvor diverse elementer af projektet hører til.
To get an overview of the business part, we made a BMC and PESTLE model. Here we caught on specifically how / what / where various elements of the project belong together with what direction we had to go.
Udarbejdelse af projekt
Scrum
Til planlægning af hele vores projekt har vi brugt scrum. Det har været super fedt at kunne dele tasks op og uddelegerer nemt. Det har også været smart at kunne holde styr på hvad der sker samt hvem der laver hvad og hvornår.
We have used scrum to plan out our entire project. I found this method of working, delegating & splitting up task a really smart way of working. It was also really easy to keep track of tasks and who did what.
You can find our Scrumboard here: https://trello.com/b/FwTXKmvd/modul4-scrumboard
Animations
Illustrator –
Before I started drawing various illustrator files, I analyzed one of their pre existing animations from their website. Here I took and downloaded their animation and split it up into frames so I could work from a single finished frame. When I had the end frame I threw it into the illustrator and immediately started drawing it up so I had some parameters to work from. Here I found the exact parameters for the pattern, height & width dimensions as well as the size of the rectangle holes.
With all the critical knowledge for the Illustration in mind, I drew and colored my codelines illustrations with a randomized swatch script I found online.
Siden jeg har set en del videoer omkring lottie og after effects fandt jeg ud af at for at kunne animere ens illustration, skulle den splittes op i forskellige lag. Her tog jeg så derfor og delte alle mine block paths for hver illustration op i 3 per layer. Dette gjorde at jeg simpelt kunne forvandle min Illustrator fil til svger der kan animeres i after effects.
Since I had seen a lot of videos about lottie and after effects prior, I found out that in order to animate one’s illustration, it had to be split up into different layers. I therefore took and divided all my block paths for each illustration up to 3 per layer. This allowed me to simply turn my Illustrator file into SVG files that could be animated in after effects.
After Effects –
In order to recreate their animation, I started analyzing their animated icons again. Here i looked into things like the velocity of the lines, when they were in picture, where they came from and where they stopped. Here I found an okay similar method to be able to recreate the design of the animations.
Det krævede ikke det helt store kompleksitet for at kunne genskabe. Det var primært opbygget på en masse Position og opacity keyframes. Derudover delte jeg også mine layers op i højre og venstre så koden kom fra begge sider.
It did not require the greatest complexity to be able to recreate. It was primarily built on a lot of Position and opacity keyframes. In addition, I also split my layers up into right and left so the code block/rectangles came from both sides.
Video
Angående vores præsentations video gik det lidt ud på det samme som animationerne. Her var de fleste screenshots taget og redigeret med photoshop. Ellers har det primært gået ud på at skrive tingene inden i premiere samt animere diverse elementer i Effects Controls med keyframes.
Regarding our presentation video, I kind of used same principles as the animations above. Here, most of the screenshots were taken and edited with photoshop. Otherwise, it was primarily about writing things inside the premiere as well as animating various elements in Effects Controls with keyframes.
Git, GitHub & version control
Når det kom til versionsstyrings og samarbejde af de forskellige benyttede nogle af GitHub Desktop hvorimod andre brugte Terminal eller VSC’s inbyggede git feature. Her var det meget forskelligt hvad jeg brugte. Umiddelbart har jeg selv brugt alle nævnte metoder, dog vil jeg fremadrettet gerne have bedre styr på terminal og diverse git commands.
When it came to version control and collaboration, we used GitHub Desktop whereas others used the Terminal or VSC’s built-in git feature. Here it was very different what I used myself. I myself used all the mentioned methods, however, in the future I would like to have better control of the terminal and various git commands for better workflow.
The Websites code
CSS & Sass
Da nogle af os allerede kendte lidt til diverse compilers endte vi ud i at bruge Sass/Scss til at compile vores CSS. Det var super sjovt og fedt at bruge Sass, det skabte en stor orden i vores CSS filer og var med til sørge for struktur når ting skulle ændres.
Since some of us already knew a bit about various compilers, we ended up using Sass / Scss to compile our CSS. It was super fun and cool to use Sass, it created a really good regulation in our CSS files and helped provide structure when things needed to change.
JavaScript & Lottie.js
Under vores Style Guide har vi linket et JavaScript hvor alle har haft deres js færdigheder på spil. Da det ikke har været muligt for os alle sammen at kunne byde ind med js elementer lavede vi derfor en separat fil som viste at vi alle havde styr på deres variabler, console.log, if else statement, loops & arrays.
Under our Style Guide we have linked a JavaScript where everyone had their js skills at stake. Since it was possible for all of us to be able to bid with js elements in our final project we linked this this files up to our Style Guide. In this JavaScript file we had variables, console.log, if else statement, loops & arrays.
Siden vi var meget interesseret i at implementere animationer ud fra scroll har vi også tage brug af LottieFiles/Lottie.js. Selvom dette i teorien var et library fik vi godkendelse til at brug det, dette fordi det har været super relevant for vores koncept ideer og projekts udvikling.
Since we were very interested in implementing animations based on scroll on the page, we had to use LottieFiles / Lottie.js. Although this in theory was a library, we got approval to use it because it was super relevant to show our concept ideas and project development.
If you’re reading this please write a comment 🙂
Reflection
I have personally been really happy and proud with what we have worked out. The website became super cool and I feel like I have performed really well especially in terms of animations, video, coding & version control.
Although there are still a lot of small things one could review, I feel that overall our idea and concept has been executed really well. If it came to things we could of done better I would say the general knowledge of using JavaScript in our animation was a little bit too complex to be able to tailor to precision. Maybe this knowledge would come from working more with Lottie.js.
In addition, I also think that we have had a super good group who have really helped each other problems and learned from each other.