Filoli Garden Website Redesign

Filoli Website

Part I. I designed and created multiple visual artworks with the Filoli Garden’s theme using Adobe Illustrator and Photoshop, which include logo, business card, letterhead, brochure, out-door poster, and merchandise products.

Part II. I designed and implemented a multi-page interactive website with rich visual elements, using HTML, Javascript, and CSS.

“Filoli Historic House & Garden is located 30 miles south of San Francisco. To the two families who lived here, Filoli represented a desire to create a magnificent and enduring country estate. Today, Filoli’s mission is to connect our rich history with a vibrant future through beauty, nature, and shared stories.
Mr. Bourn arrived at the unusual name “Filoli” by combining the first two letters from the keywords of his credo:
Fight for a just cause.
Love your fellow man.
Live a good life.

My Role

Branding design
UIUX design
Coding
Photography
(Individual project)

Scope

Branding redesign
Website redesign
Implementation

Programming

JavaScript
HTML
CSS
PHP

Timeline

8/1/2019 - 12/1/2019
(3 months)

How Filoli website is implemented?

Programming

I designed and implemented a multi-page interactive website with rich visual elements, using HTML, Javascript, and CSS.

Methods

I used Javascript, JQuery, and CSS Flexbox to implement complex visual elements, including slide-show animation, scrollable horizontal list, reactive image size adjusting, and re-usable header/footer.

Visual Support

I designed and created a website logo using Adobe Photoshop and Illustrator. All the pictures used in the design were taken by myself.

Link to my website

Filoli Theme Redesign

Here are the visual artworks with the Filoli Garden’s theme: inspirations & sketches, logo design, business card, letterhead, brochure, poster, and stationery mockup.

Link to Filoli Slides

Inspirations and Color Plate

The logo is inspired by the Peacocks living inside the Filoli Garden.
The posters are inspired by Carriage House, Dining Room, and Lotus in the Garden and House.

Logo Design

The logo font is Delaney which is a retro handwriting font shows Filoli long history and its elegance.

BUSINESS CARD FONT: Delaney (Front logo) Myriad Variable Concept (Back descriptions)

LETTERHEAD - FONT: Myriad Pro(Letter body) Myriad Variable Concept (Letter Logo)

MERCHANDISE MOCKUP - cup, brooch, and handbag