Graphic Design: CSS Grid Print-To-Web Experiments

CSS Grid lets web and interface designers close the gap in bringing the best of print design to the web and Internet-based screens.

Click here to see some modern 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.]


Experiment Screengrabs: