, ,

Moving From Photoshop Comps To Designing In The Browser

I still understand why so many website projects begin in Photoshop.

A static comp gives everyone something concrete to look at. The client can see the visual direction, the designer can control the details and the developer has a reference point for spacing, colour and hierarchy. For a long time that process felt normal because websites were often treated like fixed pages that just happened to appear in a browser.

The problem is that more of the important website decisions now happen in the browser. Layouts need to flex, fonts render differently, content changes length and interactions only make sense when someone can actually use them. A static comp is still useful, but it is no longer enough on its own.

The Comp Hides Behaviour

A Photoshop design can show what a navigation menu looks like, but it cannot properly show how it feels to use. It can show a carousel state, but not whether the controls are obvious. It can show a form, but not what happens when someone makes a mistake or submits it successfully. Those details are part of the website, even though they do not always appear in the first visual.

This becomes more important as interfaces become more interactive. The browser is not just a place where the finished design is displayed. It is where the design becomes real. That means some decisions need to move there earlier.

I do not think this makes static design useless. It just changes what it should be used for. A comp can set direction, but the browser needs to test behaviour.

Typography Changes In The Browser

Typography is another area where the browser matters. Text that looks perfect in a design file may render differently once it is real HTML. Line heights, font smoothing, fallbacks and content wrapping all affect the final result. This is even more noticeable now that web fonts are becoming easier to use.

A designer can control a heading exactly in Photoshop. A CMS-managed website cannot guarantee that every heading will always have the same number of words. Real content expands, wraps and behaves differently across screen widths. That needs to be tested in the medium where it will actually live.

This is why I like moving typography decisions into the browser earlier. It shows whether the design can cope with real text rather than only the example text chosen for the visual.

Flexible Layouts Need Real Conditions

Responsive and flexible layouts make static approval harder. A design might be signed off at one width, but the real site needs to behave at many widths. Photoshop can show a few examples, but it cannot replace resizing the browser and watching where the layout begins to strain.

.content {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

The browser gives immediate feedback. A column becomes too narrow, an image feels too dominant, a heading wraps badly or a button needs more space. Those discoveries are easier to respond to when the design is already being tested in HTML and CSS.

A More Practical Process

The process I prefer is not to abandon design tools completely. I still want visual exploration before development begins. What I want to avoid is treating the Photoshop comp as the final truth. The design should move into the browser early enough that real behaviour can influence the decisions.

That might mean creating a strong visual direction in Photoshop, then building key components in HTML and CSS before every page is finalised. It might mean presenting browser prototypes for parts of the site where interaction or responsiveness matters. The exact process depends on the project, but the principle is the same. The browser needs a voice earlier than it often gets.

Retrospectively, this feels like a natural change. Websites are not flat images. They are flexible, interactive and content-driven. The tools we use to design them need to respect that.