Görsel İletişim ve Arayüz Tasarımı

1. Denge
2. Vurgu
3. Ritim
4. Hiyerarşi
5. Bütünlük

Denge, tasarımdaki tüm elemanlar eşit bir biçimde dağıtıldığında gerçekleşmektedir.

İki tür denge bulunmaktadır.

1. Simetrik denge
2. Asimetrik denge

Simetrik dengede daha statik ya da durağan bir tasarım sunmak için elemanlar kompozisyonun iki yanında eşit olarak düzenlenir ve bir ayna efekti sağlanır.

Asimetrik dengede elemanlar tasarımın merkezi baz alınarak yerleştirilmez ve görsel ağırlık merkezi değiştirilerek dinamik ve farklı bir hareket sağlanmış olur.

Vurgu, tasarımda hangi alanların öncelikli olacağının kontrol edilmesidir.

1. Dikkat çekilmek istenen elemanı diğer bileşenlerden ayırmak etkili bir yöntemdir. 
2. İlgili unsuru kompozisyon içerisinde spesifik bir yere konumlandırarak izleyicinin bakışı o bölgeye çekilebilir.
3. Şekillerin boyut ve oranları da üç boyutlu derinlik yaratılmasında önemli bir rol oynamaktadır.
4. Kullanılan elemanlar arasında kontrast yaratılarak vurgu sağlanabilir.
5. Diyagonal veya paralel biçimlerle yapılan yönlendirmelerle ya da oklar kullanılarak izleyicinin dikkati kompozisyonda istenen noktaya çekilebilir.
6. Tasarımda renk, boyut veya şekilsel farklılıklar yaratılarak oluşturulan kontrast yoluyla istenen ögeler vurgulanabilir.

1. İzole etme
2. Yerleştirme
3. Ölçeklendirme
4. Kontrast
5. İşaretçiler kullanma

Ritim, tekrar eden elemanlar tarafından yaratılan bir motiftir.

Grafik tasarımda ritim, görsel unsurların belirlenmiş aralıklarla bir biri ardına dizilimidir.

Kompozisyonda ritmin kurgulanmasında renk, doku, boşluk ve denge gibi pek çok faktörün payı bulunmaktadır. Ancak ritmin en önemli iki tamamlayıcısı vardır. Bunlar:

1. Tekrar: Tekrarların sonucu olarak çıkan ahenk, aynı zamanda kompozisyonda birliği de sağlamaktadır.
2. Çeşitlilik: Çeşitlilik, izleyicinin dikkatini tasarıma çekilmesini sağlamaktadır. Tasarımda çeşitlilik; kullanılan renk, boyut, şekil ve boşluk gibi unsurlarla yaratılabilir.

Görsel hiyerarşi konsepti en temel anlatımıyla, en önemli içeriğin en fazla, önemsiz olan içeriğin ise en az görünür olmasıdır.

Bütünlük ilkesi tasarımda yer alan tüm unsurların birbirleriyle uyum içerisinde olmasıdır ve kompozisyonun bütününün, içerisinde barındırdığı alt gruplardan ya da tekil parçalardan daha önemli olması gerektiğini savunur.

Bütünlük konsepti çeşitli, dinamik, canlı ve çekici bir yapıyı temsil etmektedir.

• Yakınlık
• Benzerlik
• Devamlılık
• Simetri
• Şekil-zemin ilişkisi
• Tamamlama

Yakınlık ilkesi, objeler arasındaki mesafenin onları nasıl bir bütün veya alt gruplar halinde algılamamızı etkilemesiyle ilgilidir.

Benzerlik ilkesi çerçevesinde gruplama, birbirine benzer şekil, renk, boyut, konum (yakınlık ilkesi), açı veya değer gördüğümüzde gerçekleşmektedir.

Devamlılık ilkesi ile bağlantılı olan tamamlama ilkesi, görsel algımızın açık veya ayrı parçalar halinde olan şekilleri kapalı veya birleşmiş halde algılamaya olan eğilimimiz ile ilgilidir.

Şekil-zemin ilişkisi ilkesi, zihnimizin görüş alanımızdakileri şekiller (ön plan) ve zemin (arka plan) olarak iki farklı kategoriye ayırarak ele alır.

Gelişen teknoloji ile birlikte insan bilgisayar etkileşimini incelemek için göz hareketlerini izleme sistemleri (eye tracking systems) kullanılmaktadır. Göz hareketleri verileri, web sitesi arayüz tasarımında insanların hangi alanlara dikkat ettiği, hangi bilgileri göz ardı ettikleri ve nelerden rahatsız oldukları konusunda bilgi verebilmektedir.

• Sayfa düzeni
• Renk kullanımı
• İkon ve sembol kullanımı
• Tipografi
• Bilgilendirme tasarımı
• Animasyon kullanımı

Ekran grafikleri uygun bir şekilde kullanıldığı takdirde, güçlü bir iletişim ve dikkat çekme yöntemi olarak kullanılabilir. Bu grafikler kullanıcının ilgisini ekranda toplayabilir, insan-bilgisayar etkileşimini destekleyebilir ve dil engelini aşmalarına yardımcı olabilir.

Sayfa düzeni, uygulandığı ortam fark etmeksizin çeşitli bileşenlerin  tasarım ilkeleri doğrultusunda bir arada kullanılmasıdır.

Sayfa düzeni denince akla ilk gelen kavram ızgara sistemidir. Izgara sistemi, grafik tasarımcıların navigasyon ve içeriği kontrollü bir şekilde yerleştirmek, görsel iletişimi sağlamak ve ekran üzerindeki ilgi merkezini belirlemek için kullandıkları temel bir yapıdır. Izgara temelli sayfa düzeni basılı medyadan dijital medya teknolojilerine etkili bir şekilde aktarılmış tekniklerden biridir.

Izgara sistemi ile biçimsel kontrastlar yaratılarak dinamik ve kendine özgü görüntülerin oluşturulması sağlanabilir.

Görsel ritim şekillerin, değerlerin, renklerin ve dokuların tekrarına dayanır. Şekillerin tekrarı ve aralarındaki boşluk sayfada bir desen veya ritim oluşturur.

Boşluk, ekranda diğer yazılım unsurlarından herhangi birini içermeyen bir alanı temsil etmektedir. Ayrıca sistemdeki diğer elemanların vurgulanması ve dikkat çekmesini sağlayabilir. Boşluk sayfa düzeni tasarımının daha özgün ve etkili olmasına imkan tanıyabilir.

Sayfa düzeni tasarımı, sayfadaki içeriğe, sıralamaya ve etkileşim noktalarına kullanıcının dikkatini çekmek için yapılan bir manipüle etme sanatıdır.

• Sunulmak istenen bilgi farklı bölümlere ayrılarak ele alınmalıdır.
• Her bir bölüm ve alt bölümlerin belirgin bir şekilde etiketlenmesi ve içeriğin bütününe bakıldığında açıkça tanımlanabilmesi gerekmektedir.
• Oluşturan tüm bu bölümlerin kendi içerisindeki hiyerarşiyi inşa etmek için üst seviyedeki bölümlerin alt seviyedekilere göre daha belirgin bir şekilde sunulması gerekmektedir.

Sayfa düzeni içerisinde görsel hiyerarşinin oluşturulması, kullanıcıların sayfayı incelerken hızlı bir şekilde hangi bilgilerin ilgilendikleri konu ile alakalı, hangisinin alakasız olduğunu ayırmalarına ve yalnızca ilgili olan kısma odaklanmalarına imkan sunar.

Tasarımda herhangi bir renk kullanıldığında, bunu gören insanlar için ne anlama gelebileceği düşünülmelidir, çünkü renkler çeşitli yan anlamlara da sahiptir. Bu yan anlamlar kısmen kültürel olabilir. Renkler, izleyicide kimi kişisel, kimiyse daha evrensel bazı spesifik duygusal tepkileri uyandıran bir güce sahiptir.

Rahat okunabilen metinler için fondaki renk ile ön planda kullanılacak olan renk arasında yeteli kontrast sağlamalıdır.

• Renk, ekrandaki önemli bir alanı ya da herhangi bir şema veya grafiğin kilit noktasını vurgulamak için kullanılabilir.
• Ekranı genel olarak organize etmek için renklerden faydalanılabilir.
• Ekranda bulunan çeşitli bilgi kümleri ya da bölümler birbirinden farklı renkte alanlar kullanılarak ayrıştırılabilir.

İkonlar çoğunlukla izleyicilerin etkileşime geçebileceği obje ve eylemleri temsil etmek için kullanılan resimsel imgelerdir.

• Benzeşim: Görüntü temsil ettiği şeyle aynı anlamı vermektedir.
• Sembolik: Soyut bir imajın kullanılmasıdır.
• Örnek/Model: Yansıtılan nesne ya da kavramın bir özelliği ya da örneği resimlenir.
• Rastlantısal: İmajın tamamıyla keyfi olarak düzenlenip, anlamının öğrenilmesi gerekmektedir.

• Kullanıcının kullanılan imaja aşina olması faydalıdır. Tanıdık gelen bir imgenin kullanılması öğrenme süresini azaltabilir.
• İkon veya sembollerin kolay anlaşılabilmesi için görüntü dili ve teknik açılardan net bir görüş sağlaması gereklidir.
• Sadelik genel tasarım ilkelerinden biri olduğu gibi, sembol ve ikonların yaratılması sürecinde de önem taşımaktadır.
  • Arayüz tasarımı içerisinde kullanılan ikon ve sembollerin tutarlı bir yapıda olması tasarımın genel yapısını da etkileyebilir.

Yazı tipi ya da yaygın kullanımı ile font, daktilo, şablon, tipo baskı bloğu veya bir kalem aracılığıyla oluşturulan el yazısını ortaya çıkarmak için kullanılan fiziksel bir araçtır.

Yazı karakteri, benzer tasarım anlayışı ile geliştirilmiş karakterlerin, harflerin, rakamların, sembol ve noktalama işaretlerinin bütününe verilen addır.

Yazı tipi seçimi yapılırken dikkat edilmesi gereken en önemli nokta, içeriklerin rahat okunabilir olmasıdır.

Punto (yaklaşık 0,376 milimetre), harf bloğunun boyutudur.

• Diyagramlar
• Şemalar
• Gerçek obje görünümleri

Bilgilendirme grafikleri, haritalar, tablolar ve grafikleri kapsayarak bilgiyi sözlü olarak aktarmaktansa görsel olarak iletişim kuran ögelerdir.

Rudolf Arnheim Görsel Düşünme adlı kitabında, insanların görsel tasarımı anlamada mantıksal bir yol olarak algısal ve bilişsel yönleri ayrı tutmaya eğilimli olduklarını tartışmıştır. Arnheim görsel algının, görsel düşünme olduğunu ve izleyicilerin bu görselleri yorumlarken karmaşık ancak oldukça hızlı bir sürece girdiklerini ileri sürmektedir.

Kökeni 1960'lara dayanan infografik kelimesi bilgi (information) ve grafik (graphic) kelimelerinin birleşiminden oluşmaktadır. İnfografikler, bilgi ya da verilerin çizelge ve grafikleri gibi görsel unsurlarla oluşturulan sunumudur.

Veri görselleştirme, tasarım ve bilimin ortak alanıdır. İstatistiksel verilerin ve yoğun bilgi kümelerinin çizelgeler, bilgi grafikleri ve tablolar kullanılarak oluşturulan görsel sunumudur. Veri görselleştirmede öncelikli amaç bilginin sade ve anlaşılır bir şekilde aktarılmasıdır. İnfografiklerden farklı olarak, veri görselleştirmeler çevrimiçi versiyonlarında kullanılan yazılım alt yapısı ile birlikte kendini güncelleyebilen bir yapıdadır.

• Veriler nasıl organize edildi?
• Hangi ögeler birbiriyle ilişkili?
• Bu verileri nasıl inceleyebilirim?
• Verileri farklı bir biçimde görebilmek için yeniden düzenleyebilir miyim?
• Yalnızca ihtiyacım olan veriyi nasıl görebilirim?
• Belirli veri değerleri nelerdir?

Animasyon ya da sözlük anlamıyla canlandırma, en basit haliyle herhangi bir görüntüyü hareketlendirmek anlamına gelir.

• Animasyonlar hareketi betimlemek için kullanılabilir.
• Dinamik geri bildirimler sağlamak için kullanılabilirler.
• Dikkat etmek için uygulanabilirler.
• Bilgisayar sisteminin çalıştığını göstermek için kullanılabilirler.

En iyi animasyon, kullanıcıların neler olup bittiğini anlamalarına dikkatlerini dağıtmadan yardımcı olandır.

1. Kullanıcı ihtiyaçlarının belirlenmesi
2. Sadelik
3. Tutarlılık
4. Anlaşılabilirlik
5. Ulaşılabilirlik
6. Uygulanabilirlik ve uyumluluk
7. Etkileşim (Interaction)
8. Ekran kontrolleri ve yönlendirme (Navigation)

Arayüz genel olarak menülerin, fotoğraf ve imajların, işaretçilerin ve ikonların içerikle bir arada sunulduğu bir tasarımdır.

• Yaş
• Cinsiyet
• Eğitim düzeyi
• Bilgisayar/bilişim tecrübesi
• Fiziksel yetenekleri ya da engelleri

Sadelik, kullanıcı arayüzünü mümkün olduğunca yalın haliyle korumanın önemini vurgulayan bir tasarım prensibidir.

• Kademeli bir gösterim anlayışı benimsenerek, elemanların ihtiyaç olana dek gizlenmesi,
• Sık kullanılan ve gerekli özelliklerin önce sunulması,
• Daha sofistike ve daha az kullanılan fonksiyonların gizlenmesi,
• Açık bir görsel hiyerarşinin sunulması,
• Önceden belirlenmiş, varsayılan ayarların kullanılması,
• Tasarımda bütünlük ve tutarlılığın sağlanması,
• Gereksiz elemanların çıkarılması gibi çözümler kullanılabilir.

Bir arayüz tasarımının ulaşılabilir olması için, geçmiş deneyimleri, eğitim durumu ya da fiziksel yetenekleri fark etmeksizin her kullanıcı tarafından anlaşılabiliyor olması gerekmektedir.

Etkileşim tasarımı, kullanıcının olası davranışlarını ve sistemin bu davranışları nasıl düzenleyeceği ve karşılık vereceği ile ilgilidir.

Etkileşim, iki veya daha fazla katılımcı arasındaki bilgi alışverişi olarak tanımlanabilir. Ayrıca etkileşim kavramını, iki veya daha fazla aktör arasında tekrarlanan dinlenme, düşünme ve konuşma süreçleri olarak da nitelenebilir.

İnsanlar veri oluşturmak ve uygulama içinde görevleri yerine getirmek için botun, kaydırma çubukları ve onay kutuları gibi kontroller kullanmaktadırlar. Bunlar gibi pek çok kullanıcı arayüzü elemanını işleme sokmak için ise pencere kontrolü, sekme görünümü kontrolü veya bölüm görünümü kontrolü gibi çeşitli kontrol birimleri devreye girmektedir.