Loading ...

Responses by Depositphotos and AdvancedTeam.

Background: We started this project with the objective of creating a holistic story around stock photography, demonstrating how the look of stock photos has changed in the past decade. Capturing the evolution of aesthetics is not an easy job. With the help of AdvancedTeam, we managed to create a website that communicates this complex idea and highlights the quality of images in the Depositphotos library.

Promotional aspect: We focused on promotion among the people that would appreciate the project the most. First and foremost, we wanted to share it with Depositphotos’s community. This was done as a way to thank our contributors for enriching our library and defining authentic photography today. Also, it was equally important for our clients to keep them up to speed with insights on the latest in microstock and to show them where the industry is heading.

In terms of promotion, the project couldn’t have had its place in the spotlight without its design. The website itself became the point of definition for the story of stock photography aesthetics when we just couldn’t describe it in words. Much of the appreciative feedback has been about the excellent design of the website, which is dynamic and has interactive elements that encourage people to explore more. It achieved the goals we had in mind when we decided to make this site.

Design core: We wanted to make the design a feature of the site so that it would rope the user into the subject, fostering a curiosity to see what happens next. But at the same time, the design needed to feel clean and convenient to find information on the site.

Challenges: One of the biggest challenges was to understand how to show users information without tiring them with a long scroll—and, at the same time, present all the information on one page. To do this, we implemented a combination of different scrolling; the site not only has a vertical scroll but a horizontal one as well. We also created a red marker on the site with which users can draw. There are similar solutions on other sites, but we created this marker on our own from scratch. It proved to be difficult but interesting.

Perhaps the biggest challenge was performance. It took quite a lot of time and labor to make the website consume as few system resources as possible. There were several issues: WebGL was very video-card hungry, and more than 150 photos needed to be loaded on initialization of the app. Eventually, we reached our goal in optimization: the photos do not take much space, and all meshes in three.js are added to their scenes only when they’re needed. In general, the whole development process from design to code was enthralling, and the connection between the whole team was so close that even project managers mastered VS Code and Git!

Navigation structure: The site is long enough to warrant a navigation element. The familiar menu isn’t enough and forces users to make an additional click, so we decided to come up with a navigation structure that would help visitors go to their desired section in one click. Simultaneously, it needed to be clear, take up little space and fit harmoniously into the site. From this, we had the idea to put the navigation on the right, which is similar to the usual progress bar.

Technology: The technical part of this website’s development was full of interesting solutions and approaches. The technical stack is Webpack, HTML, SASS, JavaScript and Pug, which renders static HTML resources. The site also utilizes the libraries three.js, GSAP and Matter.js. Purely static, the site has no back end. Each language is stored in a JSON file.

Since the beginning, the site was designed to be as interactive and dynamic as possible. three.js facilitates the creation of interactive elements. As the library itself is not enough to create unique effects such as the main screen gallery or image hovers, we ended up creating custom shaders with GLSL to help.

One of our interesting solutions was the scene with interactive photo balls in the Credits section. This is a Canvas 2D scene built with Matter.js. The optimization of the scene proved to be the most difficult part of its development.

Another unique distinction of the project is a custom scroll with a multiside scrolling technique. We did not find open-source components for this solution, so the development lay fully on our shoulders! The coding was full of pitfalls that sometimes took a long time to solve, but the end result is fascinating.

evolution.depositphotos.com

Browse Projects

Click on an image to view more from each project
X

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

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