Designing in the browser is cool and all, but starting in Photoshop keeps me at my most creative when I need it the most: when facing the blank canvas. One way to fight against the painful glare of a white canvas is to toss down some texture. We do that here by picking a nice one off Subtle Patterns (they now ship in a @2x version for retina displays, nice!). We take this pattern and make a Photoshop pattern out of it and fill the whole background with it, getting rid of that intimidating whiteness.

The "Big Orange Square" was a fundamental exploration to this entire redesign. We plop it down on the canvas and go from there. We establish the branding in the header that lasts through the rest of the entire process.


  1. Conrad
    Permalink to comment#

    I cant download this file

    • Chris Coyier
      Permalink to comment#

      Could you be more specific and report the problem here: (I just tested the link above that said “Download Video File” and it works for me).

      One issue may be that the page was left open too long. The links generated here expire after a short amount of time, so you may wish to refresh the page before trying.

  2. daniel.jeffery
    Permalink to comment#

    Subtle Paterrns, very good resource that i didn’t know about.

  3. Rodrigo Quintas
    Permalink to comment#

    Already knew about Subtle Patterns but never got to use it. It’s nice to see your way of introducing it in the design process. Also it’s nice to know about the @2x versions available.

    Once again amazing Chris.

    Thank you!

  4. christopherisaak
    Permalink to comment#

    Loved this screencast. It really brought out your quirky humour. I also did not know about this texture site and was thinking about how I could possibly create a bit more interest in a site I’m building. I’ll definitely be checking that out.

  5. Ricardo Diaz
    Permalink to comment#

    Love Subtle Patterns, I use them all the time with my projects. Love the videos so far Chris! Nice to see the process that you go through to create a site like this.

  6. amaxwell
    Permalink to comment#

    Love the way you mocked up the site, I work the same way, simple shapes can really get the ideas flowing.

  7. Seth Hall
    Permalink to comment#

    Great stuff. I usually start designing right in the browser, but this is inspiring me take the photoshop approach.

  8. Aurel
    Permalink to comment#

    great stuff. Just out of interest, do you come up which designs just by playing on photoshop (and online inspiration) or does pen and paper scribbling have anything to do in your work flow.
    Also (more important) your main wrapper is 80%, is something like max-width: 980px (and from there down, be responsive) still good (enough) or basically a responsive design must not have a limited container … hope you know what Im trying to say :)

  9. JinWook
    Permalink to comment#

    Looks like Subtle Patterns went down earlier today. I’m loving this series though. This kind of screen-cast-style learning is a gem mine for people learning web dev like myself.

    Thank Chris.

  10. Stacey
    Permalink to comment#

    Loving the videos – kudos Chris? What happened to It is still down today too. You can get png of all the patterns on Github –

  11. Maurice Cherry
    Permalink to comment#

    I use Subtle Patterns a ton also, especially for responsive/mobile sites. I like that subtle little bit of texture that can really make a mobile site look polished on a handheld device.

    I’ve tried doing the designing in the browser thing too, but I find it’s much easier for me to work in Photoshop also. Using a plugin like GuideGuide, I build out a grid, create layers for elements, and it’s just much easier to be more creative with positioning and design.

  12. BenB
    Permalink to comment#

    I’ve been trying to figure out how to detach the panels so they aren’t all inside a larger window (like it is in the video). Is this not possible in Windows Photoshop, or have I just been googling the wrong thing?

  13. Josh
    Permalink to comment#

    Hey Chris, doesn’t Subtle Patterns require attribution via link to the site? I’m wanting to use them for my client sites, but it’s not really feasible to put a link.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.