Creating Realistic Designs That Work and Won't Frustrate Your Developer

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. • Make your boss happy
    • Make the client happy
    • Create portfolio pieces
    • Make something that looks beautiful
    • Push the limits of the web
    

    View Slide

12. • Make your boss happy
    • Make the client happy
    • Create portfolio pieces
    • Make something that looks beautiful
    • Push the limits of the web
    • Help the user accomplish their tasks
    

    View Slide

13. View Slide

14. • Make your boss happy
    • Make the client happy
    • Create portfolio pieces
    • Make something that looks beautiful
    • Learn new coding techniques
    • Write code efficiently
    • Push the limits of the web
    • Help the user accomplish their tasks
    

    View Slide

15. View Slide

16. View Slide

17. The struggle.
    

    View Slide

18. Not that kind of developer.
    

    View Slide

19. View Slide

20. Performance.
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Fragmentation.
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. Fragmentation.
    

    View Slide

33. View Slide

34. View Slide

35. Dynamically impossible.
    

    View Slide

36. Dynamically difficult.
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. Motion, touch, and scroll.
    

    View Slide

42. When the user clicks the link the page should slide
    out with an ease-out *woosh* when the new one
    pushes in from the other side…
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. Rich interactive experiences.
    

    View Slide

51. Photoshop is a Liar.
    Photoshop is a liar.
    

    View Slide

52. source: cssbeauty.com
    

    View Slide

53. source: blogs.adobe.com/jnack
    

    View Slide

54. Photoshop is a Liar. Webkit
    Illustrator
    

    View Slide

55. Illustrator
    Webkit
    

    View Slide

56. Fragmentation.
    

    View Slide

57. View Slide

58. Photoshop is a Liar.
    Layout.
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide