x

Yemeksepeti.com ve Hepsiburada örnekleri üzerinden; Flat Design nedir, ne değildir?

Yazılımcılara Tavsiyeler başlıklı yazı dizimiz çok beğenilince bir benzerini de arayüz tasarımı konusunda yapmak istedik. Tasarımcılara Tavsiyeler yazı dizisinin tamamına buradan ulaşabilirsiniz.

Konuk yazarımız Kudret Keskin, şu an Publik’in Adphorus markasının arayüz tasarımlarından sorumlu. Bunun yanı sıra arayüz ve marka tasarımı konusunda danışmanlıklar da veriyor.

flat-design-nedir

Nereden çıktı bu flat tasarım?

Flat design ne kadar yeni bir trend gibi görünse de aslında arayüz tasarımı için geçmişi web tasarım yaklaşımının ve kullanılabilirlik kavramlarının olgunlaşmasına dayanıyor. Daha önceleri clean (temiz) tasarım ya da simple (basit) tasarım akımı ile kendini hissettirmeye başlamıştı da diyebiliriz.

Siz ne dersiniz bilmiyorum fakat ben flat design’ı “tasarım anlayışı artık yüklerinden kurtuluyor” diye tanımlıyorum. Tabii flat design’ın hala olgunlaşmaya ihtiyacı var. Flat design benim anladığım tüketimin çabuk olduğu bir dönemde kolay, hızlı algılamaya çalışmanın getirdiği bir ihtiyaç olarak ön plana çıkıyor. Artık tüketicinin pek vakti ve tahammülü de yok. O yüzden hayatımıza dokunan her şey şu durumda basit olmalı.

Apple dahi iOS 7 lansmanını yaparken yeni tasarımının daha kolay, daha rahat anlaşılır ve daha basit olduğunu ifade etmiştir. Ayrıca flat design, basit olmalı diyerek flat design kavramına haksızlık yapmamak gerek. Basit ve kalite arasındaki detayı atlamayın! Eskiden bu böyle değildi fakat anlaşılır olmak, işe yarayan bir şey yapmak günümüzde artık sadelikten geçiyor. Tasarımlarınızda gereksiz detayları atın sadece algıyı kolaylaştıracak, kendine güvenen, hissiyatı olan detayları tutun ve sadelik kendiliğinden ortaya çıkacaktır.

Renk geçişlerinde solid olmak zorunda değilsiniz agresif, güçlü, uyumlu duran renk geçişleri de kullanabilirsiniz. Benim çok sevdiğim tipografi kullanımı yine her zamankinden çok daha önemli diyebilirim. Logoda da Sadece renk ve tipografi ile her şeyi anlatabilirsiniz. Ben her zaman olduğu gibi yine büyük puntolardan kaçınmayacağım. Tasarımcılara tavsiyem punto belirlerken elinizi korkak alıştırmayın.

Küçük noktalarda flat dokunuşlar yapmanın marka ve arayüz tasarımına geri dönüşü ne olur?

Bu yazımda flat design’a giriş yaptıktan sonra biraz da Yemeksepeti.com’u ve Hepsiburada.com’u incelemek istedim. Tasarımcı olmak bir yerde çözüm üretmeye odaklı bir iş olduğundan bir şeyleri düzeltmek, güzelleştirmek obsesif bir hal alabiliyor. Genel olarak ben de bir çok tasarımcı gibi Yemeksepetini çok karmaşık buluyorum. Örneklendirmek gerekirse bir an önce header’da bulunan canlı yardıma tıklayıp “Bana bir pizza söyler misin?” demek daha kolay geliyor. Şu an hiç ihtiyaç duymadığım halde “Canlı Yardım” buttonu arayüzde her şeyin önüne gereğinden fazla geçiyor. Ayrıca biraz da konu dışına çıkarak keyword bazlı bir search engine’in adapte edilmesi de gerek, tabi bunlar User Experience konuları.

yemek-sepeti-siparis-ekrani

Biz şimdi Yemeksepeti’ne “Yemek Sepetim” modülü için flat design’dan faydalanarak yeni bir yaklaşım sunalım.

Bu yukarıda gördüğünüz mevcut tasarımda anlaşılır olmayan bir kaç nokta var. Çok fazla gereksiz detay var ve objeler önemini yitirmiş, birbiriyle yarışıyor. Burada önemli olan “Sepeti Onayla” buttonu ve “Neyi sipariş edeceğim?” bu alanda yapılan ölümcül hata “Lasagne Bolognese’in” yanındaki kırmızı “iptal” buttonu ile hızlıca vaz geçebiliyorum. Bu aslında bir kolaylık değil. Küçük kırmızı “iptal” buttonu neredeyse ne yemek istediğimi değiştirecek güçte. : ) Ayrıca Sepeti Onayla buttonunu biraz astigmatınız varsa algılamak çok zor. Onun dışında çok fazla kutu, punto farkı ve renk geçişleri var.

Neyse, biz şimdi sadece tek bir noktaya odaklanarak flat design’ın önemini biraz daha kavramaya çalışacağız. Sanıyorum önceden bu kadar çok renk geçişi, obje, çizgi, detay kullanılması arayüz tasarımının genel olarak dünyada olgunlaşmaması ve hala kaygıyı, egoyu barındırmasından kaynaklanıyordu.

Şimdi yukarıda anlattıklarımı da baz alarak flat design ile düşünülmüş aşağıdaki yeni yaklaşımı inceleyebilirsiniz. Daha ferah ve daha kolay algılanıyor değil mi?

yemek-sepeti-siparis-ekrani-flat

Peki şimdi Hepsiburada.com’un search ve sepetim buttonuna biraz dikkatlice bakalım?

hepsi-burada-mevcut-header

Mevcut header’da her şey yerli yerinde görünüyor fakat kullanıcının algısını zorlaştıran bir kaç fazla gelen ufak detaylar var! Tekrar ele alınıp retouch edilirse güzel geri dönüşler alınacaktır. İnput alanındaki gölgenin verdiği derinlik hissiyatına ve hemen search barın sonunda duran arama (büyüteç) buttonunun aşağıdaki gibi biraz daha clean görünmeye ihtiyacı var.

hepsiburada-header-1

Mevcut sepetim buttonuna bakıldığında altında boyutlandırmak için verdikleri gölgeden ve yine stroke efektlerden kurtulabiliriz. Gölge olmadan da güçlü duracaktır. Aşağıdaki örnekte ikisi arasındaki farkı inceleyebilirsiniz. Takdir sizin. 😉

hepsiburada-header-2

Flat design üzerine daha çok konuşulacak ve örneklendirilecek madde var. Çalışmalarıma göz atmak ve sormak istedikleriniz için beni @kudretkeskin adresinden takip edebilir ya da kudretkeskin@gmail.com mail adresinden de ulaşabilirsiniz.

Yorumlar (25)

  1. Bolognese’e 3 lira fark koymuşsun, onu görmedik sanma 🙂

    Cevapla
  2. Merhaba,

    Bakıldığı zaman tam anlamı ile flat bir tasarım yok aslında, flat bir görsel hissi uyandırmıyor bireyde.

    Mesela hepsiburada flat tasarım örneğin’de button’da gradient var flat bir tasarım’da gradient olmaz renkler biraz daha beyaza yakın olur. Aynı şey yemek sepeti alanı için’de geçerli.

    Cevapla
  3. Flat tasarımı ben de tasarladığım ürünlerde severek uygulamaya çalışıyorum ama bu konuda göz ardı etmemeniz gereken bir konu var ki, sadece portfolyonuzda güzel gözükmesi için ya da san francisco’daki start-upların sitelerinden özenip bunu tam zıt bir kitleye hitap eden bir ürüne, proje öncesinde ve esnasında user testing/researching yapmadan uygulamayı doğru bulmuyorum. Örnek verdiğiniz her iki site de Türkiye’nin her kesmine hitap eden 14-70 yaş aralığında interneti bizler gibi hayatının bir parçası olarak gören ya da google’u internet zanneden bir kitleye servis sunuyor. Sitede yer alan tıklanabilir fonksiyonel alanların olduğunun anlaşılabilir olması gerekiyor. Bunun doğru flat tasarımla da yapılabilir olacağını inkar etmiyorum ama ürününüzün hitap ettiği kitleyi görmezden gelip, sırf modaya uymak adına IOS7’yi seven kitleden olup sevmeyen ya da varlığından haberdar olmayan %’nin varlığını da görmezden gelemeyiz diye düşünüyorum. Yazınıza karşı değilim sadece bu konuyu da es geçmeyip yazsaydınız daha dolu bir yazı olurdu kanaatindeyim.

    Cevapla
    • Yazı oldukça açıklayıcı olmuş Kudret ellerine sağlık. Ali’nin yorumuna kısmen katılıyorum. Test ve araştırma sonrası yapılması gerek mi sorusu biraz düşündürücü bence, sonuçta kullanıcıları flat’e şimdi alıştırmassak ne zaman alıştıracağız. Biliyoruz ki flat’ten önce ki tasarım trendi de San Francisco’dan gelmişti. Kullanıcıyı sıkıştırmadığımız sürece onların buna alışmasını beklemek zor olur.

      Cevapla
  4. Hocam makale için çok teşekkürler. Flat arayüzlerde font seçimi olarak ne tercih etmeliyiz?

    Teşk.

    Cevapla
  5. Güzel bir makale olmuş ama yemeksepeti örneği flat design için olmamış. Baştan başa çok kötü bir design. Hero firması geldiği zaman designları çok eski ve kötü nasıl bu kadar popüler anlamıyoruz demişlerdi :).

    Cevapla
    • Yemeksepeti, Sahibinden neden bu kadar popülerler? sorusunun cevabı bence first mover olmakta. Sektörde ilk oyuncu olup kendini 7’den 70’e herkese tanıtabildikten sonra (marka bilinirliği)kullanıcıya istediğini verdin mi tasarım vs bir şekilde popüleriteye mani olmuyor

      Cevapla
  6. Harun Yaşar |

    Düz tasarıma şu sıralar en güzel örnek http://www.teknosa.com.tr

    Cevapla
  7. Ahmet Karlı |

    Bir de yazı tipi seçimine, özellikle farklı sistemlerdeki bozulmaların önüne geçme yollarına biraz değinseniz çok iyi olur.

    Cevapla
  8. hocam türkçe karşılığı olan kelimeleri lütfen türkçe yazalım dilimize sahip çıkalım.

    misal; flat design = düz tasarım

    Cevapla
    • düz tasarım deyince, bu tasarımın önderi olan Tışane Öykünen’e de buradan selam çakalım.

      fb.com/tisaneoykunen

      Cevapla
    • Kesinlikle Katılıyorum.”bunlar User Experience konular” “Flat Design” “Tekrar ele alınıp retouch edilirse” Makaleyi okuyunca Almanyadan izne gelen arkadaşlarımın konuşmaları sandım 🙂 Araya türkçe anlamını herkesin bildiği halde ingilizcesini yazdığınızda Makale daha cool !! olmuyor.

      Cevapla
  9. Yıllardır uyguladığım tasarım şekli trend olmuş hey gidi hey!

    Cevapla
  10. 3~5 yıl önce flat tasarım yapıp müşteriye göstersek, fena tepkiler alırdık. Bu uygulamarınız muhteşem olmuş, modern ferah rahat.

    Cevapla
  11. Çok başarılı bir yazı olmuş bir zamanlar yanlış hatırlamıyorsam redesign diye bir blog vardı amazon, google, microsoft un web tasarımlarını ele alır en baştan tasarlardı o tadı aldım. daha sonra google bu arkadaşı keşfetti ve baş tasarımcı olarak aldı, blog kapandı 🙂

    Cevapla
  12. İyi bir başlangıç olmuş ama, örnek incelemeden önce anlatılacak çok daha fazla konu var aslında. Flat arayüz anlayışı sadece sadeleştirme amacıyla ortaya çıkmadı. Arkasındaki en büyük itici güçlerden biri mobil uyumluluktu, zira flat tasarımlar farklı çözünürlüklere inanılmaz kolay uyum sağlayabiliyordu. Responsive arayüzlerin de gelişiyle bu yaklaşım açıkçası kaçınılmaz hale geldi.

    Cevapla
  13. kemalsolmaz |

    Bu tür sanatsal altyapı gerektiren makaleleri lütfen bu işin okulunu okumuş (güzel sanatlar vb.) kişilere yazdırın. Adam flat demiş ama yerde gökte gradient var.

    Behance’de sağlam kişiler bulabilirsiniz…

    Cevapla
  14. Flat design la ilgili gördüğüm ve test ettiğim en önemli problem düğmeler. Özellikle belli bir yaşın üstündeki kimseler flat düğmelerin düğme olduğunu anlamıyor. Çoğu onu başlık vs. zannediyor. Tavsiyem, düğmelere gradient koyulmasa bile en az 2 renk kullanılıp biraz boyut kazandırılması.

    Cevapla

Bir Cevap Yazın