Giovanni Pintori ile İlham Veren Tasarım Kararları: Tanıtım Bir Sanat Formu Oluyor

Ara sıra bir veya iki istisna dışında, son yirmi iki yılımı sayısız müşteri için tasarım yaparak geçirdim. Bu projelerden birkaçı bir yıl, bazıları birkaç ay sürdü, ancak çoğunluğu birkaç haftadan fazla sürmedi.

Bir ürün arayüzü veya web sitesi tasarımına birkaç hafta veya ay boyunca tamamen dalmak heyecan verici olabilir. Genellikle işi kazanmanın verdiği hazla başlar. Yeni bir müşterinin güvenini ve güvenini kazanmak bağımlılık yapabilir. Baştan çıkarıcı “sizi tanıma” aşamasında, müşteriyi ve sizden ve işinizden ne beklediklerini öğrenirsiniz. Benimki gibi bağımlılık yapan kişilikler bu duyguların yoğunluğunu çok ister, ancak - tıpkı bazı ilişkilerde olduğu gibi - ilk heyecan kısa sürede birlikte çalışmanın gerçeklerine dönüşür.

Bu yaratıcı karışıklık, genellikle kısa dikkat süreme ve huzursuz merakıma çok iyi uyuyor. Ancak, bir kurumda daha uzun süre kalabilmeyi, onları daha iyi tanımayı, yaptıkları ve yaptıkları üzerinde olumlu bir etki yaratabilmeyi dilediğim zamanlar oldu.

Şirket içinde çalışan birçok tasarımcı tanıyorum. İşe gidip gelmelerini veya işe yakın yaşamak için harcadıkları parayı asla kıskanmasam da, Giovanni Pintori'nin Olivetti'ye yardım ettiği şekilde bir şirketin uzun vadeli yaratıcı yönünü şekillendirme ve kalma yeteneklerini kıskanan bir parçam var.

“Günümüzde ve çağımızda, tanıtım bir sanat formu haline geldi ve giderek bu isme uygun şekilde yaşaması gerekiyor. Tanıtım, kısalık, açıklık ve ikna edicilik lehine belirsizlikten kaçınması gereken bir söylem biçimidir. Tanıtımla uğraşanlar (yazarlar, ressamlar, mimarlar) eşit ölçüde mantığa ve hayal gücüne ihtiyaç duyarlar.”

— Giovanni Pintori

İtalyan tasarımcı Giovanni Pintori, 31 yılı aşkın bir süredir iş ürünleri üreticisi Olivetti için çalıştı. Bu süre zarfında stili, şirketin benzersiz tasarım sözlüğüne dönüştü. Bir şirketle birkaç aydan daha uzun süre çalışmanın çekiciliği, yaşlandıkça daha da güçlendi. Geçtiğimiz 18 ay boyunca, zamanımın çoğunu Milano'dan çok uzak olmayan ve Giovanni Pintori'nin evi olarak adlandırdığı bir İsviçre siber güvenlik şirketiyle çalışmaya adadım.

Olivetti gibi bu şirket de tasarıma her biçimde değer veriyor. En büyük önceliğim şirketin ürünlerinin tasarımı olsa da, markalarını, pazarlamalarını ve genel yaratıcı yönlerini etkileme fırsatı da buldum.

İş beni cezbettiğinde hala başkalarının projelerine zaman harcıyorum, ancak uzun vadeli bir müşteri ilişkisinin ne kadar ödüllendirici olabileceğini öğrendim. Yıllardır olmadığım kadar mutlu ve yaratıcı bir şekilde tatmin oldum. Ayrıca, yaşlılık bana yetiştiğinden, eskisi gibi her çekici projenin peşinden gidecek enerjim yok.

Giovanni Pintori'den İlham Alındı

1912'de Sardunya'da doğan Giovanni Pintori, 20. yüzyılın en etkili Avrupalı ​​grafik tasarımcılarından biri oldu. 30 yılı aşkın süredir Olivetti'nin tasarım dilinde yarattığı kendine özgü stiliyle tanındı.

Pintori, yaratıcı sanatlarla çevrili olduğu İtalya'nın etkili L'Istituto Superiore per le Industrie Artistiche'sinde (Sanatsal Endüstriler Yüksek Enstitüsü) tasarım eğitimi aldı. ISIA, öğrencilerin seramik, resim, metal işleri ve ahşap işleri okudukları ilerici bir okuldu.

Pintori, ISIA'da okurken, 1930'larda Olivetti'nin reklam departmanına başkanlık eden reklam direktörü ve yayıncı Renato Zveteremich ile tanıştı. HIAI'den mezun olduktan sonra Pintori, Zveteremich altında çalışmak üzere Olivetti'ye katıldı ve 1950'de şirketin sanat yönetmeni oldu.

Olivetti, en ünlüsü daktilo yelpazesi olan iş makineleri üretti. Pintori, Olivetti'ye katıldığında, şirket zaten özgün ürün tasarımlarıyla biliniyordu. Ürünleri hemen tanındı ve endüstriyel tasarımcı Marcello Nizzoli'nin rehberliğinde, boşluk çubuğunun şeklinden dış kaplamalarının rengine kadar tasarımlarının her detayı dikkatlice düşünüldü.

“Sanatçılardan bir makinenin işlevsel saflığını yorumlamaları, ifade etmeleri ve savunmaları isteniyorsa, bu gerçekten makinenin insan ruhuna girdiğinin ve biçimler ve ilişkiler sorununun hala sezgisel bir nitelikte olduğunun bir işaretidir.”

— Renato Zveteremich

Ancak Olivetti'nin tasarımla meşguliyeti ürünleriyle bitmedi. Fabrikalarının ve ofislerinin mimarisinden ürünlerini tanıtmak için kullanılan reklam ve grafik tasarımına kadar yaratıcılık, şirket kültürünün önemli bir parçasıydı.

Pintori, Olivetti'deki 30 yıllık kariyeri boyunca şirketin reklamlarını, broşürlerini ve hatta yıllık takvimlerini tasarladı. Pintori'nin estetik tarzı cesur ve kendinden emindi. Minimal renk paletlerinden parlak renkler kullanmış ve bunları şekillerle birleştirerek tasarımlarını enerji ile doldurmuştur.

Ancak Pintori'nin çalışması sadece eğlenceli değildi, düşünceliydi. Şekil seçimi soyut değildi. Şekiller, bir ürünün özelliklerini tam anlamıyla tanımlamaktan ziyade kullanmanın faydalarını önerdi. Pintori sadece ürünleri göstermekle kalmadı, nasıl kullanılabileceğini ve insanların yaşamlarını ve çalışmalarını iyileştirmek için neler yapabileceklerini önererek tasarımlarıyla onları hayata geçirdi.

“Makineler adına konuşmaya çalışmıyorum. Bunun yerine, öğelerinin, işlemlerinin ve kullanımlarının grafik sunumu aracılığıyla onları kendi adlarına konuşturmaya çalıştım.”

Pintori, Olivetti'nin imajını şirketteki zamanının çok ötesinde tanımladı ve 1967'de ayrıldıktan sonra onlarla projeler üzerinde çalışmaya devam etti. Emekli olmadan ve kendini resme adamadan önce serbest tasarımcı olarak çalıştığı Milano'da kendi stüdyosunu kurdu.

Giovanni Pintori 1999'da Milano'da öldü ve bir kitap var, Marta Sironi'nin Pintori'si ve Moleskine tarafından yayınlanmış ve onun şaşırtıcı kariyerini katalogluyor.

Pintori'nin çalışmaları, yalnızca renkli şekillerinin cesurluğu nedeniyle değil, temsil ettikleri şey nedeniyle de ilham veriyor. Pintori, bir ürünü tanıtmanın özelliklerini listelemekten daha fazlasını gerektirdiğini anladı. Tanıtım, müşterilerde yankı uyandıran bir hikaye anlatmalıdır ve bu hepimizin ilham alması gereken bir derstir.

Renk Paletleri Oluşturma

Seçtiğimiz renkler, bir şirket, ürün veya hizmet hakkında mizanpajımız veya tipografimiz kadar etkili bir hikaye anlatmalıdır. Renk seçimlerimiz birinin dikkatini çekebilir, yaptıklarımıza ilişkin algılarını etkileyebilir ve hatta duyguları harekete geçirebilir. Renk, bir ürünü veya web sitesini kullanımı kolay ve sezgisel hale getirmede önemli bir rol oynar. Marka renklerinin yanı sıra, web için renk paletleri, insanların gezinmesine yardımcı olur, neye basabileceklerini ve nerede olduklarını bilmelerini sağlar.

Renklerimi basit tutmayı severim ve paletlerim nadiren üçten fazla renk tonu içerir; baskın renk, ikincil veya destekleyici renk ve vurgu. Bunlara arka plan, kenarlık ve metin olarak kullanmak için küçük bir nötr renk seçimi ekliyorum.

Tasarımlarıma derinlik katmak ve bana daha fazla esneklik kazandırmak için, her bir tonumun tonlarını ve renk tonlarını da tanıtıyorum. Kenarlıklar için daha koyu gölgeler - örneğin - düğmelerin etrafında - ve vurgu eklemek için daha açık renk tonları kullanıyorum.

İşletim sistemi karanlık modları daha yaygın hale geldiğinden, paletlerimdeki renklerin açıklığını ve doygunluğunu da ustaca değiştiriyorum, böylece koyu arka planlarda daha canlı görünüyorlar.

Ana Renkleri Kullanma

Pintori'den ilham alan ilk tasarımımı uygulamak için gereken HTML, tasarımın kendisi kadar anlamlı ve basittir. Sadece dört yapısal öğeye ihtiyacım var; ikonik Morris Traveller'ın profilinin iki SVG'sini, çalışan metnimin ana öğesini, Traveller'ın ön yüzünün bir SVG'sini ve son olarak Morris Motors şirket logosunu içeren bir altbilgiyi içeren bir başlık:

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

Harici SVG dosyaları önbelleğe alınacak ve oluşturulmaya hazır olacak olsa da, artık mümkün olduğunda SVG'yi HTML'me yerleştiriyorum. Daha az harici dosya, daha az HTTP isteği anlamına gelir, ancak gömmenin faydaları performansın çok ötesine geçer.

Tasarım öğelerinin kontrast oluşturan arka plan renklerine karşı keskinliğini korumak için, açık temalar ve karanlık modlar arasındaki renk doygunluğu ve açıklığındaki ince değişiklikler genellikle gereklidir. Bir SVG HTML'ye katıştırıldığında, dolguları ve konturları CSS kullanılarak incelikle değiştirilebilir.

Tasarımımın seçkin koyu versiyonu için renk ve tipografi temel stilleri uygulayarak başlıyorum. Bunlar arasında Luciano Vergara ve Alfonso Garcia tarafından tasarlanan ve Pintori'nin Olivetti için yaptığı çalışma tarzını çağrıştırmayı seçtiğim, çok yönlü bir sans-serif yazı tipi olan Moderna Sans yer alıyor:

 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, başlığımı küçük bir ekran tasarımında görsel hiyerarşiyi korumanın en etkili yollarından biri olan yatay olarak kayan bir panele dönüştürür:

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

1 değerine sahip esnek büyüme özelliği, tüm görüntülerin mevcut herhangi bir alanı dolduracak şekilde genişlemesini sağlarken, esnek temel, bu esnek öğelerin minimum 640 pikselden başlamasını sağlar;

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

Son olarak, büyük miktarda yatay dolgu ekledim ve Morris logosunu alt bilgimin ortasına hizaladım:

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

Yatay kaydırma panelim küçük bir ekrana ilgi katıyor, ancak orta boy ekranlarda bulunan ekstra alan, özünde İngiliz Gezginlerimden daha fazlasını göstermeme izin veriyor.

CSS Izgarası, Flexbox'ta bulunmayan öğelerin hassas yerleşimini ve istiflenmesini sağlar ve orta ila büyük ekranlarda bu başlık için mükemmel bir seçimdir. Display özelliğinin değerini esnekten ızgaraya değiştiriyorum, ardından simetrik üç sütun ve satır ekliyorum.

İki dış sütunun genişliği 270 piksel olarak sabitlenirken, iç sütun kalan tüm alanı dolduracak şekilde genişler. Üç sıra için benzer bir teknik kullanıyorum, dıştaki ikisini 100 piksel yüksekliğe sabitliyorum. Bu, her iki görüntünün konumunu dengeler ve bu tasarıma derinlik katar:

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

Sözde sınıf seçicileri ve satır numaralarını kullanarak ilk SVG'yi yerleştiriyorum, ardından perspektif eklemek için boyutunu küçültüyorum:

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

Ardından iki grafiğimden ikincisini yerleştiriyorum. Görüntüleyiciye görsel olarak daha yakın hale getiren daha yüksek bir z-endeksi değeri ekleyerek yığınlama sırasında yükseltirim:

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

Görünüşte sıradan bir eşit oranlı ızgara bile, bir tasarım göze yön vermeye yardımcı olacak çok sayıda boşluk içerdiğinde orijinal bir düzen ile sonuçlanabilir. Bu orta boy tasarım için, ekranın genişliği ve yüksekliğiyle orantılı sütun ve satır boşluk değerlerine sahip simetrik altı sütunlu bir ızgara uyguluyorum:

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

Başlık öğem, ızgaramın tüm genişliğini dolduruyor. Ardından, şekil ve alt bilgimin genişliğini daraltmak için orantılı olarak daha fazla beyaz boşluk ekleyerek ana, şekil ve altbilgi öğelerini yerleştiririm:

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

Bu tasarım, geniş ekranlarda sunulan alan ile daha da farklılaşıyor.

Onlar için, 6+4 bileşik ızgaranın sekiz sütununu oluşturmak için gövde öğesine ızgara değerleri uygularım:

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

Orta boy tasarımımı altı sütuna dayandırmak ve ardından aynı ızgarayı büyük ekran bileşenime dahil etmek, tasarımımın tüm boyutlarında oranların korunmasına yardımcı oluyor. Ardından, dört yapısal öğeyi yeni ızgarama yeniden konumlandırıyorum:

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

Son olarak, tasarımımın merkezinde sağlam bir içerik bloğu oluşturmak için, metnini sağa yeniden hizalayarak ana içeriği şimdi bitişik şekline bağlıyorum:

 main { text-align: right; } 

Monokromatik Paletler

Sektörde yirmi yılı aşkın bir süre geçmesine rağmen hala renkle çalışmayı tasarımın en zorlu yönü olarak görüyorum. Belki de bu yüzden genellikle tek renkli renk şemalarına yöneliyorum çünkü bunlar görsel olarak uyumlu bir görünüm elde etmeyi oldukça basit hale getiriyor.

Monokromatik renk paletleri, seçilen bir temel renge değişen yüzdelerde siyah, gri veya beyaz ekleyerek gölge, renk tonu ve tonlardaki varyasyonları içerir.

• Gölgeler : Siyah kullanarak rengi koyulaştırın
• Renk Tonları : Beyaz kullanarak rengi aydınlatın
• Tonlar : Gri kullanarak rengin doygunluğunu azaltın

Arka planlar, kenarlıklar ve ayrıntılar için kullanıldıklarında, gölgeler ve tonlar bir tasarımın uyumlu görünmesini sağlayabilir.

Gölgeler, tonlar ve tonlar kullanmak, tasarımın bazı yönlerine istenmeyen dikkat çekebilecek canlı renklerin tonunu düşürmeye yardımcı olabilir. Mevcut marka renklerinden daha çeşitli bir renk paleti geliştirirken özellikle kullanışlıdırlar.

Sıklıkla, vurgu rengi içeren tamamen tek renkli veya kısmen tek renkli bir palet seçerim. Bu eklenen renk, temel renge karşı bir kontrpuan görevi görür ve tasarıma daha fazla derinlik kazandırır.

Paleti Sınırlamak

CSS Izgarası, arka plan görüntüsü geçişleri ve sözde öğeler sayesinde, Pintori'den ilham alan bu sonraki tasarım, çok küçük bir HTML öğesi kümesinden muazzam bir değer elde eder. Sadece bir başlığa, tek bir paragrafa ve yedi boş bölüme ihtiyacım var. Her bölüme kendi kimliğini veriyorum. Bu, onlara kendi ayırt edici tarzlarını vermeme izin veriyor:

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

Bu HTML, başlığı ve paragrafı yedi panelden önce yerleştirir, ancak bitmiş küçük ekran tasarımına yakından bakın ve bu içeriğin Morris logosunu yerleştirmek için yeniden sıralandığını ve ardından Traveller'ın ön yüzünün bir resmini en üste yerleştirdiğini göreceksiniz. .

Orta ve büyük ekranlara genellikle ızgara özelliklerini tanıtırken, CSS Izgarası ayrıca daha küçük ekranlarda içeriği yeniden sıralamak için kullanışlıdır. Bu tasarım için, gövde öğesinin görüntü değerini ızgara olarak değiştiriyorum, ardından içsel, belirtilmemiş satırlar arasında görüntü alanı yüksekliğine dayalı bir boşluk oluşturuyorum:

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

Ardından, satır satır numaralarını kullanarak Morris Motors logomu ve resmimi ve başlığı içeren panelleri yeniden sıralarım:

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

Panel bölmelerimde başka eleman olmadığı için yükseklikleri sıfıra inecek ve sadece sınırları kalacak. Oluşturulan arka planlarını ve içeriğini gösterecek alan olduğundan emin olmak için tüm paneller için minimum bir yükseklik belirledim:

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

Küçük ekran tasarımımda ilk görünen panel, CSS tarafından oluşturulan içerik verisi URI'sini kullanarak eklediğim Morris Motors logosunu gösteriyor. Bu kullanışlı içerik türüne aşina değilseniz, bir veri URI'si, bir dizeye kodlanmış bir dosyadır. Veri URI'sini CSS veya HTML'nizin herhangi bir yerinde kullanabilirsiniz:

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

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

Bir tarayıcı bir veri URI'si bulduğunda, içeriğin kodunu çözer ve orijinal dosyayı yeniden oluşturur. Veri URI'leri, kodlanmış görüntülerle sınırlı değildir, ancak PNG biçimindeki görüntüleri ve SVG'leri kodlamak için sıklıkla kullanılır. Görüntüleri çevrimiçi olarak veri URI'lerine dönüştürmek için çeşitli araçlar bulacaksınız.

İlk olarak, bu panelin minimum yüksekliğini logomun yüksekliğine uyacak şekilde değiştiriyorum, ardından logoyu ekliyorum:

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

Paragrafımın arkasına bir arka plan resmi yerleştirmek için benzer bir teknik kullanıyorum. Arka planı esnek hale getiren ve onu her zaman paragrafımın yatay ve dikey merkezine yerleştiren tekrar, konum ve boyut özellikleri ekliyorum:

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

Panellerimin her birinin kendine özgü grafik tasarımı var. Görüntüleri bu yedi panele yerleştirebilirdim, ancak bunun için en az yedi ek HTTP isteği gerekirdi. Bunun yerine, ihtiyacım olan sonuçları elde etmek için veri URI'lerini ve CSS gradyanlarını kullanarak birden çok arka plan görüntüsünün çeşitli kombinasyonlarını kullanıyorum.

İlk panel, çizgili mavi, beyaz ve siyah arka plan üzerinde Morris'in poyra kapağının bir grafiğini içerir. Jant kapağı arka plan görüntüsü bir veri URI'sinden gelir:

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

Ardından, doğrusal bir gradyan kullanarak ikinci, çizgili arka plan resmini ekliyorum:

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

Arka plan resimlerimle aynı sırada tutmayı hatırlayarak, virgülle ayrılmış iki tekrar, konum ve boyut değeri grubu belirledim:

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

Bu sonraki panel, iki SVG görüntüsü ve ardından daha karmaşık siyah, sarı ve beyaz şeritler içerir. Degrademde farklı renklere sahip renk duraklarını aynı konuma yerleştirerek, renklerim arasında sert çizgiler bulunan çizgili bir arka plan oluşturuyorum:

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

Panellerimin her birini aynı tekniklerin farklı kombinasyonlarını kullanarak geliştirdim, bu da onları hızlı yükleme ve esnek hale getirdim. Modüler bir ızgaraya dayalı tasarımları çevrimiçi bulmak nadirdir, ancak Pintori'den ilham alan bu geniş ekran tasarımı için mükemmel seçimdir. Bu modüler ızgara, üç sütun ve satırdan oluşur.

Gövde öğesine ızgara özellikleri ekliyorum, ardından tüm kullanılabilir alanı doldurmak için sütun genişliklerimi belirtiyorum. Her panelin içeriğini göstermek için her zaman yeterli yükseklik olduğundan emin olmak için, minimum yüksekliği 300px ve maksimumu 1fr olarak ayarlayarak Grid'in minimum maksimum değerini kullanıyorum:

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

Bu tasarımdaki öğeler örtüşmez, bu yüzden sadelikleri için ızgara şablon alanları kullanıyorum. Bu tasarımın dokuz ızgara alanı var ve her birine tek bir harf adı veriyorum, a–h. d harfi iki bitişik alan için kullanıldığından, bu harf kullanılarak yerleştirilen öğe her ikisini de işgal edecektir:

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

Bu büyük ekran uygulamasında, CSS Grid minmax değeri satırlarımın yüksekliğini kontrol ederek daha önce uyguladığım min-height değerini gereksiz hale getiriyor:

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

Panellerimi, HTML'mdeki konumlarını değiştirmeden mizanpajımda göründükleri yeri değiştirmeme izin veren alan adlarını kullanarak yerleştiriyorum:

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

Panellerimin tasarımı ekran boyutları arasında tutarlı kalırken, daha büyük ekranlar için içeriğin ve arka planların değiştiği bir panel var. Bu panel, tanıdık Morris logosunu ve ana başlık gibi görünen “Stil… BÜYÜK bir şekilde” içerir.

Bu paneli geliştirmek için önce üstte derin bir düz kenarlık, ardından bir veri URI arka plan görüntüsü ekliyorum:

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

Ardından, siyah paneli ve iki dikey sarı şeridi oluşturan ikinci bir degrade arka plan resmi ekliyorum:

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

Sürecimin başlarında, bu tasarıma Morris logosunu eklemek için bir :before sözde öğesi kullandım. Büyük ekranlar için bu logoyu panelin sol alt köşesine yeniden konumlandırıyorum:

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

Büyük başlığım hemen HTML gövdesinden geliyor ve bu panelin bir parçası değil, bu da esnek ekran boyutları arasında konumlandırmayı zorlaştırıyor. Tasarımımı erişilebilirlikten ödün vermeden tam olarak yeniden oluşturmak için, ekran okuyucu kullanan kişiler için bu başlığı görsel olarak gizlemek için önce erişilebilir bir yöntem kullanıyorum:

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

Ardından, oluşturulan içeriği ve bir :after sözde öğesini kullanarak başlığın metnini eski durumuna getiriyorum. Panelimin sağ alt köşesine konumlandırıyorum ve kalın, yoğun, italik stilini kopyalıyorum:

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

Tamamlayıcı Paletler

Birbirini tamamlayan renkler, bir renk çarkının zıt taraflarında yer alır. Ancak, matematiksel ilişkilerini anlamak kolay olsa da, tamamlayıcı renklerle çalışmak zor olabilir.

Bitişik tamamlayıcı renk kombinasyonları sert görünebilir ve birbirini tamamlamaktan ziyade uyumsuz görünebilir. Çakışmalarını önlemek için, kullanılabilir renk paletinizi genişletmeye yardımcı olacak gölgeler, tonlar veya tamamlayıcı renk tonları kullanın.

Alternatif olarak, paletin zıt renkler yerine tamamlayıcının her iki tarafında iki renk içerdiği durumlarda bölünmüş tamamlayıcı renkleri kullanın.

Tamamlayıcı Renkler

Bir sonraki Pintori'den ilham alan tasarımımda, birbirini tamamlayan rengarenk birçok Morris Traveler planı örtüşüyor. Bu tasarımı geliştirmek için gereken HTML, bu arabanın tasvirleri kadar minimaldir. Bir afiş bölümü, Morris logosunun bir SVG'sini içerir ve ana öğe, başlık ve çalışan metni içerir.

Ancak bu tasarımın çeşitli ekran boyutlarındaki esnekliği, her biri üç görüntü içeren iki resim öğesinin kullanılmasından kaynaklanmaktadır. Başlığa bir resim öğesi, ardından altbilgime bir başka resim öğesi ekliyorum:

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

Geliştirme projelerimin her biri, artık tanıdık temel stilleri ekleyerek başlıyor, bu sefer kirli beyaz bir arka plan rengi ve neredeyse siyah sans-serif metni ekleyerek:

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

Afiş bölümümün içeriğini merkeze hizalarım, ardından logonun maksimum genişliğini 150 piksel küçülterek ayarlarım:

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

Bu tasarımdaki ana başlık, Moderna Sans'ın kalın, yoğun, italik stilinde belirlenir:

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

Bu başlığın bir kısmı, rengini, Morris Motors logosunun ortasındaki boğa amblemi de dahil olmak üzere, bu tasarımın diğer yönlerine uyacak şekilde değiştirmeme olanak sağlayan bir yayılma öğesi içine alındı:

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

Küçük ekranlarda, hem üst bilgi hem de alt bilgi tek bir Gezgin görüntüsü içerir. İki Gezgini yan yana yerleştirecek yer olduğunda, bir tarayıcı iki resim öğesindeki resimleri değiştirir.

Orta büyüklükteki ekranlar için, fazladan boş alandan yararlanıyorum ve dört sütunlu simetrik bir ızgara sunuyorum:

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

Afiş bölümünü iki orta sütuna yerleştiriyorum, logomu ortalıyorum, sonra iki Gezginin tamponları arasına sığması için dikey olarak kaydırıyorum:

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

Ana içeriği iki orta sütuna yerleştirmek rahat bir ölçü oluştururken, hem üst bilgim hem de alt bilgim ızgarayı kenardan kenara yayıyor:

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

Bu tasarımın düzenindeki en önemli değişiklikler daha büyük ekran boyutlarında görülebilir. Adlarına rağmen, bir düzenin üstüne ve altına bir üst bilgi veya alt bilgi öğesi yerleştirmeniz gerekmez. Sol veya sağ da dahil olmak üzere bir tasarımın herhangi bir yerine yerleştirilebilirler.

Düzenim üzerinde daha kesin kontrol için, ızgaramdaki sütun sayısını dörtten sekize çıkardım, sonra iki satır ekledim. İlk satırın sabit yüksekliği 160 pikseldir, ikinci satırın yüksekliği ise içerik tarafından belirlenir:

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

Banner bölümümü üç sütun boyunca yeniden konumlandırıyorum ve aşağıdaki ana öğeyi eşleşecek şekilde ayarladım:

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

Ardından, simetrik ızgaradan asimetrik bir düzen oluşturmak için altbilgiyi ilk üç sütuna ve üstbilgiyi son dörde yerleştiririm:

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

Hem üstbilgi hem de altbilgi, ızgaramın yüksekliğini yukarıdan aşağıya doldurur:

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

Afiş bölümü ilk satırı kaplarken:

 .banner { grid-row: 1; }

Ve ana eleman onun altına düzgünce oturur:

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

Apple, iOS ve macOS'a karanlık bir mod getirdiğinden beri, açık temaları ve koyu tasarımları uygulamak, günlük ürün ve web sitesi tasarımının bir parçası haline geldi. Karanlık/aydınlık modları geliştirmek kolaydır ve artık bu kullanıcı tercihi için geniş çapta desteklenen bir medya sorgusu bulunmaktadır. Seçilebilecek üç değer vardır:

• no-preference : Birisi bir tercih belirtmedi
• light : Birisi hafif bir tema seçti
• dark : Birisi karanlık bir tema seçti

Bu tasarımın karanlık mod sürümünü tanıtmak, o ortam sorgusunda belirli renk değerlerine değişiklik eklemekten biraz daha fazlasını içerir. Örneğin, arka plan ve ön plan metin renklerini ters çevirerek ve SVG logomdaki yol dolgu renklerini değiştirerek:

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

Koyu mod renklerine karar vermek bazen onları tersine çevirmekten, beyaz arka planları siyah ve siyah metni beyaz yapmaktan fazlasını içerir. Tam siyah arka planlar üzerindeki saf beyaz metin, uzun metin bölümlerinin okunmasını göz için yorucu hale getirir, bu nedenle bu kontrastı kirli beyaz kullanarak yumuşatmayı düşünün:

 body { color: #f3f2f2; }

Bazen, canlı tamamlayıcı renkler bile koyu bir arka plana karşı yerleştirildiğinde farklı görünebilir. Neyse ki, CSS filtreleri, daha koyu arka planlar için bir dosyanın farklı bir sürümünü dışa aktarmaya gerek kalmadan bir rengin parlaklığını, doygunluğunu veya her ikisini de artırabilir:

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

Parlatıcı Renkler

Pintori'den ilham alan son tasarımımda, koyu gri arka planın üzerinde renkli dikdörtgenler yüzüyor. Bu tasarım sadece üç yapısal elemana ihtiyaç duyar; Yine Morris Motors logosunu içeren bir başlık, Morris Traveller'ın bir değil iki değil, üç anahat görüntüsünü içeren bir şekil öğesi ve çalışan metnimi içeren ana öğe:

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

Bu minimal HTML'ye tamamen sunum amaçlı dört SVG görüntüsü ekliyorum. Bunların yardımcı teknolojiler tarafından duyurulmasını istemediğim için her birine bir ARIA gizli özniteliği ekliyorum:

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

İlk olarak, arka plan ve ön plan renkleri için temel stilleri belirledim, ardından veri URI'lerini kullanarak aynı sunum SVG görüntülerini arka plana uyguladım:

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

Ardından, her bir SVG'yi ortaya yerleştirerek ve sayfa üzerinde dikey olarak istifleyerek arka plan tekrarını ve konum değerlerini belirliyorum. Son olarak, boyutlarını belirledim:

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

Başlığımdaki logo, arkasındaki SVG arka planının boyutuyla eşleşiyor, maksimum genişliğini sınırlandırıyorum, sonra yatay kenar boşluklarını kullanarak ortalıyorum:

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

Yine, yatay kaydırma paneli, üç anahatlı Gezgin resmimi sunmanın kullanışlı bir yoludur, bu yüzden figürlerinin görüntü değerini esneyecek ve değerini kaydırma olarak ayarlayarak herhangi bir yatay taşmayı önleyecek şekilde ayarladım:

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

Ardından, bir esnek temel değeri ve eşleşecek bir yükseklik belirlerim:

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

Dört renkli SVG'mi arka plan görüntüsü olarak uyguladım, bu yüzden küçük ekranlarda görünmelerini istemiyorum. Bir stilin özelliğini ve değerini tam olarak eşleştirmek için öznitelik seçicileri kullanmak, ek sınıf özniteliklerine başvurmadan öğeleri hedeflemenin ideal bir yoludur:

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

Bu tasarım, orta ve büyük ekranlar için düzen stilleri uygulamak için yalnızca bir medya sorgusu kesme noktasına ihtiyaç duyar. Sekiz eşit genişlikte sütun ve sekiz satır uygularım, ardından küçük ekranlar için uyguladığım arka plan resimlerini kaldırırım:

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

Ardından, başlığı ve ana öğeleri ızgaramdaki satır numaraları arasına yerleştiririm:

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

Şeklin görüntülerini ve bölmeyi şeklin kendisine değil ızgarama yerleştirmem gerekiyor, bu yüzden display özelliğini içerik olarak değiştiriyorum, bu da onu şekillendirme amacıyla DOM'dan etkili bir şekilde kaldırıyor:

 figure { display: contents; }

Ardından, her bir Gezgin görüntüsünü konumlarıyla birlikte boyutlarını değiştiren farklı bir dizi ızgara sütunu ve satırına yerleştiririm:

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

CSS dönüşümleri, ızgaraların kısıtlamaları içindeki öğelerin boyutuna ve konumuna ince ayar yapmak için ideal araçlardır. Bir tasarıma alışılmadık dokunuşlar eklemek için de kullanışlıdırlar. Bu görüntülerde ince ayar yapmak için döndürme, ölçekleme ve çevirmeyi kullanıyorum:

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

Şimdi renkli, sunumsal dikdörtgenleri ortaya çıkarıyorum ve düşük bir z-endeksi değeri ayarlayarak onları içeriğimin arkasına itiyorum. Bu görüntülerin üst üste geldiği yerlerde, bir karıştırma modu bu tasarıma daha da fazla renk katar:

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

Bu son adımda, zaten renkli olan bu tasarıma daha fazla kişilik katmak için rotasyonları kullanarak bu şekilleri ızgarama yerleştiriyorum:

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

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ı: Otto Storch
• İlham Veren Tasarım Kararları: Herb Lubalin
• İlham Veren Tasarım Kararları: Max Huber
• İ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.