Fashion Website Redesign

Client: Adrienne Borgersen, Editor-in-Chief, LA Fashionista Compassionista

Date: May 2016


Project Overview

Founders Adrienne Borgersen and Lois Eastlund, an image consultant and fashion designer, respectively, started LA Fashionista Compassionista (LAFC) in 2014 when they saw a need for a platform dedicated to vegan, cruelty-free fashion and beauty. Catering to the growing demand for stylish and ethical alternatives, the online magazine is published quarterly and is made possible by a supportive community of writers, models, photographers, designers, and of course – their readers.

The initial LAFC website was built with a standard website builder software, which had limitations. It was plain-looking and didn’t project “style” and “fashion.” The old website was not well-organized and didn’t allow for interactive features, such as reader feedback, a current blog, or social updates. It was also not responsive, making it difficult to navigate and read for mobile visitors.

Adrienne needed the new website to improve the email capture process, be easy to maintain, and look stylish and beautiful. Most of all, she wanted to feel proud to promote her website – one that would match the caliber and aesthetic of the magazine itself.

Process Summary

Technologies Used:

  • WordPress
  • MailChimp
  • Adobe Photoshop
  • Adobe Dreamweaver
  • HTML5/CSS3
  • PHP


Adrienne Borgersen: Logo, Photographs, Written Content (Blog posts & pages)

Linda Albertini: WordPress set up, Child Theme design & development, MailChimp integration, Plugin integration, some Photograph editing, some Copywriting 

Process Details

The Kickoff Call

The client and I discussed the issues with original website and her desired outcomes for the website “makeover.” I typed up my notes from our conversation and checked in with Adrienne to make sure we covered everything and were on the same page moving forward.

LAFC’s target audience is comprised of fashion-forward women who are vegan, environmentalists, and/or generally concerned with where their clothes and beauty products come from. Adrienne wanted the new website to match the look of a proper fashion magazine and entice new visitors to subscribe.

Content Inventory

I typed up a content outline to plan out top-level and secondary pages, brainstorm content placement, and identify any new content that would need to be created. I weighed options for which platform to use for the new website. Given the client’s goals, we decided to go with WordPress, which would allow Adrienne and her team to regularly share news and events with their readers.

Research & Brainstorming

Adrienne really liked the look and feel of Vogue, Elle, and other top fashion magazines. I visited their websites and took screenshots, noted any common themes, and thought about how the best features could be incorporated into the LAFC website.

LAFC website process - Linda Albertini Web Design

Some of the main elements that stood out to me while researching websites for fashion magazines included:

  • Large typographic logo in the header with a neutral, contrasting background color
  • Large photos of models or celebrities near the top of the content area / above the fold
  • Easy to find “Subscribe” area

Below are some wireframe sketches for the main page elements (I toyed around with a few variations on the footer):

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design

Building in WordPress

Since we didn’t want any downtime on the original website during development, I installed WordPress in a subdirectory for the new site. From there, I created the top-level pages and navigation menu, then added all existing content available.

I browsed and tested different WordPress themes that could be suitable for LAFC. After evaluating the pros and cons of each, I went back to the default TwentySixteen theme, created a child theme, and started customizing it from there. I chose to build under the TwentySixteen theme, because it was responsive, didn’t have any complicated bells and whistles, and had more documentation to help me hack into the code.

Lots of testing, tweaking, and re-testing for this part!

LAFC website process - Linda Albertini Web Design

Adding Plugins

To display our hero (or heroine) images, I found and installed a suitable slideshow plugin for the “Home” page. Here we added fun photos from the most recent magazine shoot, as well as a promo video underneath.

Because LAFC is a small magazine, Adrienne wanted to add a personal touch and help her readers connect with the team behind it. After testing out a few options, I found and installed a suitable plugin for managing team member biographies on the “About” page. I filled in the photos and bios where available and used placeholder content elsewhere. I enlarged the headshot image size by modifying the plugin stylesheet, cropped and enhanced the team members’ profile photos, and re-sized them to the proper dimensions. Pictures that are bigger would just take longer to load and potentially frustrate visitors.

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design

MailChimp Customization

Adrienne’s main goal for the website was to acquire new subscribers for her magazine. She was already using MailChimp on her original website, but the signup area was not compelling or attractive. It had 4 form fields, one of which asked visitors to choose between “html” or “text” email formats – confusing for the average gal.

For the new WordPress site, I added a customized Mailchimp signup form to the sidebar, simplified with just 2 form fields. We decided on a catchy name for Adrienne’s signup list (i.e. “Join Club #fashcompash” instead of “Sign up for a free subscription”). I tested it out by attempting to sign up and noted where the user experience could be improved at each stage of the subscription process (including the follow-up emails generated by MailChimp).LAFC website process - Linda Albertini Web Design

I went into Adrienne’s Mailchimp admin panel to customize the emails sent to new subscribers, keeping consistent branding. I then created customized confirmation pages on WordPress to use instead of the default MailChimp pages, keeping visitors on the site for an experience that is more intuitive and less disruptive.

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design

More Content

I added a contact form on the “Contact Us” page, as well as secondary pages for “Advertise with Us” and “Work with Us.”

Within the blog section, I organized and added content for “Features” and “Events.” Since fashion websites rely heavily on images, I found and installed a lightbox plugin compatible with WordPress galleries.

LAFC website process - Linda Albertini Web Design

Troubleshooting Galore

Thank goodness for backups! I restored the website after a WordPress update wreaked havoc on the client’s server (one with so-called “free hosting”). After I convinced the client to invest in better hosting with a more reliable company, I migrated the WordPress site to the new server. During the transition process, I worked with the hosting company’s customer support team to fix display problems and redirect issues that surfaced after changing the DNS nameservers. I responded quickly to the problems to minimize any downtime.

Publishing & Off-boarding

After the website was successfully launched and the last-minute content was added, I created an off-boarding process for the client. Since we lived on opposite sides of the country, I recorded screen capture video tutorials to show her how to manage the website from the WordPress dashboard. I sent Adrienne a document with links to the video tutorials and a set of instructions. I offered to set up a free 1-hour call to go over any key processes and questions with the client, but she was happy to find that she was up and running on her own after reviewing the tutorials.

Screenshots Before & After




Fashion Website after - Linda Albertini

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design

To view the live website, please visit:

See Client Testimonial

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

Bilingual Artist Website

Client: Miguel A. Chávez, Fine Artist

Date: April 2015


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


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



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


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.


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



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


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: 

See Client Testimonial

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