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:

  • Interactive StoryMap: Bus Trip Across America, pt 1

  • Original Song: I Really Didn’t Mean It

  • Interactive JavaScript Game: O No!

  • WordPress Dev & Design: National Press Foundation

  • WordPress Dev & Design: More Than Cancer

  • Interactive StoryMap: Life on the Mississippi

  • Deep-Zoom Image: The Five Points, 1827

  • Photo: No More “Breakfast All Day”

  • Graphic Design: Custom T-Shirts

  • Interactive Family History: Genealogy Museum

  • Graphic Design: CSS Grid Print-To-Web Experiments

  • WordPress: The Cary Group

Client Case Study:
The National Press Foundation

I was hired to build the National Press Foundation a brand new website featuring a state-of-the-art digital asset management system allowing the foundation to deliver streamlined interactive educational experiences to the national and international journalists making up its target audience.

READ MORE about the interesting, successful NPF project