A year ago, a book changed my life. The book itself was not out yet but I was lucky enough to know the author and over time was able to see first hand what was going into it. The author was Andy Clarke and the book was Art Direction For The Web.

It was around the same time I started using CSS Grid (stop bigging it up Dan) and I’m not sure what hit me but it was a perfect storm of ideas.

Now I’ve been designing websites for years but have moved away from web design and gone down the route of being a frontender but I don’t like the way it’s going and truth be told I’d had enough so when these two things came about at the same time in my life, I really took notice.

I spent days looking at Grid and what we could do and also the work that Andy was doing which was completely out of the box. It was very much right place, right time.

Something went click in my head.

For years I have championed pattern libraries but I’ve never really been able to get it out there. But, with the extra motivation, I decided to try something.

For those that don’t know me, I work now in eCommerce working primarily on Magento builds and with this new found creative freedom I started to think how I could work with an eCommerce store and a pattern library. So for a few nights I started to put something together but it wasn’t enough. It didn’t feel a very involved process of building something off a provided PSD and putting it into a HTML pattern library.

So I decided to stop and try and step back a bit. I would design the store myself and off that build the pattern library.

But again, it didn’t feel right going from flat design to HTML pattern library even though it was my creation and at this point, I lost motivation.

It wasn’t for a few more weeks when I was building something in the browser that I thought, what if I just build a dummy store, make all the decisions in the browser and off that create a pattern library.

So I did.

Using many many PHP includes, I’ve built a replica eCommerce store modelled on Magento 2. I have includes for image products, prices, you name it, it’s in an include. The reason for this approach was so that if I decided to have a product with a sale price, I could simply add that in and it was done. The client wants swatches? I have an include for that too!

What I hope to achieve is a library of components that I can simply add in and take away to make up what looks like a store.

And this was where it started to get serious.

I have these pages now that look like a store. I can style it how I want and with some clever Sass, I can change fonts, colours, margins, again pretty much anything rather quickly and if I need to show a red shop, I can. Want a blue one? Sure, give me 2 mins.

It’s been a few months now and it’s progressed quite nicely. I’ve added in interactions now. I can add to bag and the indicator in the basket changes. I’ve built carousels, mega menus, it really does feel like a shop store.

But why bother Dan? It’s just the design, it doesn’t need to function. Stop reinventing the wheel!

I get that. But I’ve been able to show a client what their site would look like on their phone, they’ve been able to open the menu and click through to a product. They were able to add to bag and go through to the basket.

You could argue that this takes longer and to be fair, some of the things I’ve had to do took longer than a quick PSD. But one of the benefits of being able to write production ready CSS is that my files can port over to the production site or at least give the dev’s a base to build off therefore saving dev time so it balances out in the long run plus I like to think it promotes collaboration with the client and the devs.

And I’ve almost forgotten about the pattern library.

Whatever I have designed and built is added to a library. Whether it be a nav, button, social block, product listing, it all gets documented. I’ve found myself looking at a component in isolation rather than on the page and then making a decision.

Which reminds me about another plus point. Designing on my phone. I find myself making design decisions whilst on the phone using it. This is too big or doesn’t look right when I do that. Things I normally might not see until it comes to testing once the site has been built by someone else.

I know the design inside out now.

I’ve been using it in the wild for a short time now and the feedback is good. It took a bit of time to understand what the thing was and how to feedback and why there was this library of components but after a few snags, it’s becoming more of a thing now. I was able to screen grab the site with 4 different typefaces for sign off and it took all of 5 mins to switch, screen grab and send. I’m sure there is a way to deploy several branches at once so they can test all of them rather than screen grabs.

The negatives

  • Some extra time upfront needed potentially
  • Stakeholders may need hand holding for a bit
  • Quite basic in how it’s put together
  • Versioning control is down to me
  • Some amends, ideas can take a bit of time to implement
  • Need to be wary of browser support
  • Not everyone can follow this approach

The positives

  • Often quicker to implement amends
  • Quick to demonstrate a site with client branding
  • Works cross device
  • Promotes collaboration
  • Ensures nothing is lost in translation between dev and designer
  • Production ready code
  • More thought into mobile and tablet design
  • Pattern library builds itself

So that’s that. It’s a project that is very dear to me and once I’m happy with it, I’ll happily share it with people who might have ideas on how to improve it or fancy doing something like it.

Let me end on this. For some, it’s not real design. It’s not the right way of doing it. For some, it’s 100% design and 100% the right way of doing it.

The fact is, it’s just one way of doing it.