Web standartlarını nasıl “grok”larız?

Bir çok web tasarımcısı, ben dahil, web’e grafik sanatlarındaki geçmişle geliyor. Biz resimleri düşünürüz, kodları değil. Web için dizayna ilk başladığımızda, HTML ve CSS’i kaba bir şekilde kullandık. Kutuların doğasını ve mantığını düşüneceğimize, boşlukta nasıl durduklarıyla ilgilendik. Bir grafik tasarımcısı semantiklere ve web standartlarına ilk daldığında; görsel zihniyetini tam olarak değiştirmesi, işin üstesinden gelmesindeki en büyük engeldir. Görsel tasarımcıların web standartlarını gerçekten anlamaları demek, tasarım hakkında düşündüğükleri yolu değiştirmeleri demektir.

“Grok” kelimesi Robert A. Heinlein’in Zen-hippie bilim-kurgu eseri olan “Yabancı bir Memlekette, bir Yabancı”dan geliyor. “Tamamen anlamak” anlamına gelen Mars lugatinden bir fiil. Bir şeyi ‘grok’lamak; onu derin ve sezgisel olarak kavramayı başarmaktır. Web standartlarını gerçekten “çakmak” için, onu anlamından ve alternatif bir görsel dizayn sunum metodundan daha iyi anlamak şarttır.

Bir görsel tasarımcı, web standartlarını groklamak için, beyninin çalışma şeklini değiştirmeli ve üretken nöronlarına yeni yollar çizmeli. Web sayfanızın temellerini iyice planlamazsanız, asla görünüşüne yeterince hakim olamazsınız. Anlık düşünceler, anlık tasarımlara sebep olurlar ki, bu da zarar etmenize sebep olur. Yine yapısal düşünmenizin yararlarından biri de, içeriğinizin kolayca desteklenebilmesi ve ayak bağlarından kurtulabilmesidir.

Sözün özü, kaliteli bir web tasarımcısı olabilmek için, tasarım problemlerinizi çözmede yeni yollar bulmalı, aynı anda yazar, mühendis ve sanatçı olabilmelisiniz.

YAZAR GİBİ DÜŞÜNÜN

Yazarlar, düşüncelerini okuyucuların beyinlerine aktarabilmek için, kafalarındakileri yazı adı verilen araçla şekillendiren kişilerdir. Bir kelimenin anlamı, onlarca kat anlamla dokunmuştur. Kesin, yan anlamlı, durumsal, öznel… Bir yazar, mutlaka seçtiği kelimelerin farklı düzeylerdeki anlamlarına hakim olmalı ve düşüncesini tam olarak ifade edecek sözcükleri dağarcığından çıkarabilmelidir.

Semantik, dilin anlam bilimidir. Web standartları, bu sözcüğü bilgisayar işaretleme dilleri için edebiyattan ödünç aldı. HTML’deki her element tabii bir anlam ve işlev içerir. Sunacağımız içeriği bu HTML elementleri içine yerleştireceğimize göre, içeriğe uygun elementler seçmeye dikkat göstermeliyiz.

Web tasarımında semantik olayını kavramak için yazar gibi düşünün. Düşündüğünüz anlamı, içeriğinizin hedefini ve konseptinizin özünü ayırt edin. Bundan sonra, uygun yerlere gerekli elementleri ekleyin, yazı yazıyormuş gibi!

Örneğin, başlık, altındaki yazının ufak bir özeti mahiyetindedir. HTML bize, tam da bu tanıma uyan bir element sağlıyor: Heading. Bu sebeple başlığımızı Heading içinde yazmalıyız. İşte bu kadar! Başlığınızın genel yazı içerisindeki değerini düşünerek bir seviye seçmelisiniz. En önemli başlık, H1; biraz daha az önemli bir başlık h2 gibi. Nasıl göründüğünü, sayfada ne kadar çok yer kapladığını şimdilik düşünmeyin. Çünkü öyle yaparsanız sunuma yönelik düşünmüş olursunuz.

Eğer yazarlar yanlış kelimeler seçerlerse, okuyucuları tarafından anlaşılamazlar. Aynı şekilde, eğer tasarımınızdaki bir bölüm için yanlış bir HTML elementi kullanılmışsa, çok can sıkıcı olacaktır. Tablolar, sayfa tasarımına uygun değildir. Sadece kod fazlalığı oluşturdukları için değil; bilakis asıl görevleri sayfanızın tasarımını düzenlemek olmadığı için! Tasarımda tablo kullanmak, düşüncenizi ifadeden yoksun kelimeler kullanmaya benzer. İfadeniz belki anlaşılabilir ama gerekli ruhu veremezsiniz! Bunu tam olarak kavradığınızda, sayfa tasarımı için tablo kullanmanın seçenekler dahilinde olmadığını göreceksiniz.

Semantik işaretleme kullanabilmemiz için, içeriğimizi ve onu tasvir eden işaretleme elementlerini iyi bilmeliyiz. Güncel hayatımızda gerçek kelimeler okuruz, kelimeye benzer objelerden mamül resimleri incelemeyiz. Bunun için, paragraflar paragraf gibi, listeler liste ve tablolar da tablo gibi olmalıdır.

MÜHENDİS GİBİ DÜŞÜNÜN

Mühendisler; kesin kriterlerde olmak, kesin işlevler icra etmek ve ihtiyacı karşılamak zorunda olan bina ve aletler üretir. Dikiş yerleri birleşik olmak zorunda, duvarlar dik durmak zorunda, çarklar birleşik ve dönüyor olmak zorundadır. Bir mühendis, bir problem bulup etkili bir çözüm planlayacak, sonra kullanım tarzını ifade edecek şekilde duruma el koymak için parça ve materyelleri seçecek. Sonuçları dikkate alacak, potansiyel zorlukları bekleyecek ve feci hataları önlemek için adımlar atacaktır.

Bir web belgesi hazırladığınız zaman, mühendis gibi düşünün. Yazarınız, kesin bir anlam ifade eden bir öge seçerken, mühendisiniz o ögenin mekaniğiniyle, bulunduğu belgenin yapısal bütünlüğüyle ilgilenir. İşaretleme içeriğin anlamını arttırır, yine aynı zamanda onu bu artışı kullanmak için kuvvetlendirir, ona destekleyici yapı verir ve böylece gerçek bir iş yapılabilir.

HTML ögelerini, herbirinin kendi yapım-gücüne sahip olan, bir araya getirilebilen, daha iyi fonksiyonel bir alet yapmak için birleşen, bir bütünün parçaları olarak düşünün. Her tag için bir yer vardır. Her tag kendi yerinde olmalı, bu parçalar düzgün bir şekilde birleşmelidir. Standartlan, web belgelerini bir araya getirmek için bir talimattır. Standartlara bağlı kal, işaretlemeni ve CSS’ni onaylat ve her şey göçmeden büyük hataları düzelt.

İşaretlemeyi, içeriğinizi destekleyen bir framework gibi düşünün. Her parçanın ne iş yaptığını ve parçaların birlikte nasıl çalışacaklarının farkında olun. Dökümanınız tamamen oluştuğunda, üzerine dekoratif bir kaplama ekleyebilir ve göze güzel görünmesini sağlayabilirsiniz. Aman dikkat: İskelete dokunmadan! CSS bu noktada iskelete zarar vermeden dış görünüşü değiştirebilmenizi sağlar.

Mühendis gibi düşünebilirseniz, web dosyanızı tamamıyla çalışan bir makine haline getirebilirsiniz.

SANATÇI GİBİ DÜŞÜNÜN

Sanatçılar çevrelerindeki dünyanın güzelliğini görürler ve diğerlerine de bu güzelliği aktarmak isterler. Bir websitesinin tasarımı, bilgi aktarımının ilgi çekici olarak yapılabilmesi ve sayfanın işlev görebilmesi açısından hayatidir.

Resimlerle düşünmek, bizlere doğuştan gelen bir şeydir. Bunu kazanmak için uğraşmamız gerekmez. Fakat web, görsellikten çok okumanın işe yaradığı bir alandır. Sadece bakarak web’den yararlanamayız, onu okur ve kullanırız da.

Web tasarımı yaptığınız zaman öncelikle bir yazar ve mühendis gibi düşünün. Bu aşamaları bitirdikten sonra sanatçı gibi düşünmenize sıra gelsin. Renklerle, tipografiyle, ögelerin pozisyonuyla ve görsellikle hedef kitlenizin dikkatini çekmeyi başarın. Ama bunun için çalışırken, sisteminizin kodlamasına dokunmayın. Sunum alanıyla içerik ve iskelet alanlarını birbirinden ayırarak sitenin “içi”yle uğraşan kişilerin, yazarların veya tasarımcının sahasına girmesine engel olabilirsiniz.

Eğer CSS’in tasarlama gücünüzü öldürdüğünü iddia edenlerdenseniz, CSS hakkında daha fazla şey öğrenmelisiniz. CSS’le tasarlamak, alıştığınız şekilde tasarlamak kadar kolaydır. Hatta azıcık daha kolaydır, çünkü CSS’in araçları bu iş için özel hazırlanmıştır. CSS öğrenin, nasıl çalıştığını gözlemleyin, kitap okuyun ve soru sorun. Hepsinden de ötesi, deneyim kazanın. Yeterince deneyim kazandığınızda, istediğiniz etkiyi gösterebilmek için hangi araç setini kullanmanız gerektiğini kolayca anlayabilecek hale geleceksiniz.

Aynı zamanda nelerin CSS ile yapılamayacağını da öğrenecek ve daha henüz mühendislik aşamasındayken önleminizi alabileceksiniz. Her ortamın kendi sınırları vardır ve o ortamla uğraşan insanlar bu sınırları kabullenmişlerdir. Zaten bir ortamı kullanmak da başlı başına üretkenlik önüne çekilen bir sınırdır. Sanatçı olarak düşünmek, bu görsel problemlerin üstesinden gelebilecek yolları bulmanızı sağlar.

ZİHNİYETLERİ BİRLEŞTİRMEK

Bu üç disiplin -yazarlık, mühendislik ve sanatçılık- birbirlerinden çok farklı değiller. Her biri problemlerini üretken yollarla çözmek ister ve her biri saldırı için biraz farklı bir açı düşünür, hedef aynıdır. Kişiliğinizdeki bu üç yönü yetiştirmek, her biriyle ayrı ayrı ilgilenmekle olur. Bütün bu yönlerde birer birer düşünebildiğiniz zaman, kendinizi üçünde de eş zamanlı düşünüyor bulacaksınız. Yazar, mühendislik ve sanatçılık Voltron tarzı iç içe geçip birleşecek… “Tasarımcı”yı geliştirmek için…

Sunumsal düşünmekten, üretimsel düşünmeye kadar mantıksal bir değişim yapmak, sizin üretken yönteminizde bazı değişimleri tetikleyecektir. Yazar gibi düşünebilmek için, ilk küçük işinizi karalamadan önce memnuniyetinizden biraz taviz verin. Logodan tescil notuna kadar sayfada gözükecek her şeyi listeleyin ve birbiriyle ilişkili olanları anlamlı bölümler halinde gruplandırın. İçeriğinizi anlamaya çalışın, onu baştan sona okumanız gerekse bile. Bağlandığı fikirleri anlarsanız, çizerken daha hazır olursunuz.

Bu bilgi parçalarını görsel olarak hoş görünen bir tasarıma dizmek istiyorsanız, bir mühendis gibi düşünün ve işaretlemenin ögelerinin düzenini ve sunumlarını etkilemek için kullanacağınız CSS özelliklerini planlayın. Yuvarlak köşeler ve gölgeler Photoshop’ta rahatça yapılabilir, fakat onların temiz bir işaretleme ve CSS ile nasıl yapılabildiğini bilmiyorsanız, tekrar düşünmeniz gerek. Yapacağınız şeyi, tecrübeyi planlıyormuş gibi planlayın. Böylece web sayfasının resmini gerçekten çalışan bir web sayfasına dörüştürebilmek için daha hazır olacaksınız.

Websitesi yapmakta kullandığımız dillerle daha yakın, bir aile gibi olursanız, işte o zaman yazarınız üretmekte özgür olur. Mühendisiniz kutularla, yazarınızın anlamlı kelimelerini bozmadan yuvarlak köşeler yapmayı bildiği zaman, sanatçınız ihtiyaç duyulduğunda telaşlanmayıp onları kaydırmadan yansıtabilir. Çizimde başarılı işler çıkaracak ve onları anlamsal dayanıklılıkla nasıl uygulayacağınızı ve dolduracağınızı içgüdünüzle bileceksiniz. Bu üç zihniyet içten bir şekilde birlik oluşturacak, açık, güçlü ve güzel işler sunabilmek için.

Websitelerini yapmakta kullandığımız dillerle “kanka” olduğuzda, iç tasarımcınız isteğini üretebilecek.

Web standartlarına uyabilmek için beyninizi şartlandırdığınızda onların ruhunu dünya görüşünüze yansıtacaksınız. Hala bir tasarımcı gibi, kodları görmeden resimle ilgilenebileceksiniz ama resimleriniz çok daha pratik olacak. Sayfa tasarımlarınızı dekore edilmiş kutuların estetik sıralanması halinden çıkaracak ve onu anlamlı parçalardan oluşan şiirsel bir teknik haline getireceksiniz.

Eski küflenmiş web deneyimlerinizi düşündüğünüzde, semantik açıdan zengin işaretleme ve zarif CSS nefes almak kadar kolay gelecek. Eski sunum metodları beceriksiz ve tatsız hatta kaba gelecek. Bir yıl önce inşa ettiğiniz bir web sayfasının kaynak kodlarına bakacak ve “Bu saçma kodlamayı ben mi yapmıştım yahu?” diyerek utancınızdan yerin dibine geçeceksiniz.

İçerik ve kodlamanın en az tasarım kadar önemli olduğunu anladığınızda, daha iyi bir tasarımcı haline geleceksiniz. Web standartlarını grok’layacaksınız, bu işin geri dönüşü yok!

‘Translated with the permission of A List Apart Magazine and the author.’