☀️

The Design Journey and Real Inspiration Behind WP🐹


This is in response to a claim WP🐹 is a copycat of wpjohnny.com. To understand this post you’d have to read that post.

I’m not angry. I’m happy he’s already discovered my site when it’s barely a month old. It means I’m on the right path.

Check out his site, he has amazing content.

Here is my response to Johnny, complete with the design journey and inspiration behind my choices.

Hi Johnny

I do enjoy your style — if I didn’t know better I’d believe in the parallel universe theory. You’re my WordPress doppelganger — and yes, I think we could be friends (and we should be, we can help each other).

Because I didn’t copy you. Promise. Pinky swear.

Like you, this is the result of iterating and iterating (and more iterating). But it did start somewhere.

It came from a place of performance first. It was always keeping every KB in mind when writing the CSS — and the DOM as lightweight as possible.

The (Real) Inspiration

This Fireship.io video where the author explains how to create the dark/light mode switcher from Alligator.io is what inspired me (maybe it inspired you too).

Mostly because I wanted to create a cool dark/light mode switcher too (I mean, who wouldn’t!?).

And like everything else I do, this ended up getting iterated upon too. I moved up from just dark/light mode to adding color shift (based on CSS var() and calc() — super fun to create — and I will be showing how I did it relatively soon).

I *somewhat* documented the journey while creating the design here (but in a rush for time I started not being as consistent as I should).

I call the theme “Bear Metal.” A play on words for “bare metal” to mean high-performance, no fluff — and “bear” because I’m the  🐹 so why not? I know, nerdy.

This design was “done” before I had ever seen your website. I found your WP group first when Facebook recommended it… but I was so head down in launching my site I honestly had never looked at your site.

And I mean, c’mon, you’re going to say things like slanted lines, system fonts, spacing, and tiles are why this was a copycat?

Let me explain my design/content creation theory a bit, then I’ll address your copycat concerns.

My Design Theory for WP🐹

Content-based design

I too enjoy a content-based approach.

I think technically what was constantly going through my mind while creating the look and feel of my site was my reader.

When someone searches Google and finds WP🐹 I want them to get what they came for: the helpful content.

Text first, later added artwork

I did start text-based only with no images, mostly because I didn’t want to fuss with images right away (got to get the content done). 

But I also happen to be a digital artist and recently decided I would “paint” my featured images as a way to be different from others. It does add quite a lot of time to finishing a post, but I think it’s a nice touch, some may not agree… but I’m okay with that.

Beautiful typography is essential — which I still have some work to do (it’s a never-ending process, isn’t it). Getting the letter-spacing, sizes, and line-heights just right is an exercise in testing.

I also specifically limit the content width based on font-size, using a “reading ratio” to prevent eye fatigue. You know what I mean, those crazy wide pages where the reader loses which line they’re on when they get to the end of a sentence and track back to the next.

Separate the things

A massive part of typography is spacing — which I liberally apply so the reader’s eye can move smoothly from paragraph to paragraph.

I’ve never been a fan of sidebars either — luckily mobile-first design means “sidebars” are loaded at the bottom… which is a footer isn’t it?

I do have some work to do in spacing because I found myself spending too much time on design and with a site this young I needed to get cracking on the content.

So it’s on my to-do list to clean up.

Lightweight and FAST

Performance is near and dear to my heart. 

Before WP🐹 I was crafting a profoundly informative, actionable web performance course (on a different domain) — but decided to scrap that and launch WP🐹 instead (and start moving that content here). 

Starting from a place of performance is essential because of the “peace of mind” knowing the baseline is lean and I can add to it carefully when I believe it is warranted.

I started out using the GeneratePress theme. But while it is a great theme and is relatively lightweight, I wanted to be even more performance-oriented.

So I started crafting my custom theme for WP🐹. It’s not something someone would want to use on their site. It’s almost too bare-bones — but I can work around those limitations to make what I want.

Functional Colors

Initially, all my text was one color, headings, and all (well, links were different). But some very early feedback on the design was adding color to improve the reader’s ability to skip to content areas more quickly.

So I added color — based on the color shift the reader has chosen (using the color slider at the top of the site). 

Then I iterated on that and made the color fade ever-so-slightly for each consecutively nested heading (h2 to h3 to h4, the color fades).

That’s WP🐹 in a Nutshell

A simple, lean, content-first design ready for me to craft content into, run some WP experiments, and share my findings.

Now I want to go over where you believe I copied you.

How WP🐹 is Not a Copy

First, I do want to reiterate that Fireship.io’s video and Alligator.io are the true inspiration for WP🐹. There’s a little from GeneratePress and some from various other sites I enjoy too.

Concept

You claim my concept is the same. I suppose if you say I create WordPress content and am a 1-man show, then we are similar there. 

Right now it’s just me until I get the site “baked” a bit more, and then my team will join me.

I named the site WP🐹 because of the old idiom meaning “someone used as the subject of an experiment.” I’ve tested many WordPress products and hosts; it’s honestly a little ridiculous (and maybe should be embarrassing to a degree).

That’s it. I just wanted to finally put all this stuff in my brain into action, helping others.

System fonts

I’m not sure how to say I didn’t copy you here. I mean, technically, TabNine (the Visual Studio Code extension) auto-inserted my system font stack. 

But I drew inspiration from this CSS Tricks article.

I know the system fonts stack produces the fastest possible websites and therefor used it.

Nothing more.

Simple, text mobile menu

The mobile menu was a happy accident (RIP Bob Ross). I originally intended to do more with the menu — and I still might.

But I was, again, finding myself spending too much time on design elements and switched focus. Especially when a site is young, content is the only work important after the site can load. 

But you noticed on desktop the menu renders differently and is no longer “click to open” like on mobile. The menu is on my list of things to experiment on.

Unofficial guides

This is something I’ve used for decades in my line of work. 

When I create layman, understandable guides for my office (I work in the IT department of a hospital), I am forced to use “unofficial guide” since I am speaking towards legally contracted equipment (but their documentation is complicated for junior techs to grasp quickly).

But I really don’t like the phrase, and I’m tired of it. I used “unofficial” on WP🐹 from habit and as placeholders because I am trying to work fast during the launch phase of the site.

I have recently been going back through to rename posts, but as you said — sometimes even that starts to feel very “same same” and blends with everything else out there.

Break: this is probably not a good practice for SEO, but given the ultra-young age of the site, I can get away with it for now. So long as I clean it up before Google really starts to take notice. Note for the wise, don’t copy this method — start with the headline you want long-term.

Tile-blocks on category pages

These are tiles because Alligator.io used tiles. 🙂 They did inspire me after all. 

But I also used it as a place to experiment with the CSS grid. More specifically, repeat, auto-fit, and minmax() — and how they can create layouts with very little CSS (which is a great bonus for performance).

This was the result of another Fireship.io video where the author explained CSS grids in an easy to follow way.

You say I don’t have featured images, but technically I do. The digital paintings are featured images. I would have used them in the tiles but I didn’t want the performance hit.

And the design is the same on the “explore” page. More on that later.

These category pages are the result of the goal of creating content silos. There’s more to do here over time as well, the site is barely a month old — there’s a lot on the to-do list.

Pointed headers with category tag blogs underneath

My headers started flat. Then I wanted to play with CSS clipping path.

My original inspiration, Alligator.io, is what I designed it like next. But I found their style too pointed (you probably do too). 

But I also wanted to try something different. So I went to Clippy, an online clipping path generator tool, and began experimenting. 

After so many iterations of polygons, hexagons, and *-gons, I just couldn’t find precisely what I wanted.

So I went with a triangle, but not as pointed as Alligator.io. But there was another reason.

It points down — drawing the reader’s attention downward (sort of like having images with people looking at something subconsciously draws attention to it). 

Category tags were above the title until I started adding the digital painting featured images. It just didn’t look right, and so they were moved below the title.

Central archive page with all posts

Don’t all sites have a central page with all posts? If not, maybe they should?

This was inspired by the search filter I created, and you admitted is something that separates our sites (which is more evidence I didn’t copy you right?). It’s simply a JavaScript-based filter that can only work on visible content.

So this page is “all the posts” because then the reader can use the filter to quickly find what they want.

This also leads into why I don’t use my featured images here. Over time there will be a LOT of posts here and loading all those images is just a performance hit I wasn’t willing to take.

There was no copying, simply design decisions that came about to support the function of the page.

This explore page, and the category archive pages, share the same design except the category pages don’t have the filter (yet) since there isn’t enough content to warrant it. I didn’t see a reason to change the design between these pages — since they’re really the same function.

This, too, started flat. Then I added a gradient background to it and wanted to add some flair.

So I went back to Clippy and tested countless clipping path shapes and ended up on a slanted look. I *almost* left a small “cut” in the right (high) side of the slant though — but didn’t.

Square bullets

Are you really claiming square bullets? 

The bullets were a very recent addition. Originally I had the design as simply the solid left border on list elements. But as I was creating a lengthy guide for Perfmatters, I wanted to add a way for each setting to stand out more.

So I added the bullet (a food pellet may be cool in the future). But the bullet started out aligned inside the list element. So I tested moving it left to align in the left border.

I like it, but I’m thinking about changing the bullet color to match the border color. More experiments to try when I have time.

What is WPGuineaPig’s design missing?

First, thanks for the feedback. I appreciate that you took the time to dig in and offer your advice.

  • Food pellet bullets – haha, yea — this could be interesting in the future.
    • My wife is an artist specializing in hand-drawn art. She’s working on some cool logo/branding ideas to replace the 🐹, but no rush — the site has to get off the ground first.
  • Clashing geometric harmony — maybe? I don’t know… most articles are long enough that the header is nowhere near the footer. Maybe it clashes, maybe not. Eye of the beholder perhaps?
  • Lack of color hierarchy — there is a color hierarchy in the headings. But I do know I have some color cleanup to do. 
    • It’s been a challenge since I let the reader change the colors to their liking and calculate complementary colors automatically. 
    • There are some changes coming soon here.
  • Desensitized bold effect — haha, yea… I do use a lot of bold. I guess that’s my style. I suppose I could pay more attention to that.

Dear “not the original” aka WPJohnny

I didn’t copy you. I didn’t choose your design. 

You do have quality work and you should feel proud of it. I know it’s not easy to always put in the work necessary to build things like what you have accomplished.

My work doesn’t resemble yours as much as you think it does. Our original work compliments each other. We could do more for each other in the long run.

I guess I’m the one who should be flattered. You noticed me after barely a month online. I’m doing something right.

I can’t wait to see how you copy my search filter capability. I kid! I can’t claim that as the first time it’s ever been used. 😜

Welcome to my lab…

🐹, ✌️+❤️