Decisioni di design ispirate con Emmett McBain: Art Direction As Social Equity

Insieme alla pubblicità, la vendita è un'abilità che le persone spesso disapprovano. È vero: a nessuno piace che qualcuno lo costringa o lo inganni, e a nessuno piace essere interrotto.

Ma essere venduto bene, da un venditore che comprende le tue aspirazioni, motivazioni e bisogni, può essere un'esperienza che avvantaggia acquirenti e venditori.

Imparare a vendere è stata una delle cose migliori che ho fatto all'inizio della mia vita lavorativa. All'epoca vendevo attrezzatura fotografica e, sebbene non mi piacesse mai lo stress derivante dal raggiungimento degli obiettivi di vendita, mi piaceva sempre incontrare i fotografi.

Trovare nuovi clienti significava spesso telefonare, bussare alla porta di uno studio e spesso essere rifiutati. Ho passato del tempo a parlare del lavoro di qualcuno prima di menzionare i prodotti che la mia azienda mi ha pagato per vendere. Ero sinceramente interessato alla fotografia, ma avevo anche imparato che capire i problemi di qualcuno era fondamentale quanto spiegare come i miei prodotti potessero aiutarli a risolverli.

Quello che ho imparato mi è servito incommensurabilmente bene da quando ho smesso di vendere macchine fotografiche e ho iniziato a vendere il mio talento. Mi ha aiutato a trattare con le persone, non ultimo nel presentare (leggi: vendere) le mie idee ai clienti.

È un dato di fatto che non sempre l'idea migliore o la migliore esecuzione vince una presentazione o una presentazione. Spesso è l'idea che viene venduta dal miglior venditore.

Vendere idee dovrebbe diventare una delle tue migliori abilità, quindi impara a vendere. Impara come parlare del tuo lavoro in modo che la persona a cui vendi comprenda le tue idee e perché dovrebbe comprarle da te. Impara a ispirare le persone con le tue parole e con il tuo lavoro. Falli sentire come se facessero così tanto parte delle tue idee che devono semplicemente acquistare da te.

Come grafico nero americano che ha lavorato nella pubblicità negli anni '50, '60 e '70, Emmett McBain non solo aveva un talento incredibile, ma sapeva anche come vendere ad altri afroamericani.

Sapeva che per vendere i prodotti dei suoi clienti, i suoi design dovevano entrare in risonanza con il pubblico nero, mostrando immagini a cui si relazionavano e un linguaggio che era loro familiare.

Da inglese dalla barba grigia, non è facile per me capire prospettive culturali diverse dalle mie. Ma ho imparato il valore di creare progetti che parlino alle persone qualunque sia l'aspetto e ovunque vivano. Non solo per vendere loro i prodotti dei miei clienti, ma perché tutti sentano che i loro bisogni vengono ascoltati e la loro importanza viene compresa.

Nato a Chicago nel 1935, Emmett McBain è stato un grafico afroamericano il cui lavoro ha avuto un notevole impatto sulla rappresentazione degli afroamericani nella pubblicità.

McBain ha studiato in diverse scuole d'arte e si è diplomato dopo aver studiato arte commerciale all'American Academy of Art di Chicago.

Vince Cullers and Associates, la prima agenzia pubblicitaria a servizio completo di proprietà di afroamericani negli Stati Uniti, è stata fondata nel 1958. Cullers credeva che "vendere il nero" richiedesse "pensare in nero" se gli inserzionisti volevano raggiungere i consumatori afroamericani. Non solo ha venduto agli afroamericani, ma ha contribuito a educarli alla pubblicità e ad assumerli nella sua agenzia. Uno di questi dipendenti era il neolaureato Emmett McBain.

Con due anni di esperienza commerciale alle spalle, McBain ha lasciato Vince Cullers e si è trasferito alla Playboy Records come assistente al montaggio artistico. Ma non è rimasto a lungo in un ruolo da giovane ed è diventato rapidamente il direttore artistico della promozione di Playboy. McBain si è ritagliato una nicchia come artista di copertina e nel 1958 la sua copertina dell'album Playboy Jazz All-Stars è stata nominata Copertina dell'album della settimana di Billboard Magazine.

Nel 1959, McBain lasciò Playboy, ma non lasciò il suo lavoro sulle copertine degli album. Il suo studio di design appena fondato McBain Associates ha lavorato regolarmente con la Mercury Records e all'età di 24 anni ha disegnato oltre 75 copertine di album.

McBain è tornato a Vince Cullers Advertising come direttore creativo nel 1968 e ha dato alcuni dei suoi contributi più importanti alla pubblicità per i neri americani.

Prima degli anni '60, i consumatori neri erano ampiamente ignorati dai produttori di marca e dall'industria pubblicitaria tradizionale che li serviva. La pubblicità agli afroamericani era limitata principalmente ai giornali specifici per il pubblico nero.

I clienti bianchi erano reticenti a spendere soldi per vendere agli afroamericani poiché gli inserzionisti consideravano i consumatori neri con poco reddito disponibile. Nell'atmosfera politicamente carica dell'epoca, le aziende avevano anche paura di associare i loro marchi agli afroamericani.

Anche gli afroamericani non erano rappresentati nel settore pubblicitario e il numero di neri che lavoravano nella pubblicità era esiguo. Ma, a metà degli anni '60, le agenzie pubblicitarie iniziarono a reclutare afroamericani. Queste agenzie speravano che le loro esperienze rendessero i messaggi dei clienti più facilmente riconoscibili per il pubblico afroamericano che, a quel punto, spendeva quasi 30 miliardi di dollari ogni anno.

Il lavoro di McBain presentava messaggi positivi per gli afroamericani e la comunità nera. Ha utilizzato immagini di persone comuni in un ambiente abituale per clienti che includevano le sigarette al mentolo di Newport, la Marlboro di Philip Morris e i prodotti di bellezza di SkinFood Cosmetics specifici per la pelle nera. Come Vince Cullers, McBain sapeva che vendere ai consumatori neri significava comprendere le loro diverse esigenze. Capì che - come disse il suo futuro partner, il copywriter Thomas Burrell - "I neri non sono bianchi dalla pelle scura".

Nel 1971, Emmett McBain ha collaborato con Burrell per formare Burrell-McBain Inc., che hanno descritto in una pubblicità come "Un'agenzia pubblicitaria per il mercato commerciale nero". Piuttosto che sfruttare i neri americani, Burrell e McBain miravano a formare relazioni autentiche e rispettose con il pubblico nero.

Prima di Burrell e McBain, l'iconico cowboy bianco era il volto delle sigarette Marlboro. Ma l'uomo Marlboro di McBain era più riconoscibile per i fumatori afroamericani. Mentre il cowboy di Marlboro è stato mostrato in una versione idealizzata del West americano, i personaggi neri di McBain sono stati visti fumare nell'ambiente di tutti i giorni.

La loro campagna Marlboro è stata un enorme successo e Burrell e McBain hanno continuato a vincere Coca-Cola e McDonald's come clienti, aiutandoli a diventare la più grande agenzia pubblicitaria di proprietà dei neri in America.

McBain lasciò l'agenzia che aveva co-fondato nel 1974 e iniziò la carriera di artista. Ha aperto la sua galleria d'arte, The Black Eye, e ha formato una società di consulenza, chiamata anche The Black Eye, che ha aiutato le agenzie a connettersi meglio con la comunità afroamericana.

Emmett McBain è morto di cancro nel 2012 e da allora è stato riconosciuto dall'AIGA, dalla Society of Typographic Arts e dagli Art Directors Clubs di Chicago e Detroit.

Purtroppo, non è stato pubblicato un libro su Emmett McBain e il suo contributo alla pubblicità e al design. Non ho sentito il suo nome menzionato a conferenze di design né l'ho visto citato in articoli relativi al design moderno e in particolare al web.

Il lavoro successivo di McBain ha avuto un profondo impatto sulla pubblicità dagli anni '60 in poi, ma sono particolarmente affezionato ai suoi design per le copertine dei dischi. L'esplosione di energia che riflette la musica jazz che McBain amava. I suoi colori sono eccitanti e vibranti. La sua scelta dei caratteri tipografici e il modo in cui ha decostruito e ricostruito i caratteri sono stimolanti. C'è molto da ispirarci nel lavoro di Emmett McBain.

Allineamento del contenuto verticale

Qualunque sia lo stile grafico che scelgo, l'HTML necessario per implementare questo primo design ispirato a McBain è identico. Ho bisogno di tre elementi strutturali; un'intestazione che contiene il mio logo SVG e i titoli, principale, e una parte che include una tabella dei numeri di produzione di Citroen DS:

 <header> <svg>…</svg> <div> <svg>…</svg> <svg>…</svg> </div> </header> <main> <p>…</p> </main> <aside> <table>…</table> </aside>

Per la scalabilità tra le dimensioni dello schermo, utilizzo SVG per i due titoli nell'intestazione. L'uso di SVG fornisce un ulteriore grado di coerenza per il testo accarezzato del secondo titolo, ma non devo dimenticare l'accessibilità.

Nel numero 8, ho spiegato come aiutare le persone che usano la tecnologia assistiva usando l'aggiunta di ARIA agli SVG. Aggiungo un attributo di ruolo ARIA, oltre a un attributo di livello che sostituisce la semantica mancante. L'aggiunta di un elemento del titolo aiuta anche la tecnologia assistiva a comprendere la differenza tra diversi blocchi di SVG, ma i browser non visualizzeranno questo titolo:

 <svg role="heading" aria-level="1" aria-label="Citroen DS"> <title>Citroen DS</title> <path>…</path> </svg>

Per iniziare questo progetto, aggiungo stili di base di base per ogni dimensione dello schermo a partire dai colori di primo piano e di sfondo:

 body { background-color: #fff; color: #262626; }

Aggiungo dimensioni precise in pixel agli elementi SVG nella mia intestazione, quindi utilizzo i margini orizzontali automatici per centrare il logo Citroen:

 header > svg { margin: 0 auto; width: 80px; } header div svg { max-height: 80px; }

Nel suo design ispiratore, Emmet McBain ha incluso strisce nere verticali per aggiungere struttura al suo layout. Per ottenere un effetto simile senza aggiungere elementi extra al mio HTML, aggiungo bordi scuri su entrambi i lati sinistro e destro del mio paragrafo principale:

 main p { padding: .75rem 0; border-right: 5px solid #262626; border-left: 5px solid #262626; }

La stessa tecnica aggiunge un effetto simile alla mia tabella dei numeri di produzione di Citroen DS. Aggiungo i due bordi esterni alla mia tabella:

 aside table { width: 100%; border-right: 5px solid #262626; border-left: 5px solid #262626; border-collapse: collapse; }

Quindi, aggiungo una terza regola a destra delle intestazioni della mia tabella:

 aside th { padding-right: .75rem; padding-left: .75rem; border-right: 5px solid #262626; }

Garantendo che ogni cella riempia metà della larghezza della mia tabella, questa striscia verticale corre lungo il centro, dall'alto verso il basso:

 aside th, aside td { width: 50%; box-sizing: border-box; }

Quando qualcuno legge dati tabulari numerici come queste coppie di anni e numeri di produzione, i suoi occhi scansionano la colonna dell'anno. Quindi, seguono per vedere quante auto Citroen ha prodotto durante quell'anno. Le persone potrebbero anche confrontare i numeri di produzione cercando numeri alti o bassi.

Per facilitare i loro confronti, allineo i numeri di produzione a destra:

 aside td { text-align: right; }

A seconda delle funzionalità OpenType disponibili nel carattere che hai scelto, puoi anche migliorare la leggibilità dei dati tabulari specificando il rivestimento anziché i numeri vecchio stile. Alcuni numeri vecchio stile, inclusi 3, 4, 7 e 9, hanno discendenti che possono scendere al di sotto della linea di base. Questi rendono più difficili da leggere stringhe di numeri più lunghe. I numeri di rivestimento, d'altra parte, includono numeri che si trovano sulla linea di base.

Le funzionalità di OpenType controllano anche la larghezza dei numeri, il che semplifica il confronto di stringhe di numeri in una tabella. Mentre i numeri proporzionali possono avere dimensioni diverse, i numeri tabulari hanno tutti la stessa larghezza, quindi decine, centinaia e migliaia saranno allineati in modo più preciso:

 aside td { font-variant-numeric: lining-nums tabular-nums; }

Infine, introduco il motivo del cerchio nella parte inferiore di questo piccolo schermo. Non voglio includere queste immagini circolari nel mio HTML, quindi utilizzo un URI di dati di contenuto generato CSS in cui il file di immagine è codificato in una stringa:

 aside:after { content: url("data:image/svg+xml…"); }

Sono spesso sorpreso di quante poche modifiche devo apportare per sviluppare progetti per schermi di dimensioni multiple. Il passaggio da schermi piccoli a design di medie dimensioni spesso richiede solo piccole modifiche alle dimensioni dei caratteri e l'introduzione di stili di layout semplici.

Comincio allineando orizzontalmente il logo Citroen e i titoli SVG nell'intestazione. Su schermi medi e grandi, questo logo viene prima nel mio HTML e i titoli vengono per secondo. Ma visivamente gli elementi sono invertiti. Flexbox è lo strumento ideale per effettuare questo passaggio, semplicemente modificando il valore predefinito di flex-direction da row a flex-direction: row-reverse:

 @media (min-width: 48em) { header { display: flex; flex-direction: row-reverse; align-items: flex-start; } }

In precedenza, ho dato al mio logo una larghezza precisa. Ma voglio che i titoli riempiano tutto lo spazio orizzontale rimanente, quindi do alla loro divisione padre un valore di crescita flessibile di 1. Quindi, aggiungo un margine basato sulla vista per mantenere separati i titoli e il logo:

 header div { flex-grow: 1; margin-right: 2vw; }

Per questo progetto di medie dimensioni, ho sviluppato il layout utilizzando una griglia simmetrica a tre colonne, che applico sia agli elementi principali che a quelli laterali:

 main, aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

Quindi, usando la stessa tecnica che ho usato in precedenza per l'elemento aside, genero due immagini per l'elemento principale e le inserisco nella prima e nella terza colonna della mia griglia:

 main:before { grid-column: 1; content: url("data:image/svg+xml…"); } main:after { grid-column: 3; content: url("data:image/svg+xml…"); }

Ripeto il processo per l'elemento a lato, con questo nuovo :dopo che il contenuto ha sostituito l'immagine generata che ho aggiunto per i piccoli schermi:

 aside:before { grid-column: 1; content: url("data:image/svg+xml…"); } aside:after { grid-column: 3; content: url("data:image/svg+xml…"); }

Lo spazio extra disponibile su schermi di medie dimensioni mi consente di introdurre più motivi a strisce verticali, che si ispirano al design originale di Emmett McBain. I bordi verticali a sinistra e a destra del paragrafo principale sono già al loro posto, quindi tutto ciò che resta da me è cambiare la sua modalità di scrittura in verticale-rl e ruotarlo di 180 gradi:

 main p { justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }

Alcuni browser rispettano le proprietà della griglia e allungano una tabella per l'intera altezza della riga della griglia senza aiuto. Altri hanno bisogno di un piccolo aiuto, quindi per loro do alla mia tabella dei numeri di produzione un'altezza esplicita che aggiunge una quantità pari di spazio tra le sue righe:

 aside table { height: 100%; }

L'effetto completo di questo design ispirato a McBain arriva quando gli schermi sono sufficientemente ampi da visualizzare gli elementi principali e laterali affiancati. Applico una semplice griglia simmetrica a due colonne:

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

Quindi, posiziono gli elementi principali e laterali usando i numeri di riga, con l'intestazione che copre l'intera larghezza del mio layout:

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

Sembra non strutturato

I colori vivaci e le forme irregolari dei blocchi in questo prossimo progetto sono inaspettati come il jazz che ha ispirato l'originale di Emmett McBain. Mentre la disposizione di questi layout potrebbe sembrare non strutturata, il codice di cui ho bisogno per svilupparlo certamente non lo è. Infatti, gli elementi strutturali sono solo due, header e main:

 <header> <svg>…</svg> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <small>…</small> <h2>…</h2> <p>…</p> </main>

Comincio applicando i colori di sfondo e di primo piano, oltre a una generosa quantità di riempimento per consentire agli occhi di qualcuno di vagare intorno e attraverso gli spazi del design:

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

Quei blocchi dai colori vivaci dominerebbero lo spazio limitato disponibile su un piccolo schermo. Invece, aggiungo gli stessi colori vivaci alla mia intestazione:

 header { padding: 2rem 2rem 4rem; background-color: #262626; } header h1 { color: #c2ce46; } header p { color: #fc88dc; }

Le forme irregolari sono un aspetto di questo design che voglio visibile a tutte le dimensioni dello schermo, quindi utilizzo un percorso poligonale per ritagliare l'intestazione. Rimangono visibili solo le aree all'interno dell'area di ritaglio, tutto il resto diventa trasparente:

 header { -webkit-clip-path: polygon(…); clip-path: polygon(…); }

L'attenzione anche ai più piccoli dettagli tipografici fa sapere alle persone che ogni aspetto di un design è stato attentamente considerato. Una linea orizzontale nell'elemento piccolo all'inizio del mio contenuto principale cambia lunghezza insieme al testo.

Non voglio aggiungere una regola orizzontale di presentazione al mio HTML e optare invece per una combinazione di Flexbox e pseudo-elementi nel mio CSS. Per prima cosa, modello il testo del piccolo elemento:

 main small { font-size: .8em; letter-spacing: .15em; line-height: .8; text-transform: uppercase; }

Quindi, aggiungo uno pseudo-elemento :after con un bordo inferiore sottile che corrisponde al colore del mio testo:

 main small:after { content: ""; display: block; margin-left: .75rem; border-bottom: 1px solid #262626; }

L'aggiunta di proprietà flessibili allinea il testo e il mio pseudo-elemento nella parte inferiore dell'elemento piccolo. Dando allo pseudo-elemento un valore di flex-grow di 1 gli consente di cambiare la sua larghezza per completare stringhe di testo più lunghe e più corte:

 main small { display: flex; align-items: flex-end; } main small:after { flex-grow: 1; }

Mi piacciono le sorprese e nel mio titolo di secondo livello "Champion de France" c'è di più di quanto sembri.

Quasi dieci anni fa, Dave Rupert ha rilasciato Lettering.js, un plug-in jQuery che utilizza Javascript per avvolgere singole lettere, righe e parole con elementi span. Questi elementi separati possono quindi essere stilizzati in molti modi. Con un solo elemento multicolore in questo disegno, applico la stessa tecnica senza servire una sceneggiatura:

 <h2>Champion <span>d</span><span>e</span> <span>F</span><span>r</span><span>a</span><span>n</span><span>c</span><span>e</span></h2>

Quindi, do a ogni lettera selezionata il suo colore:

 h2 span:nth-of-type(1) { color: #c43d56; } h2 span:nth-of-type(2) { color: #905dd8; } h2 span:nth-of-type(3) { color: #377dab; }

Ho sempre visto la sfida del responsive design come un'opportunità per essere creativi e per sfruttare al meglio ogni dimensione dello schermo. Lo spazio extra disponibile su schermi medi e grandi mi permette di introdurre i grandi blocchi di colore di forma irregolare, che rendono questo progetto inaspettato.

Innanzitutto, applico le proprietà della griglia e una griglia simmetrica a otto colonne all'elemento body:

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

Quindi, inserisco la mia intestazione in tre di quelle colonne. Con i blocchi colorati ora visibili, cambio il colore di sfondo dell'intestazione in un grigio scuro:

 header { grid-column: 4 / 7; background-color: #262626; }

Centrare il contenuto sia orizzontalmente che verticalmente era una sfida prima di Flexbox, ma ora allineare e giustificare il contenuto dell'intestazione è semplice:

 header { display: flex; flex-direction: column; align-items: center; justify-content: center; }

Cambio il colore degli elementi di testo della mia intestazione:

 header h1 { color: #fed36e; } header p { color: #fff; }

Quindi, applico margini orizzontali negativi, quindi la mia intestazione si sovrappone agli elementi vicini ad essa:

 header { margin-right: 1.5vw; margin-left: -1.5vw; }

Il mio elemento principale non ha bisogno di uno stile aggiuntivo e lo metto sulla mia griglia usando i numeri di riga:

 main { grid-column: 7 / -1; }

Gli elementi necessari per sviluppare un design non devono essere in HTML. Gli pseudo-elementi creati in CSS possono prendere il loro posto, il che mantiene l'HTML libero da qualsiasi presentazione. Io uso un :before pseudo-elemento applicato al corpo:

 body:before { display: block; content: ""; }

Quindi, aggiungo un'immagine di sfondo dell'URI di dati che coprirà l'intero pseudoelemento indipendentemente dalle sue dimensioni:

 body:before { background-image: url("data:image/svg+xml…"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; }

CSS Grid tratta gli pseudo-elementi come qualsiasi altro, permettendomi di posizionare quei blocchi colorati nella mia griglia usando i numeri di riga:

 body:before { grid-column: 1 / 4; }

Mentre gli sviluppatori utilizzano principalmente i punti di interruzione delle query multimediali per introdurre modifiche significative a un layout, a volte sono necessarie solo modifiche minori per modificare un design. Jeremy Keith chiama questi momenti "punti di svolta".

Questo design di ispirazione McBain di medie dimensioni funziona bene con dimensioni maggiori, ma voglio modificarne il layout e aggiungere più dettagli agli schermi più grandi. Comincio aggiungendo quattro colonne extra alla mia griglia:

 @media (min-width: 82em) { body { grid-template-columns: repeat(12, 1fr); } }

Quindi riposiziono i blocchi di colore generati, l'intestazione e gli elementi principali utilizzando nuovi numeri di riga:

 body:before { grid-column: 1 / 8; } header { grid-column: 7 / 10; } main { grid-column: 9 / -1; }

Questi elementi ora si sovrappongono, quindi per evitare che formino nuove righe nella mia griglia, assegno a tutti lo stesso valore di riga della griglia:

 body:before, header, main { grid-row: 1; }

Questa modifica al mio design aggiunge un altro blocco di colore tra l'intestazione e il principale. Per preservare la semantica del mio HTML, aggiungo uno pseudo-elemento e un'immagine URI di dati prima del mio contenuto principale:

 main:before { display: block; content: url("data:image/svg+xml…"); float: left; margin-right: 2vw; width: 10vw; }

Decostruire le immagini di tipo

All'inizio della sua carriera, i design delle copertine dei dischi di Emmett McBain hanno mostrato che aveva un talento per la tipografia. Era spesso giocoso con il tipo, decostruendolo e ricostruendolo per formare forme inaspettate. Questo controllo sul tipo non è mai stato facile online, ma SVG rende quasi tutto possibile.

Il prossimo design ispirato a McBain si basa su SVG e solo due elementi HTML strutturali; un'intestazione che contiene la grande grafica type-based, un elemento principale per i miei contenuti:

 <header> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <h2>…<h2> <div>…</div> <svg>…</svg> </main>

Ho bisogno di pochissimi stili di base per iniziare a sviluppare questo design. Innanzitutto, aggiungo i colori di sfondo e di primo piano e il riempimento all'interno dei miei due elementi:

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

In secondo luogo, definisco gli stili per il mio tipo che include sia i titoli che il paragrafo di testo che li segue:

 h1, h2, h1 + p { letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }

Assegno al mio contenuto principale uno sfondo viola intenso che corrisponde al colore della Citroen nel pannello di fronte:

 main { background-color: #814672; color: #fff; }

Questo design è dominato da una grande grafica che include un profilo della Citroen DS e un'immagine tipo stilizzata delle parole "Champion de France". La disposizione delle sue lettere sarebbe difficile da realizzare utilizzando il posizionamento e le trasformazioni CSS, rendendo SVG la scelta perfetta.

Questo SVG contiene tre gruppi di percorsi. Il primo include i contorni delle parole "Champion de:"

 <svg> <g> <path>…</path> </g> </svg>

Il gruppo successivo include percorsi per la disposizione delle lettere dai colori vivaci. Assegno a ogni lettera un attributo id univoco per rendere possibile lo stile individuale:

 <g> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> </g>

Quindi, aggiungo gli attributi di classe al gruppo di percorsi che compongono il profilo Citroen DS. Con questi attributi attivi, posso regolare i colori dell'auto per completare diversi temi di colore e persino cambiarli tra i punti di interruzione delle query multimediali:

 <g> <path class="car-paint">…</path> <path class="car-tyres">…</path> <path class="car-wheels">…</path> <path class="car-shadow">…</path> <path class="car-lights">…</path> <path class="car-stroke">…</path> </g>

Gli schermi di medie dimensioni mi consentono di modificare le posizioni del mio profilo Citroen DS e di digitare l'immagine:

 @media (min-width: 48em) { header svg { margin-bottom: -6rem; transform: scale(.85) translateY(-4rem) rotate(-20deg); } }

L'ordine di queste trasformazioni è importante, poiché varie combinazioni di rotazione, scala e traslazione danno risultati leggermente diversi. Quindi, aggiungo colonne al mio contenuto principale:

 main div { column-width: 14em; column-gap: 2rem; }

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 dodici colonne al corpo:

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

Metto l'intestazione e il main nella mia griglia usando i numeri di riga. L'intestazione si estende su sette colonne, mentre il contenuto principale ne copre solo cinque, producendo un layout asimmetrico da una griglia simmetrica:

 header { grid-column: 1 / 8; } main { grid-column: 8 / -1; }

Ridimensionamento del testo grafico

La distinzione tra SVG e HTML è diventata offuscata, più uso SVG nel mio lavoro. SVG è un formato basato su XML ed è completamente a suo agio quando è incorporato in HTML. Questo design finale ispirato a McBain si basa su SVG in HTML non solo per le sue straordinarie immagini, ma anche per il testo.

Per sviluppare questo sorprendente design rosso e nero, ho bisogno di quattro elementi HTML strutturali. Un'intestazione contiene un'immagine dell'iconica Citroen DS. La divisione banner include un titolo di grandi dimensioni sviluppato utilizzando il testo SVG. L'elemento principale include il mio testo in esecuzione e, infine, una parte per il contenuto supplementare:

 <svg>…</svg> <header> <svg>…</svg> </header> <div> <svg>…</svg> </div> <main> <div> <svg role="heading" aria-level="1">…</svg> </div> <div class="content"> <p class="dropcap">…</p> <p>…</p> </div> </main> <aside> <small>…</small> <svg role="heading" aria-level="2">…</svg> <p>…</p> <figure>…</figure> <svg role="heading" aria-level="2">…</svg> <p>…</p> </aside>

Pensavo che l'utilizzo di SVG per il rendering del testo fosse inappropriato quanto l'impostazione del testo all'interno delle immagini, ma avendo usato di più SVG, mi rendo conto di aver sbagliato.

Nel numero 8, ho spiegato come, come il testo HTML, il testo SVG sia accessibile e selezionabile. Ha anche il vantaggio di essere infinitamente in grado di utilizzare lo stile utilizzando tracciati di ritaglio, riempimenti sfumati, filtri, maschere e tratti.

Il titolo della divisione banner include due elementi di testo. Il primo contiene la parola grande "Champion", il secondo contiene "de France". Coppie di coordinate xey su ciascun elemento tspan posizionano quelle parole esattamente dove voglio che sviluppino una solida lastra di testo:

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 850 360"> <title>Champion de France</title> <g fill="#ff" fill-rule="evenodd"> <text> <tspan class="title__dropcap" x="0" y="240">C</tspan> <tspan class="title" x="180" y="160">hampion</tspan> </text> <text> <tspan class="title__small" x="600" y="260">de France</tspan> </text> </g> </svg>

Sia che io scelga di incorporare questo SVG nel mio HTML o di collegarlo ad esso come immagine esterna, posso usare CSS per definirne lo stile. Questo titolo è un'immagine collegata, quindi aggiungo i miei stili al file SVG:

 <svg> <style type="text/css"> <![CDATA[ text { color: #fff; } .title { font-family: Clarendon URW; font-size: 150px; } .title__dropcap { font-family: Clarendon URW; font-size: 300px; text-transform: lowercase; } .title__small { font-family: Obviously; font-size: 85px; text-transform: uppercase; } ]]> </style> </svg>

Comincio aggiungendo il colore del fondotinta e gli stili tipografici. Ho scelto di far rientrare l'inizio di ogni nuovo paragrafo, quindi rimuovo tutti i margini inferiori e aggiungo un rientro largo 2 cancelli a ogni paragrafo successivo:

 body { background-color: #a73448; color: #fff; } .content p { margin-bottom: 0; } .content p + p { text-indent: 2ch; }

Lo sfondo grigio scuro e il testo rosso del mio elemento laterale sono opposti a quelli altrove nel mio design. L'aumento della luminosità e della saturazione rende i colori più vivaci su sfondi scuri:

 aside { background-color: #262626; color: #d33c56; }

Gli schermi di medie dimensioni mi consentono di modificare il design dei miei contenuti per ottenere il massimo dallo spazio extra disponibile. Uso due diverse proprietà di layout a più colonne. Innanzitutto, specificando due colonne di larghezza variabile per la divisione del mio contenuto. Quindi, qualsiasi numero di colonne che avranno tutte una larghezza di 16em:

 @media (min-width: 48em) { .content { column-count: 2; column-gap: 2rem; } aside { column-width: 16em; column-gap: 2rem; } }

La maggior parte del mio stile è visibile alle persone che utilizzano anche gli schermi più piccoli, quindi lo sviluppo di un layout per schermi di grandi dimensioni implica l'applicazione di proprietà della griglia e dodici colonne all'elemento del corpo:

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

Metto il logo Citroen nella prima colonna:

 body > svg { grid-column: 1; }

Quindi, l'intestazione che contiene un'immagine dell'iconico DS si estende su quattro colonne:

 header { grid-column: 3 / span 4; }

Sia la divisione banner con il suo elegante titolo SVG che il testo in esecuzione del mio contenuto principale occupano otto colonne:

 #banner, main { grid-column: 1 / span 8; }

E infine, l'elemento a parte a tema invertito occupa tre colonne a destra del mio progetto. Per assicurarmi che questo contenuto si estenda su ogni riga dall'alto verso il basso del mio layout, lo inserisco usando i numeri di riga di riga:

 aside { grid-column: 10 / -1; grid-row: 1 / 6; }

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 progettuali ispirate: Otto Storch
• Decisioni di design ispirate: Herb Lubalin
• Decisioni progettuali ispirate: Max Huber
• Decisioni progettuali ispirate: Giovanni Pintori
• 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.