İçeriğe geç

YeniAI ve otomasyon hizmetleri İnceleyin

Roof Digital ana sayfa

WordPress Web Sitesi Tasarımı

Panelde bozulmayan, ekibinizin yönetebildiği bir tasarım

Güzel tasarlanmış WordPress siteleri çoğu zaman ilk içerik güncellemesinde dağılır; başlık boyutu tutmaz, boşluklar kayar, yeni sayfa eski sayfaya benzemez. Biz tasarımı panelin çalışma biçimine göre kuruyoruz, böylece içerik ekibi ekledikçe site aynı dili konuşmaya devam ediyor.

Birlikte çalıştığımız markalar

  • Villa Marine
  • Efeler Belediyesi Efeler Pazarı
  • Egesembol
  • Simge Kalıp
  • SMG Plast
  • Gentan
  • İstgen
  • Endutek
  • Kupon Kodları
  • Coldwell Banker
  • Ekmas Egem Opel
  • Altay Spor Kulübü
  • Spormarket
  • Virtual Metric
  • Medical Hair
  • Sir Winston

WordPress Web Sitesi Tasarımı kimler için?

  • Mevcut WordPress sitesini yenileyenler

    Altyapı ve içerik duruyor ama arayüz eskimişse, temayı değiştirmeden ya da yeni bir yapıya geçerek görsel yenileme yapabiliriz.

  • İçeriğini sık güncelleyen ekipler

    Haftada birkaç kez sayfa ekleyen ya da kampanya sayfası açan ekipler için tasarımın panelde çoğaltılabilir olması, tek seferlik güzellikten daha değerlidir.

  • Kurumsal kimliğini siteye taşıyamayanlar

    Hazır tema kullanıldığı için marka renkleri ve tipografisi siteye tam yansımamışsa, global stil tanımlarıyla bu uyum kurulur.

  • Teknik ekibi olmayan şirketler

    Her küçük görsel değişiklik için geliştirici beklemek istemeyen ekipler, panelden yönetilebilir bir tasarım düzenine ihtiyaç duyar.

Kapsam ve teslimatlar

  • Sayfa şablonları

    Ana sayfa, hizmet sayfası, hizmet listesi, kurumsal sayfa, blog yazısı, blog arşivi ve iletişim şablonlarının tasarımı.

  • Blok desenleri

    Tekrar eden bölümlerin (öne çıkan bölüm, kart listesi, sık sorulanlar, çağrı bloğu, referans şeridi) panelde tek tıkla eklenebilen hazır desenler haline getirilmesi.

  • Global stiller

    Renk paleti, tipografi ölçeği, buton biçimleri, boşluk değerleri ve bağlantı davranışının tema ayarlarında merkezî olarak tanımlanması.

  • Mobil düzenler

    Menünün, uzun formların, tabloların ve çok sütunlu bölümlerin dar ekranda nasıl davranacağının ayrıca tasarlanması.

  • İçerik alanlarının sadeleştirilmesi

    Editörde gereksiz seçeneklerin kapatılması, içerik ekibinin yalnız düzenlemesi gereken alanları görmesi.

  • Kullanım notu

    Hangi desenin nerede kullanılacağını, görsel ölçülerini ve metin uzunluğu sınırlarını anlatan kısa bir kılavuz.

Çizilebilen her şey panelde kurulamaz

WordPress tasarımında en sık yaşanan tıkanma, onaylanmış bir görselin panelde aynı biçimde üretilememesi. Tasarım tarafında serbestçe konumlandırılmış bir bölüm, blok editöründe ancak yeni bir blok yazılarak kurulabiliyor. Karar noktası burası: tasarımı panelin ürettiği yapıya yaklaştırmak mı, yoksa o bölüm için geliştirme yapmak mı?

İkisi de doğru olabilir, ama seçim baştan yapılmalı. Sitenin büyük bölümünü içerik ekibi kuracaksa tasarımın editörün doğal çıktısına yakın durması işi kolaylaştırıyor. Yalnız ana sayfada öne çıkan birkaç bölüm için özel geliştirme yapmak da makul, yeter ki o bölümlerin içerikle değişmeyeceği kabul edilsin.

Bu karar verilmeden ilerleyen projelerde tasarım onaylanıyor, sonra panelde yaklaşık bir karşılığı kuruluyor ve kimse ikisinin neden farklı olduğunu açıklayamıyor. Şablon listesini çıkarırken her bölümün nasıl kurulacağını da yanına yazmamızın sebebi bu.

Deseni içerik kırar

Blok desenleri, tasarlandıkları içerikle değil gerçek içerikle sınanır. Üç kelimelik başlıkla çizilen kart, panelde on kelimelik bir hizmet adıyla doldurulduğunda satırı taşırır. Dört kutuluk ızgaraya beşinci kutu eklendiğinde düzen tek başına kalan bir kutuyla biter. Görsel alanına farklı oranda bir fotoğraf yüklendiğinde kırpma beklenmedik yerden keser.

Bunlar tasarım hatası sayılmıyor, çünkü tasarımda hiç görünmüyorlar. Bu yüzden her deseni uç durumlarıyla birlikte hazırlıyoruz: en uzun başlık, en kısa metin, görselsiz hali ve tek öğeyle kalan hali. Kullanım notuna da hangi alanın ne kadar metin taşıyabileceğini ve görsellerin hangi oranda hazırlanması gerektiğini yazıyoruz.

Bu ayrıntı, tasarımın aylar sonra hala ayakta durup durmayacağını belirliyor. İçerik ekibi bir deseni bir kez bozduğunda o deseni bir daha kullanmıyor ve sayfalar yeniden elle kurulmaya başlıyor.

Nasıl çalışıyoruz?

  1. Mevcut yapının incelenmesi

    Tema, kullanılan editör ve içerik tipleri inceleniyor. Tasarımın hangi sınırlar içinde kalacağı ya da yapının değişmesi gerekip gerekmediği burada belirleniyor.

  2. Şablon listesi

    Kaç farklı sayfa tipi olduğu ve her birinde hangi bölümlerin tekrar ettiği çıkarılıyor. Tasarlanacak desen listesi buradan doğuyor.

  3. Görsel yön ve ana sayfa

    Marka malzemesine göre görsel yön belirleniyor, ana sayfa masaüstü ve mobil olarak tasarlanıyor. Revizyon bu adımda yoğunlaşıyor.

  4. Şablon ve desenlerin tamamlanması

    Onaylanan dil üzerinden kalan şablonlar ve blok desenleri üretiliyor. Uzun başlık, eksik görsel ve boş liste gibi gerçek durumlar da tasarlanıyor.

  5. Panele aktarım

    Tasarım tema ayarlarına ve blok desenlerine dönüştürülüyor, içerik ekibiyle birlikte deneniyor.

Kullandığımız araçlar ve platformlar

  • WordPress
  • Gutenberg blok editörü
  • Figma
  • Adobe Photoshop
  • Google Fonts

WordPress Web Sitesi Tasarımı fiyatını neler belirler?

  • Şablon ve desen sayısı

    Kaç sayfa tipi ve kaç tekrar eden bölüm tasarlanacağı belirleyici. Aynı desenin farklı içerikle kullanılması ek tasarım gerektirmez.

  • Mevcut temanın esnekliği

    Tasarımın hazır tema sınırları içinde kalması ile temanın genişletilmesi ya da değiştirilmesi farklı iş yükleridir.

  • Marka malzemesinin durumu

    Kurumsal kimlik kılavuzu, fotoğraf arşivi ve ikon ailesi hazırsa süreç kısalır. Bunların üretilmesi kapsamı genişletir.

  • İçerik girişinin kimde olduğu

    Tasarım teslimi ile içeriğin tamamının panele girilmesi ayrı işlerdir. Sayfa sayısı arttıkça bu fark büyür.

Sonuçlar ve referanslar

Sıkça sorulan sorular

Hazır tema mı kullanacaksınız, sıfırdan mı tasarlayacaksınız?

İkisi de olabilir. Bütçe ve zaman dar ise sağlam bir temel tema üzerinde global stiller ve blok desenleriyle marka uyumu kurulur. Site uzun ömürlü ve ayırt edici olacaksa özel tema daha doğru bir yatırımdır.

Tema güncellenince tasarımımız bozulur mu?

Değişiklikler doğru yerde tutulursa bozulmaz. Özelleştirmeleri tema dosyalarının içine değil, alt tema ve tema ayarları tarafına yazıyoruz. Güncellemeleri de önce staging ortamında deniyoruz.

Yeni bir sayfa açmak için size gelmek zorunda mıyız?

Hayır, amacımız tam olarak bu. Hazır blok desenleri sayesinde yeni bir hizmet ya da kampanya sayfası açmak, deseni ekleyip metni ve görseli değiştirmekten ibaret oluyor.

Sayfa kurucu eklentisi kullanıyor musunuz?

Zorunlu değilse kullanmıyoruz. Blok editörü artık çoğu ihtiyacı karşılıyor ve sayfaya daha az kod yükü bindiriyor. Sitenizde zaten bir kurucu varsa onun üzerinden de ilerleyebiliriz.

Tasarım mobilde nasıl kontrol ediliyor?

Şablonları dar ekran düzenleriyle birlikte tasarlıyor, yayından önce gerçek cihazlarda deniyoruz. Menü davranışı, dokunma hedefleri ve uzun tabloların kaydırma biçimi ayrıca kontrol ediliyor.

Görselleri siz mi hazırlıyorsunuz?

Arşiviniz varsa kırpma ve optimizasyon bizde. Yeni görsel üretilmesi gerekiyorsa fotoğraf çekimi ya da kreatif üretim ayrı bir çalışma olarak planlanıyor.

Tasarım çalışması sitenin hızını etkiler mi?

Doğrudan etkiler. Ağır arka plan görselleri, çok sayıda yazı tipi ağırlığı ve sayfaya her bölümde yeni bileşen eklemek yavaşlatır. Tasarım kararlarını bu maliyeti bilerek veriyoruz.

Mevcut içeriğimiz yeni tasarıma taşınır mı?

Evet. Sayfa sayısı azsa elle, arşiv büyükse toplu olarak aktarıyoruz. Aktarımda adres yapısının korunması ve görsellerin yerinde kalması ayrıca kontrol ediliyor.

İlgili içerikler

Bu konuyu derinleştiren rehberler, terimler ve ücretsiz araçlar.

WordPress Web Sitesi Tasarımı için ilk adımı atalım

  1. 1Formu doldurun ya da bizi arayın
  2. 2Bir iş günü içinde ön görüşme planlayalım
  3. 3Size özel yol haritası ve teklif hazırlayalım