Art Direction | Art Guide Document
Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media
Art Direction
Week 10 — Week 13
Art Direction Guide: A Unified Creative System for Product Launch
 |
| Our Mascot for the project, Momo |
These are the jump links to each part of this portfolio
Instructions
Mr Kamal, my lecturer for the Art Direction module for this April 2025 semester, gives us a heads-up on the upcoming tasks and requirements.
- Demonstrate the ability to identify and analyze community problems through research.
- Formulate a creative and strategic art direction concept aligned with an SDG goal.
- Collaborate effectively across disciplines to produce a unified visual direction.
- Communicate creative ideas clearly through visual and verbal presentation.
Work Process
Following our initial ideation and conceptualization phase, my focus shifted toward translating our vision into a functional, high-fidelity digital experience. As the lead website designer, the goal for this sprint was to bridge the gap between our abstract goals for SDG 10: Reduced Inequalities and a tangible user interface that feels both modern and inclusive.
Here are my contributions continuing from the first project, from planning to brand consistency.
1. Establishing Visual Harmony & Typography Refinement
With our mascot and core visuals finalized by Hui Yi, I began the high-fidelity design phase. A key decision here was revamping our typography. While we initially considered Rokkit, I decided to pivot to Poppins after one of my teammates suggested it. The transition from a blocky serif to a clean, geometric sans-serif better supports our minimalist theme from my perspective, providing a modern feel that enhances digital readability, which is a crucial factor when discussing clarity in communication. That's one of the reasons why there is less serif font being used for any internet or social media content: to allow high and consistent readability across all content and all devices.
 |
| Header font comparison |
2. Layout Refinement & Navigation Logic
Moving beyond the initial lo-fi wireframes, I spent significant time refining layout measurements, such as the margins and padding of each element on the website. There has been a lot of exploration on the arrangement of the content, where each design variations improve the content readability and structures it better until the final version. By focusing on precise content placement, I aimed to improve the overall flow of the site. It’s not just about aesthetics, but it’s about ensuring that the navigation is intuitive enough that the user never feels lost while exploring the complexities of emoji misinterpretation.
 |
| From LoFi wireframe to HiFi prototype |
3. Asset Creation
Though Hui Yi, our main illustrator, is designing for our brand's key mascot, I utilized some of the visuals created by her, as well as developed necessary visuals myself that are required and fitting to the website content, instead of random illustrations that don't reflect the topic of each section on the page. To maintain a unified brand identity across all team outputs, I developed custom illustrations and SVGs tailored for the web. This included a flat, single-color world map for our global data visualization and specific components for the Emoji Maker. Using these custom assets ensures that the website feels like a cohesive part of the EMO:TION ecosystem rather than a standalone tool.
 |
| Some of the illustrations created for the website |
4. Interactive Storytelling & UX Micro-interactions
A website about communication should feel communicative, thus I've planned various interactions ranging from subtle header text reveals to specific hover states for on-screen elements. These aren't just for decoration or sorts, they are designed to keep users engaged, ensuring they learn by carrying out actions as they interact with the campaign’s content that I've prepared.
There are many more individual animations on each section that I'm unable to display here on this blog, but you can get how the entire website looks from the video above!
5. Technical Standardization & Brand Documentation
As I finalized the hi-fi prototype, I documented the technical DNA of the site. This included details like the core identity & aesthetics of the website, the colour system, layout, grid & typography, website element guidelines, and interaction/accessibility. I also contributed to our overall Brand Art Guide, detailing our brand essence and justifying our use of the Google Noto Emoji font to ensure our visual language remains accessible and universal.
There's a lot to write, as there are many small details that we've decided during the design of our outcome. Not only do I include the content in a master Illustrator file for the booklet design, but I also need to align and ensure consistency of the booklet/guide visual to represent all of our team's work together as a single, cohesive brand.
 |
| Developing an art guide for my digital experience part |
6. Collaborative Management
Finally, I assisted Kar Yee with the project management documentation by keeping our progress logs updated with relevant paragraphs and imagery is essential for team transparency and ensures that our collective reflection is as detailed as our design work.
Our Deliverables
Presentation Video
EMO:TION Brand Art Guide
My reflections (For All)
This project has been a transformative experience, evolving from initial creative sparks into a cohesive visual system.
Comments
Post a Comment