DDVE design class. Visual design

A presentation by Priidu Zilmer as part of a two-day design workshop for Tartu University’s Design and Development of Virtual Environments Master’s program. See www.ddve.ee for more info.

Transcript

1. THINGS TO MAKE NICE THINGS WITH
   

   View Slide

2. Don’t overthink.
   Reduce, remove, reuse.
   Make things that last.
   

   View Slide

3. PLAYGROUND
   

   View Slide

4. View Slide

5. TOOLS OF TRADE
   

   View Slide

6. View Slide

7. PIXELMATOR ACORN iDRAW
   

   View Slide

8. BALSAMIQ ANTETYPE OMNIGRAFFLE
   

   View Slide

9. PICTURESQUE HUES ICON COMPOSER
   

   View Slide

10. PAGE
    

    View Slide

11. gridr buildrrr
    http://gridr.atomeye.com/
    

    View Slide

12. 960 Grid System
    http://960.gs/
    

    View Slide

13. Less Framework 4
    http://lessframework.com/
    

    View Slide

14. Golden Grid System
    http://goldengridsystem.com/
    

    View Slide

15. Frameless
    http://framelessgrid.com/
    

    View Slide

16. #grid
    http://hashgrid.com/
    

    View Slide

17. PIXEL
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. RESOLUTION INDEPENDENCE
    

    View Slide

22. View Slide

23. View Slide

24. COLOR
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. Subtraction.com
    http://subtraction.com/
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. Michael Van Valkenburgh Associates, Inc.
    http://mvvainc.com/
    

    View Slide

35. TYPOGRAPHY
    

    View Slide

36. Font Family
    Arial, Helvetica, sans-serif;
    Headers Other
    Body 13pixels Twee cred readymade scenester sustainable. Aesthetic PBR food truck scenester
    dreamcatcher, single-origin coffee yr banksy mlkshk. Tofu VHS fixie chambray american
    apparel. Hoodie tumblr keytar banh mi, fap vice echo park shoreditch.
    24 pixels
    H1
    16 pixels
    H2
    13 pixels
    H3
    BOLD, LINE HEIGHT 24PX
    BOLD, LINE HEIGHT 16PX
    Terry richardson tofu portland chambray, synth trust fund messenger bag freegan you probably
    haven't heard of them DIY viral banksy fixie.
    Excerpt
    LINE HEIGHT 20PX, PARAGRAPH SPACING 24PX
    BOLD, LINE HEIGHT 16PX
    16pixels Echo park readymade squid quinoa mixtape. Trust fund freegan
    skateboard jean shorts vice.
    Art party sartorial lo-fi +1, raw denim cardigan terry richardson. Sustainable echo
    park whatever tattooed bicycle rights.
    LINE HEIGHT 24PX, PARAGRAPH SPACING 24PX
    Small 11pixels Shoreditch next level aesthetic american apparel. Iphone fixie art party, +1 chambray cardigan viral
    high life next level wolf cred thundercats. Keytar beard aesthetic, mustache viral food truck butcher portland
    cardigan fap biodiesel marfa.
    LINE HEIGHT 20PX, PARAGRAPH SPACING 24PX
    Art party sartorial lo-fi +1, raw denim cardigan terry richardson. Sustainable echo park whatever tattooed bicycle
    rights.
    

    View Slide

37. Whitney | Hoefler & Frere-Jones
    http://typography.com/
    

    View Slide

38. Typekit
    http://typekit.com/
    

    View Slide

39. Kerning.js
    http://http://endtwist.github.com/kerning.js/
    

    View Slide

40. View Slide

41. ICONOGRAPHY
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. CONTROLS
    

    View Slide

57. Normal
    Gray
    Green
    Red
    With an icon
    With an icon and a label
    Dropdown
    With a menu
    Dropdown with an icon
    With a badge
    With a critical badge
    Selector
    Selector with icons
    Switch
    Down
    Default Down
    Default
    

    View Slide

58. Bootstrap, from Twitter
    http://twitter.github.com/bootstrap/
    

    View Slide

59. View Slide

60. View Slide

61. PHOTOGRAPHY
    

    View Slide

62. Square
    http://squareup.com/
    

    View Slide

63. Gojee
    http://gojee.com/
    

    View Slide

64. Gojee
    http://gojee.com/
    

    View Slide

65. View Slide

66. MOTION
    SOUND
    PRODUCTION
    

    View Slide

67. Hard work.
    Your best judgement.
    Some style.
    

    View Slide

68. THANK YOU
    

    View Slide