Five Loaves Two Fish - A Squarespace Site

Squarespace-Website

To Raise Awareness + Funds for a Reading Program

Fiona Hobson, a retired high school teacher and farmer's wife, realised that many of the people employed on their Karoo farm were unable to read. She started teaching basic literacy in English and Afrikaans on the farm, and later reached out to the local school in Klipplaat, their nearest town, to see how else she could help. This initial action has become a charity called 'Five Loaves Two Fish.' Fiona, along with her husband Rob (who incidentally was among my first Squarespace clients), asked if I'd put together a site showcasing the work Five Loaves Two Fish are doing among their community as a place to start raising awareness and funds for ongoing reading programs.    

Project Elements

  • Client brief
  • Site research
  • Site design and build
  • Social media integration
  • Library of resources
  • Facebook set up
  • Basic bits and pieces
  • Custom video tutorials (with Loom)

Style Guide

I wanted the site to be clean, appealing to teachers, children and funders alike in the font options, colour palette and layout. It needed to be easily navigable, able to house a growing library of resources, and encourage funders to take action to donate. With each Squarespace site I design and put together, one of the first things I tend to do is set up a "Style Guide". This first page sets the tone for the rest of the site as it enables me to specify heading types, font choices, layout, colour selection and how the images will be displayed. By setting up everything in one place from Heading to buttons to newsletter subscription boxes, you can immediately get a feel for the site, and make quick tweaks in the style editor without having to move around your site too much.

I highly recommend doing something like this before you set up your site - it will make your life a lot easier! I wrote a blog post about how to set one up over here. 

five-loaves-two-fish-squarespace

Moodboard

I wanted the site to be colourful, fun, inviting and clear without being too 'cutesy' or childish. I stuck to a palette of dark grey, coral, dark turquoise, bright yellow and pale green. This colour came through in the banners, links, buttons, icons, and image frames. 

Squarespace-Website-Moodboard
 

Design Bits + Pieces

Fiona has, over the years, developed a rich resources base of teaching materials from stories she has written, to worksheets and sound charts. All of these are available as free downloadable PDFs on the site. I put together a few collage style images to highlight a range of the available worksheets, and designed a Facebook banner and profile pic.

PDF-Design
PDF-design
PDF-design

A few of the design bits and pieces - worksheet collages (above) and Facebook banner (below)

Facebook-Page
 

Template + Customisation

I chose the Mentor template, which is part of the Brine family. I love its capacity for stacked index pages, parallax scrolling on the banners, and its overall flexibility. I've used the Mentor template before on professional sites (see this example).

A few customisations included a variety of index page set ups (Home, About, and Contact) incorporating banners, full content pages, newsletter subscription options and small galleries. I added custom colours on the buttons, links, headings, and increased the overall width of the top navigation, page content and padding to give it a roomier feel. 

 

The Site

Facebook Post - Website Presentation (4).png
squarespace-NGO-website

I love that doing this kind of work allows me to help in some ways when it comes to supporting charities and NGOs who are doing such valuable work. Squarespace is a great tool to provide excellent, clear, and compelling websites that enable NGOs, churches and charities to showcase their work and invite potential funders to join the cause. 

I'm excited to see what the future holds for Five Loaves Two Fish as they work in the much needed sphere of literacy within the South African context. 


If you want to browse more examples of Squarespace sites I've been working on, including sites for non-profits, churches, and charities, have a look at these sites below. And if getting the website for your church or NGO live is something you've had on your to-do list for far too long, why not contact me and let's build something beautiful.