In late December, Rest of World published one of its largest photo projects yet: Tech Markets, profiling tech and gadget marketplaces around the world. The aim of the project was to display eight unique visual walk-throughs of each market.

The goals of the project we outlined were:

  1. Establish a distinct visual brand.
  2. Focus on navigability and structure for promotion.
  3. Create a photo presentation and layout that would not require custom code for each section

The visual brand

Each tech market deserved its own look and feel. We also knew that we wanted the project to have a unifying visual brand. We decided to lean into a dark mode-inspired color palette to unify the project visually. The vibrancy of our original Rest of World palette was something we didn’t want to diminish. Rather, we focused on tailoring the colors to adequately contrast against a dark background.

I decided to move forward with a tailored version of our original palette for legibility reasons — for example, our original blue doesn’t contrast well against the dark background and was formulated with a light background in mind.

Navigability and structure

Based on early drafts, we recognized that one of the user-experience goals was to nurture exploration with this project. We followed a looped content experience that lazy-loaded one tech market after another. This also allowed for each article to be shared and promoted independently.

Screenshot of navigation treatment, with drop-down revealed in top-right corner (Desktop)

In deciding to use a unique color for each tech market section, we tied the article together by letting the navigation bar color correlate as well. The goal was to give our readers a sense of place and change as they scrolled through the piece. Although each tech market section can be shared individually and treated like a standalone article, the subsequent articles are loaded in order in every experience. This ensures that readers get to flip through each tech market in the same manner across the board, regardless of how they discovered this project.

Photo presentation

The story leads with a header treatment that pulls in a single image from each tech market, cycling through them. In order to double down and emphasize the color palette and visual branding, the typography in the header correlates with each individual tech market article.

Instead of a headline that supports the story with words, this header is largely visual, and sets expectations that this is a highly visual story. Given that each of the tech markets had such a unique look, we incorporated custom photo blocks that we could use to pace each individual section differently within the experience.

Initially, we explored a video background approach to this, with a separate text layer that updated based on controlled frame progression. This would have likely been lighter and more performant, but we ran into issues with various browsers that restricted auto-play of video unless there was user interaction.

We created five different styles of photo blocks, ranging from displaying a single image to displaying a four-pack, shown here. This allowed our photo editor to customize and pace each section uniquely, depending on the tech market. In addition, we created a space for each individual caption as needed.

Our work on Tech Markets is another example of our commitment to support the journalism of our colleagues. The design and template decisions we made on our general articles are intentional so that they allow us flexibility to continuously experiment with new design approaches in a quick and efficient manner. Over time, we aspire to take the elements that have had the greatest impact and incorporate them into the larger site. The design and development work we do here will live on in future projects.