The Technology Behind Great Digital Design

3,167 views

Published on

A brief introduction to the technologies behind digital design, which I recently presented at The Ontario College of Art & Design (OCAD) in Toronto.

Published in: Design, Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,167
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

  • Intro
  • Many technologies available online
    Some client-side, some server-side.

    Boil this down to what matters to designers
  • There are 2 fundamental aspects of digital design
  • There are 2 fundamental aspects of digital design
  • The area the bridges the two is called “Markup”. There are many different technologies available, but



  • These are the building blocks of the internet














  • CSS as it refers to the Elements of Design
  • Type is the use of letterform to add a message that would be otherwise challenging to create through the other elements.
  • Type is the use of letterform to add a message that would be otherwise challenging to create through the other elements.
  • Type is the use of letterform to add a message that would be otherwise challenging to create through the other elements.





























  • Form is any three dimensional object. Form can be measured, from top to bottom (height),side to side(width),and from back to front(depth).










  • CSS as it refers to the Elements of Design










  • The Technology Behind Great Digital Design

    1. 1. THE TECHNOLOGY BEHIND MODERN DIGITAL DESIGN
    2. 2. HTML CSS JAVASCRIPT PHP PACHE RUBY ACTIVEX FLAS CTIONSCRIPT JAVA .NET AS ERL PYTHON AJAX JSON RES SOAP COLDFUSION LINUX YSQL JQUERY XML MOOTOO DHTML SVG FLEX RSS ATOM
    3. 3. DESIGN
    4. 4. DESIGN DEV
    5. 5. DESIGN MARKUP DEV
    6. 6. DESIGN WITH CODE
    7. 7. HTML 5
    8. 8. CSS 3
    9. 9. JS
    10. 10. WHAT DOES MARKUP HAVE TO DO WITH DESIGN?
    11. 11. MARKUP MAKES DESIGN FLEXIBLE & USABLE ONLINE
    12. 12. 1. Easier to update 2. Easier to manipulate 3. Content is portable 4. Text is selectable 5. Indexable by search engines
    13. 13. “ ”
    14. 14. “SHIT, DO I HAVE TO LEARN HOW TO CODE? ”
    15. 15. NO
    16. 16. UNDERSTAND FUNDAMENTALS ( BUT YOU’RE MORE VALUABLE IF YOU CAN CODE & DESIGN )
    17. 17. HTML (STRUCTURE)
    18. 18. CSS (STYLE) HTML (STRUCTURE)
    19. 19. JS (LOGIC) CSS (STYLE) HTML (STRUCTURE)
    20. 20. HYPERTEXT MARKUP LANGUAGE
    21. 21. DOCUMENT STRUCTURE
    22. 22. DEFINE THE BUILDING BLOCKS
    23. 23. HTML (STRUCTURE)
    24. 24. CSS (STYLE) HTML (STRUCTURE)
    25. 25. Cascading Style Sheets
    26. 26. De ne the style of page elements
    27. 27. Typography
    28. 28. The web has Arial been scarred Times by horrible Courier typography Verdana
    29. 29. Before, you had to employ an image, sIFR or Cufón for non-standard fonts
    30. 30. @font-face changes that
    31. 31. Colour ( well, transparency )
    32. 32. PNGs no more
    33. 33. RGBA
    34. 34. RGBA
    35. 35. Structure
    36. 36. Grid systems are nally being used
    37. 37. And you don’t have to rely on tables
    38. 38. Space & Balance
    39. 39. Absolute Positioning
    40. 40. Form
    41. 41. Screen resolution de nes the sandbox
    42. 42. The browser window is your actual canvas
    43. 43. 1,920 1,200
    44. 44. 1,920 1,200
    45. 45. ?
    46. 46. The canvas is never the same size
    47. 47. Fixed width vs Fluid width
    48. 48. CSS (STYLE) HTML (STRUCTURE)
    49. 49. JS (LOGIC) CSS (STYLE) HTML (STRUCTURE)
    50. 50. JavaScript
    51. 51. Manipulate the page elements
    52. 52. Provide intelligence
    53. 53. Animation
    54. 54. jQuery or MooTools ( or any other framework )
    55. 55. MODERN BROWSERS
    56. 56. firefox chrome safari “gecko” “webkit”
    57. 57. RESPECT THE CODE
    58. 58. THANKS

    ×