ARTBAR
A Database of Barcelona Artisans from 1814 to 1860
Landing page
Landing page — Title on hover
Overview
Artbar is a web-based database of artisans who worked in Barcelona between 1814 and 1860. The client approached us with the idea of creating a database that would preserve the history of these artisans and their contributions to the city's culture and economy.
The project was a collaboration between myself, who led the design process, and Nubeame, the company responsible for creating the database and back-end of the webpage. Our goal was to create a platform that would make it easy make it easy for people and, specially, researchers, to access information about these artisans and gain a greater appreciation for their work and the context in which they lived. In this case study, we will discuss the background of the project, the design process, the technologies we used, features of the page, the potential impact, and conclusions.
Background
The Artbar webpage was created as part of the Research Group "Treballs, Institucions i Gènere de la Universitat de Barcelona" of The University of Barcelona, and is sponsored by The Ministry on Science and Innovation of the Spanish Government and The University of Barcelona itself. The project aims to preserve the cultural heritage of Barcelona's artisans and make it available to a wider audience. By creating a database of artisans and their work, the project hopes to bring the history of Barcelona's artisans accessible to researchers and other interested individuals in general.
Role
Designer and Front-end developer
Design and Development Process
At the outset of the project, I drew inspiration from the rich cultural and historical legacy of Barcelona's artisans during the 1814 to 1860 time period. In order to create a design that was both visually compelling and intuitive to use, I carefully selected a color palette that featured a minimalist combination of black, white, and a dark red (Barn Red) for emphasis. To maintain the traditional aesthetic of the city, I opted for a font pairing that included Garamond, a classic serif font from the era, and Open Sans, a contemporary sans-serif font. While I had a preferred design idea, I recognized the importance of incorporating the client's preferences into the final design. Through collaboration and iteration, we arrived at a design that balances modern usability with traditional design elements. The design featured a landing page, project explanation page, credits page, methodology page, contact form, and access to the database. The website features a landing page, project explanation page, credits page, methodology page, contact form, and access to the database.
To showcase my design process, I have included images of the alternate mockup ideas I explored in the early stages of the project, along with annotations to explain my thought process and design choices. These mockup ideas demonstrate my creative approach to problem-solving and my ability to consider multiple design options before arriving at a final solution.
For the development process, I used HTML, CSS, and a small amount of JavaScript. I faced common challenges during development, including issues with cross-browser compatibility and responsive design. However, I was able to overcome these challenges through careful testing.
Choosing and pairing fonts, creating the logo, and the identity background.
Here, displayed a few images of the topic, used for inspiration, generated by Midjourney.
In the end we went for some original engraved imagerie from The Encyclopédie ou Dictionnaire raisonné des sciences, des arts et des métiers, par une Société de Gens de lettres (1756-60).
Webpage Features
The Artbar webpage features a landing page; a project explanation page that provides users with detailed information about the project and its purpose, as well as the information found in the database itself. The methodology page outlines the research and data collection process and sources, while the credits page recognizes the contributions of the various individuals and organizations involved in the project. Finally, users can access the database by selecting specific artisan categories or by searching for individual artisans. There is also a contact page form for any suggestions and/or inquiries.
Impact
The Artbar webpage has the potential to bring the history of Barcelona's artisans closer to people and specialistsby making it more accessible and understandable. Through the detailed information provided on the project explanation and methodology pages, users can gain a greater appreciation for the artisans' work and the context in which they lived. The webpage's user-friendly design and intuitive search capabilities are designed to make it easy for people to explore the database and learn more about the artisans who lived and worked in Barcelona between 1814 and 1860.
Additionally, it's worth noting that the Artbar project was carried out by the Research Group "Treballs, Institucions i Gènere de la Universitat de Barcelona", and is sponsored by The Ministry on Science and Innovation of the Spanish Government and The University of Barcelona . The project represents a collaborative effort among multiple organizations to preserve the cultural heritage of Barcelona's artisans and make it available to a wider audience. The Artbar webpage is a testament to the value of interdisciplinary collaboration and the importance of preserving history for future generations.
Conclusion
Through the Artbar webpage, our aim is to create a space where people can learn about and appreciate the work of Barcelona's artisans from the 19th century. By collaborating with multiple organizations, we believe we can bring history closer to people and inspire a greater appreciation for the cultural heritage of the city.
Figma First Mockups
Here is the original idea and some discarded mockups
This one was the one I intended to move forward with
These were the different menu options for the different hamburger menu positions.
