�ݺ�ߣ

Editor's Notes

1. Dijital Medyada Estetik
2. Estetik Nedir? Aesthetic iːsˈθɛtɪk,ɛsˈθɛtɪk/ philosophy of beauty. Duyusal faaliyetlerimizin güzelle ilgili kısmını inceleyen sanat veya güzellik felsefesi Estetik; belirli bir büyüklükte birleşen bir bütün.
3. Estetik gereklilikler Oran (proportion) Simetri (symmetry) Uyum (harmony)   Tasarımda gereklilikler (boş bir cam bardak görseli) Zıtlık (contrast) (Öne çıkan öğeler, hiyerarşi) Algılanabilirlik (perceptibility) (sarı zemin üzerine beyaz yazı konması) Okunabilirlik (readability/legibility) (doğru yazı karakteri seçimi, tırnaklı, tırnaksız, koyu zeminde light yazı, açık zeminde daha dolgun yazı karakterleri) Hedef kitle (target group) (kadın, çocuk, erkek, evli, bekar, eğitim seviyesi, gelir düzeyi…) (Mücevher almak isteyen bir kadına iş makinası pazarlanır gibi bir yaklaşım sergilenmez) Ortam (medium) (masaüstü, mobil, TV) (slayt_03_bardak_su.jpg)
4. Bilgisayarın başlangıcı – Analog bilgisayar (Alan Turing) (Isırılmış elma)
5. Başlangıçta – In the beginning… (önce her şey bir gaz ve toz bulutuydu) (DOS Ekranı, the_c_prompt_by_blackevilweredragon.jpg)
6. Dijital medyanın evrimi (ilk html’den bugüne) (HTML görseli, html_f6-25.jpg)
7. Bilgisayar Evrimi (Dijital medya kapsamı - cihazlar, ekranlar) (Bilgisayarlar görseli, pc_evolution.jpg)
8. Arayüzde estetik (kötü sayfa -> iyi sayfa) (Responsive design – esnek tasarım hnüz bu tarihte gündemde değil) Kötü site örneği (havenworks.com) havenworks_com.jpg
9. Sadeleşmiş kötü site örneği (havenworks.com) havenworks_com_sade.jpg
10. Olması gereken site örneği (havenworks.com) havenworks_com_sade_font.jpg
11. Tasarım Süreci Konumlandırma (Ürünün/markanın masaya yatırılması) (Hedef kitle, sitenin/uygulamanın marka içeriklerini kullanıcıya nasıl ulaştırılacağı belirlenir. Örn. Bir çocuk kanalı konumlandırması ile spor kanalı konumlandırması farklı olur. Buna göre dil, söylem belirlenir) İhtiyaçların belirlenmesi (İçerik hedef kitleye hangi önceliklerle ulaşacak? Hangi içerik diğerinin önünde ya da baskın büyüklükte konumlandırılacak? Hedef kitlenin/cihazların demografik yapısı ne? Örn. Kullanıcıların kullandığı cihazların ekran çözünürlükleri ve tarayıcı yapıları ne?) Site/Uygulama yapısının ortaya konması Site/uygulama ağacının oluşturulması (Kategori-alt kategori yapısının, çapraz linklerin tanımlanması, sunulacak içeriğe göre kullanıcı deneyimi tasarlanır) Arayüz tasarımı (ve estetik) (Yukarıda belirlenen duruma göre cihaz yapısı unutulmadan (masaüstü/mobil) içerik yerleşimlerinin oluşturulur.
12. Tasarımda dikkat edilmesi gereken genel kurallar (Boşluklar, Hizalamalar, Yazı Karakteri Tutarlılığı) geleceğin iletişimcileri sayfalarında hizalamaların korunması, h1, h2, h3 yapısı gibi tutarlılığın ortaya konması (geleceğiniletisimcileri.com)
13. look & feel Bir restorana gittiğinizde önünüze gelen yemeğin görselliğinin vaad ettiği lezzet gibi mobil yapı, görselliği yanında işlevleri ile de (içerik akışı, kullanıcıyı yönlendirmesi, uyarıları, tüm işlevlerin doğru çalışması, vb.) sunduğu vaatleri yerine getirmelidir. (look_and_feel_02.jpg)
14. Basitlik (Simplicity) Kullanıcılar sitenize/uygulamanıza bir ihtiyaçlarını karşılamak için gelirler. Zorunlu olmayan öğeler sadece ziyaretçilerin ulaşmak istedikleri hedeflere ulaşmalarını zorlaştırır. Az renk kullanın, Yazı karakterlerinde tutarlı olun. En fazla 3 farklı yazı karakterini 3 veya 4 farklı boyutta kullanın.   Görsel Hiyerarşi (Visual Hierarchy) Görsel öncelikleri doğru tanımladığınızda kullanıcı doğal olarak en önemli içeriklere doğru çekilir.   Gezinilebilirlik (Navigability) Kullanıcıların ulaşmak istedikleri içeriğe en az çaba ile ulaşabilmelerini sağlayın. Öncelikli gezinim yapısını basit tutmak / mümkün olduğunca az ana kategori yapısı ortaya koyun. Footer alanında (siteler için) kategori/alt kategori yapılarını konumlandırın Her sayfada ekmek kırıntılarını (breadcrumbs) sunun. Site içi arama motorunun üst taraflarda konumlandırılması ve anahtar kelimeler ile arama yapılabilmesini sağlayın. Bir sayfada çok fazla gezinim seçeneği sunmayın Alt kategori yapısında çok derine inmeyin. Genellikle en fazla 3 kademeli bir yapı kullanın. Sayfa adresinde (url) sayfa içeriğinin bir tanımının olmasını sağlayın. Ziyaretçi bu sayede adresten de içerik hakkında bilgi edinebilir.   Tutarlılık (Consistency) Sitenin/uygulamanın tüm sayfaları aynı renk, yazı karakteri, tema, vb. öğelerle oluşturulmalı. Bu durum kullanılabilirlik ve kullanıcı deneyimi açısından olumlu bir geri dönüş sağlayacaktır. Ancak bu durumdan her sayfanın/içeriğin kesinlikle aynı yapıda oluşturulması gerektiği anlaşılmamalı. İçeriğe göre farklı sayfa düzenlemeleri yapmak doğru olacaktır. Sadece site kullanımı ve kurumsal duruşun pekiştirilmesi açısından tutarlılık sağlanmalı.   Ulaşılabilirlik (Accessibility) Farklı cihaz, işletim sistemi ve tarayıcılardan aynı içeriğe tutarlı şekilde ulaşılması sağlanmalı.   Geleneksellik (Conventionality) Genellikle ana menü üstte veya soldadır. Logo üst solda veya ortadadır. Logoya tıklandığında ana sayfaya gidilir. Fare bir linkin üzerine geldiğinde rengi değişir… gibi   Güvenilirlik (Credibility) İçerikleriniz ve vaadleriniz konusunda dürüst olun. Örneğin bir haber sitesi yapıyorsanız ve gündemi değiştirecek bir haber iddiası ile bir başlık atıp tahıl fiyatlarındaki 3 centlik düşüşten bahsetmeyin.   Kullanıcı Merkezlilik (User-Centricity) Kullanıcı için yapılmıyorsa kimin için yapılıyor bu sayfalar? Kullanıcı testleri yapın. Geri bildirimleri alın. Öğrendiklerinize göre güncellemeri yapın.
15. Mobil (En dijital medya) (mobile.jpg) Soru: Cep telefonu olmayan var mı? Soru: Akıllı telefonu olmayan var mı?   Dünya nüfusunun yarısı internet kullanıcısı (%50). Dünya nüfusunun %46’sı mobil internet kullanıcısı. Bilgisayarlardan internete giriş % 20 düşüşle %45’e, cep telefonlarından internete giriş %30 artışla % 50’ye çıkmış bulunmaktadır. 8.05 milyar mobil cihaz. 4.42 milyar akıllı telefonlardan (%55), 3.38 milyar özellikli (featured) telefonlardan (%42) internete giriyor.
16. Mobil Cihaz Evrimi (Mobil cihazlar görseli, mobile_devices_evolution.jpg)
17. Mobilin hayatımıza girmesi (ilk iphone görseli – 10 yıl geçti…) (iPhone-angles.jpg)
18. Her yerde ve her zaman (ubiquitous) (ubiquitous.jpg)
19. Mobilde kısıtlar (Limited…) Çok çeşitli cihaz yelpazesi (device variety) Çok çeşitli tarayıcı çeşitliliği (browser variety) Küçük ekran ölçüleri (small screens) Kısıtlı erişim hızları (limited speed) Kısıtlı mobil cihaz kapasiteleri (limited device capacity) Erişim maliyetlerinin yüksekliği (high access prices) Girdi yapacak tuş takımının yetersizliği (insufficient keypad) Fare (mouse) olmaması (lack of mouse) Çok yeni bir teknoloji olması ve az bilinmesi Kısıtlı çoklu-görev becerisi (Sürükle-bırak bu sene iPad’lerde iOS11 ile geldi) (limited drag&drop) Kısıtlı çoklu sayfa açma becerisi (limited multipage access) Kısıtlı gezinim (navigation) becerisi (limited navigation)   Dünyanın 2/3’ünün internet erişimi bulunmamakta. Mobil veri akışı kablolu-kablosuz internet erişimine göre daha düşük. Ancak mobil cihaz öncelikli internet kullanımı giderek artmakta. Özellikle Avrupa’da mobil öncelikli internet kullanım oranı yükseliyor. Ama benzer durum pek çok ülkede de görülmekte. Geniş bant erişim (3G, 4G) dünya genelinde %51’e ulaşmış bulunmakta.
20. Kurumsal arayüz nereye gitti? Where did corporate ID go? (spotify) Arayüzü değil içeriği sunmak.
21. İçerik (kraldır) Content (is the king)
22. İçerik görsellerinde estetik Mobil ortamlarda gelinen noktada kısıtlı ekran büyüklükleri ve hız sebebiyle arayüz yaklaşımları çok daha geri plana atılarak içeriğin daha rahat anlaşılabileceği alanlar yaratılmaya başlanmıştır. Arayüzün içerikten rol çaldığı yapıların giderek daha çok terk edilmektedir. İçeriği sunan görsellerde estetik anlayışı öne çıkmaktadır.   Skeuomorphism (Apple ilk dönemler) Flat Design (Windows) Material Design (Google) (skeuomorphism_flat_material.jpg)
23. TRT TV uygulaması V3 (trt_tv_mobil_V3.jpg)
24. UI yerine UX (ux-design.jpg) Kişilerin ilgili içeriğe ulaşmaktaki sarfettikleri çaba öngörülmekte.
25. Content yerine Context Bağlam “Bir sözcüğün cümle, bir cümlenin paragraf, bir paragrafın metin içindeki yerini çevreleyen, ondan önce ya da ondan sonra gelen, söz konusu sözcük, cümle ya da paragrafın anlamını, değerini belirleyen öğeler bütünü. Bir sözcüğün cümle içindeki konumu. Tasarımdaki karşılığı, site veya uygulama arayüzünün (ve görsellerin), kullanım alanı ve şekline göre belirlenmesi, arayüz unsurlarının içeriğe göre değişmesi, içeriğin ya da reklamın (örn. Coğrafi konum, hareket hızı, bulunulan ortamdaki ışık yapısı, demografi, vb.) kullanıcıya sunulma durumu denilebilir.
26. Bitiş   26. Gelecekte (Future-of-Technology-1.jpg)
27. 3D Web Mobil cihazlarda donanımın güçlenmesi, veri kullanım fiyatlarının ucuzlaması, tarayıcı desteğinin ve bant genişliğinin artması ile 3D Web daha da yaygınlaşacaktır. Bir site/uygulama içine 6 farklı arayüz/içerik/görsel konabilecektir. (x, y, z) (+,- eksenleri). Ya da mesaj, 3D uzay içinde daha zengin bir kullanıcı deneyimi ile kullanıcıya aktarılacak. (Eğitim sektöründe kullanımı) Web3D Consortium… (3D_Web.mp4)
28. Artırılmış Gerçeklik Gerçek mekan üzerine gerçek zamanlı bindirilmiş içeriklerin giderek yaygınlaşan şekilde daha çok cihazda desteklenmesi, Tarayıcı içi desteğin gelişmesi, Apple ARKit girişimi (AR.jpg)
29. Giyilebilir teknolojiler / Girilebilir Teknolojiler Telefonu kulağına tutmadan yolda yürüyenler giderek artmakta. Aynı durum saat, gözlük, kulaklık, kemer gibi cihazlarla bazı vücut hareketlerinin artması şeklinde görülecektir.   Bütünleşik çözümler. Dışarıda, evde, arabada kullanıcı olarak yer almak. Etrafımızdaki nesnelerin ekran olabilmesi (Masa, duvar, camlar, buzdolabı, beyaz eşyalar, vb.) Sayısal yardımcılarımız. Arabadan inip eve girerken unuttuğumuz poşeti hatırlatan siri vb. bir uygulama. Ya da arabadan getirdiğimiz eşyaları buzdolabına yerleştirirken sütü unuttuğumuzu hatırlatan yardımcı (çünkü süt siparişi verdiğimizi uygulama da buzdolabı da biliyor. Sütün bittiğini buzdolabı hatırlattı bize)   Sayısal ayak izlerimiz… (cambridge analytica) (Dr Michal Kosinski) Big data
30. Bir fikirden yola çıkmak Bir fikirden yola çıkın. Bu fikir her mecrada kurumunuzun/kanalınızın tutarlılığını güçlendirebilir. Bir görsel örnek (arayüz aynı görseller değişiyor) TRT HD örneği (bir çıkış noktası olarak)