Otto Storch ile İlham Veren Tasarım Kararları: Fikir, Kopya, Sanat ve Tipografi Ayrılmaz Olduğunda

Son birkaç yıldır, HTML ve CSS ile ilgili kitaplar stüdyo kitaplığımdan neredeyse yok oldu. Onları sanat yönetimi, editoryal ve grafik tasarım üzerine kitaplarla değiştirdim.

Geçenlerde, kitaplığıma yeni eklenen bir makaleye göz atıyordum ve bir dergi yayılımı beni büyüledi. Tasarımcısının, enerji ve hareketle dolu bir tasarım yaratmak için görüntüleri ve tipografiyi şakacı bir şekilde birleştirmesini sevdim. Kendime bu tasarıma bir kez daha bakmayı hatırlatmak için iPhone'umla bir resmini çektim.

Bu çarpıcı tasarımı ilk gördüğümde, onu yaratan tasarımcının adını duymamıştım, Brooklyn doğumlu Otto Storch. Ödüllü bir grafik tasarımcı olmasına rağmen, çağdaşlarının çoğunun aksine, Storch ve çalışmaları büyük ölçüde göz ardı edildi.

Storch çok geniş bir çalışma grubunu topladı ve çalışmalarının özellikle çevrimiçi ortamda daha yaygın olarak bilinmemesi inanılmaz bir utanç. Storch'a ayrılmış bir Wikipedia sayfası yok ve hiç kimse onun veya çalışmaları hakkında bir kitap yayınlamadı.

Sadece Otto Storch'un çalışmalarından değil, aynı zamanda güçlü bir iş ahlakına sahip üretken bir tasarımcı olmasından da etkileniyorum. Alexey Brodovitch'ten öğrendiklerini nasıl aldığından, bunu tasarım yaklaşımıyla nasıl birleştirdiğinden ve farklı ve ilgi çekici işler yaptığından ilham alıyorum. Umarım bunu ben de yapabilirim.

Bir tasarım konferansında Otto Storch'un adının geçtiğini hiç duymadım ya da web tasarımıyla ilgili bir kitapta ondan bahsedildiğini görmedim. Ama onu keşfetmek bende daha fazla insanı adamdan ve yaptığı işten haberdar etme isteği uyandırdı.

Ayrıca iş odaklı, hızlı hareket eden ve hem pratik hem de teknik kısıtlamaları olan bir endüstride yaratıcılığın rolünü düşünmemi sağladı. Yayıncılık acımasız bir iş olabilir ve Storch'un üzerinde çalıştığı dergiler modaya uygun değildi. Yaptığı şey sanat değildi, ama bu yaratıcı olmadığı anlamına gelmiyordu. Storch, fikirlerin etkili iletişim için resimler ve yazılı kelimeler kadar gerekli olduğunu anlamıştı. Kariyeri boyunca, Storch, ortamının sınırlamalarına rağmen fikirleri dahil etmek için çok çalıştı. Bu, 1960'larda dergilerde olduğu gibi bugün de web'de gerekli olan bir yaklaşım.

Otto Storch'tan İlham Alındı

Otto Storch 1913'te doğdu ve 1930'larda kariyerine unutulmuş dijital öncesi fotoğrafik rötuş sanatında başladı. 1950'lerde, Storch akşam dersleri aldı ve Alexey Brodovitch'in altında tasarım okudu ve bu onu bir dergide çalışmaya teşvik etti.

Başarı bir gecede olmadı ve New York'taki Storch Better Living dergisinin onu sanat yönetmen yardımcısı olarak işe alması yedi yıl sürdü. McCall, Popular Mechanics, Blue Book ve Red Book ve McCall's Magazine'in kendisi dahil olmak üzere çeşitli başlıklar yayınladı. Storch, Brodovitch'ten öğrendiklerini ve reklam malzemeleri, albüm kapakları, kitap kapakları ve dergiler tasarlama deneyimi üzerine kurduğu McCall's Magazine'e taşındı.

Storch, inatçı seçimler yapmaktan korkmuyordu ve çalışmalarının çoğunu farklı kılan bu iddialılığı.

“İyi sanat yönetmenliği belirsiz bir kişiden gelmez. Yoğun duygulara sahibim ve gerektiğinde bölüm editörleriyle olan popülerlik yarışmasını kaybetmeye hazırdım. Derginin görsel sorumluluğu bana aitti.”

— Otto Storch

Bea Feitler gibi, Storch da Alexey Brodovitch'in yaratıcı dergi düzenleri mirasını sürdürdü. Çift sayfa yayılımın yaratıcı bir tuval olduğunu anladı ve bazen öğelerin sayfalar arasında akmasına izin vererek bunu çalışmasının bir özelliği haline getirdi. Diğer zamanlarda Storch, oluğu tasarımının ayrılmaz bir parçası yaptı.

Storch, spreadlerini birleştirmek için genellikle büyük başlıklar ve görüntüler kullandı. 'Koçanın üzerinde veya kapalı' için, her iki sayfaya da tereyağı damlayan bir mısır koçanı. Başka bir özellik için, 'Kırk Göz kırpma azaltma planı', konusunun hareketli bir metin yatağına yaslanarak uzanmasına izin verdi. Bu kopya, uyuyan modelin ağırlığı altında batar.

'Genç yaştaki evlilikler neden dağılıyor' bölümündeki büyük siyah beyaz grafik yalnızca bir sayfayla sınırlı değil. Bunun yerine, yayılmadaki dört sütundan üçünü kaplar ve böylece tasarıma hakim olur. Bu eşmerkezli dairelerin ortasındaki bir manşetin ağırlığı, gözü ona doğru çeker.

'Girls Are Aptal, Aren't Boys Awful'da Storch, iki çocuğu aralarında oluk olacak şekilde alnına alnına yerleştirdi. Metnini zıt yönlerde hizalayarak bu gerilimi vurguladı.

Storch, görüntüleri ve metni birleştirmeyi açık ve zahmetsiz hale getirdi, ancak elde ettiği sonuçlar yılların deneyimi ve pratiğinden geldi.

'Modaları boya kadar taze yapın' için Storch'un sıkıca paketlenmiş metni, bir sanatçının boya kutusundaki bir bölmeye mükemmel bir şekilde sığar. McCall's Patterns için bu formadaki modeller de kutunun içine sığar. Storch'un eğlenceli ve beklenmedik ölçek kullanımı, bu tasarıma başka bir boyut katıyor.

Storch, editoryal tasarımda güçlü bir fikir, metin, görseller ve tipografinin ayrılmaz olduğuna inanıyordu. Baskıdaki belirgin farklılıklarına rağmen, aynı şeyin web tasarımı için de geçerli olduğunu düşünüyorum.

Storch, tipografinin okunabilir içerik sunmaktan çok daha fazlasını yapabileceğini anladı ve yazıları grafik nesnelere dönüştürmek için bir hüneri vardı. Soldan sağa diller için baskı tasarımında sol sayfaya "verso", sağ sayfaya "recto" adı verilir. McCall'ın 'İlk Bilen' adlı bir kitaptan alıntısı için Storch, recto ve verso sayfalarını yansıttı, ardından metnini dairesel telefon kadranını yansıtan bir daireye yerleştirdi.

Çok sayıda Otto Storch var ve tasarımları bize bugün web'de yaptığımız işler hakkında bilgi verebilir. Alexey Brodovitch gibi, Storch da tuvalinde ustalaştı ve onun tarafından sınırlandırılmak yerine; Sayfalarını, içeriği yalnızca anlaşılır değil, aynı zamanda daha çekici kılacak şekilde sunmak için kullandı. Bu çekicilik önemlidir, çünkü insanları bir markaya, bir ürüne veya bir hikayeye bağlar ve bu, hangi ortam olursa olsun her işletme için önemlidir.

Otto Storch, ilham verici tasarımcılar listeme yeni katılanlardan biri olabilir ama onun tasarımları şimdiden benimkini etkiliyor.

şekil vermek

W3C'nin CSS Şekiller Modülü Düzey 1, 2014'ten beri Aday Önerisi tavsiyesidir ve tüm çağdaş masaüstü ve mobil tarayıcılar, şekil-dış, şekil-marj ve şekil-görüntü-eşik özelliklerini uygulamıştır.

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

Web tasarımcıları, CSS Shapes'in sunduğu yaratıcı potansiyelin farkında değiller ve artık bunları kullanmamak için bir neden yok. Web geliştiricilerinin hala Shapes'in tarayıcılarda yetersiz desteği olduğunu düşünmeleri de olasıdır. Yine de, tüm çağdaş tarayıcılar artık Shapes'i desteklediğinden ve özellikleri eski tarayıcılarda zarif bir şekilde bozulduğundan, şu anda bunları kullanmaktan kaçınmak için hiçbir neden yok.

Şekillerle Daha Fazlasını Yapın

Otto Storch'un bu tasarımı dikkatimi ilk çekenlerden biriydi. İki yaslı kopya sütununun yapısal sadeliğine ve görsellerinin - organik şekiller oluşturmak için etraflarına sarılmış metinlerle - yerleştirilmesinin sayfayı nasıl enerji ve hareketle şakacı bir şekilde doldurduğuna hayran kaldım.

İnternette bu tür bir enerjiye sahip düzenleri nadiren görüyorum, bu yüzden tasarımım, her biri iki uzun metin sütunuyla kontrast oluşturacak şekilde bir açıyla yerleştirilmiş dört parlak renkli Beetle içeriyor. Storch'tan ilham alan bu tasarımı uygulamak için yalnızca iki yapısal öğeye ihtiyacım var; ana unsur ve bir yan. Bu öğelerin her biri, akan metinden oluşan paragraflar ve küçük resimleri daha büyük resimlerle değiştirmemi sağlayan iki resim öğesi içerir:

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

Bu resim öğeleri, küçük ekranların kenarlarına sığıyor, ancak yine de, çalışan kopya paragraflarımın her iki tarafında da boşluk olması gerekiyor. Görüntü alanı genişlik birimlerini kullanarak, bu alan her zaman bu ekranlarla orantılı kalır:

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

Resim öğesi, HTML'ye yapılan en kullanışlı eklemelerden biridir. Bir tarayıcı, medya sorgularını birden çok görüntüyle birleştirerek, bir düzen için en uygun görüntüyü seçebilir.

Ben en sık media özelliğini ve min-width değerini kullanıyorum ve bu tasarım resim öğesi başına yalnızca iki resim gerektirse de, daha fazla resim eklemek ve hatta karmaşık sorgular oluşturmak için medya değerlerini birleştirmek mümkündür:

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

Bu resimlerdeki resimler, Beetles'ımın küçük ekranlar için en uygun olan kırpılmış versiyonlarını içermektedir. Tüm resimlerime aynı genişliği uyguluyorum, ardından bir sonraki CSS Şekillerine hazırlık olarak bir şekil marjı ekliyorum:

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

Çokgen koordinatlarını kullanmaktan daha kolay ve daha hızlı uygulamak için görüntülerden şekiller buluyorum. Bir görüntüden bir şekil geliştirmek için tamamen veya kısmen şeffaf bir alfa kanalına ihtiyacı vardır. Görüntüler kısmen saydam olduğunda, şekil-görüntü-eşik özelliği şekli oluşturan alanları kontrol edebilir.

Aynı görüntüyü birden fazla şekil için kullanabilirim. Tasarımım dört farklı renkte araba içeriyor olsa da, sadece iki şekil görüntüsüne ihtiyacım var:

 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); }

Küçük ekran tasarımım tamamlandığında, orta boy ekranlar için daha büyük görüntülerin yanı sıra eşleşecek şekil görüntüleri sunuyorum. Görüntülerin daha büyük ekranlara sığması için yeni genişlikler uyguluyorum:

 @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); } }

Daha büyük ekranlar için tasarımım ilk bakışta karmaşık görünse de, düzen daha basit olamazdı ve bu ana ve yan öğeler iki simetrik sütun oluşturur:

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

Bu büyük ekran tasarımında boşluk büyük bir rol oynar. Sunulan bu sütunlarla, daha önce paragraflarıma uyguladığım 10vw yatay kenar boşlukları, boşlukların bu düzenin %40'ını oluşturduğu anlamına geliyor.

Otto Storch'un içeriği anlaşılır olduğu kadar çekici kılacak şekilde sunmak için sayfalarını kullanması gibi, bu tasarım sadece Volkswagen Beetle'ın hikayesini anlatmakla kalmıyor, düzeni de bu ikonik küçük arabayı sürmenin ne kadar eğlenceli olduğuna dair ipuçları veriyor.

Metnin lezzetli görünmesini sağlayın

Brodovitch gibi, Otto Storch da görüntüleri metinle birleştirmede mükemmeldi ve genellikle kopyaları onları yansıtan şekillere oydu. Bu tasarımda Storch, bardak şeklinde lezzetli bir metin bloğu oluşturdu. Çevrimiçi olarak kullanılan bu tür teknikleri nadiren buluruz, ancak hangi ortam olursa olsun okuyucuları bir hikayeye çekmeye yardımcı olabilirler. Bir sonraki tasarımım için Storch'tan ilham alarak kopyamı bir Volkswagen Beetle şeklini yansıtacak şekilde şekillendirdim.

Tasarımım üç alternatif düzen içeriyor. Küçük ekranlar için tek bir kayan içerik sütunu, orta ekranlar için 2x2 ızgara ve yatay olarak kayan içerik alanına sahip büyük ekran tasarımı.

Bu üç tasarımı uygulamak için gereken dört yapısal öğe var, içeriğim için bir ana öğe ve ayrıca parlak renkli üç Böceğin büyük resimleri. Bu öğeleri bir bölümle kapatıyorum, ardından asfalt yolu temsil eden dekoratif bir sunum bölümü ekliyorum:

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

Küçük ekranlarda görünmesi için yatay kaydırma panelime ihtiyacım yok, bu nedenle yalnızca metnimi bir Beetle şekline dönüştüren temel stiller ve şekiller ekleyin. Paragraf metnini ortaya hizalayarak ve büyük harfe ayarlayarak başlıyorum. Normalde bir metin bloğunun tamamını bu şekilde ayarlamazdım, ancak düz büyük harf formları Beetle şeklini vurgulamaya yardımcı olur:

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

CSS Shapes spesifikasyonunun ilk taslakları, Storch'un yaptığı gibi metinleri şekillerin içine sarmamızı sağlayan bir şekil-inside özelliği içeriyordu. W3C'nin bu özelliği, hala Editörün Taslağı olan CSS Şekiller Modülü Seviye 2'ye ertelemesi beni hayal kırıklığına uğrattı. Shape-outside'ı kullanarak benzer efektler elde edebilirsiniz, ancak ben, birincisi, türü çevrimiçi Otto Storch kadar yaratıcı bir şekilde kullanana kadar sabırsızlanıyorum.

Paragrafıma iki şekil resmi ekliyorum. Bir Böceğin yüzünü yansıtmak için bu görüntüler arasında metin akacaktır:

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

Bu iki görüntünün boyutlarını belirliyorum ve bir izleyici tarafından görülmesini istemediğim için opaklıklarını sıfıra ayarlıyorum:

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

Bu görüntüler tamamen sunum amaçlıdır ve hiçbir içerik veya anlam taşımamaktadır, bu nedenle onlardan herhangi bir anlambilimi kaldırmak için rol nitelikleri ekliyorum. Bunları erişilebilirlik ağacından çıkarmak için, bu iki görüntüye aria-hidden öznitelikleri de ekliyorum:

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

Metnimi ikonik Volkswagen şekline sokmak için, aynı iki resmi kullanarak, ilk resmi sola ve ikincisini sağa kaydırarak şekil-dış mekanı uyguluyorum:

 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); }

Sunum bölümümün de yardımcı teknolojiler tarafından görünmesini istemiyorum, bu yüzden aynı rolü ve aria-hidden niteliklerini buna da ekliyorum:

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

Küçük ekran kullanan kişiler tarafından bölümün görünmesine ihtiyacım olmadığı için, display özelliğini yok olarak ayarladım:

 div { display: none; }

Küçük ekran tasarımım, Beetle gibi şık, ancak orta boy ekranlarda bulunan ekstra alan, yontulmuş metnimi taklit ettiği resimlerin yanına yerleştirmeme izin veriyor.

Herhangi bir tasarımı uygulamadan önce, ekran boyutları değiştikçe öğelerin nasıl yeniden düzenleneceğine karar vermek için bir storyboard hazırlarım. Orta büyüklükteki ekranlar için dört elementimi 2x2 simetrik sütun ızgarasında düzenliyorum. Bu sütunları boyutlandırmak için minmax değerlerini kullanarak, mevcut tüm alanı doldurmalarını sağlarım, ancak genişlikleri asla 400 pikselin altına düşmez:

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

Daha büyük ekranlar için ayrıca iki satıra ihtiyacım var. Yükseklikleri eşit olmalı ve mevcut tüm dikey alanı kaplamalıdır:

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

Bu tasarıma büyük, yatay olarak kayan bir içerik alanı hakimdir ve görünüm alanından daha geniştir. Panel dört sütun içerir - üçü resimler için ve bir tanesi benim yontulmuş kopyam için - ve her biri en az 400 piksel genişliğindedir. Görünüm alanının maksimum genişliğini ayarlayarak ve yalnızca yatay eksende kaydırmaya izin vererek, görünümün dışındaki tüm içerik gizlenir ancak yine de erişilebilir olur:

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

İçeriğimin altında, Beetle şekillerimin tekerleklerinin altındaki yolu temsil eden bir sunum bölümü var. Bu öğe daha küçük ekran boyutlarında görünmez, bu yüzden görünür kılmak için display özelliğini yok'dan blok'a değiştiriyorum, sonra açık gri bir arka plan rengi ekliyorum. Daha önce body öğesinde belirlediğim grid özellikleri bu bölümün yüksekliğini tanımlar:

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

Webkit'ten Dave Hyatt, CSS Yansımalarını ilk olarak 2008 yılına kadar önerdi, ancak şimdiye kadar diğer tarayıcı oluşturma motorlarında uygulanmadı. CSS Yansımaları şu anda yalnızca Google Chrome tarafından desteklenmektedir.

Tahmin edebileceğiniz gibi, yansımalar bir öğenin kopyasını oluşturur. Bir yansıma yukarıda, aşağıda veya solda veya sağda görünebilir. Tıpkı fiziksel dünyada olduğu gibi, bir element bir şekilde değiştiğinde, yansıması onu takip eder.

CSS Yansımaları için kullanılabilen üç deneysel özellik vardır. Yönü ve bir öğe ile yansıması arasındaki mesafeyi kontrol eden isteğe bağlı bir kayma. Görünümünü değiştirmek için herhangi bir yansımaya bir maske de uygulayabilirsiniz; örneğin, bir yansımanın yoğunluğunu kademeli olarak azaltmak için bir degrade maskesi kullanarak.

CSS Yansımaları tarayıcılarda sınırlı desteğe sahiptir, ancak yine de onları uygulayan tarayıcılar için tasarıma ekstra bir boyut ekleyebilirler. Yansımaları yalnızca bir tarayıcı onları desteklediğinde ve ekran bunları tam olarak kullanmak için yeterince büyük olduğunda eklemek istiyorum.

Aradığım sonucu elde etmek için, önce bir görünümün minimum genişliğini, ardından bir tarayıcının -webkit-box-reflect:below destekleyip desteklemediğini test eden iç içe ortam ve özellik sorguları kullanıyorum. Yansımaları ekliyorum ve sunum bölümümün rengini kırmızıdan griye değiştiriyorum:

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

ayna simetrisi

McCall's Patterns'in bu çarpıcı siyah ve kırmızı yayılımı, Storch'un en belirgin tasarımlarından biridir. Düzeninde ve Storch'un iki sayfasında aynı renkleri nasıl kullandığında güven verici bir simetri var. Hemen tasarımına çekildim ve benzer bir etki elde etmek istedim.

Bu tasarımı uygulamak için ihtiyacım olan HTML bundan daha basit olamazdı. Her ikisi de resim öğelerini içeren, biri ana ve diğeri yan olmak üzere yalnızca iki yapısal öğe:

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

Bu ana ve yan öğelerin her biri ayrıca bir metin paragrafı içerir. Bu tasarım için gereken döndürmeleri elde etmek için metnin her satırını bir yayılma öğesinin içine sardım. Bu sunum öğelerine daha iyi, daha anlamsal bir alternatif olmasını isterdim, ancak ek stiller olmadan paragraflarımın okunabilirliğini bozmazlar:

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

Gövde öğesine koyu gri bir arka plan rengi uygulayarak başlıyorum:

 body { background-color: #262626; }

Ardından, minimum yükseklik, ana ve yan öğelerimin her zaman görüntü alanı yüksekliğini doldurmasını sağlar. İçeriklerini hem yatay hem de dikey olarak ortalamak için flexbox özelliklerini uyguluyorum ve yönlerini sütun olarak ayarladım:

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

Ana Beetle'ımın renginin sonraki panel tarafından eşleşmesini istiyorum, bu yüzden arka plan rengini aynı kırmızıya ayarladım:

 aside { background-color: #a73448; }

Büyük harfli uzun metinlerin okunması genellikle karışık harflerle ayarlananlardan daha zor olsa da, büyük harf daha kısa parçalar için uygundur ve şık bir görünüm yaratabilir:

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

Küçük ekran tasarımımda, ana ve yan öğeler dikey olarak yığılır ve yükseklikleri görünüm alanınınkiyle eşleşir. Orta boyutlu ekranlar için, bu öğelerin minimum yüksekliğini görünümün yarısını dolduracak şekilde sıfırlarım:

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

Orta büyüklükteki ekranlarda bulunan fazladan alan, yazma modunu değiştirerek paragraflarıma stil vermeme izin veriyor, böylece metinleri dikey olarak görüntüleniyor ve sağdan sola okunuyor:

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

Bu yayılma öğelerindeki display özelliğini bloke etmek için değiştirmek, paragrafımı birden çok satıra böler. Ardından, satır yüksekliği satırlar arasına boşluk ekler, bu da döndürmelerim için yer sağlar:

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

Döndürme, ölçekleme ve çevirme gibi dönüşümler, neredeyse yirmi yıldır CSS'nin bir parçası olmuştur. Dönüştürmenin kullanılması, döndürme gibi bir dönüştürme işlevi, ardından parantez içinde bir değer eklemeyi içerir.

Aradığım etkiyi elde etmek için; Metnimin ilk altı satırını saat yönünün tersine on beş derece döndürüyorum. Son altı satır aynı miktarda ancak saat yönünde döndürülür. Kalan tüm satırlar değişmeden kalır:

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

Gelecekte, transform özelliğinden bağımsız olarak döndürme gibi işlevleri kullanabileceksiniz, ancak ben bunu yazarken yalnızca Firefox bireysel dönüşümleri uyguladı.

Döndürülmüş metnime yer açmak için iki satırıma kenar boşlukları ekliyorum:

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

Bu tasarım, geniş ekranlarda mevcut olan alan ile daha çarpıcı hale geliyor. Onlar için, iki simetrik, eşit yükseklikte sütun oluşturmak için gövde öğesine ızgara değerleri uygularım:

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

Her ikisi de tam görünüm yüksekliğine uzanan hem ana hem de yan öğelere simetrik üç sütunlu bir ızgara uygularım:

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

Ana resmi ikinci ve üçüncü sütunlara, yan resmi ise birinci ve ikinci sütunlara yaydım:

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

Paragrafları kalan sütunlara yerleştiriyorum ve tüm öğelere aynı satır numarasını vererek kaynak sırasına bakılmaksızın aynı satırda kalacaklar:

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

Tasarımımın bu versiyonunda, metin sağdan sola değil yukarıdan aşağıya doğru çalışmalı, bu yüzden yazma modunu yatay, yukarıdan aşağıya sıfırladım ve ardından metni sağa hizaladım:

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

Son olarak, bu büyük ekran tasarımına daha iyi uyması için metin satırlarımdaki döndürme değerlerini ve kenar boşluklarını değiştiriyorum:

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

yayılma sütunları

Otto Storch, en unutulmaz tasarımlarının çoğu için büyük resimlerin ve tipografik öğelerin iki sayfaya yayılmasına izin verdi. Bu teknik, iki yaslı metin sütununun üstüne tereyağlı mısır koçanı yerleştirdiği bu da dahil olmak üzere çarpıcı yayılmalar yarattı.

Son Beetle tabanlı tasarımım için benzer şekilde çarpıcı bir etki istiyorum ve bunu uygulamak için yalnızca üç yapısal öğeye ihtiyacım var; bir başlık - bir SVG logosu, başlık ve sarı Volkswagen'imin bir resmini içeren - ardından ana ve yan öğeler:

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

Bu tasarımın küçük ekran versiyonunu uygulamak için tek ihtiyacım olan normal akış artı birkaç temel stili. İlk olarak, koyu bir arka plan eklerim ve beyaz metin belirtirim:

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

Başlığı sayfanın ortasına yerleştirmek için kenar boşlukları uygularım, metin tabanlı birimleri kullanarak maksimum genişliğini belirlerim, sonra büyük harflerini ortaya hizalarım:

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

Görüntüleri dar bir görünüm alanına sığacak şekilde yeniden boyutlandırmak yerine, genellikle ötesine yayılmalarına ve yatay olarak kayan bir panel eklemelerine izin veriyorum. Bu teknik, en sevdiğim küçük ekran tasarım cihazlarından biridir.

Bu şekil, görünüm alanından daha geniş olan ve tekerlekleri de dahil olmak üzere otomobilin tam profilini içeren bir resim içermektedir. overflow-x: scroll; şekle göre, resmin görünüm alanının dışındaki kısımlarını erişilebilir hale getiriyorum:

 figure { overflow-x: scroll; }

Orta boy ekranlar bu temel stillerin çoğunu miras alsa da, daha fazla alan olduğunda, geniş görünüm alanı tabanlı kenar boşluklarını kullanarak dar bir metin sütunu oluşturarak tasarımdaki dikey ekseni vurgulamak istiyorum. Ayrıca, tüm içeriğini görünür kılmak için şekil öğelerinin taşmasını da sıfırladım:

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

Tasarımımın en büyük versiyonu en karmaşık olanı. Beetle'ımın büyük bir resmini iki hareketli metin sütununun üstüne yerleştirmekle kalmaz, aynı zamanda bu metin tekerleklerini sarar. Simetrik iki sütunlu bir ızgara oluşturmak için daha büyük ekranlar için ızgara özelliklerini gövde öğesine uygulayarak başlıyorum:

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

Başlığım her iki sütunu da kapsıyor ve ardından iç içe ızgara değerleri VW logosunu, Beetle'ımın başlığını ve görüntüsünü düzenliyor. Bu iç içe ızgarada, iki dış sütun kalan tüm kullanılabilir alanı kaplarken, ortadaki sütun içeriğine uyum sağlamak için otomatik olarak yeniden boyutlandırılır:

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

Logoyu ve başlığı bu orta sütuna yerleştiriyorum:

 svg, h1 { grid-column: 2; }

Ardından, paragraflar arasına kenar boşlukları ekleyin:

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

Bu tasarımın resim öğesi iki resim içerir. İlki, küçük ve orta ekranlar için tekerleklerle tamamlandı ve ikincisi, büyük ekranlar için tekerlekleri olmayan bir araba. Tekerlekleri bu Beetle'a vidalamak için, hem ana hem de :before pseudo-elements öğeleri kullanıyorum. Ardından, aralarında boşluk eklemek için bir şekil marjı ekliyorum ve yakındaki çalışan metin:

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

Oluşturulan içeriği kullanarak arka tekerleği ana elemandan önce ekliyorum ve o tekerleği sağa kaydırıyorum. Shape-outside özelliği daha sonra metni bu tekerleğin etrafına sarar:

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

Kenar elemanından öncekine benzer değerler uyguluyorum, bu sefer tekerleği sola kaydırıyorum:

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

Çalışan metin artık Beetle'ın tekerleklerini sarıyor ve bu da tasarımımı okunabilirlik veya yanıt verebilirlikten ödün vermeden daha çekici kılıyor.

Çözüm

Otto Storch birçok unutulmaz tasarım yarattı, ancak onun ve çalışmalarının büyük ölçüde unutulmuş olmasına üzüldüm. Storch'a ayrılmış bir Wikipedia sayfası yok ve hiç kimse onun veya çalışmaları hakkında bir kitap yayınlamadı. Storch'un tasarımlarının web üzerinde çalışan tasarımcılara sunacağı çok şey var ve umarım daha fazla insan onu yeniden keşfeder.

Çalışmaları ayrıca Shapes'i kullanarak çevrimiçi olarak ne kadar çok şey başarabileceğimizi gösteriyor. Şu anda iyi desteklenmesine rağmen, bu CSS özelliği neredeyse Storch'un kendisi kadar göz ardı edildi. Şekiller, basit metin kaydırmadan çok daha fazlasını sunar ve tam potansiyelleri henüz gerçekleştirilmemiştir. Umarım bu değişir ve yakında.

Seriden Devamını Oku

• İlham Veren Tasarım Kararları: Avaunt Dergisi
• İlham Veren Tasarım Kararları: Önemli Konular
• İlham Veren Tasarım Kararları: Ernest Journal
• İlham Veren Tasarım Kararları: Alexey Brodovitch
• İlham Veren Tasarım Kararları: Bea Feitler
• İlham Veren Tasarım Kararları: Neville Brody
• İlham Veren Tasarım Kararları: Herb Lubalin
• İlham Veren Tasarım Kararları: Max Huber
• İlham Veren Tasarım Kararları: Giovanni Pintori
• İlham Veren Tasarım Kararları: Emmett McBain
• İlham Veren Tasarım Kararları: Bradbury Thompson

Not: Smashing üyeleriSmashing üyeleri, Andy'nin Inspired Design Decisions dergisinin güzel tasarlanmış bir PDF'sine ve bu makaledeki tam kod örneklerine erişebilir. Bu sayının PDF'sini ve örneklerini ve diğer tüm sayıları doğrudan Andy'nin web sitesinden satın alabilirsiniz.