Web sitesinin tasarım öğeleri

Anlaşılır web sitesi mizanpajları ve öğeleri tasarlamaya yönelik ipuçlarını öğrenmek ister misiniz? Doğru yerdesiniz!

Adobe Illustrator, esnek ve serbest hareketli web öğeleri oluşturabileceğiniz piksel düzeyinde mükemmel bir tasarım ortamı sağlar. Vektör grafikleri, dinamik ortam simgeleri, ölçeklenebilir bileşenler, CSS oluşturma, SVG dışa aktarma, tek kafesler ve yeniden kullanılabilir simgeler dahil olmak üzer açık ve anlaşılır bir web mizanpajı oluşturmak için ihtiyacınız olan her şeyi sunar.

Web sitesi tasarımı

Denemelisiniz

Adobe XD: Adobe'nin web sitesi, mobil uygulama ve çok daha fazlasını tasarlayabileceğiniz en yeni hepsi bir arada vektör tabanlı UX/UI çözümü.

Etkili web mizanpajları için 5 ilke

Kaliteli bir web deneyimi oluşturmak için aşağıdaki web tasarımı öğelerine özel önem gösterdiğinizden emin olun:

  • Daha az tıklatmayla kolay gezinme
  • Ekran alanının optimum ve dengeli kullanımı, cihazdan bağımsız görüntüleme seçenekleri
  • Minimal ve anlaşılır yapı: ızgara, kutucuk ve kart kullanımı
  • Çekici ve etkileyici görsel grafikler
  • Anlaşılır ve sanatsal tipografi

Başlamadan önce

Illustrator'da tasarladığınız tüm çalışmalar genellikle aşağıdaki tasarım temalarını kullanır:

  • Şekiller ve yollar
  • Renkler ve desenler
  • Metin ve fontlar
  • Görseller ve özel efektler

Daha fazla bilgi edinmek ister misiniz? Bkz. Web sitesinin temel bileşenleri.

Web belgesinin ayarlarını yapma

Web belgesinin ayarlarını yapmak için:

  • Dosya – Aç'ı seçin. Yeni Belge iletişim kutusunda Web sekmesini tıklatın. Hazır ayarlar listesinden gereksinimlerinize uygun bir web belgesi türü seçin.
  • Örnek bir şablonu önizlemeyle görüntüleyin ve indirin. 
Web belgesini seçme
Web belgesini seçme

Dinamik bir web sayfası tasarlama

Sürekli gelişen teknolojiyle herhangi bir işletim sistemi platformunda, ekran boyutunda ve cihaz yönünde sorunsuz bir şekilde yanıt veren bir web sitesi tasarlamak önemlidir.

Dinamik bir web mizanpajı oluşturmak için aşağıdaki hususları göz önünde bulundurun:

  • Masaüstü, tablet, mobil cihaz gibi her türlü ekran genişliğinde yeniden boyutlandırılabilir bir web sitesi mizanpajı tasarlamak için esnek ızgaralar ve mizanpajlar.
  • Görüntüler, videoları ve benzer formatları kapsayan ölçeklenebilir ortamlar.
  • Web tarayıcılarına ve cihazlara özel stiller eklemek için dinamik ortam sorguları.

Web sitesi tel kafesi veya yapısı oluşturma

Anlaşılır ve yapılandırılmış bir web sitesi daha fazla ziyaretçi çeker. Web sitesi mizanpajı tasarlarken:

  • Farklı ekran öğelerini görselleştirmek ve bunları web sayfanızda düzenli bir şekilde yerleştirmek için web sitesi tel kafesini tasarlayarak başlayın.
    İpucu: Kolay gezinme ve modern bir görünüm için kutucuk veya kart ekleyebilirsiniz.
  • Birinci düzey kullanıcı arabirimi oluşturulduktan sonra içeriği ve diğer sanatsal öğeleri ekleyerek devam edin.
Web sitesi yapısı
Farklı ekranlar için bazı web sitesi şablonları

Düzenli bir web mizanpajı için ipuçları ve püf noktaları

  • Daha kullanışlı bir görünüm için web sitesini ilgili bölümlere ayırın. Nesne Dilim seçeneğini belirleyin.
  • Başvuru alanlarını denetleyip test etmek ve ekran öğelerini ayarlamak için cetvelleri, ızgaraları ve kılavuzları kullanın.
    • Görünüm – Kılavuzlar'ı seçin.
    • Görünüm – Izgarayı Göster'i seçin.
    • Görünüm – Cetveller'i seçin.
  • Kesin bir görsel ana hat oluşturmak için ekranı ilgili bölümlere bölmek üzere web sayfasına dikdörtgen nesneler veya metin bileşenleri yerleştirin.
  • Web sayfasının ana içeriğine odaklanırken yaratıcı bir logo, ilham verici bir kahramanın resmi, slogan, misyon bildirimi gibi uygun öğeleri eklemeyi unutmayın.
  • Web sitesi yapısını kaydetmek için Dışa Aktar – Web için Kaydet (Eski) seçeneğini belirleyin. Ayrıca kaydedilen dosyada göstermek istediğiniz dilimleri de seçebilirsiniz.

Ayrıca bkz.

Dilimler ve görüntü eşlemeleri

Web reklam bandı tasarlama

Web sitenizdeki ürünleri veya hizmetleri tanıtmak ve reklamını yapmak için bir pazarlama kampanyası mı yürütüyorsunuz? Birkaç dakika içinde göz alıcı bir reklam bandı oluşturun!

Web reklam bandı oluşturmak için aşağıdakileri yapın:

  • Doğru belge boyutunu seçin. Reklam bantları için genellikle A4 belge boyutu uygundur.
  • Dikdörtgen aracının yardımıyla reklam bandının ana hattını belirleyin ve uygun boyutları belirtin.
  • Grafik, metin, degrade ekleyin ve istediğiniz kadar yaratıcı olun.
Web reklam bandı

İlgili kaynaklar

Adobe logosu

Hesabınıza giriş yapın