Pattern design tips and tricks for developers

As a designer who works with WordPress on a daily basis building websites and themes, I quickly realized the importance of well-crafted block patterns. They’re the backbone of a seamless user experience. Through trial and error, I’ve gathered a few insights on what makes a good pattern, and what ensures that each pattern integrates flawlessly into any WordPress theme, maintaining coherence while offering adaptability. Let me share with you some of the invaluable lessons I’ve learned along the way.

Structure

There is some flexibility when it comes to a pattern’s structure, but generally a structure like the one below helps encourage consistency in the application of patterns, for users applying a pattern anywhere on a site:

1. A top-level Group block.
   1. Spans the full width of the page.
   2. Makes it easier to change the background color of a whole section of page.
   3. Makes it easier to reorder the sections of a page, as each pattern is contained within a Group block.
   4. Typically has the left and right padding values mapped to the site’s global styles layout settings, so that the pattern adapts to the theme (and users’ preferences). 
2. A container block (Group, Columns, etc.) nested directly within the top-level block.
   1. Set to the theme’s “wide” width value (settings.layout.wideSize in theme.json), allowing for the pattern’s contents to have a max-width, as defined by the theme.
3. Two Spacer blocks, above and below the container block. 
   1. Allows for users to select and manipulate the space between patterns, without having to find the block’s relevant padding controls.

A few tips for optimized pattern structure: 

• Make patterns as simple as possible by avoiding excessive block nesting.
• Use the Columns and Group blocks—and its Row, Stack and Grid variations—liberally for layout.
• Consider naming blocks within your pattern. It is currently possible to name blocks such as groups, rows or stacks. You can opt to name different sections after their contents or functionality, like “Title Area” or “Image Area” vs. just “Group”. This can help users wrap their heads around patterns and make it easier to navigate their structure. To rename a block you can either use the List View and click on the block you wish to rename or you can see the block name field in the Inspector > Advanced.
• Ensure that you’ve accounted for the mobile behavior of the pattern. For instance, if using the Columns block, you can add additional vertical block spacing to add more breathing room between blocks as they reflow on mobile.
• The Cover block is great for placing content above media. 
• Ensure that there are no empty paragraphs appended to the pattern.

Styles

Color

When designing patterns—particularly those that are intended to be site-agnostic—colors should almost never be applied directly to blocks within the pattern.

Site-agnostic patterns are designed to inherit styling from any site’s active WordPress theme rather than render arbitrary “hard-coded” color values. The result is that these patterns have a clearer sense of belonging when added to a site.

Typography

There is a bit more flexibility when it comes to typographic design choices. While a font family should not be applied to specific blocks (as the fonts may very well not be installed on every site), you may add character using any of the other typography controls in the Editor (Line height, Letter spacing, etc).

Generally, it’s best to use the font size presets—rather than arbitrary values—but there may be cases where fixing a size is appropriate.

Content

The content of a pattern refers to the text, images, or video utilized in it.

1. Make it feel real and avoid using dummy text. Make sure images and text work well together to make a coherent piece of content.
2. Names should be descriptive and precise enough to distinguish the pattern while avoiding terms that might be confusing. Good examples are “Hero section with image & CTA – Right” or “Three column section with icons”. Do not include the site/theme name in the pattern name and use sentence case.
3. Be generally mindful of orphans and widows on text.
4. Avoid overly artificial, stocky feeling media. Instead, opt for a more emotionally resonant and tangible selection of images, video and audio.
5. All media needs to be CC0 licensed or in the public domain. Unsplash and Pexels are not viable options since they use proprietary licenses that are incompatible with the GPL. It’s good to double-check the license of any assets you plan to use to make sure they’re still suitable. Good sources for these are:
   • Openverse
   • Stocksnap
   • PxHere
   • Smithsonian Open Access
   • Foodies Feed
   • Nappy
   • Flickr Commons
   • RawPixel – Public Domain
   • Skitterphoto
   • MyStockPhotos
   • AI Tools: Midjourney, Dall-E

6. Images should be no bigger than 350kb with max dimensions 2000px (width or height, whichever is bigger). Consider using performance-friendly formats, such as WebP or AVIF.
7. Optimize images. For Mac, I recommend ImageOptim. Enable lossy minification if need be; 80% quality for JPEGs should work fine. For Windows, you can try ImageMagick or browse other alternatives.
8. Images are required to be added to the media library on the pattern source site.
9. Add alt text to the images you add to your pattern. It is read by screen readers in place of images, allowing them to be accessed by people who can’t see the images. See how to write good alt text.

Below is a condensed cheat sheet highlighting the key disparities between good and not-so-good patterns.

Two “team” patterns, the one on the left has clear and concise copy and coherent photo treatments and aspect ratios. The one on the right uses lorem ipsum, and has inconsistent photo treatment and aspect ratios.

Two “link in bio” patterns, the one on the left has a simple, responsive layout, clear and concise copy and a conceptual connection between background and images. The one on the right has unclear copy, unresponsive layout, too much information & elements all over the place.

Two “pet inspired” patterns, the one on the left has relatable copy, applicable to real use cases and a responsive layout. The one on the right has awkward copy and streched images with watermark.

Two “media and text” patterns, the one on the left has a full height image on the right with a blue vase, Heading: “Vintage Vases”, Paragraph with link: Shop the collection”. The one on the right uses lorem ipsum and a low resulution image with watermark from the source site.

Two “Call to Action” patterns, the one on the left well-written copy, enough color contrast in text, condensed information, CTA button color grabs attention and a high quality, full width image. The one on the right has typos in copy, not enough color contrast between image and text, too much spacing between elements, and a low resolution image with watermark, in an awkward width.

A good pattern:

✔ Feels real.
✔ Is a coherent piece of content.
✔ Has optimized images/media.
✔ Has a descriptive and precise enough name.
✔ Is simple, without excessive block nesting.
✔ Looks good in all screen sizes.
✔ Respects licensing restrictions.
✔ Can be used in almost every website/theme.
✨ Is visually appealing.

A not so good pattern:

✖️ Feels fake or artificial (e.g. stocky, AI).
✖️ Is random, incoherent, and unpolished.
✖️ Images aren’t optimized.
✖️ Has a vague name (e.g. “Newsletter”).
✖️ Uses excessive block nesting.
✖️ Doesn’t look good in all screen sizes.
✖️ Uses media with licensing restrictions.
✖️ Doesn’t work well with other patterns/themes.
😬 Is visually awkward.

The idea is to find the line where you can create expressive, creative patterns with a systematized approach that allows for designs to harmonize with each other and the theme’s design language.

Props to @richtabor for cowriting this post with me, and to @greenshady @bph and @ironnysh for reviewing it.