Web tasarımcılar ve geliştiriciler için 50 tavsiye
İnternet teknolojisi gezegenimizdeki her şeyden daha hızlı gelişiyor.
Neden mi?
Nedeni şu: Bu sektöre gönül vermiş profesyoneller çok fazla bilgi paylaşıyorlar. Başka hiç bir sektörde meslektaşlar arasında bu denli (hatta hiç) bilgi paylaşımı bulunmamaktadır. Bu durum internet teknolojisini, dolayısıyla dünyayı geliştiriyor. Bu felsefeyle…
İlk web sayfamı yayına açtığım 2005 yılı göz önüne alındığında söz konusu sektörde 2017 itibariyle 12 yıllık tecrübeye sahip olduğumu söylesem abartılı olmaz. O gün bu gündür web ve internet teknolojileri üzerine zevkle kafa yormaktayım.
Her ne kadar, yazılımı sıfırdan geliştirme taraftarı olsam da WordPress’ten Joomla’ya birçok Content Management System (CMS) ile de çalıştım.
Bu süreçlerden edindiğim tecrübelerimi “Web Tasarımcılar ve Geliştiriciler İçin 50 Tavsiye” başlığı altında kısa kısa maddelerle aktarmaya karar vermiş bulunuyorum.
Umarım faydalı olur.
Bu içerik web tasarım ve geliştirme süreçlerinin her aşamasıyla ilgili tavsiyeler barındırmaktadır…
TASARIM
1 Araştırma
Hitap ettiğiniz kitleyi araştırın. Genel yaş grubu, gelir grubu ve cinsiyet gibi verilerle söz konusu kitlenin bir web sayfasından muhtemel beklentilerini ortaya koyun ve çıkan sonuca paralel strateji geliştirin.
2 Basitlik
“Less is more” Bu terim Türkçe’ye “Az her zaman çoktur” şeklinde çevrilmektedir. Bu kavramın ışığında sayfanızı her daim karmaşadan uzak tutun. Önemli olanların dışında hiç bir şey koymayın. Sade sayfalar son kullanıcıyı yormaz, böylece ziyaret süresi uzar.
3 Renk Kullanımı
Bu çok zor bir konudur. Dolayısıyla fanteziye girmeden genel kuralların içinde kalarak hareket edin. Öncelikle çok fazla renk kullanmayın. En fazla üç renk kullanmanız tavsiye edilir.
Her ne kadar sektöre göre çok çeşitli renkler kullanılıyor olsa da doğada sık görülen renklerden şaşmayın. İnsanlar aşina olduğu ortamlarda daha rahat hisseder. Ana renkler ve ara renkler çoğunlukla işinizi görür.
(Prof. Dr. Ünal Aydın MD: 2016)
4 Altın oran (Golden ratio)
Sayfanızdaki objelerin en - boy oranlarını ayarlarken çok uğraşmayın. Hemen altın oran kuralını uygulayın. Uzun kenarı kısa olan kenara böldüğünüzde sonuç 1.618 çıkmalıdır, yaklaşık değerler de kabul edilir. Ayrıca altın oran kuralıyla ilgili detaylı araştırma yapmanızı da tavsiye ediyorum, hayat kurtarabiliyor.
5 Okunabilirlik
Yazıları normalden (16px) daha küçük puntoyla yerleştirilmiş metinler zor okunur. Şunu not edin; hiç kimse sizin sitenizdeki yazıyı okumak zorunda değildir. Hemen sayfanızdan ayrılır. Bu nedenle font-size’ı 100% veya 16px olarak ayarlayın. Metnin içindeki başlık gibi farklı olması gereken her türlü işaret veya yazıyı metinden belirgin bir şekilde ayırın. Ayrıca satır aralığını 1.6 olarak ayarlamak okunabilirliği güçlendirecektir.
6 Siyah-Beyaz tasarlayın
Evet, sayfanızı tasarlarken öncelikle siyah beyaz tasarlayın, sonradan renklendirin. Böylece fikir geliştirme aşamasında renklerle uğraşmamış olursunuz.
7 Sütunlar işi kolaylaştırır
Dergi, gazete gibi yayıncılığa yönelik diğer tasarım süreçlerinde de olduğu gibi web tasarlarken de sütunlar kullanın. Hangi bölümün kaç sütundan oluşacağına önceden karar vermek işinizi kolaylaştırır. Sütunlar sayesinde sayfanızdaki objeler organize görünür.
8 Trendleri takip edin
Trendleri takip edin, başka bir deyişle modaya uyun. Aksi takdirde, uzaydan gelmiş gibi görünen veya gelecekteki bir zaman diliminden gelmiş gibi görünen ve hatta 90’lı yıllardan kalma gibi görünen bir tasarım ortaya çıkarırsınız haberiniz bile olmaz. ;)
9 Esinlenmekten korkmayın
Kullanılan teknikleri araştırın. Güzel sayfaları bire bir araklamak yerine, sanatçının o sayfayı tasarlarken neler düşündüğünü hissetmeye çalışın. Bu husus zamanla tasarım yeteneğinizi geliştirecektir.
10 Nasıl olmuş?
Yaptığınız tasarımla ilgili bu soruyu işin ehli olmayan kişilere sormayın. Ben de bu hususlarda yorum yapabiliyorum demek adına, olur olmadık konuşacak kafanızı bozacaktır. Bununla beraber; işin ehli kişilerden fikir almak tabii ki önemlidir.
11 Tasarım programı: Adobe Experinence Desigin CC
Tasarım sektörünün lider programı Adobe Illustrator’dür. Uzun yıllardır, diğer tasarımlar gibi web tasarımı da Illusttrator veya photoshop kullanılarak yapılmaktaydı. Fakat web geliştirme süreci kesinlikle prototipe ihtiyaç duyulan bir süreçtir. Yani Illustratorle sayfaları teker teker tasarlamak, neticeye ulaşmak için en zor yöntemdir. Bir süredir, Sketchapp dijital tasarım sürecini çok kolay hale getiriyor olsa da yalnızca MacOS platformunda çalışıyor olması mutsuzluk vericiydi. Fakat Adobe bu açığı gördü ve Experinence Desigin adında bir program geliştirdi. Program, 2016 yılının son çeyreğinde windows için de yayınlandı. Yalnızca web tasarım sürecinde kullanılmak üzere Adobe ailesine katılan XD, heyecan verici.
KULLANICI DENEYİMİ (User Experience)
UX nedir ve nasıl sağlanır?
Bu tekniğe göre, son kullanıcı sayfayı kullanmaya başlamadan önce tasarım ekibi kullanmaya başlar. Örneğin, tasarım ekibi test sürecinde bir butonun küçük olduğunu deneyimleyerek revizyon sağlamasına UX denir. Başka bir deyişle, kullanıcıların bir ürünü veya hizmeti kullanırken sergilediği tutumdur diyebiliriz.
12 Dört saniye
Son kullanıcı sayfanıza geldiğinde dört saniyeniz var. Bu sürede, sayfadaki mesajın anlaşılması gerekiyor. Mesajın algılanması uzarsa, kullanıcıyı kaybedebilirsiniz.
13 Responsive
Günümüzde, mobil kullanım desktop kullanımını geçmiş durumda. Bu nedenle web sayfanız kesinlikle mobil arayüze sahip olmalı.
14 Otomatik tamamlama açık
Formların tarayıcı tarafından otomatik tamamlanmasına izin verin. Bu kullanıcının işini kolaylaştırır. Fazladan uğraşmak zorunda kalmaz. Hatta o yazarken yanındaki çıktı çıktı der iş biter. :)
Dikkat: TC Kimlik No, Kredi Kartı No gib input alanlarında autocomplete=”off”
15 Göz yormayın
Renkler, fontlar ve bütün organizasyon göz yormamalıdır.
16 Formlar kısa olmalı
İnteraktiviteyi destekleyen formlar önemlidir. Fakat tahammül seviyesini aşmamalı, giriş alanları mümkün olduğunca az olmalıdır.
17 Formlarda yardım gerekebilir
Geniş formlar bulunan sayfalarda kullanıcı yardıma ihtiyaç duyabilir. Bu nedenle form sayfasının kenarına iletişim bilgileri iliştirilmelidir.
18 Menüler
Kullanıcıyı istediği sayfaya ulaştıran en kritik bölüm, menüler bölümüdür. Menüler, sayfadan keskin hatlarla ayrılmalıdır. Mobil için, sağ tarafa yakın karışıklık yaşanmadan kolayca tıklanılabilir ölçülerde olmalıdır.
19 Dağınıklıktan kurtulun
Sayfanın derli toplu görünmesi kullanıcının aradığını kolay bulmasına yardım eder. Bu nedenle test edin, dağınıklık varsa ondan kurtulun.
20 Dış linkler
Dış linkler target=”_blank” kullanılarak yeni pencerede açtırılmalıdır.
İÇERİK
21 Ana sayfa
Ana sayfa, ziyaretçilerin eyleme geçmek için kullandıkları geçiş kapısıdır. Sade bilgilendirmeler içermeli, kullanıcılar kolayca iç sayfalara çekilebilmelidir.
22 Çok fazla sayfadan kaçının
Web sitenizde gerekli olmayan sayfalara asla yer vermeyin. Yer verilen sayfalar da çok uzun olmasın.
23 Yazım yanlışları
Yazım yanlışları sayfanızın bütün enerjisini alır götürür. Büyük bir ciddiyetsizlik göstergesidir.
Sayfanın kendine hayrı yok hissi oluşturur. Bu hususa kesinlikle dikkat edin.
24 Görsel kullanımı
Tam bu noktada, medya sektöründe “Fotoğraf Seçiciliği” adında bir meslek olduğunu hatırlatmak isterim. Yani bu başlık çok önemli. Bazı görsellerin anlattığını sayfalarca yazarak ifade edemeyebiliriz. Bununla beraber; birinci şart yüksek çözünürlük, ikinci şart fotoğrafta netlik, üçüncü şart fotoğrafın duygusudur. Evet, duygusu. Fotoğraf bir şeyler anlatmalıdır. Ayrıca bu üç şart da olmazsa olmazdır.
25 Video kullanımı
Ürünlerinizi veya hizmetlerinizi tanıtırken muhakkak kısa videoların avantajını kullanın.
26 Yazılı içerik
Paragraflarınız ve cümleleriniz kısa, mesajınız net olmalıdır. Uzun yazılar her daim sıkıcıdır.
27 Güncellemeler
Sayfanızı güncel tutun. Bu hayat belirtisidir. Sayfanıza ilk girişinden bir ay sonra tekrar gelen bir kullanıcı düşünün; bu kullanıcı sayfanızda herhangi bir değişiklik görmezse terk edilmiş bir kasabaya geldim hissine kapılabilir. Web sayfaları kesinlikle düzenli olarak güncellenmelidir.
28 Blog
Web sayfalarını güncel tutmanın en kolay yolu siteye bir blog dahil etmektir. Bu sayede konuyla alakalı içerikler üreterek internetteki yüzünüzü her daim taze tutabilirsiniz.
29 Sosyal medya
İçeriğinizi tanıtmak ve marka bilinirliği oluşturmak için sosyal medya çok güçlü bir araç. Sosyal medya kullanıcılarıyla iyi ilişkiler kurmayı önemseyin.
30 SEO
Sayfanızı tasarlarken ve içeriğinizi oluştururken Arama Motoru Optimizasyonu (SEO) tekniklerini göz önünde bulundurun. Bu durum arama motorlarında üst sıralara çıkmanıza yardım eder. Bununla beraber arama motorları için uygun bir web sayfası, kullanıcılar için de uygundur denilebilir. (SEO konusunu ayrı bir makalede genişletmek istiyorum)
GELİŞTİRME
Bazen 10 kelimelik bir cümlenin ifade ettiği anlama 6 kelimelik bir cümleyle de ulaşabilirsiniz. Yazılımın asıl mantığı budur, kodlar olabildiğince kısa olmalı ve tekrar etmemelidir. Mümkünse minify edilmelidir. Temel mantık budur.
31 Temiz ve organize
Kod yazmanın heyecanı, yaşanan sorunları çözme aşamaları ve geliştirme sürecine bir müddet ara verme durumu siz farkına varmadan kodlarınızın karmaşıklaşmasına yol açabiliyor. Bu durum en hafif sonucu sayfanızın yavaş çalışmasıdır. Kötü sonuç ise her şey yolunda derken sayfanızın “too buggy” olmasıdır. Buglar genelde kod karmaşasından kaynaklanıyor. Fix bugs sürecini zorlaştıran yine karmaşa.
Kod aralarına muhakkak, açıklama satırları ekleyin. Kod bölümleri organize ve kesinlikle birbirinden ayrı olsun.
32 Güvenlik
Küçük büyük demeden, gerekli güvenlik önlemleri alınmalıdır. Bazı alınmazsa olmaz güvenlik önlemeri: DB izole edilmelidir, SQL injection tehlikesi hafife alınmamalıdır, dosya izinleri (CHMOD) yazma ve değiştirme engellenmelidir, kritik klasörlere erişim yasaklanmalıdır, tarayıcıdan URL girerek iç sayfalara erişim engellenmelidir.
33 Özel efektler ( Yanar döner banner :) )
Söz konusu efektler sadece kullanıcının dikkatini dağıtır. Ben kaçınmayı tercih ediyorum. Kullanmıyorum.
34 Tasarımdan sonra yazılım
Yazılım sürecinin sağlıklı bir biçimde başlaması ve devam edebilmesi için, sayfayla ilgili düşünülmesi gereken her şeyin tasarım sürecinde düşünülmüş ve tasarlanmış olması gerekir. Yazılım süreci başladıktan sonra tekrar tasarıma geri dönmek, hele proje büyükse işleri çok karıştırabilir.
35 Hız
Sayfanın hızlı açılması, kullanıcılar için olduğu kadar arama motorları için de çok önemlidir. Hız testleri için Google Speed’i kullanabilirsiniz. Bu uygulama size eksikleri rapor eder. Başlıca gereksinimler şöyle sıralanabilir; JavaScript dosyası body kapanış tagından hemen önce çağırılmalı, en fazla bir CSS dosyası olmalı, kodlar tekrar tekrar yazılmamalı, görsellerin MB’ı düşürülmelidir.
36 En yeni teknikler
Teknoloji sürekli gelişmektedir. Bununla beraber, iki yıl önce yapılmış bir sayfanın alt yapısı eskiyebilmektedir. Yenilikler takip edilmeli, sayfa alt yapısı güncellenmelidir.
37 Hep CSS
Üşengeçlik yapmayın bütün tasarımı CSS’le çıkarın. Bu durum sayfanızın, hızlı ve arama motoru dostu olmasına yardım eder.
38 Parallax scrolling
Parallax, bazen hoş efektler çıkabiliyor. Yine de yoğun kullanımdan kaçının. Profesyonelce kullanılmazsa sizi gülünç duruma düşürebilir.
39 Projeye özel kodlama
Kodları siz yazın, güvenmediğiniz üçüncü parti pluginlerden uzak durun. Bu durum yaşanacak sorunları kolay çözmenize yardım eder. Başkası tarafından yazılmış satırlarca kodun hatasını bulmak, ölümcül vakit kaybıdır.
40 Atılım
Bilmediğiniz konulardan korkmayın. Proje geliştirirken öğrenirsiniz. Bu noktada yeni şeyler denemekten korkmayın.
41 404 sayfası
404 sayfasını muhakkak yapın, ama boş olmasın. Zaten boşa düşmüş kullanıcıyı başka bir sayfaya çekmek için hala bir şansınız var.
42 CMS Sorunludur
CMS’ler adamı küfürbaz edebilir. Her şeyi sıfırdan yapmak da zor gelebilir. Eee!! Neyse kullanıyorsanız güncel tutun. Güncelse virüsler pek bulaşamıyor.
BUNLARI YAPMAYIN
43 Flash
Flashla yapabileceğiniz her şey, HTML5, CSS3 ve JavaScriptle yapılabilir. Falsh kullanan kaldıysa bunu yapmasın.
44 GİF
GİF kullanmak hızlı mesajlar vermenize yardım edebilir. Bununla beraber, her yerde kullanılmamalıdır. Hareket yorar.
45 Büyük harfler
Cümlelerin tamamını büyük harfle yazmak yanlıştır. “Hele böök yazak da çarpıcı olsun” diyen arkadaşa burdan selam olsun.
46 Slider
Ziyaretçinizi kaçırabilir. Dikkatli kullanın. Kullanıyoruz ama bana sorarsanız sliderin bir yararı da yok.
47 Auto play
Sayfaya girer girmez otomatik oynamaya başlayan video, müzik vs. İğrenç. Ha Youtube gibi zaten sayfanın birincil önceliği hemen başlaması gereken video ise muhakkak otomatik oynamalı.
48 Pop up
Birçok kişi pop uplardan nefret eder.
49 Reklamlar
Bir sayfada en fazla 3 reklam kullanın. Mümkünse reklamlar sayfa renkleriyle uyumlu olsun.
50 Alt çizgi
Sadece linklerin altını çizebilirsiniz. Normal yazılarda alt çizgi kullanmayın.
Yazacaklarım bu kadar, başka bir blog yazısında görüşmek üzere…
Bu içeriği yorumlarla zenginleştirebileceğinizi unutmayın..
“Bir mum diğerini tutuşturmakla ışığından bir şey kaybetmez” Hz. Mevlana
