Layout 101: Dijital ve Fiziksel Temel Bilgiler
Sayfa düzeni, grafik tasarımın bir sayfadaki görsel öğelerin düzenlenmesiyle ilgilenen parçasıdır. Genellikle belirli iletişim hedeflerine ulaşmak için kompozisyonun organizasyonel ilkelerini içerir. -O’Connor, Z (2014). Elements and principles of design: Tools for digital imagery, art and design.
Okulda yaptığımız pafta tasarımlarından IOS tasarımlarına, CSS’ten baskı tasarımına kadar tasarımın bir parçası olan Layoutlar ve Gridlerden bahsedeceğim ve bunu yaparken farklı alanlarla ilişki kurmaya ve benzetmeler yapmaya çalışacağım. Yazıma başlarken Caner Aras’a bu konuda bana ilham kaynağı olması ve Yeni Ürün Geliştirme Rotası El Rehberi’ni tasarlamam konusunda yardımcı olduğu için ayrıca teşekkür ederim.
Her Şeyin Başı: Yazı!
Yazının bulunması ile birlikte insanların El Yazmaları -geleneksel olarak elle yazılan herhangi bir belge- üretmeleriyle başlayan bir süreç. Her elementin elle yazıldığı için yazarın/çizerin sayfanın layout’unu direkt olarak elliyle sayfaya geçirmesiyle başladı. Daha sonra demir baskı/bronz baskı gibi baskı yöntemlerinin üretilmesiyle birlikte belli componentlerin tekrar tekrar yapılması yerine modüler şekilde baskı alınmasına geçildi. Bu sayede tek bir kalıp ile çok fazla şekillerde sayfalar yapılabilirken üretim maliyeti ve baskı hızında inanılmaz bir artış kaydedildi.
Fakat günümüzde elimizle yazıp çizmek yerine tablet, bilgisayarımız ve hatta toplantılarda telefonlarımızla not almaktayız. PS/AI gibi tool’ların güçlenmesi ile elimizle yapacağımız bir New York Times kapağını bilgisayar aracılığı ile çok hızlı bir şekilde yapabiliyoruz. Artık 5 dakikada websitesi yapabiliyorken bizi diğer websitelerinden nasıl ayırabiliriz. İşte asıl soru burda geliyor: insan nerde fark yaratır?
İnsanı diğer canlılardan ayıran en önemli özelliklerinden olan yaratıcılık ve eleştirisel zekası bu sorunun cevabı olacağını düşünüyorum. Tasarımcı çok başarılı tasarımlar yapabilir, çok yaratıcı ve yetenekli de olabilir. Ama o kişi ardında bir sistem bırakmaz sayfa yapılarından ürün dillerine kadar temel elementleri arkasından gelen kişiye bırakmazsa tarihin tozlu sayfalarında kalmaya devam edecektir.
Temel Elementlerimiz
- Sayfa kenar boşluklarının boyutu
- Görüntülerin ve şekillerin boyutu ve konumu
- Sütun(columbs) ve olukların(gutters) sayısına ve boyutuna karar verme (sütunlar arasındaki boşluklar)
- Boşlukların anlamlandırılması
- Bir görüntünün üzerine metin yerleştirme, kaçış ve runaround veya görüntüyü sayfa kenar boşluğu üzerinde bleeding gibi özel efektlerin kullanılması
- Vurgu için renkli baskı veya spot renk kullanımı
Sayfa kenar boşluklarının boyutu
Fiziksel baskılarda baskı makinesinin kaçma payı gibi fiziksel kısıtlamalarımız olduğu gibi aynı şekilde dijital ürünlerde de boşlukları kullanmamız gereken noktalar bulunmakta. Cihazların dokunma noktaları kısıtlamaları ve elin ergonomisini göz önünde bulundurmamız gerekiyor.
Bu sayfa yapısını tasarlarken kırmızı çizgiler taşma boşlukları mor olarak gördüğünüz alanlar ise yazı ve resimler için güvenli bölgelerimdi. Mavi çizgiler ise Caner ile belirlediğimiz bütün kitabın yapısında kullandığımız hizalama çizgilerimiz.
Proje derslerinde hocalarımızın bizden istediği kurumsal kimliğe uygun pafta yapılarını da unutmamız gerekiyor. Üstten 2,5 santim alttan 1,5 santim gibi (Şu anda tam olarak hatırlayamadım.) sayfa yapımızı dijital ortamda hazırlayıp içeriğini onda göre doldurmaktayız.
Yukarıdaki görsel ise iPhone X/XS/11 Pro ürünleri için güvenli alanlarımız. Üstteki alan tarih/batarya gibi göstergelerin bulunduğu ve dokunma yapamadığımız alanı göstermekte. O kısma herhangi bir fonksiyon içeren buton kullanmamız pek mantıklı olmayacaktır. Aşağıdaki 30px’lik alan iste home indicator’un bulunduğu alan yani kullanıcının App’ten çıkacağı alan olduğu için kaçınmamız noktalardan bir tanesi.
Yanlarda bulunan ve 8,16,32 px gibi devam eden alanlar ise responsive olan yazılımcı için kolaylık sağlayacağınız alanı temsil eder. React ve Flutter gibi frameworklerde yazılımcı tasarımınızı geçirirken bu gridlere ya da colomb’lara göre koda döker, bu kısımla ilgili bir yazı da hazırlamaktayım.
Görüntülerin ve şekillerin boyutu ve konumu
Sayfamızın ne olduğunu belirledikten sonra (bir mobil ekrandan basılı bir dergi kapağına kadar) nasıl bir kompozisyon çalışacağımızı, hangi elementlerin nerede konumlandırılacağı gibi kararleri verdiğim kısım bu kısımdır.
Bazı noktalardan wireframing’e çok benzemektedir. Elle/tabletle ya da bir çizim aracıyla beraber hazırladığımız bu taslak hem zaman maliyetsiz ve kolay risk alıp fikirlerimizi çalışabileceğimiz bir taslaktır.
Sütun(columbs) ve olukların(gutters) sayısına ve boyutuna karar verme (sütunlar arasındaki boşluklar)
Gutters sütunlar arasındaki boşluklardır. İçeriğin ayrılmasına yardımcı olurlar. Sütunlar ise içeriğin bulunduğu sayfanın ya da ekranın eşit alanlara bölünmüş halidir. Material.io’dan aldığım görsellere bakarak aklınızda fikir oluşturabilirsiniz.
Boşlukların anlamlandırılması
Beyaz boşluk veya negatif boşluk, sayfamızın öğeleri arasındaki boşluktur. Bununla birlikte, kelimenin tam anlamıyla beyaz veya boş olması gerekmez. Ana elemanlara odaklanabilmeleri için kullanıcılar için bilişsel ağırlığı olmayan bir arka plandır. Bilişsel diyince biraz korkutucu olabiliyor fakat çoğu zaman bu arka planı düşünmüyoruz bile, bilinç olarak yapıyoruz.
Daha fazla boş alan uygulamak ve gereksiz öğeleri azaltmak tasarladığınız sayfanın görsel çekiciliğini büyük ölçüde artırabilir. Karakterler/content arasındaki mesafeyi korumak içeriğin okunmasını kolaylaştırır. Kullanıcıların sayfa içeriğini daha hızlı ve daha kolay okumalarına yardımcı olur.
Bir görüntünün üzerine metin yerleştirme, kaçış ve runaround veya görüntüyü sayfa kenar boşluğu üzerinde bleeding gibi özel efektlerin kullanılması
Bleeding diye adlandırdığımız alan sayfamızın taşma payıdır. Başka bir deyişle, kanama, kesilecek alandır. Taşma payı, belgenin yan tarafında, yazıcıya kağıdın hareketini ve tasarım tutarsızlıklarını açıklamak için az miktarda alan sağlayan kısımdır.
Runaround ise sayfa yapısında kullandığınız elementlere göre fontlarınız ve tipografinizi ayarladığınız haline denir. Tam olarak anlatamadım fakat aşağıdaki görseli görünce hemen anlayacaksınız.
Vurgu için renkli baskı veya spot renk kullanımı
Basit siyah beyaz veya tek renkli baskının aksine renkli baskı, bir görüntünün veya metnin renkli olarak çoğaltılmasıdır. Herhangi bir doğal sahne veya renkli fotoğraf optik ve fizyolojik olarak kırmızı, yeşil ve mavi olmak üzere üç ana renge ayrılabilir, kabaca eşit miktarları beyaz algısına neden olur ve farklı oranları diğerlerinin görsel duyumlarına neden olur.
Vurgulandırma ya da öne çıkartmak istediğiniz sloganu vurucu bir renkle bağladığınız zaman akılda kalıcılığını unutmamakta fayda var.
BONUS: Hadi Time kapağı tasarla!
Lisede eski bir kitapçıda çalışırken bulduğum twen dergisini bu yazımda kullanmak benim için çok ilginç bir deneyim oldu. Derginin diğer sayfalarını görmek isterseniz benimle iletişime geçerseniz seve seve yardımcı olurum.
Yazımı okuduğunuz için teşekkür ederim, mutlu haftalar dilerim.
