İlham Veren Tasarım Kararları: Avaunt Dergisi

Kabul etmekten nefret ediyorum ama beş ya da altı yıl önce web tasarımına olan ilgim azalmaya başladı. Tabii ki, bir iş sahibi olmak çalışmaya devam etmem gerektiği anlamına geliyordu, ancak motive olmak ve müşterilere en iyi düşüncemi sunmak günlük bir mücadele haline geldi.

Web'e bakmak motivasyonumu artırmadı. Web tasarımı durmuştu, yaratıcılığın yerini öngörülebilirlik almıştı ve fikirler verilerden daha az önemli görünüyordu.

Web'de çalışmaktan zevk almamın nedenleri artık alakalı görünmüyordu. Tasarım neşesini kaybetmişti. Karmaşık yapı araçları ve işlemciler, HTML ve CSS yazmanın basit zevkinin yerini bile almıştı.

Efsanevi gazete ve dergi tasarımcısı Mark Porter ile çalışmaya başladığımda sanat yönetmenliği ve editoryal tasarım beni büyüledi. Sanat okulunda da eğitim görmemiş biri olarak, bu tasarım alanıyla ilgili her şey heyecan verici ve yeniydi. Etkili sanat yönetmenleri hakkında bulabildiğim tüm kitapları okudum ve dünyanın dört bir yanında gezdiğim yerlerden dergiler toplamaya başladım.

Dergi tasarımından ne kadar ilham alırsam, web tasarımına olan hevesim o kadar hızlı geri döndü. Birçok web tasarımcısının neden baskı tasarımının eski moda ve işleriyle alakasız olduğunu düşündüğünü merak ettim. Baskı tasarımını özel kılan şeylerin neden bu kadar azının web'e aktarıldığını düşündüm.

Amacım, editoryal tasarımın ilham verici örneklerini aramak, onları benzersiz kılan şeyleri araştırmak ve öğrendiklerimi web için daha çekici, ilgi çekici ve yaratıcı tasarımlar oluşturmak için uyarlamanın yollarını bulmaktı.

Kitaplıklarım artık dergi tasarımı ilhamıyla dolu, ancak koleksiyonum hala büyüyor. Sınırlı bir alanım var, bu yüzden ne alacağım konusunda seçiciyim. Çeşitli bir seçki satın alıyorum ve nadiren aynı başlıktan birden fazla sayı topluyorum.

Heyecan verici sayfa düzenleri, ilham verici tipografi ve metni görsellerle birleştirmenin yenilikçi yollarını arıyorum. Bir dergide çok sayıda ilginç tasarım öğesi varsa onu satın alırım. Bununla birlikte, bir dergi yalnızca birkaç ilham kaynağı içeriyorsa, onları rafa geri koymadan önce fotoğraflamaktan çekinmediğimi itiraf etmeliyim.

Olabildiğince düzenli olarak yeni dergiler alıyorum ve Noel'den bir hafta önce birkaç arkadaşımla Londra'da tanıştık. Magma'da durmadan “Duman” gezisi tamamlanmadı ve birkaç yeni dergi aldım. İlham eklememi açıkladıktan sonra, bir arkadaşım dergi tasarımını neden bu kadar ilham verici bulduğumu ve dergilerin çalışmalarımı nasıl etkilediğini yazmamı önerdi.

Bu konuşma, ilham verici tasarım kararları verme konusunda bir dizi fikrini ateşledi. Her ay bir yayın seçeceğim, tasarımını neyin ayırt edici kıldığını ve web için daha iyi çalışmamıza yardımcı olacak dersleri nasıl öğrenebileceğimizi tartışacağım.

Hevesli bir HTML ve CSS kullanıcısı olarak, en son teknolojileri kullanarak yeni fikirlerin nasıl uygulanacağını da açıklayacağım; CSS Izgarası, Flexbox ve Şekiller.

Web için tasarım yapmak için yeniden ilham aldığımı ve motive olduğumu söylemekten mutluluk duyuyorum ve umarım bu seri size de ilham verebilir.

Avaunt Dergisi: Olağanüstüyü Belgelemek

Bana bir bakış, pek maceracı olmadığımı söyleyecek. Kendimi özellikle kültürlü görmüyorum ve karım düzenli olarak benim tarz eksikliğim olduğunu söylediği şeyler hakkında şakalar yapıyor.

Peki, bu kadar çok rakip ve çeşitli dergi varken beni Avaunt dergisine ve onun “macera”, “kültür” ve “tarz” konularına çeken ne oldu?

Bir derginin aradığım ilhamı sunup sunmadığına karar vermem genellikle sadece birkaç sayfa tur alır. İster heyecan verici bir sayfa düzeni, ister ilham verici bir tipografik işlem veya görsellerle metinlerin yenilikçi bir kombinasyonu olsun, daha yakından bakabilmem için o ilk birkaç saniyede bir şeyin öne çıkması gerekiyor.

Avaunt bunların hepsine sahip, ancak beni en çok etkileyen şey, sanat yönetmeninin dergi boyunca tutarlı bir hissi korurken renk, düzen ve yazı tipini farklı şekillerde kullanma şekliydi. Avaunt'un sayfalarında dolaşan ayırt edici tasarım konuları var. Bir şablon serif ve geometrik sans-serif yazı tipinin cesur kullanımları, Avaunt tasarımcılarının çeşitli şekillerde kullandığı siyah, beyaz ve kırmızının tekrarı gibi özellikle dikkat çekicidir. Avaunt'un yaratıcı seçimlerinin çoğu, anlattığı hikayeler kadar maceralı.

Pek çok dergi ilk birkaç yayınını parlak reklamlara ayırıyor ve Avaunt da aynısını yapıyor. Bu reklamları geçmek, Avaunt'un içindekiler sayfasını ve büyüleyici dört sütunlu modüler ızgarasını bulur.

Bu düzen, içeriği uzaysal bölgeler içinde sıralı tutar, ancak her bölgeyi farklı bir boyuta getirerek enerjiyi korur. Bu düzen, birçok çevrimiçi içeriğe uyarlanabilir ve CSS Izgarası kullanılarak uygulanması kolay olmalıdır. Bunu denemek için can atıyorum.

Avaunt, sans-serif manşetler, standfirst'ler ve bir yumruk oluşturan diğer tip öğeler için, ilk olarak Matt Willey tarafından 2011'de Elephant dergisi için tasarlanan MFred'i kullanır. Matt, Avaunt'un lansmanını sanat yönetmenliğine devam etti ve bir şablon serif yazı tipini görevlendirdi. dergisinin cesur başlıkları ve ayırt edici rakamları.

Avaunt Stencil, 2014 yılında Londra merkezli stüdyo A2-TYPE tarafından tasarlandı ve o zamandan beri lisansa sunuldu. Kullanılabilir birçok şablon yazı tipi vardır, ancak cesurluk ve zarafeti birleştiren birini bulmak zor olabilir - Google Fonts'ta barındırılan bir şablon serif mi arıyorsunuz? Stardos, ekran boyutu türü için iyi bir seçim olacaktır. Daha benzersiz bir şeye ihtiyacınız varsa, URW'den Caslon Stencil'i deneyin.

Avaunt'un modüler bir ızgarayı kullanması içindekiler sayfasıyla bitmiyor ve beni dergiye ilk çeken Moskova Politeknik Soğuk Savaş Müzesi meraklarının yayılmasının temelini oluşturuyor. Bu yayılma, üç sütunlu modüler bir ızgara ve çeşitli boyutlarda uzay bölgeleri kullanır.

Bu Soğuk Savaş yayılması hakkında beni büyüleyen şey, verso sayfasındaki modüllerin metin içeriği için tek bir sütun oluşturmak üzere nasıl birleştiğidir. Bu sütunda bile, modül ızgarasının oranları, içerideki öğelerin konumunu ve boyutunu bildirmeye devam eder.

Avaunt'un birçok sayfasının tasarımı muhteşem bir okuma deneyimine ayrılmış olsa da, diğerleri ızgarayı zorlar ve temel tipografi stillerini farklı yönlere çeker. Koyu arka planlar üzerinde beyaz metin, nesnelerin arka planla karışması için kesildiği parlak renkli yayılımlar. Bir sütunun genişliğini dolduran devasa ilk büyük harfler ve sayfaya hakim olan büyük şablonlu büyük büyük harfler.

Avaunt'un eğlenceli tasarımları ilgi çekiyor ve sayfaların düzeni internette çok nadiren gördüğüm bir ritim yaratıyor. Tasarımdaki bu varyasyonlar, metin akışı için bir yazı tipi olarak yine A2-TYPE tarafından tasarlanan Antwerp'in tutarlı kullanımı ve derginin her yerinde kullanılan siyah, beyaz ve kırmızı renk temasıyla bir arada tutulur.

Avaunt dergisinin tasarımını incelemek öğretebilir ve ilham verebilir. Modüler bir ızgara, içeriği statik hissetmeden yaratıcı şekillerde yapılandırmaya nasıl yardımcı olabilir? (Modüler ızgaralar hakkında daha sonra size daha fazlasını öğreteceğim.)

İyi tanımlanmış bir stiller dizisi, farklı ve çeşitli tasarımların temeli haline nasıl gelebilir ve son olarak, bir dizi sayfa boyunca bir ritim oluşturmanın okuyucuların etkileşimde kalmasına nasıl yardımcı olabileceği.

Bir dahaki sefere en yakın dergi mağazanızın önünden geçerken, Avaunt Magazine'in bir kopyasını alın. Bu macera hakkında, ama bahse girerim tasarımlarınızın daha maceralı olması için ilham vermenize yardımcı olabilir.

İnce Sütunlara Merhaba Deyin

Sonsuzluk gibi gelen bir süredir, web için ızgara tasarımında çok az yenilik oldu. Duyarlı tasarımın zorluklarının yerleşime yaratıcı yaklaşımlarla sonuçlanacağını ummuştum, ancak ne yazık ki tam tersi doğru gibi görünüyor.

Orijinal ızgara tasarımları yerine, bir, iki, üç veya dört bloklu içerik düzenlemeleri norm haline geldi. Bootstrap'ta bulunanlar gibi çerçeve ızgaraları, bu çerçeveleri kullansınlar veya kullanmasınlar birçok tasarımcı için başlangıç ​​noktası olmaya devam etmektedir.

Web'in bu kadar çok olmasının, aynı ızgarayı kullanan web tasarımcılarıyla aynı görünmesinin daha fazla nedeni olduğu doğru. Ne de olsa, dergiler ve gazeteler için onlarca yıldır benzer gelenekler var, ancak bir şekilde dergiler, birçok web sitesinin sahip olduğu şekilde kişiliklerini kaybetmedi.

Her zaman düzen ilhamı ararım ve dergiler zengin bir kaynaktır. Avaunt'u okumak bana yıllar önce karşılaştığım ama denemediğim bir tekniği hatırlattı. Bu teknik, aksi takdirde geleneksel bir sütun ızgarasına fazladan bir dar sütun ekler. Baskı tasarımında, bu dar sütuna genellikle "piç sütun veya ölçü" denir ve bir kılavuzun geri kalanına uymayan bir içerik bloğunu tanımlar. (Bu, aile dostu bir yayın olduğundan, ona “sıska sütun” diyeceğim.)

Bu ilk örneklerde, bir görüntüyü bir sütuna sıkıştırmak görsel ağırlığını azaltır ve kompozisyonumun dengesini bozar. Resmin iki standart sütunu doldurması da bu hassas dengeyi bozar.

Son sütunu bölmek, ardından genişliğinin yarısını diğerine eklemek, resmim için mükemmel alanı ve daha hoş bir genel sonuç yaratır.

Tasarım öğelerinin genişliğini bildirmek için ince bir sütun kullanabilirim. Bu Mini Cooper logosu sıska sütunumun genişliğine uyuyor ve boyutu kompozisyonumun geri kalanıyla dengeli görünüyor.

Bazen içerik tek bir sütuna rahatça sığmaz, ancak standart ve ince sütunların genişliklerini birleştirerek daha fazla alan ve metin çalıştırmak için daha iyi bir ölçü oluştururum. İçeriğime ihtiyacım olan her yere bir düzen içinde herhangi bir yere sıska bir sütun yerleştirebilirim.

Boş bir sıska sütun, gözün bir tasarımın etrafında dolaşmasına izin veren boşluk ekler. İki standart kolon arasına ince bir kolon yerleştirilerek oluşturulan asimetri, aynı zamanda yapılandırılmış bir düzenin daha dinamik ve enerjik görünmesini sağlar.

Başka bir boş sıska sütun, bu tasarımın içine geniş bir oluk açar ve akan metnimi tek bir sütunla sınırlandırır, böylece yüksekliği görüntünün dikey biçimini yansıtır. Tipografik öğeleri heyecan verici tasarım öğelerine dönüştürmek için ince bir sütun da kullanabilirim.

Sıska Sütunlarla Geliştirme

Bunun gibi tasarımların bugünün CSS'sini kullanarak uygulanması şaşırtıcı derecede basittir. Sadece dört yapısal öğeye ihtiyacım var; bir logo, başlık, şekil ve ayrıca çalışan metnimi içeren bir makale:

 <body> <img src="logo.svg" alt="Mini Cooper"> <header>…</header> <figure>…</figure> <article>…</article> </body>

İlk medya sorgumdaki body öğesine CSS Grid uygulayarak orta boy ekranlar için bir tasarımla başlıyorum. Bu boyutta, sıska bir sütuna ihtiyacım yok, bunun yerine görünüm alanı genişliğini doldurmak için eşit olarak genişleyen simetrik üç sütunlu bir ızgara geliştiriyorum:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

Öğeleri ızgara sütunlarıma ve satırlarıma yerleştirmek için satır numaralarını kullanıyorum. Logomu, alt dize eşleşen nitelik seçiciyi kullanarak sıska ilk sütuna ve ilk satıra yerleştiriyorum. Bu, kaynak değerinde herhangi bir yerde "logo" bulunan bir görüntüyü hedefler:

 [src*="logo"] { grid-column: 1; grid-row: 1; }

Ardından, başlığımı ve ilk paragrafımı içeren başlık öğesini ikinci satıra yerleştiriyorum. 1'den -1'e kadar olan satır numaralarını kullanmak, bu başlığı tüm sütunlara yayar:

 header { grid-column: 1 / -1; grid-row: 2; }

display:grid; uygulandığında, bir ızgara kabının tüm doğrudan torunları, alanları, satır numaralarını veya adları kullanarak yerleştirebileceğim ızgara öğeleri haline gelir.

Bu tasarım, büyük bir Mini görüntüye sahip bir figür öğesi ve ayrıca orijinal Cooper model tasarımı hakkında başlık metni içerir. Bu rakam çok önemlidir, çünkü görsel ile şekil arasındaki ilişkiyi tanımlar. Bununla birlikte, bu şekil işaretlememi daha anlamlı hale getirirken, CSS Izgarasını kullanarak resim ve resim yazısını yerleştirme yeteneğimi kaybediyorum, çünkü ikisi de ızgaramı tanımladığım gövdenin doğrudan torunları değil.

Neyse ki, dikkatli kullanıldığında bu sorunun üstesinden gelebilecek bir CSS özelliği var. Figürü şekillendirmem gerekmiyor, sadece imajını ve resim yazısını şekillendirmem gerekiyor. display:contents; benim figürüme göre, onu şekillendirme amacıyla DOM'dan etkili bir şekilde kaldırıyorum, böylece onun soyundan gelenler yerini alıyor:

 figure { display: contents; }

şunu belirtmekte fayda var ki display, şekillendirme amacıyla figürümü DOM'dan etkili bir şekilde kaldırsa da, miras alınan tüm özellikler – yazı tipi boyutları ve stilleri dahil – yine de miras alınır:

 figure img { grid-column: 2/-1; grid-row: 4; } figcaption { grid-column: 1; grid-row: 4; align-self: end; }

Makalemi yerleştiriyorum ve en sevdiğim CSS özelliklerinden biri olan Çok Sütunlu Düzen'i kullanarak metnini üç sütun üzerinde biçimlendiriyorum:

 article { grid-column: 1 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

Daha büyük ekranlar için ince bir sütun içeren bir tasarımı hayata geçirmenin zamanı geldi. Bu yeni stilleri yalıtmak için bir medya sorgusu kullanıyorum, ardından 1fr genişliğinde ince bir sütunla başlayan beş sütunlu bir ızgara oluşturuyorum:

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

Ardından, sütun sayısını yeni genişliğine uyacak şekilde sıfırlamayı hatırlayarak, başlığı, img ve figcaption'ı ve makaleyi yeniden konumlandırmak için değerler ekliyorum:

 header { grid-column: 3/-1; grid-row: 1; } figure img { grid-column: 4 / -1; grid-row: 2; } figcaption { grid-column: 2; grid-row: 2; align-self: start; } article { grid-column: 3; grid-row: 2; column-count: 1; }

HTML yapısında değişiklik yapmadan, yalnızca CSS kullanarak bir tasarımın görünüşünü kökten değiştirmek, neredeyse yirmi yıl sonra bile beni gülümsetiyor. Ayrıca, ızgarayı değiştirmeden çarpıcı biçimde farklı bir düzen oluşturmak için kompozisyonu değiştirdiğimde de gülümsüyorum. Bu alternatif tasarım için daha yapılandırılmış bir görünüm hedefliyorum.

Çalışan metnimin okunabilirliğini artırmak için üç sütuna böldüm. Ardından, bu içerik bloğunu diğer metin öğelerinden ayırmak için sıska sütunumu ilk iki standart sütun arasına yerleştiriyorum. HTML'imin yapısını değiştirmeye gerek yok. Tek ihtiyacım olan, stil sayfamdaki ızgara değerlerinde küçük değişiklikler. Bu sefer 1fr geniş sıska sütun değerim iki standart sütun genişliği arasında geliyor:

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

Başlığımı ikinci sıraya ve makaleyi doğrudan altına yerleştiriyorum:

 header { grid-column: 3 / -1; grid-row: 2; } article { grid-column: 3 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

Ne img ne de figcaption, ızgaramı tanımladığım body öğesinin doğrudan torunları olmadığından, bunları yerleştirmek için display:contents; tekrar mülk:

 figure { display: contents; } figure img { grid-column: 3/5; grid-row: 1; } figcaption { grid-column: 5/-1; grid-row: 1; align-self: start; }

Bunları nasıl kullandığınıza bağlı olarak, tasarımlarınıza ince sütunlar eklemek içeriği daha okunabilir hale getirebilir veya statik bir düzeni dinamik ve enerjik hissettiren bir düzene dönüştürebilir.

Sıska sütunlar, bir tekniği baskıdan öğrenmenin ve onu web için bir tasarımı geliştirmek için kullanmanın sadece bir örneğidir. Sıska sütunları denemek için can atıyordum ve hayal kırıklığına uğramadım.

Tasarımlarınıza ince bir sütun eklemek genellikle ilham verici bir karar olabilir. Size ekstra esneklik sağlar ve aksi takdirde statik bir düzeni enerjiyle dolu bir düzene dönüştürebilir.

Modüler Izgaralar Tasarlamak

Avaunt dergisi çok sayıda ilham verici sayfa düzeni içeriyor ama ben özellikle iki sayfaya odaklanmak istiyorum. Bu forma, bir tasarım içinde çok çeşitli içerik türlerine uygulanabilecek 'Soğuk Savaş Tasarımı' nesnelerini içerir.

İlk bakışta, modüler ızgaralar karmaşık görünebilir, ancak bunlarla çalışmak kolaydır. Bu kadar az web tasarımcısının bunları kullanması beni şaşırttı. Bunu değiştirmek istiyorum.

Modüler ızgaraları dikkatli kullandığınızda, tasarımlarınızı enerji ile doldurabilirler. Çok miktarda çeşitli içeriğe düzen getirmek için mükemmeldirler, ancak çok az içerik olduğunda görsel olarak çekici düzenler de oluşturabilirler.

Avaunt'tan ilham alan bu tasarım için modüler ızgaramı altı simetrik sütun ve dört eşit aralıklı satıra dayandırıyorum. Izgara modülleri, içeriğimin yerleşimini ve boyutunu tanımlar.

Soldaki tek sütunda büyük resimler ve çalışan metinler için boşluk alanları oluşturmak üzere birkaç modülü birbirine bağlarım. Sınır çizgileri, sayfanın görsel yapısını vurgulamaya yardımcı olur.

Bu tür bir düzen ilk başta karmaşık görünebilir, ancak gerçekte uygulanması oldukça basittir. İşaretlememi görsel düzene dayandırmak yerine, içeriğimi tanımlamak için en uygun öğeleri kullanarak başlıyorum. Geçmişte, modüler ızgaraları uygulamak için tablo öğelerini kullanırdım. Birkaç yıl ileri sar ve bölmeler bu tablo hücrelerinin yerini aldı. İnanılmaz bir şekilde, şimdi bu tasarımı gerçekleştirmek için sadece iki yapısal HTML öğesine ihtiyacım var; bir makale ve ardından sıralı bir liste:

 <body> <article>…</article> <ol>…</ol> </body>

Bu makale bir başlık, paragraflar ve tablo bilgileri için bir tablo içerir:

 <article> <p class="standfirst">…</p> <h1>…</h1> <p>…</p> <table>…</table> </article>

Mini planların modüler ızgarası, tasarımımın en karmaşık görsel yönüdür, ancak onu tanımlayan işaretleme basittir. Planlar tarih sırasına göredir, bu nedenle sıralı bir liste en uygun HTML öğesi gibi görünmektedir:

 <ol class="items"> <li> <h2>1969</h2> <img src="front.svg" alt=""> </li> <li> <h2>1969</h2> <img src="back.svg" alt=""> </li> </ol>

HTML'm yalnızca 2Kb ağırlığında ve altmış satırın altında. Erken doğrulama için harcanan biraz zaman olarak bu işaretlemeyi doğrulamak iyi bir fikirdir, daha sonra CSS hatalarını ayıklamak için çok daha fazla zaman kazandıracaktır. Ayrıca, içeriğimin stil sayfası olmadan erişilebilir olduğundan emin olmam gerektiğinden, stillendirilmemiş sayfayı bir tarayıcıda açıyorum.

Bir medya sorgusu kullanarak ızgara stillerini yalıtarak orta boy ekranlar için simetrik üç sütunlu bir düzen geliştirmeye başlıyorum:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

Makale ve sıralı liste, gövdenin tek doğrudan soyundan gelenlerdir, ancak ızgara öğeleri olarak yerleştirmek istediğim şey, içerdikleri şeydir. display:contents; içeriklerini ızgaramın herhangi bir yerine yerleştirmemi sağlamak için:

 article, ol { display: contents; }

Makalemdeki her öğe üç sütunu da kapsamalıdır, bu yüzden onları ilk satır (1) ile başlayan ve son satır (-1) ile biten satır numaralarını kullanarak yerleştiririm:

 .standfirst, section, table { grid-column: 1 / -1; }

Sıralı listemdeki öğeler, üç sütunlu ızgara ızgarasına eşit olarak yerleştirildi. Ancak tasarımım, bazı öğelerin iki sütuna ve birinin iki satıra yayılmasını gerektiriyor. n'inci tür seçiciler, işaretlememe sınıf eklemeye başvurmadan öğeleri hedeflemek için mükemmel araçlardır. Bunları, span anahtar sözcüğünü ve öğelerin yayılmasını istediğim sütun veya satır miktarını kullanıyorum:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(6), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-row: span 2; } 

Tasarımımı bir tarayıcıda önizlerken, bazı ızgara modülleri boş olduğu için tam olarak planlandığı gibi görünmediğini görebiliyorum. Varsayılan olarak, herhangi bir belgenin normal akışı, tıpkı batı dillerinde olduğu gibi, öğeleri soldan sağa ve yukarıdan aşağıya düzenler. Öğeler bir ızgaradaki kullanılabilir alana sığmadığında, CSS Izgarası yerleştirme algoritması boşlukları boş bırakır ve öğeleri bir sonraki satıra yerleştirir.

Izgara-konteynerime, bu durumda gövdeye grid-auto-flow özelliğini ve yoğun bir değer uygulayarak algoritmanın varsayılanını geçersiz kılabilirim:

 body { grid-auto-flow: dense; }

Satır, varsayılan ızgara otomatik akış değeridir, ancak sütun, sütun yoğun ve satır yoğun da seçebilirsiniz. Bir tarayıcı, herhangi bir boş modülü, belge akışında o alana sığabilecek bir sonraki öğeyle doldurduğundan, grid-auto-flow'u akıllıca kullanın. Bu davranış, erişilebilirlik üzerinde etkileri olabilecek kaynağı değiştirmeden görsel sırayı değiştirir.

Orta boy tasarımım şimdi tam da planladığım gibi görünüyor, bu yüzden şimdi onu daha büyük ekranlara uyarlamanın zamanı geldi. İlk önce makalemi bir kenar çubuğuna dönüştürmek için ızgara stillerinde yalnızca küçük değişiklikler yapmam gerekiyor - bu, düzenimin tüm yüksekliğini kaplıyor - ardından belirli liste öğelerini daha büyük altı sütunlu bir ızgaradaki modüllere yerleştirmem gerekiyor:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } article { grid-column: 1; grid-row: 1 / -1; } li:nth-of-type(4) { grid-column: 5 / span 2; } li:nth-of-type(5) { grid-column: 2 / span 2; } li:nth-of-type(6) { grid-column: 4 / span 2; grid-row: 2 / span 2; } li:nth-of-type(14) { grid-column: 5 / 7; } }

Izgara yerleşim çizgilerini takip etmek bazen zor olabilir, ancak neyse ki CSS Grid, modüler bir ızgara tasarımı gerçekleştirmek için birden fazla yol sunar. Izgara şablon alanlarını kullanmak alternatif bir yaklaşım ve bence yeterince dikkat çekmiyor.

Izgara-şablon-alanlarını kullanarak, önce her bir modülü ona bir isim vererek tanımlarım, sonra elemanları ya bir modüle ya da uzaysal bölgeler olarak bilinen birkaç bitişik modüle yerleştiririm. Bu işlem kulağa karmaşık gelebilir, ancak aslında CSS Grid'i kullanmanın en kolay ve en belirgin yollarından biridir.

Her öğeye, logo ve makaleden başlayarak ızgarama yerleştirmek için bir ızgara alanı değeri veriyorum:

 [src*="logo"] { grid-area: logo; } article { grid-area: article; }

Ardından, liste öğelerimin her birine bir ızgara alanı atadım. Basit bir i+n değeri seçtim, ancak sözcükleri ve hatta a, b, c veya d gibi harfleri içeren herhangi bir değeri seçebilirdim.

 li:nth-of-type(1) { grid-area: i1; } … li:nth-of-type(14) { grid-area: i14; }

Izgaramda altı açık sütun ve yüksekliği içlerindeki içeriğin yüksekliğiyle tanımlanan dört örtük satır var. Her noktanın (.) bir ızgara modülünü temsil ettiği grid-template-areas özelliğini kullanarak CSS'de ızgaramı çiziyorum:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: ". . . . ". . . . ".. .. ".. .. . ." . ." . ." . ."; }

Ardından, daha önce tanımladığım ızgara alanı değerlerini kullanarak öğeleri bu ızgaraya yerleştiririm. Değerleri birden çok bitişik modülde (sütunlarda veya satırlarda) tekrarlarsam, bu öğe genişleyerek bir boşluk alanı oluşturur. Nokta (.) bırakmak boş bir modül oluşturur:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: "article logo i1 i2 i3 i3" "article i4 i4 i5 i5 "article i7 i8 i5 i5 "article i10 i11 i12 i14 i14"; }

Şimdiye kadarki her örnekte, medya sorgusu kesme noktalarını kullanarak farklı ekran boyutları için düzen stillerini izole ettim. Bu teknik, duyarlı web tasarımının karmaşıklığıyla başa çıkmanın standart yolu haline geldi. Ancak, medya sorguları kullanmadan duyarlı modüler ızgaralar geliştirmek için bir teknik var. Bu teknik, bir tarayıcının içeriği yeniden akıtma yeteneğinden yararlanır.

Daha ileri gitmeden önce, tasarımımın sadece iki yapısal HTML öğesi gerektirdiğini hatırlamakta fayda var; içerik için bir sıralı liste ve her iki öğenin yan yana durabilmesi için yeterli genişlik olduğunda bir kenar çubuğuna dönüştürdüğüm bir makale. Yetersiz genişlik olduğunda, bu öğeler içerik sırasına göre dikey olarak istiflenir:

 <body> <article>…</article> <ol>…</ol> </body>

Sıralı liste, tasarımımın en önemli parçasını oluşturur ve her zaman bir görüntü alanı genişliğinin en az %60'ını kaplamalıdır. Bunun olmasını sağlamak için bir minimum genişlik bildirimi kullanıyorum:

 ol { min-width: 60%; }

Normalde genel sayfa düzeni için CSS Izgarasını ve esnek bileşenler için Flexbox'ı kullanmanızı önersem de, bu tasarımı uygulamak için bu tavsiyeyi tersine çeviriyorum.

Gövde öğesini bir esnek kapsayıcıya dönüştürüyorum, ardından flex-grow özelliğini 1 değerinde kullanarak makalemin tüm yatay alanı dolduracak şekilde büyümesini sağlıyorum:

 body { display: flex; } article { flex-grow: 1; }

İki öğe yan yana durduğunda, sıralı listemin tüm kullanılabilir alanı kapladığından emin olmak için, ona gülünç derecede yüksek bir esnek büyüme değeri 999 veriyorum:

 article { flex-grow: 999; }

Esnek temel kullanmak, makale için ideal bir başlangıç ​​genişliği sağlar. Esnek kabın sargısını saracak şekilde ayarlayarak, listenin minimum genişliğine ulaşıldığında iki öğenin yığılmasını ve yan yana durmaları için yetersiz alan olmasını sağlarım:

 body { flex-wrap: wrap; } article { flex-basis: 20rem; }

Herhangi bir sayıda modüle izin veren esnek bir modüler ızgara oluşturmak istiyorum. Sütun veya satır sayısını belirtmek yerine tekrar kullanmak, bir tarayıcının ihtiyaç duyduğu kadar modül oluşturmasını sağlar. otomatik doldurma, gerektiğinde içeriği kaydırarak mevcut tüm alanı doldurur. minmax, her modüle minimum ve maksimum genişlik verir, bu durumda 10rem ve 1fr:

 ol { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-column-gap: 2vw; }

Modüllerin boş kalmasını önlemek için, yoğun bir değerle grid-auto-flow'u tekrar kullanıyorum. Tarayıcının algoritması, boş modülleri doldurmak için içeriğimi yeniden akıtacak:

 ol { grid-auto-flow: dense; }

Daha önce olduğu gibi, bazı liste öğeleri iki sütuna ve bir satır iki satıra yayılır. Yine, belirli liste öğelerini hedeflemek için nth tipi seçiciler kullanıyorum, ardından span anahtar sözcüğüyle ızgara sütunu veya ızgara satırı ve ardından yaymak istediğim sütun veya satır sayısı:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-column: span 2; grid-row: span 2; }

Bu basit CSS, çoklu ortam sorgularına veya ayrı stil kümelerine ihtiyaç duymadan ortamına uyum sağlayan duyarlı bir tasarım oluşturur.

Grid ve Flexbox dahil olmak üzere modern CSS'yi kullanarak, tarayıcıların içeriği yeniden akıtma yeteneğine ve ayrıca minimum ve maksimum boyutlarda birkaç akıllı seçeneğe dayanan bu yaklaşım, gerçekten duyarlı bir web'in hedeflerine ulaşmaya en yakın olanıdır.

Seriden Devamını Oku

1. İlham Veren Tasarım Kararları: Avaunt Dergisi
2. İlham Veren Tasarım Kararları: Önemli Konular
3. İlham Veren Tasarım Kararları: Ernest Journal
4. İlham Veren Tasarım Kararları: Alexey Brodovitch
5. İlham Veren Tasarım Kararları: Bea Feitler
6. İlham Veren Tasarım Kararları: Neville Brody
7. İlham Veren Tasarım Kararları: Otto Storch
8. İlham Veren Tasarım Kararları: Herb Lubalin
9. İlham Veren Tasarım Kararları: Max Huber
10. İlham Veren Tasarım Kararları: Giovanni Pintori
11. İlham Veren Tasarım Kararları: Emmett McBain
12. İ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.