Decizii de design inspirate cu Emmett McBain: Direcția artistică ca echitate socială

Alături de reclamă, vânzarea este o abilitate la care oamenii deseori sunt încrunțiți. Este adevărat: nimănui nu-i place ca cineva să-l constrângă sau să-l inducă în eroare și nimănui nu-i place să fie întrerupt.

Dar să fii vândut la bine – de către un agent de vânzări care îți înțelege aspirațiile, motivațiile și nevoile – poate fi o experiență de care beneficiază cumpărătorii și vânzătorii.

A învăța să vând a fost unul dintre cele mai bune lucruri pe care le-am făcut la începutul vieții mele profesionale. Pe atunci, vindeam echipamente fotografice și, deși nu mi-a plăcut niciodată stresul care venea din îndeplinirea obiectivelor de vânzări, întotdeauna mi-a plăcut să mă întâlnesc cu fotografi.

Găsirea de noi clienți însemna adesea apeluri la rece, bătutul la ușa unui studio și respingerea frecventă. Am petrecut timp vorbind despre munca cuiva înainte să menționez produsele pe care compania mea m-a plătit să le vând. Eram cu adevărat interesat de fotografie, dar, de asemenea, am învățat că înțelegerea problemelor cuiva era la fel de crucială ca și explicarea modului în care produsele mele ar putea ajuta la rezolvarea lor.

Ceea ce am învățat mi-a servit nemăsurat de când am încetat să vând camere și am început să-mi vând talentul. M-a ajutat să am de-a face cu oamenii, nu în ultimul rând în prezentarea (a se citi: vânzarea) ideilor mele clienților.

Este un fapt al vieții că nu întotdeauna cea mai bună idee sau cea mai bună execuție câștigă un pitch sau o prezentare. Adesea, ideea este vândută de cel mai bun agent de vânzări.

A vinde idei ar trebui să devină una dintre cele mai bune abilități ale tale, așa că învață să vinzi. Aflați cum să vorbiți despre munca dvs., astfel încât persoana căreia îi vindeți să vă înțeleagă ideile și de ce ar trebui să vi le cumpere. Învață să inspiri oamenii cu cuvintele tale, precum și cu munca ta. Fă-i să simtă că fac parte atât de mult din ideile tale încât pur și simplu trebuie să cumpere de la tine.

În calitate de designer grafic american de culoare care a lucrat în publicitate în anii 1950, ’60 și ’70, Emmett McBain nu numai că avea un talent incredibil, ci a înțeles și cum să vândă altor afro-americani.

El știa că pentru a vinde produsele clienților săi, modelele sale trebuiau să rezoneze cu publicul negru, arătând imagini de care se refereau și un limbaj care le era familiar.

Ca englez cu barbă cenușie, nu-mi este ușor să înțeleg perspective culturale diferite de ale mele. Dar, am învățat valoarea realizării de modele care vorbesc oamenilor cum arată și oriunde locuiesc. Nu doar pentru a le vinde produsele clienților mei, ci pentru ca toată lumea să simtă că nevoile lor sunt ascultate și importanța lor înțeleasă.

Născut la Chicago în 1935, Emmett McBain a fost un designer grafic afro-american a cărui activitate a avut un impact remarcabil asupra reprezentării afro-americanilor în publicitate.

McBain a studiat la mai multe școli de artă și a absolvit după ce a studiat arta comercială la Academia Americană de Artă din Chicago.

Vince Cullers and Associates — prima agenție de publicitate cu servicii complete deținute de afro-americani din SUA a fost fondată în 1958. Cullers credea că „a vinde negru” trebuie să „gândească negru” dacă agenții de publicitate vor ajunge la consumatorii afro-americani. Nu numai că a vândut afro-americanilor, dar i-a ajutat să-i educe în publicitate și să-i angajeze la agenția sa. Unul dintre acești angajați a fost proaspătul absolvent Emmett McBain.

Cu doi ani de experiență comercială în spate, McBain a părăsit Vince Cullers și s-a mutat la Playboy Records ca asistent editor de artă. Dar, nu a rămas mult timp într-un rol de junior și a devenit rapid directorul artistic de promovare al Playboy. McBain și-a făcut o nișă ca artist de copertă, iar în 1958, arta albumului său Playboy Jazz All-Stars a fost numită Coperta de album a săptămânii de la Billboard Magazine.

În 1959, McBain a trecut de la Playboy, dar nu și-a lăsat în urmă munca pe copertele albumelor. Noul său studio de design McBain Associates a lucrat în mod regulat cu Mercury Records și a proiectat peste 75 de coperți de albume până la vârsta de 24 de ani.

McBain s-a întors la Vince Cullers Advertising ca director de creație în 1968 și a făcut unele dintre cele mai importante contribuții ale sale la publicitatea pentru americanii de culoare.

Înainte de anii 1960, consumatorii de culoare au fost în mare măsură ignorați de producătorii de marcă și de industria publicitară principală care îi servea. Publicitatea pentru afro-americani era limitată în principal la ziarele specifice publicului de culoare.

Clienții albi au fost reticenți să cheltuiască bani vânzând afro-americanilor, deoarece agenții de publicitate considerau consumatorii negri ca având un venit disponibil redus. În atmosfera încărcată politic a vremii, companiilor le era și frică să-și asocieze mărcile cu afro-americani.

Afro-americanii nu erau reprezentați nici în industria de publicitate, iar numărul de oameni de culoare care lucrau în publicitate a fost mic. Dar, la mijlocul anilor 1960, agențiile de publicitate au început să recruteze afro-americani. Aceste agenții sperau ca experiențele lor să facă mesajele clienților mai apropiate de publicul afro-american care, până atunci, cheltuiau aproape 30 de miliarde de dolari în fiecare an.

Lucrarea lui McBain a prezentat mesaje pozitive pentru afro-americani și comunitatea neagră. El a folosit imagini cu oameni obișnuiți în medii obișnuite pentru clienții care includ țigările mentolate de la Newport, Marlboro de la Philip Morris și produsele de înfrumusețare SkinFood Cosmetics special pentru pielea neagră. La fel ca Vince Cullers, McBain știa că a vinde consumatorilor de culoare însemna înțelegerea diferitelor nevoi ale acestora. El a înțeles că – așa cum a spus viitorul său partener, copywriterul Thomas Burrell – „Oamenii de culoare nu sunt oameni albi cu pielea întunecată”.

În 1971, Emmett McBain a colaborat cu Burrell pentru a forma Burrell-McBain Inc., pe care l-au descris într-o reclamă drept „O agenție de publicitate pentru piața comercială neagră”. În loc să-i exploateze pe americanii de culoare, Burrell și McBain și-au propus să formeze relații autentice și respectuoase cu publicul de culoare.

Înainte de Burrell și McBain, iconicul cowboy alb era chipul țigărilor Marlboro. Dar, bărbatul lui McBain din Marlboro era mai apropiat de fumătorii afro-americani. În timp ce cowboy-ul lui Marlboro a fost prezentat într-o versiune idealizată a Occidentului american, personajele lui McBain Black au fost văzute fumând în împrejurimile de zi cu zi.

Campania lor Marlboro a fost un succes imens, iar Burrell și McBain au câștigat Coca-Cola și McDonald's ca clienți, ajutându-i să devină cea mai mare agenție de publicitate deținută de negri din America.

McBain a părăsit agenția pe care a co-fondat-o în 1974 și a început o carieră ca artist. Și-a deschis galeria de artă, The Black Eye, și a format o companie de consultanță – numită și The Black Eye – care a ajutat agențiile să se conecteze mai bine cu comunitatea afro-americană.

Emmett McBain a murit de cancer în 2012 și de atunci a fost recunoscut de AIGA, Societatea de Arte Tipografice și Cluburile Directorilor de Artă din Chicago și Detroit.

Din păcate, nu a fost publicată o carte despre Emmett McBain și contribuția sa la publicitate și design. Nu l-am auzit menționat la conferințe de design sau nu l-am văzut referit în articole referitoare la designul modern și în special pe web.

Lucrarea ulterioară a lui McBain a avut un impact profund asupra reclamei din anii 1960 încoace, dar îmi plac în mod special modelele lui de coperta de discuri. Explozia de energie care reflectă muzica jazz pe care o iubea McBain. Culorile lui sunt interesante și vibrante. Alegerea lui de fonturi și modurile în care a deconstruit și reconstruit tiparele sunt inspiratoare. Sunt multe care să ne inspire în munca lui Emmett McBain.

Alinierea conținutului pe verticală

Indiferent de stilul grafic pe care îl aleg, HTML-ul necesar pentru implementarea acestui prim design inspirat de McBain este identic. Am nevoie de trei elemente structurale; un antet care conține sigla mea SVG și titluri, principal, și o parte care include un tabel cu numerele de producție Citroen DS:

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

Pentru scalabilitate pe dimensiunile ecranului, folosesc SVG-uri pentru cele două titluri din antetul meu. Folosirea SVG oferă un grad suplimentar de consistență pentru textul mângâiat al celui de-al doilea titlu, dar nu trebuie să uit accesibilitatea.

În numărul 8, am explicat cum să ajut oamenii care folosesc tehnologia de asistență folosind adăugarea ARIA la SVG-uri. Adaug un atribut de rol ARIA, plus un atribut de nivel care înlocuiește semantica lipsă. Adăugarea unui element de titlu ajută, de asemenea, tehnologia de asistență să înțeleagă diferența dintre mai multe blocuri de SVG, dar browserele nu vor afișa acest titlu:

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

Pentru a începe acest design, adaug stiluri de bază de bază pentru fiecare dimensiune de ecran, începând cu culorile de prim plan și de fundal:

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

Adaug dimensiuni precise pixelilor elementelor SVG din antetul meu, apoi folosesc margini orizontale automate pentru a centra sigla Citroen:

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

În designul său inspirator, Emmet McBain a inclus dungi negre verticale pentru a adăuga structură aspectului său. Pentru a obține un efect similar fără a adăuga elemente suplimentare la HTML-ul meu, adaug chenaruri întunecate atât în ​​partea stângă, cât și în partea dreaptă a paragrafului meu principal:

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

Aceeași tehnică adaugă un efect similar tabelului meu de numere de producție Citroen DS. Adaug cele două margini exterioare la tabelul meu:

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

Apoi, adaug o a treia regulă în dreapta antetelor tabelului meu:

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

Asigurându-mă că fiecare celulă ocupă jumătate din lățimea tabelului meu, această dungă verticală se desfășoară în centru, de sus în jos:

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

Când cineva citește date numerice tabulare, cum ar fi aceste perechi de ani și numere de producție, ochii îi scanează în jos coloana anului. Apoi, urmăresc pentru a vedea câte mașini a produs Citroen în acel an. Oamenii ar putea compara, de asemenea, numerele de producție, căutând fie numere mari, fie mici.

Pentru a face comparațiile lor mai ușoare, aliniez numerele de producție la dreapta:

 aside td { text-align: right; }

În funcție de caracteristicile OpenType disponibile în fontul pe care l-ați ales, puteți, de asemenea, să îmbunătățiți lizibilitatea datelor tabelare prin specificarea căptușelii, mai degrabă decât a numerelor în stil vechi. Unele numere de stil vechi, inclusiv 3, 4, 7 și 9, au descendenți care pot scădea sub linia de bază. Acestea fac șirurile mai lungi de numere mai dificil de citit. Numerele de căptușeală, pe de altă parte, includ numere care se află pe linia de bază.

Caracteristicile OpenType controlează, de asemenea, lățimea numerelor, ceea ce facilitează compararea șirurilor de numere dintr-un tabel. În timp ce numerele proporționale pot avea dimensiuni diferite, cifrele tabelare au aceeași lățime, astfel încât zecile, sutele și miile vor fi aliniate mai precis:

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

În cele din urmă, introdu motivul cercului în partea de jos a acestui mic design de ecran. Nu vreau să includ aceste imagini circulare în HTML-ul meu, așa că folosesc un URI de date de conținut generat CSS în care fișierul imagine este codificat într-un șir:

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

Sunt adesea surprins de cât de puține modificări trebuie să fac pentru a dezvolta modele pentru mai multe dimensiuni de ecran. Trecerea de la ecrane mici la modele de dimensiuni medii necesită adesea doar modificări minore ale dimensiunilor tipului și introducerea stilurilor de aspect simple.

Încep prin a alinia orizontal sigla Citroen și titlurile SVG din antetul meu. Pe ecranele medii și mari, acest logo este pe primul loc în HTML-ul meu, iar titlurile sunt pe locul doi. Dar vizual elementele sunt inversate. Flexbox este instrumentul ideal pentru a face această comutare, pur și simplu prin schimbarea valorii implicite de direcție flexibilă de la rând la direcție flexibilă: rând invers:

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

Mai devreme, am dat logo-ului meu o lățime precisă. Dar, vreau ca titlurile să umple tot spațiul orizontal rămas, așa că dau diviziunii lor părinte o valoare de creștere flexibilă de 1. Apoi, adaug o marjă bazată pe viewport pentru a menține titlurile și logo-ul separat:

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

Pentru acest design de dimensiuni medii, am dezvoltat aspectul folosind o grilă simetrică cu trei coloane, pe care o aplic atât elementelor principale, cât și elementelor laterale:

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

Apoi, folosind aceeași tehnică pe care am folosit-o anterior pentru elementul de parte, generez două imagini pentru elementul principal și le plasez în prima și a treia coloană din grila mea:

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

Repet procesul pentru elementul deoparte, cu acest nou :after content înlocuind imaginea generată am adăugat pentru ecranele mici:

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

Spațiul suplimentar disponibil pe ecranele de dimensiuni medii îmi permite să introduc mai mult motivul dungilor verticale, care este inspirat de designul original al lui Emmett McBain. Marginile verticale din stânga și dreapta paragrafului principal sunt deja la locul lor, așa că tot ce rămâne este să-i schimb modul de scriere în vertical-rl și să îl rotesc cu 180 de grade:

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

Unele browsere respectă proprietățile grilei și vor întinde un tabel la înălțimea completă a rândului grilei fără ajutor. Alții au nevoie de puțin ajutor, așa că pentru ei, dau tabelului meu cu numere de producție o înălțime explicită care adaugă o cantitate egală de spațiu între rândurile sale:

 aside table { height: 100%; }

Efectul deplin al acestui design inspirat de McBain vine atunci când ecranele sunt suficient de largi pentru a afișa elementele principale și secundare una lângă alta. Aplic o grilă simplă simetrică cu două coloane:

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

Apoi, plasez elementele principale și deoparte folosind numere de linie, cu antetul care se întinde pe toată lățimea aspectului meu:

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

Arătând Nestructurat

Culorile strălucitoare și formele neregulate ale blocurilor din acest următor design sunt la fel de neașteptate ca jazzul care a inspirat originalul lui Emmett McBain. În timp ce aranjamentul acestor aspect ar putea părea nestructurat, codul de care am nevoie pentru a-l dezvolta cu siguranță nu este. De fapt, există doar două elemente structurale, antet și principal:

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

Încep prin a aplica culorile de fundal și de prim-plan, plus o cantitate generoasă de căptușeală pentru a permite ochilor cuiva să se plimbe în jurul și prin spațiile din design:

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

Acele blocuri viu colorate ar domina spațiul limitat disponibil pe un ecran mic. În schimb, adaug aceleași culori strălucitoare la antetul meu:

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

Formele neregulate sunt un aspect al acestui design pe care îl vreau să fie vizibil la fiecare dimensiune de ecran, așa că folosesc o cale poligonală pentru a decupa antetul. Doar zonele din interiorul zonei clipului rămân vizibile, totul devine transparent:

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

Atenția chiar și la cele mai mici detalii ale tipografiei le permite oamenilor să știe că fiecare aspect al unui design a fost luat în considerare cu atenție. O linie orizontală în elementul mic de la începutul conținutului meu principal își schimbă lungimea alături de text.

Nu vreau să adaug o regulă orizontală de prezentare la HTML-ul meu și, în schimb, optez pentru o combinație de Flexbox și pseudo-elemente în CSS-ul meu. Mai întâi, stilez textul elementului mic:

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

Apoi, adaug un pseudo-element :after cu un chenar subțire de jos care se potrivește cu culoarea textului meu:

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

Adăugarea de proprietăți flexibile aliniază textul și pseudo-elementul meu la partea de jos a elementului mic. Prin acordarea pseudo-elementului o valoare flex-grow de 1, îi permite să-și schimbe lățimea pentru a completa șirurile de text mai lungi și mai scurte:

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

Îmi plac surprizele și titlul meu de nivelul doi „Champion de France” are mai mult decât se vede.

În urmă cu aproape zece ani, Dave Rupert a lansat Lettering.js, un plugin jQuery care utilizează Javascript pentru a încheia litere, linii și cuvinte individuale cu elemente span. Aceste elemente separate pot fi apoi stilizate în mai multe moduri. Cu un singur element multicolor în acest design, aplic aceeași tehnică fără a servi un script:

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

Apoi, dau fiecărei litere selectate propria culoare:

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

Întotdeauna am văzut provocarea designului responsive ca pe o oportunitate de a fi creativ și de a profita la maximum de fiecare dimensiune de ecran. Spațiul suplimentar disponibil pe ecranele medii și mari îmi permite să introduc blocurile de culoare mari, de formă neregulată, ceea ce face ca acest design să fie neașteptat.

În primul rând, aplic proprietățile grilei și o grilă simetrică cu opt coloane elementului de corp:

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

Apoi, îmi plasez antetul în trei dintre acele coloane. Cu blocurile colorate acum vizibile, schimb culoarea de fundal a antetului într-un gri închis:

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

Centrarea conținutului atât pe orizontală, cât și pe verticală a fost o provocare înainte de Flexbox, dar acum alinierea și justificarea conținutului meu antet este simplă:

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

Schimb culoarea elementelor de text ale antetului meu:

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

Apoi, aplic margini orizontale negative, astfel încât antetul meu să se suprapună elementelor apropiate:

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

Elementul meu principal nu are nevoie de stil suplimentar și îl plasez pe grila mea folosind numere de rând:

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

Elementele necesare pentru a dezvolta un design nu trebuie să fie în HTML. Pseudo-elementele create în CSS le pot lua locul, ceea ce ține HTML-ul liber de orice prezentare. Folosesc un pseudo-element :before aplicat corpului:

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

Apoi, adaug o imagine de fundal URI de date care va acoperi întregul pseudo-element, indiferent de dimensiunea acestuia:

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

Grila CSS tratează pseudo-elementele la fel ca oricare altele, permițându-mi să plasez acele blocuri colorate în grila mea folosind numere de linie:

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

În timp ce dezvoltatorii folosesc în mare parte punctele de întrerupere a interogării media pentru a introduce modificări semnificative într-un aspect, uneori, sunt necesare doar modificări minore pentru a modifica un design. Jeremy Keith numește aceste momente „puncte de ajustare”.

Acest design de dimensiuni medii inspirat de McBain funcționează bine la dimensiuni mai mari, dar vreau să-i modific aspectul și să adaug mai multe detalii la cele mai mari ecrane. Încep prin a adăuga patru coloane suplimentare la grila mea:

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

Apoi repoziționez blocurile de culoare generate, antetul și elementele principale folosind noi numere de linie:

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

Aceste elemente se suprapun acum, așa că pentru a le împiedica să formeze noi rânduri în grila mea, le dau tuturor aceeași valoare de rând de grilă:

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

Această modificare a designului meu adaugă un alt bloc de culoare între antet și principal. Pentru a păstra semantica HTML-ului meu, adaug un pseudo-element și o imagine URI de date înainte de conținutul meu principal:

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

Deconstruirea tip-imagini

La începutul carierei sale, modelele de copertă ale discurilor ale lui Emmett McBain au arătat că avea un talent pentru tipografie. Era adesea jucăuș cu tipul, deconstruindu-l și reconstruindu-l pentru a forma forme neașteptate. Acest control asupra tipului nu a fost niciodată ușor online, dar SVG face aproape totul posibil.

Acest următor design inspirat de McBain se bazează pe SVG și doar două elemente HTML structurale; un antet care conține graficul mare bazat pe tipuri, un element principal pentru conținutul meu:

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

Am nevoie de foarte puține stiluri de fundație pentru a începe dezvoltarea acestui design. Mai întâi, adaug culori de fundal și prim plan și umplutură în interiorul celor două elemente ale mele:

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

În al doilea rând, definesc stiluri pentru tipul meu, care include atât titluri, cât și paragraful de text care le urmează:

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

Ofer conținutului meu principal un fundal violet bogat, care se potrivește cu culoarea Citroen în panoul de vizavi:

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

Acest design este dominat de o grafică mare care include un profil al Citroen DS și o imagine tip stilizată a cuvintelor „Champion de France”. Aranjamentul literelor sale ar fi dificil de realizat folosind poziționarea și transformările CSS, făcând SVG alegerea perfectă.

Acest SVG conține trei grupuri de căi. Prima include liniile cuvintelor „Champion de:”

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

Următorul grup include căi pentru aranjarea viu colorată a literelor. Dau fiecărei litere un atribut unic de id pentru a face posibilă stilarea lor individual:

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

Apoi, adaug atribute de clasă la grupul de căi care alcătuiesc profilul Citroen DS. Cu aceste atribute la locul lor, pot ajusta culorile mașinii pentru a completa diferite teme de culoare și chiar le pot schimba în punctele de întrerupere a interogării media:

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

Ecranele de dimensiuni medii îmi permit să modific pozițiile profilului meu Citroen DS și ale imaginii de tip:

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

Ordinea acestor transformări este importantă, deoarece diferite combinații de rotire, scalare și translație dau rezultate subtil diferite. Apoi, adaug coloane la conținutul meu principal:

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

Până acum, acest conținut principal vine după antetul meu în fluxul de documente. Pentru ecrane mai mari, vreau ca aceste elemente să se așeze una lângă alta, așa că aplic proprietățile grilei și douăsprezece coloane pe corp:

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

Am plasat antetul și principalul în grila mea folosind numere de rând. Antetul se întinde pe șapte coloane, în timp ce conținutul principal se întinde pe doar cinci, producând un aspect asimetric dintr-o grilă simetrică:

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

Scalare text grafic

Distincția dintre SVG și HTML a devenit neclară, cu cât folosesc mai mult SVG în munca mea. SVG este un format bazat pe XML și este în întregime la domiciliu atunci când este încorporat în HTML. Acest design final inspirat de McBain se bazează pe SVG în HTML nu doar pentru imaginile sale uimitoare, ci și pentru text.

Pentru a dezvolta acest design izbitor roșu și negru, am nevoie de patru elemente HTML structurale. Un antet conține o imagine a iconicului Citroen DS. Divizia de bannere include un titlu mare dezvoltat folosind text SVG. Elementul principal include textul meu curent și, în sfârșit, o parte pentru conținut suplimentar:

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

Obișnuiam să cred că folosirea SVG pentru a reda textul este la fel de nepotrivită ca și setarea textului în imagini, dar după ce am folosit SVG mai mult, îmi dau seama că am greșit.

În numărul 8, am explicat cum, la fel ca textul HTML, textul SVG este accesibil și selectabil. De asemenea, are avantajul de a putea stila la infinit folosind trasee de tăiere, umpleri cu gradient, filtre, măști și linii.

Titlul diviziei de bannere include două elemente de text. Primul conține cuvântul mare „Campion”, al doilea conține „de France”. Perechile de coordonate x și y pe fiecare element tspan plasează acele cuvinte exact acolo unde vreau să dezvolte o placă solidă de text:

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

Indiferent dacă aleg să încorporez acest SVG în HTML-ul meu sau să fac un link către el ca imagine externă, pot folosi CSS pentru a-i defini stilul. Acest titlu este o imagine legată, așa că adaug stilurile mele în fișierul 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>

Încep prin a adăuga culoarea fundației și stilurile de tipografie. Am ales să indentez începutul fiecărui paragraf nou, așa că elimin toate marginile inferioare și adaug o indentare de 2 canale la fiecare paragraf următor:

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

Fundalul gri închis și textul roșu al elementului meu deoparte sunt opuse celor din altă parte în designul meu. Creșterea luminozității și a saturației face ca culorile să pară mai vibrante pe fundaluri întunecate:

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

Ecranele de dimensiuni medii îmi permit să modific designul conținutului meu pentru a profita la maximum de spațiul suplimentar disponibil. Folosesc două proprietăți diferite de aspect cu mai multe coloane. Mai întâi, specificând două coloane cu lățimi variabile pentru diviziunea mea de conținut. Apoi, orice număr de coloane care vor avea toate o lățime de 16em:

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

Cea mai mare parte a stilului meu este vizibilă pentru persoanele care folosesc chiar și cele mai mici ecrane, așa că dezvoltarea unui aspect pe ecran mare implică aplicarea proprietăților grilei și a douăsprezece coloane elementului de corp:

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

Am plasat sigla Citroen în prima coloană:

 body > svg { grid-column: 1; }

Apoi, antetul care conține o imagine a iconicului DS se întinde pe patru coloane:

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

Atât divizia de bannere cu titlul elegant SVG, cât și textul de rulare al conținutului meu principal ocupă opt coloane:

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

Și, în sfârșit, elementul de o parte cu tema inversată ocupă trei coloane din dreapta designului meu. Pentru a mă asigura că acest conținut se întinde pe fiecare rând de sus în jos al aspectului meu, îl plasez folosind numere de rând de rând:

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

Citiți mai multe din seria

• Decizii de design inspirate: Revista Avaunt
• Decizii de design inspirate: chestiuni urgente
• Decizii de design inspirate: Ernest Journal
• Decizii de design inspirate: Alexey Brodovitch
• Decizii de design inspirate: Bea Feitler
• Decizii de design inspirate: Neville Brody
• Decizii de design inspirate: Otto Storch
• Decizii de design inspirate: Herb Lubalin
• Decizii de design inspirate: Max Huber
• Decizii de design inspirate: Giovanni Pintori
• Decizii de design inspirate: Bradbury Thompson

NB: Membrii Smashing Membrii Smashing au acces la un PDF frumos conceput al revistei Andy's Inspired Design Decisions și exemple complete de cod din acest articol. Puteți cumpăra PDF-ul și exemplele acestei probleme, precum și orice altă problemă direct de pe site-ul lui Andy.