San Diego Humane Society Mockup

San Diego Humane Society

Objective: This is a 5 page website campaign for the San Diego Humane Society. The focus of the campaign is the traditionally hard to place animal – the cat. The “Celebrate Caturday” theme website features a Home page, and Movie in the Park event page, Feline Facts, Adoption Success Stories, and an information page.

This Website also has a Companion Print Campaign, Social Media Campaign and Web Banner Ads.

Launch Project

View on Github



Design Process:

All of my projects begin with research about the client and finding inspiration for the design.  Details on the client and project scope can be found in the Design Brief.


Mood Board

SDHS Mood Board / Inspiration

SDHS Mood Board / Inspiration




The next step in the process is to create wireframes for both desktop and mobile sizes.  This helps to map out the designs and get a feel for the flow and user experience of the site.


SDHS Home Page Wire Frames

Home Page Wire Frames


SDHS Schedule Wireframes

SDHS Schedule Wireframes



SDHS About Wireframes



SDHS Feline Facts Wireframes



SDHS Success Stories Wireframes




Once the wireframes are complete, it’s time to add some fun!  Using the mood board for inspiration, colors, fonts, graphics and images are added to create a fun, lively site.


SDHS Home Mockups

SDHS Home Mockups


SDHS Schedule Mockups

SDHS Schedule Mockups



SDHS Feline Facts Mockups

SDHS Feline Facts Mockups


SDHS Success Stories

SDHS Success Stories


SDHS About Mockups

SDHS About Mockups




When the design mockups are finished, it’s time to code!  I truly the design process, but translating the designs into a functioning site is like working magic.   I love bringing designs to life!

This site was built using HTML5 and CSS3 using the Foundation framework. The site integrates the Foundation Off-Canvas menu for mobile sized screens. It also features the Foundation Accordion and Modal Window features.

Launch Project Files

Facebook Campaign

The SDHS Celebrate #Caturday campaign also featured Facebook cover photos and posts to market the #Caturday Movie Night event.


SDHS Facebook Cover Photo and Landscape Post Images

SDHS Facebook Cover Photo and Landscape Post Images



Web Ads

The SDHS Celebrate #Caturday campaign featured animated web banner ads for the 2-Purr adoption special.  This coupon coincides with the discount voucher included in the direct mail piece.  These ads were created using Adobe Illustrator, Photoshop and Edge Animate. You must disable ad blockers to view the ads.

160 x 600

300 x 250

728 x 90


Companion Print Campaign

The SDHS Celebrate #Caturday campaign featured a print mailer/brochure with an adoption voucher.  This is a tri-fold brochure with a semi-circle die-cut on the cover.  The mailer/brochure promotes the #Caturday Night Movie event.  The included money-style voucher gives a discount for the adoption of any adult cat.



SDHS #Caturday Mailer Brochure – Inside



SDHS #Caturday Campaign Brochure – Outside



SDHS #Caturday Campaign – Adoption Voucher



SDHS #Caturday Brochure Assembled