Jamie's Blog

Lessons from a life of startups, coding, countryside, and kids

Rebuilding my Consulting Site from scratch

Screenshot ideasasylum.com 2015 04 07 22 21 00

I’ve tried themes. Lots of themes. I always start with a theme and often customise it until it’s barely recognisable. I was on my third theme for my consulting site and it really wasn’t speaking to me. It was busy. It used all the modern things like large hero images with coloured/blurred overlays, feature blocks, parallax etc. It had complimentary colour schemes and about a million different content blocks. It had multi-column content neatly arranged in lots of different content.

But it didn’t speak to me. I want something much simpler. Something less fashionable.

This was my current site before the two failed redesign using themes:

Old site

Clean, Modern, Typography

“Clean, bold, modern, typography” was the phrase I was putting into various search boxes. They all came up with lots of “meh” results that really didn’t embody those adjectives. Now, I’m not really a designer. I mean, I know HTML & CSS and I’ve got a reasonable understanding of complimentary fonts, colours etc. But I never start from scratch.

Now it was time to.

Enter Macaw

I backed the Macaw kickstarter and my copy hadn’t seen much use.

Macaw

My first thought on the layout: “Use a fixed sidebar. Screen are wider than they are tall so this gives more room for the content.”

I wanted my face on the page. Not because I particularly like my face, or because others particularly like it, but because if you’re going to buy consulting services from someone you’re going to want a little personal connection.

Of course, a sidebar layout doesn’t really work on mobile so that needed to switch to top header layout with a button for the navigation menu. No, not a hamburger button, a real button for the menu marked, surprisingly enough, “Menu”.

Header layout on Mobile

I then mocked up example headers, paragraphs etc. Macaw was a bit limiting here (e.g. you can’t set the list-style) so I didn’t spend too much time on it.

Export and Edit

The next step was to publish the Macaw page as HTML & CSS. I quite like the output from Macaw but it’s not perfect (h2 came out as .text .text-1 or something). But, and this is the trick, copy the Macaw output to another directory and edit it there. This makes it easy to switch back to Macaw, produce a new design, export the results and use a diff tool to copy just the updated rules back to your edited copy. It means you can code in CSS or in Macaw and not get into too much of a muddle.

Adding the required tags for Statamic was pretty trivial really. I budgeted a day to mess around with it and I had it done in about an hour.

Onwards

I purposely didn’t mockup every single thing I’d need (buttons, text/image content sections) but I can do that now. I can also start re-working the content and finesse the design later. I’d like to add some animations, use some social icons etc but that’s post-launch improvements.

All in all, I’m pretty happy with the results. It’s a big step for me to go from edit-a-theme to design-from-scratch and I think this better reflects my vision for the site.

You can see the final design below

Ideas Asylum