Slide 1

Slide 1 text

T A S A R I M RIZA SELÇUK SAYDAM

Slide 2

Slide 2 text

@rssems #UXCamp14 günün menüsü… Giriş Araştırma ve Veri Tasarım Süreçleri Arayüz Tasarım Prensipleri Optimizasyon Sorular ve Cevaplar

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

RIZA SELÇUK SAYDAM UX Designer of izlesene.com at Nokta @rssems #UXCamp14

Slide 5

Slide 5 text

@rssems #UXCamp14

Slide 6

Slide 6 text

@rssems #UXCamp14

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Great UI isn’t there

Slide 13

Slide 13 text

Great UI isn’t there

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

@rssems #UXCamp14 VERİ ARAŞTIRMA ve "Nereye gitmek istedigini bilmiyorsan hangi yoldan gideceğin farketmez." Cheshire

Slide 19

Slide 19 text

@rssems #UXCamp14 Data, Not Design, is King in Age of Google Age of Data "We let the math and the data govern how things look and feel."

Slide 20

Slide 20 text

@rssems #UXCamp14 “If you torture the data long enough, it will confess” ! Ronald Coase (Nobel Prize in Economics)

Slide 21

Slide 21 text

@rssems #UXCamp14 Mind Map Zihin Haritası www.mindnode.com

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

69%

Slide 24

Slide 24 text

84%

Slide 25

Slide 25 text

39%

Slide 26

Slide 26 text

@rssems #UXCamp14 Kullanıcı Araştırması

Slide 27

Slide 27 text

@rssems #UXCamp14 Hedef Kitle, Persona uxpin.com

Slide 28

Slide 28 text

@rssems #UXCamp14 Hedef Kitle, Persona uxpin.com

Slide 29

Slide 29 text

@rssems #UXCamp14 Business Model Canvas Kanvas İş Modeli uxpin.com

Slide 30

Slide 30 text

@rssems #UXCamp14 "Customer Journey Map" Kullanıcı Deneyim Haritası thisisservicedesignthinking.com

Slide 31

Slide 31 text

@rssems #UXCamp14 "Customer Journey Map" Kullanıcı Deneyim Haritası thisisservicedesignthinking.com

Slide 32

Slide 32 text

Customer Journey Map

Slide 33

Slide 33 text

@rssems #UXCamp14 and Content Strategy Information Architechturtre

Slide 34

Slide 34 text

@rssems #UXCamp14 Competitive Analysis Benchmark Google Analytics

Slide 35

Slide 35 text

TASARIM

Slide 36

Slide 36 text

@rssems #UXCamp14 Increasing the number of choices will increase Hick-Hyman Law Source: http://1.usa.gov/1whJPxj

Slide 37

Slide 37 text

@rssems #UXCamp14 Hick’s Law

Slide 38

Slide 38 text

@rssems #UXCamp14 Hick’s Law

Slide 39

Slide 39 text

@rssems #UXCamp14 Source: http://en.wikipedia.org/wiki/Fitts The closer and bigger something is to you, the easier & faster it is for you to touch it (accurately). Fitts’s Law

Slide 40

Slide 40 text

@rssems #UXCamp14 Fitts’s Law

Slide 41

Slide 41 text

@rssems #UXCamp14 Dokunmatik

Slide 42

Slide 42 text

@rssems #UXCamp14 Dokunmatik

Slide 43

Slide 43 text

@rssems #UXCamp14 Dokunmatik

Slide 44

Slide 44 text

@rssems #UXCamp14 Dokunmatik

Slide 45

Slide 45 text

@rssems #UXCamp14 The number of objects an average person can hold in working memory is about 7±2. Miller’s Law

Slide 46

Slide 46 text

@rssems #UXCamp14 The number of objects an average person can hold in working memory is about 7±2. Miller’s Law

Slide 47

Slide 47 text

@rssems #UXCamp14 Kalem, Grid Defter, Hayal Gücü Eskiz

Slide 48

Slide 48 text

@rssems #UXCamp14 Kalem, Grid Defter, Hayal Gücü Eskiz

Slide 49

Slide 49 text

@rssems #UXCamp14 Kalem, Grid Defter, Hayal Gücü Eskiz

Slide 50

Slide 50 text

@rssems #UXCamp14 Eskiz Örneği

Slide 51

Slide 51 text

@rssems #UXCamp14 Fonksiyonel, ayrıntılı taslak Wireframe moqups.com & balsamiq.com

Slide 52

Slide 52 text

@rssems #UXCamp14 Wireframe blueprint for design

Slide 53

Slide 53 text

@rssems #UXCamp14 Fonksiyonel, ayrıntılı taslak Wireframe moqups.com & balsamiq.com

Slide 54

Slide 54 text

@rssems #UXCamp14 Wireframe Örneği

Slide 55

Slide 55 text

@rssems #UXCamp14

Slide 56

Slide 56 text

@rssems #UXCamp14 Wireframe ve Renkler

Slide 57

Slide 57 text

@rssems #UXCamp14 Amatör de olsa…

Slide 58

Slide 58 text

@rssems #UXCamp14 Kompleks de olsa…

Slide 59

Slide 59 text

@rssems #UXCamp14 Bir örnek daha…

Slide 60

Slide 60 text

@rssems #UXCamp14 ve Lorem Ipsum Kelimeler

Slide 61

Slide 61 text

@rssems #UXCamp14 ve Lorem Ipsum Kelimeler

Slide 62

Slide 62 text

@rssems #UXCamp14 Evet, bazı şeyler wireframe’lenemez! Peki ya? http://insideintercom.io/things-cant-wireframed/

Slide 63

Slide 63 text

@rssems #UXCamp14 Ama…

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

@rssems #UXCamp14 Wireframe’in gerçek içerik ile birleşimi Mockup

Slide 66

Slide 66 text

@rssems #UXCamp14 invision, flinto, marvel, pop Prototip

Slide 67

Slide 67 text

@rssems #UXCamp14 Prototip Araçları Proto.io - Marvel InVisio Flinto

Slide 68

Slide 68 text

@rssems #UXCamp14 Arayüz Tasarımı

Slide 69

Slide 69 text

@rssems #UXCamp14 MOLASI KAHVE

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

@rssems #UXCamp14 Arayüz Tasarımı

Slide 72

Slide 72 text

@rssems #UXCamp14 Arayüz Tasarımı

Slide 73

Slide 73 text

@rssems #UXCamp14 + Skala Preview Photoshop

Slide 74

Slide 74 text

@rssems #UXCamp14 + Mirror Sketch App

Slide 75

Slide 75 text

@rssems #UXCamp14 Sık görülen problemlere ortak çözümler Design Pattern

Slide 76

Slide 76 text

@rssems #UXCamp14 Sık görülen problemlere ortak çözümler Design Pattern

Slide 77

Slide 77 text

@rssems #UXCamp14 Sık görülen problemlere ortak çözümler Design Pattern

Slide 78

Slide 78 text

@rssems #UXCamp14 Android, iOS, Windows Phone… Platform Farkı

Slide 79

Slide 79 text

Typography

Slide 80

Slide 80 text

@rssems #UXCamp14 Color Theory Renk

Slide 81

Slide 81 text

@rssems #UXCamp14 Color Theory Renk

Slide 82

Slide 82 text

Renk http://www.rocket-design.fr/color-template/

Slide 83

Slide 83 text

Icons Pixel perfect assets and Icons

Slide 84

Slide 84 text

Animation

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

@rssems #UXCamp14 Hızlı ol veya hızlı olduğunu ‘hissettir’ Hız

Slide 87

Slide 87 text

The Animation Tools Xcode > Origami > Framer.JS > After Effects > Flinto = Marvel (…)

Slide 88

Slide 88 text

@rssems #UXCamp14 Hata Ekranları, Boş Alanlar… Tam Deneyim

Slide 89

Slide 89 text

@rssems #UXCamp14 Hata Ekranları, Boş Alanlar… Tam Deneyim

Slide 90

Slide 90 text

@rssems #UXCamp14 Hata Ekranları, Boş Alanlar… Tam Deneyim

Slide 91

Slide 91 text

@rssems #UXCamp14 Hata Ekranları, Boş Alanlar… Tam Deneyim

Slide 92

Slide 92 text

@rssems #UXCamp14 Hata Ekranları, Boş Alanlar… Tam Deneyim

Slide 93

Slide 93 text

@rssems #UXCamp14 Hata Ekranları, Boş Alanlar… Tam Deneyim

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

@rssems #UXCamp14

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

@rssems #UXCamp14 "A mathematical model of the finding of usability problems" Test with 5 Users via http://bit.ly/test5users

Slide 98

Slide 98 text

@rssems #UXCamp14

Slide 99

Slide 99 text

@rssems #UXCamp14

Slide 100

Slide 100 text

UX bilimdir. Sanat değil.

Slide 101

Slide 101 text

@rssems #UXCamp14 CEVAPLAR SORULAR

Slide 102

Slide 102 text

RIZA SELÇUK SAYDAM UX Designer of izlesene.com at Nokta @rssems #UXCamp14