Material Design Öne Çıkarılmış Menü Tasarımı

Web sitenize NTVspor veya Yerel Futbol‘da da kullanılan material design menü tasarımını eklemek ister misiniz? Özellikle mobil erişimlerde öne çıkarılmasını istediğiniz içerikleri listelemenize yardımcı olacak bu tasarımı hazırlamak tahmin ettiğinizden de basit.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


10 Ücretsiz Material Design HTML Template

google-material-design2014 yılında duyurulan Material Design‘ın günden güne genişleyen kullanım kitlesi ile popülerliği günden güne daha da büyüyor. Android telefonlarımızdan gezdiğimiz web sitelerine kadar her yerde karşımıza çıkan bu tasarım trendini siz de web sitenizde kullanmak ister misiniz?

Merak etmeyin bu iş artık eskisi kadar zor değil. Aşina olduğumuz onlarca web tasarım kütüphanesi artık Material Design skinleriyle birlikte geliyor.

Sizler için en iyi ve ücretsiz 10 Material Design kütüphanesini seçtik.
(daha&helliip;)

Devamını Oku

Google Material Design Örnekleri

Google‘ın Android Lollipop ile hayatımıza giren tasarım trendi üzerine konuşmaya devam ediyoruz. Bugün Material Design animasyon örneklerinden birkaç tanesine göz atacağız. Daha önce de “Instagram, Material Design ile Tasarlansaydı?” konusunda benzer bir animasyon izlemiştik.

İşte karşınızda birbirinden etkileyici Material Design örnekleri… (daha&helliip;)

Devamını Oku

Google Material Design Menu #2

google-material-design-menu2Google‘ın tasarım devrimi üzerine konuşmaya devam ediyoruz. Material Design’ın günden güne web tarafına uyarlanan örnekleri bizim makalelerimizde de yerini buluyor. Daha önce buradaki makalemizde şık bir Material Design menü örneği hazırlamıştık.

Şimdi de ekranın büyük bir kısmını kaplayan, daha büyük yapıdaki bir başka menü tasarımı konu edeceğiz. HTML5, CSS3 ve jQuery desteğiyle hazırlayacağımız bu tasarım soğuk renklerden oluşuyor.

Bu makalemizde üzerine tıklandığında büyük ölçülerde açılan ve içeriği aksi yöne ittiren şık bir menü tasarımı hazırlayacağız. İkinci Material Design menü örneğiyle sizlerleyiz!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Material Design Iconları

google-material-designMaterial Design ile birlikte kullanılan iconlar “Material Design Iconic Font” isimli proje altında bir araya getirildi. Toplamda 744 adet icon vektörel formatta, web tasarımında kullanabileceğiniz şekilde sizleri beklemekte. Diğer popüler icon setleri Glyphicon ve Font Awesome’dan farklı bir ruha sahip bu icon tasarımları günden güne daha da popülerleşecek gibi.

Sergey Kupletsky tarafından hazırlanan bu icon setini ücretsiz bir şekilde kullanabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Bootstrap Material Design

bootstrap-materialdesignGoogle’ın yeni nesil kullanıcı dostu tasarım prensipleri ile Twitter’ın CSS kütüphanesini bir arada kullanmaya ne dersiniz?

Material Design‘ı mobil ortamda yeni yeni görmeye başlamışken web tarafında işler daha hızlı ilerliyor. Web geliştiricileri günden güne yeni Material Design elemanları paylaşırken şimdi de Bootstrap tarafında hareketlenmeler yaşanmaya başladı. FezVrasta, GitHub sayfasında paylaştığı bu web önyüzüyle son günlerde fazlasıyla popüler. (daha&helliip;)

Devamını Oku

Instagram, Material Design ile Tasarlansaydı?

google-material-designGoogle’ın ses getiren tasarım trendi Material Design ile hazırlanmış konsept tasarımlar günden güne kendini gösteriyor. Tasarımcılar özellikle günlük hayatta bol bol kullandığımız uygulamalara değinmekte.

Bugün de Emmanuel Pacamalan tarafından hazırlanmış Instagram konseptini sizlerle paylaşıyor olacağız.

Başlamadan önce Material Design ile ilgili daha fazla şey öğrenmek isterseniz;

(daha&helliip;)

Devamını Oku

Google Material Design Menu

material-design-menuGoogle‘ın ses getiren tasarım trendi Material Design üzerine konuşmaya devam ediyoruz. Bugün Bennett Feely tarafından CSS ile hazırlanan menü örneğini sizlerle paylaşacağız.

Bennett’in örneği Material Design’ın estetik ve animatif tarafını başarılı bir şekilde yansıtmakta.

Web öğelerinin sadece spesifik kısımlarını CSS ile göstermemizi sağlayan clip-path tanımı da bu tasarımda faydalı bir şekilde kullanılmakta.

Eğer hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Google’ın Yoğurt Yeme Şekli : “Material Design”

google-ioGoogle, geçtiğimiz dönemde IO kapsamında Android için arayüz tasarımını açıkladı. Aslında buradaki Android filtresi sıradan bir maske. “Material Design” şeklinde isimlendirilen bu yeni trend sadece Android arayüzlerini değil, Chrome OS ve Google’ın tüm web servislerinde yer bulacak. Bu da teknolojiyle en ufak alakası olan herkesin Material Design’ı kullanacağı anlamına geliyor.

İlk bakışta Flat Design‘ın renklerini anımsatsa da herşey artık daha canlı. Tüm renkler açılmış. Beraberinde minimalist yapı korunmuş. Ayrıca bol bol kullanılan animasyon ve geçişler sayesinde bir ekranın gösterebileceğinden fazla içerik iç içe eklenmiş. Bu da kullanım kolaylığı konusunda dikkat çeken yeniliklerden birisi.

Sağlanan kullanıcı deneyimi de UX Awards tarafından gold price ile ödüllendirildi. Açıklama ise şu sözlerle başlıyor : “Çoklu ürün ~ platform için gerçekçi hisse sahip yüzeyler, kalınlaşmış grafik design ve işlevsel hareketlilik ile tasarıma yeni bakış açısı.

Peki ya Google ne diyor?

“Focus on the user and all else will follow.”

(daha&helliip;)

Devamını Oku