Perfect is the enemy of good

Since I founded Bold Wise — and, in fact, since I began the freelancing work that would grow into Bold Wise — my site has been a fairly empty holding page. I’ve played with it from time to time, using it as a testbed for design and interaction ideas, and adjusting the words as I refined and refocused what it was that I did and how I described it. If I am being honest, it was always a bit of an embarrassment to me that my own work website was so minimal and communicated so little when websites and communication are such a big part of what I do. But, month after month, and year after year, client work took priority.

This particular rethink has been brewing for a while, but a series of conversations, some time out, and the psychological new beginning of a new year, all aligned giving me the kick I needed and setting things in motion. I’d had a long series of ‘what is it that I actually do?’ conversations with (long-suffering) friends, and came to realise that I’ve never strayed far from my product design roots, but that I also bring a far more arts-based, creative approach to my work. I had an inkling of this when I named and founded Bold Wise — those two words, for me, standing in for the ideal balance between those two aspects of my working practice. Again, if I’m being totally honest, sitting somewhere between product design, product management and creative direction and yet not being entirely of any of them alone is a tension I’m still working on.

I had also become increasingly aware that the site — or lack of it — had formed part of a creative block. I had fallen into the trap of imagining a perfect site and building on that idealised — and foggily defined — vision in my head rather than in reality. I also was using the lack of a site as an excuse for not doing the other things I wanted to to push my business and wider creative practice forward. Some of the advice I give to, and work on with, clients is that a site, an identity, a business plan or a strategy should be an evolving thing that changes as circumstances do. You can’t know exactly how a website will perform until it’s live, and, once it is, that’s when the real work (and fun) begins. Cliche though it is, perfect is, indeed, the enemy of good. There is huge power in accepting a good enough option, committing to it and to then refining it rather than working (or not working) on perfection. With that in mind, the first goal of my site was simply to exist. The second goal was to be more descriptive of what I did, and have done, than the previous holding pages so that I could start having more useful and meaningful conversations with the people I work with.

My process for this site’s design was driven by the content itself — the messages and ideas I wanted to communicate. I quickly assembled a rough first draft — a simple text file — and spent a few weeks re-reading and editing it. I had a lot of help here from friends (special thanks to @beccamagnus) who reviewed drafts, suggested improvements, and really helped me to refine and polish it. The current draft — and I think of it as that rather than a finished thing — is infinitely better for their patience and expertise.

Once the broad content structure was in place, I moved into the browser. I kept things pretty simple at first, making sure I had a solid underlying hierarchy and html structure in place (I still agonise over whether, and where, to use div, section and article — please do @ me on twitter or email me, all advice welcome). I set up very minimal stylesheets so that the overall hierarchy felt balanced and so that the text size worked across a variety of screen sizes. I was already getting a sense of how I might enhance the layout — and my sketchpad is full of the cryptic notes, squiggles and scrawls I used to try and figure out interactions — but before that I wanted to really define the typography. I had a pretty good sense of the typographic feel that I wanted — which came out of the tone of the text itself — but it took a lot of experimentation and play before I settled on Novel (Designed by Christoph Dunst at his Atlas Font Foundry), which had the added benefit of the complementary sans-serif that I could use to pick out certain details. In brief, my process was to shortlist typefaces that felt about right. I then tested them out on some elements I’d set up in Adobe Illustrator (the Illustrator & Adobe Fonts integration really pays off here) rapidly paring down my shortlist and getting a better feel for the characteristics I wanted. As a result of this testing I actually discarded my initial shortlist entirely and formed a new one. Looking over the test file now, the biggest difference was that the new fonts had a considerably larger x-height than those I’d selected previously. I almost gave up on Novel because I really didn’t like they way it rendered in browsers — it had some very odd kerning issues which were especially noticeable at the larger sizes I’d set some of my text in. Fortunately, I stumbled across the font-feature-settings css property which fixed the kerning weirdness.

With the typography in place, I moved on to the broader layout. By this point I was pretty clear that I wanted the site to be a single page, but that I wanted to give each of my mini case studies the space to breath and stand alone. I also liked the idea of each case study taking on a little of the client’s identity. From experience — again, that creative block — I didn’t want to get caught up (procrastinating over) making beautiful images or animations to represent the work itself — not least because a considerably amount of my client work really doesn’t have a obvious visual elements. Again, my goal was a good enough and actually live site rather than an absolutely perfect and full-featured one. However, many of the projects I wanted to show did include a logo that I’d worked on for the client. Adding the logo allowed me to combine the ‘here’s who I’ve worked with’ logo-list element with the case studies themselves. I dropped in quick SVGs of each logo so that I could get a sense of how this new visual element might feel.

At this point, some of the power of more modern CSS features and support really came into their own — I find that flexbox, grid and units like vw/vh (viewpoint width and height), ex and ch (both of which use a typographic metrics to define the measure) have revolutionised the way I sketch out websites. They let me test ideas and layouts faster than I could even mock them up in tools like Adobe XD or Sketch — plus I can test out different screen sizes and proportions on the fly. With comparatively little code I was able to rapidly test a lot of different approaches here before settling on the bones of the current layout where each page element gets its own ‘screen’. I’d played with scroll-snapping before in a couple of places, and I really liked the feel it gave this structure too. I could also choose the points at which I ‘activated’ it — so that smaller, narrower screens didn’t chop off content. I spent quite some time testing out different heights for each section before settling on the current balance.

By now, I’d got a clear picture in my head of how I wanted the colour changes to work too. I’d coloured up each section, but I wanted the site as a whole to take on a palette informed by the work’s colours as you scrolled through each section. I was able to get this working with some pretty straightforward JavaScript in the end, but it took a lot of trial and error to get this feeling just right. I also built in a number of fallbacks so that the site still works without JavaScript. I removed the colour changing effect on smaller screens comparatively late in the process. I found that it was just too jarring and got in the way of the content and experience itself. Instead, I allowed the site to fall back to the regular section colours.

A final addition was very subtle gradients centred around the logos. I wanted to draw attention through the site as you scroll, and add a little more depth to things — and of the various approaches I tried, these gradients (actually box-shadows) worked the best. It took a lot of testing to find the right colour values here. Early tests with just tints of black and white just didn’t cut it — looking too harsh at times even when I tinted them down to almost nothing. In the end I used completely custom values for each colour.

Now that the dust has settled a little, I’m pleased with how this turned out. My goals had been to create something that actually existed, and that started the job of better communicating what I did, providing a foundation that I could build on. Beyond that, though, making this site live has helped push me through that creative block I was feeling — and this post is testament to that, and hopefully the first of many. I’m continuing to tweak the site (and have a fair number of bugs still to squash), but it feels good to have finally retired that holding page.