Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing in the Browser

Designing in the Browser

When it comes to web design, typically, a designer is expected to provide visual mockups and a front-end developer is expected to convert the mockups into working HTML/CSS/JS code. Rarely do people design directly in the browser. In fact, my experience says that most designers consider it to be infeasible and many clients find it surprising.

However I think designing directly in the web browser makes sense.

Video: https://hasgeek.tv/metarefresh/2012/141-designing-in-the-browser

Souvik Das Gupta

May 04, 2012

More Decks by Souvik Das Gupta

Other Decks in Design


  1. I love programming, music, photography, coffee, food I love programming,

    music, photography, coffee, food food I am Souvik food food food food food food food… , , , , , , , ,
  2. “People think it’s this veneer – that the designers are

    handed this box and told, ‘Make it look good!’ at’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works. The New York Times, 30 November 2003 Steve Jobs
  3. 1. Work out the UI flows 2. Decide content 3.

    Quick sketch on paper / whiteboard 4. Jump into code 5. Let the design grow incrementally, iteratively and organically
  4. - Is that a web font? - How will the

    browser behave if the name is longer than 30 characters? - Should the mouse pointer look like this? - …
  5. “ 03 June 2003 Jason Fried HTML/CSS lets you make

    a change, save, and reload. It is build for rapid iterative prototyping while Photoshop… isn’t.
  6. “ 02 May 2011 Jeremy Keith at’s another controversial little

    soundbite that Je rey put out on Twitter to spark discussion, like Whitney’s post. You don’t do code to the level of say, Ethan Marcotte, but you do need to know what’s possible with markup and CSS.
  7. Cost of change in a construction project is too high.

    Iterations are hard. It is just too risky.
  8. - Make Your Mockup in Markup http://24ways.org/2009/make-your-mockup-in-markup - 12 Killer

    Tips for Designing in the Browser http://designshack.net/articles/css/12-killer-tips-for-designing-in-the-browser - Walls Come Tumbling Down http://www.stuffandnonsense.co.uk/blog/about/ walls_come_tumbling_down_presentation_slides_and_transcript How?