Responses by Kaixa.
Background: The NIKI website serves as a platform to showcase my skills in art direction and typography. My aim is to inspire other web designers by demonstrating that one can independently create a comprehensive website and even achieve notable web design accolades.
Moreover, I aspire to motivate fellow designers from Vietnam. The current generation of Vietnamese designers is exceptionally talented and adept at self-learning. We have numerous design education communities that foster our growth and development.
Design core: The fundamental aspect of NIKI is its striking typography system, enhanced by structured lines that create a dynamic contrast between the site’s smaller and larger elements. The layout is designed with a robust structure to reflect modernity and technological advancement.
To evoke a sense of playfulness and nostalgia, I introduced 3-D LEGO characters, each encased in plastic packaging reminiscent of childhood LEGO toy shopping. Additionally, I incorporated elements such as floppy disks and vintage televisions to infuse a retro aesthetic. This blend of the old and new provides a visually captivating experience that is both enjoyable and approachable for visitors.
Favorite details: I take particular pride in the LEGO characters, which I dedicated considerable time to creating. Each character symbolizes a different member of the design studio, holding an icon that represents their most frequently used tool for a personal touch. Their outfits are designed to be modern and futuristic, enhancing the visual appeal. Initially, I generated the characters using Midjourney, followed by refinement and editing in Photoshop to achieve a polished appearance.
Furthermore, I meticulously designed the packaging labels to ensure the typography was visually appealing and distinctive, with every detail crafted to enrich the site’s overall visual narrative.
Challenges: Establishing an engaging visual direction was a challenge. Initially, my prototypes were simplistic, consisting solely of typography and images of projects and team members. The idea to incorporate LEGO characters emerged as I sought to explore new tools and roles in developing the website, adding a fun element to the visual direction.
I ultimately chose to depict the studio as a LEGO toy pack, with each designer represented as a unique LEGO character dressed in outfits reflecting their personalities while maintaining a cohesive aesthetic. The retro elements enhance this theme, invoking childhood memories and the joy of play. My hope was for NIKI to evoke a similar sense of excitement and nostalgia among its visitors.
I also experimented with two display typefaces, enhancing the website’s visual identity to be bolder and more impactful.
Alternate paths: If I could revisit the website, I would incorporate additional 3-D elements and interactive features. Initially, I tried using a web interaction tool called Unicorn Studio, but ultimately decided against it due to its negative impact on performance on older laptops. Prioritizing a smooth user experience was essential.
Given more time, I would focus on learning and implementing seamless 3-D effects and interactive features, hoping to realize these ideas in future projects.
New lessons: Building the NIKI Studio website taught me invaluable lessons, from familiarizing myself with the no-code tool Framer to utilizing AI-powered tools like Midjourney for rendering character images and backgrounds. I also integrated ChatGPT to assist with additional coding for the site.
Upon completing the website, I gained a deeper appreciation for a developer’s perspective, which enhances my collaboration with them and enables me to design more creatively while ensuring feasibility—an incredibly beneficial experience.
Navigation structure: The navigation adheres to the conventional layout of a design studio website, featuring main pages—Home, Work, About, Playground, and Contact.
Given the website’s bold typography, I opted for a light and minimal navigation style, employing simple typography with clear information for a seamless browsing experience, allowing users to navigate effortlessly.
A notable feature is the Playground page, showcasing ten typography posters created during the NIKI website’s development. This served both as a typography practice and a creative outlet whenever I needed to refresh my ideas throughout the project.
Technology: As a designer lacking traditional technical expertise, the NIKI Studio project was a personal challenge that encouraged me to explore Framer, an exceptional no-code tool that enabled me to build a complete website from scratch. I believe Framer will become even more powerful in 2025 and beyond, and I highly recommend that every web designer learn to use it.
Special technical features: One of the most thrilling aspects of developing the website with Framer was coding with ChatGPT. Although Framer is a fantastic tool, it has limitations in creating advanced effects and customizations. To address this, I experimented with teaching ChatGPT to integrate libraries like Lenis and GSAP to implement features such as smooth scrolling and loading screens.
For future projects, I plan to delve deeper into coding to bring even more creative ideas to fruition. Previously, I viewed learning code as tedious and technical, but this project revealed its enjoyable aspects. I encourage all designers to give coding a try! It’s a fascinating journey.
 | Communication Arts Source: https://www.commarts.com/webpicks/niki-studio Communication Arts is the largest international trade journal of visual communication. Founded in 1959 by Richard Coyne and Robert Blanchard, the magazine's coverage includes graphic design, advertising, photography, illustration, typography and interactive media. |
