Her tasarım, belli ilkeler çerçevesinde şekillenen özgün bir yaratıcılık sürecidir. Bu bölümde sizlerle birlikte bir tasarımın oluşumunu mümkün kılan yapıları ve bu yapıların nasıl biçimlendirileceğini belirleyen ilkeleri inceleyeceğiz.

UX/UI tasarımları; özgün değer ve yaratıcılık ile beslenen temel tasarım öğeleri ve ilkeleri doğrultusunda gerçekleştirilir. Bir tasarımın kalitesi, özgün değeri ve yaratıcılık katsayısını kadar temel tasarım ilkelerine uygunluğu açısından da değerlendirilir.

UX/UI tasarımlarına yön veren başlıca ilkeler; denge, hiyerarşi, gruplama, hizalama ve tekrardır. Tasarım fikrimizi hayata geçirmek için kullandığımız çizgi, şekil, renk, font ve desen gibi tüm öğeler; bu tasarım ilkeleri bağlamında biçimlendirilir. UX/UI tasarımlarının yaratıcılık ve özgünlük değerini; hangi öğelerin, hangi ilkeler bağlamında nasıl biçimlendirildiği belirler.

Hadi! Bir fikrin tasarıma dökülmesini mümkün kılan görsel öğeleri inceleyelim.

Çizgi

Noktaların belli bir doğrultuda yan yana eklenmesiyle oluşturulan tasarım öğesidir. Göze rehberlik eder ve hareketi görselleştirir. İnce-kalın, kıvrımlı-düz ve keskin-yumuşatılmış formları vardır.

Şekil

Bir nesnenin çevre ve yüzey gibi dış özelliklerine bağlı genel bir tanımdır. İki boyutlu çizimlerde bir şekli tanımlamak için renk, desen, kenarlık, genişlik ve yükseklik temel özelliklerden faydalanılır. Şekiller; daire, oval, üçgen, dikdörtgen, kare, çokgen ve trombüs gibi temel formlara ek olarak bu formların harmanlanması ile türetilen farklı formlara da sahip olabilirler.

Renk

Işığın nesneler üzerinden yansıması sonucunda oluşan duyumlar renk olarak adlandırılır. Renklerin doğası, oluşum biçimi üzerine araştırmalar yapan Sir Isaac Newton; tüm renklerin Kırmızı, Yeşil ve Mavi ışığın karışımı olduğu keşfetti. 1766'da Moses Harris; Kırmızı, Yeşil ve Mavi'yi ana renkler olarak sınıflandıran ilk renk tekerleğini yarattı.

Günümüzde renkleri oluşturmak için farklı renk sistemleri kullanılır: Dijitalde RGB, baskıda CMYK ve boyamada RYB. Renk sistemleri, ana renklerden ve bu renklerin karışımından elde edilen ara renklerden oluşur. Örneğin; RGB renk sisteminde tüm renkler açıldığında beyaz (R: 255, G: 255, B: 255), tüm renkler kapatıldığında ise siyah (R: 0, G: 0, B: 0) elde edilir. Bir gri tonu (R: 200, G: 200, B: 200) elde etmek için tüm renkler eşit oranda ayarlanır.

Bir sonraki bölümde renklere dair bilgimizi daha da derinleştireceğiz.

Font

Dijital ortamda kullanılan metinlerin genişlik, uzunluk ve yazı tipi açısından tanımlanmasını sağlar. Şu an okumakta olduğunuz metin dahil tüm harflerin aynı şekil ve tipte yazılabilmesi mümkün kılar. Dijital tasarım süreçlerinin en temel öğelerinden biridir.

İlerleyen bölümlerde Tipografi başlığı altında detaylı olarak fontları inceleyeceğiz.

Desen

Belli bir görsel etkiyi oluşturmak amacıyla tasarlanan şekiller bütünüdür. İki boyutlu desenler; diğer tasarım öğelerinin belli bir kompozisyon etrafında yapılandırılmasıyla oluşturulur.

UI Bileşenleri

Kullanıcı arayüzleri tasarlarken, web ve mobil uygulamalar geliştirmek için kullanılan bileşenlere aşina olmanız gerekir. Bu nedenle tasarımlarınızda kullanabileceğiniz arayüz bileşenlere ayrı bir başlık açmak istiyorum.

Arayüz tasarlarken, seçtiğiniz bileşenlerin tutarlı ve öngörülebilir olmasına dikkat göstermelisiniz. Bu size; kullanılabilirlik, verimlilik ve kullanıcı memnuniyeti konularında yardımcı olacaktır.

Web ve mobil uygulama arayüzleri tasarlarken kullandığımız bileşenleri genel olarak üç ana grup altında sınıflandırıyoruz:

Form Bileşenleri: Düğme (button), metin alanı (text field), onay kutusu (checkbox), radyo düğmesi (radio button), açılır liste (dropdown list), liste kutusu (listbox), geçiş düğmesi (toogle button), tarih alanı (date field) vb.
Gezinti Bileşenleri: Bağlantı (link), menüler (list, accordion, tab, pills vb.), içerik haritası (breadcrumb), kaydırıcı (slider), arama alanı (search field), sayfalama (pagination) vb.
Bilgilendirme Bileşenleri: İpucu (toltip), ikonlar (icons), ilerleme çubuğu (progress bar), bildirimler (notifications), mesaj kutusu (message box), pencere (modal window) vb.

Peki bu görsel tasarım öğeleri hangi ilkeler çerçevesinde kullanmalıyız? Dersimizin devamında bu konuya odaklanacağız.