2012'de Dikkat Edilecek 15 Web Tasarım Trendleri

2011 yılına kadar tasarım ve internet teknolojisinde bazı şaşırtıcı değişiklikler meydana geldi. Web geliştirme, süreci kolaylaştırmak için yararlı olan sayısız açık kaynak kütüphaneden bahsetmek yerine, öğrenmeye atlamak için çok daha yumuşak bir konu haline geldi. Ve yine de, küresel tasarım topluluğu havluya atmaktan uzak görünüyor..

Geçen sene çok hızlı gelişen 15 fikir sunmak istiyorum. Bu trendler, 2012'ye taşınması büyük olasılıkla büyük rol oynayacak web ve grafik tasarım tekniklerini kapsar. Büyük olasılıkla, çevrimiçi olarak en sevdiğiniz sitelerin çoğunda bunlardan birkaçını temsil ettiniz..

Neyse ki bu özellikleri uygulama yöntemlerinin anlaşılması kolaylaşıyor ve kod bakımından çok zayıflıyor.

1. Duyarlı Arayüz Tasarımı

Ortalama bir kullanıcı deneyimi muhtemelen bir web sitesi tasarlarken göz önünde bulundurulması gereken en önemli unsurdur. Sayfa öğelerinin klavye / fare girişine hızlı bir şekilde yanıt vermesini ve beklendiği gibi davranmasını istiyorsunuz. Bazı örnekler, dışa açılır menüler, açılır kutular ve açılır pencereler içerebilir.

MooTools ve jQuery gibi ünlü JavaScript kütüphaneleri dahil olmak üzere, bu özelliklere ve hatta diğer özelliklere animasyon uygulamak çok daha kolay hale geldi. Günümüz tarayıcılarının çoğu bu kodu destekler ve komut dosyaları kullanılamadığında bile zarifçe düşer. Sonuçta, tasarımın herhangi bir yeriyle etkileşime girdiğinde kullanıcının kendini rahat hissetmesini sağlamak istiyorsunuz..

Benzer şekilde form girişini ve veri kontrolünü dikkate almalısınız. Birçok kayıt sayfasında, her bir giriş alanında çalışırken küçük yanıtlar alacaksınız. Geçerli e-posta adreslerini, yinelenen kullanıcı adlarını ve hatta parola girişlerini iki kez kontrol etmeyi otomatikleştirebilirsiniz. Bu, kullanıcının sonunda zaman kazandıracak ve kayıt işlemi boyunca kullanışlı bir rehber sağlayacaktır..

2. Dokunmatik Ekran Mobil Cihazlar

Geçtiğimiz birkaç yılda akıllı telefonların teknoloji dışı meraklılar arasında bile destek kazandığı ortaya çıktı. Ancak yalnızca 2011'den beri bir mobil site patlaması ve mobil telefona özel şablonlar gördük..

Android destekli telefonların yanı sıra iPhone ve iPad cihazlarının popülaritesi, dokunma komutlarıyla ziyaretçilerinizle sayfalarınızla tam etkileşimde bulunacağınız anlamına gelir. Bu her tasarım mockup ile gerçekçi bir düşünce haline gelmeli. Mobil web tasarımındaki eğilimler, tamamen ayrı bir mobil tema oluşturmanın çoğu zaman en iyi sonuçları sağladığını göstermiştir. Bu şekilde, sitenin inceltilmiş bir versiyonunu mobil kullanıcılara sunarken, tüm dinamik içeriği ana düzeninizde yerinde tutabilirsiniz..

3. Freebies Ton!

Dürüst bir şekilde, ücretsiz indirmelerden hoşlanmadıklarını kim söyleyebilir? Web tasarımcıları içeriğini yıllardır çevrimiçi olarak paylaşıyorlar, ancak son zamanlarda bu dijital sanatçılar arasında çok popüler bir trend haline geldi. Özellikle web ve grafik tasarımcıları için ücretsiz indirmeler sunmak için oluşturulmuş birkaç topluluk olmuştur..

Kişisel favorilerimden ikisi, her ikisi de en kaliteli üyeler tarafından sık sık güncellenen Download PSD ve Designmoo. Ek olarak, Hongkiat Freebies arşivi, kontrol etmek için çok sayıda tatlı kaliteye sahip. Hiç bir zaman önce tam anlamıyla hiç bu kadar kolay olmamıştı ücretsiz web arayüzleri, düzenleri, logoları, afişleri ve diğer PSD / AI dosya türlerini indirmek hiç bu kadar kolay olmamıştı!

Bazı Düzenli Yüklemeler

Aşağıda, 2011 yılının başlarında kontrol edebileceğiniz birkaç harika freebies bulunmaktadır. Bu listenin harika dosyaları olduğunu düşünüyorsanız, 2012'nin geçmesini bekleyin!

Mini Web UI Seti

Dark Mini Müzik Çalar

Sürgülü Etiketler

Karanlık Fotoğraf Kaymak

Arama Kutuları

Giriş Yap / Giriş Yap

Giriş Modal Kutusu

Giriş formunu temizle

Fiyatlandırma Tabloları

Minimal Yükleme Çubukları

Eklenti Açılır Penceresi

4. HTML5 ve CSS3 Standartları

Bu yeni tasarım arketiplerinin her ikisi de 2011 boyunca sürekli büyüyen bir birikime sahip olmuştur. Ek olarak, W3C en popüler tarayıcılardan destek almak için büyük çaba sarf etti..

Yalnızca HTML5 / CSS3 web geliştirmesinin geleceği için iyi şeyler görebiliyorum. Öncü tasarımcılar bugünün alanında çoğu zaman göz ardı edilir, ancak tüm kompozisyon sürecine bu kadar büyük önem verirler. Her gün bildiğiniz ve uyguladığınız tekniklere dayanarak kendinizi herhangi bir 'etiket' içine sıkıştırmamaya çalışın. Eğer yetişmeniz gerekiyorsa, HTML5 / CSS3 kodlaması için yeni başlayanlara nasıl yardımcı olacaklarını öneriyoruz.

Bu yeni standartlara uymak, JavaScript ve jQuery'de daha da kolay bir şekilde geliştirilmesini sağlayacaktır. Geliştiriciler zaten HTML5 / CSS3 proje kodlarını çevrimiçi olarak yayınlıyor ve paylaşıyorlar ve işler devam ederse, gelecek yıla gireceğinden çok daha fazlasını fark edeceğiz.

5. Kurdela ve Afişler

Bu tasarım tekniği tam olarak olmasa da “yeni” Yakın zamana kadar hiçbir zaman ana akımdan kopmadı. Muhtemelen köşe şeritleri, şerit gezinti çubukları ve küçük şerit rozetleri örnekleri gördünüz. Bu eğilimler, tüm Google’da bulunabilecek ayrıntılı öğreticilerin yoğun birikimi nedeniyle büyük olasılıkla patladı..

Web tasarımcıları bugünlerde bilgi paylaşmak için kendi bloglarını yayınlama konusunda daha yetkin. Artık en popüler efektleri çoğaltmak için tasarımcılar arasında basit teknikler kolayca aktarılabilir. Çaba harcamak için indirebileceğiniz ücretsiz PSD'ler de var..

6. Premium WordPress Temaları

WordPress 3.0'ın son sürümünde, özel yazı türleri ve benzersiz makale görüntüleri gibi uzun zamandır beklenen özellikler bir dizi yer aldı. Yine de gördüğüm en derin değişiklikler, premium WP temalarında uzmanlaşmış WordPress geliştirme dükkanlarından geliyor..

Böyle bir temayı satın aldıktan sonra, yükleme işlemi diğerlerine benzer. Yine de, özel eklenti işlevselliği, alt temalar, yeni yönetici menüleri ve temanın içinden bir sürü başka özellik eklemek artık mümkün! WooThemes, ElegantThemes ve Roket Temaları her şeyden önce dikkatimi çeken birkaç marka. Kaliteleri kusursuz ve geliştiricilerin en iyi şablonları ve en sezgisel yönetici menülerini oluşturmak için yukarıda ve öteye gittiğini hissediyorum..

2012'ye girerken sadece WordPress'in kullanımının daha kolay olacağını hayal edebiliyorum. Bu, piyasaya sürülecek daha kaliteli temalar ve başlatılacak daha şaşırtıcı bloglar anlamına geliyor.

7. Çevrimiçi Dergiler

WordPress temaları hakkında konuşurken, çevrimiçi dergilerin hızla kabul gören başarısını da gündeme getirmeliyiz. Bu web siteleri, genel yapı ve sayfa düzeni dışında, genel bir WordPress blogundan çok da farklı değildir. Bu büyük magazinleri, ana sayfalarının tam sunumuyla ve site için yazan yazarların koleksiyonuyla görebilirsiniz..

Dergiler çevrimiçi hareket etmeye başladıkça, birçok yazar için bir gelir kaynağı haline gelecektir. 'Web tasarımı' gibi bir konu verildiğinde, oyun veya ekonomiden daha küçük bir niş hedeflenir. Ancak çevrimiçi baskıdan daha fazla tasarım dergisi görüyor olmamız, dünyanın gelecek yıllarda nereye gideceğini göstermeye devam ediyor.

8. Kolay Alt Gölgeler

Bir CSS3 modeli olarak, tasarımcıların sayfada herhangi bir yere alt gölge uygulaması artık her zamankinden daha kolay. Kutu metnine ve kutu stili öğelerine net gölge efektleri oluşturmada ilgili özellikler verilmiştir..

Metin-gölge sözdizimini ezberlemek çok kolaydır ve kutu-gölge olarak takip eder. Bu efektlerin oluşturulmasında artık gereksiz olan web geliştiricileri bu temel fikirleri daha da genişletmeye odaklanabilir.

9. Dinamik Tipografi

Yazı tipleri, web tasarımı geleneğini kapsayan alanın büyük bir parçasıdır. Arial, Helvetica, Georgia ve Trebuchet MS dahil olmak üzere en göze çarpan fontlar, yıllardır civarında. Her ne kadar web standartlarında derin bir amaca hizmet etseler de, gelişmiş web sayfası tipografisi için birçok alternatif seçenek var..

Örneğin Typekit, doküman kafanıza eklenmesi için sadece birkaç satır kod gerektirir. Bundan sonra hangi font adlarının ekleneceğini ve CSS'inize ekleneceğini belirleyebilirsiniz. Bu tekniğin en iyi yanı, çoğunlukla JavaScript'e dayanmasıdır, bu nedenle son kullanıcının yazı tiplerini yüklemesi gerekmez..

Diğer bir alternatif, Typekit’e benzer şekilde çalışan Google Web Fonts. İlgilenen tasarımcılara, CSS3'ün @ font-face medya sorgusunu kontrol etmelerini öneririm, çünkü size daha fazla yaratıcılık verilir. Bu kod bir almak için kullanılabilir. .ttf veya .otf web sunucunuzdan yazı tipi dosyası ve kullanılabilir bir stil sayfası yazı tipi olarak ekleyin! Dinamik yazı tipleri oluşturmak için kullanılan pek çok alternatif sistemle 2012'den bu alanda bir yenilik ve tasarım yeteneği dalgalanması beklemesini bekliyorum..

10. Resim Galerisi Slayt Gösterileri

Daha sonraki jQuery popülaritesiyle birlikte, daha fazla resim slayt gösterisinin web düzenlerine bırakıldığını gördüm. Galeriler, iç sayfa içeriğinin hızlı bir şekilde göründüğünü göstermek için mükemmeldir. Bu, bir dizi portföy girişi, fotoğraf, özellikli resimli blog yazısı, demo ekran görüntüsü vb. Olabilir..

Çok sayıda benzersiz sürgülü ve solma canlandırmayı düşündüğünüzde, ana sayfanız için hızlı bir slayt gösterisi oluşturmak hiç bu kadar kolay olmamıştı. 2012'nin, sadece tasarımcılar arasında değil, bu trendlerde bir yükseliş göreceğine inanıyorum. Çevrimiçi web uygulamaları ve yazılım şirketleri, ekran görüntülerini ve benzersiz özellikleri görüntülemek için slayt gösterileri rehberli öğreticiler olarak kullanıyor.

11. Modal Popup Kutuları

Modal kutularının, yıllardır masaüstü yazılımı ve mobil uygulamalarında göründüğü düşünüldüğünde, İnternet için hala oldukça yeni olduğunu düşünüyorum. Kalıcı bir pencerenin amacı, geçerli sayfanın üstüne yeni bir tane yüklemeden kutu içeriği (kullanıcı kaydı veya oturum açma gibi) sunmaktır..

Açık kaynak kodlu resim galerisi komut dosyalarının çoğu, arkaplanın açılır kutudan daha koyu olduğu bir tür lightbox efekti kullanır. Her ne zaman birçok kişi tarafından benimsenmemiş olsa da, ne zaman görsem bu özellikten gerçekten zevk alıyorum. Ve modal kutuları seksi ve şık olsalar da kodlamaları ve düzgün çalışmaları çok zor olabilir..

Kendi web siteleriniz hakkında fikir edinmek için daha popüler sosyal haber paylaşım topluluklarından bazılarına göz atın. Reddit ve Digg, her ikisi de tipik bir düzende kayıt / giriş modal kutuları içerdiğinden ilk akla gelenler. Ek olarak, Google+ için kullanıcı arayüzü etkileri, önemli miktarda kalıcı işlevsellik barındırmaktadır.

12. İlham Verici Listeler

Liste öğelerinin koleksiyonları, web tasarımının ilk günlerinden beri ortaya çıkmıştır. Yeni yüzyıla girerken tasarımcılar HTML navigasyon ve sıralanmamış listeleri kullanarak gezinti menülerini kullanmaya başladılar. Ancak günümüzde listeler çok daha fazlası için kullanılıyor ve kullanılıyor.

Blog temalarının çoğunda tüm kenar çubuğunun listelerle dolu olduğunu görüyorum! Makale girişlerinde listeler için harika CSS stilleri hazırlayan tasarımcılardan bahsetmiyorum bile. Bu yılın başlarında başka bir gönderide ilham veren liste stillerini ele aldık, bu konuda size biraz daha fazla fikir verebilir. 2012'ye bakmayı düşünüyorum. Muhtemelen Flowapp’ın görevler ve yapılacaklar için özel yerleşim planına uyması gibi gerçekten yaratıcı örnekler bekliyorum..

13. Oluşturulan Resim Küçük Resimleri

Web dünyasında içeriğin kral olduğu konusunda hemfikir olabiliriz. Ancak tasarımcıların çoğu, boş bir metnin bir sayfasının çabukça sıkılacağına da katılıyor. Görüntüler, onları yavaşça nasıl serpeceğinizi biliyorsanız, bu fazladan baharatı ekleyebilirsiniz. Bu yöntemlerden biri, her sayfa veya makale için önizleme sağlamak üzere dinamik küçük resimler kullanmaktır.

Bugün bloglar öne çıkan resim trendini benimsemeye devam ediyor, peki neden oluşturulan küçük resimleri temanıza da uygulamıyorsunuz? Bunlar genellikle dikkatimi makale başlığına çeker ve metin bağlantılarıyla dolu bir sayfayı bölmeye yardım eder.

Başka bir örnek olarak Dribbble, her tasarım çekimi için küçük resimlerin bir bütün galeri listesini sağlar. Böyle bir masa sıra tarzı düzeninde, her küçük resme bir göz atmak ve aradığınızı bulmak için kaydırın süper kolaydır. Bu taktik, tüm tasarım topluluğunun dikkatini çekti! Er, en azından en azından Dribbble üyeleri. Sadece 2012'nin bu fikirlerin geçmişten bu tür örneklere dayanarak daha fazla çaba harcadığını görmesini bekleyebilirim..

14. büyük boy simgeler

Bu eşsiz trend, Mac OS X simgesi tasarımlarının popülaritesinden kaynaklanmaktadır. Programcılar Mac uygulamaları için web siteleri başlatmaya başladıkça, hepimiz de markalaşmayla temsil edilen muazzam boyutları gördük. Buna göre, bu trend iOS geliştiricileri tarafından da tespit edildi ve şimdi modern tasarım kültürü içinde rahatça dinleniyor.

2012'ye girerken bu trendlerin nasıl adil olacağını tahmin etmek zor. Bir yandan bu simgeler tıkalı olabilir ve gerekenden daha fazla yer kaplayabilir. Yine de, iOS / OSX uygulamalarında sıkıntı çekmeye bile yaklaşmıyoruz ve tasarımcılar hala piksellerin mükemmel ikon özelliklerini ortaya koyuyor. Web tasarımcılarının artık hemen hemen tüm sayfa markalaşmalarında büyük boyutlu simgeler içerdiğini de unutmayın! Ziyaretçinizin doğrudan dikkatini çekmenin ve şirketiniz için bir isim oluşturmanın iyi bir yolu.

15. Abartılı köprüler

Bağlantı bağlantıları kesinlikle herhangi bir web sitesinin en iyi beş en önemli unsurları arasındadır. Bunlar, 1990'lardan bu yana uzun bir yol kat etti ve popüler tasarım trendleri sadece katlanarak büyüyor. Abartılı tasarımın öncelik kazandığı bir döneme giriyoruz..

Dışarı atlayıp göz atmadığınızı görmek için Patterntap'taki bağlantı örneklerinden birkaçına göz atın. Hem standart hem de vurgulu efektlerde köprü tasarımı için inanılmaz fikirler var. CSS3 köşeleri yuvarlatılmış metin gölgeleri ve özel yazı tipi aileleri bu karışıma daha da harika fikirler ekliyor! En sevdiğim örneklerden biri, blog girişlerinin her birinde kısa bir dinamik animasyon kullanan SimpleBits'ten..

Sonuç

Bu fikirler, 2011 boyunca öncelik kazandığımı fark ettiğim en popüler trendlerden sadece birkaçı. Mükemmel web tasarımı her zaman odaklanmak ve kullanıcı niyetlerini öncelikli olarak tutmakla ilgilidir. Bu felsefelerin 2012'ye taşınması farklı olacak gibi görünmüyor, ancak düzenleri nasıl oluşturduğumuz ve verileri nasıl sunduğumuz her zaman değişiyor. Yorumlar tartışma alanındaki düşüncelerinizi veya sorularınızı bize bildirin.