برچسب: Craft

  • Fluid Worlds and Layered Visions: Tomoya Okada’s Digital Craft

    Fluid Worlds and Layered Visions: Tomoya Okada’s Digital Craft


    Since 2020, I have been working as a frontend engineer in Japan.

    While my main role is in engineering, I also have a strong interest in design, and I have created numerous personal projects that reflect this passion.

    I began studying web development independently in 2020, and after working as a freelancer for about four years, I am now employed at a production company (as of 2025). Recently, I’ve also developed an interest in graphic design and 3D modeling. I hope to continue expanding my knowledge across a wide range of fields—not limited to the web.

    My strengths lie in creating interactive experiences, particularly in the area of animation. When it comes to design, I excel at producing visuals that are both aesthetically appealing and highly functional.

    Featured Work

    Faint Film

    This website showcases the photographs I have taken so far. I aimed to create a soft, layered visual experience where each image gently overlaps the others.

    One of the most distinctive features of the site is the view-mode toggle on the main page.
    It offers two modes: a refined grid layout and a slider layout. The transition animation between these modes is something I’m particularly proud of, as I believe it turned out beautifully.

    I paid close attention to implementing animations that complement—rather than overpower—the photographs, which are the true focus of the site. Thanks to this balanced approach, the project has received recognition and multiple awards from various design platforms. It’s a piece of work that highlights my strengths in design.

    Portfolio v7

    This is the website I released as Portfolio Version 7. It became a site defined by bold parallax effects and smooth transitions. There were several challenges in this project, one of which was creating visuals using fluid expressions and generative AI.

    The flower image on the homepage was generated with AI, and I explored how to present this image as beautifully as possible. That exploration led me to fluid expression. By blending monochrome and color visuals that appear and disappear within the fluid, I was able to capture both fragility and beauty.

    This site embodies many of my creative experiments and challenges.

    Layrid

    This site is a commemorative project celebrating the creation of 100 personal works. The name Layrid is a coined word combining layer and grid, reflecting the idea of organizing accumulated works within a structured grid.

    Key features include a smooth opening animation, seamless navigation between subpages, and dynamic transitions of the top images. By incorporating bold WebGL-driven transitions within an experience that maintains continuity, I was able to create a striking contrast between stillness and motion.

    Portfolio v8

    This is my latest portfolio as of September 2025. For this site, I focused on achieving both clarity and functionality. On the homepage, you can view several of my latest projects at a glance, presented with unique open/close animations and organized for easy exploration.

    In addition, the site includes an archive of personal projects as well as a Playground that showcases graphics created purely for fun. Through this site, you can explore the wide range of works I continue to produce and gain a deeper understanding of who I am.

    I’m especially proud of the details, such as the subtle click sounds and the color scheme that shifts depending on the time of day.

    What I value

    Enjoying my work

    This doesn’t mean playing around or having fun in a casual sense. We believe that great websites are born when creators approach each project with passion and genuine enjoyment. That’s why we value making the process enjoyable for ourselves first—it forms the foundation for meaningful, high-quality work.

    Ensuring smooth communication

    Clear and smooth communication allows us to align on direction and create with a strong shared understanding. We make it a point to engage thoughtfully and carefully with both clients and team members, ensuring we move forward without misunderstandings.

    Continuing to learn every day

    This industry evolves at a rapid pace, with trends constantly shifting. That’s why I make it a priority to keep learning and updating my knowledge every day, never standing still.

    Final Thoughts

    First of all, I would like to express my heartfelt gratitude to Codrops for giving me this opportunity. Although I’m a developer, I’m also eager to further explore the field of design. I believe that having a well-rounded skill set is essential when working in the web industry. I will continue to grow by strengthening my passions while also improving in areas where I still lack.

    I actively share various websites and insights on social media, so please feel free to check them out.

    Thank you very much for reading to the end.



    Source link

  • Craft, Clarity, and Care: The Story and Work of Mengchu Yao

    Craft, Clarity, and Care: The Story and Work of Mengchu Yao


    Hi, I’m Mengchu Yao from Taiwan, and I am currently based in Tokyo, Japan, where I work as a web designer at baqemono.inc.

    I’m truly grateful to be able to pursue my design career in a cross-cultural environment. The life here allows me to appreciate small things and encourages me to stay curious and open minded.

    Featured Work

    Movie × AI model

    We created the website for AI model Inc., a company that leverages AI models and virtual personalities to offer digital transformation (DX) services. The site was created to showcase their AI video generation solutions.

    Personal notes

    This website design is centered around the concept of “natural and elegant AI-generated visuals”. One of the key challenges was to present a large number of dynamic, immersive visual elements and interactions within a single-page layout. We spent a lot of time finding the right balance between animation and delivering messages, ensuring that every motion looks beautiful and meaningful at the same time

    This was also time that I sketched the animation for almost every section myself, working closely with developers to fine-tune the motion expressions. The process was both challenging and fascinating, which is why it was rewarding and significant for my growth.

    Vlag yokohama

    We created the official website for “Vlag yokohama,” a new members-only creative lounge and workspace located on the top (42nd) floor of the THE YOKOHAMA FRONT at Yokohama Station.

    Personal notes

    This project was a rare opportunity that allowed me to explore and be creative while using the brand guidelines as a foundation, in response to the request “to use the Yokohama cityscape as the backbone of visuals while incorporating elements that evoke the feeling of wind and motion.”

    One thoughtful touch was the main visual on the homepage. It automatically changes during the time of day: morning, afternoon, and evening, which represents Yokohama’s ambiances and gives a subtle delight to the browsing experience.

    ANGELUX

    We created a brand-new corporate website for Angelux Co., Ltd., a company founded in 1987 that specializes in beauty salons and spas operations, with product development and sales in cosmetics.

    Personal notes

    This project began with the client’s request to clearly distinguish between the service website and the corporate site, and to position the latter as a recruitment platform that authentically reflects the people behind the brand.

    To embody Angelux’s strong emphasis on craftsmanship, we featured actual treatment scenes in the main visual. The overall design blends a sense of classic professionalism with a soft modern aesthetic, creating a calm and reassuring atmosphere. This approach not only helps build trust in the company but also effectively appeals to potential talent interested in joining Angelux.

    The visual design incorporated elements reminiscent of high-quality cosmetics that conveys the clean beauty and clarity of skincare.

    infordio

    We redesigned the official website for Infodio Inc., a company that specializes in advanced technologies such as AI-OCR and Natural Language Processing (NLP), and offers high-speed, automated transcription products and services.

    Personal notes

    The original website failed to effectively communicate “AI as core”, and often mislead the client’s applicants. To resolve the issue, our strategy was to emphesize the products. The revamp successfully gives the true essence of the brand and attracts the right potential talents with clear messaging.

    For the visuals, we started from scratch. It was challenging but also the most fun part. As the products were the focal point of the design, the key was to show both the authenticity and visual appeal.

    Background

    After getting my master’s degree in Information Design, I joined the Tokyo-based digital design studio, baqemono.inc., I have had the opportunity to lead several challenging and creatively fulfilling projects from the early stages of my career.

    These experiences have shaped me tremendously and deepened my passion for this field. Throughout this journey, the studio’s founder has remained the designer I admire the most — a constant source of inspiration whose presence reminds me to approach every project with both respect and enthusiasm.

    Design Philosophy

    A strong concept is your north star

    I believe every design should be built upon a clear and compelling core idea. Whenever I begin a project, I always ask myself: “What am I designing for?”

    Structure comes first

    Before diving into visuals, I make sure I spend enough time on wireframes and the overall structure.
If the content and hierarchy aren’t clearly defined at the start, the rest of the bits and pieces become noises that cloud judgment. A solid framework helps me stay focused and gives me room to refine the details.

    Listen to the discomfort in your gut

    Whenever I feel that something’s “not quite right”, I always know I’d have to come back to take another look because these subtle feelings often point to something important.
 I believe that as designers we should be honest with ourselves, take a pause to examine, and revise. Each small tweak is a step closer to your truth.

    You have to genuinely love it

    I also believe that every designer should love his/her own work so the work will bring its impact.
This isn’t just about aesthetics — it’s about fully owning the concept, the details, and the final outcome.

    Teamwork is everything

    No project is ever completed by me alone — it’s always the result of a team effort.
 I deeply respect every member involved, and I constantly ask myself: “What can I do to make the collaboration smoother for everyone?”

    Tools and Techniques

    • Photoshop
    • Figma
    • After Effects
    • Eagle

    Future goals

    My main goal for the year is to start building my portfolio website. I’ve been mainly sharing my work on social media, but as I’ve gained more hands-on experience and creative outputs over time, I realized that it’s important to have a dedicated space that fully reflects who I am as a designer today.

    Recently, I started to make some changes in my daily routine, such as better sleeping hours and becoming a morning person to be more focused and productive for my work. My mind is clearer, and my body feels great, just as if I’m preparing myself for the next chapter of my creative journey.

    Final Thoughts

    Giving someone advice is always a little tricky for me, but one phrase that has resonated deeply with me throughout my journey is: “Go slow to go fast”. Finding your own balance between creating and resting while continuing to stay passionate about life is, to me, the most important thing of all.

    Thank you so much for taking the time to read this. I hope you enjoyed the works and thoughts I’ve shared!

    A heartfelt thanks as well to Codrops and Manoela for inviting me to be part of this Designer Spotlight. Ever since I stepped into the world of web design, Codrops has been a constant source of inspiration, showing me so many amazing works and creators. I’m truly honored and grateful to be featured among them.

    Contact

    I’m always excited to connect with people to share ideas and explore new opportunities together.
If anything here speaks to you, feel free to reach out — I’d love to chat more and hear your thoughts!
    I also share updates on my latest projects from time to time on social media, so feel free to drop by and say hi 😊



    Source link