From our sponsor: Join Design and Growth to Ship Higher Buyer Experiences with Applitools Centra.
At Sophie Studio, we’re a staff of inventive professionals who love pushing boundaries and staying forward of the sport. We take satisfaction in our experience in varied initiatives and the popularity we’ve obtained each domestically and internationally. So, we’re excited to share with you our new web site that showcases the values and function behind our work in a singular manner.
We’ve put loads of love and care into our web site content material to be sure that it’s participating, immersive, and reflective of our ardour for creativity and excellence. This web site isn’t just a instrument to show our work, however a strategy to share our story and present our progress as a staff. We’re thrilled to point out you among the highlights of our web site design, which display our dedication to innovation and pushing the bounds. So, come on in and have a look round, we hope you find it irresistible as a lot as we do!
The Gaming Interface: A Distinctive Perspective
Most web site businesses and studios have historically relied on the essential web site format, which is an extended vertical scroll downwards.
Nevertheless, for our web site, we determined to undertake a gaming interface as our core idea. With a hard and fast display screen structure resembling a gaming controller, we goal to supply a recent perspective on how folks view conventional web sites. Our web site design focuses on an interface that resembles a sport standing display screen, equivalent to a list display screen, permitting customers to view the “Sophie Studio” standing display screen in a singular manner.
From a website replace perspective, we’ve included the thought of leveling up in video games, the place extra expertise and stats are added as the extent will increase. Because of this, the location’s total design emulates the expertise of taking part in a full-screen sport, beginning with the opening sport growth firm emblem, adopted by the title display screen, and lengthening to menus, transitions, and display screen layouts.
Our aim is to supply customers with an immersive gaming-like expertise, making it really feel as if they’re taking part in a sport whereas searching our web site.
Mosaic Animation: Including a Enjoyable Aspect to the Key Visible Space
We used a mosaic animation related to what’s utilized in video games so as to add a enjoyable aspect by altering the important thing visible space.
The mosaic animation is created utilizing 2D canvas. We begin with small photographs for the mosaic and step by step lower the scale till the mosaic is at its smallest, at which level we show the unique picture.
Earlier than utilizing fillRect, we use Math.random to find out whether or not or not to attract the present mosaic in its present place. If we don’t draw the present mosaic, we outline that the earlier mosaic needs to be drawn, creating an impact that appears just like the mosaics are sliding horizontally.
Stock Menu Navigation and Transition Results
The menu navigation is designed to open like a list menu in a sport, fairly than the present mainstream fashion of a hamburger menu. The transitions additionally improve the enjoyable of opening the menu with animations that aren’t usually seen on web sites. Along with the primary hyperlink parts, the person expertise is enhanced via music settings, language switching, accessibility choices for darkish mode/gentle mode, and even keyboard shortcuts to eradicate mouse operation, permitting for a seamless and game-like operation feeling whereas searching the location.
Seamless transitions between pages are achieved via conditional branching between the earlier and present pages, using results equivalent to the essential triangle impact and zoom impact for navigating between the works listing and element pages, including essence to the straightforward structure.
Moreover, the zoom impact when coming back from a works element web page to the listing web page is designed to retailer the scroll quantity as a variable, and restore the unique place primarily based on that variable when transitioning again to the listing web page from the element web page.
Discovering Consumer Achievements in a Artistic Method
On the ABOUT web page, we’ve got designed the presentation of our intensive listing of consumer achievements in a manner that’s not simply redundant and easily displayed as a listing, which can not look lovely. As an alternative, we’ve got give you a inventive resolution that enables viewers to hover over the consumer listing and see fragments of the initiatives we’ve got been concerned in, creating an pleasing expertise of exploring the archives. We’ve cleverly designed the archive of prestigious main consumer achievements to look visually interesting.
Typography: A Mix of Trendy and Retro
Whereas making a gaming interface, it’s not sufficient to easily apply a digital aesthetic to all parts. Due to this fact, the important thing was to determine mix fashionable typography with a gaming digital fashion. By mixing a contemporary, barely retro font with mosaic animation and hover results paying homage to video games, we have been capable of cleverly inherit retro parts whereas sustaining a contemporary design.
