Decisioni progettuali ispirate con Bradbury Thompson: The Art Of Graphic Design

L'idea di questa serie - e del libro che la seguirà - è nata da una conversazione casuale, ma scriverla ha avuto un profondo impatto su di me e sul lavoro che realizzo per il web.

Sono più premuroso nel mio approccio al layout della pagina e al modo in cui una pagina e il suo contenuto si adattano alle diverse dimensioni dello schermo. Ho una comprensione molto maggiore di come la composizione aiuti la comunicazione e possa migliorare le storie che racconto sulle attività, sui prodotti o sui servizi dei miei clienti.

Ho scoperto come creare al meglio un ritmo che scorre di pagina in pagina. Ho imparato come quel ritmo produca design visivi più attraenti ed esperienze coinvolgenti e quanto possano essere flessibili anche le griglie più semplici se avvicinate con l'immaginazione.

Sono rimasto affascinato dal modo in cui i direttori artistici della rivista, tra cui Alexey Brodovitch e Bea Feitler, hanno unito immagini e testo. La mia conoscenza della tipografia si è sviluppata insieme al mio entusiasmo per il tipo espressivo e divertente. È improbabile che realizzerò mai caratteri belli come Herb Lubalin o impegnativi come Neville Brody, ma sono più sicuro di sperimentare.

Questo progetto mi ha dato la sicurezza per, come ha suggerito Ruth Ansel, di "uscire da ciò che ci si aspetta", fare scelte sicure e fidarmi del mio istinto quando qualcosa sembra giusto. Ho imparato a incanalare il mio atteggiamento spesso ribelle al pensiero progettuale convenzionale per sviluppare nuove soluzioni a problemi di progettazione spesso quotidiani.

Lavoriamo in un settore che ora è più dominato dagli aspetti accademici, meccanici e tecnici del design. Lo sviluppo di questa serie mi ha rafforzato che mentre quelle attività contano, come scrisse Giovanni Pintori, "abbiamo bisogno di logica e immaginazione in egual misura".

Come ha spiegato Neville Brody, "Una volta che hai infranto le regole, letteralmente tutto è possibile". Il pensiero non convenzionale non deve necessariamente andare a scapito dell'usabilità. Imparare come le persone interagiscono con un sito Web o utilizzano un prodotto non dovrebbe imporre un design, ma fornire una piattaforma su cui sviluppare esperienze coinvolgenti, divertenti e, in definitiva, più memorabili.

Imparare a conoscere il lavoro di designer di epoche e campi diversi non solo ha ispirato le mie idee, ma mi ha dato entusiasmo per saperne di più. Trovare nuove fonti di ispirazione è diventata un'ossessione quasi quotidiana e mentre le pareti del mio studio potrebbero non essere ancora piene come quelle di Ruth Ansel e Bea Feitler, le mie librerie, i tavolini e la scrivania sono quasi traboccanti della mia collezione di libri di design.

Per molto tempo ho avuto la fastidiosa sensazione che il web potesse fare molto di più di quello che stiamo facendo noi. Ognuno dei designer che ho presentato in questa serie ha sfidato le percezioni, influenzato la direzione del loro mezzo e alla fine ha ispirato gli altri, me compreso, a creare un lavoro migliore. Spero che in qualche modo questa serie possa fare lo stesso.

Ispirato da Bradbury Thompson

Studiare uno dei più affermati art director e grafici del secolo scorso sembra una conclusione adatta a questa serie.

Bradbury Thompson è nato in Kansas nel 1911 e, anche se potrebbe non essere stato il più noto, non c'è dubbio che sia stato uno dei più influenti. Thompson ha studiato al Washburn College nella sua città natale di Topeka. Fin dall'inizio, è stato ispirato dai progetti di stampa, in particolare dalle riviste, e ha usato questa influenza per progettare gli annuari del college.

Dopo la laurea a Washburn, Thompson ha lavorato per cinque anni presso Capper Publications, una tipografia locale. Questo primo lavoro come tipografo junior non sarebbe stato affascinante, ma ha fornito a Thompson un'ampia conoscenza del design e delle tecniche di stampa che avrebbe utilizzato durante la sua lunga carriera.

Il Kansas negli anni '30 era famoso per le sue forti tempeste di sabbia, ma non come centro creativo, quindi nel 1938 Thompson viaggiò per 1.200 miglia a est fino a New York City. Incredibilmente, per un giovane appena uscito di strada dal Kansas, uno dei suoi primi progetti è stato il catalogo dell'Esposizione Universale del 1939.

Thompson ha lavorato per Rogers-Kellogg-Stillson, la tipografia responsabile di quella Fiera mondiale, ed è stato incaricato di lavorare su Westvaco Inspirations for Printers. Questa serie di opuscoli promozionali è stata pubblicata da Westvaco Corporation per mostrare la sua linea di carte da stampa. Ogni numero consisteva di sole sedici pagine, ma offriva a Thomson una "rara opportunità di sperimentazione fornita a un designer ricettivo".

Westvaco aveva pubblicato Inspirations dagli anni '20 ed era già ampiamente distribuito a un pubblico di 35.000 agenzie, musei, tipografi, scuole e università.

A Thomson non è stato assegnato alcun budget per commissionare opere d'arte o fotografie originali per la pubblicazione, ma invece di lasciare che questo limitasse le sue idee, l'ha sfruttata come un'opportunità per essere creativo. Le ispirazioni hanno dato a Thomson la libertà di sperimentare idee e tecniche e di esplorare concetti creativi. Divenne "uno dei migliori scrocconi della mia professione" prendendo in prestito lastre stampate e separazioni da agenzie, riviste e persino musei, da incorporare nel suo lavoro.

Questi elementi presi in prestito includevano fotografie e illustrazioni storiche che Thomson ha combinato con la tipografia contemporanea e i moderni colori di processo. Per Victory, una diffusione per Inspirations nel 1953, Thomson ha incorporato illustrazioni di frecce e le ha integrate in bersagli realizzati con colori solidi. Ha preso in prestito elementi dall'arte popolare e primitiva, trasformandoli in opere originali che mescolavano moderno e tradizionale. Lavorare su Inspirations ha stimolato la creatività di Thompson e ha continuato a progettare oltre 60 edizioni.

Durante la seconda guerra mondiale, Thompson progettò gli ultimi numeri di due riviste in tempo di guerra, Victory e USA, che furono pubblicate dall'Office of War Information. Poi nel 1945 divenne direttore artistico della rivista Mademoiselle e rimase nel ruolo per i successivi quindici anni.

Le tendenze eclettiche che Thompson aveva sviluppato lavorando su Inspirations sono continuate a Mademoiselle e ora con un budget con cui lavorare, ha incaricato artisti emergenti Andy Warhol, Joan Miro, Willem de Kooning e il mio artista pop preferito Jasper Johns di illustrare per la sua sezione narrativa.

Il lavoro con la rivista di Thomson non è iniziato o terminato con Mademoiselle e nel corso della sua carriera ha lavorato a più di trenta, tra cui Business Week, Harvard Business Review e la rivista Smithsonian.

Bradbury Thompson potrebbe non essere tra i grafici più famosi, ma è stato ampiamente riconosciuto nel suo settore, ricevendo tutti e tre i principali premi di design e altro ancora. I suoi premi includevano il National Society of Art Directors of the Year Award (1950) e la medaglia AIGA (1975). Nel 1977 Thompson è stato inserito nella Art Directors Club Hall of Fame e negli anni '80 ha vinto per primo il Frederic W. Goudy Award e poi la Medaglia del Club del Direttore di Tipo.

Fin dalle sue prime esperienze di lavoro a Topeka, Thompson è stato un designer orientato ai dettagli che ha prestato attenzione ai minimi dettagli nella sua tipografia e al ritaglio e al posizionamento precisi delle sue immagini. Il suo uso intelligente di tavolozze spesso semplici di colori in quadricromia insieme a illustrazioni storiche in bianco e nero e forme geometriche hanno reso il suo lavoro allo stesso tempo classico e contemporaneo.

Il tipo è una cosa di costante interesse per me. In breve, il tipo può essere uno strumento, un giocattolo e un insegnante. Può fornire un mezzo di sostentamento, un hobby per il relax, uno stimolante intellettuale e una soddisfazione spirituale. Credo che un avido interesse per il tipo includa necessariamente un gusto per la vita di tutti i giorni.
— Bradbury Thompson

Come l'architettura, la tipografia è una miscela di bellezza e utilità funzionale e i design di Thompson spesso combinavano arrangiamenti tipografici insoliti con forme colorate. Per Rain, Rain, Rain - una diffusione per la rivista Mademoiselle nel 1958 - ha riprodotto la stessa figura che indossa un impermeabile che porta un ombrello come cinque sagome colorate.

In Futural - una diffusione per Westvaco Inspirations for Printers nel 1962 - Thompson ha rispecchiato le forme semplificate degli aeroplani sulle pagine, utilizzando il disegno al tratto sul verso e i colori solidi sul recto. Sovrastampava regolarmente le sue forme colorate per aggiungere profondità e interesse ai suoi disegni.

Utilizzando la sua esperienza nelle tecnologie di stampa, i progetti distintivi di Thompson utilizzano spesso solo quattro colori di processo. Nella stampa offset, i colori di quadricromia sono costituiti da percentuali di inchiostri ciano, magenta, giallo e chiave (nero) (CMYK). Questo processo di stampa in quadricromia è in grado di produrre un'ampia gamma di colori.

I modelli più noti di Thompson usano spesso questi colori nella loro forma più pura. Separava spesso i colori e li stampava in aree diverse nelle sue composizioni. Usiamo il modello RGB quando progettiamo per gli schermi, ma separando questi tre colori nel modo in cui Thompson ha separato i colori CMYK dei componenti è possibile creare progetti stimolanti per il Web.

Thompson ha insegnato graphic design alla Yale University's School of Art dal 1956 fino alla sua morte nel Connecticut nel 1995.

Il New York Times Book Review ha affermato che la sua autobiografia artistica, "The Art of Graphic Design", era un libro in cui "arte e design sono gloriosamente e audacemente mescolati", che è una buona rappresentazione della sua strategia di design in generale. "The Art of Graphic Design", è stato pubblicato nel 1988. Mentre la copia con copertina rigida originale che vorrei per la mia collezione è ora proibitivamente costosa, le versioni tascabili ristampate sono disponibili a prezzi più realistici.

Elaborazione della tavolozza dei colori

Inizio a implementare questo primo progetto considerando prima il mio contenuto, poi gli elementi HTML più appropriati per descriverlo. Per questo design ispirato a Thompson, ho bisogno solo di pochi elementi, un'intestazione, un articolo e una parte, più due cifre:

 <header> <svg>…</svg> <h1>…</h1> <svg>…</svg> </div> </header> <article> <main>…</main> </article> <figure>…</figure> <aside>…</aside> <figure>…</figure>

Come ho discusso in questa serie, il mio processo inizia sempre applicando gli stili di base, che includono colori e tipografia. Aggiungo un colore di sfondo blu intenso e un testo serif bianco a contrasto:

 body { padding: 2rem 0; background-color: #1f455f; font-family: 'serif'; color: #fff; }

Definisco i titoli in corsivo, quindi aggiungo dimensioni per i livelli di intestazione e i paragrafi:

 h1, h2 { font-style: italic; } h1 { font-size: 2.8rem; } h2 { font-size: 2.027rem; } p { font-size: .8rem; }

Infine, coloro le didascalie che accompagnano le immagini di entrambe le mie figure con un verde vivace e metto in corsivo il testo in modo che corrisponda allo stile dei miei titoli:

 figcaption { font-size: .8rem; font-style: italic; text-align: center; color: #d2de4a; } 

CMYK in RGB

Per produrre colori in quadricromia CMYK: ciano, magenta, giallo e chiave (nero) in RGB (rosso, verde e blu) per gli schermi, utilizzare i valori massimi per due di questi colori. Se il risultato è troppo duro per gli occhi, aggiungi il nero per creare sfumature e ammorbidire l'effetto.

Anche sugli schermi più piccoli, un po' di spazio deve rimanere vuoto. Ciò consente all'occhio di fluire intorno al contenuto. I margini e il riempimento sono spesso tutto ciò che serve per aggiungere spazio vuoto:

 #logo { margin: 0 auto 1rem; } #banner { margin: 1rem 1rem 1rem 0; } main, aside { margin: 0 1rem; } figure { margin: 2rem auto; }

La riduzione della larghezza massima degli elementi grafici aggiunge spazio bianco e interesse visivo ai progetti su schermo piccolo:

 #logo { max-width: 25vw; } figure { max-width: 50vw; } 

Lo spazio extra disponibile su schermi di medie dimensioni mi consente di introdurre la prima serie di stili di layout a questo progetto. Dividendo il mio testo in esecuzione su due colonne, aiuto a mantenere la coerenza nella sua misura. Posizionando le mie due figure, una accanto all'altra mantiene le loro proporzioni relative al mio testo.

Inizio applicando le proprietà della griglia e un'insolita griglia simmetrica a cinque colonne all'elemento del corpo. Quindi, aggiungo un'immagine di sfondo dell'URI di dati e la posiziono a destra del mio layout:

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; background-image: url("data:image/svg+xml…"); background-position: 120% 50%; background-repeat: no-repeat; } }

Ho bisogno di posizionare il contenuto della mia intestazione e articolo direttamente sulla mia griglia, quindi cambio la proprietà di visualizzazione di quegli elementi in contenuto, che li rimuove efficacemente per scopi di stile:

 header, article { display: contents; }

Quindi, inserisco ogni elemento di contenuto in un diverso insieme di colonne e righe della griglia usando i numeri di riga. Per prima cosa, inserisco il logo Ford in un'unica colonna. Posso rimuovere la larghezza massima che ho impostato in precedenza poiché la sua dimensione ora dipenderà dalla larghezza della sua colonna:

 #logo { grid-column: 2; margin: 0; max-width: none; }

Il banner contiene un profilo di un furgone Transit e il titolo principale occupa le prime quattro delle mie cinque colonne:

 #banner, h1 { grid-column: 1 / 4; }

Lasciando vuota la prima colonna, il contenuto degli elementi principale e laterale viene rientrato da sinistra. Impostando la loro larghezza in modo che corrisponda a quella del mio banner, aggiungo una piacevole asimmetria al layout:

 main, aside { grid-column: 2 / -1; }

Sebbene le mie due figure non siano elementi adiacenti nel mio HTML, CSS Grid rende semplice posizionarle fianco a fianco. Li metto in colonne diverse sulla stessa riga senza dover modificare il mio HTML:

 figure:nth-of-type(1) { grid-column: 2 / 4; grid-row: 5; } figure:nth-of-type(2) { grid-column: 4 / -1; grid-row: 5; }

In molti dei miei progetti, utilizzo il rientro invece della spaziatura del paragrafo per creare blocchi solidi dal mio testo in esecuzione. Questo effetto è ancora più sorprendente quando si imposta il testo in più colonne:

 p { margin-bottom: 0; } p + p { text-indent: 2ch; } main { column-width: 16em; }

Gli elementi della figura possono includere una o più didascalie e immagini. Le didascalie vengono comunemente visualizzate sotto le immagini che descrivono, ma non c'è motivo per cui le didascalie debbano rimanere al di sotto. Posso posizionarli sopra o anche a sinistra oa destra di un'immagine.

Quando inserisco le didascalie a sinistra oa destra di un'immagine, do immediatamente ai progetti l'aspetto di una rivista. Uso Flexbox e quindi la proprietà flex-direction per spostarli:

 figure { display: flex; }

La didascalia della prima figura appare a sinistra, quindi inverto la direzione flessibile di questa figura dalla riga predefinita:

 figure:nth-of-type(1) { flex-direction: row-reverse; }

Flexbox mi consente di disporre gli elementi sia verticalmente che orizzontalmente. Per posizionare le mie didascalie sul bordo inferiore delle mie immagini, cambio il loro allineamento sull'asse incrociato dall'estensione predefinita a flex-end:

 figure { align-items: flex-end; }

Per un tocco finale a questo design di medie dimensioni, allineo entrambe le didascalie in direzioni opposte:

 figure:nth-of-type(1) figcaption { text-align: right; } figure:nth-of-type(2) figcaption { text-align: left; } 

Lo spazio vuoto aiuta a guidare l'occhio in ogni fase di questo layout. Lo spazio extra disponibile su schermi più grandi mi consente di sviluppare un design asimmetrico distintivo.

L'uso di una griglia composta, due o più griglie sovrapposte o sovrapposte, su una pagina può creare composizioni accattivanti. La griglia composta per questo disegno si sovrappone a una griglia a quattro colonne e sei colonne che crea uno schema ritmico di 2|1|1|2. Trasferisco quel modello in unità fr e le applico come colonne all'elemento body:

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

Quindi, aggiungo quattro righe utilizzando una combinazione di pixel, unità rem e dimensionamento intrinseco, prima di impostare l'altezza minima della pagina per riempire il viewport:

 body { grid-template-rows: 100px 14rem 14rem auto; min-height: 100vh; }

Per completare gli stili del corpo, aggiungo due nuove immagini di sfondo dell'URI di dati e ne specifico le dimensioni in modo che siano sempre contenute all'interno del viewport:

 body { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"); background-position: 0 50%, 100% 50%; background-size: contain; } 

Questo design asimmetrico è altamente strutturato e ogni elemento è posizionato con precisione sulla mia griglia. Uso i numeri di riga per posizionare gli elementi strutturali, sollevando il titolo sovrapposto sopra l'immagine del banner nell'ordine di sovrapposizione:

 #logo { grid-column: 2 / 4; grid-row: 1; } h1 { grid-column: 1 / 5; grid-row: 2 / 4; align-self: center; z-index: 2; } #banner { grid-column: 1 / 5; grid-row: 2 / 4; z-index: 1; }

Il mio contenuto principale occupa le ultime due colonne e le forme e l'isola a destra di questo disegno:

 main { grid-column: 7 / -1; grid-row: 2 / 4; column-width: auto; } aside { grid-column: 6 / -1; grid-row: 4 / 5; }

Metto le due figure su questa nuova griglia:

 figure:nth-of-type(1) { grid-column: 5 / 6; grid-row: 2 / 3; } figure:nth-of-type(2) { grid-column: 2 / 5; grid-row: 4 / 5; }

Quindi, regolo la direzione del loro flex, impostando la prima figura in verticale, in modo che la mia didascalia appaia sopra l'immagine del fratello:

 figure:nth-of-type(1) { flex-direction: column-reverse; }

Il contenuto della mia seconda figura è disposto orizzontalmente con l'immagine e la didascalia appoggiate sulla linea di base:

 figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; } 

Perfeziono l'allineamento di entrambe le didascalie e questo primo design ispirato a Thompson è completo:

 figure:nth-of-type(1) figcaption { text-align: center; } figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }

Coloratamente complementari

Nonostante l'apparente complessità di questo layout, ho bisogno solo di tre elementi strutturali nel mio HTML: un'intestazione che contiene i furgoni Transit in una varietà di colori complementari, quindi due elementi di contenuto, uno principale e uno secondario:

 <header>…</header> <main>…</main> <aside>…</aside>

Un'intestazione colorata e complementare è il fulcro di questo design. Potrebbe essere allettante implementarlo utilizzando un'unica immagine di grandi dimensioni. Tuttavia, voglio sviluppare varie disposizioni per schermi di dimensioni diverse, quindi l'utilizzo di nove immagini separate mi consente di creare un pannello a scorrimento per schermi piccoli e disporli in una griglia per schermi medi e grandi:

 <header> <img src="header-1.svg" alt="Ford Transit"> <img src="header-2.svg" alt=""> <img src="header-3.svg" alt=""> … <img src="header-9.svg" alt=""> </header> 

Sia l'elemento principale che quello laterale includono un titolo, un'immagine SVG di parti di Transit esplosa, oltre a divisioni per organizzare il mio contenuto in colonne:

 <main> <h1>…</h1> <div>…</div> <div>…</div> <svg>…</svg> </main> <aside> <h2>…</h2> <div>…</div> <div>…</div> <svg>…</svg> </aside>

Comincio applicando un colore di sfondo grigio scuro all'elemento del corpo e aggiungo lo stying ai miei titoli e paragrafi:

 body { background-color: #262626; font-family: 'sans-serif'; color: #fff; } h1, h2 { font-size: 2.027rem; font-style: italic; text-transform: uppercase; } p { font-size: .8rem; } 

Spesso, il flusso normale più alcuni stili di base sono tutto ciò di cui ho bisogno per implementare una versione su piccolo schermo dei miei progetti, ma questo include stili di layout dall'inizio. Comincio trasformando la mia intestazione e le sue nove immagini in un pannello a scorrimento orizzontale aggiungendo proprietà flex e overflow:

 header { display: flex; overflow-x: scroll; margin: 0 2rem 2rem; } header img:not(:last-of-type) { margin-right: 1rem; }

L'intestazione non è l'unico elemento per ottenere un layout su piccoli schermi, anche gli elementi principali e laterali ottengono griglie:

 main, aside { display: grid; margin: 0 2rem; }

Innanzitutto, applico un layout a due colonne all'elemento principale. L'immagine SVG delle parti di transito esplose si adatta alla colonna di destra, quindi ne fisso la larghezza a 100px. La colonna di sinistra si espande per riempire lo spazio rimanente.

 main { grid-template-columns: [content] 1fr [svg] 100px; }

Quindi, posiziono gli elementi dell'elemento principale usando le linee della griglia con nomi che riflettono il loro contenuto:

 h1 { grid-column: content; grid-row: 1; } main > div:nth-of-type(1) { grid-column: content; grid-row: 2; } main > div:nth-of-type(2) { grid-column: content; grid-row: 3; } main > svg { grid-column: svg; grid-row: 1 / 4; }

Anche l'elemento a lato ha una disposizione a due colonne, ma questa volta la colonna stretta e le sue parti di Transit esplose sono a sinistra. Per enfatizzare la distinzione tra le mie aree di contenuto principali e secondarie, aggiungo un bordo solido nella parte superiore della parte laterale:

 aside { grid-template-columns: [svg] 100px [content] 1fr; padding-top: 1rem; border-top: 3px solid #b22f65; }

Uso le linee con nome per posizionare il suo contenuto nella mia griglia:

 h2 { grid-column: 1 / -1; grid-row: 1; } aside > div:nth-of-type(1) { grid-column: content; grid-row: 2; } aside > div:nth-of-type(2) { grid-column: content; grid-row: 3; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 2 / 4; }

Un'intestazione e griglie a scorrimento orizzontale nel mio contenuto dimostrano come a volte sia utile utilizzare più di un layout a colonna singola per schermi di piccole dimensioni. Questi stessi elementi possono essere disposti in modi molto diversi nello spazio extra disponibile su schermi di medie dimensioni.

In questa versione del mio progetto, una griglia di nove immagini colorate complementari riempie l'intestazione. Applico le proprietà della griglia e tre colonne simmetriche:

 @media (min-width: 48em) { header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; overflow-x: visible; } } 

A differenza di altri elementi in questo design, non è necessario posizionare le immagini in questa griglia, poiché l'algoritmo di posizionamento automatico del browser le dispone automaticamente.

Per impostazione predefinita, i browser posizionano gli elementi orizzontalmente sulle righe. Ma, modificando il valore del flusso automatico della griglia in colonna, un browser riempie ogni colonna verticalmente prima di passare alla successiva:

Con più spazio disponibile per i miei contenuti, aumento il numero di colonne da due a quattro:

 main, aside { grid-template-columns: 1fr [svg] 1fr 1fr 1fr; gap: 2rem; }

Quindi, allineo il contenuto nel mio elemento principale fino alla fine, in modo che formi un blocco solido al centro del mio layout:

 main { align-items: end; }

Il mio titolo principale si estende su tutte e quattro le colonne. Sebbene appaia prima nel mio HTML, posso posizionarlo visivamente sotto il testo e le immagini in esecuzione aggiungendolo alla seconda riga:

 h1 { grid-column: 1 / -1; grid-row: 2; border-bottom: 3px solid #b22f65; }

Inserisco il mio primo blocco di contenuti nella colonna di sinistra:

 main > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }

Il secondo blocco si estende su due colonne a destra:

 main > div:nth-of-type(2) { grid-column: 3 / span 2; grid-row: 1; }

Successivamente, inserisco la divisione finale, che contiene la mia immagine SVG, nella seconda colonna usando il nome della riga:

 main > div:nth-of-type(3) { grid-column: svg; grid-row: 1; }

L'implementazione delle colonne per l'elemento aside segue un metodo simile. Ancora una volta, altero il posizionamento visivo del mio titolo usando i numeri di riga:

 h2 { grid-column: 3 / -1; grid-row: 2; } aside > div:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; } aside > div:nth-of-type(2) { grid-column: 3 / -1; grid-row: 1; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 1 / 3; } 

Un'immagine a pagina intera che riempie metà di uno spread è una vista comune nei design delle riviste. Immagini di grandi dimensioni come queste possono essere altrettanto efficaci sui display widescreen. Applico le proprietà della griglia all'elemento body con due colonne simmetriche, quindi nomino la colonna di sinistra verso e la colonna di destra recto:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: [verso] 1fr [recto] 1fr; gap: 2rem; } }

Questi termini hanno origine dal latino dove due pagine opposte sono dette folium rectum e folium versum. Metto la mia intestazione nella colonna verso e gli elementi principali e laterali si impilano nella colonna recto:

 header { grid-column: verso; grid-row: 1 / 4; } main, aside { grid-column: recto; } 

Infine, per migliorare la leggibilità del mio testo in esecuzione su display molto ampi, introduco un layout a più colonne. Un browser genererà automaticamente colonne larghe 10 em per riempire lo spazio disponibile:

 @media (min-width: 72em) { main > div:nth-of-type(2), aside > div:nth-of-type(2) { column-width: 10em; column-gap: 2rem; } }

Tipo scalabile di mascheramento

Essendo una persona a cui piacciono gli aspetti creativi del design tipografico, ma apprezza anche l'accessibilità e le prestazioni, SVG è diventato parte integrante del mio toolkit di sviluppo quotidiano come CSS e HTML.

Questo prossimo design ispirato a Thompson combina il testo SVG con maschere e forme CSS, ma richiede pochissimo HTML, solo un'intestazione e un elemento principale:

 <header> <div> <svg>…</svg> </div> <header> <main> <svg>…</svg> </main>

Prima di iniziare a sviluppare gli straordinari SVG, aggiungo stili di base che conferiscono alla pagina un colore di sfondo blu intenso e un testo bianco a contrasto:

 body { background-color: #1f455e; font-family: 'sans-serif'; color: #fff; } 

Questa intestazione include un grafico scalabile in cui il testo ripetuto è modellato da un contorno di un furgone di transito. SVG include il proprio metodo per ritagliare parti di un'immagine. Per definire un tracciato di ritaglio aggiungo un elemento clipPath al mio SVG. Questo, a sua volta, contiene un percorso che definisce la mia area ritagliata. Quindi posso fare riferimento a questo clipPath più avanti nel mio SVG, gli do un identificatore univoco:

 <svg> <clipPath> <path>…</path> </clipPath> </svg>

Quindi, aggiungo le coordinate del percorso che compongono il mio testo grafico. Assegno a questo gruppo di percorsi dai colori vivaci un valore di attributo di classe che posso usare per associarlo al mio clipPath:

 <svg> <clipPath>…</clipPath> <g class="transit"> <path>…</path> </g> </svg>

Sia che includa questo SVG nel mio HTML usando un elemento immagine, sia che incorpori l'SVG direttamente nel mio markup, utilizzo la proprietà CSS clip-path per ritagliare il mio testo grafico usando il suo clipPath:

 <style type="text/css"><![CDATA[ .transit { -webkit-clip-path: url(#transit); clip-path: url(#transit); } ]]></style>

Utilizzando clipPath, vengono visualizzate solo le aree all'interno di un tracciato di ritaglio. Qualsiasi cosa al di fuori dell'area ritagliata rimarrà invisibile.

Ma c'è un altro modo per mascherare un elemento, uno che funziona con tutti i tipi di contenuto, non solo SVG. Simile al percorso di clip, le maschere CSS nascondono parti di un elemento utilizzando un'immagine maschera in bianco e nero.

 header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }

Quando viene applicata una maschera, verranno visualizzate solo le aree di un elemento che coincidono con le parti nere della maschera. Tutto al di fuori di queste aree scomparirà.

Le proprietà di mask-image condividono molte somiglianze con gli sfondi nei CSS. Proprio come le immagini di sfondo, le maschere possono essere posizionate, ripetute e ridimensionate e possono anche essere sviluppate da gradienti di sfondo. Poiché non ho bisogno che l'immagine della mia maschera si ripeta, ho impostato il suo valore su no-repeat, proprio come farebbe con qualsiasi immagine di sfondo:

 header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } 

Il contenuto del mio SVG nell'elemento principale è completamente diverso. Questa grafica contiene linee di testo SVG dai colori vivaci che spiegano il pedigree del furgone Transit. Avvolgo ogni riga all'interno di un elemento tspan, ognuno con le proprie coordinate xey che racchiudono strettamente il testo in un blocco solido:

 <svg> <text> <tspan x="0" y="86">BUILT AS A PASSENGER VAN, MINIBUS, </tspan> <tspan x="0" y="156">CUTAWAY VAN CHASSIS, AND A PICKUP </tspan> <tspan x="0" y="226">TRUCK. OVER 8,000,000 TRANSIT VANS </tspan> <tspan x="0" y="296">HAVE BEEN SOLD, MAKING IT THE THIRD </tspan> <tspan x="0" y="366">BEST-SELLING VAN OF ALL TIME.</tspan> </text> </svg>

Gli elementi di testo SVG possono essere stilizzati come qualsiasi testo HTML, quindi per enfatizzare la solidità di questo blocco, scelgo un sans-serif condensato e pesante, quindi ne regolo il tracciamento riducendo la spaziatura delle lettere di -2px;

 text { font-family: 'sans-serif-condensed'; font-size: 83px; font-weight: 700; letter-spacing: -2px; }

I selettori di pseudo-classi CSS sono utili per lo stile degli elementi in SVG come lo sono per HTML. Uso i selettori dell'ennesimo tipo per dare a ogni riga di testo tspan il proprio colore:

 tspan:nth-of-type(1) { fill: #c43d56; } tspan:nth-of-type(2) { fill: #f2c867; } tspan:nth-of-type(3) { fill: #377dab; } tspan:nth-of-type(4) { fill: #fff; } tspan:nth-of-type(5) { fill: #c43d56; } 

Lo stile solido di questo design tipografico è un elemento di intestazione elegante, ma ci sono momenti in cui potrei aver bisogno di aggiungere più contenuti a questa pagina. Per una versione alternativa di questo progetto, aggiungo alla mia intestazione un paragrafo che spiega la storia della produzione del furgone Transit:

 <header> <div> <svg>…</svg> </div> <p>…</p> </header>

Nei miei stili di base, aggiungo una dimensione del carattere e imposto il paragrafo in maiuscolo in modo che corrisponda al mio precedente testo SVG:

 header p { font-size: .91rem; text-transform: uppercase; }

Quindi, giustifico il testo del paragrafo per le persone che utilizzano browser che supportano anche la sillabazione automatica:

 @supports (-webkit-hyphens: auto) or (hyphens: auto) { header p { -webkit-hyphens: auto; hyphens: auto; text-align: justify; } }

Su schermi di piccole e medie dimensioni, questo nuovo paragrafo di testo segue l'SVG dell'intestazione come nell'HTML. Ma, per schermi più grandi, voglio che questo testo fluttui accanto alla grafica mascherata.

Assegno all'intestazione grafica una larghezza esplicita basata su viewport, quindi la faccio fluttuare per consentirmi di avvolgere il mio testo attorno ad essa usando le forme CSS. Poiché voglio che questa forma corrisponda alla mia grafica mascherata, utilizzo la stessa immagine della maschera per l'URL esterno della forma:

 @media (min-width: 64em) { header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }

Simmetria di divisione

Per l'ultimo esempio ispirato in questo numero, e in effetti per l'intera serie, il layout simmetrico diviso significa che ho bisogno solo di due elementi strutturali. A questo punto, questi elementi di intestazione e principali dovrebbero sembrare molto familiari. La mia intestazione include il classico logo Ford, un'immagine SVG e un titolo:

<header> <svg>…</svg> <img src="header.svg" alt="Ford Transit"> <h1>…</h1> </header>

L'elemento principale include anche un'immagine scalabile, più un singolo paragrafo di testo in esecuzione:

 <main> <p>…</p> <img src="main.svg" alt=""> </main>

Come sempre, inizio prima il piccolo schermo aggiungendo stili di base a colori e tipografici. Questa volta, uno sfondo grigio chiaro, testo grigio scuro e un carattere tipografico sans-serif:

 body { background-color: #ededef; font-family: 'sans-serif'; color: #262626; } h1 { text-align: center; text-transform: uppercase; }

L'intestazione appare per prima nel mio HTML, quindi lo modellerò anche prima dandogli uno sfondo grigio scuro e un testo più chiaro che è l'inverso dei miei stili di corpo:

 header { margin-bottom: 2rem; padding: 2rem; background-color: #262626; color: #ededef; } 

Infine, per i piccoli schermi, centra il logo orizzontalmente e ne limito la larghezza massima a metà di quella del viewport:

 #logo { margin: 0 auto 2rem; max-width: 50vw; }

Questo design assume più un aspetto ispirato a Thompson con lo spazio extra disponibile su schermi di medie dimensioni. Ho bisogno di posizionare gli elementi nell'intestazione e negli elementi principali, quindi aggiungo le proprietà della griglia e quattro colonne simmetriche a entrambi:

 @media (min-width: 48em) { header, main { display: grid; grid-template-columns: repeat(4, 1fr); } }

Quindi, aggiungo tre righe esplicite alla mia intestazione. Il primo e l'ultimo sono alti 100px, mentre la riga centrale si espande per riempire tutto lo spazio rimanente:

 header { grid-template-rows: 100px auto 100px; }

Ora è il momento di inserire quegli elementi di intestazione nelle mie colonne e righe usando i numeri di riga. Il logo Ford viene prima e si inserisce nelle due colonne centrali. Il titolo è l'ultimo e si trova in fondo mentre copre l'intera larghezza. Assegno a entrambi gli elementi un valore z-index più alto, in modo che appaiano più vicini allo spettatore nell'ordine di sovrapposizione:

 #logo { grid-column: 2 / 4; grid-row: 1; z-index: 2; } h1 { grid-column: 1 / -1; grid-row: 3; z-index: 2; }

Quindi, posiziono l'immagine dell'intestazione, in modo che copra ogni colonna e tutte le righe. Dandogli un valore z-index inferiore, mi assicuro che si ritiri in fondo all'ordine di impilamento:

 header img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

Con gli stili per l'immagine di intestazione in atto, aggiungo un selettore che applica esattamente gli stessi stili all'immagine nel mio elemento principale:

 header img, main img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

Sebbene il testo verticale non si adatti a tutti i progetti, può trasformare un breve passaggio in una forte dichiarazione visiva. Cambio la modalità di scrittura del paragrafo in vertical-rl e ne aumento l'interlinea usando le unità basate su viewport:

 main p { line-height: 3vw; white-space: pre-wrap; writing-mode: vertical-rl; }

Per un tocco finale decorativo, cambio il suo colore e applico un metodo di fusione con un valore di differenza che aumenta anche la leggibilità di questo testo dove appare sullo sfondo grafico:

 main p { color: #f4eBd5; mix-blend-mode: difference; } 

Inserisco il paragrafo nelle due colonne centrali, lo allineo centralmente, quindi aggiungo un valore z-index più alto per assicurarmi che appaia nella parte superiore dell'ordine di sovrapposizione di questo elemento:

 main p { grid-column: 2 / 4; grid-row: 1 / 4; align-self: center; z-index: 2; } 

Finora, questo contenuto principale viene dopo la mia intestazione nel flusso del documento. Per schermi più grandi, voglio che quegli elementi si trovino fianco a fianco, quindi applico le proprietà della griglia e due colonne simmetriche al corpo:

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

Rimanere ispirato

Quando ho deciso di produrre questa serie, volevo insegnare alle persone l'importanza dell'ispirazione al di fuori del web. Il mio obiettivo era dimostrare che esaminare le sfide che i designer di altri media hanno dovuto affrontare e il modo in cui si sono avvicinati a risolverle può aiutarci a creare prodotti e siti Web più distintivi, accattivanti e, in definitiva, di successo.

Naturalmente, questa serie graffia a malapena la superficie e puoi trovare esempi stimolanti in molti più posti di quelli che ho descritto qui. Fai un giro nella galleria d'arte, libreria, museo o negozio di dischi più vicino e ti ritroverai circondato da input e ispirazione.

Spero che questa serie ti abbia ispirato a pensare a come progetti per il web in modo diverso. Esempi di design provenienti da altri media e periodi storici sono rilevanti per il web moderno? Certo, lo sono. Possiamo imparare dal passato mentre inventiamo il futuro? Assolutamente. Abbiamo le tecnologie e gli strumenti per fornire progetti più ispirati per il web? Non ci sono dubbi su questo.

Sono stato contento che la risposta a questa serie sia stata straordinariamente positiva, ma so che c'è molto di più che posso fare. Questa serie potrebbe volgere al termine, ma sono iniziati i lavori su un nuovo libro, Inspired Design for the Web. Questo libro inizierà dove è finita la direzione artistica per il Web, mostrerà altri esempi di design ispirato e approfondirà come possiamo imparare le lezioni e applicarle per migliorare i nostri siti Web e prodotti.

Leggi di più dalla serie

1. Decisioni di design ispirate: rivista Avaunt
2. Decisioni di design ispirate: questioni urgenti
3. Decisioni di design ispirate: Ernest Journal
4. Decisioni progettuali ispirate: Alexey Brodovitch
5. Decisioni di design ispirate: Bea Feitler
6. Decisioni progettuali ispirate: Neville Brody
7. Decisioni progettuali ispirate: Otto Storch
8. Decisioni di design ispirate: Herb Lubalin
9. Decisioni progettuali ispirate: Max Huber
10. Decisioni progettuali ispirate: Giovanni Pintori
11. Decisioni di design ispirate: Emmett McBain
12. 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.