Flat Tasarım Nedir Nasıl Yapılır?

Bu yazımızda, Flat tasarım nedir nasıl yapılır sorusunun cevaplarını birlikte arayacağız. O zaman hemen başlayalım!

İngilizce bir kelime olan “Flat” düz anlamına gelmektedir. Flat tasarım ise düz tasarım olarak çevrilebilir. İnternet sitesi tasarımlarında kullanılan; animasyon, çeşitli efektler ve üç boyutlu özellik sergileyen materyaller, flat tasarımda yer almaz. Bu tasarım türünde sadelik ön plandadır.

Aynı zamanda canlı renklerin kullanılması da bu tasarım türünde önem kazanmaktadır. Ana sayfa ve diğer bağlantı sayfalarında kullanılan sloganlar ve diğer kelimeler de, Flat tasarımda önem kazanır. Hatta kelimelerin puntoları ve yazı karakterleri de önemlidir.

Özellikle son zamanlarda akıllı cihazlarda bu tür tasarımların tercih edilmesinin nedeni, cep telefonlarında ve tabletlerde sitenin daha kolay incelenebilmesidir. 2013 yılında popüler olmaya başlayan bu tasarım türü, Windows 8 ve iOS7 işletim sistemlerinde de kullanıldı.

Flat Tasarımda Hangi Unsurlar Önemlidir?

Flat tasarım da yazımızın başında da belirttiğimiz gibi sadelik ön planda olmalıdır. Abartılı animasyon ve efektlerden kaçınmak gerekir. Flat tasarımlar iki boyutlu elemanlar kullanılarak oluşturulur. Yani sitenin ana sayfasında ve diğer sayfalarında, üç boyutlu değil, iki boyutlu resim ve vektörel çizimler kullanılır. Abartılı olmayan ve animasyon içermeyen, simgeler ve şekiller bu tasarımda kullanılabilir.

Dikdörtgen, kare, oval ve daire gibi şekiller kullanabilirsiniz. Menü butonlarında ve simgelerde de basit düşünmeli ve tasarımı bu doğrultuda şekillendirmelisiniz. Genelde tek renk tercih edilir.

Tipografi, Flat tasarımda sıklıkla kullanılan bir unsurdur. Yazıyı belirli şekillerde sunma sanatı olarak tarif edebileceğimiz tipografi, tasarımın estetik görünmesini sağlar. Mesela, yazı fontunun türü, büyüklüğü ve konumu gibi özellikler, tasarımı daha farklı gösterecektir. Aynı şekilde sade ve tek renkler, yazı fontlarında da kullanılır. Gölgelendirilmiş ya da kabartılmış yazılar, bu tasarım türünde tercih edilmez.

Her ne kadar tek renk kullanımı bu tasarım türünde önemli olsa da, iki renkli ya da üç renkli tasarımlar da tercih edilebilir.  Her durumda renklerin canlı görünmesi ve dikkat çekmesi amaçtır. Mesela menü butonlarında ve internet sitesinin diğer kısımlarında canlı renkler kullanabilirsiniz.

Flat Tasarım Örnekleri

Dünyada oldukça popüler olan bu tasarım türü, ülkemizde yeni yeni keşfedilmeye başladı. Bizde yazımızda, internet ortamında bu şekilde hazırlanmış sitelerden birkaç örnek vererek, konunun daha net anlaşılmasını sağlayacağız. En etkili Flat tasarım örnekleri sırasıyla aşağıda verilmiştir.

“Lander” adı verilen site tamamen minimalist bir anlayışla tasarlanmıştır. Siteye göz atacak olursak, menü kısmında küçük puntolarla ve beyaz renkte kelimeler kullanılmış. Hemen altında büyük puntoyla, slogan verilmiş ve onun da altında daha büyük puntoda “Landing Page” cümlesi dikkat çekecek biçimde yerleştirilmiştir. Ana sayfa ekran fonu açık mavi olarak tasarlanmış. Ana sayfanın hemen altında, kahve fincanı, cep telefonu ve not defteri gibi iki boyutlu resimler gözümüze çarpıyor. Oldukça sade bir tasarım olmuş değil mi?

“Evolve Wealth” sitesinde daha sade bir tasarımla karşı karşıyayız. Bu sitenin ana sayfasında da açık mavi fon kullanılmış. Üst sol kısımda ise sitenin logosu, küçük puntolarla yer alıyor. Tepe menü sağ tarafta yer alıyor. Tepe menüde yer alan sekmeler küçük boşluklarla ayrılmış ve kullanılan kelimeler oldukça küçük puntolarla yer almış. Sağ alt kısımda zindan kapısını andıran bir resim yer alıyor. Resimde yarı açık demir parmaklıklar ve hemen altında, bir deste kağıt ve demir para bulunuyor. Sol tarafta ise sitenin mesajının yer aldığı slogan bulunuyor. Slogan biraz daha büyük puntolarla sitede yer alıyor.

 

“Liberio” tasarımının gördüğümüz en sade yapıya sahip olduğunu söyleyebiliriz. Ana sayfanın fon rengi açık sarı olarak tasarlanmış. Üst sol kısımda sitenin logosu bulunuyor. Sağ üst kısımda ise iki adet menü sekmesi yer alıyor. Alt sağda iki boyutlu hazırlanmış bir tablet resmi görüyoruz. Alt solda ise sitenin sloganı yer alıyor. Eee, daha ne olsun? Oldukça sade olmuş işte!

Yukarıda verdiğimiz üç örneği çoğaltmak mümkündür. Ancak konuyu uzatmamak adına bu kadar örneğin yeterli olacağı kanısındayız. Daha fazla Flat tasarım örnekleri internet üzerinden bulunabilir. Zaten diğer örneklerde, aynı anlayışla hazırlanmıştır.

Flat  Web Tasarım Neden Farklıdır?

Son zamanlarda karmaşık sitelerin artması, kullanıcı faydasını geri plana atan bir durum oluşturdu. Yapılan istatistiklerde, karmaşık yapıya sahip olan sitelerdeki trafik oranlarının daha düşük olduğu görüldü. Üstelik kullanıcı böyle bir siteye girdiği zaman, hemen terk ediyordu. UX ve UI tasarımcıları, bu durumu düzeltebilmek adına harekete geçtiler ve ortaya, Flat tasarım çıktı.

Flat web  tasarımlar, diğer internet sitesi tasarımlarına oranla daha sadedirler. Kolaylıkla anlaşılabilir ve rahatlıkla gezilebilirler.

Diğer sitelerde yer alan zengin materyaller, bu modelde bulunmaz. Tüm internet sayfası seçeneklerini tek bir ekranda görme avantajı sunar. Zaten Flat tasarımın en belirgin özelliği, tüm unsurların tek bir sayfada yer almasıdır. Menü butonları sayesinde, konuyla ilgili diğer sayfalara da böylelikle kolaylıkla ulaşılmış olur.

Sade ve canlı renkler kullanıldığından dolayı, gözleri daha az yorar. Dikkat ettiyseniz, zengin materyal içeriğine sahip olan bir sitede, gözlerimiz sürekli olarak, sayfanın çeşitli yerlerine dağılmış materyallere kayar. Bu durum sonucunda gözlerimiz yorulur, hatta kafamız karışabilir. Bir sürü yazı ve resmin tıkıştırıldığı bir görüntü, karmaşanın zihnimizde olumsuz etki yaratmasına neden olur.

Material Design Nedir?

Flat tasarım konusuyla alakalı olması bakımından, Materyal Design nedir sorusunu da bu başlık altında cevaplamayı uygun bulduk. Aslında bu tasarım türünde de sadelik ve düzen ön plandadır.

2014 yılında Google firması tarafından tanıtımı yapılmış ve o tarihten sonra özellikle cep telefonlarında kullanılmaya başlanmıştır.

Cep telefonu uygulamalarının her birinde farklı tasarımlar kullanılıyordu. Kullanıcı deneyimi açısından bu durum, kullanıcılarda olumsuzluk yaratıyordu. Böylelikle ara yüz unsurlar standart hale getirildi ve her uygulamada, belirli şemaların yer aldığı ara yüz tasarımları kullanılmaya başlandı.

Bu tasarım türünde Google tarafından belirlenen şema düzeni kullanılıyor. Aynı zamanda pastel renkler ön plana çıkıyor.

Konunun daha iyi anlaşılması adına örnek verecek olursak, Google 2015 yılından sonra kendi uygulamalarında, Materyal Design tasarımını benimsemiştir. Özellikle; Gmail, Google Drive, Google Docs, Google Sheets, Google Maps ve Youtube bu tasarım türüyle yeniden düzenlenmiştir.

Bu tasarımda özellikle ikonik semboller sıklıkla kullanılır. Google firmasının oluşturduğu ikon kütüphanesine göz atmak için, https://material.io/resources/icons/?style=baseline bağlantısını kullanabilirsiniz.

Kare, dikdörtgen, üçgen ve daire gibi şekiller, bu tasarımda sık kullanılan materyallerdir. Flat tasarıma benzer bir yapıdadır.

Tıpkı Flat tasarımda olduğu gibi bu tasarımda da sadelik ön plandadır. Kart düzenini takip eden bu tasarımda, menü bölümü sol tarafta yer alır. Elementler sayfanın belirlenen yerinde sabit olarak durmaktadır.

Materyal Design flat tasarımının en büyük avantajı, kolay ezberlenebilir olmasıdır. Mesela, Gmail sayfasının düzenini ezberleyen tasarımcı, Youtube sayfasının tasarımını kolaylıkla yapabilir.