Two Dots Symbol

Ci.CLO Website

An aggregator of the multiplicity of projects produced by the artistic platform Ci.CLO.

Composition with desktop and mobile layouts.
Ci.CLO: Plataforma de Fotografia

Rethinking the digital positioning of the Ci.CLO platform.


Design and front-end development of the site.


The website was designed and developed for Ci.CLO serves as an aggregator for the various projects developed by the platform.

The Ci.CLO platform is dedicated to the development and promotion of artistic practices with strong roots in photography. The website was conceived with the photographic image as the core of the entire experience.

The home page is sectioned by projects, with activation of certain UI elements

Home Page

The Home page is divided into 4 sections, an introduction to Ci.CLO and an introduction to each of its 3 core projects.

There are two layers to this page, text, and imagery, with a semi-opaque film between the two. The idea here is to make the dialogue between text and image a constant during the scroll, defining the project both by description and by the selection of photographs.

Toggling between the imagery and text layers.
Display of projects relevant to Ci.CLO in the footer

Projects Index

We designed this page taking into account the scalability of the number of projects promoted and created by Ci.CLO. In this sense, the page allows great flexibility in the amount of content added, with the image being the main highlight throughout the page.

While scrolling, the title of each project remains fixed momentarily, contextualising the user in relation to the project shown

Projects Entry

The core of Ci.CLO are the projects developed and promoted by it. The main intention of the model designed for this page was to present each project with clarity and synthesis.

Project images slideshow

Space for the photography

The slideshow reacts to the dominant color in the photograph, providing a comfortable and friendly environment for exposing each material.

Project summary

The presentation of each project is made both by detailed information and by sections that summarize it. This strategy allows us to portray the project in a broader dimension.

Textual Slide

Essential points of the project are laid out on a slide. With this interface we created a clear separation between topics, allowing a quick identification of points of interest.


This page intends to summarize the positioning of Ci.CLO from the use of several communicative interfaces. The layout highlights key phrases and the images illustrate the experience that occurs in the projects promoted by the platform.

Flow of the digital gallery page
Interaction that presents the news


Want to collaborate?
Reach us at