Son Haberler
Anasayfa / Yazılım / Material Design, Responsive Design Nedir?

Material Design, Responsive Design Nedir?

Material Design Önemi

Herhangi bir WEB uygulamasının başarısı birçok önemli faktöre bağlıdır. Bunların başında da kullanıcıya sunduğu deneyim ve WEB uygulamasının sunumu gelir. Özellikle günümüzde profesyoneller ve kurumlar eş zamanlı olmayan sunucu etkileşimlerinden kaynaklanan sayfa geçişlerini sınırlandırmanın yollarını aramaktadırlar.  Dolayısı ile bir çok WEB uygulaması artık kullanıcılara daha zengin bir arayüz sunmak zorunda. Bu zenginliğe sahip olamayan bir çok WEB platformu ise kullanıcılar tarafından artık ilgi görmüyor. Günümüzün WEB tarayıcıları, CSS ve JQuery frameworklerinin yenilikçi yaklaşımları ile birlikte son kullanıcılara eşi benzeri görülmemiş sunumlar sağlayabilmektedir.

JQery destekli CSS Frameworklerinin önemi günden güne artmıştır. Bu artışın başlıca sebepleri arasında;

  • Farklı aygıtları destekleyen tek elden bir çözüm sağlar,
  • Birden fazla tarayıcı ve platform ile uyum,
  • Tek sayfa tasarım uygulaması,
  • PhoneGap ve Windows Store gibi çeşitli aplikasyonlar için destek.
Responsive Design ve Yeni Yaklaşımlar

Geçmiş son 10 hatta 15 yıllık süreci baz aldığımızda özellikle akıllı telefonlar ve tablet üzerinde muazzam bir gelişme süreci yaşandı. Artık akıllı cihazlarımız sürekli elimizde, yanımızda.. Diz üstü bilgisayarların, akıllı telefonların, oyun konsollarının, tabletlerin ve daha bir çok teknolojik cihazın gelişmesi yazılım geliştiricileri de tekelden çözüm üretme hususunda tetikledi. Özellikle WEB projelerinin tüm cihazlar ile uyumlu halde çalışması, hem görsel hem veri bütünlüğü açısından, kullanılabilirlik yönünden son derece önem kazandı. İşte bu noktada Responsive web design olarak adlandırılan yeni bir kavram daha karşımıza çıktı. Aslında bunun kelime anlamına baktığımızda duyarlı web tasarımı anlamı çıkıyor. Cidden de ismi ile tutarlı aslında. Responsive WEB Design kullanıcılara ellerindeki cihazın markası, modeli, boyutu önemli olmaksızın herhangi bir WEB uygulamasını en iyi şekilde görüntülemelerini sağlayan bir yaklaşımdır. Responsive design, Java Script ve CSS ile birlikte öncelikli olarak HTML kullanmaktadır.

Responsive web tasarımı web uygulamalarının farklı cihazlar üzerinde etkili bir şekilde oluşturulmasını sağlar. Böylelikle ekran boyutu, tarayıcı, çözünürlük, işletim sistemi farkı gözetmeksizin web uygulamalarımız farklı cihazlar üzerinde etkin bir şekilde çalışırlar. Responsive dizayn media sorguları, fluid grid, fluid image gibi çeşitli yöntemler kullanılarak gerçekleştirilebilir. Bunlara kısaca değinelim.

Responsive Dizayn Metotları

Media query olarak adlandırdığımız medya sorguları, farklı ortam cihazlarında aynı web sayfası için farklı şablonlar dizayn edebilmemize imkan tanır. Cihazın ve tarayıcının genişlik ve yükseklikleri ile birlikte ortam türüne bağlı olarak bir WEB sayfasının stil, font ve diğer elementlerini konfigüre edebiliriz.

Fluid grid dizayn yöntemi ile WEB uygulamalarında yer alan bütün öğeler, temelde seçilen elemente ilişkin olarak, onun oranına göre büyür veya küçülürler. Burada direkt olarak öğelerin yükseklik-genişlik gibi bilgileri rakamla ifade edilmez, bunun yerine yüzdelik dilimler kullanılır. İmagelar varsayılan olarak ölçeklendirilemez, bu nedenle ekran boyutu değiştiğinde dağılma gösterir.

Fluid image dizayn yöntemi görüntülerin ekran boyutuna bağlı olarak yeniden kapasite olarak boyutlandırılmasını sağlar. Özellikle düşük çözünürlüğe sahip olan, küçük ekranlı cihazlar için önerilmektedir.

Bu üç teknik de Javascript tarafından desteklenen CSS Framework’ü ile kullanılabilir. Bootstrap popüler açık kaynaklı bir front-end web framework’tür. Mobil tasarımları da desteklemektedir. Özelilikle bu pazarda öncü kabul edilen bir framework’tür. Foundation ve Semantic UI gibi diğer frameworklerde benzer özellikler sunarlar. Bu CSS Frameworklerinin çoğu LESS ve SASS gibi CSS Stilsayfalarına işlenmiş dinamik stil sayfaları dillerini kullanırlar. Dinamik stil sayfası dilleri bir çok avantaja sahiptir. Responsive dizayn için yeniden kullanılabilir CSS şemaları, karmaşık ve büyük stil sayfaları için ön işleme yeteneği, miras-devralma, özelliklerin dışa aktarılması işlemleri ve tarayıcıdan sunucuya giden daha az http isteği gibi avantajları vardır.

Responsive Dizayn Özellikleri

Responsive dizayndaki eğilimler günden güne değişmektedir, bunların bazıları:

  • Net ve basit: WEB uygulamasının ana konsepti net olmalıdır. WEB uygulamasının mesajı kullanmış olduğu tema aracılığı ile net ve kesin olmalıdır.
  • Tipografi ve simgeler: Kullanıcılara farklı fontlar ve simgeler kullanabilme imkanı tanınır.
  • Canlı temalar ve benzersiz sunum: Çoğu web uygulamasının canlı ve yeni renk kombinasyonları ile hazırlanması sağlanır.
  • Giriş kontrollerinin zarif tasarımı: Bütün HTML kontrollerinin Material dizayn sayesinde zarif bir tasarımda görünmesini sağlar.
  • Basitleştirilmiş navigasyon: Her zaman iyi sonuçlar veren kullanımı kolay navigasyon sağlar.
  • Sonsuz kaydırma özelliğine sahip içerik: Kullanıcıların tek bir sayfa üzerinde bilgiye erişimini sağlar, facebook ve instagram feed gibi yapılara olanak tanır.
  • Push bildirimleri: Kullanıcıların uygulama ile bağlantılı kaldıkları sürece gerçek zamanlı olarak bilgilendirilmelerine olanak tanır. Notification verir.

Günümüzdeki CSS frameworkler tabi sadece bu özelliklere sahip değildir, aynı zamanda çeşitli uygulama modellerini de desteklemektedir. Adobe, PhoneGap ve Sencha Touch gibi mobil geliştirme frameworkleri tipik mobil ve tablet uygulamaları geliştirebilmek için HTML, Java Script ve CSS frameworklerini kullanırlar. Windows store uygulamaları da HTML, Java Sicript ve CSS Frameworkleri kullanılarak geliştirilebilir. Responsive CSS Frameworkleri herhangi bir geliştirme modelinde tasarımın tamamı ve kullanıcı deneyimi sunan tüm alanlar için önemli bir rol oynamaktadır.

Materyal Tasarım Nedir?

Material Design, Türkçe adı ile Materyal Tasarım dili görsel bir dildir ve Google tarafından geliştirilmiştir. Materyal tasarım temel yapıya daha fazla odaklanan bir dildir. Görsel temsil blokları ve blokları geliştirmek için animasyonlara, geçişlere ve gölge efektlerine izin verir. Materyal tasarımın öncelikli hedefleri aşağıdaki gibidir:

  • Teknolojinin temek yenilikçi ilkelerini kullanarak, klasik tasarım modelinin görsel olarak zenginleştirilmesini sağlamak,
  • Birleşik bir deneyim sağlayan tek bir platform tipi geliştirmek,

Materyal dizayn olmadan önce WEB uygulamaları flat dizayn dediğimiz teknikle geliştirilmekte idi. Flat dizayn çok yönlü bir teknik değildir ve kullanıcılarına texture (doku), gradient (eğimli geçiş) ve shadow (gölge) gibi efektler sağlamaz.

Materyal tasarım birbiri üzerine yığılmış çoklu katmanlar, piksel yoğunluğu ve animasyonlar gibi özellikleri kullanır. Materyal tasarımda tipografi, gridler (ızgaralar), boşluklar (space), renk ve görüntüler tasarımın tamamında önemli bir rol oynamaktadır. Bu teknikte web bileşenleri hiyerarşi ile tanımlanmış belirli alanlara yerleştirilir ve tasarımda öne çıkabilmesi için koyu renklidir. Materyal tasarımın çoklu katman yapısı nedeni ile bu teknikte kullanılan tüm bileşenlerin birbiri ile etkileşimi çok kolaydır. Bileşenleri çevreleyen animasyonlar, gerçek bir nesneyle etkileşim hissi verir. Yeni açık kaynaklı CSS Frameworkleri, responsive web tasarım sunabilmek için Materyal dizayn kullanılarak oluşturulmuştur. Bu Frameworkler, web uygulamalarıyla etkileşime girdiğinde son kullanıcılar için çok iyi bir kullanıcı deneyimi sağlarlar.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir