CSS Grid lets web and interface designers close the gap in bringing the best of print design to the web and Internet-based screens.
The following are print-to-web experiments I designed as proofs-of-concept for my interactive graphic design students at George Washington University, to show how the worlds of print and web are finally beginning to commingle in a meaningful way.
These are individual, fictional design layouts for print *and* web, most of which are highlighting elements of my sundry skill sets and aptitudes.
In addition to a number of interactive data-driven pieces, there is a print and digital series designed to make the viewer consider his/her life-style choices, driven by statistics on social media, literacy, TV use, and others. Designed for large public screens of the future, such a series is instantly deployable in any language in any city utilizing Internet-based infrastructures.
Digital ads, public notices, interactive maps, animation and more. You can see digital content already playing on subway platform kiosks, bus shelters and digital signage & billboards around the District, albeit with static content. What we’re talking about now features dynamic content.
Each layout was designed for its optimal width, depending on the information hierarchy: some are best when viewed tall like in a full-page magazine ad or metro kiosk screen, while some look better when they are squat, such as on a laptop or iPad in landscape. Either way, the content flows nicely at different widths while maintaining the information hierarchy and look-and-feel, from tiny screens to massive.
All with much less code, thanks to CSS grid.
Print is not dead – click here to take a look. (All photography copyright John Carmody, Washington DC, except for the photos under “I Really Didn’t Mean It”.)[NOTE: this is an ongoing experimental project, always to be considered beta.]