In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we’ll explore just that.

For the past few years, books about HTML and CSS have almost vanished from my studio bookshelves. I replaced them with books on art direction, editorial, and graphic design.

Recently, I was browsing a new addition to my library and was captivated by one magazine spread. I loved the way its designer has playfully combined images and typography to create a design which was full of energy and movement. To remind myself to take another look at this design, I snapped a picture of it with my iPhone.

When I first saw that striking design, I hadn’t heard of the designer who’d created it, Brooklyn-born Otto Storch. Although he was an award-winning graphic designer, unlike many of his contemporaries, Storch and his work have been largely overlooked.

Storch amassed a vast body of work, and it’s an incredible shame that his work isn’t more widely known, especially online. There’s no Wikipedia page devoted to Storch, and no one has published a book about him or his work.

I’m not only influenced by Otto Storch’s work, but also by the fact he was a prolific designer with a strong work ethic. I’m inspired by how he took what he’d learned from Alexey Brodovitch, combined it with his approach to design, and made distinctive and engaging work. I hope I can do that too.

A selection of covers from Otto Storch’s time as art director for McCall’s Magazine.
A selection of covers from Otto Storch’s time as art director for McCall’s Magazine. (Large preview)

I’ve never heard Otto Storch‘s name mentioned during a design conference or seen him referenced in a book about web design. But discovering him has made me want to make more people aware of the man and his work.

He’s also made me consider the role of creativity in an industry which is business focussed, fast-moving, and has practical as well as technical constraints. Publishing can be a cut-throat business, and the magazines Storch worked on weren’t high-fashion. What he made wasn’t art, but that didn’t mean it wasn’t creative. Storch understood that ideas are as essential to effective communication as pictures and the written word. Throughout his career, Storch worked hard to include ideas despite the limitations of his medium. That’s an approach which is as essential on the web today as it was in magazines in the 1960s.

Previously On “Inspired Design Decisions”

More From The “Inspired Design Decisions” Series

  1. Inspired Design Decisions: Avaunt Magazine
  2. Inspired Design Decisions: Pressing Matters
  3. Inspired Design Decisions: Ernest Journal
  4. Inspired Design Decisions: Alexey Brodovitch
  5. Inspired Design Decisions: Bea Feitler
  6. Inspired Design Decisions: Neville Brody

Inspired By Otto Storch

Otto Storch was born in 1913, and during the 1930s, he began his career in the forgotten art of pre-digital photographic retouching. During the 1950s, Storch took evening classes and studied design under Alexey Brodovitch who encouraged him to get a job working on a magazine.

Success didn’t happen overnight, and it took seven years of freelancing before Storch Better Living magazine in New York hired him as an assistant art director. McCall published several titles including Popular Mechanics, Blue Book and Red Book, and McCall’s Magazine itself. Storch moved to McCall’s Magazine where he built on what he’d learned from Brodovitch and his experience designing advertising materials, album covers, book covers, and magazines.

Storch wasn’t afraid to make opinionated choices and its this assertiveness which makes much of his work distinctive.

“Good art direction does not come from an uncertain person. I am capable of intense feeling and was willing to lose a popularity contest with departmental editors when necessary. The visual responsibility of the magazine was mine.”

— Otto Storch

Like Bea Feitler, Storch carried on Alexey Brodovitch’s legacy of imaginative magazine layouts. He understood the double-page spread is a creative canvas and made it a feature of his work, sometimes by allowing elements to flow between pages. Other times, Storch made the gutter an integral part of his design.

Storch often used large headlines and images to unify his spreads. For ‘On the cob or off,’ its a corn cob which drips butter on both pages. For another feature, ‘The Forty-winks reducing plan,’ he allowed his subject to stretch out, resting on a bed of running text. This copy sinks under the weight of the sleeping model.

The Forty-winks Reducing Plan. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke.
The Forty-winks Reducing Plan. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke. (Large preview)

The large black-and-white graphic in ‘Why teen-age marriages are falling apart’ isn’t confined to just one page. Instead, it occupies three out of four columns on the spread and so dominates the design. The gravity of a headline in the middle of those concentric circles pulls the eye towards it.

Why Teen-Age Marriages Are Fally Apart. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke.
Why Teen-Age Marriages Are Fally Apart. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke. (Large preview)

In ‘Girls Are Silly, Aren’t Boys Awful,’ Storch placed two children forehead to forehead with the gutter between them. He emphasised this tension by aligning his text in opposite directions.

Girls Are Silly, Aren’t Boys Awful. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke.
Girls Are Silly, Aren’t Boys Awful. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke. (Large preview)

Storch made combining images and text look obvious and effortless, but the results he achieved came from years of experience and practice.

For ‘Make fashions fresh as paint,’ Storch’s tightly packed text fits perfectly into a compartment in an artist’s paintbox. The models in this spread for McCall’s Patterns also fit inside the box. Storch’s playful and unexpected use of scale adds yet another dimension to this design.

Make Fashions Fresh as Paint. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke.
Make Fashions Fresh as Paint. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke. (Large preview)

Storch believed that in editorial design, a strong idea, copy, images, and typography are integral. I think the same is true in web design, despite its apparent differences to print.

Storch understood typography could do much more than present readable content and he had a knack for turning type into graphical objects. In print design for left-to-right languages, the left page is called “verso”, and the right is called “recto.” For McCall’s extract of a book called ‘The First to Know,’ Storch mirrored the recto and verso pages, then set his text into a circle which reflects the circular telephone dial.

The First to Know by Louella Parsons. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke.
The First to Know by Louella Parsons. Spread from McCall’s Magazine Art direction by Otto Storch. Recreated by Andy Clarke. (Large preview)

There’s plenty Otto Storch, and his designs can teach us about the work we do on the web today. Like Alexey Brodovitch, Storch’s mastered his canvas and rather than be limited by it; he used his pages to present content in ways which made it not just understandable, but also more appealing. This appeal matters, because it connects people with a brand, a product, or a story, and that matters to any business, whatever the medium.

Otto Storch might be a new addition to my list of inspiring designers, but his designs are already influencing mine.

Shape up

The W3C’s CSS Shapes Module Level 1 has been a Candidate Recommendation recommendation since 2014, and all contemporary desktop and mobile browsers have implemented its shape-outside, shape-margin, and shape-image-threshold properties.

[src="https://www.smashingmagazine.com/shape.png"] { float: left; shape-outside: url(shape.png); shape-margin: 20px; }
It’s rare to see CSS Shapes used for anything more elaborate than wrapping text around images, like this.
It’s rare to see CSS Shapes used for anything more elaborate than wrapping text around images, like this. (Large preview)

Web designers aren’t aware of the creative potential offered by CSS Shapes, and that there’s no longer a reason to not use them. It’s also possible web developers still think Shapes have poor support in browsers. Still, with all contemporary browsers now supporting Shapes — and their properties degrading gracefully in legacy browsers — there’s currently no reason to avoid using them.

Do More With Shapes

This design by Otto Storch was one of the first to get my attention. I admired the structural simplicity of its two justified columns of copy, and how the placement of his images — with text wrapped around them to create organic shapes — playfully filled the page with energy and movement.

Left: By a Stroke of Beauty. Spread from McCall’s Magazine Art direction by Otto Storch. Right: This movement- filled design uses CSS Shapes and the HTML picture element.
Left: By a Stroke of Beauty. Spread from McCall’s Magazine Art direction by Otto Storch. Right: This movement- filled design uses CSS Shapes and the HTML picture element. (Large preview)

I rarely see layouts with this kind of energy online, so my design includes four brightly coloured Beetles, each Volkswagen placed at an angle to contrast with the two tall columns of text. I need only two structural elements to implement this Storch-inspired design; the main element and an aside. Each of these elements contains paragraphs of running text, plus two picture elements which enable me to swap small images for larger ones:

These picture elements fit to the edges of small screens, but I still need whitespace on both sides of my paragraphs of running copy. By using viewport width units, that space always remains in proportion to those screens:

p { margin-right: 10vw; margin-left: 10vw; }
I cropped these pictures to make them the appropriate size for small screens.
I cropped these pictures to make them the appropriate size for small screens. (Large preview)

The picture element is one of the most useful additions to HTML. By combining media queries with multiple images, a browser can select an image which is most appropriate for a layout.

Structural elements stack vertically and I introduce larger images for medium-size screens.
Structural elements stack vertically and I introduce larger images for medium-size screens. (Large preview)

I use the media property and min-width value most often, and while this design requires only two images per picture element, its possible to add more images and even combine media values to create complex queries:

Volkswagen Beetle

The images in these pictures contain cropped versions of my Beetles which are best suited to small screens. I apply the same width to all my images, then add a shape-margin in preparation for the CSS Shapes which come next:

picture { width: 160px; shape-margin: 20px; }
Shapes from images are often easier and quicker to implement than using polygon coordinates.
Shapes from images are often easier and quicker to implement than using polygon coordinates. (Large preview)

I find shapes from images easier and quicker to implement than using polygon coordinates. To develop a shape from an image, it needs an alpha channel which is wholly or partially transparent. When images are partially transparent, the shape-image-threshold property can control the areas which form the shape.

I can use the same image for more than one shape. Even though my design includes four differently coloured cars, I need just two shape images:

main picture:first-of-type, aside picture:first-of-type { float: left; shape-outside: url(shape-1-sm.png); }  main picture:last-of-type, aside picture:last-of-type { float: right; shape-outside: url(shape-2-sm.png); }

With my small screen design complete, I introduce larger images for medium size screens as well as shape images to match. I apply new widths for the images to fit larger screens:

@media (min-width: 48em) {  main picture:first-of-type { width: 290px; shape-outside: url(shape-1-lg.png); }  main picture:last-of-type { width: 230px; shape-outside: url(shape-2-lg.png); }  aside picture:first-of-type { width: 230px; shape-outside: url(shape-3-lg.png); }  aside picture:last-of-type { width: 290px; shape-outside: url(shape-4-lg.png); } }
This design doesn’t just tell the story of the Volkswagen Beetle, its layout hints at how fun this iconic car was to drive.
This design doesn’t just tell the story of the Volkswagen Beetle, its layout hints at how fun this iconic car was to drive. (Large preview)

Although my design for larger screens might look complex at first glance, the layout couldn’t be simpler, and those main and aside elements form two symmetrical columns:

@media (min-width: 64em) {  body { display: grid; grid-template-columns: 1fr 1fr; } }

Whitespace plays a big part in this large screen design. With those columns introduced, the 10vw horizontal margins I applied to my paragraphs earlier means that whitespace comprises 40% of this layout.

Just as Otto Storch used his pages to present content in ways which made it appealing as well as understandable, this design doesn’t just tell the story of the Volkswagen Beetle, its layout hints at how fun this iconic little car was to drive.

Make text look delicious

Like Brodovitch, Otto Storch excelled in combining images with text, and he often carved copy into shapes which mirrored them. In this design, Storch created a delicious text block shaped like a glass. We rarely find techniques like this used online, but they can help to draw readers into a story whatever the medium. Inspired by Storch, for my next design, I sculpted my copy to reflect the shape of a Volkswagen Beetle.

I sculpted my copy to reflect the shape of a Volkswagen Beetle.
I sculpted my copy to reflect the shape of a Volkswagen Beetle. (Large preview)

My design includes three alternative layouts. A single column of scrolling content for small screens, a 2×2 grid for medium screens, and a large screen design with a horizontally scrolling content area.

There are four structural elements needed to implement these three designs, one main element for my content, plus large images of three brightly coloured Beetles. I enclose these elements with a section, then add a decorative, presentation division which represents a tarmac road:

Get bitten by the bug

Volkswagen BeetleVolkswagen Beetle
 
The finished small screen design.
The finished small screen design. (Large preview)

I don’t need my horizontally scrolling panel to appear on small screens, so add only foundation styles and shapes which sculpt my text into the shape of a Beetle. I start by aligning paragraph text to the centre, and setting it in uppercase. While I wouldn’t normally set text an entire block of text in this way, the solid uppercase letterforms help to emphasise the Beetle shape:

p { text-align: center; text-transform: uppercase; }

Early drafts of the CSS Shapes specification included a shape-inside property which would’ve enabled us to wrap text on the inside of shapes as Storch did. I’m disappointed that the W3C postponed this feature until CSS Shapes Module Level 2 which is still an Editor’s Draft. You can achieve similar effects using shape-outside, but I, for one, can’t wait until we can use type as creatively as Otto Storch online.

Two alpha-transparent PNG images create the classic Beetle shape.
Two alpha-transparent PNG images create the classic Beetle shape. (Large preview)

I add two shape images to my paragraph. Text will flow between these images to mirror the face of a Beetle:

I specify dimensions for these two images and set their opacity to zero as I don’t want them seen by a viewer:

p img { width: 100px; height: 125px; opacity: 0; }

These images are purely presentational and convey no content or meaning, so to remove any semantics from them, I add role attributes. To take them out of from the accessibility tree, I also add aria-hidden attributes to these two images:

To carve my text into the shape of the iconic Volkswagen, I apply shape-outside using the same two images, floating the first image left and the second to the right:

p img:nth-of-type(1) { float: left; shape-outside: url(shape-l.png); }  p img:nth-of-type(2) { float: right; shape-outside: url(shape-r.png); }

I don’t want my presentation division visible to assistive technologies either, so I add those same role and aria-hidden attributes to this too:

As I don’t need the division to be visible to people using small screens, I set its display property to none:

div { display: none; }
-46f01eedd629 / a7008e27-7863-40e3-84c6-5ee759307c66 / 16-inspired-design-besluiten-otto-storch.png “> Een symmetrisch 2x2-raster met tekst in de iconische vorm van de Volkswagen Beetle op medium -formaat schermen.
Een symmetrisch 2×2-raster met tekst in de iconische vorm van de Volkswagen Kever op middelgrote schermen. (Groot voorbeeld)

Mijn kleine schermontwerp is stijlvol, zoals de Kever, maar de extra ruimte beschikbaar op middelgrote Met schermen kan ik mijn gebeeldhouwde tekst naast de afbeeldingen plaatsen die het imiteert.

 Voordat ik een ontwerp implementeer, maak ik een storyboard.

Voordat ik een ontwerp implementeer, maak ik een storyboard. (Groot voorbeeld)

Voordat ik een ontwerp implementeer, maak ik een storyboard om te beslissen hoe elementen moeten worden herschikt als de schermformaten veranderen. Voor middelgrote schermen plaats ik mijn vier elementen in een 2×2 symmetrisch kolomraster. Door minmax-waarden te gebruiken voor het dimensioneren van deze kolommen, zorg ik ervoor dat ze alle beschikbare ruimte vullen, maar hun breedte krimpt nooit onder 400px:

@media (min-width: 48em) {  sectie { display: raster; grid-template-columns: minmax (400px, 1fr) minmax (400px, 1fr); grid-gap: 2vw; align-items: end; } }

Voor grotere schermen heb ik ook twee rijen nodig. Ze moeten even hoog zijn en alle beschikbare verticale ruimte innemen:

@media (min-width: 64em) {  lichaam { display: raster; grid-template-rijen: 1fr 1fr; }

Een groot, horizontaal scrollend inhoudsgebied domineert dit ontwerp en is breder dan de viewport. Het paneel bevat vier kolommen – drie voor afbeeldingen en één voor mijn gebeeldhouwde kopie – en elke kolom is minimaal 400 px breed. Door de maximale breedte van de viewport in te stellen en alleen op de horizontale as te laten scrollen, is alle inhoud die buiten de viewport ligt verborgen maar nog steeds toegankelijk:

section { grid-template-columns: herhaal (4, minmax (400px, 1fr)); max-breedte: 100vw; overflow-x: scrollen; }
 Een presentatie-indeling die de weg voorstelt onder de wielen van mijn Kever-vormen.
Een presentatie-indeling die de weg vertegenwoordigt onder de wielen van mijn Beetle-vormen. (Groot voorbeeld)

Onder mijn inhoud is een presentatie-indeling die de weg onder de wielen van mijn Kever-vormen vertegenwoordigt. Dit element is onzichtbaar op kleinere schermformaten, dus om het zichtbaar te maken, verander ik de weergave-eigenschap van geen in blokkeren en voeg dan een lichtgrijze achtergrondkleur toe. De rastereigenschappen die ik eerder op het body-element heb ingesteld, definiëren de hoogte van deze divisie:

div { display: blok; achtergrondkleur: # a73448; } }

Dave Hyatt van Webkit stelde oorspronkelijk al in 2008 CSS Reflections voor, maar tot nu toe zijn ze nog niet geïmplementeerd in andere browser-rendering-engines. CSS-reflecties worden momenteel alleen ondersteund door Google Chrome.

Zoals je je misschien kunt voorstellen, creëren reflecties een kopie van een element. Een reflectie kan boven, onder of links of rechts verschijnen. Net als in de fysieke wereld, wanneer een element op de een of andere manier verandert, volgt de reflectie ervan.

Er zijn drie experimentele eigenschappen beschikbaar voor CSS-reflecties. De richting en een optionele offset die de afstand tussen een element en zijn reflectie regelt. Je kunt ook een masker op elke reflectie toepassen om het uiterlijk te veranderen, bijvoorbeeld door een verloopmasker te gebruiken om de intensiteit van een reflectie geleidelijk te laten vervagen.

CSS-reflecties hebben beperkte ondersteuning in browsers, maar ze kunnen nog steeds voeg een extra dimensie toe aan een ontwerp voor browsers die deze hebben geïmplementeerd. Ik wil alleen reflecties toevoegen wanneer een browser ze ondersteunt en wanneer het scherm groot genoeg is om ze volledig te gebruiken.

 CSS Shapes vormen tekst in dit heerlijke ontwerp.
CSS-vormen geven tekst vorm in dit heerlijke ontwerp. (Groot voorbeeld)

Om het resultaat te bereiken dat ik zoek, gebruik ik geneste media en functiequery’s die eerst de minimale breedte van een viewport testen en vervolgens of een browser ondersteunt-webkit-box-reflect: below. Ik voeg de reflecties toe en verander de kleur van mijn presentatie-indeling van rood naar grijs:

@media (min-width: 64em) { @supports (-webkit-box-reflect: hieronder) {  sectie { -webkit-box-reflect: onder 0 lineaire gradiënt (transparant, wit); }  div { achtergrondkleur: # f0f0f1; } } }

Spiegelsymmetrie

Deze opvallende zwart-rode spread van McCall’s Patterns is een van Storch’s meest onderscheidende ontwerpen. Er is een geruststellende symmetrie aan de lay-out en hoe Storch dezelfde kleuren gebruikte op de twee pagina’s. Ik voelde me onmiddellijk aangetrokken tot zijn ontwerp en wil een soortgelijk effect bereiken.

 Een speelse maar geruststellende symmetrie in dit grote schermontwerp.
Een speelse maar geruststellende symmetrie in dit grote schermontwerp. (Groot voorbeeld)

De HTML die ik nodig heb om dit ontwerp te implementeren, kan niet eenvoudiger. Slechts twee structurele elementen, een hoofd- en een terzijde, die beide beeldelementen bevatten:

...

...

...

...

Deze hoofd- en opzij-elementen bevatten ook elk een alinea met tekst. Om de rotaties die nodig zijn voor dit ontwerp te bereiken, wikkel ik elke tekstregel in een spanelement. Ik wou dat er een beter, meer semantisch alternatief was voor deze presentatie-elementen, maar zonder aanvullende stijlen verstoren ze de leesbaarheid van mijn alinea’s niet:

Hoewelontworpen in deJaren '30 vanwegeTweede Wereldoorlog,civiele keversbegon pasworden geproduceerd insignificantnummers door deeind jaren veertig.

Ik begin met het aanbrengen van een donkergrijze achtergrondkleur op het body-element:

body { achtergrondkleur: # 262626; }
 Delen van een ontwerp spiegelen op kleine schermen om een ​​consistente ervaring te creëren over alle schermformaten.
Onderdelen van een ontwerp spiegelen op kleine schermen om een ​​consistente ervaring te creëren op alle schermformaten . (Groot voorbeeld)

Vervolgens zorgt een minimale hoogte ervoor dat mijn hoofd- en naastliggende elementen altijd de hoogte van het kijkvenster vullen. Om hun inhoud zowel horizontaal als verticaal te centreren, pas ik flexbox-eigenschappen toe en stel ik hun richting in op kolom:

main, terzijde { beeldscherm: flex; flex-richting: kolom; justify-content: center; align-items: center; min-hoogte: 100vh; opvulling: 2rem 0; box-sizing: border-box; kleur: #fff; }

Ik wil dat de kleur van mijn hoofdkever overeenkomt met het volgende paneel, dus ik heb de achtergrondkleur op hetzelfde rood gezet:

terzijde { achtergrondkleur: # a73448; }

Terwijl lange passages met hoofdletters in het algemeen moeilijker te lezen zijn dan die in gemengde letters, is hoofdletters geschikt voor kortere stukken en kan een stijlvolle look creëren:

p { marge: 0 2rem; text-align: center; text-transform: hoofdletters; }
 Structurele elementen stapelen verticaal en ik introduceer grotere afbeeldingen voor middelgrote schermen.
Structurele elementen stapelen verticaal en ik introduceer grotere afbeeldingen voor middelgrote schermen. (Groot voorbeeld)

In mijn ontwerp met een klein scherm stapelen de hoofd- en opzij gelegen elementen verticaal en hun hoogte komt overeen met die van de viewport. Voor middelgrote schermen stel ik de minimumhoogte van die elementen opnieuw in om de helft van het kijkvenster te vullen:

@media (min-width: 48em) {  hoofd, terzijde { min-hoogte: 50vh; opvulling: 2rem; }

Door de extra beschikbare ruimte op middelgrote schermen kan ik mijn alinea’s opmaken door de schrijfmodus te wijzigen, zodat hun tekst verticaal wordt weergegeven en van rechts naar links wordt gelezen:

p { max-hoogte: 12em; marge: 0; text-align: left; schrijfmodus: verticaal-rl; }

Door de weergave-eigenschap van deze span-elementen te wijzigen, wordt mijn alinea opgesplitst in meerdere regels. Vervolgens voegt regelhoogte ruimte toe tussen de lijnen, waardoor er ruimte is voor mijn rotaties:

p span { display: blok; lijnhoogte: 2; }
 Voordat ik een ontwerp implementeer, maak ik een eenvoudig storyboard om te laten zien hoe mijn elementen over een selectie van schermformaten zullen stromen.
Voordat ik een ontwerp implementeer, maak ik een eenvoudig storyboard om te laten zien hoe mijn elementen zullen stromen over een selectie van schermformaten. (Groot voorbeeld)

Transformaties, waaronder roteren, schalen en vertalen, maken al bijna twee decennia deel uit van CSS. Het gebruik van transformatie omvat het toevoegen van een transformatiefunctie zoals roteren en vervolgens een waarde tussen haakjes.

Om het effect te bereiken waarnaar ik op zoek ben; Ik draai de eerste zes regels van mijn tekst vijftien graden tegen de klok in. De laatste zes regels worden evenveel gedraaid, maar met de klok mee. Alle resterende regels blijven ongewijzigd:

p span: nth-child (-n   6) { transformeren: roteren (-15deg); }  p span: nth-child (n   12) { transformeren: roteren (15deg); }

In de toekomst zul je functies zoals roteren onafhankelijk van de transformatie-eigenschap kunnen gebruiken, maar terwijl ik dit schrijf, heeft alleen Firefox individuele transformaties geïmplementeerd.

Om ruimte te maken voor mijn gedraaide tekst, voeg ik marges toe aan twee van mijn regels:

p span: nth-child (6) { marge links: 1em; }  p span: nth-child (12) { marge-rechts: 1em; } }

Dit ontwerp wordt opvallender met de beschikbare ruimte op grote schermen. Voor hen pas ik rasterwaarden toe op het body-element om twee symmetrische kolommen van gelijke hoogte te maken:

@media (min-width: 64em) {  lichaam { display: raster; grid-template-kolommen: 1fr 1fr; }

Ik pas een symmetrisch raster met drie kolommen toe op zowel hoofd- als opzij gelegen elementen die zich beide uitstrekken tot de volledige viewport-hoogte:

main, terzijde { display: raster; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; opvulling: 2rem; min-hoogte: 100vh; }

Ik heb de hoofdafbeelding over de tweede en derde kolom verdeeld en de afbeelding terzijde naar de eerste en tweede kolom:

hoofdafbeelding { rasterkolom: 2 / -1; grid-rij: 1; opvulling: 0 5vw; }  opzij foto { rasterkolom: 1/3; opvulling: 0 5vw; }

Ik plaats de alinea’s in de overige kolommen en door alle elementen hetzelfde rijnummer te geven, blijven ze op dezelfde regel staan, ongeacht de bronvolgorde:

main p { rasterkolom: 1; grid-rij: 1; }  opzij p { rasterkolom: 3; }

In deze versie van mijn ontwerp moet de tekst van boven naar beneden lopen in plaats van van rechts naar links, dus ik reset de schrijfmodus naar horizontaal, van boven naar beneden en lijn vervolgens de tekst uit aan de rechterkant:

main p, opzij p { max-hoogte: geen; schrijfmodus: horizontaal-tb; }  belangrijkste span { text-align: right; }
 Een speelse maar geruststellende symmetrie in dit grote schermontwerp.
Een speelse maar geruststellende symmetrie in dit grote schermontwerp. (Groot voorbeeld)

Ten slotte vervang ik de rotatiewaarden en marges op mijn tekstregels om beter te passen bij dit ontwerp op groot scherm:

main p span: nth-child (-n   6) { transformeren: roteren (10deg); }  main p span: nth-child (n   12) { transformeren: roteren (-10deg); }  main p span: nth-child (6) { marge: 0 0 15px; }  main p span: nth-child (12) { marge: 15px 0 0; }  opzij p span: nth-child (-n   6) { transformeren: roteren (-10deg); }  opzij p span: n-kind (n   12) { transformeren: roteren (10deg); }  opzij p span: nth-child (6) { marge: 0 0 15px; }  opzij p span: nth-child (12) { marge: 15px 0 0; } }

Kolommen overspannen

Voor veel van zijn meest gedenkwaardige ontwerpen liet Otto Storch grote afbeeldingen en typografische elementen over twee pagina’s verspreiden. Deze techniek zorgde voor opvallende spreads, waaronder deze waarbij hij een boterachtige maïskolf op twee kolommen met uitgevulde tekst plaatste.

 Een botergele Kever zit bovenop twee kolommen van lopende tekst.
Een botergele Kever zit bovenop twee kolommen met doorlopende tekst. (Groot voorbeeld)

Ik wil een soortgelijk opvallend effect voor mijn uiteindelijke op Kever gebaseerde ontwerp, en om het te implementeren heb ik slechts drie structurele elementen nodig; een koptekst – met een SVG-logo, een kop en een afbeelding van mijn gele Volkswagen – en hoofd- en terzijde elementen:

...

Word gebeten door de bug

...
...

Normale flow plus een paar basisstijlen zijn alles wat ik nodig heb om de kleine schermversie van dit ontwerp te implementeren. Eerst voeg ik een donkere achtergrond toe en geef ik witte tekst op:

body { opvulling: 2rem; achtergrondkleur: # 262626; kleur: #fff; }
 Het toevoegen van een horizontaal scrollend paneel is een van mijn favoriete ontwerptechnieken voor kleine schermen.
Het toevoegen van een horizontaal scrollend paneel is een van mijn favoriete ontwerptechnieken voor kleine schermen. (Groot voorbeeld)

Om de kop in het midden van de pagina te plaatsen, pas ik marges toe, stel ik de maximale breedte in met op tekst gebaseerde eenheden en lijn ik de hoofdletters uit woorden in het midden:

h1 { marge: 0 auto 1.5rem; max-breedte: 8rem; text-align: center; text-transform: hoofdletters; }

In plaats van het formaat van afbeeldingen aan te passen, zodat ze in een smal kijkvenster passen, laat ik ze vaak daarbuiten verspreiden en voeg ik een horizontaal schuifpaneel toe. Deze techniek is een van mijn favoriete ontwerpapparaten voor kleine schermen.

Deze afbeelding bevat een afbeelding die breder is dan de viewport en het volledige profiel van de auto bevat, inclusief de wielen. Dooroverflow-x: scroll;aan de figuur toe te voegen, maak ik delen van de afbeelding buiten de viewport toegankelijk:

figure { overflow-x: scrollen; }
 Een smalle kolom tekst benadrukt de verticale as in dit middelgrote schermontwerp.
Een smalle kolom tekst benadrukt de verticale as in dit middelgrote schermontwerp. (Groot voorbeeld)

Hoewel middelgrote schermen veel van die basisstijlen overnemen, wil ik, wanneer er meer ruimte beschikbaar komt, de verticale as in het ontwerp benadrukken door het creëren van een smalle kolom tekst met brede viewport-gebaseerde marges. Ik heb ook de overloop van figuurelementen gereset om alle inhoud zichtbaar te maken:

@media (min-width: 48em) {  figuur { overflow-x: zichtbaar; }  p { marge-rechts: 25vw; marge-links: 25vw; } }
 Een botergele Kever zit bovenop twee kolommen met doorlopende tekst.
Een botergele Kever zit bovenop twee kolommen met doorlopende tekst. (Groot voorbeeld)

De grootste versie van mijn ontwerp is de meest complexe. Het plaatst niet alleen een grote afbeelding van mijn Kever bovenop twee kolommen met doorlopende tekst, maar die tekst loopt om zijn wielen. Ik begin met het toepassen van rasteigenschappen voor grotere schermen op het body-element om een ​​symmetrisch raster met twee kolommen te creëren:

@media (min-width: 64em) {  lichaam { display: raster; grid-template-kolommen: 1fr 1fr; opvulling: 4rem; }

Mijn koptekst beslaat beide kolommen en vervolgens passen de geneste rasterwaarden het VW-logo, de kop en het beeld van mijn kever aan. In dit geneste raster nemen de twee buitenste kolommen alle resterende beschikbare ruimte in beslag, terwijl de middelste kolom automatisch wordt aangepast aan de inhoud ervan:

header { rasterkolom: 1 / -1; display: raster; grid-template-columns: 1fr auto 1fr; grid-row-gap: 4vh; }

Ik plaats het logo en de kop in deze middelste kolom:

svg, h1 { rasterkolom: 2; }

Voeg vervolgens marges toe tussen de alinea’s:

p { marge-rechts: 1rem; marge-links: 1rem; }

Het afbeeldingselement voor dit ontwerp bevat twee afbeeldingen. De eerste is compleet met wielen voor kleine en middelgrote schermen, en de tweede is een auto die zijn wielen mist voor grote schermen. Om wielen weer op deze Kever te bouten, gebruik ik: before pseudo-elementenin zowel hoofd- als opzij-elementen. Vervolgens voeg ik een vormmarge toe om ruimte tussen hen en de lopende tekst in de buurt toe te voegen:

main: before, terzijde: vóór { display: blok; vormmarge: 10px; }

Met behulp van gegenereerde inhoud voeg ik het achterwiel toe voor het hoofdelement en zweef dat wiel naar rechts. De eigenschap shape-outside wikkelt vervolgens tekst rond dit wiel:

main: before { inhoud: url (shape-l.png); zweven: rechts; shape-outside: url (shape-l.png); }

Ik pas vergelijkbare waarden toe voor voor het opzij-element, dit keer met het wiel naar links zwevend:

opzij: vóór { inhoud: url (shape-r.png); drijven: links; shape-outside: url (shape-r.png); } }

De doorlopende tekst loopt nu rond de wielen van de Kever, wat mijn ontwerp aantrekkelijker maakt zonder in te boeten aan leesbaarheid of reactievermogen.

Conclusie

Otto Storch heeft veel gedenkwaardige ontwerpen gemaakt, maar ik ben verdrietig dat hij en zijn werk grotendeels zijn vergeten. Er is geen Wikipedia-pagina gewijd aan Storch en niemand heeft een boek over hem of zijn werk gepubliceerd. Storch’s ontwerpen hebben ontwerpers die op internet werken veel te bieden, en ik hoop dat meer mensen hem zullen herontdekken.

Zijn werk laat ook zien hoeveel meer we online kunnen bereiken met Shapes. Ondanks dat het nu goed wordt ondersteund, wordt deze CSS-eigenschap bijna net zo vaak over het hoofd gezien als Storch zelf. Vormen bieden zoveel meer dan eenvoudige tekstterugloop en hun volledige potentieel moet nog worden gerealiseerd. Ik hoop dat dat snel zal veranderen.

Meer uit de serie “Inspired Design Decisions”

  1. Geïnspireerde ontwerpbeslissingen: Avaunt Magazine
  2. Geïnspireerde ontwerpbeslissingen: dringende zaken

  3. Geïnspireerde ontwerpbeslissingen: Ernest Journal
  4. Geïnspireerde ontwerpbeslissingen: Alexey Brodovitch
  5. Geïnspireerde ontwerpbeslissingen: Bea Feitler
  6. Inspire d Ontwerpbeslissingen: Neville Brody

NB: Smashing-leden hebben toegang tot een prachtig ontworpen PDF van Andy’s Inspired Design Decisions magazine en volledige codevoorbeelden uit dit artikel.

Smashing Editorial(vf, ra, yk, il)

artikel>