---

We had two different course brands to create, from two very different starting points. As we established in the last design post, we were iterating on an existing identity for Scott’s course, and for Mat’s we had a blank canvas. Each brand required a very different approach — I’m a big advocate for moulding the design process to the context at hand. In this post I’ll outline the different approaches we took, and the thinking behind each.

Where we startedpermalink

This is our starting point for Scott’s course brand.

Scott handed us a fantastic, ready to go visual identity for his Mindful Design brand. We love it, and it’s a big step away from our Piccalilli look and feel, which is exactly what we wanted from our first custom theme project — a good “stress test” for our theming system!

We were in a good position with our landing page, which has been live on Piccalilli for a while. Because of the refinements Andy’s been working on, we were happy with the content structure and UX for this phase of work, so we could focus fully on updating the template design to make theming as effective as we can.

For Mat’s course, the landing page followed the same structure, so we planned to get cracking on Scott’s first, and then use Scott’s landing page as a base for the work on Mat’s.

How we approached the Mindful Design course brandpermalink

Each project has different needs, so adapting the process to the project is something I’ve always tried to do. Beyond that, something I’ve learned to do over the last few years is to play to my strengths and to design the process to avoid the things that typically trip me up.

For me, I know that decision overwhelm can be a big roadblock to creative work. It’s why I do a lot of discovery. It’s not just about following best practice, it’s also about getting answers to as many decisions as I can before I get into the design to avoid that overwhelm.

(As a side note, I’ve found the Myers Briggs personality test (I’m [ENFP]) to be a valuable reflective tool to help me work to my strengths.)

For me, I always want to get away from the blank white page as soon as possible in the design process. So while starting with a wireframe for a landing page that already exists might seem counterintuitive, that’s where I began. This gave me a few useful outcomes:

1. First and most importantly, I built myself some momentum
2. It was a quick way to get all the elements into Figma
3. Because our look and feel was broadly there, I could apply some very quick global type styles as a base
4. It allowed me to strip out most of the layout decisions that had been made on the landing page and start with something much cleaner

You’ll see that I paid very little attention to neatness or consistency here. Plenty of time for that later.

From here, I could start working iteratively to tackle a single aspect of the design at a time, which kept that momentum going and gave the process focus. For each small iteration, I created a new artboard.

First up, applying the existing brand assets and styles to the landing page gave me a sense of how it was working in our context. I only mocked up the first three sections of the page at this point, as I’d explored enough to feel confident that this centred layout idea we’d been discussing was going to work well.

Each iteration was pretty small here — introducing a subtle pink that Scott had been playing with, and switching out the body font to give the typography just a little more personality. I’ve also labelled the frames here as I’ve gone, so it’s easy to look back through and trace the decisions and make playing spot the difference easier if I come back to these designs at a later date.

After a few more iterations I landed on a design direction I felt happy with, and had the first pass of the whole page designed.

There was still more I’d like to do. We had a curriculum overview section we were talking about dropping in, and so far the illustrations were lifted wholesale from Scott’s main site design and I’d like to update those. But it was ready for some feedback from Scott.

How we approached the JavaScript for Everyone course brandpermalink

The open ended nature of Scott’s brief needed a very different approach. We had a loose idea of a few potential jumping off points for the visual inspiration, but for any project where look and feel needs to be established, I always start by gathering some references.

For me a lot of this work is intuitive. Going back to working to your strengths, my personality type is down the intuitive, sensing and feeling end of things, so I’m looking more for a feeling to follow here than anything at this stage. That feeling or sense of where I’d like to go with a design is something that builds for me even from initial project discussions.

When I’m chatting to a client, I’m digging for a sense of the kinds of things they might respond well to, and looking for nuggets of info that can give me clues that might lead down interesting creative avenues. I’ll ask them to send me references too. Looking at the references we’d pulled together below, there were a few themes beginning to emerge at this stage.

1. We’re channeling some retro vibes here
2. Mat’s mentioned a few gaming references that all share a common theme of techy, but without falling into sterile tech stereotypes
3. I was leaning towards the idea of some kind of abstract graphic device to support the brand

I’ve already admitted to suffering from a severe case of Fear Of The Blank Page™, but to get over that initial inertia here, I took a totally different approach to Scott’s design and kicked off by asking myself “what if we were advertising the course with a poster?“.

Cue an afternoon spent in my happy place — digging for fonts!

At this stage, I was playing with the concept of a graphic metaphor for depth to support the headline “Learn to write JavaScript deeply”, and playing with some found imagery to keep the process quick and keep up momentum. It’s so easy to get sidetracked creating graphics at this early stage, which I find can really slow things down.

Using found imagery makes it really quick to try out different ideas and quickly change the feel, and sometimes stumble on a direction you’d never have come up with otherwise. The idea is to find sparks of inspiration here, not to take these graphics for our own use!

There was something in the last frame below that really struck a chord with me, and the idea of a runway was something I wanted to explore more. Graphically it could be a good metaphor to support the idea in the hero lede text…

Senior level JavaScript developers have a skillset that goes well beyond syntax expertise. I’m here to help you get there.

…and it got me thinking down a kind of retro futuristic avenue, which Mat had alluded to being very ok with.

Off the back of this I started exploring graphics of my own, leaning heavily into retro futurism. At this point I felt like this was starting to go somewhere, so it was time to run these past Mat and get a temperature check.