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:

enter image description hereenter image description here

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?

  • If you are asking for conventions... The convention is to not use the same pattern both on the web and on printing material. Sorry, but they are too different mediums :/
    – Adriano
    May 24, 2018 at 4:26
  • @Adriano the principle of consistency may disagree with you there.
    – Dom
    May 25, 2018 at 16:55

2 Answers 2


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.


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.


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

enter image description here

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.