Loading ...

Responses by Athena Tian, designer; and Kenta Toshikura, developer, Garden Eight.

Background: yuenye.com is the portfolio site for Brooklyn based designer Athena Tian. Athena wanted to refresh her portfolio to better capture her design expertise and showcase her strength in visual design, which made yuenye.com a “self-promotional” piece for her next adventure in her career. So, the new site not only demonstrates up-to-date projects from Athena, but also conveys the unique characteristics of her design aesthetics.

Design core: Yuen Ye means “endless grassland” in Chinese, symbolizing the unbounded creativity that Athena loves to explore in design. The experiential interaction on landing home page—the mouse interfering the graphic characters—visualizes the grassland metaphor and lets visitors freely play with the site. The ink effect, utilized in both interaction and transition elements on the site, is another key feature as it resonates with Athena’s ink calligraphy background. It adds visual excitement to the browsing experience and consolidates the Yuen Ye brand together to speak for who Athena is and the design passion she upholds. We are proud of the execution of the site—everything looks sleek and performs smoothly.

Challenges: The collaboration between Garden Eight and Athena on this project has been very efficient and always right to the point. Even though we worked in different time zones—with 12 hours difference!—we established a great work dynamic as we constantly shared feedback and thoughts back and forth. Great communication makes great work!

Navigation structure: The navigation design emphasizes user-friendliness in a compact UI. To maximize this design, we implemented an animation to show the user’s current location during page transitions. This helps users intuitively understand where they are on the site. Additionally, hovering over navigation elements triggers a text shuffle animation, enhancing the tactile and interactive experience. These features were crucial in making navigation more approachable and user-friendly.

Technology: The main technologies used in development were three.js and Nuxt. three.js played a key role in seamlessly rendering the site’s unique ink-bleed effect. Utilizing this WebGL-based library, we achieved vibrant and dynamic visuals and animations, providing a consistent visual experience across the site. It also ensured the effect’s continuity during page transitions, allowing for smooth user navigation.

Choosing Nuxt was essential for optimizing front-end development and performance. This Vue.js-based framework enabled efficient and fast page rendering. Specifically, Nuxt improved code reusability and ease of maintenance, streamlining the development process. This combination of technologies enabled us to provide a comfortable and impressive web experience for users.

yuenye.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In