Portfolio

Elektrik-Eel-Festival

The Why: “This assessment focused on enhancing front-end web design skills by creating a responsive webpage for a client. I designed and coded a second webpage using HTML and CSS, incorporating mobile responsiveness, jQuery functionality (like a hamburger menu), and user input. The project involved creating wireframes, coding a sophisticated layout, and ensuring the site worked seamlessly across devices. The goal was to optimize interaction design, ensuring menus, images, and forms adapted to various screen sizes while maintaining a user-friendly experience.”

The How: Not only was this my crash course in using the incredible tool that is Figma, but it was also the first time none of the planning was done entirely in my head. From building personas and sketching wireframes on paper to experimenting with Figma and finally bringing it all together in code, this felt like my closest experience to completing a full agile sprint. I really enjoyed every step of the process, and as a huge music fan, I’ve always admired the creativity behind festival posters, so I hope my enthusiasm for the project comes through in the design.

The Outcome: “Proper planning prevents poor performance” is something I’ve always been taught, and getting to iterate my design vision through each stage really reinforced that lesson. I’m proud of the vibe I managed to capture in my design and the UI improvements that became evident when transitioning from Figma to code. Initially, I was given a single image to work with, and I used AI tools to extrapolate a looped video from it. The red haze from this video became the defining feature of the site. Figma was a fun learning curve, and by the end, I had learned enough that I wanted to redo the whole thing, but it also informed my subsequent designs in the program and grew stronger with each iteration.

Foundations of Existence

The Why: Building the ability to think involves using hands-on activities to generate ideas and resolve designs. This project introduced the attributes of materiality and encouraged me to reimagine creation through making. By exploring creativity and developing design skills with paper manipulation, I created digital representations, building toward Assessment 3. This final task involved crafting a model or sculpture that tells a story through craft, drawing on the skills I developed throughout the subject.

The How: Physical art is something I adore but has always been something I appreciate from others and do only as a hobby. So, when tasked with experimenting with paper sculptures, I, of course, decided to approach it through the lens of web design. I was inspired during my research on the recently released James Webb Space Telescope images, which I see as capturing the Foundations of Existence.

The Outcome: The minimalist sculpture work explores a maximalist concept by being enhanced in the web design medium. The James Webb Space Telescope images are animated with CSS and JS, and the same techniques are used to animate the sculptures themselves, making the entire end product feel alive.

The Way of Zen

The Why: This subject explored the connection between materials and storytelling, focusing on how design can convey meaning through experimentation. In this final task, I applied my knowledge and skills to create and present my completed project, which ranged from product or fashion garments to branding, or even an artistic exploration of my own story.

The How: If the physical art I created in Foundations of Existence was me learning to crawl, this next project required me to jump up into a headlong sprint. It was a much more involved physical piece, but still delivered through my favourite medium—enhanced and animated through web design. The whole project centered around the concept of Harmony. While researching, I stumbled upon Alan Watts' The Way of Zen (1957), which became a cornerstone of the project.

The Outcome: After much sourcing, sanding, gluing, composing, and keyframing, I’m absolutely wrapped with how it all came together. The synthwave filters enhance the animated model dancing to the slow, windy sound effect layered over the lofi music, which makes for a perfect complement to Alan’s incredible poetry, slowly being revealed and coming to its peak right as the music does.

Canva Brand Case Study

The Why: This subject covers the fundamentals of creating and developing brands, allowing me to explore branding theory and practice. Through analysis of successful cases, I gained skills to build brand identity and consumer experiences. The assessment also prepared me to tackle briefs with clients or employers, equipping me for future job interviews.

The How: This assessment was a fantastic reason to dive into the Canva research rabbit hole; I’d been canva-curious for some time. I went through an absolute plethora of articles and videos detailing Melanie Perkins' amazing rise to glory and the story of how a little Aussie company took on an industry many thought had already been conquered.

The Outcome: I’m really proud of how I’ve woven the brand's identity into the design of the report itself. The content of the report is a comprehensive look at Canva, but it may be a little too biased in its writing to be considered a report rather than a long-winded opinion piece. Overall, I hope it demonstrates my ability to look analytically at a business and its own creative process and identity.

Still Good Recycling

The Why: This subject covers the fundamentals of creating and developing brands, allowing me to explore branding theory and practice. Through analysis of successful cases, I gained skills to build brand identity and consumer experiences. The assessment also prepared me to tackle briefs with clients or employers, equipping me for future job interviews.

The How: We got to choose a client of our own creation and assume much of what they’d request. The one caveat was that it had to be a retail clothes brand. I went with my local second-hand store that churns out pre-loved wonders every week. By this point, I’d familiarised myself with Figma much more, and I hope that comes through in the prototype. A lot of work went into refining the colour palette and aesthetics of the site, with custom graphics and features like "Spin the Rack," which aims to replicate the fun of just spinning and grabbing something new.

The Outcome: I would have loved to have had time to animate a custom gif that plays after clicking “Spin the Rack,” but the functionality is fully there. As is the part I’m most proud of: the layout and vibe. I think it encapsulates the store well and presents a lot of products and ideas without overcomplicating the UI and UX.

DEN Menu

The Why: JavaScript animation libraries enable interactive web animations by triggering CSS animations with JavaScript events. Examples include Pixie.js for HTML Canvas, GSAP for DOM animation, Lottie.js for SVGs, and Three.js for 3D animation. These libraries build on JavaScript, offering familiar development environments for web designers and animators.

The How: This was designed to showcase our ability to animate in JS, but I’m particularly proud of the concept and execution. Inspired by the ever-captivating bouncing DVD screensaver, I replicated the feel of early video with fonts, colour palette, and of course, the animated text.

The Outcome: I still get a bit lost watching the text bounce, but I’m even more proud of the fake loading bar, the scan lines animated into everything, the flash effect as the menu comes on and off, and the idea of putting a demo of the project within the project.

Insitu Magazine

The Why: My mother came to me with an idea for a magazine that shared the stories of people and places she cherished in our home, Gippsland. She was our photographer and writer, leaving me to develop all our digital marketing presence, branding, and the layout of the magazine itself.

The How & Why: This was my first go at InDesign, and I couldn’t have done it without the artistic input of my mother. The product we came out with sold really well both back in the country at a few coffee shops and a few magazine retailers here in Melbourne. Unfortunately, life events stopped her from being able to capitalise on the dream of continuing, but I still regularly thumb through my copy in nostalgic wonder at what we managed to achieve.

Family Font Project

The Why: Over a decade ago, when applying to university for the first time, I was working on some projects to fill out my barebones portfolio. While watching Ferris Bueller’s Day Off, I was reminded of faking notes by my parents to the school when I was very young, and how much better I could have done that with the use of Adobe's creative software.

The How & Why: I had my family each fill out a character sheet, painstakingly traced each letter, and then used open-source software to compile it into TTF files. The attached display posters of each font were printed and block-mounted to hang in the first room I had outside home, to remind me of them.