Geri
Genel Prensipler

Kuika Designer ile ekran tasarımına başlamadan önce altta belirttiğimiz temel detayları biliyor olmalısınız. Bu detaylar hem bir ekranında hemde bileşenleri taşıyan sator ve kolonlar gibi diğer taşıyıcı bileşenlerin yapısını anlamanıza yardımcı olacaktır.

Project and Screens / Proje ve Ekranlar

Yapacağınız tasarımlar bir (birçok) ekran üzerinde olacaktır. Ekranları ise Project/Proje ile klasörleme/gruplandırma işlemini yapabilirsiniz. Aynı uygulamaya ait ekranları bir proje altında oluşturmak ve yönetmek doğru olan yöntemdir. Ekran sayısına bakılmadan her uygulama/iş için farklı projeler oluşturun. Oluşturduğunuz her bir projenin kendine ait özellikleri bulunur. Bu özellikler ise;

  • Bileşen kütüphanesi seçimi
  • Düzenleme yetkisi
  • Silme yetkisi
  • Onay akış süreci vb.

Responsive / Uyarlanabilirlik

Her ne kadar bilgisayar, tablet ve akıllı telefonlar olarak 3 ana kategoride cihazları ayırıyor olsak da bu cihazlardaki keranlar ve çözünürlükleri bir birinden farklıdır. Cihaz ekranların fiziksel olarak boyutlarının tablet ve hatta telefonlarda iyice küçülmesi nedeniyle bir bilgisayar ekranındaki sayfa düzeni ile görmek lüphesip okuma, izleme vb süreçleri zorlayan konulardır. İlgili içeriğin (örneğin; bir web sitesi) cihaz ekran boyutuna ve/veya çzöünürlüğne uygun olarak tekrar sıralanması okuma/izleme vb. süreçleri kolaylaştıran işlemdir. Buna responsive/uyarlanabilir ekran tasarımı/geliştirmesi olarak adlandırıyoruz. Web siteleri haricinde bir web uygulaması hatta özellikle Androd/iOS özelinde geliştirilen bir mobil uygulama da ilgii cihaz ekran boyutlarına uygun olmalıdır. Aynı markanın aynı yıl içindeki tanıtımlarında dahi fisiksel anlamdaki ekran ve çöznürlük boyuları bir birinden farklılık gösterir. (iPhone Mini veya iPhone Pro Max)

Uyarlanabilir tasarımların temelinde ise doğru kurgulanmış satır/kolon ve bunlarla doğru çalışabilecek bileşenlere ihtiyacınız olacaktır. Kuika Designer responsive ekran tasarımları geliştirebilmeniz için her bir cihaz tipine uygun satır/kolonların yanında tüm bileşenler ve özellikleri doğru yazılım mimarisine sahiptir.

Row & Columns / Satır ve Kolonlar

Web sitelerinde görmeye çok alıştırığımız 2 veya 3 kolon bölümlerin temelinde 12 veya 24 kolona sahip alt yapılar bulunur. Bu grid/kolon yapısı ile bir bileşeni/bileşen grubunu bir veya birden fazla kolon genişliğince olmasını sağlayabilirsiniz. Temelde eklediğiniz bir satırı (ebeveyn) önce 3 kolona bölmek ve bu kolonlardan birinin içine ekleyeceğiniz satırı da (çocuk) 12 kolona ayırabilirsiniz. Ekran tasarımı üzerindeki ihtiyaçlarınızı karşılayacak görünüm için bu şekilde birden fazla satır ve kolonları kullanabilirsiniz. Burada ki önemli nokta ise bir üst başlıkta bahsettiğimiz responsive/uyarlanabilir ekran tasarımına uygun olmasıdır.

Bir satırı seçili hale getiridğiniz o satırın kaç kolona sahip olacağınız, her bir kolonun ne kadar genişliğe sahip olacağını ve bu kolonların tablet ve telefon gibi diğer cihazlarda nasıl sıralanacağını ayarlayabilirsiniz.

Properties / Özellikler

Bileşenler listesinden sürükle bırak ile ekrana eklediğiniz (ekran da bir bileşendir ve herhangi bir bileşen seçili değilken ekranın özelliklerini düzenlersiniz) her bir bileşenin kendine ait özellikleri bulunur. Bir butonda birincil, ikincil veya hata tipleri veya bir satır için kolon, boşluklar gibi farklı özellikleri vardır.

Bir bileşeni seçtiğinizde (mouse ile sol klik) boyutu/kapladığı alan bakımından mavi bir çerçeve ile kendini gösterir. Bu seçili hale gelmiş bileşene ait özellikler de properties panelinde listelenir. Her bir bileşeni ekrana sürükleyerek ilgili bileşen üzerinde yapabileceğiniz özellikleri incelemenizi tavsiye ediyoruz. Böylece ekran tasarımın da kurgusal ve/veya tip/detay bakımından ne tür özelliklerle ihtiyacınız olan görünüme göre ayarlayabileceğinizi biliyor olacaksınız.

Styling / Stillendirme

Seçili bileşenler üzerinde farklı stillendirme özellikleirni kullanarak çevresel boşluklar font tipi/rengi veya gölgelendirme gibi bir çok görsel düzenleme yapabilirsiniz.

Styling paneli ile;

  • Position : dış/iç boşluklar ve boyutu
  • Text : Font, stili, boyutu, harf aralıkları gibi özellikler
  • Fill : Dolgu rengini
  • Border : Dış çizgi rengi, kalınlığı, köşe yuvarlamlarını
  • Shadow : Gölge yapısı ve rengi gibi stil düzenlemeleri yapabilirsiniz.

Ekrandaki diğer bileşenlerde de benzer bir stil yapısı ile ilerlemeniz görünüm açısından önemlidir. Hazır/Özel kütüphaneler ile çalışıyor olsanız da yapacağınız değişikliklerin genel ekran/proje stillerine uygun olarak güncelemenizi tavsiye ederiz.

Kuika 101
Başlangıç
Bileşenler
Kodu Dışa Aktarın
Layout ve Tasarım
Ortak Çalışma
Prototipleme
S.S.S.
Yenilikler
Çalışma Alanı İşlemleri
Şablonlarla Çalışma