A Style Tile assembled with WP Style Tiles

Announcing WP Style Tiles beta

A Style Tile assembled with WP Style Tiles

I’m thrilled to announce that the WP Style Tiles plugin beta is ready! The plugin has come a very long way since I first mentioned it on the blog, and I think it could be a really useful tool for designers who work primarily with WordPress.

What are style tiles?

Style Tiles are a visual aid that help designers establish a visual design language for a website. Falling somewhere between moodboards and full-scale comps (mock-ups), Style Tiles allow designers to try out a variety of interface elements in a quick, iterative fashion. Each Style Tile might offer a different set of colors, fonts, patterns and textures, and other user interface elements. The designer then presents the Style Tiles to the client. The client can give targeted feedback about which elements she  would like to see in her new website. The Style Tiles website sums up this idea quite nicely:

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. 
An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

The very nature of Style Tiles allows the client to pick and choose their favorite elements from each tile presented. The designer can iterate based on that feedback, and quickly create a new tile that represents the desired visual design style for the client’s website.

Why not use the PSD template?

Samantha Warren's PSD Style Tiles template
An export of Samantha Warren’s PSD Style Tiles template

Samantha Warren, the brains behind the idea of Style Tiles, created a handy very handy Photoshop template for creating Style Tiles. While I think the template is a great starting point, there are several thing I didn’t like about it.

PDS files do not scale well

One of the things that immediately turned me off of working with the Style Tile PSD template was the fact that the text became fuzzy whenever I zoomed in on it. Even at 100 percent zoom, the text looked fuzzy, which I thought detracted slightly from the entire Style Tile experience.

Sometimes you don’t want to deal with Photoshop layers

Trying to find the right PSD layer to edit can be like a treasure hunt. Despite the Style Tile template being very well organized, it was still confusing to trying to figure out which layer altered a specific bit of text, or which layer controlled a specific color.

PDS files offer no interactivity

The Style Tiles template displays two elements which are normally interactive in a website:

  1. Links
  2. Buttons

Clearly, rolling over a PSD, jpg, or other image format doesn’t offer any sort of interactivity. If you’re anything like me, you like to see a button or link change color whenever it’s hovered.

How does it work?

Adding a WP Style Tile button
Adding a WP Style Tile button

WP Style Tiles works by adding a handful components via shortcodes. This allows you to add elements to your tiles in any combination you’d like. If you’re not comfortable working with raw shortcodes, no worries! I’ve added integration with Shortcake UI, which makes adding shortcodes a piece of cake (pun definitely intended). 😉

WP Style Tiles Style Tile CPTAfter installing and activating WP Style Tiles, you will see a new Style Tiles custom post type (CPT) on the WordPress dashboard menu. The Style Tiles CPT allows you to keep your style tiles organized, and easy to find without cluttering your pages or other posts.

You can add a new Style Tile post like any other post, and you’ll see that the post edit screen looks just like the blog post edit screen.

If you’re using Shortcake, you can easily add a new element to your tile by click Add Media > Insert Post Element and selecting the element you’d like to add.

WP Style Tiles gives you the flexibility to add as many or as few elements to your tiles as you’d like. And any element that has interaction, like buttons and links will work!

Once you’ve created a few tiles for your client, you can share the link, and ask your client to leave feedback on directly on the tile. And because this is all within WordPress, you can limit who has access to the style tile posts by adding a password to the post. 🙌

Where can I get WP Style Tiles?

If you want to try integrating style tiles in to your workflow, you can grab a copy of the plugin from Github. If you want to see an example tile, visit the Test Tile.

Remember, this plugin is in beta, and doesn’t currently have fully fleshed out features. In a future iteration, I’d like to figure out how to better integrate fonts, and add front-end styles to the tiles.

Reporting bugs & requesting enhancements

If you download and test the plugin, I’d love your feedback! You can report issues and request enhancements on the Github issues page.

[carrie_forde_button button_text=”Download WP Style Tiles” href=”https://github.com/carrieforde/WordPress-Style-Tiles/archive/master.zip” title=”Download WP Style Tiles from Github” alignment=”center” icon=”download”]