web: experiment with grid #2—Geigy Ircodenyl

Redesign of an ad from 1958 with a dramatic grid design.

Ambitious idea

For my second attempt at playing with css grid, I found this ad from 1958 by Geigy. The crisp use of grid and color seems a natural for translating to digital viewing. Check out the html design at http://sullivanlehdesigns.com/play-examples/geigy-ircodenyl-top.html

Geigy poster for Ircodenyl
Inspiration piece in red, black, and white. The angle makes it dynamic.

My idea was to have the background graphic start with just the center section and grow with more petals as the screen widens. The coffin-like shapes I changed to be ovals, and used <hr> so the code matches the intent.

This design was fun to work on, but was intense trying to have the number of petals increase with screen size, while still keeping the text at a readable size. I ended up  simplifying the design in the live version.

The grids

I brought the inspiration graphic into Illustrator and rotated it to plan out the grids. There are 2 layers: the top layer with text, chiclets, and logo; and the bottom layer with the flower and petals. Each layer uses a unique grid and has elements that will appear depending on screen width.

Each layer has it’s own grid. I’m not going to get into too much detail about grid dimensions because as I type I have a new idea for controlling scaling with browser width—but done is better than perfect so it’s posting as-is for now.

Basically, the top layer controls title, company name, the chiclet row, the 4 lines of text, and the company logo. The lined text/logo section is set to a flex column, so the items are evenly spaced out. The chiclet row is made of <div> sections set to the grid, with visibility of each depending on screen width. Some of the sections have a child grid so the chiclets can appear in more random spacing. The bottom layer controls the flower center and petals.

I played a lot with the grid settings on the two layers so they interact in an elegant way. If you peek at the css of the live page you’ll see some of the measurements I tried.

The original design is in black, red, and white, with red text. But since the design on the web will change with the browser size, the text will overlap the petals so it’s now white. On small screens the design is vertical, and changes to a -30 degree rotation only when the screen is wider than 500px.

Here’s a weird thing: I changed the chiclet color and was going to take new screenshots. But the color of the background .pngs is different between the 2 browsers, which is unexpected. Even the link color on the top right is different, but that might be a font-smoothing issue.

screen shot of side-by-side browser windows of the same page
Left: firefox with a dull red color for the petal graphic files. Right: chrome with a brighter red.