Oğuz Arıkan'ın, Userspots Webinar konusu olan 2016 UI Trendleri sunumu, iyi okumalar!

1. USERSPOTS WEBINAR
2016 UI Trendleri

2. 2016 UI TRENDLERİ2
2016 UI TRENDLERİ
Trend 2016 UI Trendleri
Nedir?
Nasıl Oluşur?
Kim Kimi Etkiler?
Trendler Neler?
Örnekler Neler?
Takip Etmeli
Tasarımcılar
Ajanslar
Kaynaklar

3. 3
NEDİR?
TREND
2016 UI TRENDLERİ
Türkçe’de tam olarak ‘’akım’’ anlamına gelen
Trend, moda, teknoloj, tasarım başta olmak
üzere birçok alanda kullanılır.
Trend, yakın bir geçmişte ya da daha uzun bir
süre diliminde toplumun belli bir kısmı
tarafından benimsenen bir davranış, hareket
ya da tutumu temsil eder.

4. 4
NASIL OLUŞUR?
TREND
2016 UI TRENDLERİ
Kimi zaman bireyler birbirini etkiler ve
bu kitlelere yayılan bir etkiye dönüşür.
Kimi zaman da, bir birey ya da bir kurum
kitleleri tek başına etkileyebilecek ve
yönlendirebilecek trendler yaratabilir.

5. 5
KİM KİMİ ETKİLER?
TREND
t
2016 UI TRENDLERİ
2013 yılında ilk örneklerini görmeye
başladığımız flat design, tasarım trendi
olarak hızlıca yayıldı ve Microsoft Metro UI
iOS 7 ile geniş kitlelere ulaştı.
Belki de birçok trend gibi varolana, yani
Skeumorphism’e tepki olarak ortaya çıktı.

6. 6 2016 UI TRENDLERİ
Victor Erixon
Cosmin Capitanu

7. 7 2016 UI TRENDLERİ
Bireyler Kitleler Büyük Teknoloji Şirketleri Geniş Kitleler

8. 8 2016 UI TRENDLERİ
Kimi zaman bireyler birbirini etkiler ve
bu kitlelere yayılan bir etkiye dönüşür.
Kimi zaman da, bir birey ya da bir kurum
kitleleri tek başına etkileyebilecek ve
yönlendirebilecek trendler yaratabilir.
KİM KİMİ ETKİLER?
TREND
Joseph Machalani 2014 yılında iOS 7 için
yaptığı bir çalışmayla geniş kitlelerin dikkatini
çekmeyi başardı.
Seçtiğiniz uygulama kısayolunu pinch
hareketiyle büyütebilmenizi ve uygulama
içine girmeden bilgi ve aksiyon alabilmenizi
sağlıyordu.

9. 9 2016 UI TRENDLERİ
VİDEO GELECEK

10. 10 2016 UI TRENDLERİ
Joseph Machalani
2014
iOS
2015

11. 2016 UI TRENDLERİ11
2016 UI TRENDLERİ
Trend 2016 UI Trendleri
Nedir?
Nasıl Oluşur?
Kim Kimi Etkiler?
Trendler Neler?
Örnekler Neler?
Takip Etmeli
Tasarımcılar
Ajanslar
Kaynaklar

12. 2016 UI TRENDLERİ12
Açıklama gelecek.
TRENDLER NELER?
2016 UI TRENDLERİ
FLAT
DESIGN

13. 13
TRENDLER NELER?
S
2016 UI TRENDLERİ
Sessiz harflerin çoğunluğu yüzünden adını
telaffuz etmekte çok zorlandığımız
Skeumorphism’e bir isyan olarak doğan
flat design 2012 sonrası ilk örneklerini
gördüğümüz ve Microsoft Metro UI ve
Apple’ın iOS 7 güncellemesiyle tüm
dünyanın kendisinden haberdar
olduğu bir trend oldu.
FLAT DESIGN

14. 14
TRENDLER NELER?
S
2016 UI TRENDLERİ
Tasarım dünyasında uzunca bir süre yerini
koruyacak olan flat design, zaman içinde
evrimleşerek semi-flat ya da flat 2.0 gibi
trendlerle etkisini sürdürüyor.
FLAT DESIGN

15. 15
TRENDLER NELER?
S
2016 UI TRENDLERİ
Skeumorphism arayüz tasarımında,
objenin kendisi direk alarak metafor olarak
kabul eden ve onus taklit etmeye çalışan
bir tasarım prensipidir.
Dokuların, gölgelerin ve ışığın yardımıyla
obje taklit dilmeye çalışır.
FLAT DESIGN
Skeuomorphism Nedir?

16. 16 2016 UI TRENDLERİ

17. 17 2016 UI TRENDLERİ

18. 18
TRENDLER NELER?
S
2016 UI TRENDLERİ
FLAT DESIGN
Skeuomorphism’in Dezavatajları:
Üretimi ve değişikliği
ciddi zaman alıyordu.
Doku, ışık ve gölgenin aşırı
kullanımı içeriğin arkaplanda
kalmasına sebep oluyordu
Yükleme sürelerini ciddi
bir şekilde etkiliyordu.
Tasarım süreçlerini
yavaşlatıp takımların hızlı
hareket edebilmelerini engelliyordu.

19. 19
TRENDLER NELER?
S
2016 UI TRENDLERİ
FLAT DESIGN
Peki Flat Tasarımın Faydaları Neler Oldu?
Tüm tasarımcıları daha basit
düşünmeye zorladı.
Sayfaların yüklenme
hızlarını arttırdı.
Responsive design ve modern framework ile
günün ihtiyaçlarına uyumluluk gösterdi.
Kullanıcılar için öğrenmesi ve gezinmesi
çok daha kolay ve göz yormayan bir
tasarım sağlanmış oldu.

20. 20
TRENDLER NELER?
S
2016 UI TRENDLERİ
FLAT DESIGN
Peki Semi-Flat Ya da Flat 2.0 Nedir?
Flat tasarımın ilk örnekleri tam anlamıyla
tek yüzeye sahipti ve hiç bir boyut algısı yoktu.
Flat 2.0 ya da semi-flat ise, bazı elementleri
gözle daha rahat algılanır yapan ve sadece
gölgelerle size ipuçları veren bir trend olarak
karşımıza çıkıyor.

21. 21
S
2016 UI TRENDLERİ
TRENDLER NELER?
FLAT DESIGN
Material Design
Google’ın geçtiğimiz sene duyurduğu
Material Design , tam olarak semi-flat
diyebileceğimiz bir tasarım rehberi
olarak karşımıza çıktı.

22. 22
S
2016 UI TRENDLERİ
TRENDLER NELER?
FLAT DESIGN
Material Design
Kağıdın kendisini bir metafor olarak ele
alan ve kullanıcıların ana aksiyonlarına
vurgun yapan, teknolojinin gücüyle
birlikte animasyonu doğru şekilde
yönlendirebilmek için kullanan bir tasarım
rehberi diyebiliriz.

23. 23
S
2016 UI TRENDLERİ
Material Design
Material design için, flat tasarımla birlikte
z eksenini kullanarak oluşturduğu katmanlarla
kullanıcıya ipuçları vermeye çalışan bir rehber
olarak özetleyebiliriz.
TRENDLER NELER?
FLAT DESIGN

24. 24
S
2016 UI TRENDLERİ
Material Design
Material design için, flat tasarımla birlikte
z eksenini kullanarak oluşturduğu katmanlarla
kullanıcıya ipuçları vermeye çalışan bir rehber
olarak özetleyebiliriz.
TRENDLER NELER?
FLAT DESIGN

25. 25
S
2016 UI TRENDLERİ
Material Design
Material design için, flat tasarımla birlikte
z eksenini kullanarak oluşturduğu katmanlarla
kullanıcıya ipuçları vermeye çalışan bir rehber
olarak özetleyebiliriz.
TRENDLER NELER?
FLAT DESIGN

26. 26
S
2016 UI TRENDLERİ
Material Design
Material design için, flat tasarımla birlikte
z eksenini kullanarak oluşturduğu katmanlarla
kullanıcıya ipuçları vermeye çalışan bir rehber
olarak özetleyebiliriz.
TRENDLER NELER?
FLAT DESIGN

27. 27
S
2016 UI TRENDLERİ
Square
Arayüzünde flat tasarım öğelerini kullanan
örneklerden ilki, sanal pos yazılımı
sağlayan Square.
TRENDLER NELER?
FLAT DESIGN

28. 28
S
2016 UI TRENDLERİ
Square
Mavi’nin doygunluğu daha düşük olan
flat diyebileceğimiz baskın renk seçimi,
tek renkli ve çerçeveli ikonları, doku,
degrade gibi öğeleri barındırmayan
sade arayüzüyle başarılı flat design
örneklerinden biri.
TRENDLER NELER?
FLAT DESIGN

29. 29
S
2016 UI TRENDLERİ
Square
Mavi’nin doygunluğu daha düşük olan
flat diyebileceğimiz baskın renk seçimi,
tek renkli ve çerçeveli ikonları, doku,
degrade gibi öğeleri barındırmayan
sade arayüzüyle başarılı flat design
örneklerinden biri.
TRENDLER NELER?
FLAT DESIGN

30. 30
S
2016 UI TRENDLERİ
Treehouse
Hero bannerında kullandığı
tek renk arkaplanı ve pastel tonların
kullanıldığı illustrasyonlarını beyaz zemin
üzerine yerleştiren Treehouse,
online eğitim platformları arasında
flat tasarım örneklerinden biri.
TRENDLER NELER?
FLAT DESIGN

31. 31
S
2016 UI TRENDLERİ
Treehouse
Hero bannerında kullandığı
tek renk arkaplanı ve pastel tonların
kullanıldığı illustrasyonlarını beyaz zemin
üzerine yerleştiren Treehouse,
online eğitim platformları arasında
flat tasarım örneklerinden biri.
TRENDLER NELER?
FLAT DESIGN

32. 32
S
2016 UI TRENDLERİ
Treehouse
Hero bannerında kullandığı
tek renk arkaplanı ve pastel tonların
kullanıldığı illustrasyonlarını beyaz zemin
üzerine yerleştiren Treehouse,
online eğitim platformları arasında
flat tasarım örneklerinden biri.
TRENDLER NELER?
FLAT DESIGN

33. 33
S
2016 UI TRENDLERİ
Uber
Geçtiğimiz sene Türkiye’de de faaliyetlerine
başlayan Uber, hero alanında kullandığı
tam say fotoğrafı üzerine serifsiz yazı
tipleriyle verdiği mesajı ve tek renk
butonuyla ilk anda tasarımı hakkında
yeterince fikir veriyor.
TRENDLER NELER?
FLAT DESIGN

34. 34
S
2016 UI TRENDLERİ
Uber
Uygulamasından ekranlar koyarak
yerleştirdiği benefitleri incelediğimizde de,
uygulamın da aynı şekilde flat tasarıma
sahip olduğunu görüyoruz.
TRENDLER NELER?
FLAT DESIGN

35. 35
S
2016 UI TRENDLERİ
Uber
Siyah, beyaz ve mavi ile sınırlı tuttuğu
renk paleti ve ekran içinde yer alan tek
bir içerik konseptiyle Uber’de başarılı
örneklerden biri.
TRENDLER NELER?
FLAT DESIGN

36. 36
S
2016 UI TRENDLERİ
Pardus Etkileşimli Tahta
2 farklı lise, 16 öğretmen ve 12 öğrenci
ile araştırmasını tamamlayarak,
araştırma bulgularına tasarım kararlarına
dönüştürdüğümüz Pardus projesi,
flat design prensibiyle tasarladığımız
projelerden bir diğeri.
TRENDLER NELER?
FLAT DESIGN

37. 37
S
2016 UI TRENDLERİ
Pardus Etkileşimli Tahta
Arayüzde kullanılan renk paleti,
ikon dili ve çözümleri, wireframe
sürecinde iyileştirmeye çalışılan deneyimi
grafik öğelerdeki basitliğiyle destekliyor.
TRENDLER NELER?
FLAT DESIGN

38. 38
S
2016 UI TRENDLERİ
Pardus Etkileşimli Tahta
Arayüzde kullanılan renk paleti,
ikon dili ve çözümleri, wireframe
sürecinde iyileştirmeye çalışılan deneyimi
grafik öğelerdeki basitliğiyle destekliyor.
TRENDLER NELER?
FLAT DESIGN

39. 39
TRENDLER NELER?
S
2016 UI TRENDLERİ
Renk paletini olabildiğince
sınırlı tutmaya çalışın
ve gerekmedikçe renk eklemeyin.
Flat tasarımlarınızı ikon
ve fotoğraflarınızla
hareketlendirmeyi unutmayın.
Renk seçimlerinizde,
renklerin anlamlarını ve
sıcak, soğuk ilişkilerine dikkat edin.
Nelere Dikkat Etmeli?
Popüleretesi yüzünden yaşanabilecek
benzer çözümlere dikkat edin.
FLAT DESIGN

40. 2016 UI TRENDLERİ40
TRENDLER NELER?
2016 UI TRENDLERİ
Yüksek çözünürlüklü
arkaplanlar

41. 41
TRENDLER NELER?
S
2016 UI TRENDLERİ
Site tam sayfa kullandığı videoda,
4 farklı hikaye ile bizi karşılıyor.
Yakın çekim ve hızlı kesimlerle
bir araya getirmiş bu görüntülerle
Squarespace kullanarak satış yapan
kullanıcıların, ürünlerini nasıl
hazırladıklarını görüyoruz.
Videolar bizi üretim süreçleriyle
alakalı heyecanlandırıp, ilham
vermeyi amaçlıyor.
Squarespace
YÜKSEK ÇÖZÜNÜRLÜKLÜ
ARKAPLANLAR

42. 42
S
2016 UI TRENDLERİ

43. 43
TRENDLER NELER?
S
2016 UI TRENDLERİ
Airbnb
Kurucuları arasında 2 tasarımcının
bulunduğu ünlü girişim,
ana sayfada kullandığı arkaplan
videosuyla, verdiği servisin duygusal
yanlarına odaklanıyor.
Arkadaşça ve sıcak mesajı
‘’Evinize Hoşgeldinizle’’ birlikte bize
tatil anlarından kesitler sunarak,
ziyaretçilerini yakalamayı amaçlıyor.
YÜKSEK ÇÖZÜNÜRLÜKLÜ
ARKAPLANLAR
S

44. 44
S
2016 UI TRENDLERİ

45. 45
TRENDLER NELER?
S
2016 UI TRENDLERİ
Zendesk
Diğer örneklere göre neredeyse
yok denecek kadar az bir prodüksiyon
maliyetiyle, iş modelini, yaklaşmanın
gerçek hayattaki karşılığını metafor
olarak kullanıp, çok basit ve zekice bir
çözümle bizi gülümsetmeyi başarıyor.
Bu gülümseme anı kullanıcılarda
ileride sadakete dönüşebilecek kullanım
zevkini de beraberinde getiriyor.
YÜKSEK ÇÖZÜNÜRLÜKLÜ
ARKAPLANLAR
S

46. 46
S
2016 UI TRENDLERİ

47. 47
TRENDLER NELER?
S
2016 UI TRENDLERİ
Slack
Yüksek çözünürlüklü arkaplan
örneklerinden bir diğeri ise,
takım içi iletişim ve paylaşım tool’u Slack.
Slack her ziyaretinizde gösterdiği
farklı fotoğraflar ile, Nasa dahil
olmak üzere geniş bir yelpazede birçok
ekibin Slack kullandığını öne çıkartıyor.
Nasa’nın bile kullandığı bir tool’u
siz nasıl kullanmazsınız?
YÜKSEK ÇÖZÜNÜRLÜKLÜ
ARKAPLANLAR

48. 48
S
2016 UI TRENDLERİ

49. 49
TRENDLER NELER?
S
2016 UI TRENDLERİ
Senin Bankan
YÜKSEK ÇÖZÜNÜRLÜKLÜ
ARKAPLANLAR
Araştırma ve tasarım süreçlerini
Userspots’un tamamladığı Senin Bankan,
kişiye özel bankacılık uygulamaları
arasında 2015 yılında yerini aldı.
Ana sayfada kullandığı tam sayfa
fotoğraf ile, servisin kullanım rahatlığına
ve konforuna vurgu yapan site,
evinizdeki huzurlu bir anın yansıması
ile sizi müşteri olmaya çağırıyor.

50. 50
TRENDLER NELER?
S
2016 UI TRENDLERİ
Senin Bankan
YÜKSEK ÇÖZÜNÜRLÜKLÜ
ARKAPLANLAR
Araştırma ve tasarım süreçlerini
Userspots’un tamamladığı Senin Bankan,
kişiye özel bankacılık uygulamaları
arasında 2015 yılında yerini aldı.
Ana sayfada kullandığı tam sayfa
fotoğraf ile, servisin kullanım rahatlığına
ve konforuna vurgu yapan site,
evinizdeki huzurlu bir anın yansıması
ile sizi müşteri olmaya çağırıyor.

51. 51
TRENDLER NELER?
S
2016 UI TRENDLERİ
YÜKSEK ÇÖZÜNÜRLÜKLÜ
ARKAPLANLAR
Oldukça yapay duran
herkesin bildiğin stok
fotoğraflardan uzak durun
Videonun sesini
kapatmayı unutmayın
Video ve fotoğraf boyutlarına,
sayfa yükleme sürelerine
dikkat edin.
Nelere Dikkat Etmeli?
İmajınızın ya da videonuzun
üzerine gelen arayüz elementlerini,
okunur ve tıklanabilir kılmayı unutmayın.

52. 2016 UI TRENDLERİ52
Minimalizm
Açıklama gelecek.
S
TRENDLER NELER?
2016 UI TRENDLERİ

53. 53
TRENDLER NELER?
S
2016 UI TRENDLERİ
Ürün tasarımlarındaki minimalist
yaklaşımıyla da bildiğimiz ve çıkardığı
ürünleriyle tasarım konusundaki
tercihlerimizi tekrar sorgulatan Apple,
aynı çizgiyi sitesinde de sürdüyor.
Apple
MİNİMALİZM

54. 54
TRENDLER NELER?
S
2016 UI TRENDLERİ
Site tasarımını, ürünlerinin yüksek
çözünürlüklü etkileyici görsellerini ön
planda tutacak şekillde
kurgulayan Apple, nefes kesen
görselliği oldukça vurucu ve kısa
cümleleriyle destekliyor.
Apple
MİNİMALİZM

55. 55
TRENDLER NELER?
S
2016 UI TRENDLERİ
Site tasarımını, ürünlerinin yüksek
çözünürlüklü etkileyici görsellerini ön
planda tutacak şekillde
kurgulayan Apple, nefes kesen
görselliği oldukça vurucu ve kısa
cümleleriyle destekliyor.
Apple
MİNİMALİZM

56. 56
TRENDLER NELER?
S
2016 UI TRENDLERİ
iOS 7 deki tasarım değişikliğinin
siteye yansımasıyla birlikte,
arayüz elementlerin de
sadeliğin tüm etkilerini görüyoruz.
Apple
MİNİMALİZM

57. 57
TRENDLER NELER?
S
2016 UI TRENDLERİ
E-mail marketing denince sektörün
lider konumunda olan mailchimp,
konu sadelik olunca akla gelen ilk
örneklerden.
Mailchimp
MİNİMALİZM

58. 58
TRENDLER NELER?
S
2016 UI TRENDLERİ
Send Better Email mottosu ve
panelinden bir ekranla kullanıcılarını
karşılayan Mailchimp, az şey ile çok şey
söylüyor. Sadelik temalı sosyal medya
çekimlerinde de görmeye alışkın
olduğumuz gündelik hayat objeleriyle
yarattığı arkaplanıyla, Mailchimp çok
temiz bir tasarıma imza atıyor.
Mailchimp
MİNİMALİZM

59. 59
TRENDLER NELER?
S
2016 UI TRENDLERİ
Ana sayfasıyla birlikte alt sayfaları ve
paneli de dahil sadelik temasını
sürdüren mailchimp, arayüz içine
yerleştirdiği kolay anlaşılır ve espirili
metaforlarıyla da minimalism örnekleri
arasında üst sıralara yerleşiyor.,
Mailchimp
MİNİMALİZM

60. 60
TRENDLER NELER?
S
2016 UI TRENDLERİ
Ana sayfasıyla birlikte alt sayfaları ve
paneli de dahil sadelik temasını
sürdüren mailchimp, arayüz içine
yerleştirdiği kolay anlaşılır ve espirili
metaforlarıyla da minimalism örnekleri
arasında üst sıralara yerleşiyor.,
Mailchimp
MİNİMALİZM

61. 61
TRENDLER NELER?
S
2016 UI TRENDLERİ
Amazonda satılan ürünlerden
derlenerek oluşturulan Canopy,
sadece ürün görseli fiyatı ve
koleksiyona ekleyenlerin bilgisi
verdiği sade ürün kartları ile hepimizin
‘’ah keşke dediği’’ örneklerden biri.
Canopy
MİNİMALİZM

62. 62
TRENDLER NELER?
S
2016 UI TRENDLERİ
Gözü rahatlatan beyaz ağırlıklı tasarımı
ve yine grinin farklı değerleri yanında,
tek bir ana renge sahip Canopy
minimalist e-ticaret örneklerinden biri
olarak karşımıza çıkıyor.
Canopy
MİNİMALİZM

63. 63
TRENDLER NELER?
S
2016 UI TRENDLERİ
Digital habercilik alanında faaliyette
olan ve geçtiğimiz günlerde
hayata geçirdiği yeni tasarımıyla haber
başlıklarının büyük fontlarla
ön planda olduğu, grinin açık ve koyu
renk değerleriyle oluşturduğu
paletiyle minimalist örnekler arasında
habercilik alanında ön plana çıkıyor.
Quartz
MİNİMALİZM

64. 64
TRENDLER NELER?
S
2016 UI TRENDLERİ
Minimalist örneklerde görmeye alışkın
olduğumuz, ekran içinde öne çıkan tek
bir içerik prensibini sitesinde tek haber
olarak yansıtan Quartz, okuyucularına
yüksek bir okuma deneyimi
sunmayı hedefliyor.
Quartz
MİNİMALİZM

65. 65
TRENDLER NELER?
S
2016 UI TRENDLERİ
Userspots’un araştırma ve tasarım
süreçlerini yürüttüğü projelerden
bir diğeri olan Nef, minimalist tasarım
yaklaşımının uygulandığı örneklerden biri.
Nef
MİNİMALİZM

66. 66
TRENDLER NELER?
S
2016 UI TRENDLERİ
MİNİMALİZM
Minimalist yaklaşım, projelerin ve
görsellerin ön planda kalmasını
sağlarken, kullanıcıya da göz yormayan
rahat bir deneyim sağlıyor.
Nef

67. 67
TRENDLER NELER?
S
2016 UI TRENDLERİ
Minimalism’in temel taşı
olan beyaz alanı etkin bir
şekilde kullanıın.
Çok fazla içeriğe sahip bir
iş modeliniz varsa, minimalizm
sizin için uygun olmayabilir.
Ekran içinde tek bir mesaja
ve konsepete yer verin.
Nelere Dikkat Etmeli?
Basit ama hareketli olmaya çalışın.
Kullanıcılarınızı sıkmak istemezsiniz.
MİNİMALİZM

68. 2016 UI TRENDLERİ68
TRENDLER NELER?
2016 UI TRENDLERİ
Kart Tabanlı Arayüzler

69. 2016 UI TRENDLERİ69
TRENDLER NELER?
S
Kart Tabanlı Arayüzler
Tüm trendleri incelediğimizde estetik yanlarının yanında
teknik gelişmelerin de bu trendlerin oluşmasında rol
oynadığını söyleyebiliriz. Cihaz çözünürlüklerinin artışı ve
html5 teknolojisi gorsel ve video kullanımlarını teşvik
ederken, flat ve minimalism akımları yükleme sürelerini
hızlandırıp, cihazlar arası responsive tasarımlara da
mükemmel bir uyumluluk gösterdi.
KART TABANLI ARAYÜZLER

70. 2016 UI TRENDLERİ70
S
Kart Tabanlı Arayüzler
Kart tabanlı tasarımlar, tam da mobil cihaz
kullanımın ve buna bağlı olarak
responsive tasarım ihtiyacının arttığı bir
dönemde trend olan layout
çözümlerinden biri oldu.
TRENDLER NELER?
KART TABANLI ARAYÜZLER

71. 2016 UI TRENDLERİ71
S

72. 2016 UI TRENDLERİ72
Peki Kart Nedir?
Kartlar data, imaj, button link
comment gib iş alanınıza
göre değişkenlik gösterebilecek
başlıkları içeren dikdörtgen alanlardır.
TRENDLER NELER?
KART TABANLI ARAYÜZLER

73. 2016 UI TRENDLERİ73
Peki Kart Nedir?
Bilginin kartlar halinde gösterilmesi,
daha temiz ve rahat taranabilir
arayüzler oluşmasına yardımcı oldu.
Kartlar aynı zamanda farklı etkileşim
örnekleriyle de kullanıcılar için pratik
çözümler üretmenize imkan veriyor.
KART TABANLI ARAYÜZLER
TRENDLER NELER?

74. 74
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Pinterest
Kart tabanlı arayüzlerin bugünkü
popüleritesine ulaşmasında önemli
rol oynayan Pintrest, pinlenen
içeriğin görseli pinleyen kişi ve pinlenen
kaynakları bir kart alanı içerisinde gösterip,
arkaplana veridği hafif gri tonuyla kartları
arkaplandan ayrıştırıp daha rahat
taranmasını ve okunmasını sağlıyor.

75. 75
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Pinterest
Kartın üzerine gelindiğinde ise, akışınızda
gördüğünüz bir pin’i, pinleme, yollama
ve beğenme seçenekleriniz oluyor.

76. 76
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Tinder
Genellikle ‘’bir’’ arkadaşımızın kullandığı
ve çok sevdiği uygulamalardan olan Tinder,
eşleşme ihtimali olan diğer kullanıcıları
kartlar halinde gösteren, sağ ve sol
hareketleri ile aksiyon alabilmemize imkan
veren kart tabanlı arayüz örneklerinden biri.

77. 77
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Tinder
Genellikle ‘’bir’’ arkadaşımızın kullandığı
ve çok sevdiği uygulamalardan olan Tinder,
eşleşme ihtimali olan diğer kullanıcıları
kartlar halinde gösteren, sağ ve sol
hareketleri ile aksiyon alabilmemize imkan
veren kart tabanlı arayüz örneklerinden biri.

78. 78
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Wired
Dünyaca ünlü haber sitesi Wired’da
layout’unda kart tabanlı çözümü kullanan
sitelerden biri.
Farklı genişlik ve yüksekliklerde
kullanılan kartlar, haberlerin önem
derecesine göre şekillendirilmesinde
önemli bir yol oynarken, kullanıcı için de
oldukça hareketli ve dinamik
bir arayüz oluşturuyor.

79. 79
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Wired
Dünyaca ünlü haber sitesi Wired’da
layout’unda kart tabanlı çözümü kullanan
sitelerden biri.
Farklı genişlik ve yüksekliklerde
kullanılan kartlar, haberlerin önem
derecesine göre şekillendirilmesinde
önemli bir yol oynarken, kullanıcı için de
oldukça hareketli ve dinamik
bir arayüz oluşturuyor.

80. 80
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Airbnb
Yüksek çözünürlüklü arkaplanlarda başarılı
video örneğini incelediğimiz Airbnb,
kart tabanlı sayfa düzenini kullanan bir
diğer web sitesi.

81. 81
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Airbnb
Kart yapısını yakından incelediğimizde
fotoğrafları baskın bir şekilde kullandığını
rahatlıkla gördüğümüz Airbnb, ilan ile
alakalı ilan ismini, ilan tipini, yorumları
ve ilan sahibini tek bir satırda kurgularken
beğenme ve fiyatları kart içinde taranmasını
kolaylaştırmak için farklı yerlere
konumluyor.

82. 82
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Airbnb
Kart içinde dairenin fotoğrafına verdiği
alan yanı sıra, geliştirdiği anlaşmalı
fotoğrafçılar modeliyle de kiralamalarda
2.5 katı bir artış yakalamış.

83. 83
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Airbnb
Airbnb’de Etsy gibi verdiği bilgilerle
fotoğrafların önemi hakkında
kullanıcılarını bilgilendirmeye çalışıyor.

84. 84
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Koçtaş
Dekoratif ürünlerden mobilyaya, mutfak,
banyo, seramik gibi birçok kategoride
ürünlere ulaşabildiğiniz Koçtaş,
tasarımını Userspots’un yenilediği
arayüzünde, kart çözümünü kullanan
e-ticaret sitelerinden biri.

85. 85
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Koçtaş
Kampanyalar, ürünler, bilgi içeren
alanlar olmak üzere birçok noktada
kartların kullanıldığı projede grid yapısı
ve kartlarla birlikte gelen rahat tarama
rahatlıkla gözleniyor.

86. 86
TRENDLER NELER?
S
2016 UI TRENDLERİ
KART TABANLI ARAYÜZLER
Koçtaş
Kampanyalar, ürünler, bilgi içeren
alanlar olmak üzere birçok noktada
kartların kullanıldığı projede grid yapısı
ve kartlarla birlikte gelen rahat tarama
rahatlıkla gözleniyor.

87. 87
TRENDLER NELER?
S
2016 UI TRENDLERİ
Gösterilecek bilgilerin
öncelliklendirilmesi ve
kart alanı içinde doğru
bilgilerin verilmesi.
Doğru etkileşimlerin tasarlanması
ile diğer kart örnekleri arasında
sığrılmaya çalışın.
Tüm kartı tıklanabilir kılmayı unutmayın.
Nelere Dikkat Etmeli?
Kullanılacak görsellerin kalitesini ve
çekim kalitesini önemseyin.
KART TABANLI ARAYÜZLER

88. 2016 UI TRENDLERİ88
TRENDLER NELER?
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON KULLANIMI

89. 89
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
PayU
Bu sene içinde yeni tasarımına kavuşan,
e-ticaret siteleri için ödeme altyapısı
sağlayan Payu, site genelinde ürünlerini,
nasıl çalışır sorularına cevaben hazırladığı
akışlarını anlatırken illustration tercih eden
örneklerden biri.

90. 90
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
PayU
Bu sene içinde yeni tasarımına kavuşan,
e-ticaret siteleri için ödeme altyapısı
sağlayan Payu, site genelinde ürünlerini,
nasıl çalışır sorularına cevaben hazırladığı
akışlarını anlatırken illustration tercih eden
örneklerden biri.

91. 91
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
PayU
Bu sene içinde yeni tasarımına kavuşan,
e-ticaret siteleri için ödeme altyapısı
sağlayan Payu, site genelinde ürünlerini,
nasıl çalışır sorularına cevaben hazırladığı
akışlarını anlatırken illustration tercih eden
örneklerden biri.

92. 92
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
PayU
Ana rengi olan yeşile uyumlu renk paleti,
ve basit çizgilerle oluşturulan illustrasyonlar
arayüze zenginlik katıyor.
Aynı dilin ve şemaların tekrar eden
kullanımları da öğrenme sürecini
hızlandırmayı hedefliyor.

93. 93
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
PayU
Ana rengi olan yeşile uyumlu renk paleti,
ve basit çizgilerle oluşturulan illustrasyonlar
arayüze zenginlik katıyor.
Aynı dilin ve şemaların tekrar eden
kullanımları da öğrenme sürecini
hızlandırmayı hedefliyor.

94. 94
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Virgin America
Geçtiğimiz sene tasarımını yenileyen
örneklerden bir diğeri de Virgin America.
Oxford Sözlüğü’nün yılın kelimesi olarak
belirlediği ‘’Emoji’’ leri andıran karakterleri
ve espirili dili, bilet satın alma
süreçlerindeki anlatımlarda, ya da
şehirleri gösterirken kullanıyor.

95. 95
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Virgin America
Grafik olarak oldukça basit ve
hepimizin hakim olduğu emojiler,
doğru uygulandığında ne kadar
iyi sonuç verebildiğini kanıtlıyor.

96. 96
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Dropbox
Minimalist genel tasarımını aynı çizgideki
ve kendisiyle özdeşlen illustrasyon tazıyla
destekleyen Dropbox, ürününün
faydalarından bahsederken bunları
illuustrasyonlarıyla desteklemeyi ihmal
etmiyor.

97. 97
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Dropbox
Karakalem çizimleri andıran,
basit çizgilerden oluşan
bu illustrasyonlar, yaptığınız iş ne kadar
komplike ya da teknik olursa olsun,
basit olarak anlatmanın her zaman
bir yolu olduğunu da gösteriyor.

98. 98
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Zopim
E-ticaret başta olmak üzere birçok sitede
kullanılan canlı chat eklentisi Zopim de,
beyaz alanı iyi kullanan, ekran içinde
tek bir anlatının olduğu sade tasarımını
yine aynı basitlikteki illustrasyonlarıyla
zenginleştiriyor.

99. 99
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Zopim
Hero alanında renk paletini baskın olarak
kullandığı basit şekiller ve çerçeve renkleriyle
belirginleştirdiği illustrasyonu yer alırken,
benefitlerini anlatırken tek renk kullanmayı
tercih ediyor.

100. 100
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Garanti Yol Haritam
Girişimciler için rehber olacak bir proje olan
Yol Haritam, nasıl çalışır süreçleri için
tasarlanan illustrasyonları ve kapsamlı
illustratif haritasıyla, Userspots’un wireframe
ve grafik tasarım süreçlerini yürüttüğü
projelerden bir diğeri.

101. 101
S
2016 UI TRENDLERİ

102. 102
TRENDLER NELER?
S
2016 UI TRENDLERİ
İKON VE İLLUSTRASYON
KULLANIMI
Garanti Yol Haritam
Kullanıcıların illustratif bir harita üzerinden,
7 farklı adımı tamamlaya çalıştıkları bu ekran,
tüm adımlar gerçek dünyadan bir refaransla
yansıtılmaya çalışılıyor.

103. 103
S
2016 UI TRENDLERİ

104. 104
S
2016 UI TRENDLERİ

105. 105
S
2016 UI TRENDLERİ

106. 106
TRENDLER NELER?
S
2016 UI TRENDLERİ
Olabildiğince basit ve
açıklayıcı olmaya çalışın.
Çalışma tamamlanmadan
önce bol bol geridönüş alın.
Çözüm olarak zaman isteyen bir
teknik olduğunda zaman takvimini
hesaba katmak gerekiyor.
Nelere Dikkat Etmeli?
Oluşturulan illustrasyon ve ikon dilini
tüm site ve iletişim kanallarında devam
ettirebilmek önemlidir.
İKON VE İLLUSTRASYON
KULLANIMI

107. 2016 UI TRENDLERİ107
2016 UI TRENDLERİ
Trend 2016 UI Trendleri
Nedir?
Nasıl Oluşur?
Kim Kimi Etkiler?
Trendler Neler?
Örnekler Neler?
Takip Etmeli
Tasarımcılar
Ajanslar
Kaynaklar

108. 108
TAKİP ETMELİ
S
2016 UI TRENDLERİ
TASARIMCILAR
Tobias Van Schneider
Lead Product Designer at Spotify
Kerem Suer
Designer at Operator
Meng To
UI & UX Designer
Luke Wreblowski
Product Designer at Google

109. 109
TAKİP ETMELİ
S
2016 UI TRENDLERİ
AJANSLAR
Huge
Amerika
Tubik
Ukrayna
The Focus Lab
Amerika
Frog Design
Amerika

110. 110
TAKİP ETMELİ
S
2016 UI TRENDLERİ
KAYNAKLAR
Designer News
Medium
Smashing Magazine
goodui.org

111. TEŞEKKÜR EDERİZ
İletişim Etkilab Ar-ge, Kullanıcı Araştırmaları, Danışmanlık ve
Tasarım A.Ş. Eski Büyükdere Caddesi Sanayi Mahallesi Behçet
Sokak Büyükdere İş Hanı No:2 Kat:1 Telefon: 0 212 272 77 66 Fax:
0 212 272 77 68 E-posta: iletisim@userspots.com