LEGO Microsite Summary

Annie Tian

Topic

LEGO is a fairly familiar brand, though I had previously never gone into a deeper dive into the history of the company or the values that it stood for. Through my research process, I looked through the official LEGO website and mottos, and I aimed to capture a sense of boldness and creativity.

Input and Feedback

The feedback I received was helpful in informing the general design choices. For example, the lack of rounded corners are meant to reflect the edges of lego blocks. The color palette was, as instructed, taken from official LEGO colors as well. In particular, the color were adjusted from the mockups to include warmer colors such that the background of the website would be less jarring. Overall, the aesthetic turned out very different from something that I would have been able to create on my own.

Design

Throughout the design process, I first developed two mockups based on the concept outline and creative brief. These mockups both leaned into large, block-like shapes to match with the LEGO brand conceptually, though the organization of the homepage differed a bit more. In making my typography choices, it made the most sense to go with a sans serif typeface that was simple and clean to match the minimalisitic design of LEGO blocks themselves. Finally, in considering the navigation bar, I ultimately decided against a hamburger menu bar even for the mobile layout, as I felt that the rectangular buttons made sense with the theme.

Successes and Challenges

Throughout this process, I became much more comfortble with the process of designing something responsively, making sure to make adjustments throughout the design process rather than having it as an afterthought. Additionally, I became much more familiar with the usage of a flexbox. As for challenges, time constraints heavily limited the amount of embellishments that I would have liked to add. These include more interesting treatment of the images, more attention to spacing throughout the website overall, as well as generally including more information and content. I would have liked to added more details and images referencing the raised components of LEGO blocks as well to further play into that imagery. Another challenge that arose happened throughout the styling process, trying to keep track of what selectors would work across pages in the website, and which had to remain unique.

AI Use

I mainly used AI for identifying issues such as figuring out what sections of the styling were impacting other pages, such that I could change them. I also used AI to figure out how to turn a container into a grid that will automatically create as many columns as well fit in order to refine the responsiveness of the website. In cases like these, I would use AI to figure out how to generally set up something of that nature, and then recontextualize it myself within the actual project.

Last Reflections

Overall, this project was a good way to bring together all of the new concepts from throughout the semester. It has pushed me into very unfamiliar territory both conceptually with the topic itself, as well as the overall process of coding it. If given more time, I would love to go back and refine it a lot more!