HD Tasarım Hakkında Bilmeniz Gereken Her Şey
Henüz not almadıysanız, web yüksek tanımlı oluyor. Görüntülerden arka planlara, kullanıcı arayüzü öğelerine kadar, yüksek çözünürlük yeni normaldir.
Bazı retina ve yüksek çözünürlüklü ekranlarla başladı, ancak daha hızlı bağlantılara erişim de bu fenomeni vurguladı ve herhangi bir cihazdan HD web sitelerine daha fazla erişim sağladı. Yüksek çözünürlükte düşünüyor ve tasarlıyor musunuz? İşte dikkate almanız gereken birkaç nokta.
HD nedir, Gerçekten mi?
HD için en yaygın ipucu retina ekranıdır. Apple cihazları tarafından popüler hale getirilen terim, yüksek çözünürlüklü ekranlarla eş anlamlı hale geldi. Bu, cihazlar için oldukça spesifik bazı teknolojilerle ilgilidir.
Designmodo için Paula Borowska açıklamaları anlamanın en kolay yollarından birine sahip:
- Cihaz pikseli, görüntülenen en küçük fiziksel birimdir.
- Piksel yoğunluğu, belirli bir alanda görüntülenen piksel sayısıdır.
- Çözünürlük, görüntülenebilir alanın tüm genişliği veya yüksekliği boyunca piksel sayısıdır.
- Ppi veya dpi olarak bilinen inç başına piksel sayısı, ekranın fiziksel genişliğini görüntülenen yatay piksel sayısına böldüğünüzde elde ettiğiniz piksel sayısını ifade eder.
- Yüksek DPI, inç başına 200 piksel veya daha büyük bir ekran yoğunluğudur.
Bugün cep telefonlarından tabletlere ve dizüstü bilgisayarlara kadar satın aldığınız cihazların çoğunun muhtemelen yüksek tanımlı bir ekranı var. (Ve gerçek şu ki, HD ekranı olmayan bir cihazınız olsa bile, yüksek çözünürlüklü bir web sitesine sahip olmak zarar görmez.)
Görüntüler
İlk olarak yüksek çözünürlük hakkında düşünmek isteyebileceğiniz yer, görüntüler söz konusu olduğunda. Her görüntüyü 72 ppi'de 600 piksel genişlikte kaydetme günleri sona erdi. Bu sadece bugünün ekranlarında kesilmeyecek.
HD için temel standart 200 ppi'dir. Bu, daha önce kaydetmiş olabileceğinizin iki katından fazla. Hızlı bir şekilde 1920 x 1080 ile büyüyen ekranların büyüdüğünü de ekleyin. W3Schools.com'a göre, en yaygın ekranlar 1024 x 768 piksel veya daha yüksek, kullanıcıların yüzde 30'undan fazlası yüksek tanımlı bir ekranda çalışıyor.
Aynı şey küçük ekranlar için de geçerlidir. İPhone 6 (401 ppi) ve Samsung Galaxy S5 (577 ppi) gibi popüler cihazlar da HD özelliğine sahiptir.
Yani görüntüler söz konusu olduğunda, keskin olmalılar. Bulanık veya pikselli görüntülerle kaçamazsınız. Eski "standart çözünürlükte" kaydetmek, tasarımınızın düz görünmesini sağlarken, yüksek çözünürlüklü görüntüler daha parlak görünür. Bu tür görüntüleri kullanmanın dezavantajı hızdır; daha yüksek kalite daha uzun yükleme sürelerine eşittir. Spesifikasyonlara olabildiğince yakın kaydedin ve görüntü dosyalarını aşırı yüklemeyin.
Eğlence hilesi: Yükleme sürelerinden endişe ediyorsanız, bulanık görüntü trendini avantajınıza göre düşünün. Okunacak daha az veri var ve biraz daha küçük kaydedebilir ve yine de diğer küçük yüksek çözünürlüklü öğelerden istenen keskinliği elde edebilirsiniz.
Video
Video 2016'nın olmazsa olmaz görsel trendi. Görünüşe göre her yerde web sitesi ana sayfalarında hareketli aksiyon var. Tıpkı görüntülerde olduğu gibi, yüksek kalitede olması gerekir.
Çoğu tasarımcı ve web sitesi için bu, hıçkırıkların yüklenmesini önlemek için oldukça kısa bir döngü videosuna bağlı kalmak anlamına gelir. Diğerleri ise daha uzun videolar seçiyor ve yükleme animasyonu ile kullanıcıları beklemekten uzaklaştırıyor. Yüksek kaliteli video, yüksek kaliteli kayıt, sıkıştırma ve kaydetme gerektirir.
Videonun nasıl oynatılacağı ve site tasarımında nasıl görüneceği konusunda da çok planlama gerektirir. Örneğin, tam ekran bir kahraman videosunun ekrana sığması için yatay olarak çekilmesi gerekir. Kullanım kolaylığı için, basit video editörleri kareleri en boy oranına göre ayarlamanıza yardımcı olacaktır; geniş ekran hissi için 16: 9'u veya daha kare görünüm için 4: 3'ü seçin.
Eğlenceli hile: Yüksek drama efekti için “hareketsiz video” kullanın. İşte fikir: Arka planda sadece küçük bir hareketle çoğunlukla statik olan bir şeyi filme alın. Tasarımınızı azaltmadan harika bir kullanıcı deneyimi yaşayacaksınız.
Çizimler ve Arka Planlar
Çizimler ve arka planlar söz konusu olduğunda, HD burada da önemlidir. Her detayın (veya eksikliğinin) yüksek çözünürlüklü alanda görünür olduğunu unutmayın, bu nedenle tasarımın her parçasının genel estetiğe katkıda bulunduğundan emin olmak istersiniz.
Çizimler veya arka planlar söz konusu olduğunda, ayrıntılar önemlidir. Pratik olarak piksel mükemmelliği olan, tasarıma uyan ve yukarı veya aşağı ölçeklendiğinde parçalanmayan bir tasarım hazırlamaya odaklanın. Bunu yapmanın en kolay yolu basitliğe odaklanmaktır.
Karmaşık bir örnek veya dokulu bir arka plan oluşturmak için kolayca çekilebilirken, basit muhtemelen daha iyi bir seçenektir. Daha fazla ilgi eklemek istiyorsanız, küçük bir animasyonlu öğeyi tasarımın bir parçası haline getirmeyi veya normalde kullanabileceğinizden daha koyu renk seçenekleriyle renklendirmeyi düşünün.
Ve sonra teknik bileşen var: Her şeyin gerçekten amaçlandığı gibi ve tam HD potansiyeline göre ölçeklenmesi için ölçeklenebilir bir görüntü formatı kullanmanız gerekir.
Eğlenceli hile: Uzun bir döngüde arka plana bir animasyon ipucu ekleyin. Hızlı göz atma ziyaretçileri kaçırabilir, ancak küçük ödül, tekrarlanan kullanıcıları ve uzun bir süre boyunca etrafta kalanları memnun edecektir.
Simgeler ve Öğeler
Web sitenizdeki tüm simgeler ve kullanıcı arayüzü öğeleri söz konusu olduğunda, bilmeniz gereken altı harf vardır: SVG ve CSS. Ve tüm bu unsurlar muhtemelen bu iki tipten biri olarak sınıflandırılacaktır.
SVG veya ölçeklenebilir vektör grafikleri, web için temel vektördür. Şekilleri, simgeleri ve diğer birçok kullanıcı arabirimi öğesini kaydetmek için SVG'yi kullanabilirsiniz. Görüntüler modern tarayıcılar tarafından okunur - orada çalışmayan bazı eski olanlar vardır (Internet Explorer'da çalışan birkaç kişiyle konuşuyoruz) - metin olarak ve HTML ile aynı şekilde işliyoruz. Eğer SVG'nin cesur cesaretine girmek istiyorsanız, Scott Murray blogunda oldukça büyük bir astar içeriyor.
CSS öğeleri saf kod ve tasarım ile ölçek ve stil. (Muhtemelen Photoshop'ta düğmeler çizmeniz ve bunları sitenize yapıştırmanız gerekmez.) W3Schools.com, CSS öğelerinin nasıl oluşturulacağı ve kullanılacağı hakkında temel bir öğreticiye sahiptir.
Hem SVG hem de CSS ile ilgili şeyler: Öğeler sitenizle birlikte taşınır. Duyarlı bir çerçevede ihtiyacınız olan şey budur. Hiçbir şey yüksek çözünürlüklü web sitesi tasarımınızı bir grup pikselli düğmeden daha hızlı öldürmez.
Eğlence hilesi: Bazı şık SVG veya CSS öğelerini bulmak için tekerleği yeniden icat etmek zorunda değilsiniz. Tympanus veya CSS Button Generator'dan bu SVG düğmelerine bakın.
Sonuç
Yüksek tanımlı web sitenizi, bunu yapmayan herkesten ayıracaktır. Kullanıcılar, ekranlarından her birinde televizyonlardan bilgisayarlara ve telefonlara bir HD deneyimi beklemeye başlıyor. Web sitenizin bu beklentileri karşılaması gerekiyor.
İyi haber şu ki, oraya varma yolunda küçük değişiklikler yapabilirsiniz. Piksel gösterdiğinizden ve her görselin kesintisiz ve yüksek kalitede olduğundan emin olmak için resimlerinize, videolarınıza ve diğer kullanıcı arayüzü öğelerine dikkat edin.
