UX/UI design - HTML/SCSSHelloLen* Cosplay
HelloLen* Cosplay is a personal portfolio website designed to showcase cosplay projects, modeling photography, and artistic collaborations in a visually immersive and responsive experience. The goal was to create a bold, image-driven interface that enhances the visual impact of the content while ensuring performance, usability, and smooth interactions across all devices. The entire design and frontend were crafted manually without wireframes, combining creative direction with custom-coded responsive development.
Role
UX/UI Designer
Client
HelloLen
Tools
Photoshop HTML CSS VS Code
01 — Project Vision & Strategy
The objective of HelloLen* Cosplay was to create a visually immersive portfolio that places imagery and character interpretation at the center of the experience.
The website needed to reflect the artistic identity of the cosplayer while remaining clean, fast, and easy to navigate.
The strategic goals were:
- Showcase cosplay and modeling projects through a strong visual-first approach
- Create a distinctive digital identity aligned with the artist’s personality
- Ensure a seamless experience across mobile, tablet, and desktop devices
02 — Design & UX Approach
The interface was designed without the use of wireframes, allowing for a more instinctive and visually driven creative process.
Layout composition focused on enhancing photography, maintaining balance between bold visuals and navigational clarity.
Key focus areas included:
- Image-centered layouts to maximize visual storytelling
- Clear visual hierarchy to guide users through galleries and content sections
- Minimal but effective UI elements to avoid distracting from the artwork
- Consistent aesthetic tone reflecting anime, manga, and cosplay culture
03 — Frontend Development & Interaction
The website was manually coded using HTML and SCSS, following a responsive-first approach.
jQuery was integrated to handle interactive elements, transitions, and gallery behaviors, enhancing the browsing experience without compromising performance.
The implementation included:
- Fully responsive layouts optimized for all screen sizes
- Custom-coded gallery structures and dynamic image handling
- Smooth transitions and subtle animations powered by jQuery
- Performance-focused structure with clean, semantic markup
04 — My Role
I was responsible for the entire digital experience, including:
- UI design and creative direction
- Visual composition and layout decisions
- Manual frontend development (HTML & SCSS)
- Implementation of interactive features using jQuery
- Responsive behavior and cross-device optimization
This project reflects my ability to merge visual sensitivity with technical precision, delivering a handcrafted portfolio experience that enhances the artist’s identity while ensuring usability and performance.