Nasıl yapılır? Coreldraw İle Web Tasarımı

CorelDRAW ile Web Tasarımı: Maketten Çalışan Arayüze​

CorelDRAW web projesinde görsel sistem, arayüz maketi, ikon ve illüstrasyon üretmek için kullanılabilir. Fakat bir CorelDRAW sayfası tek başına çalışan, erişilebilir ve responsive bir web sitesi değildir. HTML yapısı, CSS davranışı, etkileşim, performans ve gerçek cihaz testleri uygulama aşamasında geliştirilir.

Bu ayrımı başta yapmak hem tasarımcıyı hem geliştiriciyi rahatlatır. Tasarım dosyasının görevi, yalnızca “sayfanın fotoğrafını” vermek değil; içerik önceliğini, bileşenleri, durumları ve dışa aktarılacak varlıkları anlaşılır biçimde tarif etmektir.

---

İyi web maketi tek bir ekranı süslemez; farklı içerik, ekran ve etkileşim durumlarında sistemin nasıl davranacağını açıklar.

Önce kullanıcı akışını, sonra ekranı çizin​

Ana sayfa kutularını yerleştirmeden önce kullanıcının hangi işi tamamlayacağını belirleyin. Bir teklif formu, ürün keşfi veya üyelik akışı farklı bilgi sırası ve durumlar gerektirir.

Kısa proje çerçevesi:

• Kullanıcı işi: Ziyaretçi sayfaya neden geliyor ve neyi tamamlayacak?
• Birincil eylem: En önemli buton veya sonraki adım nedir?
• Gerekli içerik: Karar için hangi metin, fiyat, kanıt veya görsel şart?
• Riskli durum: Hata, boş sonuç, uzun başlık, yavaş bağlantı veya küçük ekran ne yapacak?

Önce düşük ayrıntılı kutu çizimleri hazırlayın. Renk ve fotoğrafa geçmeden bilgi sırasını test etmek, görsel cilaya bağlandıktan sonra yapılan pahalı yerleşim değişikliklerini azaltır.

Tek masaüstü maketi responsive tasarım saymayın​

Responsive tasarım, masaüstü sayfasını orantılı küçültmek değildir. Ekran daraldığında sütunlar yeniden sıralanabilir, ikincil bilgi açılır bölüme dönüşebilir ve bazı görseller farklı kırpılabilir. Tasarımcı bu davranışları en az birkaç temsilî genişlikte göstermelidir.

• Dar mobil görünümde içerik sırasını belirleyin.
• Uzun navigasyon ve dil seçeneklerinin nereye taşınacağını gösterin.
• Kartların en kısa ve en uzun içerikle nasıl davrandığını sınayın.
• Tablo ve grafikler için yatay kaydırma, özet kart veya farklı sunum kararını yazın.
• Mobilde hover olmadığı için yalnızca hover ile açılan bilgi bırakmayın.

Kesin cihaz modellerine onlarca ayrı maket üretmek yerine tasarımın hangi noktada bozulduğunu izleyip kırılma davranışını tarif edin. Son karar tarayıcıda gerçek içerikle verilmelidir.

Tekrar eden parçaları bileşen mantığıyla kurun​

Buton, kart, form alanı, etiket ve uyarı gibi parçalar sayfa boyunca aynı kurala uymalıdır. CorelDRAW'da ortak renk ve nesne stilleri ile semboller, maket içinde bu tutarlılığı korumaya yardımcı olabilir.

Her bileşen için yalnızca normal görünümü değil gerekli durumları da çizin:

• Normal, hover ve klavye odağı,
• Etkin, devre dışı ve yükleniyor,
• Hata, başarı ve yardım mesajı,
• Boş veri ve aşırı uzun içerik,
• Mobil, tablet ve geniş ekran davranışı.

Görsel stil sistemi üzerine ayrıntılı temel için CorelDRAW tasarım iş akışına, stiller ve semboller için ileri CorelDRAW tekniklerine bakabilirsiniz.

Metni mümkün olduğunca gerçek web metni bırakın​

Başlık ve butonları görsele dönüştürmek, farklı ekranlarda yeniden akışı, kullanıcı tarafından büyütmeyi, çeviriyi ve yardımcı teknolojilerin metni okumasını zorlaştırır. Logo gibi görsel sunumun kimliğin parçası olduğu istisnalar dışında içerik metni HTML olarak uygulanmalıdır.

Maket içinde gerçek metin kullanın ve geliştiriciye yazı ailesi, ağırlık, satır yüksekliği, renk ve yedek font bilgisini aktarın. Font lisansının web kullanımını kapsadığını doğrulayın. Türkçe karakterleri ve en uzun olası başlıkları tasarımda test edin.

W3C'nin erişilebilir web görselleri rehberi, bilgi taşıyan görseller için eşdeğer metin, dekoratif görseller için boş alternatif metin ve işlevsel görseller için işlevi anlatan açıklama önerir. Alt metni tasarım dosyasına gömülü süs cümlesi değil, içerik stratejisinin parçası olarak düşünün.

SVG, PNG, JPEG ve WebP'yi içeriğe göre seçin​

“Web için her şeyi PNG yapın” yaklaşımı gereksiz dosya boyutu doğurabilir. Formatı görselin yapısına ve tarayıcı kullanımına göre seçin:

• SVG: Logo, ikon ve düz vektör şekillerde ölçeklenebilirlik sağlar; fakat karmaşık efektler ve gömülü bitmapler dosyayı büyütebilir.
• PNG: Kayıpsız çıktı ve saydamlık gereken sınırlı renkli grafiklerde yararlıdır.
• JPEG: Saydamlık gerekmeyen fotoğraflarda geniş uyumluluk sunar; kalite oranı görsel olarak test edilmelidir.
• WebP: Fotoğraf ve grafiklerde modern sıkıştırma seçenekleri sunar; yayın sistemi ve hedef tarayıcı desteğiyle birlikte değerlendirilir.

Corel'in web için bitmap dışa aktarma belgesi, PNG, JPEG, GIF ve WebP seçeneklerini dosya boyutu ve kalite önizlemeleriyle karşılaştırmayı açıklar. “72 DPI” etiketine takılmak yerine ekrandaki gerçek piksel ölçüsünü, görsel yoğunluğunu ve sıkıştırma sonucunu kontrol edin.

SVG'yi dışa aktardıktan sonra tarayıcıda inceleyin​

SVG vektörü korur ama CorelDRAW'daki her efekt tarayıcıya birebir taşınmayabilir. Bazı gölgeler rasterleşebilir, font bulunmazsa görünüm değişebilir ve gereksiz nesne verileri dosyayı şişirebilir.

Corel'in SVG teknik notları, metnin düzenlenebilir karakter olarak dışa aktarılabildiğini, nesne ve grup adlarının korunabildiğini; bazı dönüşüm ve efektlerin ise farklı işlenebileceğini belirtiyor. Çıktıyı şu şekilde doğrulayın:

1. SVG'yi en az iki güncel tarayıcıda açın.
2. Farklı arka planlarda saydamlık ve konturları kontrol edin.
3. Metin kalacaksa font yükleme ve yedek davranışını test edin.
4. Kod tarafında kullanılacak nesnelere anlamlı, benzersiz adlar verin.
5. Gereksiz metadata ve gizli nesneleri temizleyin; görsel sonucu yeniden karşılaştırın.

Erişilebilirlik durumlarını makette görünür kılın​

Klavye odağı tasarlanmadığında geliştirici çoğu zaman tarayıcı varsayılanına veya görünmez bir duruma mahkûm kalır. Link, buton, form alanı ve menüler için belirgin odak görünümü hazırlayın. Hata mesajını yalnızca kırmızı kenarlıkla anlatmayın; simge ve açıklayıcı metin ekleyin.

Normal metinde arka planla yeterli kontrast hedefleyin. W3C WCAG minimum kontrast açıklamasında normal metin için 4.5:1, büyük metin için 3:1 oranını AA eşiği olarak verir. İnce fontların pratikte daha soluk görünebileceğini de göz önünde bulundurun.

Tipografik roller, aralık ve değişken font kullanımı için grafik tasarımda tipografi rehberi bu bölümün devamıdır.

Geliştirici teslimini ekran görüntüsüyle sınırlamayın​

İyi teslim paketi hem tasarım kararını hem varlıkların teknik kullanımını açıklar:

• Sayfalar ve temel kullanıcı akışları,
• Bileşen adları ile bütün gerekli durumları,
• Renk, tipografi, boşluk ve köşe yarıçapı değerleri,
• Mobil ve geniş ekran davranış notları,
• SVG/raster varlık klasörü ve tutarlı dosya adları,
• Görsel kırpma odağı ve önerilen alt metin notları,
• Etkileşim, animasyon ve hata davranışının kısa açıklaması.

CorelDRAW'ın Export paneli belgesi, birden çok nesne ve sayfayı farklı formatlarda dışa aktarmayı anlatır. İkonları “Group 12.png” yerine `icon-search.svg` gibi işlevsel adlarla teslim etmek geliştirici hatasını azaltır.

Tarayıcıdaki uygulamayı tasarımla birlikte test edin​

Teslim, tasarımcının işi tamamen bıraktığı çizgi olmamalı. Uygulama çıktısını gerçek cihaz ve içerikle gözden geçirin. Font yüklenmeden önceki görünüm, ekran yakınlaştırması, yavaş ağ, hata mesajları ve uzun metinler makette görünmeyen sorunları ortaya çıkarır.

Görsellerin yükleme performansını teknik ekip ölçebilir; tasarımcı da hangi görselin ana mesaj için kritik olduğunu ve hangi kalite kaybının kabul edilebilir olduğunu belirtmelidir. Teknik performansın daha geniş bağlamı için web performansı ve teknik SEO rehberine geçilebilir.

Uygulama örneği: Kampanya açılış sayfası​

Önce sayfanın birincil işini “kampanyayı anlamak ve uygun paketi seçmek” diye tanımlayın. Mobilde başlık, kısa fayda, fiyat başlangıcı ve ana eylem ilk ekrana yakın durabilir; ayrıntılı karşılaştırma daha sonra gelir. Masaüstünde iki sütun kullanılabilir, fakat içerik sırası HTML'de anlamlı kalmalıdır.

CorelDRAW'da başlık, özellik kartı, fiyat kartı, sık soru ve form bileşenlerini farklı içerik uzunluklarıyla sınayın. İkonları SVG, fotoğrafları uygun raster formatında dışa aktarın. Geliştirici sürümünde klavye odağı, form hatası, yükleniyor durumu ve küçük ekran taşmalarını birlikte kontrol edin.

Sık Sorulan Sorular​

CorelDRAW ile doğrudan web sitesi yapılabilir mi?

Görsel ve bazı web uyumlu varlıklar üretilebilir; fakat sürdürülebilir bir sitenin semantik HTML, CSS, etkileşim, erişilebilirlik ve tarayıcı testleri geliştirme ortamında yapılmalıdır.

Web görselleri mutlaka 72 DPI mı olmalı?

Tarayıcı sunumunda asıl belirleyici piksel boyutu, CSS ile gösterilen ölçü ve dosya ağırlığıdır. DPI metadata'sı tek başına hız veya keskinlik garantisi vermez.

Logo için PNG mi SVG mi kullanmalıyım?

Basit vektör logo için SVG çoğu web kullanımında ölçeklenebilir avantaj sunar. E-posta, eski sistem veya belirli entegrasyonlar için uygun boyutlarda PNG yedekleri de gerekebilir.

Maket kaç ekran boyutu içermeli?

Sabit sayı yerine davranış değişikliklerini kapsayın. En az dar mobil ve geniş ekran görünümü, karmaşık bileşenler için de kırıldığı ara genişlik yararlı bir başlangıçtır.

Özetle​

Akışı öncele, responsive davranışı tarif et, metni gerçek metin bırak, varlıkları amacına göre dışa aktar ve sonucu tarayıcıda test et. Mevcut bir maketinizi açıp yalnızca normal ekranı değil hata, odak ve uzun içerik durumlarını da ekleyerek başlayın.

Güncelleme: 15 Temmuz 2026

---