web tasarımını tanımlama

Öncelikle web tasarımın ne olduğunu tanımlayalım. Web tasarımı, bir web sitesinin görsel görünümünü ve hissini tasarlama sürecidir. Bir web tasarımcısı olarak, web sitesinin kullanıcı deneyimini, tel kafes düzenlerini planlamaya, içeriği ve görüntüleri bir hikaye anlatacak şekilde düzenlemeye ve son kullanıcı arayüzünü tasarlamaya odaklanacaksınız. 

Web tasarımı vs web geliştirme

Bir müşterinin iş hedefini göz önünde bulunduran bir web tasarımcısı, fikirler ve yaratıcı çözümler bulur ve bir web sitesi için nihai kullanıcı arabirimi maketini tasarlar. Bir web geliştiricisi, kullanıcı arabirimi maketini alır ve onu İnternet üzerinde çalışan bir web sayfasına çevirmek için HTML ve CSS kodunu kullanır. Esasen, web sitesinin çalışmasını sağlarlar. 

Serbest çalışan bir web tasarımcısıysanız, hizmetlerinize web geliştirmeyi eklemeyi seçebilirsiniz. Weblow gibi bir araç, web sitelerinizi tasarlamayı ve geliştirmeyi kolaylaştırır, böylece bir müşteriye verdiğiniz değer için daha fazla ücret talep edebilirsiniz. 

Web tasarımının evrimi

Web tasarımı, zaman içinde teknolojik gelişmelerle şekillendi ve değişti. JavaScript’ten düz tasarıma kadar, web tasarımının gelişimine büyük ölçüde katkıda bulunan birkaç temel fikri burada bulabilirsiniz.

1995–JavaScript’e Giriş

Yalnızca HTML ile bir web sitesi tasarlama söz konusu olduğunda sınırlamalar vardır. JavaScript ile web daha dinamik hale geldi. Esasen, statik bir web sayfasını kullanıcının etkileşimde bulunabileceği bir sayfaya dönüştürdü. Kullanılan Javascript örnekleri, bir açılır pencere, favori sosyal akışınızdaki bir otomatik yenileme özelliği veya arama çubuğuna bir soru yazarken Google’ın otomatik olarak anahtar kelimeler önermesidir.

1996–Flash çıkışları

Adobe Flash, web tasarımcılarına video, ses ve animasyon ekleyerek daha dinamik web siteleri oluşturma özgürlüğü verdi. Bu multimedya öğeleri bir dosya halinde paketlendi ve görüntülenmesi için bir tarayıcıya gönderildi. Ne yazık ki, kullanıcının bu animasyonları görebilmesi için doğru flash sürümünün kurulu olması gerekiyordu. Apple, 2007’de ilk iPhone’larına flaş eklememeye karar verdiğinde, Flash’ın web tasarımındaki popülaritesi azalmaya başladı.

1998–CSS, HTML’ye katıldı

Flaşın kullanıma girmesinden kısa bir süre sonra, Basamaklı Stil Sayfaları (CSS) biçiminde tasarımı yapılandırmanın daha iyi bir yolu geldi. CSS ile yazı tipi boyutlarını ve renklerini değiştirebilir, arka plan renkleri, resimler ve daha fazlasını ekleyebilirsiniz. HTML’yi içerik, CSS’yi sunum olarak düşünün. Birlikte, web üzerinde gerçekten özelleştirilebilir bir deneyim yaratırlar.

2000–İşletmeleri çevrimiçi hale getirme

Dünyanın önde gelen çevrimiçi ödeme şirketi olan Paypal, 2000 yılında fırlamaya başladı. Daha fazla işletme çevrimiçi olmaya başladıkça, güvenli işlemlere ihtiyaç duyuldu. Amazon’dan eBay ve Etsy’ye, yavaş yavaş çevrimiçi alışveriş fikri daha yaygın hale geldi.

2007 — Mobilin doğuşu

İlk iPhone’un piyasaya sürülmesiyle, bir cep telefonunda web’de gezinme deneyimi tasarlamak başlı başına bir zorluk haline geldi. Tasarımcılar ve geliştiriciler, küçük bir ekran için uyum sağlamak, tasarım yapmak ve yükleme süresi gibi şeyleri düşünmek zorundaydı. İnternet erişimi için megabayt olarak ödeme yapmanız gerektiğinde, sınırsız veriden önceki hayatı hatırlıyor musunuz?

Mobil cihazlarda daha iyi bir deneyim yaratmanın en büyük adımı, sütun ızgaraları fikriydi. 960 ızgaralı sistemler ve 12 sütunlu bölüm, tasarımcılar arasında popülaritesini artırdı. Bu makalenin ilerleyen kısımlarında web tasarımında ızgaraların önemi hakkında daha fazla bilgi edinebilirsiniz.

2010–Duyarlı web tasarımı

Ethan Marcotte, web tasarımına yönelik mevcut yaklaşıma bir meydan okuma olarak duyarlı tasarım fikrini ortaya attı. Gönderisinde, “akışkan ızgaralar, esnek görüntüler ve medya sorguları, duyarlı web tasarımı için üç teknik bileşendir, ancak aynı zamanda farklı bir düşünme biçimi gerektirir” diye yazıyor. Bir tasarımcı için bu, iOS, Android ve tablet cihazlar için çeşitli ekran boyutlarına hitap edecek birden çok düzen tasarlamak anlamına geliyordu.

2012–Düz tasarım

Düz tasarım trend olmaya başlamadan önce, web ve uygulama tasarımında 3B tasarım efektleri, skeuomorfizm ve gerçekçilik kullanılıyordu . Gölgeler, gradyanlar ve vurgular agresif bir şekilde kullanıldı ve genellikle abartıldı. 

Zamanla, web tasarımı daha minimal hale geldi. Düz tasarım, nesnelerin aşırı gerçekçi temsilini ortadan kaldırır ve bunun yerine temiz çizgilere ve basit renk alanlarına odaklanır. Trend, Apple’ın 2013’te iOS 7’yi piyasaya sürmesiyle patlamaya başladı. Yeni arayüz basitti ve Apple ürünleri tarafından ünlenen skeuomorfizm stiliyle tam bir tezat oluşturuyordu.

Etkili bir web sitesi tasarlamak için ipuçları

Artık web tasarımının evrimi ve önemli olayların tasarımı nasıl değiştirdiği hakkında daha fazla şey bildiğinize göre, şimdi iyi bir web sitesi tasarlamaya ne dersiniz? Ana sayfanız, dünyadaki ilk izleniminizdir, bu yüzden onu iyi tasarlamak önemlidir. Tasarım öznel olabilir ancak etkili ve iyi tasarlanmış bir site tasarlamak için akılda tutulması gereken bazı şeyler vardır.

Mobil öncelikli tasarım

Mobil öncelikli tasarım, tasarım sürecini en küçük ekranlardan başlatarak kullanıcılar için daha iyi deneyimler yaratmayı amaçlayan bir tasarım felsefesidir: Mobil. Web sitelerinizi öncelikle mobil cihazlar için tasarlamak ve prototip oluşturmak, kullanıcı deneyiminin herhangi bir cihaz ekranında sorunsuz olmasını sağlamanıza yardımcı olur. Bir masaüstü web sitesi deneyimi için UI düzenini tasarlamak yerine, öncelikle mobil cihazlarda nasıl görüneceğini tasarlayın ve prototipleyin. Ardından tablet ve masaüstü gibi daha büyük ekranlı sürümlere geçin. 

Mobil öncelikli tasarım konsepti ilk olarak 2010 yılında Google’ın CEO’su Eric Schmidt’in bir konferansta şirketin tasarım uygulamalarında mobil kullanıcılara daha fazla odaklanacağını duyurmasıyla ortaya çıktı. “Şu anda gerçekten önemli olan şey, mobil mimariyi doğru yapmak. Eninde sonunda hizmetlerinizin çoğunu sağlama yönteminiz mobil olacaktır. Bunu söylemekten hoşlandığım şekilde, cevap her zaman önce mobil olmalıdır. Her zaman en iyi ekibinizi ve en iyi uygulamanızı mobil uygulamanıza koymalısınız.”

Mobil tasarım çok daha sınırlıdır. Daha küçük bir ekran için tasarım yapıyorsunuz ve bir sayfaya yalnızca bu kadar çok öğe sığdırabilirsiniz. Öncelikle mobil cihazlar için tasarlayarak, yalnızca kullanıcılarınız için kesinlikle gerekli olanı seçmeli ve geri kalan her şeyi dışarıda bırakmalısınız. Genişlettikçe ve tasarımı daha büyük ekranlar için uyarlarken daha fazla bilgi sağlamayı seçebilirsiniz, ancak önce neyi dahil etmeniz gerektiğini tam olarak bilirsiniz. 

Organizasyonu çözmek için bir ızgara kullanın

Izgaralar, bir web sayfasının içeriğini düzenlemenize yardımcı olur. Biri olmadan, öğeler rastgele yerleştirilir, yanlış hizalanır ve kullanıcının web sitesinde gezinmesi daha zor hale gelir. Izgara kullanmaya nasıl başlayacağınız konusunda takılıp kaldıysanız, başlamak için iyi bir yer 12 sütunlu veya 960 ızgaralı bir sistemdir.

960 Izgara Sistemi, 960 piksel genişliğe dayalı yaygın olarak kullanılan boyutları sağlayarak web geliştirme iş akışını kolaylaştırma çabasıdır. İki çeşidi vardır: 12 ve 16 sütun.

960 ızgarası aşağıdaki yapıyı takip eder:

• Toplam genişlik 960 pikseldir
• Her biri 60 piksel genişliğinde maksimum 12 sütun kullanın
• Toplam 20 piksellik bir oluk aralığı için her sütunun solunda ve sağında 10 piksel boşluk kullanın
• Toplam içerik alanı 940px

12 sütunlu ızgara sistemi bol miktarda esneklik sağlar. 3 sütun düzeninde içerik eklemek için 12 sütun ızgarasını nasıl kullanabileceğinize bir örnek.

Negatif alanı dengelemek

Beyaz boşluk olarak da bilinen negatif boşluk, tasarımda öğrenilen bir beceridir. Yeni tasarımcıların gözü boş sayfadan korkabilir, ancak tasarım, alanı mümkün olduğu kadar çok bilgi ve grafikle doldurmakla ilgili değildir. Bunun yerine, kullanıcının dikkatini yönlendirmek ve kusursuz bir deneyim yaratmak amacıyla tipografi, resimler ve negatif alan kullanın.

İşte bir tasarımın odağını değiştirmek için negatif ve pozitif alanın birlikte kullanılabileceği bir örnek. Doğru ya da yanlış cevap yok. Ancak tasarımınızın amacına bağlı olarak daha fazla negatif alana yönelmek isteyebilirsiniz.

Okunabilirlik kraldır

Okunabilirlik ve okunabilirlik genellikle birbirinin yerine kullanılabilen terimlerdir ancak aslında oldukça farklıdırlar. Okunabilirlik , yazılı içeriğin okunması kolay bir şekilde akışını sağlamak için yazı tiplerinin ve kelimelerin düzenlenmesidir. Okunabilirlik, bir yazı tipindeki harflerin birbirinden ne kadar kolay ayırt edilebildiğini ifade eder. Sonuçta, web sitenizdekileri kimse okuyamıyorsa, o zaman bu neye hizmet ediyor? Örnek bir gövde kopyası paragrafı için iyi ve kötü okunabilirliğin bir örneğini burada bulabilirsiniz.

Soldaki paragraf iyi okunabilirlik göstermektedir. Dengeli bir yönlendirme ve izleme seviyesi vardır, normal bir yazı tipi ağırlığı kullanır ve büyük ve küçük harflerle görüntülenir. İkinci paragraf ise kötü okunabilirliğe bir örnektir. Yönlendirme ve izleme o kadar sıkı ki harfler üst üste binmeye başlıyor. Kalın yazı tipi ağırlığı ve tümü büyük harfler, özellikle birden çok paragraf olduğunda okumayı zorlaştırır.

Yüksek kaliteli görseller kullanın

Grafiklerinizi doğru boyutta tasarlayarak ve görüntülerinizi uygun şekilde ölçekleyerek bulanık ve pikselli görüntülerden kaçının. Yalnızca tam piksel sayılarını kullanın. 600,5 x 800,1 px boyutunda bir resim kullanmak yerine 600 x 800 px olarak yeniden boyutlandırın. 

Adobe Photoshop’ta Görüntü > Tuval Boyutu’na giderek bunu kolayca kontrol edebilirsiniz. En üstte mevcut boyut var, boyutu değiştirmek istiyorsanız Yeni Boyut altında ayarlarınızı yapın.

Hiyerarşiyi temizle

Hiyerarşi, bir sayfadaki veya web sitesindeki belirli öğelerin önemini nasıl gösterdiğinizdir. Ölçek, renk, kontrast, hizalama, tekrar ve boşluk gibi tasarım öğeleri sayesinde net bir hiyerarşi elde edebilir ve kullanıcıyı tek bir sonuca yönlendirmeye yardımcı olabilirsiniz. İster başlık ister harekete geçirici mesaj olsun, kullanıcının önce görmesi için en önemli şeyin ne olduğuna karar verin. Önce bir hedefiniz olsun, sonra sorunu çözmek için tasarımı kullanın.

Bu iki örneğe bir göz atın, hangisi daha iyi hiyerarşiye sahip ve neden?

İlk örnekte, tüm metin aynı boyut, renk ve ağırlıktadır. Her şey aynı olduğunda, hiçbir şey öne çıkmaz ve geçmiş bilgileri gözden geçirmek kolaydır. İkinci örnekte net bir hiyerarşi var. En büyük başlık olduğu ve kalın bir ağırlıkla görüntülendiği için önce başlığı fark edersiniz. Sonra, CTA’yı fark edeceksiniz çünkü beyaz metin tamamen büyük ve mor bir dolgu şeklinde ters çevrilmiş. Tartı ve ağırlık kombinasyonunu kullanmak, kullanıcıyı en önemli bilgilere, önce başlığı okumaya ve ardından harekete geçmeye yönlendirmeye yardımcı olur.

Tasarımda hiyerarşinin neden önemli olduğu hakkında daha fazla bilgi edinmek için ücretsiz web tasarımı kursumuzdan şu derse göz atın:

Harekete geçirici mesajları (CTA’ları) temizle

Web için tasarım söz konusu olduğunda, tek bir harekete geçirici mesaja giden net bir yolun olması önemlidir. Çoğu zaman bir müşteri sizden daha fazla düğme eklemenizi, onları büyütmenizi, kırmızı yapmanızı veya sadece daha fazla öne çıkmanızı isteyecektir. Bu kararları vermek tasarımcı olarak size kalmış. Bir web sitesinin içeriğini etkili bir şekilde düzenlemek için tasarım becerilerinizi kullanın. İyi tasarım basittir. Şüpheye düştüğünüzde, daha azına yönelin.

Kullanıcıyı bunaltmayın veya kafasını karıştırmayın

Son olarak, tasarımınızdaki tüm dikkat dağıtıcı unsurları ortadan kaldırarak kullanıcılarınızı bunaltmaktan kaçının. İyi web tasarım uygulamaları için yukarıdaki ipuçlarını takip ederseniz bunu başarabileceksiniz, ancak bu her zaman iyi bir hatırlatmadır. Bir müşteri sizden bir web sitesine eklemenizi veya değişiklik yapmanızı isterse nedenini sorun. Kullanıcı deneyimine değer katıyor mu? Değilse, muhtemelen dahil etmek gerekli değildir. 

Google ana sayfası, net bir harekete geçirici mesaj içeren minimal web tasarımının en iyi örneklerinden biridir. Büyük Google logosu, uzun bir arama çubuğu ve yalnızca iki düğmeyle belirgin bir marka bilinirliği var. Başka dikkat dağıtıcı yok.