Tasarımlarımı kodlamaya olan ilgim, gerçekleşmesi için ne kadar hileli işlem yapılması gerektiğini anladığım anda kayboldu. Görünüşte basit konular birçok yönden çözülebilir. Yine de bazı tarayıcılarda çalışmamış olabilir. Her zaman beni meraklandıran bir şey, tasarım ve kod arasında neden bir ayrım olduğuydu. Neden zor şeylar daha basitleşir, ancak basit şeyler daha zor olur mu?
Tasarımcıların kod öğrenip öğrenmemeleri veya geliştiriciler tasarım öğrenmeli mi diye tartışmak yerine, web tasarımının nasıl geliştiğini ve kod ile tasarım arasındaki boşluğu nasıl köprü kurabileceğimiz konusunda bazı ortak zemin hazırlayalım.
Web Tasarımının Karanlık Çağları (1989)
[WPGP gif_id=”2738″ width=”600″]
Web tasarımının başlangıcı oldukça karanlıktı, zira ekranlar tam anlamıyla siyahtı ve orada sadece birkaç monokrom piksel yaşıyordu. Tasarım semboller ve tablolaştırma (Tab tuşu) ile yapılmıştır. Öyleyse, Grafik Kullanıcı Arayüzünün, Web’in sörf ana yoluydu – Vahşi Batı dönem tablolarının olduğu zamana hız verelim.
Tablolar – Başlangıç (1995)
[WPGP gif_id=”2739″ width=”600″]
Görüntüleri gösterebilecek tarayıcıların doğuşu, bildiğimiz şekliyle web tasarımının ilk adımıydı. Yapı bilgilerinde mevcut olan en yakın seçenek, zaten HTML’de bulunan tabloların konseptiydi. Dolayısıyla, David’in Siegel’in Creating Killer Sites adlı kitabı tarafından başlatılan şey, masaları tablolara koymak, statik hücreleri akışkan hücrelerle karıştırmanın akıllı yollarını bulmaktı. Tablonun asıl amacı sayıları yapılandırmak olduğu için tamamen doğru hissetmemesine rağmen, web’i oldukça uzun süredir tasarlamak için kullanılan yaygın yöntemdi. Diğer sorun, bu kırılgan yapıların sürdürülmesindeki zorluktu. Bu aynı zamanda dilimleme tasarımlarının popüler hale geldiği zamandır. Tasarımcılar süslü bir düzen ister, ancak tasarımcıları küçük parçalara ayırmak ve bu tasarımın çalışması için en iyi yolu bulmak için geliştiricilere kalmıştı. Öte yandan, tablolar, nesneleri dikey hizalama, piksel veya yüzde olarak tanımlama gibi bazı harika özelliklere sahipti. Temel yararı o zaman geri alabileceğimiz bir ızgaraya en yakın olanıydı. Aynı zamanda, pek çok geliştiricinin ön uç kodlamayı sevmeme kararı aldığı dönemdi.
JavaScript Kurtarmaya Geliyor (1995)
[WPGP gif_id=”2740″ width=”600″]
JavaScript HTML sınırlamaları için cevaptı. Örneğin, bir popup penceresine ihtiyacınız var, dinamik olarak bir şeylerin sırasını değiştirmek istiyor musunuz? Cevap JavaScript oldu. Bununla birlikte asıl problem burada JavaScript’in, web’i çalışmasını sağlayan ve ayrı ayrı yüklenmesi gereken kumaşın üstünde katmanlı olması. Çoğunlukla tembel bir geliştirici için kolay bir yama olarak kullanılır, ancak akıllıca kullanıldığında çok güçlüdür. Aynı özellik CSS ile sunulabiliyorsa günümüzde JavaScript’i kullanmamayı tercih ediyoruz. Bununla birlikte, JavaScript’in kendisi back-end (Node.js) gibi ön uç (jQuery) gibi güçlü kalır.
Özgürlüğün Altın Çağı – Flash (1996)
[WPGP gif_id=”2741″ width=”600″]
Mevcut web tasarımının sınırlamalarını çiğnemek için, daha önce hiç görülmemiş bir özgürlük vaad eden bir teknoloji doğdu. Tasarımcı, herhangi bir şekli, düzenleri, animasyonları, etkileşimleri tasarlayabilir, herhangi bir yazı tipini ve hepsini tek bir araçta kullanabilirdi – Flash ile. Sonuç, bir dosya olarak paketlenir ve daha sonra görüntülenmesi için tarayıcıya gönderilir. Yani, en son flash eklentisi olan bir kullanıcı ve yüklenene kadar beklemek için biraz boş zaman olduğu sürece, sihir gibi çalışırdı. Bu, sıçrama sayfaları, intro animasyonlar, her türlü interaktif efektler için altın çağdı. Maalesef çok açık ve arama dostu değildi ve kesinlikle çok fazla işlemci gücü tüketiyordu. Apple ilk iPhone’unda (2007) terk etmeye karar verdiğinde, Flash bozulmaya başladı. En azından web tasarımı için bu bir bitiş sayıldı.
CSS (1998)
[WPGP gif_id=”2742″ width=”600″]
Flash’la yaklaşık aynı zamanda teknik açıdan tasarımın yapılandırılmasına yönelik daha iyi bir yaklaşım ortaya çıktı – Basamaklı Stil Sayfaları (CSS). Buradaki temel kavram, içeriği sunudan ayırmaktır. Dolayısıyla görünüm ve biçimlendirme CSS’de tanımlanır, ancak içerik HTML’de tanımlanır. CSS’nin ilk sürümleri çok esnek değildi, ancak en büyük sorun tarayıcılar tarafından benimsenme oranıydı. Tarayıcılar onu tam olarak desteklemeye başlamadan önce bir kaç yıl sürdü ve çoğu zaman oldukça beceriksizdi. Bu, aynı zamanda bir tarayıcının en yeni özelliği bulundurduğu zamanı, bir başkasının da eksikliği, ki bu da bir geliştirici için bir kabustu. Açıkça görülmek gerekirse, CSS bir kodlama dili değil, daha çok bildirimsel bir dildi. Web tasarımcıları kodlamayı öğrenmeliler mi? Olabilir. CSS’nin nasıl çalıştığını anlamalılar mı? Kesinlikle!
Mobil Ayaklanma – Izgaralar ve Çerçeveler (2007)
[WPGP gif_id=”2743″ width=”600″]
Cep telefonlarında web’de gezinmek, kendi başına bir bütün zorluktu. Aygıtlar için farklı düzenlerin yanı sıra, tasarım küçük olsa da içerik tarafı sorunlarını ortaya çıkardı – ekranda yok edilmeli mi yoksa kaldırılsın mı? Bu küçücük ekranda güzel, yanıp sönen reklamları nereye koyabilirim? Bir sürü içerik yüklemek, internet paranızı oldukça hızlı yaktığından, hız da bir konuydu. Geliştirmenin ilk adımı sütun ızgaraları fikrindeydi. Birkaç tekrarlamadan sonra, 960 grid sistemi kazandı ve 12 sütun bölümü, tasarımcıların her gün kullandıkları bir şey haline geldi. Bir sonraki adım, formlar, gezinme, düğme gibi yaygın kullanılan öğeleri standartlaştırmak ve bunları kolay, tekrar kullanılabilir bir şekilde paketlemekti. Temel olarak, içindeki tüm kodu içeren bir görsel öğeler kütüphanesi hazırlamaktı. İşte bu konuda kazananlar Bootstrap ve Foundation, bir web sitesi ve bir uygulama arasındaki hattın solmakta olduğu ile ilgilidir. Olumsuz yönü, tasarımların çoğu kez aynı görünmesine ve tasarımcıların kodun nasıl çalıştığını bilmeden onlara erişememesidir.
Duyarlı Web Tasarımı (2010)
[WPGP gif_id=”2744″ width=”600″]
Ethan Marcotte adlı parlak bir adam, aynı içeriği kullanmayı teklif ederek mevcut yaklaşımı sorgulamaya karar verdi ancak tasarım için farklı düzenler kullandı ve Duyarlı web tasarımı terimini yarattı. Teknik olarak hala HTML ve CSS kullanıyoruz, bu yüzden daha çok kavramsal bir ilerleme. Yine de burada birçok yanlış anlama var. Bir tasarımcı için, yanıt veren, çoklu düzeni alay etmek anlamına gelir. Müşteri için, telefonda çalışır demektir. Bir geliştirici için, resimlerin sunulma şekli, indirme hızları, semantikler, mobil / masaüstü ilk ve benzeri. Buradaki temel yararlar içerik eşitliğidir, yani her yerde aynı web sitesinin çalıştığı anlamına gelir. Umarım en azından bunu kabul edebiliriz.
Düz Zamanlar (2010)
[WPGP gif_id=”2745″ width=”600″]
Daha fazla düzen tasarlamak zaman alıyor, bu yüzden şans eseri, içeriğe öncelik vererek fantezi gölge efektlerini ortadan kaldırıp tasarım köklerine geri dönerek süreci hızlandırmaya karar verdik. Güzel fotoğrafçılık, tipografi, keskin resimler ve düşünceli düzenler şimdi nasıl tasarım yaptığımızın birer örneği. Görsel öğeleri basitleştiren ya da Düz tasarım olarak da adlandırılan bu işlemin bir parçasıdır. Buradaki asıl yarar, genel olarak mesajın ve içeriğin hiyerarşisine kopyalama içine koyulan çok daha fazla düşünce olduğudur. Parlak düğmeler simgelerle değiştirilir ve vektör görüntüleri ve simge yazı tiplerini kullanmamıza izin verir. Web yazı tipleri güzel tipografi sağlar. Komik olan şey, web en başından beri buna yakın idi. Ancak, gençlik yılları bunun için de geçerlidir.
Parlak gelecek (2014)
[WPGP gif_id=”2746″ width=”600″]
Web tasarımının kutsal külü aslında görselleştirmek ve onu tarayıcıya getirmek olmuştur. Tasarımcıların birşeyleri ekranda gezdirdiklerini ve temiz bir kod çıktığını düşünün! Ve ben, o birşeylerin sırasını değiştirmek istemiyorum, tam esneklik ve kontrol sahibi olmak zorunda da değilim! Geliştiricilerin tarayıcı uyumluluğu hakkında endişelenmeleri gerekmediğini ve gerçek problem çözmeye odaklanabileceğini düşünün!
Teknik olarak, bu yönde hareket etmeyi destekleyen birkaç yeni kavram vardır. CSS’de vh, vw (görüntüleme yüksekliği ve genişliği) gibi yeni birimler, konumlandırma öğelerine çok daha fazla esneklik sağlar. Ayrıca, pek çok tasarımcıdan şaşkın olan problemi – CSS’de bir şeylerin dikey ortalanmasının neden böyle bir acı olduğunu çözeceğim. Flexbox, CSS’nin bir parçası olan güzel bir kavramdır. Düzen oluşturabilir ve kod yazmak yerine tek bir mülkle değiştirme olanağı sağlar. Ve nihayet web bileşenleri daha da büyük bir öneme sahip. Bir araya getirilen şey bir dizi öğedir, yani bir galeri, kayıt formu vb. Bu, öğelerin ayrı olarak yeniden kullanılabilen ve güncellenebilen yapı taşları haline geldiği daha kolay bir iş akışı sunar.
Webin geleceği ile ilgili düşünceleriniz neler?
