Yeni piyasaya çıkan 15″ MacBook Pro’lar bir çoğunuzun bildiği üzere retina display teknolojisi ile 2,800 piksel genişlik ve 1,800 piksel yükselik ölçülerini taşımakta. Peki bu mevcut ekrana göre aşırı yüksek olan çözünürlük tasarımcılar için dert mi olacak dersiniz?
Bu arada bu yılın son çeyreğinde ya da önümüzdeki yıl piyasaya çıkması beklenen yeni nesil iMac’lerin ise ekran çözünürlüğünün 5120 x 2880 piksel (monster retina display) olması bekleniyor. (Burada teknik bir not çoğu gibi bende Apple’ın ekranları kendi geliştirdiğini düşünüyordum, ancak ilginç bir şekilde bu panellerin üreticisinin LG olduğunu öğrendim.)
Konumuza dönecek olursak, eve retina display teknolojisi görsel olarak kullanıcılara eşsiz bir deneyim sunmakta. İnanılmaz renkler, ve netlik. Ancak tasarımcıların, özellikle de bu ekranlar üzerinde çalışacak tarayıcılar için ara yüz tasarlayan profesyonellerin nasıl bir yol izleyeceği şimdiden kafaları karıştırıyor.
Gerçi bu konuda henüz netleşmiş, kesin bir bilgi ya da tecrübe yok. Ancak görüştüğüm bazı meslektaşlarımın benimle aynı fikirleri paylaştıklarını gördüm.
Öncelikle teknik açıdan şu anda kullanılan HD 1920 x 1080 piksel çözünürlükte bir inch başına düşen piksel sayısı panele göre 160 ila 180-190 PPI olarak değişiyor.Oysa 2880 x 1800 piksel çözünürlüğe sahip 15.4″ bir MacBook Pro retina display’de bu rakam 220,5 PPI.
Aslında bu durumu dvd ile blu-ray arasındaki fark gibi düşünmek de mümkün.
Peki bu çözünürlükler için nasıl ara yüzler tasarlayacağız? Bu konu aslında biraz muamma olmakla birlikte ilk akla gelen çözümler, çözünürlüğe göre hareket eden elementler kullanmak, boyutlandırılabilir ikonlar, % değerlerine bağlı font büyüklükleri ve hepsinden önemlisi responsive yani duyarlı tasarımlara geçmek. Böylece çözünürlükten bağımsız olarak her ortamda kusursuz (ya da eksiksiz diyelim) tasarımlar ortaya çıkarmak mümkün.
Kişisel olarak fikrim, zaten miyadını dolduran gif görsellerden sonra yavaş yavaş jpg formatına da veda edeceğimiz yönünde. Çünkü ne kadar iyi çalışılmış bir görsel de olsa bu çözünürlüklerde jpg formatlı imajlar deyim yerindeyse çamur gibi görünmeye mahkum. Bunların yerine optimize edilmiş PNG formatında imajlar kusursuz görsel kalitesi sunmak üzere bir adım öne geçecekler gibi duruyor.
Tipografi konusunda ise boyutlar haricinde bir sorun gözükmüyor. Zira çözünürlükler yükseldikçe fontlar ekranda daha iyi render ediliyor ve böylece nefis denebilecek kalitede yazılar görmek mümkün oluyor.
Mac kullanan tasarımcılar yeni nesil iMac’lerine kavuştuklarında tasarımlarını ekrana nasıl porsiyonlayacaklarını da merak ediyorum. 5120 x 2880 piksel çözünürlükte çalışmak pek kolay olmasa gerek. Bu ekranda, photoshop’ta açtığınız 980 piksel eninde 1000 piksel yükseliğinde bir tasarım alanı, tamı tamına aşağıdaki şekilde gözüküyor olacak. Sonuç itibariyle sürekli tasarımı yakınlaştırarak çalışmak yorucu olabilir.
Kodlamada durum ne olacak peki?
Web/Mobile App Developer Bilal Çınarlı sizler için durumu değerlendirdi.
Responsive olarak hazırladığımız arayüzlerin bir de hem responsive hem de retina versiyonlarını hazırlamamız gerekecek. Bu da bazı durumlarda yapılacak kodlamayı 2 katına çıkartmasa bile, ciddi miktarda arttıracak. Örneğin bir css sprite hazırlarken, aynı sprite’ın 2 katı büyüklüğünde bir versiyonunu daha hazırlayıp, bunu css içerisinde ister media query ile ister javascript yöntemleri ile, retina display için hazırlanan kod bloklarında tanımlamak gerekecek. Resimler dışında retina displayin yazılımsal tarafa getireceği ciddi bir yük olmayacağı görüşündeyim. Düzgün ve planlı hazırlanan web arayüzlerinde CSS içerisinde yapılacak ufak numaralar ile retina ve normal ekranlar için uygun düzenlemeler kolayca yapılabilecektir.
Asıl sorunu sayfa boyutlarında yaşacağız. Websitesi için photoshoptan resimleri keserken, 2-3kb daha az boyut olsun diye 60 kalite, 70 kalitede kullandığımız jpeg resimlerini yine aynı kalitede kaydetmeye devam edebileceğiz. Ama pixel bazlı olarak resimlerin boyutlarını iki katına çıkartacağımız için, daha büyük boyutlu resimler kullanmak zorunda kalacağız. Böyle durumda en büyük endişe görünürlükten çok, sayfaların yüklenme süresi olacak. Dosya boyutları artacağı için, tarayıcıların sayfayı göstermek için yükleceği boyut otomatik olarak artmış olacak. Masa üstü kullanıcılarında bu durum ciddi sıkıntılar oluşturmayabilir ama, mobil kullanıcılar için, her sitenin daha yavaş yüklenmesi, internet kotalarının daha çabuk tükenmesi anlamına gelecek. Yazılım açısından da bizi yeni tarzda optimizasyon, cacheleme, CDN kullanma gibi farklı yöntemler aramaya itecek.
Bilal Çınarlı
Web/Mobile App Developer
reachme@bcinarli.com
bcinarli.com
twitter.com/bcinarli
Genel olarak retina display’ler tam olarak yaygınlaştıktan sonra, trend ve tasarım yöntemleri kendi yolunu belirleyecek. Şimdilik yeni nesil MacBook Pro’lar ve yeni iPad için boğuşmaya devam!
Bu arada unutmadan özellikle fotoğrafçılar, büyük boy baskı işleri işleri ile uğraşan tasarımcılar ve kimi ios uygulamaları tasarlayan profesyoneller için bu teknolojinin büyük bir nimet olacağı kesin.
Konu hakkında siz de yorumlarınızı paylaşabilirsiniz.
Yorumlar (18)
Canerdiyor ki:
18 Temmuz 2012 9:14 amApple’dan nefret etmem için bir neden daha.
Serkan Erdoğmuşdiyor ki:
18 Temmuz 2012 9:17 amSonuç olarak Apple yine standartları belirleyerek çıtayı yükseltmeye devam ediyor.
Sinenessdiyor ki:
18 Temmuz 2012 9:38 amApple explorer’a da bir el atsa keşke.Uğraştırıyor bizi.
yunusdiyor ki:
18 Temmuz 2012 9:47 am320×240 çözünürlükte counter-strike oynadığım günleri hatırladım :)
Ibrahimdiyor ki:
18 Temmuz 2012 10:28 amAslında birbirini etkileyen o kadar çok şey var ki. Yazıda da bahsetmişsiniz, ben de HTML5 tarafında svg gibi vektörel çözümlerin daha fazla öne çıkacağını düşünüyorum. Bunlara ek olarak da, tasarım yaparken kullanılan icon / görsel gibi materyallerin bulunması sıkıntı yaratacaktır. Onlar da gerek Apple ailesinin gerekse diğer üreticilerin ürün çıkarmasına bağlı olarak çoğalacak diye düşünüyorum.
Her ne kadar retina display bi’ Macbook Pro’da herhangi bir web sitesini inceleme imkanım olmasa da acaba şu anki haliyle / responsive tasarıma geçiş ile yukarıdaki bu süreç yavaş yavaş atlatılır, sonrasında da uygun çözümler ile tasarım açısından rahatlarız diye düşünüyorum.
Ahmet Faruk Karadiyor ki:
18 Temmuz 2012 10:46 amTarayıcı farklılıkları yetmiyormuş gibi şimdi de çözünürlük farklılıkları bayağı bi başımızı ağrıtacak gibi. Bu yöndeki gelişmeler hep bizim aleyhimize işliyor sanıyorum. :)
Harundiyor ki:
20 Temmuz 2012 7:52 am%90’lık bir kesim bu teknolojiyi yok sayacaktır.
akifdiyor ki:
25 Temmuz 2012 1:02 amgüzel bir paylaşım tşkler.
atakandiyor ki:
25 Temmuz 2012 11:04 pmne belli bir kesim bu teknolojıyı yok saysınki bencede guzel bır paylasım
Can Yavuzdiyor ki:
2 Ağustos 2012 11:40 pmGerçekten çok faydalı bir yazı olmuş Teşekkürler.
Fakat sanırsam küçük bir düzeltme gerekiyor: Retina ekran üreticileri Samsung, Sharp ve LG’dir :)
Sercan YENİYURTdiyor ki:
15 Ağustos 2012 10:55 amMerhaba, doğrusu beni en çok korkutan 5120 x 2880 pixel ekran boyutu, ben bunun 6/1’inde bile web arayüzü çizerken zorlanıyorum küçük geldiğinden dolayı birde o büyüklükte bir ekran boyutu söz konusu olduğunda ne olacak çok merak ediyorum….
Serdar TEPEYURTdiyor ki:
7 Eylül 2012 11:55 amMerhaba,
Retina Displaylerin 2880 x 1800 çözünürlük desteklediği doğru olsa da pratikte çok da kullanılabilecek bir şey değil. Denedim gördüm, aleti mikroskopla kullanmak lazım :-) Zaten Apple bile default olarak 1440 x 900 çözünürlükle geliyor. Lakin görüntü 2 kat çözünürlüğe sıkıştırılmış olduğu için çok kaliteli gözüküyor. Böyle bir durumda tek sıkıntı resimlerin çözünürlükleri. Yazıldığı üzere resimlerin 2 katı büyük versiyonları kaydedilir ve duruma göre kullanılırsa sıkıntı olmuyor.
fuatdiyor ki:
13 Nisan 2013 8:36 amPhotoshopta yazıların kenarlarını bir türlü düzeltemedim smooth, sharp hepsini deniyorum bir türlü düzeltemedim kenarlarını yumuşatamıyorum. Sizler nasıl yapıyorsunuz tasarımlarınızı?
Enes Aktasdiyor ki:
17 Nisan 2013 10:13 amBen saçma buldum bunu ne yani ayriyeten birde mac için mi tasarlayacağız? 2 kat büyük resimler diyorsunuz dediğiniz gibi mobil kullanıcılar bunu hiç sevmeyecekler apple’n buna bir çözüm bulması gerekir bence bununla ilgili biraz daha araştırma yapmam gerekiyor sanırım.
Web Tasarıma Başlamak-2 | Enes Aktasdiyor ki:
22 Nisan 2013 3:20 pm[…] 2-Retina Display Olayı […]
Ozandiyor ki:
11 Mayıs 2013 5:09 amweb sitesine haber başlığına koyduğum 530×300 boyutunda jpeg fotoğraf güncel retina ekranlı IPAD’de standart 1080p monitörden daha keskin görünüyor. Fotoğraf 1080p monitörde göründüğü kadar büyük görünüyor ancak retina ekranda piksel bazında kapladığı alan 530×300’den daha büyük bir değerde sahip. Tahminen 1024×600 piksellik bir alanda görüntüleniyor ancak görüntünde en ufak bir bulanık ya da kalite kaybı olmuyor. Apple bu teknolojiyi retina ekran’lı diğer modellerine de koyarsa pikseller üzerine oturan windows’da tasarlanan bir web sitesi 14 – 15k monitörlü MacBook Pro’da da aynı görünecektir. Eğer 15.6 inç 15k monitöre sahip bir bilgisayara örn. win 8 kurulursa 0.067451 dotpitch nedeniyle pencere ve yazıları okumak için büyüteç dahi yeterli olmayacaktır. Umarım kısa süre içinde retina ekranlar için optimize edilmiş bir windows sürümlerini de görme şansımız olur. 15.6 inç 1080p monitöre sahip bir laptopta yazıları okumak oldukça zor. Yüzde 150 oranında büyütmek çözüm gibi duruyor ancak sadece windows yazılımları bu büyütmeyi destekliyor.
briket makinasıdiyor ki:
25 Haziran 2013 1:22 pmbilgi için teşekkürler, iyi çalışmalar
Ersindiyor ki:
28 Aralık 2015 1:09 pmGuzel demissin Fakat 5k imacler icin atladigin birSey var. Ekranin 5000 px gorunmuyor. Ayarlardan manuel ayarlarsan o baska. Sana verdigi 2k. Gordugun ise pixel Sayisini Artirmak icin 5k yani photoshop ile bir belge ACtiginizda ekran dendigi gibi ufak kalmiyor. Bence once arastirmalİsiniz. Basarilar.