Space Caviar Studio Website

Categories
Web Design
Information Architecture
Front-End Development
Tools
WordPress + PHP
MAMP PRO
Adobe InDesign
Client
Space Caviar

A web (re)design project for SPACE CAVIAR when I interned with the studio in 2016.

Brief

Space Caviar is a design and research studio based in Genova, Italy working predominantly in architecture and politics. Their projects are diverse, spanning public programming, exhibitions, architectural installations, and film, and cover international ground from Belgium to China to the World Wide Web. I was asked to redesign the website as an archive/index as part of my internship, and to create a guidelines manual for future maintenance and update of the site.

Initial Process

The original website had a navigation menu of projects on the left, with the project details itself taking up most of the page once opened. It was collaboratively decided that for the new design, project name, media type, tags/topics, and year would be the primary categories for display on the home page.

↑ Comparisons of old home page to new home page.

While the project titles and year were givens, one of the first tasks was to look at the projects and categorize them in order to create a narrow range of media types.

↑ All the projects laid out before sorting.

↑ While most of the projects were in fact interdisciplinary, these were the primary media types.

Site Map

The site map is straightforward and simple, as the website primarily operates as a portfolio of projects and the menu navigation only needed to direct to an about page and external social media links.

Home Page

The most important page was the website's home page, as it was the index through which all the projects were listed and accessed.

↑ I decided to remove the functionality of each individual text link (project name, type, tags, year) in order to simplify the interactions. Only the entire index bar is functional.

↑ Projects can be viewed in context of the index or as individual pages via the permalink. Multiple projects can be open on the home page at the same time.

Project Page Structure

The projects could be viewed both in the home index as well as via its own permalink. In both, the layout remains the same:

Responsivity

Guidelines Creation & Design

In addition to the website itself, I produced a set of guidelines for how to update the website in WordPress. The guidelines project encouraged me to organize the information logically as I was completing the visual design of the website itself. In terms of code, I had to create a template with available WordPress tools so that projects can continuously be added; in the code, for instance, I included corresponding class and id selectors that would make sense for future users.