A few sneak peeks at my site redesign

Color swatches from the redesign
Pattern Library Atoms – the colors

Over the past four to six weeks, I finally started working on the redesign of this site. Last summer, when I still thought I might be freelancing, I hired my friend Clayton Gerard to design a logo. Even though freelancing isn’t for me, I still want to use the awesome logo Clayton designed, and it is the jumping-off point for the site redesign.

My ultimate goal for the site is to have a site for which I am excited to create content. I feel like the work of done so far is lending itself nicely to that goal. The colors are subtle, and the fonts are just write. There are small touches and flourishes that I find delightful, and hopefully my site visitors will too.

The post navigation from the site redesign
Pattern Library Molecule – the post navigation with code details.

I’m taking an atomic design / pattern library-based approach for the redesign. So far, it’s working really well. I spend time thinking about each atom, molecule, and organism before moving each forward to the next phase. Not only is this helping with consistency across my site design, but it’s helping me keep my code DRY (don’t repeat yourself). And frankly, I think it’s helping me make better design decisions.

Pattern Library Organisms – a post loop

I’m building the site on the half-finished Alcatraz pattern-library-navigation branch. I was excited to start testing the pattern library on a real-world project to see what improvements needed to be made. And I am making incremental improvements to Alcatraz as I go. Working on the half-finished Alcatraz branch has helped confirmed some of the decisions I’ve made. I ripped out a lot of opinionated code (styles, mostly), and it’s much easier to use as a parent theme.

I still have a ways to go before the site is complete, but I am really excited about the progress I’ve made to date. Keep an eye out for the new site in the next month or two!

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”]

Carrie Forde Portfolio archive, after

Portfolio Updates

Over the last several weeks, I’ve been working on incremental updates to my site. And while the primary focus so far has been on the site’s content, I’ve also been making a few updates to the site’s design. One of the main areas of focus has been my portfolio. There were two main issues:

  1. the work displayed in my portfolio didn’t represent the type of work I wanted to do;
  2. the old portfolio layout abused the post meta to achieve the layout.

Choosing an area of focus

To solve the first problem, I removed all the portfolio projects that weren’t related to web design, WordPress theme development, or WordPress in general. What I realized after removing nearly 2/3 of my work was that the remaining projects were ones that I was happiest with anyway; I had the most fun working on them, and the do a better job of showing off my skills.

Carrie Forde Portfolio archive, before
Before: it looked like I was all over the place with my area of focus, including print & web design
Carrie Forde Portfolio archive, after
After: there is a clearer focus on web projects

Now that the portfolio is focused specifically on web design and WordPress projects, I’m hoping that it will make it easier to understand what I do, what I’m good at doing, and how I might be able to help.

Use post meta wisely

The second issue came up as I was working on WP Style Tiles. Initially, I was using CMB2, which stores data in post meta, to generate a style tile. The problem there was that the list of options to work through was several scrolls long, and felt unnecessary when I could just use shortcodes (even though they kinda suck too). After rewriting the content for my portfolio projects, I realized the same thing was basically true about my portfolio. Post meta is really only needed for the real meta: the services, designer, and live site link.

Carrie Forde single portfolio, before
Before: all of this content was generated with post meta.
Carrie Forde single portfolio, after
After: only the services, designer, and launch button are post meta. Try not to mind the screenshot tool mangling the end of this page. 😬

Everything about the portfolio updates feels right now. And I had a lot of fun trying out new ideas along the way (I dropped Advanced Custom Fields for this in favor of CMB2, for example).