Bilingual Artist Website

Client: Miguel A. Chávez, Fine Artist

Link: MiguelAChavez.com

Project Overview

Miguel A. Chávez is a San Diego artist, originally from Argentina, who has been painting for over 50 years. His style has evolved over time through a variety of themes, appealing to a wide range of audiences.

Miguel approached me to create a bilingual website that would allow him to share his work and accomplishments with friends and art galleries, both local and abroad. The project resulted in a responsive website that honors the artist’s history and dedication to his craft, while highlighting his most recent masterpieces.

Since launching and sharing his website, Miguel has received positive feedback from friends and colleagues for his paintings, as well as interest from art galleries. The site will evolve as the artist continues to paint and share his gift with the world.



Process Summary

Technologies Used:

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Dreamweaver
  • HTML5/CSS3
  • JavaScript
  • Microsoft Word

Credits:

Miguel A. Chávez: Photographs, Spanish content

Linda Albertini: Website design & development, English content (translated), photo editing



Process Details

The Kickoff Meeting

The first meeting with the client is a good opportunity to define the client’s goals and audience, which sets the foundation for the rest of the project. Miguel wanted a website to showcase his artwork and career highlights so that he could:

  • Approach art galleries and increase his chances of getting booked
  • Share his work with friends and former colleagues in Argentina and the U.S.
  • Add the URL to his business cards, which he hands to new contacts and curious onlookers who find him painting outdoors

In summary, the primary purpose of the website would be to serve as a marketing tool for brand awareness, with the secondary goal of generating sales as an indirect result.

The audience of his website would include:

  • Art gallery curators, who are connoisseurs and look for a certain aesthetic caliber. They often serve a particular type of art collector or have a niche in a particular art style or theme. They are busy people who sort through lots of artist samples and portfolios. The want to be impressed and hate having their time wasted.
  • Former artist colleagues, who are knowledgeable about art and can offer constructive feedback and encouragement. They enjoy looking at others’ artwork for inspiration and appreciate the talent and effort it takes to create a great painting. Most of Miguel’s former colleagues are Spanish-speaking senior citizens.
  • Members of the general public, which could include San Diego residents as well as tourists. They may find Miguel painting outdoors and have a conversation about the subject or the artist’s technique. The would leave with one of Miguel’s cards and, if they are intrigued enough, look up his website later that day. They would be considered casual art observers rather than active seekers.


Content Inventory

Miguel provided me several photographs and pages of notes at the start of the project. Below I outlined top-level and sub-level categories of content to help me see what I was working with. This was a first step in eventually grouping and organizing the content in a practical manner.

Artist website content inventory - Linda Albertini

Digitizing Written Content:

  • Photographed 17 pages of artist’s notes handwritten in Spanish
  • Typed them into a Word document
  • Proofread and edited for consistency in formatting
  • Translated into English
  • Sorted digital notes into subcategories in reverse chronological order

Artist website responsive content gathering - Linda Albertini

Digitizing Visual Content:

  • Took digital pictures of the artist’s favorite analog photographs
  • Cropped and edited selected photos to restore color and clarity
  • Sorted photos for use on specific web pages

Artist website content gathering - Linda Albertini

 


Research

I researched other artist websites to gather ideas, inspiration, and best industry practices.

Specific areas I looked for included how other artists:

  • Organize and display CV information (exhibitions, awards, etc.), including navigation design
  • Categorize and display gallery images
  • Design the homepage to entice visitors to explore further

Artist website research - Linda Albertini

Clockwise from top left:

James TurrellAmber JeanZenon ToczekWest Coast Fine Art


Sketching and Ideation

Given that the home page would be the primary landing page for most visitors, it had to make a great first impression. Since we were also creating a bilingual website, I needed to add an option for visitors to proceed in English or Spanish. Sketching was a great way to generate multiple ideas quickly without having to commit to one immediately.

Early Stage Home Page Concepts:

Artist website sketching & ideation - Linda Albertini

The concept here was to simulate a stack of polaroids of the artist and his artwork. Clicking on a “polaroid” in the background would bring it to the forefront. Although this would have been a fun, interactive concept, I didn’t pursue it for the following reasons:

  • Time-consuming to implement (not budget-friendly)
  • Difficult to make feature responsive, if not impractical
  • Potential to distract users and keep them from actually entering the site (users may think the photos on the landing page represent all of the artwork displayed)

Artist website sketching & ideation - Linda Albertini

The idea here was to have two large photographs of the artist painting, with a language option and corresponding tagline over each photo. Initially, I had sketched this as two rectangles side by side, but it made the page look too divided. I re-sketched it to look like interlocking pieces of one larger rectangle, which helped bring some cohesion.

However, in this version, “Español” appears higher on the page than “English,” giving the impression that it is more important. There would also be the issue of making this trapezoidal concept mobile-friendly.

Artist website sketching & ideation - Linda Albertini

I was inspired by another artist who used a full-screen image on their home page. What better way to “sell” Miguel’s website than by letting his artwork take front and center? Plus, I knew this concept could be made responsive relatively easily.

However, I felt that the title of the website (the artist’s name) ought to be higher on the page and larger than the language navigation options. I tweaked the above concept in later drafts to reflect those changes.

Early Stage Gallery Page Concept:

Artist website sketching & ideation - Linda Albertini

Given that Miguel has been painting for nearly 50 years, I had to come up with a way to organize and display all of his images. Placing too many images on a single page would slow the page speed  and potentially overwhelm visitors.

Initially, we envisioned presenting his work in reverse chronological order. I sketched out concepts with buttons labeled by decades, followed by a similar concept with a drop-down menu.

However, given that art gallery curators (a target audience) prefer to see recent work and style continuity, we decided to select about a dozen of Miguel’s best recent paintings corresponding to one particular theme. This eliminated the need for gallery sub-navigation. Instead, we placed all of the selected images on a single gallery page.

Early Stage About Page Concept:

 

Artist website sketching & ideation - Linda Albertini

Over the last 50 years, Miguel has compiled quite a list of career accomplishments. Taking cues from other professional artist websites, we sorted Miguel’s “About” page information into various CV subcategories, namely: Introduction, Education, Employment, Solo Exhibitions, Group Exhibitions, Awards, and Guest Jury.

It would be impractical to place all of these labels in the primary navigation bar; too many choices. Rather, I wanted for visitors who click on the “About” tab to see an introduction of the artist, then have the option to explore specific CV sections.

I toyed with the idea of a drop-down menu (shown above). However, since some of the website’s visitors would be senior citizens, I decided to make all of the secondary navigation options clearly visible from within the About section, rather than hiding them in a drop-down.

Improved Concept Sketches:

I sent these images to the client for approval to proceed with the next step.


Wireframes & Mockups

Based on the approved sketches, I created a wireframe of a sample page using Adobe Fireworks. I then added more detail and color to create a mockup, then sent it to the client to review.

Artist website mockup - Linda Albertini


Coding

Once the mockup was approved, I coded a responsive page template using HTML & CSS. There was lots of testing and tweaking at this stage, before moving on to code each individual page.

Artist website coding - Linda Albertini

Using the template, I filled in the content for each “About” page, keep careful track of each dated entry. I made sure each page has a consistent copy in English and Spanish.

Artist website lightbox - Linda Albertini

I added thumbnails of selected works to the “Gallery” page, which enlarge and provide details for each painting when clicked (using a jQuery lightbox plugin).

Artist website scroll - Linda Albertini

Finally, I added some helpful features, like a “back to top” button that appears when the user scrolls down past a certain point on the page.


Testing

I tested the website on different browsers at various viewport sizes, using my laptop and mobile phone. I made sure all of the images were optimized for speed and quality and could scale well down to mobile screen sizes. I tweaked the code to fix any glaring display issues, followed by more rounds of testing and adjusting. Then came time to publish the website, test again, and verify that everything was working as expected.

Artist website responsive testing - Linda Albertini

 



Screenshots

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini



Reflecting

If I were to do this project over again, I would include a simple contact form on the “Contact” page, in addition to providing the client’s email address and social media links. This would be especially useful for art gallery curators to quickly reach the artist, without having to open their email client and copy the email address. I would add a contact link in the footer, as well.

I would also incorporate user testing in the wireframing and prototyping phase. Although I went straight from mockup to code, I would now consider using a tool such as Adobe XD to add some interactivity to my mockups. This would allow me to create a basic prototype that could be tested with potential users before coding.

I would ask at least five people, preferably representative of the target audience, to attempt to complete specific tasks, such as:  “Find the artist’s email address” or”Locate the artist’s most recent solo exhibition.” Based on their success or difficulty with these tasks, I would tweak the prototype as needed and re-test before developing the website.


To view the live website, please visit: MiguelAChavez.com 

See Client Testimonial


View Portfolio to see more, or Contact Me to schedule an interview.

Comments are closed, but trackbacks and pingbacks are open.