Inspirowane decyzje projektowe z Emmettem McBainem: Kierunek artystyczny jako kapitał społeczny

Wraz z reklamą sprzedaż jest umiejętnością, na którą ludzie często marszczą brwi. To prawda: nikt nie lubi, gdy ktoś go zmusza lub wprowadza w błąd i nikomu nie podoba się, że mu przerywa się.

Ale bycie dobrze sprzedanym — przez sprzedawcę, który rozumie Twoje aspiracje, motywacje i potrzeby — może być doświadczeniem korzystnym dla kupujących i sprzedających.

Nauka sprzedaży była jedną z najlepszych rzeczy, jakie zrobiłem na początku mojego życia zawodowego. Sprzedawałem wtedy sprzęt fotograficzny i choć nigdy nie lubiłem stresu związanego z realizacją celów sprzedażowych, zawsze lubiłem spotykać się z fotografami.

Znalezienie nowych klientów często oznaczało dzwonienie na zimno, pukanie do drzwi studia i częste odrzucanie. Spędziłem trochę czasu rozmawiając o czyjejś pracy, zanim wspomniałem o produktach, za których sprzedaż zapłaciła mi moja firma. Naprawdę interesowałem się fotografią, ale nauczyłem się też, że zrozumienie czyichś problemów jest tak samo ważne, jak wyjaśnienie, w jaki sposób moje produkty mogą je rozwiązać.

To, czego się nauczyłem, służy mi niezmiernie dobrze, odkąd przestałem sprzedawać aparaty i zacząłem sprzedawać swój talent. Pomogło mi to radzić sobie z ludźmi, nie tylko w prezentowaniu (czytaj: sprzedawaniu) moich pomysłów klientom.

Faktem jest, że nie zawsze najlepszy pomysł lub najlepsza realizacja wygrywa prezentację lub prezentację. Często jest to pomysł, który sprzedaje najlepszy sprzedawca.

Sprzedawanie pomysłów powinno stać się jedną z Twoich najlepszych umiejętności, więc naucz się sprzedawać. Dowiedz się, jak rozmawiać o swojej pracy, aby osoba, której sprzedajesz, zrozumiała Twoje pomysły i dlaczego powinna je od Ciebie kupić. Naucz się inspirować ludzi zarówno swoimi słowami, jak i pracą. Spraw, by poczuli się tak bardzo częścią twoich pomysłów, że po prostu muszą od ciebie kupić.

Jako czarnoskóry grafik, który pracował w reklamie w latach 50., 60. i 70., Emmett McBain nie tylko miał niesamowity talent, ale także rozumiał, jak sprzedawać innym Afroamerykanom.

Wiedział, że aby sprzedawać produkty swoich klientów, jego projekty muszą odbić się na czarnych odbiorcach, pokazując obrazy, z którymi się kojarzą, i znany im język.

Jako siwobrody Anglik nie jest mi łatwo zrozumieć perspektywy kulturowe, które różnią się od moich. Ale nauczyłem się wartości tworzenia projektów, które przemawiają do ludzi, niezależnie od tego, jak wyglądają i gdzie mieszkają. Nie tylko po to, by sprzedawać im produkty moich klientów, ale żeby każdy czuł, że jego potrzeby są słuchane i rozumiane.

Urodzony w Chicago w 1935 roku Emmett McBain był Afroamerykańskim grafikiem, którego prace wywarły ogromny wpływ na reprezentację Afroamerykanów w reklamie.

McBain studiował w kilku szkołach artystycznych i ukończył studia po studiach sztuki komercyjnej w American Academy of Art w Chicago.

Vince Cullers and Associates — pierwsza w Stanach Zjednoczonych agencja reklamowa należąca do Afroamerykanów świadcząca pełen zakres usług, została założona w 1958 roku. Cullers uważał, że „sprzedaż czerni” wymaga „myślenia na czarno”, jeśli reklamodawcy mają dotrzeć do konsumentów afroamerykańskich. Nie tylko sprzedawał Afroamerykanom, ale pomagał kształcić ich w reklamie i zatrudniał ich w swojej agencji. Jednym z tych pracowników był świeżo upieczony Emmett McBain.

Mając za sobą dwa lata doświadczenia komercyjnego, McBain opuścił Vince Cullers i przeniósł się do Playboy Records jako asystent redaktora artystycznego. Ale nie pozostał długo w roli juniora i szybko został dyrektorem artystycznym promocji Playboya. McBain wypracował sobie niszę jako artysta okładek iw 1958 roku jego okładka albumu Playboy Jazz All-Stars została nazwana okładką tygodnia magazynu Billboard.

W 1959 McBain przeniósł się z Playboya, ale nie porzucił swojej pracy nad okładkami płyt. Jego nowo założone studio projektowe McBain Associates regularnie współpracowało z Mercury Records i zaprojektował ponad 75 okładek albumów w wieku 24 lat.

McBain powrócił do Vince Cullers Advertising jako dyrektor kreatywny w 1968 roku i wniósł jeden ze swoich najważniejszych wkładów w reklamę dla czarnoskórych Amerykanów.

Przed latami sześćdziesiątymi czarnoskórzy konsumenci byli w dużej mierze ignorowani przez markowych producentów i mainstreamowy przemysł reklamowy, który im służył. Reklamy skierowane do Afroamerykanów ograniczały się głównie do gazet przeznaczonych dla czarnoskórych odbiorców.

Biali klienci byli niechętni do wydawania pieniędzy na sprzedaż Afroamerykanom, ponieważ reklamodawcy widzieli, że czarni konsumenci mają niewielki dochód rozporządzalny. W ówczesnej naładowanej politycznie atmosferze firmy bały się też kojarzyć swoje marki z Afroamerykanami.

Afroamerykanie również nie byli reprezentowani w branży reklamowej, a liczba czarnoskórych pracujących w reklamie była niewielka. Ale w połowie lat 60. agencje reklamowe zaczęły rekrutować Afroamerykanów. Agencje te miały nadzieję, że ich doświadczenia sprawią, że wiadomości klientów będą bardziej powiązane z odbiorcami afroamerykańskimi, którzy do tego czasu wydawali prawie 30 miliardów dolarów każdego roku.

Praca McBaina zawierała pozytywne wiadomości dla Afroamerykanów i społeczności Czarnych. Wykorzystał obrazy zwykłych ludzi w zwykłym otoczeniu dla klientów, które obejmowały mentolowe papierosy Newport, Marlboro Philip Morris i produkty kosmetyczne SkinFood Cosmetics przeznaczone specjalnie dla czarnej skóry. Podobnie jak Vince Cullers, McBain wiedział, że sprzedaż czarnym konsumentom oznacza zrozumienie ich różnych potrzeb. Zrozumiał, że — jak powiedział jego przyszły partner, copywriter Thomas Burrell — „Czarni nie są biali o ciemnej karnacji”.

W 1971 roku Emmett McBain we współpracy z Burrellem założył firmę Burrell-McBain Inc., którą opisali w reklamie jako „Agencja reklamowa dla czarnego rynku komercyjnego”. Zamiast wykorzystywać czarnoskórych Amerykanów, Burrell i McBain dążyli do nawiązania autentycznych i pełnych szacunku relacji z czarną publicznością.

Przed Burrellem i McBainem kultowy biały kowboj był twarzą papierosów Marlboro. Ale człowiek Marlboro McBaina był bardziej związany z palaczami Afroamerykanów. Podczas gdy kowboj Marlboro został pokazany w wyidealizowanej wersji amerykańskiego Zachodu, czarne postacie McBaina paliły w codziennym otoczeniu.

Ich kampania Marlboro okazała się ogromnym sukcesem, a Burrell i McBain zdobyli klientów Coca-Cola i McDonald's, pomagając im stać się największą agencją reklamową należącą do Blacków w Ameryce.

McBain opuścił agencję, którą był współzałożycielem w 1974 roku i rozpoczął karierę artystyczną. Otworzył galerię sztuki The Black Eye i założył firmę konsultingową – zwaną również The Black Eye – która pomogła agencjom lepiej nawiązać kontakt ze społecznością Afroamerykanów.

Emmett McBain zmarł na raka w 2012 roku i od tego czasu został uznany przez AIGA, Stowarzyszenie Sztuk Typograficznych oraz Kluby Dyrektorów Artystycznych Chicago i Detroit.

Niestety nie została opublikowana książka o Emmette McBain i jego wkładzie w reklamę i projektowanie. Nie słyszałem o jego nazwisku wymienianym na konferencjach projektowych ani nie widziałem, by pojawiało się w artykułach dotyczących współczesnego designu, a zwłaszcza internetu.

Późniejsze prace McBaina wywarły ogromny wpływ na reklamę od lat 60., ale szczególnie podobają mi się jego projekty okładek płyt. Wybuch energii, który odzwierciedla ukochaną przez McBaina muzykę jazzową. Jego kolory są ekscytujące i żywe. Jego wybór krojów pisma oraz sposoby, w jakie dekonstruował i przebudowywał czcionkę, są inspirujące. W twórczości Emmetta McBaina jest wiele rzeczy, które mogą nas inspirować.

Wyrównywanie zawartości w pionie

Niezależnie od tego, jaki styl graficzny wybiorę, HTML potrzebny do zaimplementowania tego pierwszego projektu inspirowanego McBainem jest identyczny. Potrzebuję trzech elementów konstrukcyjnych; nagłówek, który zawiera moje logo SVG i nagłówki, główny i obok, który zawiera tabelę numerów produkcyjnych Citroen DS:

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

Aby zapewnić skalowalność w różnych rozmiarach ekranu, używam SVG dla dwóch nagłówków w moim nagłówku. Używanie SVG zapewnia dodatkowy stopień spójności w obrysowanym tekście drugiego nagłówka, ale nie mogę zapomnieć o dostępności.

W numerze 8 wyjaśniłem, jak pomóc osobom korzystającym z technologii wspomagających, dodając ARIA do SVG. Dodaję atrybut roli ARIA oraz atrybut poziomu, który zastępuje brakującą semantykę. Dodanie elementu tytułu pomaga również technologii pomocniczej zrozumieć różnicę między kilkoma blokami SVG, ale przeglądarki nie wyświetlają tego tytułu:

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

Aby rozpocząć ten projekt, dodaję podstawowe style podstawowe dla każdego rozmiaru ekranu, zaczynając od kolorów pierwszego planu i tła:

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

Dodaję dokładne wymiary w pikselach do elementów SVG w nagłówku, a następnie używam automatycznych marginesów poziomych, aby wyśrodkować logo Citroen:

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

W swoim inspirującym projekcie Emmet McBain uwzględnił pionowe czarne paski, aby nadać mu strukturę. Aby osiągnąć podobny efekt bez dodawania dodatkowych elementów do kodu HTML, dodaję ciemne obramowania po lewej i prawej stronie głównego akapitu:

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

Ta sama technika dodaje podobny efekt do mojej tabeli numerów produkcyjnych Citroen DS. Do mojego stołu dodaję dwie zewnętrzne obramowania:

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

Następnie dodaję trzecią regułę po prawej stronie nagłówków tabeli:

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

Zapewniając, że każda komórka wypełnia połowę szerokości mojego stołu, ten pionowy pasek biegnie w dół środka, od góry do dołu:

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

Kiedy ktoś czyta liczbowe dane tabelaryczne, takie jak te pary lat i numery produkcyjne, jego oczy skanują kolumnę roku. Następnie śledzą, ile samochodów Citroen wyprodukował w ciągu tego roku. Ludzie mogą również porównywać liczby produkcyjne, szukając wysokich lub niskich wartości.

Aby ułatwić ich porównania, dopasowuję numery produkcyjne do prawej strony:

 aside td { text-align: right; }

W zależności od funkcji OpenType dostępnych w wybranej czcionce można również poprawić czytelność danych tabelarycznych, określając podszewkę zamiast cyfr w starym stylu. Niektóre cyfry w starym stylu — w tym 3, 4, 7 i 9 — mają dolne części, które mogą spaść poniżej linii bazowej. Utrudniają one odczytanie dłuższych ciągów liczb. Z drugiej strony liczby podszewkowe obejmują liczby, które znajdują się na linii bazowej.

Funkcje OpenType kontrolują również szerokość liczb, co ułatwia porównywanie ciągów liczb w tabeli. Podczas gdy liczby proporcjonalne mogą mieć różne rozmiary, liczby tabelaryczne mają tę samą szerokość, więc dziesiątki, setki i tysiące będą dokładniej wyrównane:

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

Na koniec wprowadzam motyw koła na dole tego małego ekranu. Nie chcę dołączać tych okrągłych obrazów do mojego kodu HTML, więc używam wygenerowanego przez CSS identyfikatora URI danych treści, w którym plik obrazu jest zakodowany w ciągu:

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

Często jestem zaskoczony, jak niewiele zmian muszę wprowadzić, aby opracować projekty dla różnych rozmiarów ekranu. Przejście z małych ekranów na projekty o średniej wielkości często wymaga jedynie drobnych zmian w rozmiarach czcionek i wprowadzenia prostych stylów układu.

Zaczynam od poziomego wyrównania logo Citroena i nagłówków SVG w nagłówku. Na średnich i dużych ekranach to logo jest na pierwszym miejscu w moim kodzie HTML, a nagłówki na drugim. Ale wizualnie elementy są odwrócone. Flexbox jest idealnym narzędziem do tego przełączenia, po prostu zmieniając domyślną wartość flex-direction z row na flex-direction: row-reverse:

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

Wcześniej nadałem swojemu logo konkretną szerokość. Ale chcę, aby nagłówki wypełniały całą pozostałą przestrzeń poziomą, więc nadaję ich oddziałowi nadrzędnemu wartość elastycznego wzrostu wynoszącą 1. Następnie dodaję margines oparty na widoku, aby oddzielić nagłówki i logo:

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

Do tego średniej wielkości projektu opracowałem layout wykorzystując symetryczną, trzykolumnową siatkę, którą nakładam zarówno na elementy główne, jak i boczne:

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

Następnie, używając tej samej techniki, której użyłem wcześniej dla elementu bocznego, generuję dwa obrazy dla elementu głównego i umieszczam je w pierwszej i trzeciej kolumnie w mojej siatce:

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

Powtarzam proces dla elementu bocznego, z tym nowym :po treści zastępującej wygenerowany obraz, który dodałem dla małych ekranów:

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

Dodatkowa przestrzeń dostępna na ekranach średniej wielkości pozwala mi wprowadzić więcej motywu pionowych pasków, inspirowanego oryginalnym projektem Emmetta McBaina. Pionowe ramki po lewej i prawej stronie głównego akapitu są już na swoim miejscu, więc pozostaje mi tylko zmienić jego tryb pisania na vertical-rl i obrócić go o 180 stopni:

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

Niektóre przeglądarki respektują właściwości siatki i bez pomocy rozciągają tabelę do pełnej wysokości wiersza siatki. Inni potrzebują trochę pomocy, więc dla nich nadaję mojej tabeli numerów produkcji wyraźną wysokość, która dodaje parzystą ilość miejsca między jej wierszami:

 aside table { height: 100%; }

Pełny efekt tego projektu inspirowanego McBainem pojawia się, gdy ekrany są wystarczająco szerokie, aby wyświetlać główne i boczne elementy obok siebie. Stosuję prostą dwukolumnową siatkę symetryczną:

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

Następnie umieszczam elementy główne i boczne za pomocą numerów wierszy, z nagłówkiem obejmującym całą szerokość mojego układu:

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

Wygląda niestrukturalnie

Jasne kolory i nieregularne kształty bloków w tym kolejnym projekcie są tak nieoczekiwane, jak jazz, który zainspirował oryginał Emmetta McBaina. Chociaż rozmieszczenie tych układów może wyglądać na niestrukturalne, kod, który potrzebuję do jego opracowania, z pewnością tak nie jest. W rzeczywistości istnieją tylko dwa elementy konstrukcyjne, nagłówek i główny:

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

Zaczynam od zastosowania kolorów tła i pierwszego planu, a także dużej ilości wypełnienia, aby umożliwić czyimś oczom wędrowanie po przestrzeniach w projekcie:

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

Te jaskrawo kolorowe bloki zdominowałyby ograniczoną przestrzeń dostępną na małym ekranie. Zamiast tego dodaję te same jasne kolory do mojego nagłówka:

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

Nieregularne kształty są aspektem tego projektu, który chcę widzieć na każdym rozmiarze ekranu, więc używam ścieżki wielokąta, aby przyciąć nagłówek. Widoczne są tylko obszary wewnątrz obszaru przycinania, wszystko inne staje się przezroczyste:

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

Dbałość o nawet najdrobniejsze szczegóły typografii pozwala ludziom wiedzieć, że każdy aspekt projektu został dokładnie przemyślany. Pozioma linia w małym elemencie na początku mojej głównej treści zmienia długość wzdłuż tekstu.

Nie chcę dodawać prezentacyjnej reguły poziomej do mojego kodu HTML i zamiast tego wybieram kombinację Flexbox i pseudo-elementów w moim CSS. Najpierw stylizuję tekst małego elementu:

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

Następnie dodaję pseudoelement :after z cienką dolną krawędzią pasującą do koloru mojego tekstu:

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

Dodanie właściwości flex wyrównuje tekst i mój pseudoelement do dolnej części małego elementu. Nadanie pseudoelementowi wartości flex-grow równej 1 pozwala mu na zmianę jego szerokości w celu uzupełnienia dłuższych i krótszych ciągów tekstu:

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

Lubię niespodzianki, a mój nagłówek drugiego poziomu „Champion de France” jest czymś więcej niż na pierwszy rzut oka.

Prawie dziesięć lat temu Dave Rupert wypuścił Lettering.js, wtyczkę jQuery, która wykorzystuje JavaScript do zawijania pojedynczych liter, wierszy i słów z elementami span. Te oddzielne elementy można następnie stylizować na wiele sposobów. Mając tylko jeden wielokolorowy element w tym projekcie, stosuję tę samą technikę bez podawania scenariusza:

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

Następnie każdą wybraną literę nadaję jej własny kolor:

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

Wyzwanie związane z responsywnym projektowaniem zawsze postrzegałem jako okazję do kreatywności i maksymalnego wykorzystania każdego rozmiaru ekranu. Dodatkowa przestrzeń dostępna na średnich i dużych ekranach pozwala mi na wprowadzenie dużych bloków koloru o nieregularnych kształtach, co sprawia, że ​​ten projekt jest nieoczekiwany.

Najpierw stosuję właściwości siatki i ośmiokolumnową siatkę symetryczną do elementu body:

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

Następnie umieszczam mój nagłówek w trzech z tych kolumn. Gdy kolorowe bloki są teraz widoczne, zmieniam kolor tła nagłówka na ciemnoszary:

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

Centrowanie treści zarówno w poziomie, jak i w pionie było wyzwaniem przed Flexboxem, ale teraz wyrównanie i wyjustowanie treści nagłówka jest proste:

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

Zmieniam kolor elementów tekstowych mojego nagłówka:

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

Następnie nakładam ujemne marginesy poziome, aby mój nagłówek nakładał się na elementy blisko niego:

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

Mój główny element nie wymaga dodatkowej stylizacji i umieszczam go na mojej siatce za pomocą numerów linii:

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

Elementy potrzebne do opracowania projektu nie muszą być w HTML. Ich miejsce mogą zająć pseudoelementy utworzone w CSS, dzięki czemu HTML jest wolny od jakiejkolwiek prezentacji. Używam pseudoelementu :before zastosowanego do ciała:

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

Następnie dodaję obraz tła URI danych, który pokryje cały pseudo-element niezależnie od jego rozmiaru:

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

CSS Grid traktuje pseudoelementy tak samo jak inne, co pozwala mi umieścić te kolorowe bloki w mojej siatce za pomocą numerów linii:

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

Podczas gdy programiści najczęściej używają punktów przerwania zapytań o media, aby wprowadzić znaczące zmiany w układzie, czasami do ulepszenia projektu potrzebne są tylko niewielkie zmiany. Jeremy Keith nazywa te momenty „punktami rozsunięcia”.

Ten średniej wielkości projekt inspirowany McBainem działa dobrze w większych rozmiarach, ale chcę poprawić jego układ i dodać więcej szczegółów do największych ekranów. Zaczynam od dodania czterech dodatkowych kolumn do mojej siatki:

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

Następnie zmieniam położenie wygenerowanych bloków kolorów, nagłówka i głównych elementów, używając nowych numerów linii:

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

Te elementy teraz nakładają się na siebie, więc aby zapobiec tworzeniu nowych wierszy w mojej siatce, nadaję im tę samą wartość grid-row:

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

Ta poprawka do mojego projektu dodaje kolejny blok koloru między nagłówkiem a głównym. Aby zachować semantykę mojego kodu HTML, dodaję pseudoelement i obraz URI danych przed moją główną treścią:

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

Dekonstruowanie obrazów typu

Na początku swojej kariery projekty okładek płyt Emmetta McBaina pokazały, że miał smykałkę do typografii. Często bawił się czcionką, dekonstruując i przebudowując ją w nieoczekiwane kształty. Ta kontrola nad typem nigdy nie była łatwa w Internecie, ale SVG umożliwia prawie wszystko.

Ten kolejny projekt inspirowany McBainem opiera się na SVG i tylko dwóch strukturalnych elementach HTML; nagłówek, który zawiera dużą grafikę opartą na typie, główny element mojej treści:

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

Potrzebuję bardzo niewielu stylów podkładu, aby zacząć opracowywać ten projekt. Najpierw dodaję kolory tła i pierwszego planu oraz dopełnienie wewnątrz moich dwóch elementów:

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

Po drugie, definiuję style dla mojego pisma, które zawierają zarówno nagłówki, jak i akapit tekstu, który po nich następuje:

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

Daję moją główną treść bogate fioletowe tło, które pasuje do koloru Citroena na panelu obok:

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

W projekcie dominuje duża grafika, która zawiera profil Citroena DS i stylizowany wizerunek czcionki z napisem „Champion de France”. Rozmieszczenie liter byłoby trudne do osiągnięcia przy użyciu pozycjonowania i przekształceń CSS, co czyni SVG idealnym wyborem.

Ten plik SVG zawiera trzy grupy ścieżek. Pierwsza zawiera zarysy słów „Champion de:”

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

Kolejna grupa obejmuje ścieżki do układania liter w jasnych kolorach. Każdej literze nadaję unikalny atrybut id, aby można było je indywidualnie stylizować:

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

Następnie dodaję atrybuty klas do grupy ścieżek, które tworzą profil Citroen DS. Mając te atrybuty, mogę dostosować kolory samochodu, aby pasowały do ​​różnych motywów kolorystycznych, a nawet zmienić je w punktach przerwania zapytania o 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>

Ekrany średniej wielkości pozwalają mi dostosować pozycję mojego profilu Citroen DS i obrazu typu:

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

Kolejność tych przekształceń jest ważna, ponieważ różne kombinacje obracania, skalowania i tłumaczenia dają nieco inne wyniki. Następnie dodaję kolumny do mojej głównej treści:

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

Do tej pory ta główna treść znajduje się po moim nagłówku w przepływie dokumentów. W przypadku większych ekranów chcę, aby te elementy znajdowały się obok siebie, więc stosuję właściwości siatki i dwanaście kolumn do ciała:

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

Umieszczam nagłówek i główny w mojej siatce za pomocą numerów wierszy. Nagłówek obejmuje siedem kolumn, podczas gdy główna treść obejmuje tylko pięć, tworząc asymetryczny układ z symetrycznej siatki:

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

Skalowanie tekstu graficznego

Rozróżnienie między SVG a HTML zacierało się, im częściej używam SVG w swojej pracy. SVG jest formatem opartym na XML i jest całkowicie w domu, gdy jest włączony do HTML. Ten ostateczny projekt inspirowany McBainem opiera się na SVG w HTML nie tylko ze względu na uderzające obrazy, ale także tekst.

Aby stworzyć ten efektowny czerwono-czarny projekt, potrzebuję czterech strukturalnych elementów HTML. Nagłówek zawiera zdjęcie kultowego Citroena DS. Podział banerów obejmuje duży nagłówek opracowany przy użyciu tekstu SVG. Główny element to mój tekst biegowy, a na koniec na marginesie treści uzupełniające:

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

Kiedyś myślałem, że używanie SVG do renderowania tekstu jest tak samo nieodpowiednie, jak ustawianie tekstu w obrazach, ale używając więcej SVG, zdaję sobie sprawę, że się myliłem.

W numerze 8 wyjaśniłem, jak podobnie jak tekst HTML, tekst SVG jest dostępny i możliwy do wybrania. Ma również tę zaletę, że można nieskończenie stylizować przy użyciu ścieżek przycinających, wypełnień gradientowych, filtrów, masek i pociągnięć.

Nagłówek działu banerów zawiera dwa elementy tekstowe. Pierwsza zawiera duże słowo „Champion”, druga zawiera „de France”. Pary współrzędnych x i y na każdym elemencie tspan umieszczają te słowa dokładnie tam, gdzie chcę, aby tworzyły solidną płytę tekstu:

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

Niezależnie od tego, czy zdecyduję się włączyć ten SVG do mojego HTML, czy połączyć go jako obraz zewnętrzny, mogę użyć CSS do zdefiniowania jego stylu. Ten nagłówek jest połączonym obrazem, więc dodaję moje style do pliku 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>

Zaczynam od dodania kolorów podkładu i stylów typograficznych. Wybrałem wcięcie na początku każdego nowego akapitu, więc usuwam wszystkie dolne marginesy i dodaję wcięcie o szerokości 2 cali do każdego kolejnego akapitu:

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

Ciemnoszare tło i czerwony tekst mojego elementu bocznego są przeciwieństwem tych w innych częściach mojego projektu. Zwiększenie jasności i nasycenia sprawia, że ​​kolory wydają się bardziej żywe na ciemnym tle:

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

Ekrany średniej wielkości pozwalają mi dostosować projekt moich treści, aby jak najlepiej wykorzystać dodatkową dostępną przestrzeń. Używam dwóch różnych właściwości układu wielokolumnowego. Najpierw określę dwie kolumny o zmiennej szerokości dla mojego podziału treści. Następnie dowolna liczba kolumn, które będą miały szerokość 16em:

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

Większość moich stylizacji jest widoczna dla osób korzystających nawet z najmniejszych ekranów, więc opracowanie układu dużego ekranu wymaga zastosowania właściwości siatki i dwunastu kolumn do elementu body:

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

W pierwszej kolumnie umieszczam logo Citroena:

 body > svg { grid-column: 1; }

Następnie nagłówek zawierający obraz kultowego DS obejmuje cztery kolumny:

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

Zarówno podział na banery ze stylowym nagłówkiem SVG, jak i bieżący tekst mojej głównej treści zajmują osiem kolumn:

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

I na koniec, element z odwróconym motywem zajmuje trzy kolumny po prawej stronie mojego projektu. Aby upewnić się, że ta treść obejmuje każdy wiersz od góry do dołu mojego układu, umieszczam ją za pomocą numerów wierszy:

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

Czytaj więcej z serii

• Inspirowane decyzje projektowe: Avaunt Magazine
• Inspirowane decyzje projektowe: Prasa ma znaczenie
• Inspirowane decyzje projektowe: Ernest Journal
• Inspirowane decyzje projektowe: Alexey Brodovitch
• Inspirowane decyzje projektowe: Bea Feitler
• Inspirowane decyzje projektowe: Neville Brody
• Inspirowane decyzje projektowe: Otto Storch
• Inspirowane decyzje projektowe: Herb Lubalin
• Inspirowane decyzje projektowe: Max Huber
• Inspirowane decyzje projektowe: Giovanni Pintori
• Inspirowane decyzje projektowe: Bradbury Thompson

NB: Członkowie Smashing Członkowie Smashing mają dostęp do pięknie zaprojektowanego PDF magazynu Andy's Inspired Design Decisions oraz pełnych przykładów kodu z tego artykułu. Możesz kupić plik PDF tego wydania i przykłady, a także każdy inny numer bezpośrednio ze strony internetowej Andy'ego.