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:


TAGGED WITH:
  • Photo: No More “Breakfast All Day”

  • Custom T-Shirt Designs

  • CSS Grid: Print-To-Web Experiments

  • Slaughter On NY Avenue

  • Frame By Frame Animation

  • National Press Foundation

  • The Corcoran Gallery of Art – Interactive Exhibition Kiosk

  • Resolution No. One

  • The Cary Group

  • Interactive Genealogy Museum

  • Interactive Story Map: Family Burial Plots

  • You’re My Thrill

  • Interactive Deep-Zoom Image (DZI) Batch Image Processor and Gallery


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