2016 ui trendleri - userspots webinar

USERSPOTS WEBINAR

2016 UI Trendleri

http://www.userspots.com

2016 UI TRENDLERİ2

2016 UI TRENDLERİ

Trend 2016 UI TrendleriNedir?

Nasıl Oluşur?

Kim Kimi Etkiler?

Trendler Neler?Örnekler Neler?

Takip Etmeli

Tasarımcılar

Ajanslar

Kaynaklar

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

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

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 2016 UI TRENDLERİ

Victor Erixon

Cosmin Capitanu


Bireyler Kitleler Büyük Teknoloji Şirketleri Geniş Kitleler


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.


VİDEO GELECEK


Joseph Machalani

2014

iOS

2015

2016 UI TRENDLERİ11

2016 UI TRENDLERİ


Nasıl Oluşur?

Kim Kimi Etkiler?


Takip Etmeli

Tasarımcılar

Ajanslar

Kaynaklar


Açıklama gelecek.

TRENDLER NELER?2016 UI TRENDLERİ

FLAT DESIGN

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

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

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?

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

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

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

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

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

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

S

2016 UI TRENDLERİ

Material Design





TRENDLER NELER?

FLAT DESIGN

25

S

2016 UI TRENDLERİ

Material Design





TRENDLER NELER?

FLAT DESIGN

26

S

2016 UI TRENDLERİ

Material Design





TRENDLER NELER?

FLAT DESIGN

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

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

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

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

S

2016 UI TRENDLERİ

Treehouse







TRENDLER NELER?

FLAT DESIGN

32

S

2016 UI TRENDLERİ

Treehouse







TRENDLER NELER?

FLAT DESIGN

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

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

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

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

S

2016 UI TRENDLERİ


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

S

2016 UI TRENDLERİ


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

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



Yüksek çözünürlüklü

arkaplanlar

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

S

2016 UI TRENDLERİ

43

TRENDLER NELER?

S

2016 UI TRENDLERİ

AirbnbKurucuları 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.


S

44

S

2016 UI TRENDLERİ

45

TRENDLER NELER?

S

2016 UI TRENDLERİ

ZendeskDiğ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.


S

46

S

2016 UI TRENDLERİ

47

TRENDLER NELER?

S

2016 UI TRENDLERİ

SlackYü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?


48

S

2016 UI TRENDLERİ

49

TRENDLER NELER?

S

2016 UI TRENDLERİ

Senin Bankan


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

TRENDLER NELER?

S

2016 UI TRENDLERİ

Senin Bankan


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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.


İmajınızın ya da videonuzun

üzerine gelen arayüz elementlerini,

okunur ve tıklanabilir kılmayı unutmayın.


Minimalizm

Açıklama gelecek.

S


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.


Basit ama hareketli olmaya çalışın.

Kullanıcılarınızı sıkmak istemezsiniz.

MİNİMALİZM



Kart Tabanlı Arayüzler


TRENDLER NELER?

S


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


S


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?



S


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?



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.


TRENDLER NELER?

74

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


Airbnb

Airbnb’de Etsy gibi verdiği bilgilerle

fotoğrafların önemi hakkında

kullanıcılarını bilgilendirmeye çalışıyor.

84

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

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.


Kullanılacak görsellerin kalitesini ve

çekim kalitesini önemseyin.




İKON VE İLLUSTRASYON KULLANIMI

89

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


PayU






örneklerden biri.

91

TRENDLER NELER?

S

2016 UI TRENDLERİ


PayU






örneklerden biri.

92

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

S

2016 UI TRENDLERİ

102

TRENDLER NELER?

S

2016 UI TRENDLERİ


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

S

2016 UI TRENDLERİ

104

S

2016 UI TRENDLERİ

105

S

2016 UI TRENDLERİ

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.


Oluşturulan illustrasyon ve ikon dilini

tüm site ve iletişim kanallarında devam

ettirebilmek önemlidir.



2016 UI TRENDLERİ


Nasıl Oluşur?

Kim Kimi Etkiler?


Takip Etmeli

Tasarımcılar

Ajanslar

Kaynaklar

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

TAKİP ETMELİ

S

2016 UI TRENDLERİ

AJANSLAR

Huge

Amerika

Tubik

Ukrayna

The Focus Lab

Amerika

Frog Design

Amerika

110

TAKİP ETMELİ

S

2016 UI TRENDLERİ

KAYNAKLAR

Designer News

Medium

Smashing Magazine

goodui.org

http://goodui.org

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: [email protected]

http://www.userspots.com

mailto:[email protected]?subject=