My name is John Farrell MacDonald. I am a front-end web developer with a broad perspective and skill set, working with code, images, and words to craft digital experiences that convey meaning that is difficult to just say.


John’s recent work


A website and copywriting to support client Bering Sea Productions independent short-film Kickstarter campaign.

Visit Website

The Challenge

The client planned a Kickstarter campaign to fund the production of a short film based on a short story by author Ryan W. Bradley. It was the client’s first in a series of independent films to be produced by the film company, which she was just starting. She was seeking help with the screenplay—she needed a narration for a fictitious but believable television documentary that would play in the background—as well as help with the project in a variety of other areas, among them a website to support the campaign. She had an arrangement in place with a graphic designer for a logo, illustrations, and other design needs. To keep the budget within the reach of a Kickstarter budget, the project needed to be completed in less than six months so that lower-cost resources that would be available during the summer months could be used for production.

The Strategy

After collaborating on the screenplay, I offered to create and host the website BSP would need to support the Kickstarter campaign. I was then in the process of moving my sites from a shared host to self-managed virtual private servers on Digital Ocean and could host the site securely there at low cost.

Though a blog was not planned, I proposed to use WordPress to minimize the cost of maintenance and anticipated changes in the future.

After receiving material from the graphic designer, I prepared some site mockups in Sketch, them met with the client to review and hash out design ideas.

The Execution

I prepared a low-cost, 512MB Ubuntu 16.04 server on DigitalOcean with Apache HTTP Server, Postfix, MySQL, PHP7, and WordPress and secured it with a Let’s Encrypt SSL certificate. I took advantage of the JointsWP starter theme, based on Zurb Foundation, to build a custom theme for the project.

The Result

The site was deployed on schedule, just prior to the start of the Kickstarter campaign. The Kickstarter campaign was successful and the project is underway.

Fur Ball Campaign

A website and print marketing collateral promoting San Diego Human Society’s 2016 Fur Ball gala.

View Website Prototype

The Challenge

The San Diego Humane Society hosts a Fur Ball gala annually to raise donations in support of their work with animals. The gala is highly regarded in San Diego society and draws significant support from the community. Funds are raised through ticket sales, through sponsorships, and through live and silent auctions. The society asked Digital Art Center students to prepare and present designs that would help promote the gala and other fund-raising campaigns. They had selected a flamenco theme for the 2016 gala. Design elements needed to be appropriate for the tone and style of this year’s gala and appeal to its audience.

The Strategy

With the understanding gained from a kick-off design brief, I chose to design a logo for the event that could be adapted year-to-year to different gala themes along with illustrations reflecting the current flamenco theme and use them in three different products promoting the event:

  • a website to promote the event targeting the event’s audience
  • a sponsorship opportunity brochure for potential sponsors
  • a formal event invitation to be mailed to potential attendees

Examples of print collateral from prior years were available, but a promotional website had not been previously used other than the BidPal website, which was active during the gala. After considering what value a separate site might bring, I planned to pitch a promotional site that would call visitors to action: to buy tickets, to donate for the auction, or to sponsor the gala.

The Execution

A website was designed by first creating a wireframe, considering how visitors might interact with the site, then an example site implemented directly in HTML and CSS using the Bootstrap framework.

Inspired by the typeface Lust Script Display, I created a hand-lettered logo with space for a theme-specific caption. Using Adobe PhotoShop and Illustrator, I created an illustration of a dancing woman and dog, each dressed flamenco style.

The invitation was designed as appropriate for a formal affair, such as a wedding or Fur Ball, and designed to fit in standard size envelopes. For ease of use and cost, the prior year’s sponsorship package was redesigned with a table presenting benefits of each package clearly in a compact form. I prepared print samples of the invitation and the sponsorship package for presentation to the humane society.

The Result

I enjoyed the opportunity to present my project to San Diego Humane Society representatives, who received the designs and sample collateral with enthusiastic commendation.

YMCA Website UX Design

A UX-based redesign of a local YMCA website.

View Project

The Challenge

Challenged in a Digital Art Center class to apply UX principles to a website design, I selected the San Diego YMCA website for my project. My wife and I had been exploring the site to see if excercise classes of interest were available when and where we could attend, but were not finding reliable information and had concluded a phone call or visit to the facility would be needed.

The objective of the redesign was to

  • increase participation of those using the website
  • reduce costs by reducing the need to ask a human

The Strategy

After creating a design brief, creating personas and user journeys, and studying the site in some depth, I planned a design that would

  • simplify website navigation
  • replace outdated information in linked PDF files with current online information
  • allow users to initiate participatory actions online rather than in person
  • follow YMCA style guidelines

The Execution

After creating four personas to represent YMCA website users, I selected two of them to work out specific user journeys. A detailed study of the existing site for a local Y led to probable pathways through the site navigation and outcomes. I then prepared design mockups using Adobe Illustrator and Photoshop for a home page and the set of pages needed to exhibit the redesigned user journeys.

The Results

The designs were presented to the class, who received them with knowing smiles and appropriate accolades. No animals were harmed in this study.


John’s Story

When a teen, John told his grandfather that he wanted to be a writer or a physicist. Granddad scoffed and said, “Do something practical.” John studied physics in college, then did something practical—became an engineer (who occasionally wrote). Engineering led to programming and physics fostered an inquiring mind. Then the WWW invited John to the craft of digital storytelling.

In 2015, John left his role as a chip design-automation software engineer at Qualcomm to pursue web development full time. To strengthen design skills and connect to the web design world, he enrolled in the Graphic and Web Design program in the UC San Diego Extension Digital Art Center while pursuing freelance engagements.

Currently, John is blogging at thecolorsofcode.com.

View Resume


Please provide your name, email address, (optionally) website URL, and message. Your information will not be shared with anyone.
  * required entry