Synesthesia

ArtSaas Technologies, 2024

Synesthesia

is the second website template I designed for art galleries during my internship at ArtSaas Technologies.

All design decisions were thoroughly discussed and optimized to meet company requirements and the technical capabilities of their website builder.

Similar to the development of the Fusion Artscape template, Synesthesia’s design process was iterative, involving ongoing adjustments to visual and structural elements to optimize the template for company requirements, end-user needs, and builder capabilities.

Objective

The main goal of creating the prototype was to design a template with an appearance that differs from the available options at ArtSaas Technologies, thereby expanding choices for potential clients and making it easier for them to implement a website aligned with their tastes and vision for a public page.

Design stage

Milestones

1

Defining Visual Style and Structure

It was essential to follow specific guidelines to ensure the template design could be smoothly integrated into the ArtSaas Wirtualny Art Menedżer. Researching the builder's capabilities and optimizing the prototype design for its functions were among the initial and most fundamental stages of development before creating the template prototype.

During the brainstorming stage, as I considered the appearance and structure of the Fusion Artscape and Synesthesia templates, I decided to make them completely different in both style and structure. While the first template featured a dark theme with rounded shapes and a subtle sense of "gigantism", with Synesthesia, I aimed to create a lighter, airier style with a more centered and conventional layout. In my view, this contrast would add variety and offer potential clients more options to suit their tastes and spark their imagination.

2 Defining User Personas

Next, it was necessary to study the needs and preferences of art gallery website visitors and create a composite image of the end user—a persona. In developing these user personas, I divided them into two distinct categories:

1. Middle-aged or older individuals with a high income, interested in collecting art pieces and supporting artists.

2. Young adults, often students, who are interested in art either as a hobby or as part of their artistic pursuits, using online resources for inspiration and references.

A common characteristic of both groups is their approach to quickly exploring art pieces - by visiting thematic websites dedicated to art, especially gallery sites.

3 Sitemap

The final preparatory step before design development was creating a sitemap - a general site structure tailored for the company’s clients. In this map, I outlined the essential pages required to build a comprehensive template suitable for developing an art gallery website.

4 Market research

I divided the market research stage into two parts:

1. Studying products already implemented by the company to understand the standards it adheres to and the structural foundations it uses to create such sites;

2. Searching for references from third-party sources. To gather ideas and explore potential solutions for sites dedicated to art, I used platforms like Dribbble and Behance, where designers of various experience levels showcase their work and concepts across a wide range of themes.

I also explored template libraries provided by site builders such as Squarespace, Format, Portfoliobox, and Fabrik. Researching these templates helped me better understand the operating principles of these services, as well as identify visual techniques that could be more versatile and, thus, a strong choice for developing my own template prototype.

5 Lo-Fi prototype

After completing the research phase on the target audience, visual solutions, and structural elements of art-themed websites and existing templates, I moved on to designing the structure of the Synesthesia template. The structural design process was iterative, where I explored and proposed various solutions for the template’s layout.

In creating the low-fidelity (lo-fi) prototype of the Synesthesia template, I aimed for a simpler, more open design that aligns closely with the standard style of the company’s sites. Unlike Fusion Artscape, this design emphasized larger spacing between elements and smaller object sizes. The focal point was positioned nearer to the center, which made the layout more symmetrical and light.

Here some examples of low-fidelity prototypes of Synesthesia project

Main page

Exhibition page

Artist's page

Offer page

Searching page

"About us" page

6 Final Design

After completing the design stage of the low-fi prototypes and finalizing the template structure through discussions and appearance optimization, I moved on to the visual phase and the creation of the final design.

A total of 18 frames were designed, covering all the essential pages needed for a complete template. This included pages listing artists, their works, and exhibitions, as well as templates for individual artist pages. Additionally, technical pages such as the privacy policy, terms and conditions, 404 error page, and internal account login page were also developed.

Main page

The visual design was chosen to complement the selected template structure - a white background that emphasizes simplicity and enhances the airy, open feel of the site layout. Increased spacing between design elements contributes to this sense of lightness. Black was selected as an accent color to add simplicity and create a strong contrast; however, this accent color can easily be changed to any other color that complements the white background, as per the client's request.

News grid

Artists

As I mentioned earlier, in addition to slightly increasing the space between elements to create a "simplicity" effect, we decided to adhere to more restrained visual choices. This approach includes maintaining rectangular shapes for objects (such as images, buttons, and input fields), minimizing text on pages to emphasize white space, and using thinner fonts. Overall, I aimed to create a more user-friendly and visually appealing template that favors open spaces and imagery on the site.

News page

Artist's page

Offers

Offer page

Ask about offer

Exhibitions

Search page

Exhibition page

Cart page

Contact page

About us page

Outcome

The main goal of this presentation was to demonstrate, step-by-step, the actions I took in implementing the Synesthesia project. The process of research and prototyping involved several iterations at each stage of the project. My priority was to create a product that would fully meet the needs of both the company and the end users of the template and the sites built upon it.

The primary concept behind the Synesthesia template was to design a high-quality product that combines a simple, intuitive structure with a clean, distraction-free visual design. I believe that I succeeded in creating a prototype that enhances the selection of templates available through ArtSaas. The Synesthesia template is straightforward in structure and visual choices, while remaining fully compatible with the tools and functions of the ArtSaas Wirtualny Art Menedżer brand constructor.