Keputusan Desain Terinspirasi Dengan Giovanni Pintori: Publisitas Menjadi Sebuah Bentuk Seni

Dengan satu atau dua pengecualian sesekali, saya telah menghabiskan dua puluh dua tahun terakhir merancang untuk klien yang tak terhitung jumlahnya. Beberapa dari proyek ini berlangsung selama satu tahun, beberapa beberapa bulan, tetapi sebagian besar tidak lebih dari beberapa minggu.

Menjadi benar-benar terserap selama beberapa minggu atau bulan dalam merancang antarmuka produk atau situs web bisa menjadi sensasi. Seringkali dimulai dengan kepuasan yang datang dari memenangkan pekerjaan. Mendapatkan kepercayaan dan kepercayaan klien baru bisa membuat ketagihan. Selama fase "mengenal Anda" yang menggoda, Anda belajar tentang klien dan apa yang mereka harapkan dari Anda dan pekerjaan Anda. Kepribadian adiktif seperti saya mendambakan intensitas perasaan ini, tetapi — seperti beberapa hubungan — kegembiraan awal segera memudar menjadi kenyataan bekerja bersama.

Pergaulan kreatif ini sangat cocok dengan rentang perhatian saya yang sering pendek dan rasa ingin tahu yang gelisah. Namun, ada kalanya saya berharap dapat bertahan lebih lama di sebuah organisasi, mengenal mereka lebih baik, dan menjadi pengaruh positif pada apa yang mereka lakukan dan hasilkan.

Saya tahu banyak desainer yang bekerja di rumah. Sementara saya tidak pernah iri dengan perjalanan mereka atau uang yang mereka habiskan untuk tinggal di dekat tempat kerja, ada bagian dari diri saya yang iri dengan kemampuan mereka untuk tetap tinggal dan membentuk arah kreatif jangka panjang dari sebuah perusahaan dengan cara yang Giovanni Pintori bantu Olivetti.

“Di zaman kita sekarang, publisitas telah menjadi bentuk seni, dan semakin perlu untuk menghidupkan nama ini. Publisitas adalah bentuk wacana yang harus menghindari ketidakjelasan demi singkatnya, kejelasan, dan persuasif. Mereka yang terlibat dalam publisitas (penulis, pelukis, arsitek) membutuhkan logika dan imajinasi dalam ukuran yang sama.”

— Giovanni Pintori

Desainer Italia Giovanni Pintori bekerja untuk produsen produk bisnis Olivetti selama lebih dari 31 tahun. Selama waktu ini, gayanya berkembang menjadi kosakata desain unik perusahaan. Daya tarik bekerja dengan satu perusahaan selama lebih dari beberapa bulan semakin kuat seiring bertambahnya usia saya. Selama 18 bulan terakhir, saya telah mencurahkan sebagian besar waktu saya untuk bekerja dengan perusahaan keamanan siber Swiss, yang berbasis tidak jauh dari Milan dan tempat Giovanni Pintori menelepon ke rumah.

Seperti Olivetti, perusahaan ini menghargai desain dalam segala bentuk. Sementara prioritas utama saya adalah desain produk perusahaan, saya juga memiliki kesempatan untuk mempengaruhi merek, pemasaran, dan arah kreatif mereka secara keseluruhan.

Saya masih menghabiskan waktu untuk proyek orang lain ketika pekerjaan itu menarik bagi saya, tetapi saya telah belajar betapa bermanfaatnya hubungan klien jangka panjang. Saya bahagia dan lebih puas secara kreatif daripada tahun-tahun sebelumnya. Ditambah lagi, seiring bertambahnya usia, saya tidak punya energi untuk mengejar setiap proyek menarik seperti dulu.

Terinspirasi oleh Giovanni Pintori

Lahir di Sardinia pada tahun 1912, Giovanni Pintori menjadi salah satu desainer grafis Eropa paling berpengaruh di abad ke-20. Ia menjadi terkenal karena gaya khas yang ia ciptakan ke dalam bahasa desain Olivetti selama lebih dari 30 tahun.

Pintori belajar desain di L'Istituto Superiore per le Industrie Artistiche (Institut Tinggi untuk Industri Artistik) yang berpengaruh di Italia di mana ia dikelilingi oleh seni kreatif. ISIA adalah sekolah progresif di mana siswa belajar keramik, lukisan, logam, dan kayu.

Saat belajar di ISIA, Pintori bertemu Renato Zveteremich, direktur periklanan dan humas yang mengepalai departemen periklanan Olivetti selama tahun 1930-an. Setelah lulus dari HIAI, Pintori bergabung dengan Olivetti untuk bekerja di bawah Zveteremich dan menjadi direktur seni perusahaan pada tahun 1950.

Olivetti memproduksi mesin bisnis, yang paling terkenal adalah jenis mesin tiknya. Ketika Pintori bergabung dengan Olivetti, perusahaan tersebut sudah dikenal dengan desain produk aslinya. Produknya langsung dapat dikenali, dan di bawah bimbingan desainer industri Marcello Nizzoli, setiap detail desain mereka—mulai dari bentuk bilah spasi hingga warna casing luarnya dipertimbangkan dengan cermat.

“Jika seniman dipanggil untuk menafsirkan, mengekspresikan, dan mempertahankan kemurnian fungsional sebuah mesin, itu benar-benar sebuah tanda bahwa mesin telah memasuki jiwa manusia dan bahwa masalah bentuk dan hubungan masih bersifat intuitif.”

— Renato Zveteremich

Tapi keasyikan Olivetti dengan desain tidak berakhir dengan produknya. Kreativitas adalah bagian penting dari budaya perusahaan yang terlihat dari arsitektur pabrik dan kantornya hingga periklanan dan desain grafis yang digunakan untuk mempromosikan produknya.

Selama 30 tahun karirnya di Olivetti, Pintori merancang iklan perusahaan, brosur, dan bahkan kalender tahunan mereka. Gaya estetika Pintori berani dan percaya diri. Dia menggunakan warna-warna cerah dari palet warna minimal dan menggabungkannya dengan bentuk untuk mengisi desainnya dengan energi.

Tapi karya Pintori tidak hanya main-main, tapi juga bijaksana. Pilihan bentuknya tidak abstrak. Bentuk menyarankan manfaat menggunakan produk daripada menggambarkan fitur-fiturnya secara harfiah. Pintori tidak hanya mengilustrasikan produk, ia menghidupkannya melalui desainnya dengan menyarankan bagaimana produk tersebut dapat digunakan dan apa yang dapat mereka lakukan untuk meningkatkan kehidupan dan pekerjaan orang.

“Saya tidak mencoba berbicara atas nama mesin. Sebaliknya, saya telah mencoba untuk membuat mereka berbicara sendiri, melalui presentasi grafis dari elemen mereka, operasi mereka dan penggunaannya.”

Pintori mendefinisikan citra Olivetti jauh melampaui waktunya di perusahaan, dan dia terus mengerjakan proyek dengan mereka setelah pergi pada tahun 1967. Dia mendirikan studionya sendiri di Milan, di mana dia bekerja sebagai desainer lepas, sebelum pensiun dan mendedikasikan dirinya untuk melukis.

Giovanni Pintori meninggal di Milan pada tahun 1999, dan ada sebuah buku, Pintori oleh Marta Sironi dan diterbitkan oleh Moleskine yang mencatat karirnya yang menakjubkan.

Karya Pintori menginspirasi bukan hanya karena keberanian bentuknya yang penuh warna, tetapi karena apa yang mereka wakili. Pintori memahami bahwa mempromosikan suatu produk membutuhkan lebih dari sekadar mencantumkan fitur-fiturnya. Publisitas harus menceritakan kisah yang beresonansi dengan pelanggan, dan itu adalah pelajaran yang harus kita semua terinspirasi.

Membuat Palet Warna

Warna yang kita pilih harus menceritakan sebuah cerita tentang perusahaan, produk, atau layanan dengan fasih seperti tata letak atau tipografi kita. Pilihan warna kita dapat menarik perhatian seseorang, mempengaruhi persepsi mereka tentang apa yang kita lakukan, dan bahkan merangsang emosi. Warna memainkan peran penting dalam membuat produk atau situs web mudah dan intuitif untuk digunakan. Selain warna merek, palet warna untuk web membantu orang bernavigasi, memberi tahu mereka apa yang dapat mereka tekan, dan di mana mereka pernah berada.

Saya suka menjaga warna saya tetap sederhana, dan palet saya jarang mengandung lebih dari tiga warna; warna dominan, warna sekunder atau pendukung, dan aksen. Untuk ini, saya menambahkan sedikit pilihan warna netral untuk digunakan sebagai latar belakang, batas, dan teks.

Untuk menambah kedalaman pada desain saya — dan untuk memberi saya fleksibilitas yang lebih besar — ​​saya juga memperkenalkan corak dan rona dari setiap rona saya. Saya menggunakan warna yang lebih gelap untuk batas — misalnya — di sekitar tombol — dan warna yang lebih terang untuk menambahkan sorotan.

Karena mode gelap sistem operasi menjadi lebih umum, saya juga secara halus mengubah kecerahan dan saturasi warna di palet saya, sehingga tampak lebih hidup dengan latar belakang gelap.

Menggunakan Warna Primer

HTML yang diperlukan untuk mengimplementasikan desain terinspirasi Pintori pertama saya bermakna dan sederhana seperti desain itu sendiri. Saya hanya membutuhkan empat elemen struktural; header yang berisi dua SVG profil Morris Traveller yang ikonik, elemen utama untuk running text saya, SVG bagian depan Traveler, dan terakhir footer yang berisi logo perusahaan Morris Motors:

 <header> <svg>…</svg> <svg>…</svg> </header> <main> <h1>…</h1> <p>…</p> </main> <figure> <svg>…</svg> </figure> <footer> <svg>…</svg> </footer>

Sementara file SVG eksternal akan di-cache dan siap untuk dirender, sekarang saya menyematkan SVG dalam HTML saya bila memungkinkan. Lebih sedikit file eksternal berarti lebih sedikit permintaan HTTP, tetapi manfaat penyematan jauh melampaui kinerja.

Perubahan halus dalam saturasi warna dan kecerahan antara tema terang dan mode gelap sering kali diperlukan untuk mempertahankan ketajaman elemen desain terhadap warna latar belakang yang kontras. Saat SVG disematkan dalam HTML, isian dan goresannya dapat diubah secara halus menggunakan CSS.

Saya mulai dengan menerapkan warna dan gaya dasar tipografi untuk versi gelap yang berbeda dari desain saya. Ini termasuk Moderna Sans, jenis huruf sans-serif serbaguna yang dirancang oleh Luciano Vergara dan Alfonso Garcia yang saya pilih untuk membangkitkan gaya karya Pintori untuk Olivetti:

 body { padding: 2rem; background-color: #262626; font-family: "moderna_sans-light"; color: #fff; } h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; font-weight: normal; line-height: 1; }

Flexbox mengubah header saya menjadi panel gulir horizontal, salah satu cara paling efektif untuk mempertahankan hierarki visual dalam desain layar kecil:

 header { display: flex; flex-wrap: nowrap; overflow-x: scroll; }

Properti flex-grow dengan nilainya 1 memastikan semua gambar diperluas untuk mengisi ruang yang tersedia, sementara flex-basis memastikan item fleksibel ini dimulai dari minimal 640px;

 header svg { flex-grow: 1; flex-basis: 640px; } header svg:not(:last-of-type) { margin-right: 2rem; }

Terakhir, saya menambahkan sejumlah besar padding horizontal dan menyelaraskan logo Morris ke tengah footer saya:

 footer { padding-right: 8rem; padding-left: 8rem; text-align: center; }

Panel gulir horizontal saya menambah ketertarikan pada layar kecil, tetapi ruang ekstra yang tersedia pada layar berukuran sedang memungkinkan saya untuk menampilkan lebih banyak Pelancong Inggris saya yang pada dasarnya.

CSS Grid menawarkan penempatan dan penumpukan elemen yang tepat yang tidak dimiliki Flexbox dan merupakan pilihan sempurna untuk header ini pada layar sedang hingga besar. Saya mengubah nilai properti tampilan dari flex ke grid, lalu menambahkan tiga kolom dan baris simetris.

Sementara lebar dua kolom luar ditetapkan pada 270px, kolom dalam mengembang untuk mengisi semua ruang yang tersisa. Saya menggunakan teknik serupa untuk tiga baris, memperbaiki dua baris terluar pada ketinggian 100px. Ini mengimbangi posisi kedua gambar dan menambah kedalaman pada desain ini:

 header { display: grid; grid-template-columns: 270px 1fr 270px; grid-template-rows: 100px 1fr 100px; }

Menggunakan pemilih kelas semu dan nomor baris, saya menempatkan SVG pertama, lalu memperkecil ukurannya untuk menambahkan perspektif:

 header svg:first-of-type { grid-column: 2 / 4; grid-row: 1 / 2; transform: scale(.85); }

Kemudian, saya menempatkan yang kedua dari dua grafik saya. Saya menaikkannya dalam urutan susun dengan menambahkan nilai indeks-z yang lebih tinggi yang membuatnya lebih dekat secara visual ke pemirsa:

 header svg:last-of-type { grid-column: 1 / 3; grid-row: 2 / 4; z-index: 2; }

Bahkan kisi-kisi rasio rata yang tampaknya biasa-biasa saja dapat menghasilkan tata letak asli ketika sebuah desain menyertakan banyak ruang putih untuk membantu mengarahkan perhatian. Untuk desain ukuran sedang ini, saya menerapkan kisi enam kolom simetris dengan nilai celah kolom dan baris yang sebanding dengan lebar dan tinggi layar:

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 2vw; row-gap: 2vh; } }

Elemen header saya mengisi seluruh lebar grid saya. Kemudian, saya menempatkan elemen utama, gambar, dan footer, menambahkan lebih banyak ruang putih secara proporsional untuk mempersempit lebar gambar dan footer saya:

 header { grid-column: 1 / -1; } main { grid-column: 2 / 6; } figure { grid-column: 3 / 5; } footer { grid-column: 3 / 5; padding-right: 4rem; padding-left: 4rem; }

Desain ini menjadi lebih menonjol dengan ruang yang tersedia di layar besar.

Bagi mereka, saya menerapkan nilai kisi ke elemen tubuh untuk membuat delapan kolom dari kisi majemuk 6+4:

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

Mendasarkan desain ukuran sedang saya pada enam kolom, lalu menyertakan kisi yang sama di senyawa layar besar saya, membantu mempertahankan proporsi di semua ukuran desain saya. Kemudian, saya memposisikan ulang empat elemen struktural ke grid baru saya:

 header { grid-column: 1 / 8; } main { grid-column: 2 / 5; text-align: right; } figure { grid-column: 5 / 7; } footer { grid-column: 4; padding: 0; }

Terakhir, untuk membuat blok konten yang solid di tengah desain saya, saya mengikat konten utama ke gambar yang sekarang berdekatan dengan menyejajarkan kembali teksnya ke kanan:

 main { text-align: right; } 

Palet Monokromatik

Bahkan setelah lebih dari dua puluh tahun berkecimpung dalam bisnis ini, saya masih merasa bekerja dengan warna sebagai aspek desain yang paling menantang. Mungkin itu sebabnya saya sering tertarik pada skema warna monokromatik karena skema warna tersebut membuat pencapaian tampilan kohesif secara visual cukup sederhana.

Palet warna monokromatik mengandung variasi dalam naungan, rona, dan nada, dengan menambahkan berbagai persentase hitam, abu-abu, atau putih ke warna dasar yang dipilih.

• Shades : Menggelapkan warna menggunakan hitam
• Tints : Meringankan warna menggunakan putih
• Nada : Desaturasi warna menggunakan abu-abu

Saat digunakan untuk latar belakang, batas, dan detail, corak dan rona dapat membuat desain terasa harmonis.

Menggunakan corak, rona, dan nada dapat membantu mengurangi warna cerah yang mungkin menarik perhatian yang tidak diinginkan pada aspek desain. Mereka sangat berguna ketika mengembangkan palet warna yang lebih bervariasi dari satu set warna merek yang ada.

Saya sering memilih palet monokromatik murni atau monokromatik parsial yang menyertakan warna aksen. Warna tambahan ini bertindak sebagai tandingan dari warna dasar dan memberikan kedalaman yang lebih besar pada desain.

Membatasi Palet

Berkat CSS Grid, gradien gambar latar belakang, dan elemen semu, desain terinspirasi Pintori berikutnya ini mencapai nilai yang sangat besar dari kumpulan elemen HTML yang sangat kecil. Saya hanya perlu judul, satu paragraf, ditambah tujuh divisi kosong. Saya memberikan setiap divisi identitasnya sendiri. Ini memungkinkan saya untuk memberi mereka gaya khas mereka sendiri:

 <h1>…</h1> <p>…</p> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

HTML ini menempatkan judul dan paragraf sebelum tujuh panel, tetapi perhatikan baik-baik desain layar kecil yang telah selesai, dan Anda akan melihat konten ini telah diatur ulang untuk menempatkan logo Morris, lalu gambar bagian depan Traveler di bagian atas .

Sementara saya sering memperkenalkan properti grid ke layar sedang dan besar, CSS Grid juga berguna untuk mengatur ulang konten di layar yang lebih kecil. Untuk desain ini, saya mengubah nilai tampilan elemen tubuh menjadi kisi, lalu memperkenalkan celah berbasis ketinggian viewport antara baris intrinsik yang tidak ditentukan:

 body { display: grid; row-gap: 2vh; }

Kemudian, saya menyusun ulang panel yang berisi logo dan gambar Morris Motors saya, ditambah judulnya, menggunakan nomor baris:

 #panel-d { grid-row: 1; } #panel-e { grid-row: 2; } h1 { grid-row: 3; }

Karena divisi panel saya tidak memiliki elemen lain, tingginya akan runtuh menjadi nol, hanya menyisakan batasnya. Untuk memastikan ada ruang untuk menampilkan latar belakang dan konten yang dihasilkan, saya menentukan ketinggian minimum untuk semua panel:

 [id*="panel"] { min-height: 380px; }

Panel yang muncul pertama kali dalam desain layar kecil saya menunjukkan logo Morris Motors, yang saya sisipkan menggunakan URI data konten yang dihasilkan CSS. Jika Anda tidak terbiasa dengan tipe konten praktis ini, URI data adalah file yang telah dikodekan menjadi string. Anda dapat menggunakan URI data di mana saja di CSS atau HTML Anda:

 <img src="data:image/png…"> <img src="data:image/svg+xml…">

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

Saat browser menemukan URI data, browser akan mendekode konten dan merekonstruksi file asli. URI data tidak terbatas pada gambar yang disandikan tetapi sering digunakan untuk mengkodekan gambar berformat PNG dan SVG. Anda akan menemukan beberapa alat untuk mengonversi gambar menjadi URI data secara online.

Pertama, saya mengubah tinggi minimum panel ini agar sesuai dengan tinggi logo saya, lalu saya memasukkan logo:

 #panel-d { min-height: 90px; text-align: center; } #panel-d:before { content: url("data:image/svg+xml…"); display: block; width: 135px; height: 90px; margin: 0 auto; }

Saya menggunakan teknik serupa untuk menempatkan gambar latar belakang di belakang paragraf saya. Saya menambahkan properti pengulangan, posisi, dan ukuran yang membuat latar belakang fleksibel dan menempatkannya selalu di tengah horizontal dan vertikal paragraf saya:

 p { background-image: url("data:image/svg+xml…"); } p { background-repeat: no-repeat; background-position: 50% 50%; background-size: 50% 50%; } 

Masing-masing panel saya memiliki desain grafis yang khas. Saya dapat menempatkan gambar ke dalam tujuh panel ini, tetapi ini akan membutuhkan setidaknya tujuh permintaan HTTP tambahan. Jadi sebagai gantinya, saya menggunakan berbagai kombinasi beberapa gambar latar belakang menggunakan URI data dan gradien CSS untuk mencapai hasil yang saya butuhkan.

Panel pertama berisi grafik tutup hub Morris di atas latar belakang biru, putih, dan hitam bergaris. Gambar latar belakang hub cap berasal dari URI data:

 #panel-a { background-image: url("data:image/svg+xml…"); }

Kemudian, saya menambahkan gambar latar belakang bergaris kedua menggunakan gradien linier:

 #panel-a { background-image: url("data:image/svg+xml…"), linear-gradient( to bottom, #34749F, #34749F 65px, #fff 65px, #fff 80px, #262626 80px); }

Saya menentukan dua set nilai pengulangan, posisi, dan ukuran yang dipisahkan koma, mengingat untuk menyimpannya dalam urutan yang sama dengan gambar latar belakang saya:

 #panel-a { background-repeat: no-repeat, repeat-x; background-position: 50% 100%, 0 0; background-size: 75% 75%, auto auto; }

Panel berikutnya ini mencakup dua gambar SVG, diikuti oleh garis-garis hitam, kuning, dan putih yang lebih kompleks. Dengan menempatkan perhentian warna dengan warna berbeda pada posisi yang sama di gradien saya, saya membuat latar belakang bergaris dengan garis keras di antara warna saya:

 #panel-b { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), linear-gradient( to bottom, #B5964D, #B5964D 125px, #262626 125px, #262626 140px, #fff 140px, #fff 155px, #262626 155px); } #panel-b { background-repeat: no-repeat, no-repeat, repeat-x; background-position: 50% 45px, 50% 190px, 0 0; background-size: 90%, 90%, auto; }

Saya mengembangkan masing-masing panel saya menggunakan kombinasi berbeda dari teknik yang sama ini, membuatnya memuat dengan cepat dan fleksibel. Jarang menemukan desain online yang didasarkan pada grid modular, tetapi ini adalah pilihan yang sempurna untuk desain layar besar yang terinspirasi Pintori ini. Grid modular ini terdiri dari tiga kolom dan baris.

Saya menambahkan properti kisi ke elemen tubuh, lalu menentukan lebar kolom saya untuk mengisi semua ruang yang tersedia. Untuk memastikan selalu ada ketinggian yang cukup untuk menampilkan konten setiap panel, saya menggunakan nilai minmax Grid, mengatur tinggi minimum pada 300px dan maksimum pada 1fr:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(300px, 1fr)); gap: 1rem; min-height: 100vh; } }

Elemen dalam desain ini tidak tumpang tindih, jadi saya menggunakan area template-grid untuk kesederhanaannya. Desain ini memiliki sembilan area grid, dan saya memberi masing-masing satu nama huruf, a–h. Karena huruf d digunakan untuk dua area yang berdekatan, item yang ditempatkan menggunakan huruf itu akan menempati keduanya:

 body { grid-template-areas: "abc" "dde" "fgh"; }

Dalam implementasi layar besar ini, nilai minmax Grid CSS mengontrol ketinggian baris saya, membuat tinggi minimum yang saya terapkan sebelumnya menjadi berlebihan:

 [id*="panel"] { min-height: none; }

Saya menempatkan panel saya menggunakan nama area yang memungkinkan saya untuk mengubah di mana mereka muncul di tata letak saya tanpa mengubah posisinya di HTML saya:

 #panel-a { grid-area: a; } #panel-b { grid-area: b; } #panel-c { grid-area: c; } #panel-d { grid-area: d; } #panel-e { grid-area: e; } #panel-f { grid-area: f; } #panel-g { grid-area: g; } p { grid-area: h; }

Sementara desain panel saya tetap konsisten di seluruh ukuran layar, ada satu panel di mana konten dan latar belakang berubah untuk layar yang lebih besar. Panel ini berisi logo Morris yang familier dan apa yang tampaknya menjadi judul utama, “Gaya… dengan cara BESAR.”

Untuk mengembangkan panel ini, pertama-tama saya menambahkan batas padat yang dalam di bagian atas, diikuti oleh gambar latar belakang URI data:

 #panel-d { border-top: 15px solid #262626; background-image: url("data:image/svg+xml…"); }

Kemudian, saya menambahkan gambar latar belakang gradien kedua yang membuat panel hitam dan dua garis kuning vertikal:

 #panel-d { background-image: url("data:image/svg+xml…"), linear-gradient( to right, #fff, #fff 280px, #B5964D 280px, #B5964D 320px, #fff 320px, #fff 335px, #262626 335px, #262626 calc(100% - 40px), #F2C867 calc(100% - 40px), #F2C867 100%); }

Sebelumnya dalam proses saya, saya menggunakan elemen pseudo :before untuk menambahkan logo Morris ke desain ini. Untuk layar besar, saya memposisikan ulang logo itu ke kiri bawah panel saya:

 #panel-d position: relative; } #panel-d:before { position: absolute; bottom: 0; left: 0; margin: 0; }

Judul besar saya langsung diturunkan dari badan HTML dan bukan bagian dari panel ini, sehingga sulit untuk memposisikannya di seluruh ukuran layar yang fleksibel. Untuk mereproduksi desain saya dengan tepat, tanpa mengorbankan aksesibilitas, pertama-tama saya menggunakan metode yang dapat diakses untuk menyembunyikan judul ini secara visual bagi orang-orang yang menggunakan pembaca layar:

 h1 { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

Kemudian, saya mengembalikan teks judul menggunakan konten yang dibuat dan elemen semu :setelah. Saya memposisikannya di kanan bawah panel saya dan meniru gayanya yang tebal, kental, dan miring:

 #panel-d:after { content: "Style… in a BIG way"; position: absolute; bottom: 0; right: 0; font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; line-height: 1; text-align: right; } 

Palet Pelengkap

Warna yang saling melengkapi berada di sisi berlawanan dari roda warna. Namun, meskipun mudah untuk memahami hubungan matematisnya, bekerja dengan warna komplementer dapat menjadi tantangan.

Kombinasi warna komplementer yang berdekatan bisa terlihat kasar, dan bukannya saling melengkapi, bisa terasa tidak harmonis. Untuk mencegahnya berbenturan, gunakan corak, warna, atau nada warna pelengkap yang juga akan membantu memperluas palet warna yang dapat digunakan.

Sebagai alternatif, gunakan warna komplementer terpisah di mana alih-alih warna yang berlawanan, palet menyertakan dua warna di kedua sisi komplementer.

Warna Pelengkap

Beberapa cetak biru Morris Traveler yang saling melengkapi dengan warna-warni tumpang tindih dalam desain terinspirasi Pintori saya berikutnya. HTML yang dibutuhkan untuk mengembangkan desain ini seminimal mungkin seperti penggambaran mobil ini. Divisi spanduk mencakup SVG dari logo Morris, dan elemen utama berisi judul dan teks berjalan.

Namun, fleksibilitas desain ini di beberapa ukuran layar berasal dari penggunaan dua elemen gambar, masing-masing berisi tiga gambar. Saya menyertakan satu elemen gambar di header, lalu yang lain di footer saya:

 <div class="banner"> <svg>…</svg> </div> <header> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </header> <main> <h1><b>…</b></h1> <p>…</p> </main> <footer> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </footer>

Setiap proyek pengembangan saya dimulai dengan menambahkan gaya fondasi yang sekarang sudah dikenal, kali ini menambahkan warna latar belakang putih pucat dan teks sans-serif hampir hitam:

 body { background-color: #f3f2f2; font-family: "moderna_sans-light"; color: #262626; }

Saya menyelaraskan konten divisi spanduk saya ke tengah, lalu mengatur lebar maksimum logo menjadi 150px kecil:

 .banner { text-align: center; } .banner svg { max-width: 150px; }

Judul utama dalam desain ini diatur dalam gaya Moderna Sans yang tebal, kental, dan miring:

 h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.027rem; font-weight: normal; line-height: 1.2; }

Bagian dari judul ini terlampir dalam elemen rentang yang memungkinkan saya untuk mengubah warnanya agar sesuai dengan aspek lain dari desain ini, termasuk lambang banteng di tengah logo Morris Motors:

 h1 span { color: #df4561; } #logo .emblem { fill: #df4561; }

Pada layar kecil, header dan footer berisi satu gambar Traveler. Jika ada ruang untuk menempatkan dua Traveler secara berdampingan, browser akan mengubah gambar di dua elemen gambar.

Untuk layar ukuran sedang, saya memanfaatkan ruang ekstra yang tersedia dan memperkenalkan kisi simetris empat kolom:

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

Saya menempatkan divisi spanduk di dua kolom tengah, memusatkan logo saya, lalu menggesernya secara vertikal agar pas di antara bumper kedua Pelancong saya:

 .banner { grid-column: 2 / 4; text-align: center; transform: translateY(2vh); }

Baik header dan footer saya merentang kisi dari ujung ke ujung, sambil menempatkan konten utama ke dalam dua kolom tengah menciptakan ukuran yang nyaman:

 header, footer { grid-column: 1 / -1; } main { grid-column: 2 / 4; }

Perubahan paling signifikan pada tata letak desain ini dapat dilihat pada ukuran layar yang lebih besar. Terlepas dari namanya, Anda tidak perlu menempatkan elemen header atau footer di bagian atas dan bawah tata letak. Mereka dapat ditempatkan di mana saja dalam sebuah desain, termasuk di kiri atau kanan.

Untuk kontrol yang lebih tepat atas tata letak saya, saya menambah jumlah kolom di kisi saya dari empat menjadi delapan, lalu memperkenalkan dua baris. Baris pertama memiliki tinggi tetap 160px, sedangkan tinggi baris kedua akan ditentukan oleh konten:

 @media (min-width: 72em) { body { grid-template-columns: repeat(8, 1fr); grid-template-rows: 160px auto; column-gap: 2vw; } }

Saya memposisikan ulang divisi spanduk saya di tiga kolom dan mengatur elemen utama di bawah ini agar sesuai:

 .banner, main { grid-column: 3 / 5; }

Kemudian, saya menempatkan footer ke dalam tiga kolom pertama, dan header ke dalam empat kolom terakhir untuk membuat tata letak asimetris dari kisi simetris:

 header { grid-column: 5 / -1; } footer { grid-column: 1 / 4; }

Baik header dan footer mengisi tinggi grid saya dari atas ke bawah:

 header, footer { grid-row: 1 / 3; }

Sedangkan pembagian spanduk menempati baris pertama:

 .banner { grid-row: 1; }

Dan elemen utama pas di bawahnya:

 main { grid-row: 2 / 3; z-index: 2; }

Menerapkan tema terang dan desain gelap telah menjadi bagian dari produk sehari-hari dan desain situs web sejak Apple memperkenalkan mode gelap ke iOS dan macOS. Mengembangkan mode gelap/terang itu mudah, dan sekarang ada kueri media yang didukung secara luas untuk preferensi pengguna ini. Ada tiga nilai yang dapat dipilih:

• no-preference : Seseorang belum menyatakan preferensi
• cahaya : Seseorang telah memilih tema ringan
• gelap : Seseorang telah memilih tema gelap

Memperkenalkan versi mode gelap dari desain ini tidak lebih dari sekadar menambahkan perubahan pada nilai warna tertentu dalam kueri media tersebut. Misalnya, dengan membalikkan warna teks latar belakang dan latar depan, dan mengubah warna isian jalur di logo SVG saya:

 @media (prefers-color-scheme: dark) { body { background-color: #262626; color: #fff; } #logo .metal, #logo .emblem { fill: #fff; } }

Menentukan warna mode gelap terkadang melibatkan lebih dari sekadar membalikkannya, membuat latar belakang putih menjadi hitam, dan teks hitam menjadi putih. Teks putih murni pada latar belakang hitam penuh membuat membaca bagian teks yang panjang melelahkan mata, jadi pertimbangkan untuk melunakkan kontras ini dengan menggunakan putih pudar:

 body { color: #f3f2f2; }

Terkadang, bahkan warna komplementer yang cerah pun bisa tampak berbeda saat ditempatkan dengan latar belakang gelap. Untungnya, filter CSS dapat meningkatkan kecerahan, saturasi, atau keduanya, tanpa perlu mengekspor versi file yang berbeda untuk latar belakang yang lebih gelap:

 header img, footer img { filter: saturate(1.5) brightness(1.1); } 

Warna Cerah

Dalam desain terakhir saya yang terinspirasi Pintori, persegi panjang berwarna-warni melayang di atas latar belakang abu-abu gelap. Desain ini hanya membutuhkan tiga elemen struktural; header yang sekali lagi menyertakan logo Morris Motors, elemen gambar yang tidak hanya berisi satu, bukan dua, tetapi tiga gambar garis besar Morris Traveller, dan elemen utama yang berisi teks lari saya:

 <header> <svg>…</svg> </header> <figure> <img> <img> <img> </figure> <main> <h1>…</h1> <p>…</p> <p>…</p> </main>

Untuk HTML minimal ini, saya menambahkan empat gambar SVG murni presentasi. Karena saya tidak ingin ini diumumkan oleh teknologi bantu, saya menambahkan atribut tersembunyi ARIA ke masing-masingnya:

 <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg>

Pertama, saya menentukan gaya dasar untuk warna latar belakang dan latar depan, kemudian menerapkan gambar SVG presentasi yang sama ke latar belakang menggunakan URI data:

 body { background-color: #262626; } background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"); color: #f3f2f2; }

Kemudian, saya menentukan pengulangan latar belakang dan nilai posisi, menempatkan setiap SVG di tengah, dan menumpuknya secara vertikal di halaman. Akhirnya, saya mengatur ukurannya:

 body { background-repeat: no-repeat; background-position: 50% 20px, 50% 240px, 50% 460px, 50% 680px; background-size: 200px 200px, 300px 200px, 200px 200px, 100px 100px; }

Jadi logo di header saya cocok dengan ukuran latar belakang SVG di belakangnya, saya membatasi lebar maksimumnya, lalu memusatkannya menggunakan margin horizontal:

 header { max-width: 200px; margin: 0 auto; }

Sekali lagi, panel gulir horizontal adalah cara yang berguna untuk menampilkan tiga gambar Traveler saya yang diuraikan, jadi saya mengatur nilai tampilan gambar mereka untuk melenturkan dan mencegah luapan horizontal dengan menyetel nilainya untuk menggulir:

 figure { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; max-width: 100vw; overflow-x: scroll; }

Kemudian, saya menentukan nilai flex-basis dan tinggi untuk dicocokkan:

 figure img { flex-grow: 1; flex-basis: 320px; height: 320px; }

Saya menerapkan empat SVG warna-warni saya sebagai gambar latar, jadi saya tidak ingin mereka muncul di layar kecil. Menggunakan pemilih atribut untuk secara tepat mencocokkan properti dan nilai gaya adalah cara ideal untuk menargetkan elemen tanpa menggunakan atribut kelas tambahan:

 [aria-hidden="true"] { display: none; }

Desain ini hanya memerlukan satu titik henti sementara kueri media untuk menerapkan gaya tata letak untuk layar sedang dan besar. Saya menerapkan delapan kolom dengan lebar yang sama dan delapan baris, lalu menghapus gambar latar belakang yang saya terapkan untuk layar kecil:

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

Kemudian, saya menempatkan header dan elemen utama di antara nomor baris di kisi saya:

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

Saya perlu menempatkan gambar dan pembagian gambar ke kisi saya, bukan gambar itu sendiri, jadi saya mengubah properti tampilannya menjadi konten, yang secara efektif menghapusnya dari DOM untuk tujuan penataan:

 figure { display: contents; }

Kemudian, saya menempatkan setiap gambar Traveler ke dalam kumpulan kolom dan baris kisi yang berbeda, yang mengubah ukurannya beserta posisinya:

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

Transformasi CSS adalah alat yang ideal untuk menyesuaikan ukuran dan posisi elemen dalam batasan grid. Mereka juga berguna untuk menambahkan sentuhan yang tidak biasa pada desain. Saya menggunakan rotate, scale, dan translate untuk menyempurnakan gambar-gambar ini:

 figure img:nth-of-type(1) { transform: rotate(-20deg) translateX(-12rem); } figure img:nth-of-type(2) { transform: scale(1.1); } figure img:nth-of-type(3) { transform: scale(1.25); }

Sekarang saya mengungkapkan persegi panjang presentasional yang berwarna-warni dan mendorongnya ke belakang konten saya dengan menetapkan nilai indeks-z yang rendah. Di mana gambar-gambar ini tumpang tindih, mode campuran-campuran menambahkan lebih banyak warna pada desain ini:

 [aria-hidden="true"] { display: block; z-index: 0; mix-blend-mode: multiply; }

Pada langkah terakhir ini, saya menempatkan bentuk-bentuk ini ke grid saya, menggunakan rotasi untuk menambahkan lebih banyak kepribadian ke desain yang sudah berwarna-warni ini:

 .bg-1 { grid-column: 2 / 4; grid-row: 2 / 4; transform: rotate(-30deg); transform-origin: 75% 50%; } .bg-2 { grid-column: 4 / 8; grid-row: 2 / 5; } .bg-3 { grid-column: 3 / 5; grid-row: 4 / 6; } .bg-4 { grid-column: 4 / 5; grid-row: 6 / 7; transform: rotate(5deg); transform-origin: 0 0; } 

Baca Lebih Lanjut Dari Seri

• Keputusan Desain yang Terinspirasi: Majalah Avaunt
• Keputusan Desain yang Terinspirasi: Masalah Menekan
• Keputusan Desain yang Terinspirasi: Ernest Journal
• Keputusan Desain yang Terinspirasi: Alexey Brodovitch
• Keputusan Desain Terinspirasi: Bea Feitler
• Keputusan Desain Terinspirasi: Neville Brody
• Keputusan Desain yang Terinspirasi: Otto Storch
• Keputusan Desain yang Terinspirasi: Herb Lubalin
• Keputusan Desain Terinspirasi: Max Huber
• Keputusan Desain Terinspirasi: Emmett McBain
• Keputusan Desain yang Terinspirasi: Bradbury Thompson

NB: Anggota Smashing Anggota Smashing memiliki akses ke PDF yang dirancang dengan indah dari majalah Keputusan Desain Terinspirasi Andy dan contoh kode lengkap dari artikel ini. Anda dapat membeli PDF dan contoh edisi ini serta setiap edisi lainnya langsung dari situs web Andy.