Gold Website and Web Design · 2021
S5 Studios Website
- A' Design Award 2021 Gold Winner in Website and Web Design
- Awarded April 15, 2021
- CLIENT: S5 Studios
- Estimated Number of Design Views: 104,346
- Verification code 1B88335C86 · Verify this award
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.
Shogo Tabuchi's award-winning S5 Studios Website emerges from the contemporary tradition of immersive digital brand experiences that merge atmospheric visual design with intuitive navigational architecture, representing a significant achievement in the evolving dialogue between graphic design heritage and interactive media possibilities. The composition demonstrates sophisticated understanding of how traditional design principles translate into dynamic screen-based environments, employing the cosmic blue gradient field as both aesthetic statement and functional backdrop that establishes immediate brand recognition while providing optimal contrast for content legibility. Technical accomplishment manifests in the deliberate choreography of circular photographic elements that appear to float within the digital space, their varying scales and positions creating a sense of depth and movement that rewards exploration while maintaining compositional coherence across the responsive design framework visible in both desktop and mobile presentations. The chromatic strategy reveals particular refinement in its limited yet expressive palette, where the warm cream typography establishes elegant tension against the cool atmospheric blues, while the monochromatic treatment of photographic content unifies diverse imagery into a cohesive visual language that suggests artistic curation and editorial sensibility. Thematic resonances emerge through the celestial vocabulary of orbiting forms, starburst badges, and infinite gradient space, perhaps suggesting creativity as cosmic exploration or the studio as a constellation of interconnected talents and capabilities. The integration of navigational text elements within the atmospheric composition rather than in conventional interface positions demonstrates confidence in treating the entire viewport as an opportunity for brand expression while maintaining functional accessibility. One might observe how the design balances contemporary digital aesthetics with timeless principles of visual hierarchy and compositional balance, creating an experience that feels simultaneously forward-looking and grounded in established design traditions. How might the viewer consider the ways in which digital environments can evoke the contemplative qualities traditionally associated with physical gallery spaces while embracing the unique possibilities of interactive media?
Press Kit
- 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. - 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. - 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.
Colors of S5 Studios Website
Get S5 Studios Website
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…
G0E3 ShopDesign Interview about S5 Studios Website
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.
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.
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.
The project took several months from initial concept through design, development, and refinement. Interaction required particular attention because it could not be evaluated through static visuals alone, so motion speed, timing, and transitions were repeatedly tested and adjusted directly in the browser.
The S5 Studios Website was a self-initiated project created as the studio's own portfolio. It gave us the freedom to experiment with visual and technical approaches that can be difficult to explore in client work, and to demonstrate through the website itself how I see the possibilities of web design.
The website was created and operated as the official portfolio of S5 Studios and was not intended for sale or licensing to other companies. It was developed as an original platform for communicating the studio's work, capabilities, and approach to design.
I believe websites can do more than communicate information efficiently. Like film, music, or games, they can also be expressive media that affect people's emotions. A personal portfolio offered the freedom to experiment with this possibility.
I was influenced not only by web design but also by artists such as teamLab, whose work combines physical space with digital art. I was interested in exploring how an online environment could respond to user movement and create an immersive experience similar to a physical installation.
The primary audience includes companies, creative directors, and designers interested in design and digital expression. The website was also designed so that people unfamiliar with S5 Studios could intuitively understand its creative approach simply by interacting with the experience.
Instead of prioritizing the efficient browsing of a project list, the portfolio itself was designed as a creative work. Spatial navigation, motion, typography, and sound introduce S5 Studios' projects while simultaneously demonstrating its approach to digital design.
The “S5” in S5 Studios comes from five words: Shapely, Sharp, Skillful, Splendid, and Supreme. Together, these words represent several qualities the studio values in design, including form, precision, craftsmanship, expression, and quality.
Adobe Photoshop was the primary design tool. Although web-specific interface design tools are commonly used for website projects, this project placed greater emphasis on visual composition and image-making, so Photoshop was better suited to developing each screen as a carefully art-directed visual.
The most distinctive aspect is that the website was conceived as a navigable digital space rather than a collection of flat pages. Visuals and information respond to user actions, turning the act of viewing a portfolio into an interactive experience.
Shogo Tabuchi was responsible for the art direction and design and worked closely with a front-end engineer with specialized technical expertise. Rather than simply handing finished designs over for development, the visual and technical aspects were refined together through repeated browser-based testing.
Technology is not simply a means of reproducing finished visuals; it is an essential part of the design itself. Browser technologies including WebGL and JavaScript-based animation made it possible to create spatial depth, movement, and continuity that could not be expressed through static screens alone.
The project was not primarily data-driven. Instead, I researched a broad range of portfolio and interactive websites from Japan and abroad, examining how they presented creative work. This led to a deliberate decision to create a memorable experience rather than simply another efficient project index.
One of the main challenges was balancing rich visual expression with smooth website performance. Increasing the amount of rendering and interaction also increased the processing load, so the design and engineering were repeatedly tested and adjusted to preserve the experience while controlling performance costs.
I wanted the project to be evaluated internationally as a design that integrated visual expression, interaction, and technology, rather than only as a functional website. Entering the competition also provided an opportunity to understand how this approach would be received outside the context of the Japanese web design industry.
I learned the importance of understanding technological possibilities while designing, rather than treating design and development as separate stages. Experimenting closely with an engineer also helped shape my current approach of art-directing not only visual elements but interaction itself.
After its launch, the S5 Studios Website was featured by numerous Japanese design media as a portfolio website worth referencing. In addition to receiving the Gold A' Design Award, seeing the project circulate as a practical reference among designers and creators became another meaningful outcome of the work.
Grand Interview about S5 Studios Website
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.
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.
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.
To realize seamless, omnidirectional browsing, we prioritized both cross-device consistency and smooth performance. By optimizing the codebase and structuring JavaScript with fewer than 100 classes, we managed interactions and transitions more efficiently.For instance, we dynamically hid off-screen elements to reduce rendering loads and paid close attention to lightweight 3D object management. This design enables users to enjoy a fluid experience across devices—whether mobile, tablet, or desktop—without compromising performance.Achieving this required numerous iterations and adjustments, especially to optimize performance in multi-directional browsing, which presented one of the project's greatest technical challenges.
The spatial design of the S5 Studios Website is centered on the concept of a virtual space that resembles the vastness of outer space. This 'cosmic' design became the core idea of our interactive approach, offering users the experience of exploring freely within this expansive environment.With Pixijs and three.js, users can navigate in any direction, mimicking a sense of weightlessness, as if floating through a galaxy. As users move deeper into the site, content progressively reveals itself with more detail, transforming the exploration into a journey of discovery.This approach to spatial depth allows users to intuitively navigate while immersing themselves in the ethos of S5 Studios.
Implementing ejs for HTML generation enhanced the CMS performance significantly. By automatically generating static HTML files through local JSON updates, we minimized the server-side delays typically associated with conventional CMS platforms.This approach has streamlined the content update process, allowing us to ensure the latest information is quickly and efficiently made available to users. It also offers greater flexibility and speed in managing site updates, making it easier to keep the portfolio relevant and responsive.
The five principles—Shapely, Sharp, Skillful, Splendid, and Supreme—form the foundation of S5 Studios’ design philosophy and are reflected in every aspect of the website.Shapely emphasizes the elegance and balance in the visual forms and layout, creating a harmonious experience for users from any perspective.Sharp represents clarity and precision. Text, images, and icons have been crafted to appear crisp and clear, providing users with clean, well-defined visuals and responsive interactions.Skillful reflects our technical excellence. Leveraging advanced technologies like Pixijs and three.js, we crafted smooth navigation and sophisticated animations, showcasing the site as a testament to technical skill.Splendid symbolizes visual grandeur. Vibrant colors and lighting effects provide an impactful aesthetic, allowing users to feel as though they’re moving through a theatrical, immersive space.Supreme embodies our commitment to quality and consistency. Each element is carefully executed to deliver a cohesive and high-quality experience, accessible on any device.These values guide every design decision, creating a unified experience where the essence of S5 Studios is present from the moment users enter the site.
Throughout the project, the roles of design and development were not just divided but intertwined. Designers and developers worked closely, adapting and evolving our process as the project progressed.To realize the complex interaction design, we initially set up a strong system foundation with developers and later allowed designers to take on some programming responsibilities to refine the visual execution. We went through numerous prototypes to perfect the user flow and experience, ensuring smooth navigation.This collaborative approach allowed us to combine the strengths of each team member and produce a refined, high-quality result that would not have been possible otherwise.
Sound design serves as an emotional complement to the visuals on the S5 Studios Website. By working closely with sound designer Nao Kakimoto, we tailored each audio element to enhance the website’s atmosphere and reflect the project’s unique themes.Different sounds are used for each section, intensifying the immersive experience and making the portfolio feel more like an interactive journey than a static collection. Users can choose to enable or disable background music, allowing for personalized experiences.This multi-dimensional approach strengthens the narrative, creating a cohesive story that users can feel, hear, and see.
The S5 Studios Website represents a shift in how digital portfolios can transcend beyond a simple showcase, becoming a space that embodies the artist’s identity and values. By balancing spatial design, sound, and interactivity, the website allows users to connect with the creator’s philosophy on a more personal level.I believe this approach will inspire future portfolios to prioritize immersive, personalized experiences that invite users to feel as well as see the artist's work. At S5 Studios, we aim to continue exploring the boundaries of design and seek new ways to express creativity in digital spaces.