elliott richmond

Creating a new blog means creating a new brand but I’m not thinking about creating something emotive here, it’s just me so I wanted to design something stylish and geometric around my name “Elliott Richmond”. Having a background in design and now in recent years a big focus on WordPress development, particularly building bespoke plugins, I wanted to reflect the typical “plugin” element in some way as an icon so I started thinking about how I could reflect this with the initials of my name, that would be E & R, sounds and looks a little regal doesn’t it, but believe me, I do not have the manners of royalty! 😂

Another important thing was that the logo should be geometric enough to enable me to create it with HTML elements styled and animated with CSS and Javascript.

So first things first, looking for inspiration! That’s not too difficult and pretty easy actually. I have many logo books for reference but as the idea came to me it was typically 6 am and the only thing I had to hand was my phone, easy enough, I simply Googled “plugin logo” which revealed things like this…

In the example above, I started to visualise seeing the R made up of the cord coming out of the plug, in my mind the cord would be the leg of the R but it would need to be rotated clockwise about 45° to make it look like an R.

So I started to see how I could build this with HTML and CSS to start animating it the way it might end up looking, I really wanted to use the logo as an onclick trigger for a menu that I needed to animate into a closing icon with a typical x prompt, this would show in the UI as a prompt to the user to close said menu.

Here’s a screen recording to show my crude and preliminary results…

Although as an idea that came together quite quickly and easily, I wasn’t overly happy with it. It wasn’t geometric enough for me but it was an inspired way as to how I could make the R work.

So next I started to do some rough sketching on my phone in the Note app, bloody useful these phones! I have this really useful pen picked up from a Heart Internet stand at a conference somewhere that has an electrostatic soft sponge on the end, I can use it on the phone in the same way you’d use a pencil to draw, here are some of the things I sketched:

The last sketch was getting somewhere I wanted it to be, with the shape of the E and the R in the negative space. Next I needed to put it all together as shapes with HTML markup styled with CSS.

The result as an enlarged screen grab…

Below is the markup set inline. if you click on it you’ll see how it animates and reveals the prompt to close the said menu.

I guess next I should show the process of how I built it including all the Javascript required to animate it, stay tuned 🙂