Designing in the Browser

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