project1

Getting Started

Just like any project I work on, the first thing I do when I start one is create a workspace to begin brainstorming and planning things out. This way everything is organized from the very get go. I usually favor Figma over anything else whether physical or digital. After that, I decided to follow the suggested design process order provided in the class notes. I began with a moodboard mostly from pinterest and mobbin, keeping track of the keywords I searched with. After some time of looking around I found it difficult to grasp any solid idea from just looking at random apps and images online, so I switched gears and focused on brainstorming as many concept topics as possible. After that I jumped around from gathering inspiration pics and brainstorming new ideas. Until I landed on two solid ones I wanted to explore.

Additionally, here is a link to my Figma, where you can see my brainstorming and design process in depth: Project 1 Figma

Thinking Process

I sort of combined the two topics that sparked my interest, making a list of what elements I would add to convey the theme a little more. For this project I chose a balance between themes of cozy/study vibes and a traditional cultural festival: lunar new year. When I had written everything that came to mind out I swiftly moved onto information architecture and wireframing.

Ideating

Using Figma I played around with the layout trying my best to keep it simple/intutitive while diverging from the original design. I also referenced projects taken from mobbin to get some inspiration. When I was happy with a design for one page I would switch to the next one ensuring the style were consistent with one another.

Hi-Fi

When I was content with the lo-fi wireframes I went back to design process and began collecting elements to bring the visual UI to life. Choosing the color pallet was quite easy, I already had my moodboard that held a strong warm color pallet, so I went to Coolors in search for a collection of colors that occupied my moodboard. Then I jumped into the nitty gritty like font-choice and accessibility considerations. After jotting information on these subjects down I was confident enough to mocking up the website, ignoring smaller details like filler content and prioritizing font-size and color contrast.

Implementation

After touching up my mockups I went to do some techincal research. Again I kept track of all the links I took a prolonged duration at for later notice. I started by watching the youtube video that was provided in the class notes. Then when I found it lack-luster in information I went to the documentation to see if I can read up on any important syntax. I was unable to get too far when I decided it was best to get started on the actual implementation. I began with the simple stuff like removing the text in the homepage. Then I explored more of the project file and eventually connected the dots on how everything worked more or less. I attempted to do more research on how to properly use 11ty to add a audio source, but quickly reverted back to the method I did know which was mostly in html. I had trouble properly using a script tag in the njk file, to which I'm quite certain was NOT the way to do things, so I relied on the basic html source tag to implement most of my design. I spent the most time in the css files using my styling knowledge to the best of my ability I was able to recreate most of my design pixel perfect. Minus some labels that I decided later was not worth the hassle.