Hello, I'm Chris Murphy — I specialize in creating engaging, user-centric interactive experiences.

WordPress Theme Design Part 4: Visual Texture

By: Chris Murphy

It’s been some time since my last posting on my “WordPress Theme Design” series (a year and change), and so I thought it was well past time that I got on with the series. In previous installments, I’ve covered topics such as layout, typography, and color & contrast. This time around, I’ll be covering “texture”.

Visual texture plays a large role in design: the lack of and the addition of texture are all part of visual communication. It is one of the ways a designer can appeal to the users’ senses through a medium that is not tactile by nature.

Strategic use of texture can help to shape the perception of a design; it can turn a simple website layout into something evocative; when delivered in context with the subject matter of the site (articles, information, etc), texture can help to communicate tone and attitude.

Texture In Web Design

Visual textures can be lumped into three relative categories:

  1. Patterns
  2. Photographic
  3. Illustrated

Patterns as Texture

Patterns are the most common type of texture that you encounter on the web. In many cases they are tileable images that are rendered as background images in a page, or appear as textured design accents. Patterns can range from illustrated elements that can repeat endlessly, or as three dimensional (often photographic) textures that can evoke a sense of depth and dimension.

Example:

patterns

Fig. 1 – Tileable Patterns.

Resources:

Photographs as Texture

It would be more appropriate to consider photographic texture as singular instances of texture applied to the design, rather than something that is explicitly tiled as in the case of patterns. Photographic textures tend to range in subject matter, but the most common example of photographic texture are images that can be used as backgrounds, such as walls (brick, cement, etc).

Example:

b19light_fx111 b17dario284 47d966867f354,Grunge-Texture

Fig. 2-4 – Light, textiles and other industrial textures.

Resources:

Illustration as Texture

Illustrated texture is something of a trend over the past few years, where artists and designers mix various sources such as photographs, tileable patterns, and light to create unique textures.

Examples:

ist2_2429487-green-streak-watercolor-background ist2_1744256-blue-watercolor-wash-2 ist2_1977280-yellow-and-orange-watercolor-background

Fig. 5-7 – Mixed water color backgrounds.

Resources:

Texture in WordPress Themes

Texture as a design element contributes to the overall personality of the design. When it comes to WordPress Themes, authors tend to exhibit a need to communicate an aspect of their personality through the theme they choose to employ on their blog.

If you’re thinking about using texture as part of your design, consider the following:

  1. Theme: What is the theme of your theme?
  2. Prominence: How prominent are the textures going to be in your design?
  3. Repetition: How often and how many repeatable textures are you planning to use in the design?

Bringing it Together

Designing a successful WordPress theme is no different from designing a compelling website layout – both need to illustrate an artistic (and practical) balance of many design concept where texture may be one fundamental aspect of that balance.

When you’re considering the design of your WordPress theme, think about how your chosen texture(s) will work together with your other design elements to communicate the overall theme.

For example, if you’re out to create a theme that needs to communicate and “outdoors lifestyle” or “nature”, you may want to consider using textures that are organic. In a case like this could could mix various types of textures (tileable, photographic and illustrated).

Outdoor Italia official site

Fig. 8 – Outdoor Italia

The Outdoor Italia site is a great example of how various types of tileable and photographic texture can be used in a design to communicate a theme. The site makes great use of photographic textures in the form of leaves, paper, and the occasional physical item to deliver a sense of depth.

Wild About Gardening

Fig. 9 – Wild About Gardening

The Wild About Gardening is one of my favourite sites for two reasons: the illustration work makes subtle use of — and reference to — watercolor art, and it blends well with photographic texture. This site is a great example of Photographic and Illustrated texture working naturally together to communicate a sense of unity in the design.

The above examples aren’t WordPress themes, but the leap from content to editorial layout isn’t difficult to make.

Remember that not every WordPress design you create has to have shiny buttons and glossy blocks. Take time to experiment with texture in your design, and discover how different textures can dramatically change the tone and style of your design.

farfromfearless

Comments on This Post:

  1. Phil Porter
    Date: March 14, 2009
    Time: 7:02 am

    I think the Outdoor Italia is one one the best designes I’ve seen. Very clever use of tiles and background images, merging into the main content. I’m definately inspired by such sites.

  2. Chris Murphy
    Date: March 16, 2009
    Time: 8:04 am

    Hi Phil, I’ve seen a number of similar sites floating around, but this is one of the better ones. Thanks for reading!

  3. john
    Date: March 17, 2009
    Time: 9:15 am

    dude i think u should be looking into twilightits the hottest thing right now nt design templates i mean com on

  4. john
    Date: March 17, 2009
    Time: 9:16 am

    twiligt is the upmost hottest thing ever bigger than spiderman

  5. john
    Date: March 17, 2009
    Time: 9:18 am

    march 21rst dvd release for twiligt=)

  6. john
    Date: March 17, 2009
    Time: 9:19 am

    hi destiny

  7. Chris Murphy
    Date: March 17, 2009
    Time: 10:26 am

    I’m considering doing an article on movie sites — there are some really great ones out there right now. As for twilight, I have considered doing or re-doing the Twilight theme I created early last year. I’m in the midst of re-designing my theme so it may be a good time reconsider the other themes.

  8. Kundan
    Date: March 26, 2009
    Time: 6:14 am

    Hi this is kundan

  9. shawna
    Date: September 28, 2009
    Time: 12:12 pm

    i love your wild about gardening site… what a beautiful site. I would love to be able to create one like that. Can you get back to me how much that would cost – also is it created in wordpress as i’d like to do my own updates, etc. thx!

  10. seslichattv
    Date: November 26, 2009
    Time: 6:59 am

    Thank you. Very clever use of tiles and background images, merging into the main content.

  11. Tommy
    Date: March 2, 2010
    Time: 1:31 pm

    i like Wild About Gardening themes :) full colour

  12. Patrise
    Date: April 30, 2010
    Time: 2:05 pm

    Remember that not every WordPress design you create has to have shiny buttons and glossy blocks.
    Thank you!!! somebody had to say it. As a painter in analog media and old-school print designer, I grow weary of everything all shiny, and struggle to add softness and curves to my web designs.

Add a Comment:

Comment Guidelines: Basic XHTML is allowed (a href, strong, em, code). All line breaks and paragraphs are automatically generated. Off-topic or inappropriate comments will be edited or deleted. Email addresses will never be published. Keep it PG-13 people!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

All fields marked with "*" are required.