Ders notları:
Bilgi Aktarımı
Çizgi, şekil, alan, boyut, doku ve renk konularından oluşan görsel tasarım ögeleri, bir bilgi aktarımında kullanılan temel unsurları oluşturmaktadırlar.
Alan: Bir web sayfasında kullanıcının ihtiyaçları doğrultusunda sunulacak içeriğin yayınlanacağı yer olarak tanımlanabilir (Shaver, 2011)
Şekil: Bir yüzeyde oluşturulan iki boyutlu biçimler olarak tanımlanabilir
Renk; estetik düzeni sağlama ve anlaşılırlığı etkileyici, insanları dikkatleri ve eylemlerinde rol oynayabilen bir unsur olarak ifade edilebilir.
Çizgi; yön ve hareket gösteren, şekilleri ayırma ya da birleştirmede kullanılabilen, kullanıcının dikkatinin belirli bir yöne çekmekte yararlanılan bir öğedir.
Renk
Derinlik, grafiğin görüntüleneceği renk kapasitesini ifade eden ve görüntünün kalitesini etkileyen, rengin parlaklığı ile ilgili bir kavramdır. Renk derinliği “bit” cinsinden ifade edilmektedir
Ton, rengin parlaklık derecesini ifade eden bir kavram olup ışık derecesi ile yakından ilişkilidir.
Parlaklık, bir piksel tarafından emilen ya da yayılan yani bir cisimden geri dönen ışık miktarını ifade eden bir kavramdır.
Yeşil renkte zıt kullanımlar renk körleri in zorluk çıkarabilir. Sadakati, zekâyı ve huzuru temsil eden, yeniden doğuşun ve büyümenin sembolüdür.
Hex Rengin işaretleme dillerince doğru olarak tanımlanabilmesi amacıyla kırmızı, yeşil ve mavi renklerin her biri için toplamda üç baytlık 16’lı sayı sistemince üretilen kodlama yapısına denir.
Işık şiddeti yüksek, yani parlak renklerle aynı rengin nötrleştirilmiş tonlarının birarada kullanılması temeline dayanan renk kullanım ilkesine Nitelik Kontrastı denir.
• 1 bit renk derinliğine sahip bir noktacık 21 =2 adet renk (siyah ve beyaz) alabilir.
• 2 bit renk derinliğine sahip bir noktacık 22 =4 adet renk alabilir.
• 3 bit renk derinliğine sahip bir noktacık 23 =8 adet renk alabilir.
• 4 bit renk derinliğine sahip bir noktacık 24 =16 adet renk alabilir.
• 6 bit renk derinliğine sahip bir noktacık 26 =64 adet renk alabilir.
Renk Armonisi
Tasarımda bitişik renklerin tercih edilmesiyle ortaya çıkan renk armonisidir. Bitişik yani uyumlu renkler yan yana geldiklerinde birbirlerini gücünü kırarlar ve daha yumuşak bir görünüm sağlarlar. Sarı, yeşil; kırmızı, turuncu; mor, mavi renk çemberinde yan yana yer almakta ve analog renk armonisi oluşturan renkler olarak adlandırılmaktadır.
Bir rengin değişik tonlarıyla meydana getirilen armoni, monokromatik armoni olarak adlandırılmaktadır.
Polokrom Armoni Monokromatik armoninin aksine polokrom armoni iki veya daha fazla rengin armonisini ifade etmektedir.
Lab Renk Modeli: Rengin nasıl oluştuğunu değil insan tarafından nasıl algılandığını temel alan bir modeldir.
Yeşil + Kırmızı = Sarı
Görsel Türleri
Anlatılmak istenen durumla ilişkili olan farklı nesnelerle oluşturulan görsellere analojik görseller denir.
Gerçekçi Görseller: Anlatılmak istenen objenin gerçek halidir.
Yorumlayıcı Görseller: Teorik ya da soyut ilişkileri göstermek için kullanılırlar.Elektrik devresinin şematik görünümü, kroki tasarımlar ya da alt yapı tasarımları örnek olarak verilebilir.
Örgütsel Görseller: Farklı öğeler arasındaki niteliksel ilişkileri ifade etmek için kullanılırlar. Yaygın olarak tercih edilen örgütsel görseller arasında sınıflandırma çizelgeleri, zaman çizgileri, akış şemaları ve haritalar gösterilebilir
Dönüşümsel Görseller:
Web tasarım ilkeleri olarak sayılabilecek birçok farklı unsur vardır. Ancak bunlar arasında en çok dikkat edilmesi gerekenler İçerik, Hız, Kullanılabilirlik, İşlevsellik, Uyumluluk ve Görsel Tasarımdır.
Web sitesi tasarımında sitenin sahip olduğu teknik özelliklerden ve alt yapısındaki kaliteden çokkullanıcı ne gördüğü ve neye ulaşmak istediğiyle ilgilenir. Ziyaretçilerin çok fazla bağlantı tıklamadan gezinim bileşenleri üzerinden istediğine erişebilmesi işlevsellik ile ilişkilidir.
Kullanılabilirlik bir ürünün belirli kullanıcılar tarafından belirli amaçlarla etkili, verimli ve belirli bir deneyim çerçevesinde memnuniyetle kullanabilme derecesi
Verimlilik kullanıcıların görevlerini yaparken sistemin onları ne kadar desteklediğidir. Burada yanıt aranması gereken soru: Kullanıcılar tasarımı öğrendikten sonra, görevleri ne kadar hızlı tamamlamaktadır?
Görsel bileşenlerin başarılı bir şekilde tasarlanması için farklı disiplinlerden uyulması gereken çeşitli ilkeler ve kurallar bulunmaktadır. Bu kurallar ve ilkelerden bazıları aşağıda sıralanmıştır. Bunlar;
• hedef kitle özellikleri,
• hedef kitle ihtiyaç ve ilgileri,
• kullanılabilirlik,
• çokluortam ilkeleri,
• insan-bilgiyar etkileşimi prensipleri,
• görsel tasarım ilkeleri ve
• görsel algı kuralları şeklindedir.
Görsel Tasarım İlkeleri
Genel olarak bir birine yakın bilgilerin yer aldığı çalışmalarda birçok görsel tasarım ilkesi ve önemi ifade edilmiştir. İlgili bilgiler doğrultusunda görsel tasarım ilkeleri incelenmiş ve en çok dikkat edilmesi gereken ilkeler;
Bütünlük,
Denge,
Simetri/Asitmetri,
Vurgu ve Hizalama şeklinde derlenmiştir.
Vurgu: Bir web sayfasında tıklandıktan sonra aktif menünün farklı bir şekle dönmesi hangi görsel tasarım ilkesinin kullanımına örnektir.
Denge ve simetri ilkesi: Kullanılacak içerik unsurlarının ve görsel unsurların yatay ve dikey olarak web sitesini oluşturan sayfaların her birinde denk biçimde yerleştirilmesidir.
Yazım
Dan Mayer (2010) font seçimi için beş kural belirlemiştir. Bu kurallar:
• Duruma uygun seçim
• Font ailelerini bilme (Şekil 5.8)
• Arka planın metnin önüne geçmemesi
• Kullanım amacına göre seçim
• Kuralsızlık
Serif: Tırnak demektir. Karakterlerin uç kısımlarındaki tırnaklı kısımları ifade eder.
Sans Serif: Sans, Fransızca kökenli bir terimdir ve olumsuzluk anlamı katar. Tırnaksız karakterleri ifade eder.
İdeal satır arası boşluk ölçüsüne harfin punto değerine 2 eklenerek ulaşılır. Örneğin metinde 14 punto ile yazı yazıllyırsa, satır arası boşluk değeri 16 (14+2) olmalıdır.
Kullanıcı ile etkili iletişim kurmada yararlanılan yazım kurallarına göre bir satırda en çok 18 kelime veya 50-80 karekter kullanılmalı.
Duyarlı web tasarımlarının avantajlar şunlardır: Kalite, erişebilirlik, süreklilik, düşük maliyet, bakım ve güncelleme kolaylığı
Web için görsel tasarımda iyi planlanmış bir gezinim Kullanıcılara gerçekleştirdikleri eylemleri kontrol etmelerini sağlar.
web sitesi hazırlarken içerik açısından kullanıcıların beklentilerini ifade edebileceği formlara yer verilmelidir.
Firebug: Bu güçlü Firefox eklentisi, HTML ve CSS kodlarını görüntülemenize, stilleri ayarlamanıza ve sonuçları hemen görmenize yardımcı oluyor.
Görsel kimlik elemanının tanınırlılığı markanın akılda kalıcılığını sağlar.
Amblem, bir kurumun, bir ürünün ya da bir hizmetin yapısını ve niteliklerini tanımlamak amacıyla tasarlanan görsel simge olarak tanımlanabilir.
Amblem tasarımında metinler yerine somut, soyut ya da grafiksel görsellerden yararlanılır.
Kültürel etmenler ve yaşantı yoluyla sonradan yüklenmiş anlamlar barındıran görsel yapılara İdeogram denir.
Etkileşimli tasarımda görünürlük için sistem kullanıcılara ne olup bittiği hakkında makul bir süre içinde uygun geri bildirimler sağlamalıdır.
Etkileşimli bir tasarım oluşturabilmek için bazı tasarım ilkelerine dikkat etmek gerekmektedir. Bu tasarım ilkeleri görünürlük, geri bildirim, kısıtlar, tutarlılık ve sağlarlık ve haritalama/eşlemedir.
Tutarlılık: Benzer görevlere ulaşmak için benzer ögelerin ve benzer işlemlerin kullanıldığı arayüz tasarımı kullanılabilirliğin ilkesidir.
Bir web sitesinin gezinim, içerik, başlık gibi bütün alanlarındaki çeşitli unsurlarının ve bu unsurlar arasındaki ilişkilerin daha kolay algılanması ve anlaşılması için oluşturulan düzene hizalama denilir.
Grafik tasarımı, bir mesajı görselleştirip alıcıya iletmek için resim, metin, grafik ve çizimlerin algılanabilir bir biçimde iki boyutlu veya üç boyutlu olarak tasarlanmasına yönelik yaratıcı bir süreçtir.
Site şablonlarının belirlenmesinde dikkat edilmesi gerekenler: Sitenin amacı,Hedef kitle özellikleri,Hedef kitle tercihleri,Sitenin sahip olacağı içerikler,Önceden tasarlanmış logo vb. grafiklerin yapısı dikkate alınmalıdır.
Tablo tabanlı yerleştirme içeriği bölümler, satırlar ve kutular, bazında hizalamaya olanak verir.
Kullanıcının cinsiyet bilgisini belirttiği bir formda bu bilgi alanı için hangi radio butonu en uygun seçim olur.
Bir şirketin tasarımlarının sadece tanıtım amacıyla gösterimi için Behance en uygunudur.
Photoshop’un mobil uygulama tasarımı için sunulan çalışma yüzeyi boyutları; Microsoft Surface Pro (1920, 1080)
Gezinme kullanıcıların web sitesini kullanırlarken gerçekleştirdikleri eylemleri ifade eder. Gezinim sırasında kullanıcıların karmaşık sayfalar içerisinde kaybolmaması için, web sitesini planlarken
-sayfaları hiyerarşik olarak düzenleme,
-kullanıcı geçmişlerini kullanma,
-tıklanabilir alanlar tasarlama ve
-üç tık kuralını aşmamak önemli stratejiler olarak söylenebilir.
İkon: bilgisayarlarda ve grafiksel arayüzlerde bir dosyayı, dizini veya uygulamayı temsil eden simge, resim, görüntüyü ifade eden grafiksel imgedir.
Kerning: metni oluşturan harfler arasındaki boşluk
Yönlendirme bileşenleri
Yönlendirme bileşenleri arasında; site düzeni, site haritası, menüler, butonlar, linkler, hiyerarşik veri işaretleyicisi (breadcrumbs), etiketler, rozetler, büyük yazılar (jumbotron), uyarılar, ilerleme çubukları gibi birçok bileşen yer almaktadır.
Rozetler, bir linkte kaç sayıda bildirim olduğunu gösteren bileşenlerdir. Özellikle sosyal ağ sitelerinde sık- ça karşımıza çıkan rozetler bildirimler, mesajlar gibi alanlarda kaç sayıda bildirim veya mesaj olduğunu rakamsal olarak gösteren yapılardır.
Etiketler kullanıcı veya Web sitesi içeriğindeki herhangi bir durum bilgisinin anahtar kavramlar aracılığıyla tanımlanması ve aramalar yoluyla tekrar bulunabilirliğinin sağlanması için kullanılmaktadır.
Web 3.0’ın kişiselleştirme, yapay zeka ve hareketlilik olmak üzere üç özelliği vardır.
Stanford Web Güvenilirlik Araştırmasına (Stanford Web Credibility Research) göre kullanıcıların %75’i şirket, kurum veya kuruluşun güvenirliğini web sitelerinin tasarımına dayalı olarak değerlendirdiklerini göstermektedir.
Etkileşim Tasarımı, insan ve bilgisayar arasındaki iki yönlü iletişimin tasarlanmasıdır.
Bilişsel mühendislik, insan-bilgisayar etkileşimi, bilişsel ergonomi ve insan faktörü etkileşim tasarımının disiplinler arası çalışma konularıdır. Yazılım Mühendisliği ise etkileşim tasarımınla ilgilenen akademik bir disiplindir.
Portfolyo hedef kitle özelliklerine, sektör ihtiyaçlarına ve portfolyo amacına göre aşağıdaki kararların alınması gerekir.• Arama çubuğu, site haritası ve menü gibi gezinim bileşenlerinin neler olacağı.• Portfolyo sitesinin e-ticaret sistemiyle entegre edilip edilmeyeceği.• Online sipariş ve satış işlemlerinin yapılıp yapılmayacağı.• Kullanıcı giriş sisteminin olup olmayacağı.• Sosyal medya bileşenlerinin kullanılıp kullanılmayacağı.• Önceki kararlara göre portfolyonun sıfırdan kodlanması veya hizmet alımının kararlaştırılması.
Logogram ise özellikle uzak doğu dillerinde örneklerine sıkça rastlanan, bir kelime ya da kelime öbeğine karşılık gelen işaretler için kullanılan bir kavramdır. Bu tür işaretleme örneklerine mağara duvar resimlerinde de rastlanmaktadır.
“İletişim bilgileri, iletişim formu, yorum ekleme, eşzamanlı ya da eşzamansız destek ve ulaşım bilgilerine yer verilmesi” gibi uygulamar iyi bir web sitesinin Aidiyet hissi altında değerlendirilir.
Gestalt kuramı yakınlık,
benzerlik, tamamlama,
devamlılık
ve şekil-zemin olmak
üzere beş temel ilkeye dayanmaktadır.
Sayfalardaki hiyerarşik düzenin sağlanması ve oluşturulabilmesi için;
• Harf büyüklükleri
• Yazı karakterlerinin farklılıkları
• Bold, italik gibi değişkenlikler önemlidir.
Furtive, ızgara yapısının ve öğelerin boyutlandırılmasında rem parçası için Flexbox ve SVGs kullanımı gibi gelişmiş web standartları etrafında geliştirilmiş CSS çerçevesidir. Gelişmiş web tasarımı projelerinde kullanılmak üzere geliştirilmiş yapıdır. Esnek ızgara yapısıyla sayfa yapıları rahatlıkla cihaz boyutuna göre ölçeklenebilir.
Messaris (1994) görsel algıyı, bireylerin kavramlara yönelik farkındalık oluşturma süreci olarak tanımlamaktadır.