Over the summer of 2015, I designed and built a new online portfolio and shop for illustrator and graphic artist Malika Favre which you can see here.

Normally I would just show pictures of the outcomes of my work as I have above. But I've realised this can be a bit meaningless without the context of how I got there. As an experiment I thought I'd document the process with a view to maybe always doing it in the future.

Process

Having worked together before, Malika and I have a good collaborative working process. We both like to share ideas often, iterating and adapting as we go so we can stay open to new possibilities.

Initially we chatted in detail about the kind of thing she wanted to create. The site needed to be simple and confident in both presentation and interaction. It should be image-led as a means to let her work speak for itself.

We also wanted to integrate Malika's online shop and set things up so she would be able to update pretty much all aspects of the site herself.

I like to design around real data when making sites and am keen to solve the big design problems as early as possible — especially the technical ones.

So, we agreed that it would be a good idea for me to spend a few days at the start of the project prototyping some ideas in the browser, playing with layout and interactions to see where it might lead. This would allow us to get to a strong solution fast.

Prototyping

I did a bit of sketching on paper and then began playing around positioning containers (as placeholders for projects) in a layout based on the golden ratio. Malika uses this to underpin a lot of her illustration work.

But this turned out to be a bit too restrictive and imposed too much arbitrary hierarchy.

In a second prototype I kept the square containers but removed the varying scale, instead only showing one larger item with the idea that it could maybe be a 'featured' project.

We both liked this direction. It felt in keeping with Malika's work. Squares have an inherent simplicity that works well with the web where vertical size and positioning can be hard to determine and control. This would give us flexibility and remove complications for Malika when making images.

The focus of the third sketch in code was to try to solve how the layout would respond at different screen sizes with a mix of different sized media.

Isotope proved to be a useful code library to this end, when used in tandem with a selection of custom media queries to make the layout responsive. It allowed me to make an index of projects that reflow to suit the device they're viewed on.

Animated transitions

In this prototype, I also introduced the idea of transitioning to a project rather than the usual full page reload — I like how the movement is more graceful when moving between the index and projects.

We were both happy with how this was progressing. Then Malika had the brainwave to suggest that the transitions should come in from a given thumbnail's nearest browser edge. I wasn't sure initially how best to do this but took it as a challenge as I knew it would feel better from an interaction point of view.

I started out thinking I'd need to break the screen into 'sectors' and then check which sector a thumbnail is in before triggering the animation. This was unnecessary though. Ultimately the solution was simple. It was just about calculating the x and y position of the cursor relative to the viewport's width and height and going from there. Kinda obvious with hindsight.

I made further prototypes and by the time I had produced this one introducing filtering, we had a pretty clear idea of how the site should behave.

From there it was a question of adding fidelity and detail as we went. Linking the template up to the CMS was also useful, meaning I could work with proper data, designing around real content like project titles, descriptions and media.

Webfonts
We tried out a number of fonts including Harmonia Sans, Aperçu and Verlag, before settling on Brown by Lineto. We wanted something with clear, simple lines that mirrored Malika's artwork.

All fonts were demoed in situ in a browser like this so we could accurately see how they rendered and I could adjust the kerning (well letter-spacing) and line heights accordingly. You just don't get an accurate translation from things like Photoshop and Sketch to web.

Iconography
The icon set evolved as the project progressed with us both trying things out. It was ultimately finessed when the type went in — we drew the final set seen below where the weight of the lines nicely complements the typeface and the set is simple and unified.

Colour
We both really care about colour and favour bold, bright palettes. But no one knows Malika's work better than she does, so I wanted to make a mechanism where she could create palettes for her projects. This is controlled via the CMS — she can specify rollover/background colours and borders on a per project basis. Every project's rollover colour is mirrored in it's background (as shown above) and we get a nice transition effect when moving between the two.

Images and videos
All media can be edited and updated through the CMS and is then hosted on Amazon S3. A great deal of the work on the site was in ensuring that media displays appropriately across different devices and viewports. Project images are shown in carousels on the desktop for example. These carousels work with touch events on an iPad, but on a mobile phone you will instead see a vertical stream of images. The aim being to make the site easy and elegant to use on different devices.

Workflow and tools

To allow for a smooth development process and the ability to adapt and change the site regularly, I knew a good workflow would be really important.

Early on, I set up local, staging and production servers using git for source control and I managed deployments with Beanstalk. This meant I could update any environment with a single command.

Locally I used Codekit to compile my code and live reload pages in the browser when I made changes. Great for seeing design changes across multiple devices instantly.

I used Expression Engine for content management and Malika (along with many other clients) always tell me how much they love using it to update their sites. It's a breeze to work with.

For the shop which runs off Big Cartel, I used Dugway for local development. It's not perfect, but it definitely saved me a bunch of time.

All of these tools ultimately made the update process get out the way so I could concentrate on designing and writing code.

Outcome

Overall, the site has gone down really well and has been featured on the likes of siteInspire, Hover States and Collate.

We've seen an increase of over 1000% in new visits and a number of prints sold out almost immediately on launch.

An animated preview of the site can be seen below. Or head over to malikafavre.com and have a play for yourself.

There's also lots of brilliant prints to buy at Malika's shop over at shop.malikafavre.com.

And if you've read this far you must be properly bored by now. So cheers for hanging in there! (ノ^_^)ノ