Are there any conventions for pairing tileable patterns for web and print design?

Question

I'm wondering if there are any rules-of-thumb or conventions for choosing patterns that work well together.

At the moment I just use my best judgement which I've developed over a number of years. However, it's often very difficult to match two patterns together, so I tend to use the same pattern with a different colour, but this can look boring when overdone.

Take for example a mesh pattern and an icon pattern:

In these examples, I think the complexity and detail of the patterns is what creates the disparity. Additionally, I think the mesh pattern looks like a texture and has 3D qualities to it, while the icon pattern is flat and simple.

Based on that, the only feature I can confidently say plays a part in pairing patterns is the level of detail. Can anyone highlight more factors to consider?

What should I consider when pairing patterns?

Answer 1

One important factor to be considered will be the function of the pattern. If it would be used as a background, I will avoid high contrast pattern for a clear hierarchy relationship. If the pattern was the only element in design (very common in wallpaper, garment or textile), it can be more playful and detailed. Those small details allow viewers find something interesting when they take a closer look.

Answer 2

You should consider the final output

Web vs Print are 2 vastly different mediums when it comes down to technical design specs.

RGB vs CMYK is the main difference which, when translating into actually printing something, will make or break a design. Additionally the final "deliverable" or output will change how effective and visible your design is.

Print

Printers produce images using dot patterns to create prints and the human eye merges them into one color.

So if you have an extremely complicated pattern or have one with many overlapping elements/shapes you will have a hard time capturing the details. Along with complex details you need to take into consideration elements that have high coverage and common bounds.

Web

The main consideration nowadays is responsiveness and device compatibility. Picking scalable and non-invasive patterns and designs that translate well to all mediums is key.

Focusing on visibility, spacing and ubiquity are the key components.

Simplicity is worth noting now too with the constant optimization of the web, you would want to have your art be able to load fast on nearly any device and also have fall backs if it fails to load.

Putting it all together

A design should be simple enough with few small or overlapping elements for printing. Even the best printers with the smallest picaliter print heads will have screening issues when dealing with complex or not significantly different areas; greys that are very close or muddy (4 color vs K only) will be a nuisance too.

Applying a design to a webpage you need to look at your final audience (web vs mobile) and how you want them to interact with your site. Visibility and UX is #1 always and forever. If your users can't easily navigate or view your site then you've failed.

So look to have highly contrasting, non-busy, patterns if combining or a simple non-intrusive base pattern if using just one.