Decisioni di design ispirate con Bea Feitler: una forza creativa inarrestabile

Anche se non hai studiato grafica alla scuola d'arte, potresti conoscere alcuni nomi famosi. Con oltre un secolo di direzione artistica commerciale, ci sono molti altri nomi da scoprire. Persone che hanno svolto un lavoro straordinario che può incoraggiarci e ispirarci a pensare al web in modo più creativo.

Scoprire persone con un talento incredibile è stato uno degli aspetti più gratificanti dello studio della direzione artistica. Imparare a conoscere un designer spesso mi porta a un altro e quando trovo qualcuno che ammiro per il lavoro, voglio capire non solo quello che ha realizzato, ma anche il motivo per cui lo ha realizzato.

Dopo aver appreso dell'influente lavoro di Alexey Brodovitch su Harper's Bazaar fino agli anni '50, volevo conoscere l'impatto che la sua eredità ha avuto sulla rivista. Questo mi ha portato a Bea Feitler e alla sua partner creativa Ruth Ansel che hanno diretto Harper's Bazaar negli anni '60.

Feitler è stata descritta come "l'art director donna pioniera di cui non hai mai sentito parlare". Non l'ho mai sentita menzionare a una conferenza di design o l'ho vista citata in un articolo sul web design.

Ma i design fiduciosi ed energici di Feitler sono solo una parte di ciò che rende la sua vita e il suo lavoro affascinanti. Ancora più importante è stato il modo in cui il suo lavoro rifletteva i cambiamenti nella società americana negli anni '60 e le scelte che aveva fatto per influenzarla.

È stata allestita una sola mostra sul suo lavoro e pubblicato un libro retrospettivo. "O Design de Bea Feitler", scritto da suo nipote, è stato pubblicato nel suo paese natale, il Brasile, nel 2012. Mi ci sono voluti mesi per rintracciarne una copia, ma alla fine ne ho trovata una. È il libro più costoso che ho comprato.

Feitler ha tanto da insegnare alle persone che progettano per il web quanto ai designer di riviste che l'hanno seguita. Spero di poter aiutare in qualche modo le persone ad innamorarsi del lavoro di Bea Feitler nel modo in cui l'ho fatto io.

Ispirato da Bea Feitler

Bea Feitler è nata a Rio de Janeiro nel 1938. Dopo aver lavorato a copertine di album, copertine di libri, riviste e design di poster, ha lasciato il Brasile e si è trasferita a Manhattan. Nel 1961 - e ancora a soli 25 anni - è diventata assistente artistica, poi una delle più giovani e prime co-direttrici donne di Harper's Bazaar insieme a Ruth Ansel.

Proprio come Alexey Brodovitch, che si era dimessa da Harper's Bazaar prima di trasferirsi negli Stati Uniti, le collaborazioni di Feitler con artisti e fotografi hanno contribuito a definire il suo lavoro. All'Harper's Bazaar, la fotografia di Richard Avedon della modella Jean Shrimpton nel suo famoso elmetto spaziale rosa, poi John Lennon nudo di Annie Leibovitz sulla copertina di Rolling Stone.

Sebbene Feitler non abbia mai incontrato Brodovitch, è affascinante vedere come abbia rispettato e sviluppato la sua eredità. Feitler capì che le pagine delle riviste dovevano essere costruite deliberatamente e individualmente, ma allo stesso tempo dovevano essere collegate tra loro per formare un ritmo armonioso.

Una rivista dovrebbe scorrere. Dovrebbe avere ritmo. Non puoi guardare una pagina da solo, devi visualizzare ciò che viene prima e dopo. Un buon design editoriale consiste nel creare un flusso armonico. — Bea Feitler

Feitler ha combinato la maestria di Brodovitch nella doppia pagina con le sue scelte di colori audaci ispirati dagli artisti pop Jasper Johns, Roy Lichtenstein e Andy Warhol, così come dalla moda di strada e dalla cultura giovanile.

Non aveva paura di sperimentare con i colori o di rompere con le convenzioni, posizionando due volte un testo verde cupo su uno sfondo rosa neon, prima per una copertina di Harper's Bazaar nell'aprile 1965 e poi per la rivista femminista Ms. nel dicembre 1972.

Nello studio Harper's Bazaar che condivideva con Ruth Ansel, un collage in continua evoluzione riempiva il loro muro di ispirazione; qualcosa per cui vorrei avere spazio nel mio piccolo studio. Feitler non aveva paura di mischiare i media e quando ha sentito che uno dei suoi spread più iconici non funzionava, ha combinato una delle fotografie più famose di Avedon con un pannello di un fumetto che aveva comprato in un'edicola a la strada sottostante.

I design di Feitler hanno influenzato e riflesso i cambiamenti nella società americana negli anni '60. Le riviste che ha diretto come arte avevano una qualità frenetica, quasi cinematografica, che si adattava perfettamente alla cultura dell'epoca ma è anche rilevante per il nostro lavoro online di oggi. Feitler credeva che un buon design editoriale consistesse nel creare un flusso armonioso. Questo è importante per la progettazione di esperienze utente coinvolgenti e percorsi dei clienti tanto quanto le pagine di una rivista.

Anche se alcune persone continuano a recitare il mantra che il web non è stampato, c'è molto che possiamo imparare dal lavoro di Feitler. I suoi progetti possono aiutarci a migliorare non solo il design editoriale online, ma anche siti di e-commerce e design di prodotti digitali.

Feitler ha detto che un libro era "50/50 da immagine a testo". Sul Web, dobbiamo consentire anche funzionalità interattive e video. Capire come combinare con successo questi componenti per creare un'esperienza coerente e coinvolgente è un'abilità fondamentale che ogni designer digitale dovrebbe sviluppare.

In qualità di mentore e insegnante, Feitler ha condiviso molti principi con Alexey Brodovitch. Ha incoraggiato i suoi studenti a sviluppare la propria direzione e molti di loro sono diventati importanti art director. Feitler era esigente e accettava niente di meno che i più alti standard di eccellenza del design da parte di tutti.

Mantieni le tue passioni e scava in profondità mentre ti fidi del tuo istinto. Esci da ciò che ci si aspetta. Abbraccia gli incidenti e sappi che alla fine scoprirai la soluzione perfetta a un dilemma creativo e sarai molto gioioso mentre lo fai. — Ruth Ansel

Purtroppo, Bea Feitler è morta di cancro nel 1982 a soli 44 anni. Credo che abbia tanto da insegnare a chi di noi progetta per il web quanto ai direttori artistici di riviste che l'hanno seguita. Spero che la sua vita e il suo lavoro ci influenzeranno ad avere coraggio nelle nostre convinzioni e fare le nostre scelte coraggiose e sicure.

#### La bellezza esplode

Harper's Bazaar's non aveva avuto un editore ospite prima, ma per la sua edizione dell'aprile 1965, il collaboratore di lunga data Richard Avedon ha curato e fotografato l'intero numero.

All'interno, Avedon ha fotografato Donyale Luna - la prima donna di colore ad apparire sulla copertina di una rivista di moda mainstream - e Paul McCartney che indossava una tuta spaziale presa in prestito dalla NASA. Per la copertina, Avedon ha scelto un'immagine della top model contemporanea Jean Shrimpton che indossa un elmetto spaziale che era stato realizzato da una delle modiste più famose di New York.

Avedon in seguito ha ricordato che alle 23:00 - dopo che la loro scadenza era scaduta - la fotografia che aveva scattato per la copertina non funzionava. Quindi, Feitler ha ritagliato la forma di un elmo dalla carta rosa Day-Glo e l'ha posizionato sopra la fotografia di Avedon. Nessun focus group, nessuna ricerca, nessun test del pubblico, solo una decisione progettuale coraggiosa e intuitiva.

Il risultato è stata una copertina che ha vinto la medaglia del New York Art Director's Club ed è stata collocata al numero quindici nell'elenco delle 40 migliori copertine di riviste dell'American Society of Magazine Editor del 2005.

⁵⁰ ⁄ ₅₀ da immagine a testo

Per implementare il mio primo progetto ispirato a Feitler, il mio obiettivo è utilizzare l'insieme più minimale di elementi strutturali; header più elementi main e aside per il contenuto. La mia intestazione contiene l'immagine divisa di un iconico Maggiolino Volkswagen e un titolo che include un logo Volkswagen SVG in linea. Poiché questo titolo non contiene testo, uso un'etichetta ARIA per descriverlo. Questo aiuterà le persone che usano le tecnologie assistive:

 <header> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <picture>…</picture> </header> <main>…</main> <aside>…</aside>

Per schermi più piccoli, ho bisogno solo di stili di base come flusso normale, gestisce il layout del mio layout a colonna singola. Innanzitutto, aggiungo un gradiente lineare dietro l'immagine dell'intestazione. I gradienti sono incredibilmente flessibili, ma nonostante la loro utilità sono sorprendentemente sottoutilizzati:

 header { padding: 1rem 2vw; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); text-align: center; }

Il mio gradiente inizia a sinistra con un grigio scuro e finisce a destra con il bianco. Senza interruzioni di colore, il risultato sarebbe una sfumatura uniforme tra quei colori, ma voglio una linea dura al centro della mia intestazione. Per ottenere questo effetto, posiziono due interruzioni di colore nella stessa posizione del 50% . Per cambiare la direzione del mio gradiente, non ho bisogno di regolare quelle percentuali. Posso semplicemente cambiare la direzione del gradiente da to right to left .

È importante mantenere un equilibrio costante del peso visivo adattando i progetti a schermi di diverse dimensioni. Non voglio che la mia immagine di intestazione sia così alta da spingere il mio testo in esecuzione fuori dal primo schermo, quindi ho impostato un'altezza massima di 75vh o tre quarti dell'altezza di un piccolo schermo:

 header img { max-height: 75vh; }

Per completare il design del mio piccolo schermo, stabilisco l' header come contesto di posizionamento. Quindi, posiziono assolutamente l'emblema Volkswagen e assicuro che la sua larghezza si adatti allo schermo utilizzando un'unità di larghezza del viewport di 5vw :

 header { position: relative; } h1 { position: absolute; top: 1rem; left: 1rem; width: 5vw; }

La mia immagine con orientamento verticale si adatta bene agli schermi alti, ma ho bisogno di un'immagine di formato più ampio per schermi più larghi che alti. L'orientamento è una query multimediale favolosa, ma usata di rado, che verifica l'orientamento di un viewport. Questa query multimediale può essere utilizzata nei fogli di stile come alternativa alle query di larghezza più convenzionali. Può anche essere applicato source di un elemento picture . Questa query scambia la mia immagine verticale con un'alternativa orizzontale ogni volta che la larghezza supera l'altezza, sia su un piccolo telefono che su un display di dimensioni desktop:

 <picture> <source media="(orientation: landscape)"> <img src="portrait.png" alt="Volkswagen Beetle"> </picture>

Per la mia progettazione del paesaggio alternativo, utilizzo Grid per posizionare gli elementi header , main e aside . Esistono diverse opzioni per posizionare questi elementi, comprese colonne e righe e aree modello, ma ho scelto di utilizzare grid-template-columns per definire una griglia simmetrica a due colonne sul body . Applico nuovamente il gradiente lineare e ne imposto l'altezza minima in modo che corrisponda alla vista completa:

 @media screen and (orientation: landscape) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; min-height: 100vh; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); } }

In orientamento orizzontale, la mia header riempie l'intera larghezza dello schermo. Poiché non ho più bisogno dell'immagine di sfondo a gradiente lineare su questo elemento, posso semplicemente rimuoverla:

 header { grid-column: 1 / -1; background-image: none; }

Ora, poiché questa griglia è così semplice, posiziono i miei elementi main e aside sulla griglia usando le linee con nome:

 main { grid-column: main; } aside { grid-column: aside; }

Il risultato finale è un design che adatta il suo layout a seconda che lo schermo del browser o del dispositivo sia in orientamento orizzontale o verticale.

#### Arte del fumetto

Bea Feitler combinava regolarmente fotografie con illustrazioni e l'arte dei fumetti appare nel lavoro durante la sua carriera.

Per Harper's Bazaar, ha posizionato una delle fotografie di Avedon di Jean Shrimpton che indossa una tuta spaziale su uno sfondo di un fumetto. Successivamente, nel 1973, ha incaricato la leggendaria fumettista Marie Severin di creare questa copertina per Ms. Magazine.

Enfatizzare la scala

Il Maggiolino Volkswagen era un'auto piccola con una grande personalità. Voglio che il mio prossimo progetto abbia un carattere da abbinare. Il design del grande schermo utilizza un'immagine enorme della ruota del Maggiolino per enfatizzare la piccolezza di quella piccola macchina. Ma, prima di arrivare a schermi di grandi dimensioni, voglio assicurarmi di mantenere un contrasto simile in scala su schermi piccoli.

Tre elementi strutturali costituiscono il markup di cui ho bisogno per implementare questo progetto; header per l'immagine della ruota grande, una figure che contiene l'immagine più piccola dell'auto e un testo principale per il mio testo in esecuzione. Poiché l' header non ha significato per chiunque utilizzi uno screen reader, scelgo di nasconderlo utilizzando un attributo aria-hidden :

 <header aria-hidden="true"> <img src="header.png" alt=""> </header> <figure> <img src="figure.png" alt="Volkswagen Beetle"> </figure> <main>…</main>

Gli stili di base e il flusso normale si prendono cura della maggior parte degli aspetti del design del mio piccolo schermo, ma ciò non significa che posso ignorare ciò che lo rende distintivo del concetto generale; il contrasto tra la ruota grande e la piccola Volkswagen. Per garantire che la mia header occupi sempre un terzo dell'altezza del viewport con uno spazio bianco identico tra esso e il mio contenuto, utilizzo le unità di altezza del viewport sia per l'altezza che per il margine:

 header { margin-bottom: 33vh; height: 33vh; } 

Un problema che incontro spesso quando si sviluppano layout flessibili è il ridimensionamento non intenzionale delle immagini. Con un'altezza fissa sulla mia header e una larghezza del 100% sulla sua immagine, la ruota gigante può distorcere. Fortunatamente, c'è un modo per preservarne le proporzioni usando la proprietà object-fit . Ci sono quattro opzioni possibili, più none :

1. contain
   Conserva le proporzioni di un'immagine mentre si adatta all'interno della casella del contenuto di un genitore.
2. cover
   Conserva le proporzioni di un'immagine, ma questa volta riempie l'intero riquadro. Quando ciò accade, le parti dell'immagine al di fuori della casella del contenuto verranno nascoste.
3. fill
   Un'immagine sarà distorta in modo che la sua larghezza e altezza corrispondano al suo genitore.
4. scale-down
   Simile a contenere, riduce le dimensioni di un'immagine o di un video per adattarlo all'interno del genitore.

Voglio che la mia ruota grande riempia completamente l'intestazione senza alterarne le proporzioni. Inoltre, non sono preoccupato che alcune parti dell'immagine vengano ritagliate, il che rende la cover la scelta giusta per object-fit :

 header img { object-fit: cover; object-position: center bottom; width: 100%; height: 100%; }

Ora l'immagine della ruota è in posizione, fornisco la scala confrontando le sue grandi dimensioni con un'immagine piccola dell'intera macchina. Limito la dimensione massima del Maggiolino a metà della larghezza della finestra e lo centra orizzontalmente usando i suoi margini:

 figure { margin: 0 auto; max-width: 50vw; }

Questo disegno utilizza uno sfondo grigio solido per rappresentare la strada, quindi aggiungo un colore di sfondo e sposto la figure in basso di 10px , in modo che le ruote del Maggiolino si trovino saldamente sull'asfalto:

 main { padding: 2rem; background-color: #f0f0f1; } figure { transform: translateY(10px); }

Schermi più grandi offrono l'opportunità di fare una grande impressione e, per questo design, voglio che l'immagine header occupi metà della larghezza e l'intera altezza di un grande schermo. Applico la stessa griglia composta 6+4 che ho usato per molti disegni in questa serie. Ha otto colonne a cui aggiungo tre righe. Assegno alle righe centrali e inferiori un'altezza fissa e permetto alla prima riga di occupare tutto lo spazio verticale rimanente:

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; grid-template-rows: 1fr 155px 155px; grid-column-gap: 2vw; } }

Voglio che il body riempia sempre l'intera altezza della finestra, quindi applico un'altezza minima di 100vh e utilizzo un gradiente lineare per creare l'illusione di una strada:

 body { min-height: 100vh; background-image: linear-gradient( to top, #f0f0f1 0%, #f0f0f1 155px, #fff 155px, #fff 100%); }

Usando i numeri di riga, posiziono l' header sulla griglia, in modo che occupi metà delle colonne e tutte le righe. L'allineamento della piccola figure la pone all'estremità del suo modulo griglia. Quindi, il main forma un'unica colonna stretta di testo in esecuzione:

 header { grid-column: 5 / -1; grid-row: 1 / 4; margin-bottom: 0; height: auto; background-color: #444; } figure { grid-column: 1 / 4; grid-row: 2; align-self: end; max-width: auto; } main { grid-column: 4; grid-row: 1 / 3; align-self: center; background-color: transparent; } 

Sapere come la scala influenzi la comprensione di una storia da parte di qualcuno è essenziale per raccontarla bene. La sola dimensione è raramente sufficiente da sola, quindi per avere un impatto significativo, l'ampiezza deve essere relativa alla dimensione di altri elementi.

Bea Feitler conosceva la scala e la usava bene. Spesso metteva in contrasto grandi elementi in primo piano con quelli più piccoli sullo sfondo per creare disegni che contenevano un'incredibile profondità. Ora possiamo seguire le sue orme utilizzando la scala per aggiungere impatto ai progetti di prodotti e siti web.

Scelte di colore sicure

La scelta sicura dei colori di Bea Feitler è stata uno dei tratti distintivi del suo lavoro e mi ha attratto immediatamente. Per il mio prossimo design ispirato a Feitler, metto a confronto un rosso intenso con un giallo vivace e inverto quei colori su entrambi i lati del design.

Sebbene questa pagina sia grande per il colore, è anche piccola per il markup. Ho bisogno solo di due elementi strutturali; un header e main . All'interno di entrambi ci sono una figure e una divisione:

 <header> <figure>…</figure> <div>…</div> </header> <main> <figure>…</figure> <div>…</div> </main>

I colori dello sfondo e del testo sono il punto di partenza per l'implementazione di questo design. Posso lasciare tutto il resto al flusso normale:

 body { background-color: #ba0e37; color: #f8d72e; } main { background-color: #f8d72e; color: #272732; } 

Per schermi di medie dimensioni, voglio che le figure e le divisioni all'interno della mia header e main occupino metà dell'altezza e della larghezza di qualsiasi finestra, quindi applico una griglia simmetrica a due colonne e un'altezza minima:

 @media screen and (min-width : 48em) { header, main { display: grid; grid-template-columns: 1fr 1fr; min-height: 50vh; } }

Metto la figure dell'intestazione nella seconda colonna e la divisione nella prima. Poiché questo è l'opposto dell'ordine dei contenuti, devo assegnarli entrambi alla stessa riga per evitare che una colonna cada sotto l'altra:

 header figure { grid-column: 2; header div { grid-column: 1; grid-row: 1; }

La figure e la divisione dell'elemento principale seguono l'ordine del contenuto, quindi non è necessario specificare una grid-row per loro:

 main figure { grid-column: 1; align-self: end; } main div { grid-column: 2; }

Voglio riempire gli schermi con il colore da un bordo all'altro. Per schermi più grandi, applico una griglia asimmetrica a due colonne che si estende per l'intera altezza del mio body :

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

In questo design a grande schermo, la figure e la divisione nella mia header e nella pila main sono verticalmente anziché orizzontalmente. Cambio la proprietà di display da grid a flex e imposto la direzione su column . Ma l'ordine visivo del main è opposto al suo ordine del contenuto, quindi cambio la sua direzione da colonna a colonna inversa:

 header, main { display: flex; flex-direction: column; } main { flex-direction: column-reverse; }

Quindi, per migliorare la leggibilità del mio testo in esecuzione, utilizzo il layout a più colonne e specifico una larghezza della colonna di 18em . Un browser genererà tutte le colonne di quella larghezza che rientreranno all'interno del suo elemento genitore:

 main div { column-width: 18em; column-gap: 2vw; }

Grandi blocchi di colore solido possono essere stancanti per gli occhi, quindi voglio romperli aggiungendo un motivo di immagine di sfondo giocoso e ripetuto al body usando SVG:

 body { background-image: url("data:image/svg+xml"); }

All'interno di SVG, specifico sia il colore di riempimento che impostare un'opacità di riempimento bassa per un effetto sottile:

 fill='#f8d72e' fill-opacity='0.1'

Applico la stessa immagine SVG allo sfondo giallo del mio main , questa volta cambiando il colore di riempimento in bianco e aumentando l' fill-opacity :

 main { background-image: url("data:image/svg+xml"); } fill='#fff' fill-opacity='0.2'

Il motivo e la trama giocano un ruolo importante in molte delle iconiche pubblicazioni di riviste di Bea Feitler, eppure sono caduti in disgrazia sul web. Successivamente, ti mostrerò come utilizzare i modelli CSS e SVG che aggiungeranno profondità ai tuoi progetti.

Motivo e trama aggiungono profondità

In questo prossimo design ispirato a Feitler, voglio trasmettere la sinuosità del Maggiolino Volkswagen usando i cerchi. Ho bisogno di un HTML minimo per implementare questo design ben fatto, solo tre elementi; header , main e a aside :

 <header aria-hidden="true"> <picture>…</picture> </header> <aside> <div><img></div> <div><img></div> </aside> <main> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <p>…</p> </main>

Non voglio che l' header venga annunciata dagli screen reader, quindi aggiungo un attributo aria-hidden con un valore di true . Voglio che i lettori di schermo descrivano la mia intestazione di primo livello, quindi aggiungo un attributo aria-labelledby a quello.

I punti in stile semitono aggiungono consistenza a questa pagina ed è facile implementare modelli come questo utilizzando più sfumature di sfondo e combinazioni di background-size dello background-position dello sfondo:

 body { background-color: #ba0e37; color: #fff; background-image: radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%), radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%); background-size: 6vw 6w; background-position: 0 0, 3vw 3vw; }

Spezzerò questo stile in tre passaggi:

1. Due gradienti radiali, separati da una virgola. Ogni sfumatura include due livelli di colore, il primo al 15% e il secondo al 16% che formano i punti.
2. Utilizzando le unità di larghezza della finestra per ridimensionare il motivo risultante, mantengo la dimensione del punto proporzionata alla larghezza della pagina.
3. Posiziona il primo gradiente radiale in alto a sinistra del viewport ( 0 0 ) e il secondo usando le unità di larghezza del viewport che sono la metà delle dimensioni dello sfondo.

Lea Verou è stata impegnata a compilare una galleria di modelli utili che ha sviluppato utilizzando gradienti lineari e radiali. Per quanto intelligente sia la galleria di Lea, c'è qualcosa nei gradienti contorti utilizzati per produrre modelli simili a immagini che mi infastidiscono.

I modelli SVG sembrano molto più appropriati. Sono altrettanto leggeri e sono molto più flessibili. Aggiungi SVG a un'immagine di sfondo utilizzando un URL e, se sei preoccupato per le richieste HTTP, incorpora un SVG in un foglio di stile come data:image :

 body { background-image: url("data:image/svg+xml"); }

La aside in questo disegno include due divisioni che contengono ciascuna immagini del favoloso frontale del Maggiolino. Taglio quelle divisioni in cerchi per completare le sue curve:

 aside div { -webkit-clip-path: circle(); clip-path: circle(); } 

Rendendo gli sfondi delle immagini completamente trasparenti, posso cambiare il colore delle loro divisioni principali ogni volta che ne ho bisogno. Aggiungo colori di sfondo leggermente trasparenti che consentono di mostrare i suggerimenti del motivo a punti:

 aside div:first-child { background-color: rgba(57,135,106,.9); } aside div:last-child { background-color: rgba(248,215,46,.9); }

Con così tanti colori e texture in questo design, il mio layout deve essere semplice, quindi applico una griglia asimmetrica a due colonne in cui la colonna più stretta non può mai ridursi al di sotto di 260px:

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 4fr minmax(260px, 1fr); } }

Per migliorare l'accessibilità e la leggibilità dei miei paragrafi di testo in esecuzione sullo schema rosso, aggiungo una sottile ombra discendente in un colore che corrisponde al mio sfondo:

 p { filter: drop-shadow(0 0 5px #ba0e37); } 

In passato, filtrare un'immagine per applicare una sfocatura, un cambio di colore o un'ombra discendente richiedeva l'aggiunta di effetti distruttivi in ​​un editor di immagini, ma oggi molti di quegli stessi filtri sono disponibili in CSS. Puoi applicare filtri anche ad altri elementi HTML.

L'applicazione di un filtro CSS è semplice. Innanzitutto, dichiara la funzione filtro e quindi un valore tra parentesi. Per ridurre l'opacità di un elemento al 25% usando un filtro, invece della proprietà di opacity , utilizzo il filtro di opacity :

 .ihatetimvandamme { filter: opacity(.25); }

Questi valori differiscono con ciascun filtro. Alcuni filtri utilizzano gradi, accettano l'uso di pixel, percentuali o decimali equivalenti. Ad esempio, .25 è uguale a 25% e 1 è equivalente a 100% .

Sono disponibili dieci filtri CSS di serie tra cui scegliere: blur , brightness , contrast , drop-shadow esterna , scala di greyscale , hue-rotate , invert , opacity , saturate e sepia . Puoi anche utilizzare la funzione URL per utilizzare un filtro personalizzato da SVG.

Voglio rimuovere tutto il colore dalla mia header e ridurne l' opacity 80% . Posso combinare un numero qualsiasi di filtri separandoli con uno spazio. È importante ricordare che un browser applicherà i filtri nell'ordine in cui sono specificati, quindi per il mio header , il colore verrà rimosso prima che l' opacity venga modificata:

 header { filter: grayscale(1) opacity(.8); }

Quando ho bisogno di un passaggio graduale tra i filtri e i valori CSS, posso aggiungere una transizione tra gli stati, magari aumentando l' opacity della mia header per una pseudo-classe : :hover :

 header { filter: grayscale(1) opacity(.8); transition: filter 1s linear; } header:hover { filter: grayscale(1) opacity(1); }

Posso usare CSS per sviluppare un'animazione più elaborata tra i filtri definendo prima i miei fotogrammi chiave, impostando i valori del filtro a qualsiasi percentuale compresa tra 0 e 100% della durata dell'animazione:

 @keyframes beetle { 0% { filter: grayscale(1) opacity(.8) blur(5px); } 50% { filter: grayscale(1) opacity(1) blur(0); } 100% { filter: grayscale(1) opacity(.8) blur(5px); } }

Assegno quindi questa animazione al mio header , usando animation-name più i valori per animation-duration , animation-delay e altre impostazioni facoltative:

 header:hover { animation-name: beetle; animation-delay: 0s; animation-direction: alternate; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: linear; }

Una Kravets ha ricreato gli effetti dei filtri di Instagram utilizzando filtri CSS e modalità di fusione per la sua libreria CSSgram. Basandosi sul lavoro di Una, lo sviluppatore Indrashish Ghosh ha creato cssFilters, uno strumento per il controllo granulare su quegli effetti in stile Instagram, applicandoli a un'immagine caricata e generando valori CSS. Strumenti come Indrashish rendono l'utilizzo dei filtri CSS facile come qualsiasi editor di immagini.

Una reazione ai disegni eccessivamente ornamentali, il design piatto è stato l'estetica dominante per quasi un decennio. Quando i gradienti, i motivi, le ombre e lo skeuomorfismo tridimensionale sono passati di moda, i designer hanno abbracciato colori solidi, angoli squadrati e spigoli vivi.

L'anti-skeuomorphism ha senza dubbio aiutato i designer a concentrarsi sul design delle funzionalità e sull'usabilità senza la distrazione di ciò che alcuni potrebbero ancora vedere come fioriture. Tuttavia, la riduzione al minimo dei design dei prodotti e dei siti Web ha avuto spiacevoli ripercussioni. Con poco per differenziare i loro design, prodotti e siti web hanno adottato una deplorevole uniformità che rende difficile distinguerli.

Anche se non sto sostenendo un ritorno ai peggiori eccessi dello skeuomorphism, spero che i designer di prodotti e siti Web si rendano conto del valore di un approccio più vivace al design; uno che apprezza come il design può distinguere un marchio dalla concorrenza. Un metodo che utilizza gradienti, motivi, ombre in modo appropriato per raccontare storie e fornire una maggiore convenienza. Ciò renderà prodotti e siti Web non solo più facili da usare ma anche più divertenti.

Sviluppa con i filtri SVG

Per questo progetto finale ispirato, ho bisogno solo di due elementi strutturali; header che contiene sei coleotteri dai colori vivaci e una main per il mio testo:

 <header> <div><img src="car-red.png" alt=""></div> <div><img src="car-green.png" alt=""></div> <div><img src="car-cyan.png" alt=""></div> <div><img src="car-magenta.png" alt=""></div> <div><img src="car-yellow.png" alt=""></div> <div><img src="car-black.png" alt=""></div> </header> <main>…</main>

Il flusso normale si occupa della maggior parte di questo design per i piccoli schermi, ma ciò non significa che non ci sia nulla da fare. Perderei l'impatto di quelle auto colorate se dovessi rimpicciolirle tutte per adattarle a un piccolo schermo. Inoltre, non voglio che le persone scorrano tutti e sei prima di vedere il mio contenuto, quindi la mia soluzione è allinearli orizzontalmente in un pannello a scorrimento.

Flexbox è la scelta più ovvia per organizzare quelle immagini, ma l'ordine predefinito sinistra-destra significherebbe mostrare la parte posteriore dell'auto finale, invece della parte anteriore della prima. Questo è facilmente risolvibile modificando la flex-direction dalla row predefinita a row-reverse :

 header { display: flex; direction: row-reverse; max-width: 100%; overflow-x: scroll; }

Voglio che tutte queste auto appaiano della stessa dimensione, quindi utilizzo la proprietà flex-grow e un valore di 1 . Poiché voglio mostrare la parte anteriore di ogni auto per indicare che c'è altro da vedere fuori dal viewport, ho impostato il valore della flex-basis 80% ;

 header div { flex-grow: 1; flex-grow: 0; flex-basis: 80%; /* flex: 1 0 80%; */ }

Su schermi di medie dimensioni, c'è spazio per un layout più elaborato per la mia collezione di auto. Per questo progetto, dispongo i miei Maggiolini su una griglia modulare 8x12, dove ogni modulo è un rettangolo con proporzioni 16:9. Il Maggiolino nero più lontano dallo spettatore occupa un unico modulo e le vetture appaiono progressivamente più grandi fino a quando il Maggiolino rosso in primo piano occupa la zona spaziale più ampia.

Per implementare questa griglia modulare, applico Grid al mio elemento di intestazione, seguito da otto colonne ripetute di dimensioni uniformi e dodici righe che si adattano all'altezza minima del loro contenuto. Allineando gli elementi alla end , anziché start , di ogni riga, il risultato appare più realistico:

 @media screen and (min-width : 48em) { header { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(12, min-content); grid-row-gap: 10px; align-items: end; } } 

My next task is to place each Beetle onto the grid. I use a combination of child ( > ) and nth-child selectors to place each element using line numbers:

 header > :nth-child(1) { grid-column: 3 / -1; grid-row: 10 / -1; } header > :nth-of-type(2) { grid-column: 3 / 7; grid-row: 7 / 9; } header > :nth-of-type(3) { grid-column: 1 / 4; grid-row: 5 / 7; } header > :nth-of-type(4) { grid-column: 2 / 4; grid-row: 3; } header > :nth-of-type(5) { grid-column: 6 / 8; grid-row: 2; } header > :nth-of-type(6) { grid-column: 3; grid-row: 1; }

A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of 24em , and a browser will automatically create the right number of columns to fit the viewport:

 p { column-width: 24em; column-gap: 2vw; }

To add extra interest to my type, I combine a first-of-type pseudo-class selector with a first-line pseudo-element to transform that first line into uppercase letters:

 p:first-of-type::first-line { text-transform: uppercase; }

To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:

 @media screen and (min-width : 64em) { header { grid-template-columns: repeat(16, 1fr); } header > :nth-child(1) { grid-column: 8 / 15; grid-row: 9 / 13; } header > :nth-of-type(2) { grid-column: 6 / 11; grid-row: 5 / 8; } header > :nth-of-type(3) { grid-column: 1 / 5; grid-row: 4 / 6; } header > :nth-of-type(4) { grid-column: 4 / 6; grid-row: 3; } header > :nth-of-type(5) { grid-column: 11; grid-row: 2; } header > :nth-of-type(6) { grid-column: 5; grid-row: 1; } }

Compared to today's Beetle — which weighs almost 3000lbs — the Volkswagen Type 1 was a lightweight and speedy little car for its time. I'd like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:

header > div { filter: blur(5px); }

Questo filtro mi consente di sfocare un elemento di qualsiasi importo utilizzando diversi valori di lunghezza, inclusi i pixel che mi sembrano l'unità più appropriata. Ma i filtri CSS mi consentono solo di sfocare un elemento usando la stessa quantità orizzontalmente e verticalmente, proprio come la sfocatura gaussiana di un editor di immagini. Per aggiungere un movimento realistico al mio progetto, devo scambiare CSS con un filtro SVG.

In questo numero tratterò solo una piccola quantità di dettagli sui filtri SVG, ma l'esperta di SVG Sara Soueidan ne ha scritto ampiamente. Inizia con il tutorial Filtri SVG 101 di Sara.

Sebbene i suoi dieci filtri stock siano un'aggiunta relativamente recente ai CSS, la loro storia risale alle origini SVG. I filtri in SVG offrono una flessibilità di gran lunga maggiore con sei filtri in più disponibili e incredibili possibilità di personalizzazione. Considerando che la blur CSS consente un solo valore sia per l'asse orizzontale che per quello verticale (X/Y,) in SVG, posso usare due valori; uno per l'asse X, l'altro per Y.

In SVG, ogni filtro ha la sua identità, quindi per sfocare un elemento HTML, fai riferimento al suo ID usando il valore URL nella proprietà del filtro da un foglio di stile:

 .blur { filter: url(#blur); }

I filtri hanno il loro elemento in SVG, è l'elemento del filter . Anche se un filtro non sarà visibile in un browser, dare a SVG un'altezza di 0 assicurerà che non occupi spazio:

 <svg height="0"> <filter>…</filter> </svg>

Ogni primitiva di filtro SVG ha il proprio nome che è preceduto da fe, un'abbreviazione di "effetto filtro". Non sorprende che il nome di una sfocatura sia feGaussianBlur . La quantità di sfocatura viene applicata come stdDeviation utilizzando un valore uniforme o due valori separati per orizzontale e verticale. Per riprodurre la precedente sfocatura gaussiana uniforme di 5px in SVG, aggiungo un valore:

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter>

Sto cercando un effetto di movimento più realistico in cui l'immagine è sfocata solo sull'asse orizzontale. Applico la sfocatura solo all'asse X, lasciando l'asse Y a zero:

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="15, 0"/> </filter>

Ora la mia macchina sta sfrecciando attraverso l'oblò, ma se guardi più da vicino. il risultato non è del tutto realistico. Questo perché i bordi dei miei elementi sfocati sono ritagliati dal riquadro di delimitazione. Questo è il rettangolo che circonda ogni elemento.

Per rendere visibile l'intero effetto del filtro, è necessario aumentare le dimensioni della regione del filtro utilizzando i valori x , y , width e height . Uso valori negativi di -10% su entrambi gli assi orizzontale e verticale, quindi aumento la width e l' height al 120% che consente più spazio visibile per i bordi sfocati delle mie immagini:

 <filter x="-10%" y="-10%" width="120%" height="120%"> … </filter>

Quando guardi le macchine che passano veloci o guardi fuori dal finestrino di un treno in movimento, gli oggetti più vicini a te sembrano muoversi più velocemente di quelli più lontani. Per rendere il mio progetto più realistico, ho bisogno di un diverso set di valori di sfocatura per gli oggetti in primo piano, via di mezzo e sullo sfondo.

Gli elementi in primo piano come il Maggiolino rosso dell'armadio necessitano della massima quantità di sfocatura orizzontale. Assegno a questo filtro un'identità di blur-foreground :

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="15,0"/> </filter>

Quindi, i coleotteri nella via di mezzo ricevono uno stdDeviation leggermente inferiore di 10 :

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="10,0"/> </filter>

Infine, gli oggetti sullo sfondo ricevono la sfocatura minima. Assegno a questo filtro un'identità di blur-background modo da poterlo applicare nel mio foglio di stile:

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5,0"/> </filter>

Con tutti i miei filtri specificati, nel mio foglio di stile li applico ai Maggiolini in primo piano, via di mezzo e sullo sfondo:

 <img src="car-red.png" class="blur-foreground"> <img src="car-green.png" class="blur-medium"> <img src="car-cyan.png" class="blur-medium"> <img src="car-magenta.png" class="blur-medium"> <img src="car-yellow.png" class="blur-background"> <img src="car-black.png" class="blur-background"> .blur-foreground { filter: url(#blur-foreground); } .blur-medium { filter: url(#blur-medium); } .blur-background { filter: url(#blur-background); }

Il mio set di sei coleotteri colorati sta ora correndo attraverso il viewport e anche il mio ultimo design ispirato a Feitler è un vincitore.

NB : i membri Smashing hanno accesso a un PDF dal design accattivante della rivista Inspired Design Decisions di Andy e agli esempi di codice completo di questo articolo.

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 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 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.