Trying new tools

Pattern Lab

I decided to use this tool after attending Brad Frost’s Atomic Design workshop at Webstock in February. I love the idea of atomic design, since it fits nicely with my usual desire to make things as modular as possible (like Lego!). Pattern Lab creates a website with all of my modules and lets me combine them into larger groups to see how they look and work before I get them signed off. This is what I’ve done so far (link will break after this project is complete).

Because I’m on Windows, I had to open up the dreaded command prompt. But the documentation is pretty clear, and once I figured out which commands I needed I just pasted them in. It works beautifully! And now I can just muck about in my usual text editor without worrying about how Pattern Lab will generate my little site.

I’m sharing this site with the designer and project manager, who give me feedback on changes as I make them. Previously I’d build the whole site for approval by the designer and then the client, but making edits at that stage is fiddly and time-consuming. The plan now is to get the templates section signed off by the client with any edits taking place at that level, before building the site with content and CMS in place. We’ll see how it goes!


After a quick attempt to wrap my head around using Git for version control last year, I fell back on using my GitHub account to bookmark useful tools other people had posted there. I’ve decided to give it another go for a new project.

The code for this project doesn’t need to be shared with anyone else, which is why I thought it might make a good test run for me. If I mess it up, oh well, I’ll just have to deal with it – but at least I won’t have given anyone else any trouble.

I’m dutifully pushing my commits to the master, and just getting in some practice time for now. Git has a pretty steep learning curve, so I think running through routine tasks is a good thing to try before I actually need to use the more complex features. The theory is that I should push a change after I finish working on a specific task or feature, but I keep forgetting and putting up a mixed batch at the end of the day. But I’ll persevere and do better today I hope🙂

A design refresh for DCS

dcs-screenshotLast year I worked on a visual refresh for the WA Department of Corrective Services. Their previous style looked great and was well-built, but didn’t suit the current direction of the department. I used the existing content to create a new style to suit the new commissioner. We worked on several design iterations before finding the solution that fit all the requirements: accessible, mobile-friendly, and showcasing the new goals of the department.

I used a custom Bootstrap setup, because time and the budget were tight. I don’t always like the HTML structure that Bootstrap imposes, but it has a robust and responsive grid which is really important. It also has solid documentation which makes maintenance easier for staff who are used to working on the back-end.

The fat footer provides a basic site map, and the design follows a strict grid which seems appropriate for law and order content. When I delivered the site it met WCAG2 AA, and I believe staff will be able to keep it at that level easily as new content is added.

I did discuss a content audit with the team, because the site currently has two menus: one for all the planned content, and a smaller one which calls out the most frequently visited pages. In my opinion, this indicates that the best content has been buried under pages which are necessary but not as interesting!

As always, finding a budget for content strategy is difficult, but the department has scheduled a content review. I think attention to content and user experience could make this a really useful site for the people who often need to use it in a hurry or under stressful conditions.

A new site for Turning Heads Media

Nikki and KateI recently finished updating a website for my friends at Turning Heads Media. They were already running a self-hosted WordPress installation, so I tidied that up for them, updated all the software, and then built them a new responsive theme based on their own design.

Because WordPress has all sorts of fiddly routine requirements which are the same for every theme, I began with the starter theme. This takes care of standard items like a 404 page, responsive menus and custom headers, and includes a couple of standard layouts. I find that it just makes the setup stage a lot faster, leaving me more time to work on the custom elements and styles.

We also decided on a few plugins to make adding new content easier: Meteor Slides and Video Thumbnails. And we used a plugin for the contact form as well, Fast Secure Contact Form.

I hope it works well for Nikki and Kate, and allows them to make updates to their gallery more easily than before. If you need a video made, I recommend you get in touch with them before they get too busy🙂