Skip to content
S5 Studios ویب سائٹ by Shogo Tabuchi

S5 Studios ویب سائٹ by Shogo Tabuchi is a highly esteemed winner of the very prestigious 2021 A' Design Award سونے دا انعام in ویب سائٹ تے ویب ڈیزائن Competition Category.


سوناویب· 2021

S5 Studios ویب سائٹ

by Shogo Tabuchi

Client: S5 Studios

A' Design Award سونے دا انعام Winner in ویب Category

104,707

Verified Award Winner

Verify Award Status for #109845

Colors

The Design

About S5 Studios ویب سائٹ

اے ویب سائٹ شوگو تابوچی دی پورٹ فولیو سائٹ اے، تے ایہ ڈیزائن دی خوبصورتی کوں نمائندگی دیاں امکاناں تے اپ ڈیٹ دی سہولت نال رلاندی اے۔ 2020 وچ کووڈ-19 دی وبا نے دنیا بھر دے فنکاراں لئی اپݨے کماں کوں ٻئے نال سانجھے کرݨ کوں اک چیلنج بݨا ݙتا اے۔ ایں نے آن لائن پروموشن کوں پہلوں نالوں ودھ اہم بݨا ݙتا اے۔ ایہ پورٹ فولیو سائٹ اک خود پروموشن دا منصوبہ اے جتھاں ورتݨ آلے اپݨی نظر، سماعت تے لمس راہیں فنکار دے منفرد انداز دی اک جھلک ویکھ سڳدے ہن۔

The Recognition

About the A' Design Award سونے دا انعام

S5 Studios ویب سائٹ A' Design Award سونے دا انعام دا جتݨ والا ہے، انتہائی معزز پچھاݨ جیڑھی پہلے درجے دے، شاندار تے نمایاں ڈیزائناں کوں ݙتی ویندی ہے۔ سونے دے جتݨ والے انتہائی جدت والے، بہوں بصیرت والے تے شاندار طور تے اکھیں چندھیا ݙیوݨ والے تخلیقات ہن، جیڑھے اپݨے ڈیزائنراں دی عبقریت، حکمت تے مہارت دی عکاسی کریندے ہن۔ S5 Studios ویب سائٹ کنوں امید کیتی ویندی ہے جو او ہک بہوں سراہی ہوئی، رجحان ساز تے یادگار ایجاد ہوسی جیڑھی بے مثال قدر پیش کریندی ہے۔ ایہ ڈیزائن جنہاں A' Design Award سونے دا انعام جتیا ہے، ہک شاندار، محترم منصوبہ ہے جیڑھا فن، سائنس، ڈیزائن تے ٹیکنالوجی دیاں حداں کوں ڈاڈھے فائدے نال ودھیندا ہے۔ S5 Studios ویب سائٹ شدید خواہش دے جذبے پیدا کریندا ہے، جوش جگیندا ہے، تخلیقی صلاحیت کوں ودھیندا ہے تے ساکوں موہ گھندا ہے۔

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.

Good Design Deserves Great Recognition

The A' Design Award is an international, juried accolade for good design. Take part in the A' Design Award to get an opportunity to earn meritocratic recognition, gain fame, prestige and publicity for your work. Nominate your work for the A' Design Award and compete for the coveted A' Design Prize.

Nominate