/ shopify

Design is an iterative process.

I've never been much of a designer. In fact more often than not I'm making a mess of things. I do however like to think that as time has passed I have become better at design and have grown more confident in my ability to design new components of websites or make subtle changes to existing ones. I'm going to go through the process of a design I did recently for a personal project and explain a few of the things that I think have made me a better designer and more creative in general.

Recently I was doing some work that required me to design a catalog for a Shopify store. I had to set up a new dev store, pick a store theme (I went with Debut) and then build out the page for the catalog and populate it with items.

While the task was mostly to test my ability at writing JavaScript and handling AJAX requests I found the most satisfying thing about it designing the page. Debut is already a beautiful theme built on Shopify's new slate framework. It has a nice easy to use grid system so all I had to do really was lay it out. Which doesn't sound like a big task but when you used to be as visually inept as I was that's kind of a daunting task when you're trying to impress people.

I started out by placing each of the products and their variants on their own individual rows in the format of image | title | price | quantity with a single 'Order' button at the top and bottom of the page. This felt too corporatey and impersonal. It felt like something that a store owner would fill in when they needed to order more stock.


Each variation was slightly different from the last making subtle changes until I eventually reached this.


This design felt more personal. It felt like you were actually seeing each product and it's variants individually. Each 'row' represented a product with the name of the product at the top. Then inside that row the product variants were laid out. Each with their own add to order button and quantity selector and variant name placed above the image. This allowed for larger images and let the customer really see what they were ordering and being able to choose which ones to order. Once a product had been added to the order the quantity selector disappeared and the 'add to order' button was replaced with a 'remove from order' button. Along with letting the customer remove an item from the order it also allowed them to see if they'd added something to the cart either accidentally or if they werent sure if they'd already ordered something.

I didn't bother screenshotting every iteration of my design for this page. In fact I had to go dig that first version out from the depths of commit hell. But it's pretty easy to see that when you start making small changes it can improve the page and it's flow greatly.

I've slowly started making some design changes to the theme for this blog. Mostly colour scheme changes with a few layout changes here and there to make it feel less like the default Ghost theme. I'm pretty happy with how it's turned out. As I've been spending more time working with designers I've grown to appreciate the level of detail and skill that goes in to choosing font combinations, colour schemes and even font sizes. I'm definitely not perfect but I'm slowly starting to see some improvements in my web design skills.

I'm also an avid photographer and every so often I'll find a photograph I processed and edited on a previous trip or editing session and I just make micro adjustments or in the most extreme cases I completely restore the photograph to original straight out of the camera condition and start again.

It's clear how practicing constantly can make you a better designer, photographer, editor, programmer or whatever you want to be. But more often than not I see people get frustrated with something they're doing and completely scrap it and start from scratch. To those people I have to say stop. There is no need to destroy something so early in the process. Make small changes there is nothing that cannot be undone in the world of design.

Speaking of iterative design. I'm also hoping more blog posts will mean a chance to get better at writing. I'm going to be aiming for one blog post a day either about something web development related or something unrelated. As long as I am practicing then I'm learning and improving.

Thanks for reading :)

- Allan