Bir web sitesi tasarlayın

Yazar: Judy Howell
Yaratılış Tarihi: 25 Temmuz 2021
Güncelleme Tarihi: 1 Temmuz 2024
Anonim
2 Saatte Sıfırdan Profesyonel Web Sitesi Nasıl Yapılır?
Video: 2 Saatte Sıfırdan Profesyonel Web Sitesi Nasıl Yapılır?

İçerik

Harika bir web sitesi tasarlamak göz korkutucu bir görev gibi görünebilir, ancak temel bilgileri aklınızda tuttuğunuz sürece süreci ilginç ve eğlenceli bulacaksınız. Bu sadece güzel görünmekten daha fazlası hakkında! İnsanların tekrar tekrar ziyaret edeceği web siteleri tasarlamanıza yardımcı olacak temel bilgileri ve bazı genel kuralları göstereceğiz.

Adım atmak

Yöntem 1/2: 3 temel kural

  1. Kural 1:Müşterinizi dinleyin. "Beni şimdi keşfedin!" Diye haykıran bir site için zengin siyahlar, zarif yazı tipleri ve parlak, sanatsal renklerle "dünyanın tarihinde ve ötesinde dünyanın en büyük web sitesini" tasarlıyor olabilirsiniz. Maalesef, müşteriniz parlak pembe ve turuncu harflerin bulunduğu turuncu bir menü çubuğu istedi. Kovuldunuz ve müşterinin haklarına sahip olduğu şimdiye kadarki en iyi web siteniz, yedekleme disklerinde bir yerde, kimse onu bir daha görmeden.
    • Müşterinizin kurumsal kimliğini inceleyin. Müşterinin size sevdiği birkaç web sitesini göstermesini sağlayın. Bu size sadece neyi sevdiklerine dair bir fikir vermekle kalmayacak, aynı zamanda aklınıza gelmemiş olabilecek birkaç tasarım fikri de verecektir.
    • Turuncu ve pembe web sitesi hakkında şaka yaptığımızı düşünüyorsanız, şu havalı, sofistike siteyi düşünün:
  2. 2. Kural:Hedef kitlenizi ve ne aradıklarını bilin ve tasarımınızı buna göre uyarlayın. İnsanların web sitelerine sahip olmasının nedeni, başkalarının onları görmesini istemeleridir. Bilgilendirici veya ticari olabilir veya belirli bir hedef kitleyi eğlendirmek için olabilir. Bir tasarımcı olarak işiniz, kimin için tasarladığınızı bilmek ve oraya indiklerinde onları sayfada tutmaktır.
    • "İyi görünüyorsa kalacaklar" diye düşünebilirsiniz. Ancak durum böyle olmak zorunda değildir. Örneğin gayrimenkulü ele alalım. İşte temiz, eğlenceli bir tasarıma sahip bir site. Açık bir görünüm, parlak renkler ve göze çarpan bir yerde bağlantıları olan modern bir geniş ekran formatı sağlayan çok sayıda beyaz alana sahiptir:
    • Şimdi aynı bölgede emlak satmak için şu yaklaşıma bir göz atın: dağınık ve çok yoğun, donuk renkler ve reklamlarla kaplı.
    • Tahmin et ev arayanlar için hangisi daha iyi? Doğru, nerede evler! İnsanlar "Santa Monica'da satılık evler" aradıklarında, bir sitenin neye benzediğini umursamıyorlar. Emlakçı hakkında bir şeyler okumak ya da şehrin güzel resimlerini görmek istemiyorlar. Evleri görmek istiyorlar.
  3. 3. Kural:Kendini dinle. Müşterinin ne istediğini anlıyorsunuz ve pazarınızın ne aradığını biliyorsunuz. Şimdi sonunda tasarımcıya dikkat etmenin zamanı geldi!
    • Seçtiğiniz grafik yazılımında bir şablon oluşturun. Sayfanızın öğelerini farklı katmanlarda oluşturun (böylece daha sonra tüm şablonu yok etmeden bazı şeyleri değiştirebilirsiniz). Bu öğeler şunlar olabilir:
      • Üstbilgi. Bu, sitenizin her sayfasında aynı olan bir unsurdur. Başlık, sitenin başlığı ve logosunun yanı sıra web sitesinin diğer bölümlerine bağlantılardan (örneğin Hakkında, İletişim, vb.) Oluşur. Görsel ve pratik olarak bu, hepsini birbirine bağlayacaktır. Bir menü çubuğundaki ilk düğmeyi tekrar ana sayfaya bağlamak iyi bir uygulamadır.
      • Örneğin, Apple'a bir göz atalım:
      • Çoğu Apple ürününde olduğu gibi, ana sayfalarının çok temiz ve anlaşılır bir tasarımı var. Her düğme için mantıksal konular ve bir arama alanı içeren üst kısımdaki menü çubuğuna dikkat edin - siteniz destekliyorsa her zaman iyi bir fikirdir. Şimdi birkaç öğeyi görmek için düğmelerden biri olan iPad'in açılış sayfasına bakalım:
      • Menü çubuğu yalnızca iPad düğmesini karartarak değişir.
      • Açılış sayfasının konusu büyük siyah harflerle gösterilir.
      • Ürün hakkında daha fazla bilgi edinebilmeniz için yeni bir alt menü görünecektir. Bu düğmelerden birine tıklarsanız, her sayfanın konuya bağlı olarak yeni içerik sunduğunu ancak düzen ve tasarım açısından aynı olacağını göreceksiniz.
      • Çoğu zaman, menü çubuğunuzdaki her ana konunun doldurmanız için farklı alt başlıkları olacaktır. İkinci bir menü çubuğu oluşturmak yerine, Musicians Friend'den alınan bu örnek gibi açılır menüleri kullanabilirsiniz:
      • Kenar çubuğu. Bu, sitenizin birçok sayfasında görünecektir, ancak hepsinde olmayabilir - bağlam belirler. Bununla birlikte, çok önemli bir unsurdur ve sezgisel olacak ve fazla dağınık olmayacak şekilde dikkatlice tasarlanmalıdır. Menü çubuğunun aksine, bir kenar çubuğunun içeriği çok dinamik olabilir. Emlak Pazarlamacısı Trulia'dan Bu İki Kenar Çubuğuna Göz Atın Birincisi, alıcılar için:

Yöntem 2/2: Yönergeler

  1. İyi bir kullanıcı arayüzü tasarlayın. Sitenizi gezilebilir ve sezgisel hale getirmek için web sitesinin başlık, kenar çubukları, logolar, resimler ve metin gibi çeşitli öğelerini her sayfada aynı yere yerleştirin.
    • Aynı başlığı her sayfanın en üstünde tutun. Sitenizin içeriğinin birçok tekrar eden öğeye izin verip vermemesine bakılmaksızın, her sayfanın üst kısmının aynı olduğundan emin olun.
    • Tasarımınızda mantık kullanın. Tek bir sayfadaki öğeler, önem veya konuya göre mantıksal olarak sıralanmalıdır; sitedeki farklı sayfalar da olmalıdır.
  2. Tutarlı bir tarz yaratın. Düzenin sitenize yapısal tutarlılık vermesi gereken yerlerde, stil tematik uyum sağlamalıdır.
    • İki veya üç ana renge sadık kalın ve birlikte iyi gittiklerinden emin olun.
    • Çok fazla yazı tipi stili veya boyutu kullanmaktan kaçının; birkaçını değiştirmek isterseniz, her sayfada aynı şekilde kullanın.
    • Tek tip bir stili korumak ve her sayfaya ayrı ayrı gitmek zorunda kalmadan bir web sitesinin tamamındaki öğeleri değiştirmeyi kolaylaştırmak için Basamaklı Stil Sayfaları (CSS) kullanın.
  3. Okunabilirliği en üst düzeye çıkarın. Metninizin okunmasını kolaylaştırmak için onu daha küçük parçalara ayırabilirsiniz.
    • Her bir parçayı ayırmak için alt başlıklar ve uygun boşluk kullanın.
    • Konuların hiyerarşisini ve önemini göstermek için kalın harfler veya farklı boyutlar kullanın.
    • Metni nasıl ele aldığınıza dikkat edin. Yazı tipini çok küçük yapmayın ve büyük metin parçalarının okunmasını kolaylaştırmak için satır aralığını artırın. Büyük metin parçalarını okumak daha zordur; daha küçük paragraflara bölün.
  4. Web sitenizi evrensel olarak okunabilir hale getirin. Standart HTML kullanın ve bir tarayıcının yalnızca bir markası veya sürümü için mevcut olan etiketlerden, özelliklerden ve eklentilerden kaçının.
    • Çoğu modern tarayıcı ve bilgisayar karmaşık görüntüleri işleyebilse de, görsellerinizi web için küçültür ve optimize ederseniz her şey daha düzgün görünecektir. Kalitenin önemi ile hızın önemini tartın.
  5. Web sitenizi test edin. Emin olun her bağlantı çalışır beklediğiniz gibi ve görüntüler doğru görünüyor.
    • Hedef kitlenizin üyelerinin tasarımınızın netliğini ve kullanım kolaylığını test etmesini ve web siteniz hakkında geri bildirimde bulunmasını sağlayarak bazı kullanıcı testleri düzenlemek isteyebilirsiniz.
  6. Web sitenizi yayınlayın. Henüz yapmadıysanız bir alan adı satın alın. Bağlantıların hâlâ çalışıp çalışmadığını düzenli olarak kontrol edin ve ziyaretçilerin size e-posta gönderdiği önerileri dinleyin.

İpuçları

  • Düzeni kendi kişisel vizyonunuza veya diğer sitelerde gördüğünüz şeylere göre tasarlamakta özgür olsanız da, hazır bir tasarım satın almak daha kolay olabilir.
  • Ziyaretçiyi sevimli, özel resimlerle bombalamayın. Flash animasyonu, parlak renkler, desenli arka planlar ve sayfa yüklenirken otomatik olarak çalan müzik 90'lı yıllarda eğlenceli deneylerdi, ancak şimdi kullanıcıları korkutacaklar. Maksimum okunabilirlik için metin rengiyle kontrast oluşturan basit arka planlara sadık kalın.
  • Paragraf aralığını optimize etmek için her zaman CSS kullanabilirsiniz.
  • İşitme veya görme engelli ziyaretçiler için videolara altyazı ekleyebilir, sesi yazıya dökebilir ve bir erişilebilirlik mesajı ekleyebilirsiniz. Tablolar bilgileri düzenlemenin etkili bir yolu olabilirken, ekran okuyucu yazılımı kullanan görme engelli ziyaretçiler materyali doğru sırada duyamayabilir.
  • Ziyaretçilerinizin mürekkepten tasarruf etmesine izin verin: Baskı sayfaları için ayrı bir stil sayfası kullanın.
    • Baskı parametrelerini ayarlarken arka plan resimlerini kapatın.
    • Beyaz bir arka plan üzerinde siyah metin kullanın.
    • Menü çubuğunu ve gereksiz resimleri kaldırın.

Uyarılar

  • İntihalden kaçının ve tüm telif hakkı yasalarına uyun. Çevrimiçi bulduğunuz rastgele görüntüleri veya hatta yapısal öğeleri onay almadan eklemeyin. Sitenizde kullandığınız her şey hem yasal hem de etik olmalıdır.