In-house training presentation.

1. Graphical User Interface & Emotinal Design
&Grafiksel Kullanıcı Arayüzü
Duygusal Tasarım
.

2. Adım adım…
• UX, UI, Usability (Kullanıcı Deneyimi, Kullanıcı Arayüzü, Kullanılabilirlik)
• Kullanıcı Arayüzler - İlk İzlenim
• Tasarıma Başlamadan Önce - Analiz Süreci
• Duygulara Yönelik Tasarım (Estetik ve Kullanılabilirlik)
• Arayüz Tasarım Prensipleri (Standartlar, Renk, Tipografi, Öğeler, Etkileşim)
• Ek olarak; Dieter Rams ve İyi Tasarımın 10 Prensibi

3. &UX, UI, Usability
.Kullanıcı Deneyimi, Kullanıcı Arayüzü, Kullanılabilirlik

4. User Experience (Kullanıcı Deneyimi)
UX, Kullanıcı ihtiyacına yönelik çözümün stratejisini, gereklerini ve
kapsamını belirleyen kavramsal bir tasarım çalışmasıyken,
UX, UI, Usability
Kuru
Temizlemeci
Kullandığımız
Matkap
Gezindiğimiz
Web Siteleri

5. User Interface (Kullanıcı Arayüzü)
UI, gerçekleştirilen bu kavramsal çalışmalar ışığında kullanıcının somut
olarak algılayabileceği arayüzü tasarlama görevini üstleniyor.
UX, UI, Usability
Çamaşır Makinesi
(Dijital Panel)
Sıklıkla Kullandığımız
Kapı Zilleri
Her Gün Kullandığımız
Kapı Kolları

6. Usability (Kullanılabilirlik)
Usability ise, kullanıcının UI ile etkileşime geçtiği sistemin, kullanıcı için
ne kadar verimli çalıştığı ile ilgili bir niteliği olarak tanımlanabilir.
UX, UI, Usability

7. Usability (Kullanılabilirlik)
UX, UI, Usability
Öğrenilebilirlik Learnability
Hatırlanabilirlik Memorability
Hatasızlık Faultlessness
Verimlilik Efficiency
Memnuniyet Satisfaction

8. &Kullanıcı Arayüzleri
İlk İzlenim
.

9. Google Reader VS. Flipboard
Kullanıcı Arayüz Tasarımı - İlk İzlenim

10. &Tasarıma Başlamadan Önce
Analiz Süreci
.

11. Arayüz Tasarımcısının Bilmesi Gerekenler
Ürünün Hedefi Ne?
Kullanıcılar Kim? Onlardan Öğrenebileceklerimiz?
Teknik Yeterliliklerimiz Neler?
İletmek İstediğimiz Duygusal Mesaj Ne?
Tasarıma Başlamadan Önce - Analiz Süreci

12. &Duygulara Yönelik Tasarım
(Estetik ve Kullanılabilirlik)
.

13. Google, 2014 yılı trend raporlarında,
Mayıs ayında kaybettiğimiz Amerikalı yazar ve aktivist Maya Angelou‘ya
küresel bir rol model başlığı ile yer vermiş. Bizler Maya’yı, miras bıraktığı
bilge sözler ile hatırlayacağız ama o bize “İnsanlar söylediklerinizi ya da
yaptıklarınızı unutur, ama neler hissettirdiğinizi asla unutmaz.” diyor.
Farkettiniz mi? İnsan hafızası hakkında çok değerli bir ipucu veriyor.
Maya Angelou’ya (Yazar, Şair, Aktivist ve Şovmen)
Duygulara Yönelik Tasarım (Estetik ve Kullanılabilirlik)

14. Designing for Emotion kitabının yazarı ve MailChimp’in Kulanıcı
Deneyimi Direktörü Aaron Walter, kişilikleri üzerinden bizimle iletişime
geçen ve bu sayede duygusal bağ oluşturmayı başaran tasarımlar için
Emotion Design (yani duygularımıza hitap eden tasarım) kavramını
kullanıyor.
Tasarım kelimesi, aklınıza illa fiziki bir objeyi getirmesin. Bu bir web sitesinin premium
üyeliği, pahalı bir süper marketin alışveriş deneyimi ya da akıllı telefon da olabilir.
Emotinal Design Nedir?
Duygulara Yönelik Tasarım (Estetik ve Kullanılabilirlik)

15. Biz Onların Kişiliklerini Seviyoruz
İnsanları etkileşime davet eden kişilikleri, ürüne eklemenin bir çok pratik
yolu var. Mesela, MailChimp’in postacı maymunu (adı Freddie), çoğu
kişinin sıkıcı bulduğu newsletter servisi için yaratılmış neşeli bir kişilik.
Duygulara Yönelik Tasarım (Estetik ve Kullanılabilirlik)

16. Biz Onların Kişiliklerini Seviyoruz
Threadless’ın, satın al butonuna tıklandığında gülümseyen alışveriş sepeti
ya da beyzbol şapkasını ters takan yaramaz çocuklara benzeyen Mini
Cooper’lar, insanlarda pozitif duygular uyandırırlar.
Duygulara Yönelik Tasarım (Estetik ve Kullanılabilirlik)

17. Estetik ve Pozitif etkisi
Duygulara Yönelik Tasarım (Estetik ve Kullanılabilirlik)

18. Emotinal Design,
duygularınıza hitap etmeyi başarabilmiş olan tasarımdır.
Donald Norman
Estetik ve Pozitif etkisi
Duygulara Yönelik Tasarım (Estetik ve Kullanılabilirlik)
“ “

19. &Arayüz Tasarım Prensipleri (Standartlar,
Renk, Tipografi, Öğeler, Etkileşim)
.

20. Arayüz Tasarımcısının Bilmesi Gerekenler
Tasarım Standartları (Hizalama, Tutarlı, Öğrenilebilir Olması, Hiyerarşi,
(Simetrik/Asimetrik Denge ve Estetik)
Renk seçimi ve beyaz alan kullanımı
Tipografi
Tasarım Öğeleri (Fotoğraf, Şekil(Button, Input), Grafik(İllüstrasyon, Icon))
Etkileşim ve Mikro Etkileşim Tasarımı
Arayüz Tasarım Prensipleri

21. Tasarım Standartları
Hizalama, Tutarlı, Öğrenilebilir Olması, Hiyerarşi, Simetrik ya da
Asimetrik Denge ve Estetik
Arayüz Tasarım Prensipleri

22. Renk Seçimi ve Beyaz Alan Kullanımı
Güçlü bir arkaplan oluşturun.
Arayüz Tasarım Prensipleri

23. Tipografi
Tipografi hiyerarşisini karmaşıklığı ortadan kaldırın ve ekran tanımlarına
uygun şekilde okunabilir olmasına dikkat edin.
Arayüz Tasarım Prensipleri

24. Tasarım Öğeleri
Arayüz Tasarımında fotoğraf kullanımı;
kişilere göre farklı anlamlar ifade edebilir ve değişkendir.
Arayüz Tasarım Prensipleri

25. Tasarım Öğeleri
Kullanıcıyı bilgilendirirken, bilgi metni ile birlikte hızlı anlaşılmasını sağlamak için
grafik(İllüstrasyon, Icon) kullanın. Arayüz tasarımının da estetik görünmesini bu şekilde
sağlayın. Görsel hafızada etki yaratabilmek için hiyerarşiye uygun şekillendirin.
Arayüz Tasarım Prensipleri

26. Tasarım Öğeleri
Şekil; butonlar ya da diğer form elementleri
kullanıcıların aksiyon aldıkları ya da alacakları önemli tasarım öğelerindendir.
Arayüz Tasarım Prensipleri

27. Etkileşim Tasarımı
Arayüz Tasarım Prensipleri

28. Etkileşim Tasarımları
Arayüz Tasarım Prensipleri

29. Mikro Etkileşim Tasarımı
Arayüz Tasarım Prensipleri

30. Mikro Etkileşim Tasarımı
Arayüz Tasarım Prensipleri

31. &Dieter Rams ve
İyi Tasarımın 10 Prensibi
.

32. “Less is more”
“Daha az ama daha iyi…”
Dieter Rams

33. İyi Tasarım;
Yenilikçidir
Dieter Rams ve İyi Tasarımın 10 Prensibi
camera concept by Kim Seongjin

34. İyi Tasarım;
Ürünü Faydalı Kılar
Dieter Rams ve İyi Tasarımın 10 Prensibi

35. İyi Tasarım;
Estetiktir
Dieter Rams ve İyi Tasarımın 10 Prensibi

36. İyi Tasarım;
Ürünü Anlaşılır Kılar
Dieter Rams ve İyi Tasarımın 10 Prensibi

37. İyi Tasarım;
Mütevazıdır
Dieter Rams ve İyi Tasarımın 10 Prensibi

38. İyi Tasarım;
Dürüsttür
Dieter Rams ve İyi Tasarımın 10 Prensibi

39. İyi Tasarım;
Zamansızdır
Dieter Rams ve İyi Tasarımın 10 Prensibi

40. İyi Tasarım;
Tüm Ayrıntılarıyla
Tamamdır
Dieter Rams ve İyi Tasarımın 10 Prensibi

41. İyi Tasarım;
Doğayla Dosttur
Dieter Rams ve İyi Tasarımın 10 Prensibi

42. İyi Tasarım;
Mümkün Olduğunca
Az Tasarımdır
Dieter Rams ve İyi Tasarımın 10 Prensibi

43. Basit Düşün (Daha az ama daha iyi.)
Kim bilir, belki bu temellerden hareketle kendi tasarım ikonlarınızı
yaratacaksınız. Yeter ki daha iyiyi istemekten ve bunu yaparken daima
basit düşünmekten vazgeçmeyin.
Dieter Rams ve İyi Tasarımın 10 Prensibi

44. Esinlenin ve Geliştirin (Daha az ama daha iyi.)
Dieter Rams ve İyi Tasarımın 10 Prensibi

45. Basit Düşün
Bu hikâye, Sık sık yüzleştiğimiz; en açık çözümlerin, çoğunlukla içinde
kalmayı kendimize dayattığımız kısıtlar yüzünden, akla en zor gelen
çözümler olmasını sembolize etmektedir.
Grafiksel Kullanıcı Arayüzü ve Duygusal Tasarım

46. &Teşekkürler
.