Watch my free on-demand Bricks masterclass Watch Now

[Making Of… #10] Going With The Flow

What’s this? In 2021 I made a course called From WordPress To Webflow. This post is one of a series of behind-the-scenes emails I wrote as I went along, exclusively for my email list (start here).

Yesterday I brought you up to speed with our fictitious client’s penchant for Scandinavian TV crime drama.

Oh, and also the WP woes that have led to a rebuild of her website in Webflow. Probably more important, on reflection.

All this backstory is cute, I know. But there are loads of reasons why a case study story like this makes for far more effective tech-related courses, which I’ll talk about soon.

(Ok, maybe we don’t need the ‘Netflix Scandinavian crime dramas’ detail. That might just be me and my wife…)

Anyway, today I just want to quickly share with you a few bits of work-in-progress.

Next time, I’ll share the thought process behind why I’ve structured the case study the way that I have and some of the planning steps along the way. Hint: it’s all about supporting the teaching points I need to cover along the learning path to student success.

New Logo

I’ve been messing around with ideas for the new logo for the client’s rebrand as Go With The Flow.

Here was the previous logo: (I’ve lost this image—will replace asap).

I needed to lose the ‘lotus flower’ icon from the previous No Stress studio logo, cos that was also the branding for my No Stress WordPress course, so it all tied in nicely.

But I wanted to still retain the basic idea of a suitably yoga/mediation-related icon. Evolution, not revolution, man. ✌️

Here were a few very rough ideas I played around with to start with (wasn’t worried about spacing, sizing or proportion at this point, that should be obvious).

First, using the newer serif font that the site now uses for headings (Source Serif Pro).

(I’ve lost this image—will replace asap).

And then trying it with the body copy font (good old Poppins).

(I’ve lost this image—will replace asap).

I’ve never been able to get on with Poppins for anything but body copy, so Source Serif Pro it is.

I eventually decided on this one, with a little more attention to typography.

(I’ve lost this image—will replace asap).

I think there’s a nice suggestion of ‘flow’ and Eastern health/spiritual practices.

It’s not gonna win any design awards, that’s for sure. I mean, it’s just a stock icon, and I ain’t no logo designer! But it’ll do the job for the purpose.

Our client, Jane, is delighted with it, obviously. She’s entirely fictitious so of course she loves our work .

Case Study Website

As I mentioned earlier, I’m planning and building the new version of the case study site to carefully match the teaching points I need to cover and provide opportunities for students to practice what they’ve learnt.

As with NSWP, I’m basing the new designs off a template in the brilliant Style Kits library, using it as a starting point for further design and development.

Style Kits—if you don’t know already—is a WP plugin that extends Elementor’s styling capabilities, as well as providing some pre-built design starting points. They’re all beautifully designed by my very good friend, John Fraskos.

Once again, John has given his kind permission for me to use this design material in the course. And this is great, because (understatement alert) John is a far better designer than I am.

You might remember my mantra earlier in this series:

Always try to hire in help for the things that someone else can do better and/or faster than you.

For the first part of the course (I’m thinking of it as Act One), the site actually becomes a one-pager, where the nav links in the menu in the header scroll you further down the same page. I’ll explain why it starts as a one-page website in the next email.

Here’s a rough idea of the site header and hero area.

(I’ve lost this image—will replace asap).

An area to list success stories and ‘meet the team’.

(I’ve lost this image—will replace asap).

Couple of options to advertise the studio’s classes (I’ll teach the top section first, and come back to the second section as an alternative later).

(I’ve lost this image—will replace asap).

And the footer.

(I’ve lost this image—will replace asap).

Anyway, just a few bits and bobs of progress to share with you today.

Next: what cave paintings have to do with the effectiveness of your online course.