Web Design Process: Style Tiles

L'opera Opera style tile version 1 textures adjectives mood board
L’opera Opera style tile version 1

This is the first style tile I’ve ever made. Style Tiles are a relatively new thing. With the age of mobiles upon us, we have to have elements that can size and refigure with ease. (elements:fonts, hierarchy system, button styles, colors and patterns). A mood board is too vague and a comp, too specific. In Jill’s class we made mood boards. I just feel that this is more crisp and easier to work with. When we talk about textures in style tiles, we are usually talking about a seamless background pattern that tiles. Having a small repeating png saves file space. I keep being excited about making buttons and button bars since Tim showed us how to make them. When it came to picking colors, I used the eyedropper tool to extract some colors I found in a dramatically lit photo that said “opera” to me and then modified them slightly when I found a pattern I liked that used them. And for one of the patterns, I downloaded it, then colorized it in photoshop.

Here is the list of links where I got my patterns:
nouveau flower
purple majesty
norwegian rose

Note: These patterns are from free-download resource sites. The sites don’t require linking back or credits. But, they always encourage it.

(Earlier Post Relating to This Project)



  1. […] Above:(work in progress–I’m not done yet… now I have 6 errors in my html) transformation of a website going from simple html, to CSS—simple layout and background colors in boxes, to incorporation of googlefonts and patterns—as planned in my style tile) […]

  2. Have you ever considered about including a little
    bit more than just your articles? I mean, what you say is valuable and everything.
    But think about if you added some great graphics or video clips to give your posts more, “pop”!
    Your content is excellent but with images and video clips, this blog could certainly be one of the very best in its field.

    Good blog!

  3. My brother recommended I would possibly
    like this website. He was totally right. This post truly made my day.
    You can not consider simply how a lot time I had spent
    for this information! Thank you!

  4. […] of years ago and I use them fairly often. (Here’s an in depth blog post I write about them Web Design Process: Style Tiles | Katablog.) Your style tile can be as simple or outlined as you want, depending on your […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s