Zanele Mji Media - A Minimal Squarespace Site

zanily-mji-site

A Minimal Site

Zanele Mji, a South Africa writer, researcher and journalist was on the hunt for a minimalist, text-driven site and had hit a couple of roadblocks along the way. It seemed most designers she'd approached, instead of being willing to listen to her design ideas, had tried to convince her to go with an image-heavy approach and were unwilling to budge on this!

She was clear that she wanted a very clean site that would lead visitors through a series of informal and friendly introductory 'slides' about herself and her work with a supporting "Table of Contents" and "Portfolio" of her writing. She also needed some design work for her social media accounts and wanted to incorporate a background design on the site drawing on her existing logo.

Project Elements

  • Client Questionnaire
  • Site Background Design
  • Social Media Header Design
  • Landing Page
  • Style Guide
  • Site Design & Build
  • Custom 404 Page
  • Custom CSS
  • Mailchimp Set Up
  • Social Media Integration

Moodboard

Zanele already had some key colours decided on, namely a deep plum-purple but was open to additional accent colours. We toyed with adding a contrasting pop of yellow, turquoise, pink or orange and in the end settled on a bright coral for contrasting links and buttons. 

zanele-mji-Moodboards.png

Colour Palette

In the end, we pared the palette right back to three main colours. The plum purple dominates the background of the site with occasional pops of coral.

 
Bright plum-purple and a hint of coral.

Bright plum-purple and a hint of coral.

 

Logo & Design Elements

The logo, working off of the journalistic quotation marks, had already been designed.

 
 

Bianca Bouverie designed an understated geometric background for the site and a few social media headers. 

Zanele_Mailchimp.png

Template & Customisation

This was probably the most challenging part of the process. One has to choose Squarespace templates quite wisely, as there are limiting factors when it comes to the way certain aspects of a site behave: headers, footers, logo orientation, links and banners all work differently on different templates. I needed a template where I could pare away most of the extraneous bits like pre-footers, sidebars, navigation, social links etc. Less was definitely more in this case!

I went with the Avenue template which had enough simplicity and flexibility for the task at hand. It's also one of a handful of Squarespace templates that allows you to upload a background image to the site. 

Avenue has an adaptive grid-based layout, particularly well-suited for photography and design portfolios.
— Squarespace

I added some custom code including:

  • custom link colours on certain pages
  • custom footer
  • logo link destination
  • post-submit HTML on the contact form

The Site

Here's a quick overview of the first few pages of the site. 

Zanele Mji.gif

The Challenge of Minimalism

One thing I've taken away from this project is that designing a minimal website is actually way more difficult and demanding than designing a busier, more cluttered site. When there is hardly any content to work with, every aspect of the site needs to be ruthlessly measured and if it doesn't serve its purpose properly, it must be thrown out!

I have a new-found respect minimalist designers who make what is actually pretty challenging look so beautifully effortless.


Are you a freelancer looking for a site to showcase your portfolio? I'd love to chat about working with you to take your project to the next phase.