Microsite Design & Development

Overview

This project documents my process as both a designer and developer in creating a microsite from concept to final execution about my given topic, Moomin. The goal was to communicate a topic clearly while translating ideas into a cohesive visual and interactive experienc that was playful and rich with imagery, that could almost have a comic book like quality, fitting for the topic of a childhood book series and cartoon character.

Understanding of the Topic

I had heard of moomin generally before but had never really explored the topic. Through this project and the research, I developed a much stronge runderstanding on the overall tone of the character, its color pallete(s) its styling, and its target audience which overall helped me alot in deciding howw to style and formatthe website to be most appropriate for the topic.

Creative Direction & Feedback

My creative Director and I met several times and it was very helpful in fully understanding what the direction I should go in was (more moody, or more cute, etc.) and she was also really helpful in catcing design flaws, formating issues, typfacing that could be structured or styled better, and other things that maybe if i had tried to design this site strictly on my own, I would not have caught.

• Heavily clarified and established tone, general styling (everything should have a stroke like in the comics) and sections of content
• Helped me catch technical issues that may have been unseen otherwise
• Helped me simplify some complex sections/ led me towards the best course of action

Design Process

• Research: First fully defined and understood topic and audience and established appropriate sections, or pages, for the website that made sense and worked effectively with the topic
• Visual Exploration: Developed typography, which took multiple itterations in really wanting something organic and soft and handwritten feeling to go with the style of the topic but still very leggible (overall deciding on two font-types) and color system, making a mood board, finding images on pinterest, and sectioning off topics into their own color or styling sections
• Layout: Structured content and navigation, my creative deisgner wanted to be able to navigate from one page to the next very easily, like having the buttons at the bottom that take you in sequential order through the page, which I think works really successfully with the story-book/ comic-book style
• Iteration: Refined based on feedback

Development Process

Using the initial "high-fidelity mockup, which I absolutely loved the result of both for, I tried by best to take those elements into the html format and streamline as much as possible, quickly realizing many things I had innitially loved about my mock-up I had no idea how to do in HTML and even with google and AI, I really struggled to figure out, and thus decided to simplify the design and shift the formatting. Overall I really enjoyed the development process and most of the final result, however I'd say I REALLY struggled the most with making it responsive and not having that affect the original design and with staying true to the mock-up with my very limited understanding.

• Tried to have a sort of continuous flow in the website, every element leads you to the next if that makes sense, and formatting to give it the comic-book feel and heavy illustration without feeling overpacked.
• Really struggled with responsive adjustments and felt like that was my weakest part in terms of development
• Enjoyed most designing along with the Creative Director, for the mock-ups, but struggled with technically applying those ideas

Use of AI

AI was used to support development and problem-solving, especially for things I wanted to do but simply didnt know how to excecute.

• Debugging CSS issues, especially with repsonsiveness and certain styling things I wanted
• Generating code suggestions for sections that I wasnt sure how to tackle
• Providing background on things I didnt know how to do

Challenges

• Major challange with Responsiveness and I think that is where I struggled the absolute most
• SSome trouble with executing the mock-up vs. the final result, alittle disappointed with some things that I wasnt able to figure out how to execute.
• Balancing design and functionality, stuggled slightly with the imager or elements feeling too personally jumbled or overwhelming eachother. Also quality of images and where I'm sourcing them, i know my home page image is slightly fuzzy but I struggled to find the exact best images for each thing.

Successes

• I actually really liked in the end my overall color pallette and the decision to utilize the background for image space (when my initial idea in the mock-up didnt work out)
• Lots of hoverable elements or interactive elements that I think make the site more fun for possibly kids who would be on the site
• Improved my CSS skills perosnally, definitely developed my abilities and what I personally saw as possible for me to do from my Recipe Page, especially certain hover qualities or having multiple pages in general and being able to tap buttons that guide you through the pages.

Reflection

This project definitely strengthened my ability to think as a developer and thinking on how to execute someone else's ideas or vision while tsill being able to pivot myself and take some creative liberties. It emphasized the importance of iteration, feedback, and attention to detail in creating a successful digital experience. I definitely struggled technically with many things and I think overall was somewhat disappointed with some things that I jsut wasnt confident I could do well or I really struggled to do effectively. However, this entire process taught me alot on designing and I am still very proud of what I was able to execute and will definitely be sending my website to all my friends and family!