Formlarınızla Etkileşimli Dinamik Arkaplanlar

Vatanay Özbeyli Yorum yazın CSS3, jQuery

Günümüz tasarımlarında uzun formlar wizardlar sayesinde adımlara bölünüyor, kendi içerisinde kategorize ediliyor ve basitleştiriliyor. Ancak wizard mantığı kullanım kolaylığı sunuyor gibi gözükse de aslında süreyi uzatıyor. Burada anahtar kelime ve çıkış noktası “dikkati yönetmek” olarak gösterilebilir. Öyleyse kullanıcıya uzun formların her bir inputuyla etkileşime geçen tasarımlar sunmak işe yarayabilir.

Bu makalemizde her form öğesiyle birlikte renk değiştiren arkaplan hazırlayacağız. Renklerimizi de Google‘ın yeni ve popüler tasarım trendi Material Design‘dan seçeceğiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Web Tasarımında 5 Popüler Trend

Vatanay Özbeyli 1 Yorum İlham Verenler

Son birkaç saat içerisinde ziyaret ettiğiniz web sayfalarını hızlıca bir hatırlayın. Farklı amaçlara hitap eden çeşitli arayüzler gözünüzün önünde canlanacaktır. Biraz daha detaylı düşününce aslında bütün bu arayüzlerin belli başlı prensipler üzerine kurulu olduğunu fark edeceksiniz. Özellikle web tasarımı ile meşgul, bu işe saatlerinizi arıyorsanız zaten sözünü ettiğimiz detaylar gözünüzden kaçmayacaktır.

Bu makalemizde web teknolojilerinin (W3C) güçlenmesiyle genişleyen tasarım yelpazeninin son trendleri üzerine konuşacağız. (daha&helliip;)

Devamını Oku

Tasarımcılara Özel 48 Adet Flat Icon

Vatanay Özbeyli Yorum yazın Kaynaklar

Kabartma, gölgelendirme veya et payı verme gibi tasarım tipleri artık tarihe karıştı. Keskin ve düz olarak Türkçeleştirebileceğimiz Flat Design günden güne popülerliğini arttırıyor.

Hiç kuşkusuz bizim neslimizin en büyük trendi sadelik. Bu yüzden Adobewordpress ailesi olarak web sayfanızda veya baskı işlerinde kullanabileceğiz sade ve şık kaynakları sizlerle sıklıkla paylaşıyoruz. Bu yazımızda ise sizlerle 48 adet ofis, sosyal ağ, fotoğraf, seyahat ve mobil teknoloji konulu flat icon paylaşacağız. Vektörel yapıdaki bu tasarımları .ai ve .png formatıyla indirebilirsiniz.

Tabii ki herbiri ücretsiz… (daha&helliip;)

Devamını Oku

CSS ile Gazeteye Benzer Web Tasarımı

Vatanay Özbeyli 3 Yorum CSS3, Öne Çıkanlar

Bu makalemizde sadece CSS ile gazete yapısına benzer, bol kolonlu bir web tasarımı hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Form Tasarımı

Vatanay Özbeyli 4 Yorum CSS3, Öne Çıkanlar

Kullanıcı arayüzü ve deneyimi söz konusuyken, form öğelerinin dizilişi ve tasarımı büyük önem taşımakta. Özellikle uzun yapıdaki formlar kesinlikle tekrar elden geçirilmeli, gerekirse tasarımla basitleştirilmeli ve adımlara bölünmeli. Hazırlayacağımız örnek yapı sayesinde varolan bir form yapısının HTML kodlarına hiç dokunmadan yepyeni bir tasarım oluşturacağız.

Bu makalemizde sadece CSS kodlarıyla bir form öğesini tüm iç detaylarıyla şekillendireceğiz. Üzerinde oynayacağımız form yapıları şöyle : Form, legend, label, input, fieldset, select, textarea, checkbox.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Ders 1 : Bootstrap nedir?

Vatanay Özbeyli 4 Yorum Bootstrap

Web tasarımını öğrenmek mi istiyorsunuz? CSS ve JavaScript hatta HTML öğrenmek sizi zorluyor mu? Ya da bütün bunlarla uğraşmak için zamanınız yok mu? Doğru yerdesiniz.

Adobewordpress olarak yepyeni bir makale dizisiyle sizlerleyiz.

Karşınızda günümüzün öne çıkan front-end frameworklerinin en popüleri; Bootstrap. Bu makalemizde Bootstrap‘in tam olarak ne olduğu ve ne işe yaradığını konuşacağız, bir HTML iskeleti ile örneğimizi oluşturacağız. (daha&helliip;)

Devamını Oku

Photoshop ile Web Tasarımına 10 İpucu

Vatanay Özbeyli 5 Yorum İpuçları, Photoshop Dersleri

Photoshop’u daha efektif kullanmanın onlarca yolu var ve bizler her geçen gün bir yenisini daha öğreniyoruz.

Sizler için, Photoshop ile web tasarımı taslakları oluştururken işinize yarayacak birkaç tavsiyemiz var. AdobeWordPress daha iyi tasarım yapmanız için yüzlerce makale sunuyor. Fakat bu sefer amaç tasarım sürecini ve işlevini arttırmak.

Photoshop ile web tasarımındaki önemli 10 kritik maddeye birlikte göz atalım. (daha&helliip;)

Devamını Oku

HTML5 ve CSS3 ile Yaprak Menü

Vatanay Özbeyli 2 Yorum CSS3, HTML5, Tasarım Unsurları

CSS’in transition efektleriyle ilgili bir çok çalışma yaptık. Fiziksel efektlerinden de rotate ve bluru daha önce birkaç kez kullandık. Hadi gelin hem o bilgileri pekiştirelim hem de gayet şık bir menü tasarımı yapalım. Ama öncesinde aşağıdaki örnek .GIF dosyasını görüntülemenizde fayda var.