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.

Comments

  1. User Avatar
    Conrad
    Permalink to comment#

    I cant download this file

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Could you be more specific and report the problem here: http://css-tricks.com/contact/ (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. User Avatar
    daniel.jeffery
    Permalink to comment#

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

  3. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Stacey
    Permalink to comment#

    Loving the videos – kudos Chris? What happened to subtlepatterns.com?- It is still down today too. You can get png of all the patterns on Github – http://github.com/subtlepatterns/SubtlePatterns

  11. User Avatar
    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. User Avatar
    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. User Avatar
    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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag