Responses by ToyFight.
Background: A hybrid art gallery and experiential environment, The LA Art Box (LAAB) opened its first brick-and-mortar store in October 2021. To support this launch, it needed a site to explain who it was, what it does and how you could get involved.
Larger picture: Part of the strategy was to secure funding via a Kickstarter campaign. LAAB needed a site that inspired and educated potential investors about the company, its founders, and its mission and philosophy.
Design core: We wanted to create a more explorative online experience aligned with LAAB’s exhibitions. We developed a digital bookshelf idea that used book spines as windows into the artists’ worlds, making the overall aesthetic more eclectic, varied, and engaging.
Favorite details: Helping the client develop a solid creative idea and direction meant that everything else followed naturally. Our concept of “stories that find you” helped shape the online experience and the physical.
Challenges: There were lots of things to consider during design and development. We knew we wanted to execute a horizontally scrolling layout to reflect our bookshelf idea without it coming at the cost of bad UX. This meant figuring out many elements that are more heavily skewed toward scrolling naturally (vertically).
Divergent paths: If we had initially mapped out all the content, it would have helped us shape the narrative a little more. As this was a first for the client, many relationships, partnerships and collaborations were being forged during the development process, which meant we had to be a little safer.
New lessons: The design and development team learned a lot during this project. Managing and designing the layouts to work horizontally meant fighting against many principles that we would employ for a more conventional site.
Special navigational features: We had to almost reverse engineer the mobile experience. This is an excellent example of how users behave differently on devices. Desktop is more of a research tool where users dive deeper into content and spend more time doing so. Mobile is more utilitarian; users can find what they need fast but still be inspired along the way.
Technology: The site is built in React, statically generated using Gatsby with content pulled from Contentful. We used Locomotive Scroll for the horizontal scroll interaction and GSAP to manage the animations.
The main consideration with a horizontal site like this is that the content must not overflow the vertical height of the browser. This means that all font sizes, dimensions, spacing and position values have to be set in viewport-height units to ensure they scale proportionally to the browser’s height on all devices.