Wpplugincheck just had a makeover!

The Why

Back when wpplugincheck first started it was running twentyeleven theme and was looking crappy as hell. In the next couple of months I wrote a new theme using Sage 9. This is how it looked:

Wpplugincheck's initial design
Wpplugincheck’s initial design

It was pretty minimalastic back then. The goal at that time was to push on with more reviews rather concentrate on the design.

In late 2017 I made some new design changes which drastically improved the editorial. The contents table would be auto generated from the list of sections and there were extra fields where I can note the plugin version tested against the wp version.

This is how it used to look like until recently:

wpplugincheck's design 2017
wpplugincheck’s design 2017
wpplugincheck's editorial design 2017
wpplugincheck’s editorial design 2017

Note that the purple styling was backported from the new design which was being developed.

Sometime in February I realized the theme framework on which the site was made was limiting my workflow. Personally I’m not a fan of webpack/es6 and I would rather code with pure javascript/jQuery.

Also, Sage 9 made things difficult because it employed a completely new folder structure which could potentially break plugins. For example – ACF’s json feature won’t work out of the box. You’ll need to manually set filters to give it the appropriate path to the json folder. Also, there were reports on woocommerce having issues with the new folder structure.

I also realized having a clear site identity would be great as I can just build on the design itself and create new components based on the existing design rather than creating new components which would aesthetically look different from each other.

The How

I started working on the new design sometime in February. I used Figma for designing new concepts. Firstly, Figma’s awesome. Most design apps neglect Windows. Figma’s great in the sense that its:

  • Free
  • Works in your browser

This is how my prototype looked like:

Second, I made a list of sites I was inspired by. I used raindrop.io as a moodboard. Some of I sites I took inspiration from:

  • Segment.io
  • Stripe
  • Pcpartpicker
  • Indiehackers

For typography I used Fira Sans. Initially I found this font really hard to work with. It just doesn’t look good by default. I nearly switched to Hind/default system font but I saw that they look pretty lifeless. Fira had an unmistakable personality which really brings the design together.

I had to do a lot of experimenting with the right color combination, font size/letter spacing, etc in codepen but I think it looks great now.

As for the color scheme, purple was just a random choice! I wanted to look unique and most people were using variations of blue or really bright colors. I settled with purple cause fuck yeah!

This design is just a v0.1. New updates will add more content areas, aria support and much more.

Enjoy the new design.