1. Ana Sayfa
  2. Nasıl Yapılır?

Geliştiriciler için 7 tasarım ilkesi

Geliştiriciler için 7 tasarım ilkesi
+ - 0

Her geliştiricinin bilmesi gereken 7 tasarım ilkesi

1/ Relative units & yüzde genişlikleri kullanın

Em, rem ve yüzdeleri kullanmak, CSS stillerinizin ekran boyutları arasında akmasına yardımcı olur.

Örn: Bir kesme noktasını değiştirmeniz gerekiyorsa, genişlikleriniz pano boyunca çalışır. Ve yazı tipi boyutlarınız, yalnızca öğenin yazı tipi boyutunu değiştirerek değişebilir.

tasarım ilkesi

2/ İçerik (cihaz genişliği değil) kesme noktalarını belirler

Bu döngüye girmek istemezsiniz: Yeni cihaz, yeni medya sorguları, yeni cihaz, yeni medya sorgusu…

Bunun olmasını önlemek için şunları yaparsınız:

Sınır değerlerinizi içeriğinizin doğal niteliklerine dayandırın. Ekran boyutu arttıkça, yeni bir oluşumda daha iyi olacağı yeri seçin

tasarım ilkesi

3/ Medya sorgularını minumum genişlikte kullanın

Min-width kullanmak, mobil stillerin masaüstü stilleri karışmadan yüklenmesini sağlar.

Bu, mobil deneyimi ve sitenizin SEO‘sunu önemli ölçüde iyileştirebilir.

tasarım ilkesi

4/ İşe düzeni tasarlamakla değil, özellikleri listeleyerek başlayın.

Bir ucuz uçuş sitesi kuruyorsanız, “Bu ürün solda mı, sağda mı olmalı?” diye sormayın.

Bunun yerine şunu sorun: “Kullanıcılarımızın neye ihtiyacı olacak?”

Veri seçici, giriş alanı, arama düğmesi vb. öğeleri yazın. Ardından bunları bir araya getirin.

tasarım ilkesi

5/ Başparmak kuralına uyun

İnsanların %75’i mobil cihazlarını çalıştırmak için başparmaklarını kullanıyor. Anahtar eylemleri kolayca erişilebilecek yerlere yerleştirin.

💚: Kolay erişim = En önemli öğeler
💛: Küçük bir erişim = İkincil öğeler
🧡: Emek ister = Kullanıcı her zaman fark eder

basparmak kurali

6/ Kroki, Tasarım, Kod.

Her zaman önce çizim yapın. Çizimin nasıl kaba olduğuna ve ayrıntıların nasıl dışarıda bırakıldığına dikkat edin. Bir tasarım aracı üzerinde çiziminizin kaba çıktısını alın. Bu sayede neyin nasıl çalıştığı, neyin inşa edilmesi gerektiği ve neyin inşa edilmesi gerekmediğini çok açık anlarsınız.

sketch dsign

7/ LT Tarayıcı

LT Tarayıcı, özellikle web sitesinin yanıt verebilirliğini test etmek için yapılmıştır.

✅ Test edilecek +45 ekran boyutu
✅ Hata ayıklama için
yerleşik geliştirme araçları ✅ Ağ daraltma testi
✅ Yerel test
✅ Google Lighthouse performans raporları

lambdatest

Yazar Hakkında

Bu Yazıyı Yorumla