S5 Studios Website by Shogo Tabuchi is a highly esteemed winner of the very prestigious 2021 Golden A' Design Award in Website and Web Design Competition Category.
GoldWeb· 2021
S5 Studios Website
Client: S5 Studios
Golden A' Design Award Winner in Web Category
Verified Award Winner
Verify Award Status for #109845The Design
About S5 Studios Website
This website is the portfolio site of Shogo Tabuchi, and it combines design aesthetics with representational possibilities and update-friendliness. The Covid-19 pandemic in 2020 has made it a challenge for artists around the world to share their works with others. This has made online promotion more important than ever before. This portfolio site is a self-promotion project where users can catch a glimpse of the artist’s unique style through their sight, hearing, and touch.
The Recognition
About the Golden A' Design Award
S5 Studios Website is a Golden A' Design Award winner, an immensely prestigious recognition granted to first-rate, marvelous, and outstanding designs. Golden winners are exceedingly innovative, visionary, and glamorously dazzling creations that reflect the prodigy, wisdom, and prowess of their designers. S5 Studios Website is expected to be a highly praised, trendsetting, and monumental invention that delivers unprecedented value. This Golden A' Design Award-winning design is a spectacular, respected project that highly benefits and advances the boundaries of art, science, design, and technology. S5 Studios Website creates intense feelings of desire, evokes passion, encourages creativity, and fascinates us.
Where to Get It
Award-Winning Web and Interactive Design Services
We create cutting-edge digital experiences for artists, fashion brands, manufacturers and corporations. Our expertise spans web design, interaction design, and UI/UX development, combining innovative technology with unique aesthetics to craft websites and digital campaigns that captivate audiences and drive results.
Request QuoteInterviews
Design Interview
What is the main principle, idea and inspiration behind your design?
The S5 Studios Website began with the idea of expressing my design philosophy and sensibility through the website experience itself. Rather than simply displaying projects, I wanted to create a portfolio that users could explore like a digital space and experience the identity of S5 Studios directly.
What has been your main focus in designing this work? Especially what did you want to achieve?
My main focus was to integrate visual design and interaction into a single experience. Rather than having users simply look at information on a screen, I wanted their actions to transform the digital space and gradually draw them deeper into the work.
What are your future plans for this award winning design?
The approach developed for the S5 Studios Website—integrating visuals, interaction, and technology—continues to influence later S5 Studios projects. In the future, I would like to extend this approach beyond the web into large-scale displays, physical spaces, moving images, and experiences that connect digital and physical environments.
Grand Interview
Your innovative approach to particle animation in S5 Studios Website creates a mesmerizing representation of coalescing ideas - could you elaborate on how this visual metaphor aligns with your philosophy of presenting creative work in the digital space?
The particle animation on the S5 Studios Website symbolizes how ideas come together in an abstract space, eventually forming something concrete. This approach reflects the creative process, which often begins in a state of 'chaos' and gradually takes on order and shape. In digital spaces, I aim to create an experience where users feel they’re progressively immersing themselves in our vision.This multi-layered interaction allows users to engage more deeply with the brand and experience S5 Studios' core values—Shapely, Sharp, Skillful, Splendid, and Supreme—in a natural and impactful way. Through this animation, we sought to visually communicate our creative stance and show the process of ideas converging to create something meaningful.
The S5 Studios Website seamlessly integrates sight, hearing, and touch - what inspired your decision to create this multi-sensory experience, and how does it enhance the way your portfolio connects with visitors?
I believe that design should be a comprehensive sensory experience, not limited to visuals alone. By incorporating sound, movement, and tactile interactions into the S5 Studios Website, we sought to create an immersive environment that allows users to feel truly connected to the projects.The music selection, in particular, was intentionally crafted to embody values like 'Sharp' and 'Splendid,' enhancing the emotional atmosphere of the experience. By blending sight, sound, and touch, the portfolio becomes more than a collection of works; it evolves into a narrative that visitors can discover for themselves.This approach allows users to perceive the essence of S5 Studios and build a lasting emotional connection.
In developing S5 Studios Website during the COVID-19 pandemic, how did the global shift toward digital presence influence your design decisions and implementation of interactive elements?
The pandemic underscored the significance of digital presence, especially for artists who lost many opportunities to present their work in person. This shift made it essential for us to create a portfolio that wasn’t just a static display of projects but an interactive and immersive experience.We strengthened spatial design and interactive features to offer users an experience as vivid and engaging as possible, even if they were accessing it remotely. By adopting a layered approach, we wanted users to feel a journey through our site that mirrors real-world engagement, fostering immersion within the digital space.
Behind the Design
Press Kit
Credits, team members and technical details provided by the designer.
- Unique Properties
- "Shapely, Sharp, Skillful, Splendid, Supreme."
S5 Studios is a creative studio that incorporates these five adjectives into the artist's work. It also serves as a portfolio for the commissioned works of Shogo Tabuchi.
This website places particular emphasis on presenting the artist's ideas and strengths through the design, execution, and music of the website to create a vibrant user experience that draws on unique designs and cutting-edge technology. - Dimensions & Packaging
- Available in the latest versions of Chome, Firefox, Safari, iOS and Android
- Tags
- Art director, Web designer, Portfolio, Design Agencies, Promotional, 3D, GSAP Animation, PixiJS, Craft CMS, Three.js
- Production Technology
- Pixijs and three.js allow for asynchronous browsing in all directions, while gsap and css3 are used for finer transitions and animations. Objects are efficiently managed in javascript by using fewer than 100 classes, and the website’s responsive design keeps user experience consistent across all devices.
A cms was built to update Works and Information. Due to concerns with a slow server-side cms, I used ejs to build a system that generates html automatically when Json files are updated locally. - Design Challenge
- Designing a website that captures an artist’s individuality is difficult. This design is not flat but spatial in nature, so we can only imagine how users will experience this space. It took over 6 months to complete this design as I had to repeatedly tweak the user flow and visual elements.
In addition to creating materials to share the design aims with developers, the designers also complemented the work of engineers by collaborating on programming after they built the development environment. - Research
- Although sites such as Awwwards feature excellent websites around the world every day, there are many websites with similar designs around.
I believe that each website should be designed differently as each brand is unique. In particular, portfolio websites must capture the artist’s individuality.
covid-19 has limited how artists can share their works, making online promotion critical for them.
It is thus important to create portfolios unique to artists by harnessing their ideas and strengths. - Inspiration
- Designers work on new tasks by drawing inspiration from the toolbox of knowledge and experience in their mind. The design concept for this website is no different.
This website’s landing page is a dark space with floating particles, which alludes to how ideas coalesce in an abstract space. Users are led to individual sections, and as they venture deeper into the website, the thumbnails of projects are shown. Information is presented in more granular detail the deeper it is in the site hierarchy. - Project Duration
- October 2019 - Designing the first draft
February 2020 - How many prototypes will be designed
May 2020 - Development work begins.
Designed 160 pages of case studies and news pages
Music and photography production
September 2020 - Completed
October - Published on the web - Operation Flow
- Start by selecting whether you want to browse the website with/without background music. Users can turn music on/off at any time when browsing.
Navigate the top page by clicking on a section that interests you. I have created a larger clickable area for “Works,” which brings users to a page where they can scroll through the different project categories. Clicking “Explore” brings them deeper into the site and displays a list of projects.
This site has a similar user interface on all devices. - Team Members
- Interaction Director/Designer: Shogo Tabuchi
Front-end Developer: Tomoya Takahashi (Orunica Inc.)
Sound Designer: Nao Kakimoto
Photographer: Shin Ishikawa
Photographer: Kenichi Aikawa
Sponsored
Explore Beyond Designers.org
Discover products, services and opportunities from our advertising partners.
More to Explore
Related Designs
Explore more award-winning designs from the same category, selected by merit.
