Relearn 2017 1 EXAMPLE OF CONTENT TO BE DESIGNED text image headline background 2 CODE body structure (html) style & ornament (css) + interactions (js…) DESIGN SOFTWARE/INTERFACE Ornament & body structure are at the same place -> direct & intuitive link -> what is annoying for them is not to have content showing next to the styling -> still using the paradigm of the page to fill with visual content 3 « Print vs. electrons Imposition vs. Sorting with tags » (Alessandro Ludovico, Post-digital print) -> some nice anecdots still useful -> emphasis the fact that imposition is still a manual process 4 U+2580 ▀ Upper half block U+2581 ▁ Lower one eighth block U+2582 ▂ Lower one quarter block U+2583 ▃ Lower three eighths block U+2584 ▄ Lower half block U+2585 ▅ Lower five eighths block U+2586 ▆ Lower three quarters block U+2587 ▇ Lower seven eighths block U+2588 █ Full block U+2589 ▉ Left seven eighths block U+258A ▊ Left three quarters block U+258B ▋ Left five eighths block U+258C ▌ Left half block U+258D ▍ Left three eighths block U+258E ▎ Left one quarter block U+258F ▏ Left one eighth block U+2590 ▐ Right half block U+2591 ░ Light shade U+2592 ▒ Medium shade U+2593 ▓ Dark shade U+2594 ▔ Upper one eighth block U+2595 ▕ Right one eighth block U+2596 ▖ Quadrant lower left U+2597 ▗ Quadrant lower right U+2598 ▘ Quadrant upper left U+2599 ▙ Quadrant upper left and lower left and lower right U+259A ▚ Quadrant upper left and lower right U+259B ▛ Quadrant upper left and upper right and lower left U+259C ▜ Quadrant upper left and upper right and lower right U+259D ▝ Quadrant upper right U+259E ▞ Quadrant upper right and lower left U+259F ▟ U+25F0 ◰ White square with upper left quadrant U+25F1 ◱ White square with lower left quadrant U+25F2 ◲ White square with lower right quadrant U+25F3 ◳ White square with upper right quadrant U+25A4 ▤ Square with horizontal fill U+25A5 ▥ Square with vertical fill U+25A6 ▦ Square with orthogonal crosshatch fill U+25A7 ▧ Square with upper left to lower right fill U+25A8 ▨ Square with upper right to lower left fill U+25A9 ▩ Square with diagonal crosshatch fill ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉▊▋▌▍▎▏▐ ░ ▒ ▓ ▔ ▕ ▖▗ ▘▙ ▚ ▛ ▜▝ ▞ ▟ Use unicode characters as a visual and intuitive representation of the designed elements Width of blocks based on grid ▌half of the page (1/2 column) ▎one fourth of the page (1/4 column) ▝ one fourth of the page (top right corner) etc. Position in page ◰ align to left top corner of page ◱ align to bottom left corner of page ◲ align to bottom right corner of page ◳ align to right top corner of page Crosshatched elements for a bitmap like background pattern (cf: illustrator’s default ▤ ▥ ▦ ▧ ▨ ▩ level of transparency ░ 25% ▒ 50% ▓ 75% ? ⇱ ⇲ Drawing shapes ▭ rectangle △ triangle □ rectangle ○ circle Box drawing ╀┤┠─┐ ╀╀╀╀╀╮ ┠─┐┼ ┆┆┆┆ EXAMPLES (???) BELOW ▌◰ ▨ In this book, Alessandro Ludovico re-reads the history of the avantgarde arts as a prehistory of cutting through these dichotomies. He shows how contemporary forms of networked publishing – using whichever medium or technology – were in fact prefigured by 20th and 21st century artists and their media experiments.