Loading ...

Responses by Pixeljam.

Background: The Half of Eight project, a digital magazine and exhibition by product designer Anton Sokolov at software development company JetBrains, provides a platform for individuals to engage with the outcomes of journaling. Anton consistently curates artworks and texts and occasionally complements the former with musical tracks. These pieces represent chapters within a webzine that reflect his life experiences and encounters in both personal spheres—such as reading books, watching movies, and exploring new places with family and friends—and professional domains, detailing the journey leading to resolving various product design challenges.

In our digital society, websites serve as reflections of ourselves. While personal websites may have shifted from being the primary focus due to the rise of social media, they continue to offer distinct advantages. Analogous to museum exhibitions, they can be meticulously designed to showcase an individual’s unique approach to their work, much like the carefully curated chapters in Half of Eight’s webzine. This project encourages you to infuse more personality into your webpages and be unafraid to experiment.

Design core: Each section of the website—the art journal, music section and product design articles—is crafted to express its content with personal touches that are subtle yet noticeable.

First, an infinite grid avoids visible repetition in the viewport. This gives the sense of a continuous journey without a clear beginning or end, but rather a fluid flow, process or moment in time.

The music page resembles an artwork page, but its core idea pays homage to the long-lost cover art view on iPods—the one with horizontal scrolling on stacked records. Here, we let ourselves diverge by adding a touch of modernity, animating artwork and incorporating bouncing waveforms to evolve the static cover art experience of the past into an interactive, visually dynamic presentation for our visitors.

The articles originated from us quickly glancing at our desks. They are wide and packed with various sheets—printed excerpts from tech articles, Japanese homework practices, design magazines or simple bureaucratic paperwork. Initially capturing our attention, we swiftly move from sheet to sheet, creating a stack. This is how we intend for users to explore articles on Half of Eight.

Favorite details: We considered the website’s visual experience with the aim of striking a balance between artistic flair and providing a subconsciously familiar user experience.

We employed WebGL to devise an overlay method that transforms each artwork into a poster by integrating typographic compositions and lettering. This not only reinforces the concept of a virtual exhibition—with each poster acting as an entry point—but also provides the author with an opportunity to create varied versions of an artwork. This encourages viewers to explore all the artworks by hovering over them to discover the one that captivates their eye the most.

Furthermore, these overlays and the grid are spatially three-dimensional and function accordingly. The website functions seamlessly when viewed through Apple Vision or other VR headsets, as it is designed to work effortlessly with eye-tracking technology.

Likewise, while observing the UI, the cards no longer align with your eyesight. It’s a subtle touch but one we particularly appreciate. This adjustment minimizes unnecessary background movements and distractions, enhancing the overall user experience.

Challenges: We faced various challenges from the get-go—making sure articles scrolled smoothly; getting the waveforms to appear correctly on different devices; and juggling performance, appearance and user experience. But the biggest headache was building the infinite 3-D gallery. It was a whole ordeal to rewrite how animations sorted, loaded and were laid out on the screen until everyone was happy. We spent ages making sure things didn’t repeat in the same view, and then getting the slider view perfected took a bunch of tweaking. Adjusting timings, nailing loading screens, swapping out low-res pics for high-quality ones—it was a lot of work.

Time constraints: We were dead set on not compromising, which meant we needed to find a way to optimize our efforts. We came up with two approaches, each on different ends of the spectrum.

First, managing content layout was crucial for quick design iterations. Our About page needed dynamic layouts—combining headings, links, images, audio and video—within a slider setup atop the grid. Our previous Contentful CMS didn’t quite fit the bill here. Managing such a complex structure meant dealing with a convoluted mess of nested tables and modal windows or wrestling with a visually restrictive editor.

So, we channeled our inner hardcore, bearded-hipster programmers and chose to use yaml files with markdown. Anton, being as bearded and stretch-sweatered as us, tackled with yaml-markdown-through-react-to-html system. Surprisingly, the DIY method turned out to be handy, meeting our needs without unnecessary complexity and letting us take a design-as-code approach.

Second, for the superimposed lettering compositions on posters, we initially wanted an automated solution. Realizing this feature’s complexity and testing requirements, we went manual. This move shifted some workload to the designer off the development team, but the manual touch allowed for far more customization, a plus for Half of Eight’s artistic design. It also let us focus on optimizing the 3-D gallery’s performance without adding to the development workload.

Navigation structure: The top-level navigation operates rather straightforwardly, functioning in the background. However, the navigation within the pages deserves mention. The diverse collective behind the project’s development comprises individuals with varied preferences: Some are inclined toward mobile platforms, where gestures and taps take precedence. Others, such as coders, lean toward keyboard-only workflows. On top of that, our 3-D designer can’t imagine working without a mouse and scroll.

Taking all these preferences into account, our resulting set of navigation methods become apparent. We were eager to accommodate these preferences: hence, keyboard arrows function universally. Additionally, dragging and scrolling through 3-D space is enabled.

One aspect we are particularly proud of is the ability to swipe down to exit from the Lightbox view. This interaction common to app design is rarely seen in websites.

Technology: We used Next.js on top of React as the base for this project. But that was just the beginning—we had some nontrivial tasks to accomplish, like the aforementioned three-dimensional effects on the Journal page or the dynamic waveform while music is playing.

Instead of three.js, we decided to use the OGL library to work with WebGL. OGL is several times lighter than three.js, which positively affects the loading speed of the site. Moreover, we didn’t need to use all the features that three.js provides. Otherwise, these two libraries have similar API and working principles, so it was easy to start working with OGL.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In