Schokoladenschlossflagge"

Iterative Process

Important Links

Figma Link

First Portfolio Iteration

Objective: To build my first website to show what my skill set for website creation is.
Action: I borrowed a design I already partially coded in the prior weeks to act as a launchpad for the rest of my portfolio. I based it off my prior interests such as: Minecraft / Roleplay / Legalism. Summary: Based off Previous Design / Used my own Interests
Feedback: I showed my work off to my teacher Herr Norg, he explained to me that the page did not seem very engaging to users. He in addition suggested I create a style board for my newer website iteration in order to gather documentation for my work process. Summary: Showed work to Teacher / Not Engaging / Make Styleboard / Need Better Documentation.
Reflection: I took the advice to heart, agreeing that my initial design was less than adequate and not visually appealing.
Decision: I decided to redesign my entire webpage from scratch after creating myself a full style board using exactly what I thought would be interesting for a renewed and engaging design. Summary: Redesign Webpage / Made Styleboard / Did Research for Engagement

Fig. 1 - First Iteration of my Main Page

Image of my initial Portfolio Attempt

Second Portfolio Iteration

Learning Objective: To redo my main page with a more engaging style with a style board.
Action: I did some online research for inspiration, taking to Pintrest and Google Search in order to understand what makes an engaging webdesign. After doing so, I took the general frame and style of my page and the new fonts and design style I had researched; Implementing it into a new page. Summary: Did Research for Inspiration / Made Frame for Style/ Added new fonts, colours & designs
Feedback: I showed off my work to Herr Norg again, and he explained to me that the page I had designed was certainly more engaging. However, he said that the page still felt corporate and did not appear to be construed in a creative manner. As such I was asked to do the entire website from scratch again and, focus on a moodboard instead. Summary: Showed to Teacher / More Engaging / Page not too Corporate / Make Moodboard
Reflection: I felt rather upset at this relavation however I think it's necessary to learn and explore all parts of a design process. Perhaps I can come up with something even more interesting. Summary: Upset / Decided to continue with Feedback
Decision: I decided to create the moodboard and a new iteration for my Portfolio Website with it, in order to hopefully make it as good as I possibly can. I also will try to make a sketch to ensure everything is properly planned out first. Summary: Create Moodboard / Make new Website Iteration / Make Sketch

Fig. 2 - 2nd Iteration

Second design attempt Home Page

Fig. 3 - Styleboard

Styleboard

Third Portfolio Iteration

Objective: To redo my main page by basing it off a moodboard, and a sketch.
Action: I stared off with some more Pintrest pulling even more inspirational ideas that roughly represent what I wish to achieve and started putting them all onto a single large Moodboard. After I had gathered that, I took materials from the Styleboard and made a sketch. Finally converting everything into my third main website iteration. Summary: Used Pintrest / Made Moodboard / Made Sketch / Made Website Iteration
Feedback: When I showed off my work to Herr Brunne, he recieved it well, however told me that the design wasn't quite there, some of the photos used were either too busy or the text boxes mismatching. He advised me to try and make the design less busy and more focussed on a cohesive style. Summary: Design too busy / Some Elements Mismatching / Make more cohesive
Reflection: By this point I felt very stressed at my current progress and as such, I talked to Herr Brunne a bit more about this and we decided it would be best for me to focus on the HTML only side so that I may be able to note down proper content for the website first. Summary: Stressed / Make HTML Only
Decision: I decided to take a break from webdesign and instead focus on the content until I am ready to continue with my next design iteration. Summary: Break from Design / Focus on Learning Objectives

Fig. 4 - Mood Board

Moodboard

Fig. 5 - 3rd Iteration

The third Iteration of my Main Page

Fig. 6 - Learning Cycle Page Iteration

A Test Iteration for a Learning Cycle Page