Client: Miguel A. Chávez, Fine Artist
Date: April 2015
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.
- Kickoff Meeting / Goal Discovery
- Content Inventory
- Sketching / Ideation
- Wireframes / Mockups
- Coding / Front-End Development
- Testing / Troubleshooting
- Publishing / Screenshots
- Adobe Illustrator
- Adobe Photoshop
- Adobe Dreamweaver
- Microsoft Word
Miguel A. Chávez: Photographs, Spanish content
Linda Albertini: Website design & development, English content (translated), photo editing
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.
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.
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
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
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
Clockwise from top left:
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:
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)
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.
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:
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:
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:
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.
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.
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.
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).
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.
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.
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