Decisioni progettuali ispirate con Otto Storch: quando l'idea, la copia, l'arte e la tipografia sono diventate inseparabili

Negli ultimi anni, i libri su HTML e CSS sono quasi scomparsi dagli scaffali del mio studio. Li ho sostituiti con libri sulla direzione artistica, editoriale e grafica.

Di recente, stavo sfogliando una nuova aggiunta alla mia libreria e sono rimasto affascinato dalla diffusione di una rivista. Ho adorato il modo in cui il suo designer ha combinato giocosamente immagini e tipografia per creare un design pieno di energia e movimento. Per ricordarmi di dare un'altra occhiata a questo design, gli ho scattato una foto con il mio iPhone.

Quando ho visto per la prima volta quel design sorprendente, non avevo sentito parlare del designer che lo aveva creato, Otto Storch, nato a Brooklyn. Sebbene fosse un grafico pluripremiato, a differenza di molti dei suoi contemporanei, Storch e il suo lavoro sono stati in gran parte trascurati.

Storch ha accumulato una vasta mole di lavoro, ed è un vero peccato che il suo lavoro non sia più ampiamente conosciuto, soprattutto online. Non esiste una pagina di Wikipedia dedicata a Storch e nessuno ha pubblicato un libro su di lui o sul suo lavoro.

Non sono solo influenzato dal lavoro di Otto Storch, ma anche dal fatto che era un designer prolifico con una forte etica del lavoro. Sono ispirato da come ha preso ciò che aveva imparato da Alexey Brodovitch, lo ha combinato con il suo approccio al design e ha realizzato un lavoro distintivo e coinvolgente. Spero di poterlo fare anche io.

Non ho mai sentito menzionare il nome di Otto Storch durante una conferenza di design né l'ho visto menzionato in un libro sul web design. Ma scoprirlo mi ha fatto venire voglia di far conoscere a più persone l'uomo e il suo lavoro.

Mi ha anche fatto considerare il ruolo della creatività in un settore incentrato sul business, in rapido movimento e con vincoli pratici oltre che tecnici. L'editoria può essere un affare spietato e le riviste su cui lavorava Storch non erano di alta moda. Quello che ha fatto non era arte, ma ciò non significava che non fosse creativo. Storch ha capito che le idee sono essenziali per una comunicazione efficace quanto le immagini e la parola scritta. Durante la sua carriera, Storch ha lavorato duramente per includere idee nonostante i limiti del suo mezzo. Questo è un approccio che è essenziale sul web oggi come lo era nelle riviste negli anni '60.

Ispirato da Otto Storch

Otto Storch è nato nel 1913 e negli anni '30 ha iniziato la sua carriera nell'arte dimenticata del ritocco fotografico pre-digitale. Durante gli anni '50, Storch prese lezioni serali e studiò design con Alexey Brodovitch che lo incoraggiò a trovare lavoro lavorando su una rivista.

Il successo non è arrivato dall'oggi al domani e ci sono voluti sette anni di freelance prima che la rivista Storch Better Living di New York lo assumesse come assistente art director. McCall ha pubblicato diversi titoli tra cui Popular Mechanics, Blue Book e Red Book e lo stesso McCall's Magazine. Storch si è trasferito al McCall's Magazine dove ha sviluppato ciò che aveva imparato da Brodovitch e la sua esperienza nella progettazione di materiali pubblicitari, copertine di album, copertine di libri e riviste.

Storch non aveva paura di fare scelte supponenti ed è proprio questa assertività che rende distintiva gran parte del suo lavoro.

“Una buona direzione artistica non viene da una persona incerta. Sono capace di sentimenti intensi ed ero disposto a perdere una gara di popolarità con gli editori dipartimentali quando necessario. La responsabilità visiva della rivista era mia”.

— Otto Storch

Come Bea Feitler, Storch ha portato avanti l'eredità di Alexey Brodovitch di layout fantasiosi di riviste. Ha capito che la doppia pagina è una tela creativa e ne ha fatto una caratteristica del suo lavoro, a volte consentendo agli elementi di fluire tra le pagine. Altre volte, Storch ha reso la grondaia una parte integrante del suo progetto.

Storch usava spesso titoli e immagini di grandi dimensioni per unificare le sue pubblicazioni. Per "On the cob or off", è una pannocchia di mais che gocciola burro su entrambe le pagine. Per un altro lungometraggio, "Il piano di riduzione delle quaranta strizzatine d'occhio", ha permesso al soggetto di allungarsi, appoggiandosi su un letto di testo in esecuzione. Questa copia affonda sotto il peso del modello addormentato.

La grande grafica in bianco e nero in "Perché i matrimoni tra adolescenti stanno cadendo a pezzi" non si limita a una sola pagina. Invece, occupa tre colonne su quattro sullo spread e quindi domina il design. La gravità di un titolo in mezzo a quei cerchi concentrici attira lo sguardo verso di esso.

In "Le ragazze sono sciocche, i ragazzi non sono terribili", Storch ha posizionato due bambini fronte a fronte con la grondaia tra di loro. Ha sottolineato questa tensione allineando il suo testo in direzioni opposte.

Storch ha reso la combinazione di immagini e testo ovvia e senza sforzo, ma i risultati che ha ottenuto derivano da anni di esperienza e pratica.

Per "Rendi la moda fresca come la vernice", il testo fitto di Storch si adatta perfettamente a uno scomparto nella scatola dei colori di un artista. I modelli in questa diffusione per McCall's Patterns si adattano anche all'interno della scatola. L'uso giocoso e inaspettato della scala di Storch aggiunge un'altra dimensione a questo design.

Storch credeva che nel design editoriale un'idea forte, una copia, le immagini e la tipografia fossero parte integrante. Penso che lo stesso sia vero nel web design, nonostante le sue apparenti differenze con la stampa.

Storch capì che la tipografia poteva fare molto di più che presentare contenuti leggibili e aveva un talento per trasformare i caratteri in oggetti grafici. Nel design di stampa per le lingue da sinistra a destra, la pagina sinistra è chiamata "verso" e la destra è chiamata "recto". Per l'estratto di McCall di un libro intitolato "The First to Know", Storch ha rispecchiato le pagine recto e verso, quindi ha impostato il suo testo in un cerchio che riflette il quadrante del telefono circolare.

C'è molto Otto Storch e i suoi progetti possono insegnarci il lavoro che facciamo oggi sul web. Come Alexey Brodovitch, Storch ha imparato la sua tela e piuttosto che esserne limitato; ha usato le sue pagine per presentare i contenuti in modi che li hanno resi non solo comprensibili, ma anche più attraenti. Questo appello è importante, perché connette le persone con un marchio, un prodotto o una storia, e questo è importante per qualsiasi azienda, qualunque sia il mezzo.

Otto Storch potrebbe essere una nuova aggiunta alla mia lista di designer stimolanti, ma i suoi progetti stanno già influenzando i miei.

Mettiti in forma

Il modulo CSS Shapes di livello 1 del W3C è una raccomandazione per i candidati dal 2014 e tutti i browser desktop e mobili contemporanei hanno implementato le sue proprietà shape-outside, shape-margin e shape-image-threshold.

 [src="shape.png"] { float: left; shape-outside: url(shape.png); shape-margin: 20px; }

I web designer non sono consapevoli del potenziale creativo offerto da CSS Shapes e che non c'è più un motivo per non usarli. È anche possibile che gli sviluppatori web pensino ancora che Shapes abbia uno scarso supporto nei browser. Tuttavia, con tutti i browser contemporanei che ora supportano Shapes e le loro proprietà si degradano con grazia nei browser legacy, al momento non c'è motivo per evitare di usarli.

Fai di più con le forme

Questo progetto di Otto Storch è stato uno dei primi ad attirare la mia attenzione. Ho ammirato la semplicità strutturale delle sue due giustificate colonne di copia e il modo in cui il posizionamento delle sue immagini - con il testo avvolto attorno ad esse per creare forme organiche - riempiva giocosamente la pagina di energia e movimento.

Raramente vedo layout con questo tipo di energia online, quindi il mio design include quattro Maggiolini dai colori vivaci, ciascuno posizionato ad angolo per contrastare con le due alte colonne di testo. Ho bisogno solo di due elementi strutturali per implementare questo design ispirato a Storch; l'elemento principale e una parentesi. Ciascuno di questi elementi contiene paragrafi di testo in esecuzione, oltre a due elementi immagine che mi consentono di scambiare immagini piccole con immagini più grandi:

 <main> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </aside>

Questi elementi dell'immagine si adattano ai bordi di piccoli schermi, ma ho ancora bisogno di spazi bianchi su entrambi i lati dei miei paragrafi di copia in esecuzione. Utilizzando le unità di larghezza della finestra, quello spazio rimane sempre proporzionale a quelle schermate:

 p { margin-right: 10vw; margin-left: 10vw; }

L'elemento immagine è una delle aggiunte più utili all'HTML. Combinando le query multimediali con più immagini, un browser può selezionare un'immagine più appropriata per un layout.

Uso più spesso la proprietà media e il valore di larghezza minima e, sebbene questo progetto richieda solo due immagini per elemento dell'immagine, è possibile aggiungere più immagini e persino combinare valori multimediali per creare query complesse:

 <picture> <source media="(min-width: 48em)"> <img src="small.png" alt="Volkswagen Beetle"> <</picture>

Le immagini in queste immagini contengono versioni ritagliate dei miei Maggiolini che si adattano meglio ai piccoli schermi. Applico la stessa larghezza a tutte le mie immagini, quindi aggiungo un margine di forma in preparazione per le forme CSS che seguono:

 picture { width: 160px; shape-margin: 20px; }

Trovo che le forme delle immagini siano più facili e veloci da implementare rispetto all'utilizzo delle coordinate del poligono. Per sviluppare una forma da un'immagine, ha bisogno di un canale alfa che sia completamente o parzialmente trasparente. Quando le immagini sono parzialmente trasparenti, la proprietà shape-image-threshold può controllare le aree che formano la forma.

Posso usare la stessa immagine per più di una forma. Anche se il mio design include quattro auto di colore diverso, ho bisogno solo di due immagini di forma:

 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); }

Con il design del mio piccolo schermo completo, introduco immagini più grandi per schermi di medie dimensioni e immagini di forma da abbinare. Applico nuove larghezze per le immagini per adattarsi a schermi più grandi:

 @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); } }

Sebbene il mio design per schermi più grandi possa sembrare complesso a prima vista, il layout non potrebbe essere più semplice e quegli elementi principali e laterali formano due colonne simmetriche:

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

Gli spazi bianchi giocano un ruolo importante in questo design a grande schermo. Con quelle colonne introdotte, i margini orizzontali 10vw che ho applicato ai miei paragrafi in precedenza significano che gli spazi bianchi comprendono il 40% di questo layout.

Proprio come Otto Storch ha usato le sue pagine per presentare i contenuti in modi che li rendessero accattivanti e comprensibili, questo design non racconta solo la storia del Maggiolino Volkswagen, ma il suo layout suggerisce quanto fosse divertente guidare questa piccola auto iconica.

Rendi il testo delizioso

Come Brodovitch, Otto Storch eccelleva nel combinare immagini e testo e spesso intagliava copie in forme che le rispecchiavano. In questo progetto, Storch ha creato un delizioso blocco di testo a forma di vetro. Raramente troviamo tecniche come questa utilizzate online, ma possono aiutare ad attirare i lettori in una storia qualunque sia il mezzo. Ispirato da Storch, per il mio prossimo progetto ho scolpito la mia copia per riflettere la forma di un Maggiolino Volkswagen.

Il mio design include tre layout alternativi. Un'unica colonna di contenuti a scorrimento per schermi piccoli, una griglia 2x2 per schermi medi e un design a schermo grande con un'area dei contenuti a scorrimento orizzontale.

Ci sono quattro elementi strutturali necessari per implementare questi tre progetti, un elemento principale per il mio contenuto, oltre a grandi immagini di tre Coleotteri dai colori vivaci. Racchiudo questi elementi con una sezione, quindi aggiungo una divisione decorativa e di presentazione che rappresenta una strada asfaltata:

 <section> <img src="shape-1.png" alt=""> <main> <h1>Get bitten by the bug</h1> </main> <img src="img-1.png" alt="Volkswagen Beetle"> <img src="img-2.png" alt="Volkswagen Beetle"> </section> <div> </div>

Non ho bisogno che il mio pannello a scorrimento orizzontale appaia su piccoli schermi, quindi aggiungi solo stili e forme di base che scolpiscono il mio testo nella forma di uno scarabeo. Comincio allineando il testo del paragrafo al centro e impostandolo in maiuscolo. Anche se normalmente non imposterei il testo su un intero blocco di testo in questo modo, le solide lettere maiuscole aiutano a enfatizzare la forma del Maggiolino:

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

Le prime bozze della specifica CSS Shapes includevano una proprietà shape-inside che ci avrebbe consentito di avvolgere il testo all'interno delle forme come faceva Storch. Sono deluso dal fatto che il W3C abbia posticipato questa funzionalità fino al livello 2 del modulo CSS Shapes, che è ancora una bozza dell'editor. Puoi ottenere effetti simili usando shape-outside, ma io, per esempio, non vedo l'ora di poter usare il testo in modo creativo come Otto Storch online.

Aggiungo due immagini di forma al mio paragrafo. Il testo scorrerà tra queste immagini per rispecchiare il volto di uno scarabeo:

 <p> <img src="shape-2.png" alt=""> <img src="shape-3.png" alt=""> … </p>

Specifico le dimensioni per queste due immagini e imposto la loro opacità su zero perché non voglio che vengano visualizzate da un visualizzatore:

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

Queste immagini sono puramente rappresentative e non trasmettono contenuto o significato, quindi per rimuovere qualsiasi semantica da esse, aggiungo attributi di ruolo. Per eliminarli dall'albero di accessibilità, aggiungo anche attributi aria-hidden a queste due immagini:

 <img src="shape-2.png" alt="" role="presentation" aria-hidden="true">

Per ritagliare il mio testo nella forma dell'iconica Volkswagen, applico shape-outside utilizzando le stesse due immagini, facendo fluttuare la prima immagine a sinistra e la seconda a destra:

 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); }

Non voglio nemmeno che la mia divisione di presentazione sia visibile alle tecnologie assistive, quindi aggiungo anche a questo lo stesso ruolo e gli attributi nascosti nell'aria:

 <div role="presentation" aria-hidden="true"> </div>

Poiché non ho bisogno che la divisione sia visibile alle persone che utilizzano schermi di piccole dimensioni, ho impostato la sua proprietà di visualizzazione su nessuno:

 div { display: none; }

Il design del mio piccolo schermo è elegante, come il Maggiolino, ma lo spazio extra disponibile su schermi di medie dimensioni mi consente di posizionare il mio testo scolpito accanto alle immagini che sta imitando.

Prima di implementare qualsiasi progetto, creo uno storyboard per decidere come riorganizzare gli elementi al variare delle dimensioni dello schermo. Per schermi di medie dimensioni, dispongo i miei quattro elementi in una griglia di colonne simmetriche 2x2. Utilizzando i valori minmax per il dimensionamento di queste colonne, mi assicuro che riempiano tutto lo spazio disponibile, ma la loro larghezza non si riduce mai al di sotto di 400px:

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

Per schermi più grandi, ho bisogno anche di due righe. Dovrebbero essere uguali in altezza e occupare tutto lo spazio verticale disponibile:

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

Un'ampia area di contenuto a scorrimento orizzontale domina questo design ed è più ampia del viewport. Il pannello include quattro colonne, tre per le immagini e una per la mia copia scolpita, e ognuna ha una larghezza minima di 400 px. Impostando la larghezza massima del viewport e consentendo lo scorrimento solo sull'asse orizzontale, qualsiasi contenuto che si trova al di fuori del viewport viene nascosto ma comunque accessibile:

 section { grid-template-columns: repeat(4, minmax(400px, 1fr)); max-width: 100vw; overflow-x: scroll; }

Sotto il mio contenuto c'è una divisione di presentazione che rappresenta la strada sotto le ruote delle mie forme Beetle. Questo elemento è invisibile su schermi di dimensioni inferiori, quindi per renderlo visibile, cambio la proprietà di visualizzazione da nessuno a blocco, quindi aggiungo un colore di sfondo grigio chiaro. Le proprietà della griglia che ho impostato in precedenza sull'elemento body definiscono l'altezza di questa divisione:

 div { display: block; background-color: #a73448; } }

Dave Hyatt di Webkit ha originariamente proposto CSS Reflections già nel 2008, ma finora non sono stati implementati in altri motori di rendering del browser. I CSS Reflections sono attualmente supportati solo da Google Chrome.

Come puoi immaginare, i riflessi creano una copia di un elemento. Un riflesso può apparire sopra, sotto o a sinistra oa destra. Proprio come nel mondo fisico, quando un elemento cambia in qualche modo, ne segue il riflesso.

Sono disponibili tre proprietà sperimentali per CSS Reflections. La sua direzione e un offset opzionale che controlla la distanza tra un elemento e la sua riflessione. Puoi anche applicare una maschera a qualsiasi riflesso per cambiarne l'aspetto, ad esempio utilizzando una maschera sfumatura per sfumare gradualmente l'intensità di un riflesso.

I CSS Reflections hanno un supporto limitato nei browser, ma possono comunque aggiungere una dimensione extra a un design per i browser che li hanno implementati. Voglio aggiungere riflessi solo quando un browser li supporta e quando lo schermo è abbastanza grande da usarli a pieno effetto.

Per ottenere il risultato che sto cercando, utilizzo media nidificati e query di funzionalità che prima testano la larghezza minima di un viewport, quindi se un browser supporta -webkit-box-reflect:below . Aggiungo i riflessi e cambio il colore della mia divisione di presentazione da rosso a grigio:

 @media (min-width: 64em) { @supports (-webkit-box-reflect:below) { section { -webkit-box-reflect: below 0 linear-gradient(transparent, white); } div { background-color: #f0f0f1; } } }

Simmetria speculare

Questa sorprendente diffusione nera e rossa di McCall's Patterns è uno dei design più distintivi di Storch. C'è una rassicurante simmetria nel layout e nel modo in cui Storch ha utilizzato gli stessi colori sulle sue due pagine. Sono stato immediatamente attratto dal suo design e voglio ottenere un effetto simile.

L'HTML di cui ho bisogno per implementare questo progetto non potrebbe essere più semplice. Solo due elementi strutturali, uno principale e uno secondario, che contengono entrambi elementi pittorici:

 <main> <picture>…</picture> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> </aside>

Questi elementi principali e secondari contengono anche ciascuno un paragrafo di testo. Per ottenere le rotazioni necessarie per questo progetto, avvolgo ogni riga di testo all'interno di un elemento span. Vorrei che ci fosse un'alternativa migliore e più semantica a questi elementi di presentazione, ma senza stili aggiuntivi, non interrompono la leggibilità dei miei paragrafi:

 <p> <span>Although </span> <span>designed in the </span> <span>1930s, due to </span> <span>World War II, </span> <span>civilian Beetles </span> <span>only began to </span> <span>be produced in </span> <span>significant </span> <span>numbers by the </span> <span>end of the 1940s.</span> </p>

Comincio applicando un colore di sfondo grigio scuro all'elemento del corpo:

 body { background-color: #262626; }

Quindi, un'altezza minima assicura che i miei elementi principali e laterali riempiano sempre l'altezza della finestra. Per centrare il loro contenuto sia orizzontalmente che verticalmente, applico le proprietà di flexbox e ne imposto la direzione sulla colonna:

 main, aside { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 0; box-sizing: border-box; color: #fff; }

Voglio che il colore del mio Maggiolino principale corrisponda al pannello successivo, quindi ho impostato il colore di sfondo sullo stesso rosso:

 aside { background-color: #a73448; }

Mentre lunghi passaggi di testo maiuscolo sono generalmente più difficili da leggere rispetto a quelli impostati in maiuscolo misto, il maiuscolo è appropriato per brani più brevi e può creare un aspetto elegante:

 p { margin: 0 2rem; text-align: center; text-transform: uppercase; }

Nel mio progetto per un piccolo schermo, gli elementi principali e laterali si impilano verticalmente e la loro altezza corrisponde a quella del viewport. Per gli schermi di medie dimensioni, ho reimpostato l'altezza minima di quegli elementi per riempire metà della finestra:

 @media (min-width: 48em) { main, aside { min-height: 50vh; padding: 2rem; }

Lo spazio extra disponibile su schermi di medie dimensioni mi consente di dare uno stile ai miei paragrafi modificando la modalità di scrittura, in modo che il loro testo venga visualizzato verticalmente e si legga da destra a sinistra:

 p { max-height: 12em; margin: 0; text-align: left; writing-mode: vertical-rl; }

La modifica della proprietà di visualizzazione su questi elementi span in blocco divide il mio paragrafo su più righe. Quindi, l'altezza della linea aggiunge spazio tra le linee, il che lascia spazio alle mie rotazioni:

 p span { display: block; line-height: 2; }

Le trasformazioni, tra cui ruotare, ridimensionare e tradurre, fanno parte dei CSS da quasi due decenni. L'uso della trasformazione implica l'aggiunta di una funzione di trasformazione come ruotare, quindi un valore tra parentesi.

Per ottenere l'effetto che sto cercando; Ruoto le prime sei righe del mio testo in senso antiorario di quindici gradi. Le ultime sei linee vengono ruotate della stessa quantità ma in senso orario. Tutte le righe rimanenti rimangono inalterate:

 p span:nth-child(-n+6) { transform: rotate(-15deg); } p span:nth-child(n+12) { transform: rotate(15deg); }

In futuro, sarai in grado di utilizzare funzioni come ruotare indipendentemente dalla proprietà transform, ma mentre scrivo questo, solo Firefox ha implementato trasformazioni individuali.

Per fare spazio al mio testo ruotato, aggiungo margini a due delle mie righe:

 p span:nth-child(6) { margin-left: 1em; } p span:nth-child(12) { margin-right: 1em; } }

Questo design diventa più sorprendente con lo spazio disponibile sui grandi schermi. Per loro, applico i valori della griglia all'elemento body per creare due colonne simmetriche di uguale altezza:

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

Applico una griglia simmetrica a tre colonne sia agli elementi principali che laterali che si estendono entrambi per l'intera altezza della finestra:

 main, aside { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; padding: 2rem; min-height: 100vh; }

Ho distribuito l'immagine principale nella seconda e nella terza colonna e l'immagine a lato nella prima e nella seconda colonna:

 main picture { grid-column: 2 / -1; grid-row: 1; padding: 0 5vw; } aside picture { grid-column: 1 / 3; padding: 0 5vw; }

Metto i paragrafi nelle colonne rimanenti e, dando a tutti gli elementi lo stesso numero di riga, rimarranno sulla stessa riga indipendentemente dall'ordine di origine:

 main p { grid-column: 1; grid-row: 1; } aside p { grid-column: 3; }

In questa versione del mio progetto, il testo dovrebbe essere eseguito dall'alto verso il basso anziché da destra a sinistra, quindi ho ripristinato la modalità di scrittura su orizzontale, dall'alto in basso e quindi allineo il testo a destra:

 main p, aside p { max-height: none; writing-mode: horizontal-tb; } main span { text-align: right; }

Infine, sostituisco i valori di rotazione e i margini sulle mie righe di testo per adattarsi meglio a questo design a grande schermo:

 main p span:nth-child(-n+6) { transform: rotate(10deg); } main p span:nth-child(n+12) { transform: rotate(-10deg); } main p span:nth-child(6) { margin: 0 0 15px; } main p span:nth-child(12) { margin: 15px 0 0; } aside p span:nth-child(-n+6) { transform: rotate(-10deg); } aside p span:nth-child(n+12) { transform: rotate(10deg); } aside p span:nth-child(6) { margin: 0 0 15px; } aside p span:nth-child(12) { margin: 15px 0 0; } }

Colonne di estensione

Per molti dei suoi progetti più memorabili, Otto Storch ha permesso che immagini di grandi dimensioni ed elementi tipografici si diffondessero su due pagine. Questa tecnica ha creato spread sorprendenti, incluso questo in cui ha posizionato una pannocchia di mais burrosa sopra due colonne di testo giustificato.

Voglio un effetto altrettanto sorprendente per il mio progetto finale basato su Beetle e per implementarlo ho bisogno solo di tre elementi strutturali; un'intestazione - contenente un logo SVG, un titolo e un'immagine della mia Volkswagen gialla - quindi elementi principali e di lato:

 <header> <svg>…</svg> <h1>Get bitten by the bug</h1> <figure> <picture>…</picture> </figure> </header> <main>…</main> <aside>…</aside>

Il flusso normale più alcuni stili di base sono tutto ciò di cui ho bisogno per implementare la versione a schermo piccolo di questo progetto. Innanzitutto, aggiungo uno sfondo scuro e specifico il testo bianco:

 body { padding: 2rem; background-color: #262626; color: #fff; }

Per posizionare il titolo al centro della pagina, applico i margini, ne imposto la larghezza massima utilizzando unità di testo, quindi allineo le parole maiuscole al centro:

 h1 { margin: 0 auto 1.5rem; max-width: 8rem; text-align: center; text-transform: uppercase; }

Invece di ridimensionare le immagini, in modo che si adattino a una finestra ristretta, spesso permetto loro di estendersi oltre e aggiungere un pannello a scorrimento orizzontale. Questa tecnica è uno dei miei dispositivi di progettazione per piccoli schermi preferiti.

Questa figura contiene un'immagine che è più ampia del viewport e contiene il profilo completo dell'auto, comprese le ruote. Aggiungendo overflow-x: scroll; alla figura, rendo accessibili parti dell'immagine al di fuori del viewport:

 figure { overflow-x: scroll; }

Sebbene gli schermi di medie dimensioni ereditino molti di questi stili di base, quando diventa disponibile più spazio, voglio enfatizzare l'asse verticale nel progetto creando una colonna di testo stretta utilizzando ampi margini basati sulla finestra. Ho anche ripristinato l'overflow degli elementi della figura per rendere visibile tutto il suo contenuto:

 @media (min-width: 48em) { figure { overflow-x: visible; } p { margin-right: 25vw; margin-left: 25vw; } }

La versione più grande del mio progetto è la più complessa. Non solo posiziona una grande immagine del mio Maggiolino sopra due colonne di testo in esecuzione, ma quel testo avvolge le sue ruote. Inizio applicando le proprietà della griglia per schermi più grandi all'elemento body per creare una griglia simmetrica a due colonne:

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

La mia intestazione si estende su entrambe le colonne, quindi i valori della griglia nidificati organizzano il logo VW, il titolo e l'immagine del mio Maggiolino. In questa griglia nidificata, le due colonne esterne occupano tutto lo spazio disponibile rimanente, mentre la colonna centrale si ridimensiona automaticamente per adattarsi al suo contenuto:

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

Inserisco il logo e il titolo in questa colonna centrale:

 svg, h1 { grid-column: 2; }

Quindi, aggiungi i margini tra i paragrafi:

 p { margin-right: 1rem; margin-left: 1rem; }

L'elemento immagine per questo disegno include due immagini. Il primo è completo di ruote per schermi piccoli e medi e il secondo è un'auto senza le ruote per schermi di grandi dimensioni. Per imbullonare le ruote su questo Maggiolino, uso :before pseudo-elements all'interno sia degli elementi principali che di quelli laterali. Quindi, aggiungo un margine di forma per aggiungere spazio tra loro e il testo in esecuzione nelle vicinanze:

 main:before, aside:before { display: block; shape-margin: 10px; }

Usando il contenuto generato, aggiungo la ruota posteriore prima dell'elemento principale e faccio scorrere quella ruota a destra. La proprietà shape-outside quindi avvolge il testo attorno a questa ruota:

 main:before { content: url(shape-l.png); float: right; shape-outside: url(shape-l.png); }

Applico valori simili a prima dell'elemento aside, questa volta facendo oscillare la ruota a sinistra:

 aside:before { content: url(shape-r.png); float: left; shape-outside: url(shape-r.png); } }

Il testo in esecuzione ora avvolge le ruote del Maggiolino, il che rende il mio design più avvincente senza sacrificare la leggibilità o la reattività.

Conclusione

Otto Storch ha creato molti progetti memorabili, ma sono triste che lui e il suo lavoro siano stati in gran parte dimenticati. Non esiste una pagina di Wikipedia dedicata a Storch e nessuno ha pubblicato un libro su di lui o sul suo lavoro. I design di Storch hanno molto da offrire ai designer che lavorano sul web e spero che più persone lo riscopriranno.

Il suo lavoro dimostra anche quanto più possiamo ottenere online usando Shapes. Nonostante ora sia ben supportata, questa proprietà CSS è stata trascurata quasi quanto lo stesso Storch. Le forme offrono molto di più del semplice ritorno a capo del testo e il loro pieno potenziale deve ancora essere realizzato. Spero che cambierà, e presto.

Leggi di più dalla serie

• Decisioni di design ispirate: rivista Avaunt
• Decisioni di design ispirate: questioni urgenti
• Decisioni di design ispirate: Ernest Journal
• Decisioni progettuali ispirate: Alexey Brodovitch
• Decisioni di design ispirate: Bea Feitler
• Decisioni progettuali ispirate: Neville Brody
• Decisioni di design ispirate: Herb Lubalin
• Decisioni progettuali ispirate: Max Huber
• Decisioni progettuali ispirate: Giovanni Pintori
• Decisioni di design ispirate: Emmett McBain
• Decisioni progettuali ispirate: Bradbury Thompson

NB: I membri Smashing I membri Smashing hanno accesso a un PDF dal design accattivante della rivista Andy's Inspired Design Decisions e agli esempi di codice completo di questo articolo. Puoi acquistare il PDF e gli esempi di questo numero, nonché ogni altro numero direttamente dal sito Web di Andy.