Keputusan Desain Terinspirasi Dengan Otto Storch: Ketika Ide, Salinan, Seni, dan Tipografi Menjadi Tak Terpisahkan

Selama beberapa tahun terakhir, buku tentang HTML dan CSS hampir menghilang dari rak buku studio saya. Saya menggantinya dengan buku-buku tentang art direction, editorial, dan desain grafis.

Baru-baru ini, saya sedang menelusuri tambahan baru ke perpustakaan saya dan terpikat oleh satu penyebaran majalah. Saya menyukai cara perancangnya menggabungkan gambar dan tipografi untuk menciptakan desain yang penuh energi dan gerakan. Untuk mengingatkan diri saya untuk melihat lagi desain ini, saya memotretnya dengan iPhone saya.

Ketika saya pertama kali melihat desain yang mencolok itu, saya belum pernah mendengar tentang desainer yang menciptakannya, Otto Storch kelahiran Brooklyn. Meskipun ia adalah seorang desainer grafis pemenang penghargaan, tidak seperti banyak orang sezamannya, Storch dan karyanya sebagian besar telah diabaikan.

Storch mengumpulkan banyak karya, dan sungguh memalukan bahwa karyanya tidak lebih dikenal secara luas, terutama secara online. Tidak ada halaman Wikipedia yang dikhususkan untuk Storch, dan tidak ada yang menerbitkan buku tentang dia atau karyanya.

Saya tidak hanya dipengaruhi oleh karya Otto Storch, tetapi juga oleh fakta bahwa dia adalah seorang desainer yang produktif dengan etos kerja yang kuat. Saya terinspirasi oleh bagaimana dia mengambil apa yang dia pelajari dari Alexey Brodovitch, menggabungkannya dengan pendekatannya terhadap desain, dan membuat karya yang khas dan menarik. Saya harap saya juga bisa melakukannya.

Saya belum pernah mendengar nama Otto Storch disebutkan selama konferensi desain atau melihatnya dirujuk dalam buku tentang desain web. Tetapi menemukannya telah membuat saya ingin membuat lebih banyak orang sadar akan pria itu dan pekerjaannya.

Dia juga membuat saya mempertimbangkan peran kreativitas dalam industri yang berfokus pada bisnis, bergerak cepat, dan memiliki kendala praktis serta teknis. Penerbitan bisa menjadi bisnis yang sangat menarik, dan majalah yang dikerjakan Storch bukanlah mode kelas atas. Apa yang dia buat bukanlah seni, tapi bukan berarti tidak kreatif. Storch memahami bahwa ide sama pentingnya dengan komunikasi yang efektif seperti gambar dan kata-kata tertulis. Sepanjang karirnya, Storch bekerja keras untuk memasukkan ide-ide meskipun keterbatasan medianya. Itu adalah pendekatan yang sama pentingnya di web saat ini seperti di majalah di tahun 1960-an.

Terinspirasi oleh Otto Storch

Otto Storch lahir pada tahun 1913, dan selama tahun 1930-an, ia memulai karirnya dalam seni retouching fotografi pra-digital yang terlupakan. Selama tahun 1950-an, Storch mengambil kelas malam dan belajar desain di bawah bimbingan Alexey Brodovitch yang mendorongnya untuk bekerja di majalah.

Sukses tidak terjadi dalam semalam, dan butuh tujuh tahun menjadi pekerja lepas sebelum majalah Storch Better Living di New York mempekerjakannya sebagai asisten direktur seni. McCall menerbitkan beberapa judul termasuk Popular Mechanics, Blue Book and Red Book, dan McCall's Magazine itu sendiri. Storch pindah ke McCall's Magazine di mana dia membangun apa yang dia pelajari dari Brodovitch dan pengalamannya mendesain materi iklan, sampul album, sampul buku, dan majalah.

Storch tidak takut untuk membuat pilihan berpendirian dan ketegasan inilah yang membuat sebagian besar karyanya berbeda.

“Arahan seni yang baik tidak datang dari orang yang tidak pasti. Saya mampu merasakan perasaan yang intens dan bersedia kehilangan kontes popularitas dengan editor departemen bila diperlukan. Tanggung jawab visual majalah adalah milik saya.”

— Otto Storch

Seperti Bea Feitler, Storch meneruskan warisan tata letak majalah imajinatif Alexey Brodovitch. Dia mengerti bahwa penyebaran halaman ganda adalah kanvas kreatif dan menjadikannya fitur karyanya, terkadang dengan membiarkan elemen mengalir di antara halaman. Di lain waktu, Storch menjadikan talang sebagai bagian integral dari desainnya.

Storch sering menggunakan headline besar dan gambar untuk menyatukan spread-nya. Untuk 'On the cob or off,' ini tongkol jagung yang meneteskan mentega di kedua halamannya. Untuk fitur lain, 'Rencana pengurangan empat puluh kedipan,' dia membiarkan subjeknya meregang, beristirahat di atas tempat tidur teks yang sedang berjalan. Salinan ini tenggelam di bawah beban model tidur.

Grafik hitam-putih besar di 'Mengapa pernikahan usia remaja berantakan' tidak terbatas hanya pada satu halaman. Sebaliknya, itu menempati tiga dari empat kolom pada spread dan mendominasi desain. Gravitasi headline di tengah-tengah lingkaran konsentris itu menarik mata ke arahnya.

Dalam 'Gadis-Gadis Konyol, Bukankah Anak Laki-Laki Mengerikan', Storch menempatkan dua anak dari dahi ke dahi dengan selokan di antara mereka. Dia menekankan ketegangan ini dengan menyelaraskan teksnya ke arah yang berlawanan.

Storch membuat penggabungan gambar dan teks terlihat jelas dan mudah, tetapi hasil yang dia capai berasal dari pengalaman dan latihan bertahun-tahun.

Untuk 'Jadikan mode segar seperti cat,' teks Storch yang dikemas rapat sangat cocok dengan kompartemen di kotak cat seorang seniman. Model dalam spread untuk McCall's Patterns ini juga muat di dalam kotak. Penggunaan skala yang menyenangkan dan tak terduga dari Storch menambah dimensi lain pada desain ini.

Storch percaya bahwa dalam desain editorial, ide yang kuat, salinan, gambar, dan tipografi adalah satu kesatuan. Saya pikir hal yang sama berlaku dalam desain web, meskipun ada perbedaan nyata untuk dicetak.

Storch memahami tipografi dapat melakukan lebih dari sekadar menyajikan konten yang dapat dibaca dan dia memiliki kemampuan untuk mengubah tipe menjadi objek grafis. Dalam desain cetak untuk bahasa kiri-ke-kanan, halaman kiri disebut "verso", dan kanan disebut "recto." Untuk kutipan McCall dari sebuah buku berjudul 'The First to Know,' Storch mencerminkan halaman recto dan verso, kemudian mengatur teksnya ke dalam lingkaran yang mencerminkan dial telepon melingkar.

Ada banyak Otto Storch, dan desainnya dapat mengajari kita tentang pekerjaan yang kita lakukan di web hari ini. Seperti Alexey Brodovitch, Storch menguasai kanvasnya dan bukannya dibatasi olehnya; dia menggunakan halamannya untuk menyajikan konten dengan cara yang membuatnya tidak hanya dapat dimengerti, tetapi juga lebih menarik. Daya tarik ini penting, karena menghubungkan orang dengan merek, produk, atau cerita, dan itu penting untuk bisnis apa pun, apa pun medianya.

Otto Storch mungkin merupakan tambahan baru dalam daftar desainer inspiratif saya, tetapi desainnya telah memengaruhi desain saya.

Berlatih

CSS Shapes Module Level 1 W3C telah menjadi rekomendasi Kandidat Rekomendasi sejak 2014, dan semua browser desktop dan seluler kontemporer telah menerapkan properti shape-outside, shape-margin, dan shape-image-threshold.

 [src="shape.png"] { float: left; shape-outside: url(shape.png); shape-margin: 20px; }

Desainer web tidak menyadari potensi kreatif yang ditawarkan oleh CSS Shapes, dan tidak ada lagi alasan untuk tidak menggunakannya. Mungkin juga pengembang web masih menganggap Shapes memiliki dukungan yang buruk di browser. Namun, dengan semua browser kontemporer sekarang mendukung Shapes — dan propertinya menurun dengan anggun di browser lawas — saat ini tidak ada alasan untuk menghindari penggunaannya.

Lakukan Lebih Banyak Dengan Bentuk

Desain oleh Otto Storch ini adalah salah satu yang pertama menarik perhatian saya. Saya mengagumi kesederhanaan struktural dari dua kolom salinan yang dibenarkan, dan bagaimana penempatan gambarnya — dengan teks yang dililitkan di sekelilingnya untuk menciptakan bentuk organik — dengan penuh semangat mengisi halaman dengan energi dan gerakan.

Saya jarang melihat tata letak dengan energi semacam ini secara online, jadi desain saya mencakup empat Kumbang berwarna cerah, masing-masing Volkswagen ditempatkan pada sudut yang kontras dengan dua kolom teks yang tinggi. Saya hanya membutuhkan dua elemen struktural untuk menerapkan desain yang terinspirasi dari Storch ini; elemen utama dan tambahan. Masing-masing elemen ini berisi paragraf teks berjalan, ditambah dua elemen gambar yang memungkinkan saya untuk menukar gambar kecil dengan yang lebih besar:

 <main> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </aside>

Elemen gambar ini pas dengan tepi layar kecil, tetapi saya masih membutuhkan spasi putih di kedua sisi paragraf salinan yang sedang berjalan. Dengan menggunakan unit lebar viewport, ruang itu selalu tetap proporsional dengan layar tersebut:

 p { margin-right: 10vw; margin-left: 10vw; }

Elemen gambar adalah salah satu tambahan yang paling berguna untuk HTML. Dengan menggabungkan kueri media dengan beberapa gambar, browser dapat memilih gambar yang paling sesuai untuk tata letak.

Saya paling sering menggunakan properti media dan nilai lebar minimum, dan meskipun desain ini hanya membutuhkan dua gambar per elemen gambar, ini memungkinkan untuk menambahkan lebih banyak gambar dan bahkan menggabungkan nilai media untuk membuat kueri yang kompleks:

 <picture> <source media="(min-width: 48em)"> <img src="small.png" alt="Volkswagen Beetle"> <</picture>

Gambar dalam gambar ini berisi versi yang dipotong dari Beetles saya yang paling cocok untuk layar kecil. Saya menerapkan lebar yang sama ke semua gambar saya, lalu menambahkan margin bentuk sebagai persiapan untuk CSS Shapes yang akan datang berikutnya:

 picture { width: 160px; shape-margin: 20px; }

Saya menemukan bentuk dari gambar lebih mudah dan lebih cepat untuk diterapkan daripada menggunakan koordinat poligon. Untuk mengembangkan bentuk dari sebuah gambar, dibutuhkan alpha channel yang seluruhnya atau sebagian transparan. Ketika gambar sebagian transparan, properti shape-image-threshold dapat mengontrol area yang membentuk bentuk.

Saya dapat menggunakan gambar yang sama untuk lebih dari satu bentuk. Meskipun desain saya mencakup empat mobil dengan warna berbeda, saya hanya membutuhkan dua gambar bentuk:

 main picture:first-of-type, aside picture:first-of-type { float: left; shape-outside: url(shape-1-sm.png); } main picture:last-of-type, aside picture:last-of-type { float: right; shape-outside: url(shape-2-sm.png); }

Dengan selesainya desain layar kecil saya, saya memperkenalkan gambar yang lebih besar untuk layar ukuran sedang serta gambar bentuk agar sesuai. Saya menerapkan lebar baru untuk gambar agar sesuai dengan layar yang lebih besar:

 @media (min-width: 48em) { main picture:first-of-type { width: 290px; shape-outside: url(shape-1-lg.png); } main picture:last-of-type { width: 230px; shape-outside: url(shape-2-lg.png); } aside picture:first-of-type { width: 230px; shape-outside: url(shape-3-lg.png); } aside picture:last-of-type { width: 290px; shape-outside: url(shape-4-lg.png); } }

Meskipun desain saya untuk layar yang lebih besar mungkin terlihat rumit pada pandangan pertama, tata letaknya tidak bisa lebih sederhana, dan elemen utama dan samping tersebut membentuk dua kolom simetris:

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

Spasi memainkan peran besar dalam desain layar besar ini. Dengan diperkenalkannya kolom-kolom tersebut, margin horizontal 10vw yang saya terapkan pada paragraf saya sebelumnya berarti bahwa spasi putih terdiri dari 40% dari tata letak ini.

Sama seperti Otto Storch menggunakan halamannya untuk menyajikan konten dengan cara yang membuatnya menarik dan mudah dipahami, desain ini tidak hanya menceritakan kisah Volkswagen Beetle, tata letaknya mengisyaratkan betapa menyenangkannya mobil kecil ikonik ini untuk dikendarai.

Jadikan teks terlihat lezat

Seperti Brodovitch, Otto Storch unggul dalam menggabungkan gambar dengan teks, dan dia sering mengukir salinan menjadi bentuk yang mencerminkannya. Dalam desain ini, Storch membuat blok teks lezat yang berbentuk seperti gelas. Kami jarang menemukan teknik seperti ini digunakan secara online, tetapi teknik ini dapat membantu menarik pembaca ke dalam cerita apa pun medianya. Terinspirasi oleh Storch, untuk desain saya berikutnya, saya memahat salinan saya untuk mencerminkan bentuk Volkswagen Beetle.

Desain saya mencakup tiga tata letak alternatif. Satu kolom konten bergulir untuk layar kecil, kotak 2x2 untuk layar sedang, dan desain layar besar dengan area konten yang bergulir secara horizontal.

Ada empat elemen struktural yang diperlukan untuk menerapkan ketiga desain ini, satu elemen utama untuk konten saya, ditambah gambar besar dari tiga Kumbang berwarna cerah. Saya melampirkan elemen-elemen ini dengan sebuah bagian, lalu menambahkan divisi presentasi dekoratif yang mewakili jalan aspal:

 <section> <img src="shape-1.png" alt=""> <main> <h1>Get bitten by the bug</h1> </main> <img src="img-1.png" alt="Volkswagen Beetle"> <img src="img-2.png" alt="Volkswagen Beetle"> </section> <div> </div>

Saya tidak perlu panel pengguliran horizontal saya untuk muncul di layar kecil, jadi tambahkan hanya gaya dan bentuk dasar yang memahat teks saya menjadi bentuk Beetle. Saya mulai dengan menyelaraskan teks paragraf ke tengah, dan mengaturnya dalam huruf besar. Meskipun saya biasanya tidak mengatur teks seluruh blok teks dengan cara ini, bentuk huruf besar yang solid membantu untuk menekankan bentuk Beetle:

 p { text-align: center; text-transform: uppercase; }

Draf awal spesifikasi CSS Shapes menyertakan properti shape-inside yang memungkinkan kita untuk membungkus teks di bagian dalam bentuk seperti yang dilakukan Storch. Saya kecewa karena W3C menunda fitur ini hingga CSS Shapes Module Level 2 yang masih menjadi Editor's Draft. Anda dapat mencapai efek serupa menggunakan bentuk-luar, tetapi saya, misalnya, tidak sabar sampai kita dapat menggunakan tipe sekreatif Otto Storch online.

Saya menambahkan dua gambar bentuk ke paragraf saya. Teks akan mengalir di antara gambar-gambar ini untuk mencerminkan wajah Beetle:

 <p> <img src="shape-2.png" alt=""> <img src="shape-3.png" alt=""> … </p>

Saya menentukan dimensi untuk kedua gambar ini dan menyetel opacity ke nol karena saya tidak ingin mereka dilihat oleh pemirsa:

 p img { width: 100px; height: 125px; opacity: 0; }

Gambar-gambar ini murni presentasi dan tidak menyampaikan konten atau makna, jadi untuk menghapus semantik apa pun darinya, saya menambahkan atribut peran. Untuk mengeluarkannya dari pohon aksesibilitas, saya juga menambahkan atribut aria-hidden ke dua gambar ini:

 <img src="shape-2.png" alt="" role="presentation" aria-hidden="true">

Untuk mengukir teks saya ke dalam bentuk Volkswagen yang ikonik, saya menerapkan bentuk-luar menggunakan dua gambar yang sama, mengambangkan gambar pertama ke kiri dan yang kedua ke kanan:

 p img:nth-of-type(1) { float: left; shape-outside: url(shape-l.png); } p img:nth-of-type(2) { float: right; shape-outside: url(shape-r.png); }

Saya juga tidak ingin divisi presentasi saya terlihat oleh teknologi bantu, jadi saya menambahkan atribut peran dan aria-hidden yang sama ke ini juga:

 <div role="presentation" aria-hidden="true"> </div>

Karena saya tidak ingin pembagian terlihat oleh orang-orang yang menggunakan layar kecil, saya menyetel properti tampilannya menjadi tidak ada:

 div { display: none; }

Desain layar kecil saya bergaya, seperti Beetle, tetapi ruang ekstra yang tersedia pada layar berukuran sedang memungkinkan saya untuk menempatkan teks pahatan saya di samping gambar yang ditirunya.

Sebelum menerapkan desain apa pun, saya membuat storyboard untuk memutuskan bagaimana mengatur ulang elemen saat ukuran layar berubah. Untuk layar berukuran sedang, saya mengatur empat elemen saya dalam kotak kolom simetris 2x2. Dengan menggunakan nilai minmax untuk ukuran kolom ini, saya memastikan mereka mengisi semua ruang yang tersedia, tetapi lebarnya tidak pernah menyusut di bawah 400px:

 @media (min-width: 48em) { section { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr); grid-gap: 2vw; align-items: end; } }

Untuk layar yang lebih besar, saya juga membutuhkan dua baris. Mereka harus sama tingginya dan menempati semua ruang vertikal yang tersedia:

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

Area konten yang besar dan bergulir secara horizontal mendominasi desain ini dan lebih lebar dari area pandang. Panel mencakup empat kolom — tiga untuk gambar dan satu untuk salinan pahatan saya — dan masing-masing memiliki lebar minimal 400px. Dengan menyetel lebar maksimum ke area pandang dan mengizinkan pengguliran hanya pada sumbu horizontal, konten apa pun yang berada di luar area pandang akan disembunyikan tetapi masih dapat diakses:

 section { grid-template-columns: repeat(4, minmax(400px, 1fr)); max-width: 100vw; overflow-x: scroll; }

Di bawah konten saya adalah divisi presentasi yang mewakili jalan di bawah roda bentuk Beetle saya. Elemen ini tidak terlihat pada ukuran layar yang lebih kecil, jadi untuk membuatnya terlihat, saya mengubah properti tampilan dari tidak ada menjadi memblokir, lalu menambahkan warna latar belakang abu-abu muda. Properti grid yang saya atur sebelumnya pada elemen body mendefinisikan ketinggian divisi ini:

 div { display: block; background-color: #a73448; } }

Dave Hyatt dari Webkit awalnya mengusulkan Refleksi CSS sejak 2008, tetapi sejauh ini belum diterapkan di mesin rendering browser lainnya. Refleksi CSS saat ini hanya didukung oleh Google Chrome.

Seperti yang Anda bayangkan, refleksi membuat salinan elemen. Sebuah refleksi dapat muncul baik di atas, di bawah atau ke kiri atau kanan. Sama seperti di dunia fisik, ketika suatu elemen berubah dalam beberapa cara, pantulannya mengikuti.

Ada tiga properti eksperimental yang tersedia untuk Refleksi CSS. Arahnya dan offset opsional yang mengontrol jarak antara elemen dan pantulannya. Anda juga dapat menerapkan topeng ke refleksi apa pun untuk mengubah penampilannya, misalnya, dengan menggunakan topeng gradien untuk memudarkan intensitas pantulan secara bertahap.

Refleksi CSS memiliki dukungan terbatas di browser, tetapi mereka masih dapat menambahkan dimensi ekstra ke desain untuk browser yang telah menerapkannya. Saya ingin menambahkan refleksi hanya ketika browser mendukungnya dan ketika layar cukup besar untuk menggunakannya dengan efek penuh.

Untuk mencapai hasil yang saya cari, saya menggunakan media bersarang dan kueri fitur yang pertama-tama menguji lebar minimum area pandang, lalu apakah browser mendukung -webkit-box-reflect:below . Saya menambahkan refleksi dan mengubah warna divisi presentasi saya dari merah menjadi abu-abu:

 @media (min-width: 64em) { @supports (-webkit-box-reflect:below) { section { -webkit-box-reflect: below 0 linear-gradient(transparent, white); } div { background-color: #f0f0f1; } } }

Simetri cermin

Penyebaran hitam dan merah yang mencolok dari Pola McCall ini adalah salah satu desain paling khas Storch. Ada simetri yang meyakinkan pada tata letaknya dan bagaimana Storch menggunakan warna yang sama pada dua halamannya. Saya langsung tertarik pada desainnya dan ingin mencapai efek serupa.

HTML yang saya perlukan untuk mengimplementasikan desain ini sangat sederhana. Hanya dua elemen struktural, satu utama dan samping, yang keduanya mengandung elemen gambar:

 <main> <picture>…</picture> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> </aside>

Unsur-unsur utama dan sampingan ini juga masing-masing mengandung paragraf teks. Untuk mencapai rotasi yang diperlukan untuk desain ini, saya membungkus setiap baris teks di dalam elemen span. Saya berharap ada alternatif yang lebih baik dan lebih semantik untuk elemen presentasi ini, tetapi tanpa gaya tambahan, mereka tidak mengganggu keterbacaan paragraf saya:

 <p> <span>Although </span> <span>designed in the </span> <span>1930s, due to </span> <span>World War II, </span> <span>civilian Beetles </span> <span>only began to </span> <span>be produced in </span> <span>significant </span> <span>numbers by the </span> <span>end of the 1940s.</span> </p>

Saya mulai dengan menerapkan warna latar belakang abu-abu gelap ke elemen tubuh:

 body { background-color: #262626; }

Kemudian, ketinggian minimum memastikan bahwa elemen utama dan samping saya selalu memenuhi ketinggian viewport. Untuk memusatkan kontennya secara horizontal dan vertikal, saya menerapkan properti flexbox dan mengatur arahnya ke kolom:

 main, aside { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 0; box-sizing: border-box; color: #fff; }

Saya ingin warna Beetle utama saya dicocokkan dengan panel berikutnya, jadi saya mengatur warna latar belakangnya menjadi merah yang sama:

 aside { background-color: #a73448; }

Sementara bagian panjang dari teks huruf besar umumnya lebih sulit dibaca daripada yang diatur dalam huruf besar campuran, huruf besar cocok untuk potongan yang lebih pendek dan dapat menciptakan tampilan yang bergaya:

 p { margin: 0 2rem; text-align: center; text-transform: uppercase; }

Dalam desain layar kecil saya, elemen utama dan samping ditumpuk secara vertikal dan tingginya sesuai dengan viewport. Untuk layar berukuran sedang, saya mengatur ulang ketinggian minimum elemen tersebut untuk mengisi setengah area pandang:

 @media (min-width: 48em) { main, aside { min-height: 50vh; padding: 2rem; }

Ruang ekstra yang tersedia di layar berukuran sedang memungkinkan saya untuk menata paragraf saya dengan mengubah mode penulisan, sehingga teksnya ditampilkan secara vertikal dan dibaca dari kanan ke kiri:

 p { max-height: 12em; margin: 0; text-align: left; writing-mode: vertical-rl; }

Mengubah properti tampilan pada elemen rentang ini untuk memblokir membagi paragraf saya menjadi beberapa baris. Kemudian, tinggi garis menambahkan ruang di antara garis, yang memungkinkan ruang untuk rotasi saya:

 p span { display: block; line-height: 2; }

Transformasi, termasuk rotate, scale, dan translate telah menjadi bagian dari CSS selama hampir dua dekade. Menggunakan transformasi melibatkan penambahan fungsi transformasi seperti memutar, lalu nilai dalam kurung.

Untuk mencapai efek yang saya cari; Saya memutar enam baris pertama teks saya berlawanan arah jarum jam sebanyak lima belas derajat. Enam baris terakhir diputar dengan jumlah yang sama tetapi searah jarum jam. Semua baris yang tersisa tetap tidak berubah:

 p span:nth-child(-n+6) { transform: rotate(-15deg); } p span:nth-child(n+12) { transform: rotate(15deg); }

Di masa mendatang, Anda akan dapat menggunakan fungsi seperti rotate secara independen dari properti transform, tetapi saat saya menulis ini, hanya Firefox yang mengimplementasikan transformasi individual.

Untuk memberi ruang bagi teks saya yang diputar, saya menambahkan margin ke dua baris saya:

 p span:nth-child(6) { margin-left: 1em; } p span:nth-child(12) { margin-right: 1em; } }

Desain ini menjadi lebih mencolok dengan ruang yang tersedia di layar besar. Bagi mereka, saya menerapkan nilai kisi ke elemen tubuh untuk membuat dua kolom simetris dengan tinggi yang sama:

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

Saya menerapkan kisi tiga kolom simetris ke elemen utama dan samping yang keduanya meluas ke ketinggian viewport penuh:

 main, aside { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; padding: 2rem; min-height: 100vh; }

Saya menyebarkan gambar utama di kolom kedua dan ketiga, dan gambar samping ke kolom pertama dan kedua:

 main picture { grid-column: 2 / -1; grid-row: 1; padding: 0 5vw; } aside picture { grid-column: 1 / 3; padding: 0 5vw; }

Saya menempatkan paragraf ke dalam kolom yang tersisa, dan dengan memberikan semua elemen nomor baris yang sama, mereka akan tetap berada di baris yang sama terlepas dari urutan sumber:

 main p { grid-column: 1; grid-row: 1; } aside p { grid-column: 3; }

Dalam versi desain saya ini, teks harus berjalan dari atas ke bawah, bukan dari kanan ke kiri, jadi saya mengatur ulang mode penulisan ke horizontal, atas-bawah, dan kemudian menyelaraskan teks ke kanan:

 main p, aside p { max-height: none; writing-mode: horizontal-tb; } main span { text-align: right; }

Akhirnya, saya mengganti nilai rotasi dan margin pada baris teks saya agar lebih sesuai dengan desain layar besar ini:

 main p span:nth-child(-n+6) { transform: rotate(10deg); } main p span:nth-child(n+12) { transform: rotate(-10deg); } main p span:nth-child(6) { margin: 0 0 15px; } main p span:nth-child(12) { margin: 15px 0 0; } aside p span:nth-child(-n+6) { transform: rotate(-10deg); } aside p span:nth-child(n+12) { transform: rotate(10deg); } aside p span:nth-child(6) { margin: 0 0 15px; } aside p span:nth-child(12) { margin: 15px 0 0; } }

Rentang kolom

Untuk banyak desainnya yang paling berkesan, Otto Storch memungkinkan gambar besar dan elemen tipografi tersebar di dua halaman. Teknik ini menciptakan spread yang mencolok, termasuk teknik ini di mana ia menempatkan tongkol jagung mentega di atas dua kolom teks yang dibenarkan.

Saya ingin efek yang sama mencoloknya untuk desain akhir saya yang berbasis Beetle, dan untuk mengimplementasikannya, saya hanya membutuhkan tiga elemen struktural; header — berisi logo SVG, judul, dan gambar Volkswagen kuning saya — lalu elemen utama dan samping:

 <header> <svg>…</svg> <h1>Get bitten by the bug</h1> <figure> <picture>…</picture> </figure> </header> <main>…</main> <aside>…</aside>

Aliran normal ditambah beberapa gaya fondasi adalah semua yang saya perlukan untuk mengimplementasikan versi layar kecil dari desain ini. Pertama, saya menambahkan latar belakang gelap dan menentukan teks putih:

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

Untuk menempatkan judul di tengah halaman, saya menerapkan margin, mengatur lebar maksimumnya menggunakan unit berbasis teks, lalu menyelaraskan kata-kata huruf besar ke tengah:

 h1 { margin: 0 auto 1.5rem; max-width: 8rem; text-align: center; text-transform: uppercase; }

Alih-alih mengubah ukuran gambar, sehingga pas dalam area pandang yang sempit, saya sering membiarkannya menyebar di luarnya dan menambahkan panel gulir horizontal. Teknik ini adalah salah satu perangkat desain layar kecil favorit saya.

Gambar ini berisi gambar yang lebih lebar dari viewport dan berisi profil lengkap mobil, termasuk rodanya. Dengan menambahkan overflow-x: scroll; ke gambar, saya membuat bagian gambar di luar viewport dapat diakses:

 figure { overflow-x: scroll; }

Meskipun layar ukuran sedang mewarisi banyak gaya dasar tersebut, ketika lebih banyak ruang tersedia, saya ingin menekankan sumbu vertikal dalam desain dengan membuat kolom teks sempit menggunakan margin berbasis viewport lebar. Saya juga mengatur ulang elemen gambar meluap untuk membuat semua kontennya terlihat:

 @media (min-width: 48em) { figure { overflow-x: visible; } p { margin-right: 25vw; margin-left: 25vw; } }

Versi terbesar dari desain saya adalah yang paling kompleks. Itu tidak hanya menempatkan gambar besar Beetle saya di atas dua kolom teks yang sedang berjalan, tetapi teks itu membungkus rodanya. Saya mulai dengan menerapkan properti kisi untuk layar yang lebih besar ke elemen tubuh untuk membuat kisi dua kolom simetris:

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

Header saya mencakup kedua kolom, dan kemudian nilai grid bersarang mengatur logo VW, judul dan gambar Beetle saya. Dalam kisi bersarang ini, dua kolom luar menempati semua ruang yang tersisa, sedangkan kolom tengah secara otomatis diubah ukurannya untuk mengakomodasi kontennya:

 header { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; grid-row-gap: 4vh; }

Saya menempatkan logo dan judul di kolom tengah ini:

 svg, h1 { grid-column: 2; }

Kemudian, tambahkan margin di antara paragraf:

 p { margin-right: 1rem; margin-left: 1rem; }

Elemen gambar untuk desain ini mencakup dua gambar. Yang pertama lengkap dengan roda untuk layar kecil dan menengah, dan yang kedua adalah mobil yang kehilangan roda untuk layar besar. Untuk mengunci roda kembali ke Beetle ini, saya menggunakan :before pseudo-elements utama dan samping. Kemudian, saya menambahkan margin bentuk untuk menambahkan ruang di antara mereka dan teks yang berjalan di dekatnya:

 main:before, aside:before { display: block; shape-margin: 10px; }

Menggunakan konten yang dihasilkan, saya menambahkan roda belakang sebelum elemen utama dan melayangkan roda itu ke kanan. Properti shape-outside kemudian membungkus teks di sekitar roda ini:

 main:before { content: url(shape-l.png); float: right; shape-outside: url(shape-l.png); }

Saya menerapkan nilai yang mirip dengan sebelum elemen samping, kali ini mengambangkan roda ke kiri:

 aside:before { content: url(shape-r.png); float: left; shape-outside: url(shape-r.png); } }

Teks berjalan sekarang membungkus roda Beetle, yang membuat desain saya lebih menarik tanpa mengorbankan keterbacaan atau responsivitas.

Kesimpulan

Otto Storch menciptakan banyak desain yang mudah diingat, tetapi saya sedih karena dia dan karyanya sebagian besar telah dilupakan. Tidak ada halaman Wikipedia yang dikhususkan untuk Storch, dan tidak ada yang menerbitkan buku tentang dia atau karyanya. Desain Storch memiliki banyak hal untuk ditawarkan kepada desainer yang bekerja di web, dan saya berharap lebih banyak orang akan menemukannya kembali.

Karyanya juga menunjukkan seberapa banyak lagi yang bisa kita capai secara online menggunakan Shapes. Meskipun sekarang didukung dengan baik, properti CSS ini telah diabaikan hampir sama seperti Storch sendiri. Bentuk menawarkan lebih dari sekadar pembungkusan teks sederhana, dan potensi penuhnya belum direalisasikan. Saya berharap itu akan berubah, dan segera.

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: Herb Lubalin
• Keputusan Desain Terinspirasi: Max Huber
• Keputusan Desain yang Terinspirasi: Giovanni Pintori
• 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.