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

F94f921203292a9ef700807e9cd5061f?s=128

Souvik Das Gupta

May 04, 2012
Tweet

Transcript

  1. Designing in the Browser Meta Refresh 2012 Souvik Das Gupta

    @souvikdg
  2. WHAT In simple words, making your mockup in markup.

  3. DISCLAIMER Photoshop’ in this presentation refers to any graphics editor.

  4. 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… , , , , , , , ,
  5. Miranj

  6. Web Design

  7. Idea Design Development Web Product

  8. Idea Design Development Web Product Purpose?

  9. Purpose + Design = Product Idea

  10. Product Idea + Design + Dev = Product

  11. Stakeholder Designer Developer User

  12. None
  13. HTML PSD

  14. What is the role of a designer?

  15. The web is not a raster canvas.

  16. “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
  17. A designer must see a product all the way through,

    including the user experience.
  18. RENDERING Photoshop renders text differently.

  19. DIMENSIONS

  20. CROSS BROWSER Every browser is different.

  21. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

  22. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

  23. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

  24. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

  25. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

  26. INTERACTIVITY Static mockups can’t demonstrate :hover states, input boxes, etc…

  27. FLOW Static mockups can’t follow hyperlinks

  28. PERFORMANCE & COMPLEXITIES Keeping things simple

  29. REAL CONTENT & DYNAMISM Demonstrate dynamic content

  30. PROGRESSIVE ENHANCEMENT Graceful degradation

  31. HTML

  32. Designing in the Browser

  33. 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
  34. REAL DEAL The real system that users will interact with

  35. - 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? - …
  36. DON’T REPEAT YOURSELF No conversion of mockup to code

  37. QUICK ITERATIONS Change, save, reload

  38. “ 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.
  39. COLLABORATION Multiple people. Single codebase.

  40. USABLE RIGHT FROM START It just works!

  41. INTERACTIVE Browser allows designing the complete interaction

  42. Impediments

  43. Designers can’t code

  44. “ 13 October 2009 @zeldman Real web designers write code.

    Always have, always will.
  45. “ 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.
  46. WORST CASE Pair with developers

  47. Designers — Photoshop

  48. GUI, limitless possibilities, embraces creativity, a very powerful tool, fast…

  49. GUI Enough said.

  50. POWER Browsers are what render your website. On the web,

    it can’t get any more powerful.
  51. CREATIVITY The browser does not harm your creativity. It constrains

    it for good.
  52. SPEED Designing in the browser starts slow, but after a

    while the speed picks up.
  53. Speed Time In The Browser In Photoshop

  54. A website without a mockup is like a house without

    blueprints.” “
  55. Cost of change in a construction project is too high.

    Iterations are hard. It is just too risky.
  56. - 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?
  57. Photoshop still has a significant role.

  58. Designing in the Browser makes sense.

  59. Designing in the Browser makes sense, but is not a

    silver bullet.
  60. Designing in the Browser Meta Refresh 2012 Souvik Das Gupta

    @souvikdg