Skip to content

Personal branding experiments

I’m having a lot of fun working on a personal brand at the moment. Part in due for being back on the market for a new front end role, but also because it has been ages since I got to dig into some design work for me.

But then again, I’m my own worst client. I knew I wanted something tactile, something that hinted at development, design and my nickname (origins decades old, don’t ask), something that would work well online and print. Tough getting all that into something simple.

After much sketching, pondering Pinterest boards, and staring bleakly at empty PhotoShop artboards, it was folding a paper plane for my daughter that inspired the design I’m happiest with.

An image of tiles demonstrating different logo treatments
I think “4b” works best

Then came the iterations, testing out business card and web layouts, but I’m pretty pleased with the results so far.

A stylised letter S

  • A chevron (think </> code)
  • A hint of an “S”.
  • Could be a physical foldable thing
  • Simple and geometric, lending itself for fun animations
  • …and lots of reusable elements.




Which is all fine on paper (uh, in Sketch app), but it needs to work online. Given the nice geometric nature of the elements of the logo, it’s not too hard. This would’ve been a nightmare if I’d started out in PhotoShop, and I’m a big fan of doing as much as possible in Sketch these days.

  • Sketch app (Mac)
  • Sketch ‘edit’ symbols to get corner coordinates for each triangle >
  • Manually enter coordinates as clip masks in CSS (CodePen)

And finally, we can play with it inĀ CodePen. This gives me loads of room for adding nice folding animations (a task for another evening).

Leave a Reply

Your email address will not be published. Required fields are marked *