Video: 960 Grid Sistemi Eğitimi - Videmy - Online Video Eğitim 2024
Web sayfalarını tasarlamanın meydan okumasına yeni başlayacak bir açı. neden web sayfalarının 960 px genişliğiyle. Fakat onlar mı? Hayır, hepsini değil. Ancak web tasarımcılarının sayfaları standart bir 960 px genişliğinde: fonksiyon ve form haline getirmek için neden çekici nedenler var.
Her şeyden önce, çok, çok geniş bir görüş alanı aralığı 960 piksel bir sayfa görüntüleyebilir. Hem tam boyutlu bir monitör hem de bir iPhone 960 piksel bir sayfa nasıl gösterebilir? Bu sorunun iki bölümlü bir cevabı var:
-
960 piksel bir sayfa tam boyutlu monitörün tüm genişliğini doldurmayacak - fakat bu iyi bir şey. Büyük ekranlı bir monitörün tüm genişliğini dolduran bir web sayfası, sindirim için çok zor olurdu. Metin satırları okumak için çok uzun olurdu. Ziyaretçilerin birleşik bir bütün olarak emmeleri için sayfa içeriği fazla uzatılabilir.
-
Mobil aygıtlar, tam boyutlu monitörlerden daha inç başına daha fazla piksel içeriyor. Dolayısıyla Android'ler, iPhone'lar ve diğer küçük cihazlar bile 960 px sayfa görüntüleyebilir.
960 ızgarasını kullanmanın diğer cazibesi "960" kolayca bölünebilir olmasıdır. Bu, tasarımınızı çizmenize yardımcı olması için sayfanızı yönetilebilir parçalardan - sütunlardan - parçalara ayırabileceğiniz anlamına gelir. Örneğin, her biri 320 px genişliğinde üç sütunlu bir tasarım temelinde bir tasarım oluşturduğunuzu varsayalım.
Şekilde sadece böyle bir tasarım gösteriliyor: Adobe Illustrator'u bir tasarım aracı olarak kullanarak, aynı genişlikte üç sütuna ayrılmış bir 960 tablo. Bu resimde, bir başlık (beyaz) ekranın üst kısmını doldurur ve üç sütun başlık altına yerleştirilir.
Veya 960 grid sekiz sütuna (120 px geniş) veya 16 sütuna (60 px genişliğe) kolayca ayrılabilir. Bu gayrimenkul dökümü, bir tasarımcı (siz de olabilir!) Tarafından reklamlar, afişler ve diğer içerikler için uygun boyutta resim yaratmayı kolaylaştırıyor.
Aslında, tek sorun teknik konular olsaydı, web tasarımcıları 960 piksten biraz daha standart web sayfası boyutlarına sahip olabilirdi ve kaplar yine de mobil cihazlara sığabilirdi. Mobil dahil olmak üzere çoğu görünüm penceresi en az 1024 piksel genişlik arzetmektedir - ancak 960 kullanmanın değeri, iş akışında bu sayının "bölünebilirliğini" kullanma kabiliyetindedir.
Asıl nokta, tasarımcıların - Adobe Illustrator, Adobe Photoshop veya bir grafik sayfası sayfası gibi - programları kullandıklarında, 16 eşit büyüklükte sütun (60 piksel) oluşturabilmesidir.
Ve tasarımlarını bu 16 sütunlu ızgaranın üzerine oluşturarak sanat eserini çevirip, sayfayı HTML ve CSS'ye 960 piksel genişlikteki bir kap kullanarak çeviren bir web tasarımcıya ve bunlarla eşleşen birden çok sütuna çeviriyorlar. orijinal resimde.
