La Fototeca
UX · UI · Website Design
Client: La Fototeca
Role: UX/UI designer
Team: Me and Pepe Ajcú
Year: 2018
Background
La Fototeca is more than a photography school. Besides managing workshops, festivals, talks and exhibitions, La Fototeca empowers students through different levels of photography programs along skilled and multi disciplinary professors. They believe in creating open dialogues through a universal language and how photography gives meaning to life.
Overview
I was contacted by Pepe, the Marketing Lead, and was offered a trade. La Fototeca needed to redesign their website into something more avant garde, if you will. And in return I’d get access to their Intermediate Photography program. Currently, my redesign has been replaced into another one, since it’s been a few years; they evolved (In case you visited their website and saw something different). Reinvention is part of growth.
Pepe and I discussed the early stages of what design direction and style they’d been considering and would fit perfectly for their audience. However, I had free creative direction 😎.
Understanding the problem
La Fototeca, during 2018, was developing different branches into their business model such as: education, gallery, events, cultural spaces, professional printing services, and more. Therefore, they needed to reflect such information into their website in a much more organized way. Also, La Fototeca was looking forward to refresh their website look and feel into something modern.
Process
Defining the visual style
The style they were looking for was something modern, “aesthetic” and at the same time inspired in brutalism design movement.
According to NNgroup: “Brutalism in digital design is a style that intentionally attempts to look raw, haphazard, or unadorned. It echoes early 1990s-style websites (think Craigslist and the Drudge Report). Sometimes this aspect of brutalism is expressed as bare-bones, almost naked HTML site with blue links and monochromatic Monospace text.”
We created a moodboard of how we envisioned the website; elements like repetition, yuxtaposition of elements, wingdings and even Susan Kare’s icons for Apple were major sources of inspiration.
Information Architecture
During that time, I must confess I was discovering a lot of design tools and everything seemed new. Even the sitemap was as basic as a word document, instead of a proper visualization. The important thing was to understand the website’s structured sections.
Wireframes
After the information architecture was set, the next thing was to understand the flows of the website and create wireframes. Although, these wireframes are not supposed to be perfect in visual quality, they were created to understand content placement and its structure. Once these were approved, I could proceed on the best part: the visuals ⚡️ Some flows were discarded along the way, and maybe used in future iterations.
Deliverables
The final deliverables were visual designs of the website for desktop. Back in the day, it was normal to use lorem ipsum, dummy pictures and avatars. Nowadays, not really 😅. Around 2-3 iterations of changes were made. The first one mostly consisted of readjusting and simplify certain layouts and elements, since development couldn’t program everything because of the deadline. Prepare to scroll for the following screens:
Important: Some of the images used were taken from their website in that time and also from Unsplash. And some others to their respective creators. Copyright © their owners.