Image Journal

Name: Image Journal
Uploaded: 2016-12-18T21:37:38Z
Description: You can see the site at imagejournal.org. It's often changing — not just with the addition of new art and articles, but the staff are constantly swapping out sections on the homepage, various page layouts and adding to and editing the site's structure.

A niche art magazine gets translated to the web

By Adam King

You can see the site at imagejournal.org. It's often changing — not just with the addition of new art and articles, but the staff are constantly swapping out sections on the homepage, various page layouts and adding to and editing the site's structure.

I was given this project a little later in the game, given two things:

An analytics-derived "audit" report on traffic and performance for the site, with recommendations for the redesign.
Initial mockups that'd been done in Illustrator by another designer. These had been signed off on by the client for general look and feel.

I was asked to flesh out the site structure, rethink and iterate on the designs where needed, and eventually build out the entire site (apart from parts of the custom subscription paywall code, which a colleague helped with.) I ended up not following some of the recommendations in that firs

First I started mapping out the site structure:

Then we planned some sprints.

Process

After I felt we had a firm handle on the structure, goals and project scope for the site, the first thing I did was build static html/css translations of the Illustrator mockups, so we could iterate in code from then on in.

Second, I built out a large portion of the site as a WordPress theme, working in one and two week sprints to iterate the design and get the client's input.

As the client started getting more excited about adding new areas to the site, we began seriously stretching the capabilities of WordPress and theme customizer. I switched tracks and created a pattern library of templates and components for them to use with a visual page builder so that they could remix and remake the site as they saw fit, while still keeping it all looking cohesive, keeping the layouts responsive, and letting it still all be managed through WordPress without the need for anyone on their team to need to learn code.