Responses by Valeriy Hnybidenko, front-end developer; Leonid Kostetskyi, lead designer and full stack developer; and Roman Stets, project manager, Emotion Agency.

Background: This site serves as a web portfolio for the photographer Sofia Shcherbak, who conducts both individual and group photo sessions throughout the Czech Republic and Ukraine. Sofia tasked us with developing a portfolio site that can effectively showcase her work through design and interactive elements and convey her unique approach to photography.

The target audience is individuals seeking a photographer to capture specific moments in their lives. These are people who care about a photographer’s approach, style and the mood they set.

Larger picture: Since this is a portfolio site that contains Sofia’s best work and presents it to interested people, it is shared among potential and existing Sofia’s clients. Sofia works independently with each client, so she has a limited number of shooting slots each month and therefore does not need a wider ad campaign, but everything can change over time.

Design core: The site’s design concept is its key feature, crafted to create a specific mood. Upon visiting the site, users should immediately feel as though they’ve entered a private photography gallery. This impression is emphasized by the camera shutter sounds during interactions with clickable elements and an animated filmstrip with photographs. Clicking on these photographs leads directly to the page of a specific photoset. This filmstrip, reminiscent of actual film, connects users with the concept of photography. Features like smooth scrolling, an interesting grid on photosets and a customizable slider appearance all serve one global function: to focus users’  attention on the photographs.

The site is designed for smooth operation and easy information perception, with emphasis on the photographs rather than text. We want visitors to spend more time appreciating the content and enjoying Sofia’s creativity as she narrates people’s stories through her photos.

Favorite details: Without a doubt, the animated film of pictures on the main page sets our site apart. Here, users can modify the animation and interact with it. The team particularly appreciates the site’s smooth operation, powered by our proprietary smooth scroll. Additionally, the photosets’ scroll animation and mode-switching functionality garner plenty of praise.

Challenges: Developing a concept for our design system and site logic took about two months. During this time, we discarded three or four options that we couldn’t develop further. The concept needed to seamlessly integrate into the narrative we were creating through the site. This was followed by the technical implementation of our ideas, including animations and ensuring smooth operations.

Time constraints: We didn’t have an abundance of time, but it wasn’t extremely limited either. We had about three months to conceptualize and develop an idea. Our aim was to create something truly unique, yet easily understandable at first glance.

Alternate paths: Likely, we wouldn’t change anything. Both us and Sofia, as well as the users—judging from the many positive reviews of the site—are please with the decisions we made. We might consider adding more interactivity for users to engage with specific photosets. We had once considered letting users apply filters to them and alter their appearance; however, this would have deviated from Sofia’s original vision for each photoset. To maintain the authenticity of the photographs, we decided against this idea.

New lessons: We discovered that nothing’s too farfetched! Basically, every spark of an idea can take on a life of its own. Our job is to find the right tools to bring that idea to life in the real world. For example, the animation on the main page took a lot of learning and hours of tinkering to get it as smooth as you see it on your screen.

Navigation structure: The key to this website is its simple navigation. The site is divided into three sections: Home (Index), About and Contact. This straightforward design places the focus on the photosets, which are the main feature of the site.

Special navigational features: We’ve made it easy for users to access a photoset directly from the main page. You simple select a photo, click on it and you’re taken to that photoset. Scroll through the images and, once you reach what seems like the end, you’ll seamlessly transition to the next photoset thanks to our “endless” scroll feature within the photoset.

Technology: The design was crafted in Figma, an industry-standard tool. We used HTML5/SCSS for the layout and selected Nuxt 3 as our front-end framework. We created animations using our custom Smooth Scroll library, in addition to GSAP and WebGL. For code storage and version control, we utilized GitHub. The front-end part of the site was deployed using Vercel.

Special technical features: We used the headless CMS Storyblok for efficient site content management. This is a beneficial solution for developers and site owners alike. It offers flexibility in choosing front-end technologies, enhancing the development process.

Moreover, Storyblok features an intuitive visual editor that lets users create and publish content regardless of their technical knowledge. This is a significant advantage for site owners and content managers as it eliminates the need to consult developers for site edits.