Thursday 1 March 2012

Do You Design In The Browser? | Van SEO Design

Do You Design In The Browser? | Van SEO Design

Do You Design In The Browser?

Posted: 01 Mar 2012 05:30 AM PST

With the move toward responsive websites, designs are being pushed to the prototype stage sooner in the process. We’re designing more in the browser. Or are we? Do Photoshop comps still have a place in the design process? Depends who you ask.

Last week Sarah Parmenter published some interesting thoughts about how she can’t design in a browser. The gist of her post is that once she opens a code editor her focus shifts away from the creative and toward thoughts of structure. She finds the resulting design to be “boxy, bland, and uninspiring.” While she readily admits it’s not feasible to create Photoshop comps for every breakpoint in a responsive design, she knows she needs to use a graphics editor while working through her creative process.

Earlier this week Mark Boulton offered similar thoughts from the Responsive Summit. He talked about recent discussions of designers looking for a new tool more aligned with moving things quicker to prototyping in a browser. He also talked about his own experience using Photoshop in the creative process and not wanting to give if up.

My own process has been changing the last couple of years and I find myself much less reliant on graphic editors like Photoshop.

Responsive website seen on iMac, iPad, and iPhone

My Responsive Design Process

Unlike Sarah and Mark, I don’t consider myself a Photoshop expert. My journey into web design was from the development side. It was much easier for me to take your PSD file and build a web page to match than to create the PSD in the first place.

Over the years my Photoshop skills have certainly increased, but my strength is still in working with code over working with graphic elements on layered comps.

I can remember one of the first sites I designed for a client where I had an idea for how to display her navigation. I could see in my head what it looked like and how to code it, but for the life of me couldn’t create it in Photoshop. I asked my client to trust me. Fortunately she did and the result was something we were both happy with.

Even with greater skills today, I still find myself leaving comps rougher than others might and moving more quickly to developing a working web page and leaving more of the design to a code editor and browser.

My design process now works as follows.

  • Research and Planning — gathering information and thinking through information architecture, navigation, and typography
  • Sketch — rough ideas for layouts and what’s to be included on each page
  • Wireframe — something semi-polished I can send to clients
  • Prototype — building 2–3 representative web pages. Much of my design process happens here
  • Development — building the site and refining the design

Closeup of a wireframe sketch

Without going into great detail, the early phases of the above process tend toward working out design problems. It begins with some very rough visual ideas that continue to be refined as the process moves along. At the end of the wireframe stage there’s enough detail to get feel for how the site will look, but I still leave much of the design details for prototyping and refine the design during development.

This iterative process helps me work in layers starting with type, grid, and layout and adding colors, imagery, etc. on top to continue to refine and create in an iterative process. It works for me because I think it plays to my strengths as a designer, which is away from the graphic editor and toward the code editor.

In fact with the last couple of sites I designed Photoshop never entered into the picture at all, other than to help create or modify specific graphics and images that found their way into the site.

I still find happy accidents along the way and for me this process doesn’t impede creativity. Perhaps it leads my designs to look a certain way, but I think that was toward the style I was naturally developing.

In the end I design more in the browser, because the tools I’m most comfortable using are html, css, and javascript. It’s easier for me to get my ideas down using them than it is for me to use Photoshop or Fireworks and any other graphic editor.

Creativity can solve almost any problem

Summary

The move toward more responsive and adaptive designs is calling for different processes than many have worked with in the past. It’s impossible to accurately reflect how a site will function in a graphics editor alone and as an industry we’re pushing toward quicker use of the browser to create prototypes in the place of design comps.

Designers who’ve worked longer with graphic editors will probably have more difficulty making this shift and they do have valid reasons for wanting to work in a graphic editor. It’s easier for some to think creatively in a graphic editor than in a code editor and there’s nothing wrong with that. We each have our own creative process.

I’m finding it easier to design more in the browser. Fortunately it plays to my strengths and before long we’ll see new tools that allow designers on both sides of this graphical, coding spectrum to work with a creative process they find comfortable. Tools that will better create responsive prototypes through a GUI.

Is your process changing? Do you find you can design and be creative with a code editor and browser or do you need to stick with a graphics editor for the creative part of the design process?