1 / 24

The Second Age of Design

Bringing New Dynamic Typography, Layout and Publishing to the Web. The Second Age of Design. Bill Hill January 2010. Mission. Create a Web publishing tool which brings new, dynamic, high-quality typography, layout and design to the Web using cross-browser, Web-standards markup.

bonner
Download Presentation

The Second Age of Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bringing New Dynamic Typography, Layout and Publishing to the Web The Second Age of Design Bill Hill January 2010

  2. Mission • Create a Web publishing tool which brings new, dynamic, high-quality typography, layout and design to the Web using cross-browser, Web-standards markup

  3. The First Age of Design • Began 35,000 years ago • First Law: Fix the size of space to fill • Cave wall? • Trajan’s Column? • People Magazine (8.5 x 11)? • That choice + viewing distance influenced all subsequent design

  4. Along Comes the Web… • Designers try to drag fixed-space thinking into a world in which all screens are different • Fixed layouts like PDF • Highest Common Factor layout (e.g. 1024 x 768) • Still trapped by expediency decision taken by first browser engineers 16 years ago • Bottomless scrolling window instead of • Paginated content • Harder to do, but suited to human visual perception

  5. Paging v. Scrolling • Scrolling: a horrible thing to do to people who’re trying to read • Always end up reading some lines twice • Only thing worse is flashing stuff at them while they’re trying to read

  6. The Web Design-Layout Disconnect Only the Web Browser has access to all inputs affecting layout. This is where final layout decisions must happen. Web design today: A “best guess” based on the Highest Common Factor. The Web Designer has no actual knowledge of either User Preferences or Device Characteristics. Reader - or Web publisher – cannot be expected to have typographic knowledge of “most readable text” on X device with Y preferences

  7. “Negotiated Settlement” • The ideal layout for any reader on any device is a negotiated settlement between: • Designer preferences • What do I care about, what will I allow to float, what happens on different displays? • Device characteristics • What will the screen support? • Reader preferences • e.g. Large “Print”? • Readability parameters • Homo sapiens Version 1.0

  8. Second Age: A New Tool • Intuitive interface a designer can use • Based on adaptive layout from the outset • Outputs Web-standards HTML and CSS • Enables high-quality typography

  9. New Web Advertising Model • Based on adaptive advertising • Space for ad scales depending on screen size • Content of ad then “scales” • Background graphic scales • Text scales by intelligently pushing out or sucking in more content • The new model: Advertiser pays for % of screenspace • Just like the “old” print model

  10. Microsoft: Silent Partner? • VC funding • Rights to IP (especially adaptive layout) • However: • This is not a product Microsoft could build • Must be designer-driven, with designer credibility • Cross-browser, cross-platform, Web standards • Needs startup mentality + right people

  11. Web Pages Some examples

  12. Tomorrow’s Readable Web • Adaptive layout – display more columns, images etc on larger displays • Grid-based, to control consistency of layout in publishing of online books, magazines, newspapers, annual reports etc. (proposed for CSS 3) • Pagination • Multiple columns • Baseline alignment of text across columns • Column balancing – top, bottom, etc

  13. Reconnect Designer to Reader • Create architecture for Adaptive Layout • based on Web-standards markup • Build tools to let designers create “Adaptive Websites” • Promote the concept • The Web is ready for it • It is already being talked about • WPF and Adobe’s new AIR demonstrate it • But using proprietary formats

  14. Critical missing technologies • Adaptive layout • Decide # of columns • Based on CSS, modified by user preferences and device properties • Grid-based • Snap and scale elements to grid • Pagination • Multi-column layout does not work without pagination • Publishing-quality typesetting & layout

  15. Evolve Web Standards • Evolution of Web standards is idiosyncratic and uneven • “Favorite” features get most attention from individuals • No systematic approach • Little professional publishing input • e. g. Drop Caps are supported in CSS 2.1, but the available parameters for adjustment are missing some of those which a professional designer needs to control • Need to engage with the W3C working groups and bring a professional publishing perspective to the debate

  16. Tools • Adaptive Layout authoring tools do not yet exist • Developer tools like Visual Studio & Expression Web enable creation of Web-standards content but require too much coding • “Tools for the rest of us” (like Office apps) do not create Web standards markup • Do not output clean HTML • Add lots of MS-proprietary code

  17. Backup slides

  18. How We Scan Pictures Saccade Fixation

  19. How Humans Read Text… Saccade Fixation Saccades take 20-50 ms to complete depending upon the length of the movement and virtually no visual information is extracted during eye movements. Between saccades, the eyes remain stationary for brief periods of time (typically 200-250 ms) called Fixations

  20. Reading for Homo sapiens v. 1.0 • There is an optimal column width & text size • Dictated by fovea & reading distance) • Modifiers: • Device characteristics (Screen size & orientation) • User preferences/requirements( (“I like/need larger text”) • Designer preferences (Design/layout/typeface) • “Local modifiers” severely constrain “remote design” • Bottomless scrolling window was “easy solution” for first browser engineers • A cop-out from doing the right (but harder) thing • We are still living with the impact of a decision made almost 20 years ago for reasons of engineering expediency

  21. Readability = Engineering • Tuning visual display of text and graphics to work optimally with human visual perception • High-speed precision scanning machine • Scans four targets of 5-7 characters per second • Uses high-resolution (600dpi) Foveal area of the human retina (0.2mm diameter) • Lower-res Parafoveal area determines next fixation • Muscles which have to move the eyes and focus the lens should not be over-stressed

  22. Improve Today, Create Tomorrow • Game-changing play: • The Readable (paginated) Web

  23. This is Not A “Science Project”! • 550 years of Darwinian evolution since Gutenberg • Problems and solutions are now all known • Character size, shape, spacing, kerning, ligatures… • Word spacing, line length, multiple columns, leading, margins, page size… • Body text 55-65 characters wide at between 9pt (lower limit) and 13pt (upper limit) at normal reading distance • See my paper: The Magic of Reading • http://www.billhillsite.com/osprey.doc

  24. Browser examples, in order • Project Gutenberg Mabinogion • BillHillSiteMabinogion • Future of Reading LiveSpaces • Future of Reading Blogger • BillHillSite blog • Newsweek website Chapter 1 • BillHillSite Chapter 1 • BillHillSite MD Chapter 1

More Related