pic

The GardenWorks Project

Website Design & Development

The GardenWorks Project is a non-profit in West Chicago, focused on using allotment gardens to address food insecurity. I’ve done various branding for them during 2018 and redesigned/redeveloped their web site in November 2018.

Good Enough to Eat

The overall GardenWorks design relies on colorful vegetable content and oversized headers to drive home the GardenWorks mission. To make content inviting, the site uses content cards, themed to look like seed-packets, to show secondary information and nest ‘snippets’ of teaser data. Additional variation is lent by tabbed areas, custom map & calendar interactions. While GardenWorks will largely use the wysiwyg editor to enter new pages, the templating converts entries into a 3 column design with balanced feature imagery and colorful headings, hierarchies, and forms.

Technical Details and Code

The site is hosted on Nationbuilder (a popular non-profit cms system). The templates I developed utilize html with liquid templating, custom js and sass styling. The overall work included re-organizing and streamlining the site contents, developing the site map, style standards, coding the template pages themselves, and documentation for additions and edits via the wysiwyg interface. The live site is at www.gardenworksproject.org and archival copies of the underlying code are available at github.

Images below are a mix of process pieces, documentation, and screen-shots from the live site.

Tools
  • html/liquid template markup – template development
  • ai/sass/webpack – style guide development, styles generation & formatting
  • psd/ind – misc formatting and documentation
pic

Allotment Gardens