$30 off During Our Annual Pro Sale. View Details »

DDVE design class. Visual design

Jaanus Kase
December 12, 2011

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.

Jaanus Kase

December 12, 2011
Tweet

More Decks by Jaanus Kase

Other Decks in Design

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