A real-life case-study
Tools
Storage : Google Drive, Dropbox, YouTube
Image sorting/identification : Google Sheets
Video optimization : veed.io, Dropbox
Product Design : Figma
Product Development : Webflow, Lottie, Webflow Forum
Monochrome Lagos is an on-going photography archive of black and white images that have been taken by a Lagos-based artist since 2013 till now.
Aside from it just being an exhibition channel for images as well as short films, it’s also an e-commerce platform for sales of photography prints and merchandise.
Monochrome Lagos is also poised to be an active real-life and online community, growing through strategic collaboration, photo walk events, and its first ever NFT drop!
Also, the Museum of Modern Art(MoMA) has announced that Monochrome Lagos, the archive, will be exhibited in the museum next year!
So yes, it’s the most exciting thing I’ve ever had the chance to work on.
My role on this project is as the Product Designer and Webflow developer, using Figma and Webflow and a host of other software to make the archive digital.
The project involved working with stakeholders across Malokun Labs — a parent company for Monochrome Lagos. I worked side by side with the artist as well as other brilliant creatives who made this a reality today.
Months ago when the project was in its early phase, we had started with a simple WebFlow theme . The plan was to redesign that theme to suit the site because it has some text-links very similar to what we were trying to achieve with the years as an archive.
Eventually, various elements changed upon iteration.
The simplistic theme gave us Teko, the font visible on the Monochrome Lagos site as Subheadings and Archive years. Teko stood out to me, as a font that should only function under black and white situations.
Black Teko on white background, or white Teko on black could never fail in my eyes. Since the site mostly tells a story using only black and white imagery and film, it felt only right to also strip all web elements of any color.
However it was tempting at some point to experiment with a very familiar shade of yellow with two distinct thick black stripes (DanfoYellow) to further connect the experiencer’s thoughts from the screen, to the streets of Lagos(the mainland at least).
Challenge — The first ever series of user studies on the Figma prototype of this site had some participants questioning the choice of color, or the lack thereof, and could not seem to appreciate the achromatic route. In other words, the design was not popping (with color).
Resolve — This particular set of feedback, though in the minority, led me to do more research about websites that only used black and white in their color palettes. What did they do differently? What themes, elements come up often and make the sites award-winning or at the very least worthy of note.
Learning from others
- The most obvious theme on successful achromatic sites at the time of the research was interactivity, whether subtle or attention grabbing
- The use of bold typefaces in large font sizes, in defined color, i.e. white was truly #FFFFFF and black was absolutely #000000 for that beautiful high contrast. (However this did not work for us, more on that later)
- In my research, I observed that most of these websites still retain a bit of color from the ROYGBIV spectrum, however small, in a way that lets viewers appreciate the black and white even more
Homepage
The Homepage had always been envisioned to have the one iconic sentence, “What if we stripped Lagos of its color?” sitting pretty on a landscape image of a bridge or a beach, 2 common Lagos themes.
Then the artist asked
And that was the origin of the current slideshow, designed to have the landscape images on desktop and mobile landscape modes and the portrait images on mobile portrait mode. So if you flipped your phone to landscape mobile while on the homepage, you’d see 8 different images in the slideshow. Pretty cool right?
Speaking of Portraits and Landscapes
The images on the site were taken by a single photographer over 9 real years; 2013 through 2021 and in each year there are nothing less than 90 pictures, landscapes and portraits alike scattered beautifully in The Google Drive.
As iconic as each picture was in quality, it was annoyingly difficult to sort through them one after the other, differentiating between portraits and landscapes, and uploading image titles and alternative texts on Webflow.
After enough iterations on UI design we settled with the 7-column grid layout (originally 8, the gallery would come in..
After a creative on the team had named every single one of the pictures and assigned Alternative Texts to each one of them, I began to upload on Webflow.
So we created a Google sheet and began to sort, to prep them for their respective galleries. Fortunately, Webflow automatically optimizes uploaded images to allow faster page loads so we didn’t have to compress images and risk losing quality, provided they are less than 4 MB. Videos on the other hand, are a different story.
My process involved placing a ‘CSS Grid’ inside of a container, both nested in a div block. Inside the grid were individual ‘Lightboxes’ holding each of the images
Back home
On the homepage, and most other pages it became even more important to add micro-interactions that could bring the site to life. Interactions such as the background-color change on scroll, the dancing cursor and the subtle yet elegant way the texts appear on the page. Another interesting effect is the fixed background feature some might be familiar with.
Unfortunately, most of these fancy add-ons die a boring death on mobile view, because they become mostly useless as the viewport descends from laptops to tablets, then Redmis to Infinix and then iOS. The dancing cursor no longer follows you around like a ghost and the fixed background fades into the background. And there’s nothing to be done about it. Graceful degradation.
Challenge — This is a current challenge for me as the no-code developer because a lot of time goes into designing interactivity that may never get to the user’s screen. This happens because most users will access the experience on their mobile phones. It is a challenge to seek out more creative ways to build useful and fun interactions for the mobile user. Also to keep in mind that some users need to be able to toggle all of these off if they want to.
If you’re reading this, I hereby appeal that you please check out this website on your desktops to experience its truest form. Thank you.
Decisions
- White text on black backgrounds are great together for high contrast, especially for sites that have a limited color palette like this, however we discovered that the texts become harder to read and cause eye strain in the long run. So we ended up using other variations of black (e.g #131212, #101010) and whitesmoke in some cases instead of plain white, because we expect that users would scroll through the digital gallery for extended periods of time.
- Leaving the arrows on the slideshow encourages interactivity for the user. Initially it was hidden to let the slideshow breathe. But upon testing, some users went straight down the homepage without immediately realizing that it had been a slideshow.
- The Lightbox feature worked as an excellent feature for users to interact with the virtual gallery and ‘cinema’, because it mostly removed preload time to an extent.
- The decision to completely take out the Danfo-Yellow background is still a painful one as it in a way makes the design literal and subjective at the same time. Art.
However, it makes sense to omit it because the site’s literally called ‘monochromelagos’
Films
Working with the short films on Webflow was the most challenging aspect of building the site. First because they were heavy, ranging from 33MB to as large as 150MB, so a lot of optimization had to be done before uploading them as HTML Embeds nested in lightboxes. Work is still ongoing behind the scenes to make the videos load faster on mobile especially.
Webflow Limitations
- Currently, there is not enough support for Nigerian e-commerce sites on Webflow as there are no available payment gateways to handle seamless transactions. For now, one thing to do if you were building a shop inside a Webflow website in Nigeria, is to integrate PayStack. However, it is important to note that your users will not be able to ‘Add to Cart’, as they will be limited to purchasing items one by one, by retrieving individual payment links from PayStack. The next best thing is to get an entire storefront on PayStack.
- Webflow doesn’t allow multiple ‘devs’ work on the same project like a team on Figma. To access this feature, one would have to pay an extra sum. This became a challenge in the later stages of developing this site as I had extra hands on deck to help out with minor changes, but it was not possible.
Webflow being too expensive for Nigerian brands is its only flaw, in my opinion.
Overall, this project helped me become even better as a Webflow developer, and I feel more confident building other no-code products in the future.
Please check out the project at www.monochromelagos.com, explore the gallery, take a tour through the city via the short films and by all means, shop till you drop from the Monochrome Lagos Shop.
I’m also active on Twitter, tap to connect
