Web Tasarımını Şekillendirecek En Popüler Trendler 2016 Geldi
Her geçen yıl zaman ilerledikçe, birçok yeni tasarım eğilimi ufukta beliriyor. Web tasarımı alanı her zaman yeni araçlar, iş akışları ve kullanılabilir düzenler oluşturmak için en iyi uygulamalarla değişiyor.
Hangi eğilimlerin en fazla dikkat çekeceğini tahmin etmek zordur. Ancak yakın tarih, orman yangını gibi büyümekte olan bir eğilim modeli göstermektedir. 2015'ten daha fazla ilgi gören ve benzersiz bir şekilde 2016'da da devam edecek olan 20 benzersiz trend organize ettim.
1. UI Tasarım için Sketch App
Sketch, hızlı bir şekilde değişen tüm UI tasarım görevleri için Photoshop'un yerini almaktadır. düşük kaliteli tel kafesler için yüksek kalitede örnekler ve simge tasarımı.
Sketch App, özellikle web ve mobil tasarımcılar için üretilmiş, yalnızca Mac'tir. Herhangi bir arabirim için vektör öğelerini oluşturmak için daha yumuşak bir çalışma ortamı sunar, ancak Photoshop'tan metin efektleri ve katman stilleri gibi beklediğiniz birçok özelliği de korur.
Sketch'in Windows için piyasaya sürüleceğine dair hiçbir kanıt bulunmamakla birlikte, yine de OS X kullanıcıları tarafından değerli bir seçim haline geldi. Basitleştirilmiş iş akışı ve daha ucuz fiyat etiketi, Adobe'ye parası için bir fırsat veriyor. Sketch en iyi UI tasarım deneyimini sağlamaya devam ederse, kesinlikle 2016 ve sonrasında da büyümeye devam edecektir..
2. Tarayıcı Tabanlı IDE'ler
Masaüstü IDE'leri, yıllardır Notepad ++ ile Xcode ve Visual Studio arasında değişen seçeneklerle olmuştur. Bir IDE, öneriler ve sözdizimi vurgulamasıyla kod yazmayı kolaylaştırır (diğer özelliklerin yanı sıra).
Ancak geleneksel olarak IDE'ler masaüstü uygulamaları olarak piyasaya sürüldü. Geçtiğimiz birkaç yıl boyunca tarayıcı tabanlı bulut IDE'lerde çarpıcı bir artış gördük. Bunlar, bir internet tarayıcısı dışında herhangi bir yazılım gerektirmez, ki bu, devin İnternet erişimi olan herhangi bir bilgisayardan kod yazmasına izin verir..
Cloud IDE'ler, kod parçacıklarını paylaşım veya kişisel depolama amacıyla hesabınıza kaydedebileceğiniz web uygulamaları gibi çalışır. CodePen, Jade / Haml ve LESS / SCSS gibi özel ön işlemelerin yanı sıra HTML / CSS / JS desteği olan en popüler IDE'lerden biridir..
Mozilla Thimble, kodları gibi öğrenmek isteyen yeni geliştiriciler için bir IDE. Ayrıca Codeply, herhangi bir dosya indirmeye gerek kalmadan Bootstrap veya Zurb Vakfı gibi belirli duyarlı çerçeveleri test etmek için mükemmeldir..
3. Ücretsiz Sass / SCSS Karışımları
Önişlemciler yıllardır popüler olmuş ancak son zamanlarda tüm web tasarımı / geliştirme alanında her yerde yayılmış hissetmek için yeterince yaygınlaştı. Bugünlerde Sass / SCSS daha fazlasını sağlayabildiğinde vanilya CSS yazmak garip görünüyor..
Bir avantaj, artan bir Sass mixin kütüphanesi arzıdır. Basit karışımlar, kod parçacıkları veya CSS'de tekrarlanabilir kod üretmek için temel işlevler gibidir. Her zaman kendi yazınızı yazabilseniz de, birçok geliştirici çevrimiçi olarak ücretsiz karışımlar yayınlayacak kadar nazik davrandı..
Bazı karışımlar Bourbon gibi kütüphanelerde gelirken, diğerleri bağımsız ürünler olabilir. Ne bulabileceğinizi görmek için GitHub'da Sass / SCSS karışımlarını aramayı deneyin.
4. Kart Düzenleri
Web sitesi kartı düzenleri ilk olarak Pinterest tarafından birkaç yıl önce popüler hale getirildi ve o zamandan beri içerik ağırlıklı web sayfaları için bir trend haline geldi. JQuery Masonry gibi ücretsiz eklentiler, bu mizanpaj stilini çeşitli yükseklik ve genişlikler için animasyonlu kartlarla taklit etmek için kullanılabilir.
Bir kart düzeni, taranması gereken çok sayıda veri içeren sayfalarda en iyi şekilde kullanılır. Google Asistan’ın açılış sayfası, Google Asistan uygulaması için isteğe bağlı kartları tanıtmak için bir kart düzeni kullanıyor.
Birlikte daha fazla öğe listelemek için içeriği temel unsurlara indirgemeye odaklanan kart düzenlerini daha dinamik ızgaralar olarak düşünebilirsiniz. UGSMAG ve Next Web gibi çevrimiçi dergiler, son gönderim içeriğini göstermek için kullanılan mükemmel kart yerleşimi örnekleridir..
5. Özel Açıklayıcı Videolar
Hem büyük hem de küçük şirketler, özel açıklayıcı videoların eğilimine girmiştir. Bunlar genellikle Crazy Egg örneği gibi animasyonlarla oluşturulur. Ancak diğer videolar Instagram Direct gibi gerçek hayattaki çekimlere dayanıyor.
Açıklayıcı bir videonun amacı, bir ürün veya hizmetin nasıl çalıştığını göstermektir. Ziyaretçiler bir özellikler listesi gözden geçirebilir ve ürünün nasıl çalıştığı hakkında hala hiçbir fikriniz olmayabilir. Videolar her şeyi görsel olarak netleştirir ve önemli şeyleri birkaç dakika içinde kapsar.
Özel bir açıklayıcı video yaparken elinizi denemek istiyorsanız, bu Udemy kursuna göz atın. Açılış sayfası tasarımı için videolara odaklanan derinlemesine bir çalışma.
6. Canlı Ürün Önizlemeleri
Açılış sayfası tasarımı, daha yüksek İnternet hızlarından ve tarayıcı özelliklerinden kaynaklanan inanılmaz bir büyüme gördü. Fark ettiğim en büyük trend, ana sayfalara veya özel açılış sayfalarına canlı ürün önizlemelerinin eklenmesi..
Örneğin, Slack'in ürün sayfasına göz atın. Bir video turu ve Slack arayüzünü kapsayan vektör grafikleri sunuyor. Bu ürün önizlemeleri, potansiyel kullanıcılara ürünün nasıl işlediğine bir bakış açısı kazandırmak içindir..
Webydo, ana sayfada canlı bir animasyon içeren mükemmel bir örnektir. Bu, ziyaretçilerin ürünü manuel olarak demonte etmek zorunda kalmadan Webydo'yu çalışırken görmelerini sağlar. Ancak, ürün önizlemeleri için her zaman animasyonlara güvenmeniz gerekmez. Iconjar, ürünün ne olduğunu ve nasıl çalıştığını göstermek için basit bir PNG ekran görüntüsü kullanır.
7. Otomatik Görev İkincisi
Ön uç geliştirme dünyası, web sitesi oluşturma için bir dizi yeni en iyi uygulama ile çok değişti. Gulp ve Grunt gibi görev kaçakçıları / derleme sistemleri, daha önce manuel olarak çaba sarfedilmesi gereken işler için çok daha sık kullanılıyor.
Otomasyon, hızlı geri dönüşün ve kalite kodunu bozmanın can damarıdır. Makineler hata yapmaz, bu yüzden ne kadar çok sorunla karşılaşırsanız o kadar güven içinde otomatikleştirebilirsiniz (teoride).
Daha fazla bilgi edinmek için, görev koşucularının nasıl çalıştığını açıklayan bu Reddit yayınına göz atın. Bu araçlar temel olarak, özel JS veya başkaları tarafından yazılmış komut dosyalarındaki iş akışınızın bölümlerini otomatikleştiren JS kodunu çalıştırır.
8. Yerli JS Mobil Uygulamaları
İş için doğru araçları kullanmanın büyük bir savunucusuyum. Mobil uygulama geliştirme durumunda, bu Android için Java, iOS için Objective-C / Swift anlamına gelir..
Ancak herkes yalnızca bir mobil uygulama oluşturmak için yeni bir dil öğrenmek istemiyor. Neyse ki, NativeScript veya React Native gibi alternatif kütüphanelerle yerel uygulamaların oluşturulması ve derlenmesi kolaylaşıyor.
Bir mobil uygulama programcısı olma boşluğu, JavaScript ile mobil uygulamalar oluşturma yeteneği ile kısalmaktadır. PhoneGap, HTML / CSS / JS kodunu temel alan başka bir seçenektir.
Oluşturma süreci çok çeşitli olsa da, JS yeni bir dil öğrenmeden mobil uygulamalar geliştirmek isteyen kodlayıcılar için hızla bir çözüm haline geliyor.
9. Tasarım için İşbirliği Araçları
Anlık mesajlaşma ve grup sohbeti, on yıldan uzun süredir var. Bununla birlikte, bu kaynaklar geleneksel olarak dosya ekleme özelliğine sahip düz metinlere dayanmaktadır..
Ortaya çıkan yeni bir trend, canlı tasarım belgelerini sohbet uygulamaları içinde paylaşma yeteneğidir. Kayda değer, açıklamaların ve yorumların bir dokümanın üstüne yerleştirildiği bir örnektir. Bu, tasarımcılara çalışmaları doğrudan ekipteki herkesle paylaşmak için temiz bir yol sağlar.
Slack, şu anda pek çok benzer özelliği destekleyen en popüler sohbet uygulamasıdır. Büyüyen Slack kullanıcı tabanı, Slack'in yeteneklerini büyük ölçüde artıran ve Hangouts, MailChimp ve hatta WordPress gibi diğer ürünlere bağlanan uzantılar oluşturma konusunda kararlıydı..
10. Duyarlı Ön Uç Çerçeveleri
Bootstrap gibi ön uç çerçeveler yıllardır etrafta olmuştur ve hem kişisel hem de profesyonel projeler için faydalı olduğunu kanıtlamaya devam etmektedir. Duyarlı tasarım, çerçevelere girmeye zorladı ve sadece arka uç (Django, Laravel, vb.) Yerine ön kod için bir talep yarattı..
2016'ya geçme Duyarlı ön çerçeveler ve web projelerindeki değerleri hakkında çok daha fazla şey okuyacağımızı düşünüyorum. Birçok geliştirici, Vakıf 6'nın serbest bırakılmasını ve Bootstrap 4'ün halka açık v1 versiyonunu merakla bekliyor..
Görebileceğiniz diğer daha az bilinen çerçeveler arasında Gumby ve Pure CSS yer alıyor..
11. UX Tasarımına Daha Fazla Odaklanma
Kullanıcı deneyimi tasarımı alanı, daha fazla tasarımcı ve geliştiricinin dikkat çekmesiyle hızla büyümeye devam edecektir. UI tasarımı UX tasarımının bir parçasıdır ancak nihai amaç değildir. UI, sonun harika bir kullanıcı deneyimi olmasıyla sona ulaşmak için bir araçtır.
Sadece 5 yıl önce UX'e ya da arayüz tasarımında nasıl uygulandığına aşina değildim. Şimdi UX Stack Exchange ve ücretsiz UX ebooks gibi kaynaklarımız var. Kullanıcı deneyimi hakkında fazla bir şey bilmiyorsanız, şimdi UX ilkelerinin tüm dijital arabirim biçimlerine nasıl uygulanabileceğini öğrenmek ve öğrenmek için en iyi zamandır..
12. Paket Yöneticileri
Dijital paket yöneticileri o kadar hızlı bir şekilde yükseldi ki, pratik olarak modern web geliştirme için bir gereksinimdir. Bower ve NPM gibi çözümler yeni projelere başlamak için çok zaman kazandırabilir.
Herhangi bir yeni teknolojiye hakim olmak zaman alacak ve bir öğrenme eğrisi ile gelecektir. Ancak, her ön uç (veya arka uç) geliştiricisinin bilmesi gereken bir şey varsa, bu bir paket yöneticisidir. Bazı terminal komutları bilgisine ihtiyaç duyarlar, ancak işleme bir kez alışınca asla geri dönmek istemeyeceksiniz.
13. Gelişmiş UI Animasyonları
CSS3 geçişleri, web'deki uzun vadeli bir animasyon eğiliminin yalnızca başlangıcıydı. Artık animasyona adanmış düzinelerce CSS ve JavaScript kütüphanemiz var. Nerede bakılacağını biliyorsanız, hayal edemediğim şeyler artık ücretsiz.
Animasyon iyi tasarım için bir gereklilik değildir. Ancak, doğru kullanıldığında iyi bir tasarımın harika bir tasarıma dönüşmesini sağlayabilir..
Arayüzler için animasyonlu trendlere göz atın ve çeşitli web sitelerinden ne alabileceğinizi görün. Web animasyonunun bir Disney filmi olmadığını ve saygı gösterilmesi gerektiğini unutmayın. Animasyonu, tasarımın sıkıntı verici veya rahatsız edici bir unsuru olmadan bir arayüz geliştirmek için yavaşça kullanın.
14. Kodu Öğrenen Tasarımcılar
Bu yıl önemli bir konu, tasarımcıların kodlamayı öğrenmesi için geçerli oldu. Bazı tasarımcılar kod yazmanın kendi işlerinin olmadığını düşünürken, diğerleri bunun norm haline geldiğini ve benimsenmesi gerektiğini düşünüyor..
Bu konuda sadece duygusal tepkiler uyandıran ateşli tartışmalar ve etkileyici yazılar okudum. İyi bir tasarım, kodu olmayan sadece güzel bir resimdir. Yine de her ikisine de odaklanmak bir tasarımcının zanaat çalışması için daha az zaman harcamasını gerektirir.
Yani kesin bir cevap var mı? Bazıları, ön kodlamayı bilen tasarımcıların iş canlılığının arttığını savunuyorlardı. Peki ya birisi kod yazmak istemiyorsa? Sadece rekabet etmek öğrenmeye değer mi?
En net cevabın ne istersen onu yapmak olduğunu hissediyorum. Ancak, bu konunun 2016’da tartışmaya devam etmesi muhtemel birçok tasarımcı için hala masada olduğu anlaşılıyor..
15. ücretsiz çevrimiçi araçlar ve webapps
Yapmanız gereken ne olursa olsun, tüm programlar masaüstünden çalıştırılıyordu. Fakat günümüzde sürekli olarak kaç çevrimiçi web sitemizin mevcut olduğunu merak ediyorum.
URL kodlama / kod çözme işleminden tamamen ücretsiz bir Markdown editörüne kadar her şeyi bulacaksınız. Google Drive bile Microsoft Office ürünlerini tarayıcıya götürdü (yine tamamen ücretsiz).
Şu anki bilgi işlem gücü seviyesi ve web tarayıcılarından gelen homojen standartlar görünüşte sınırsız miktarda fırsat sunuyor. Görüntü sıkıştırmaya devam etmek için oluşturma gibi karmaşık görevler doğrudan bir tarayıcı penceresinden ele alınabilir.
16. Web Bileşenlerinin Büyümesi
Web bileşenleri, geliştiriciler için karmaşıklık sorunlarını çözmeye çalışıyor. WebComponents web sitesi, geliştiricilere bu konuyu atlamaları için harika kaynak ve materyallere sahiptir..
Modüler web bileşenlerini nasıl anladığınızdan emin değilseniz, daha fazla bilgi için bu gönderiye göz atın..
Bileşenler özellikle ana akım durumuna geçmediyse de, dünyadaki profesyonel geliştiriciler tarafından tartışılıyor. Google, JS ve HTML yoluyla web bileşenleri eklemek için kullanılan bir çerçeve olan Polimer’i piyasaya sürdü.
Bu henüz büyük müşteri projelerinde kullanmak için pratik olmayabilir. Ancak teknoloji mevcuttur ve küçük bir uygulama ile kavramları kolayca ustalaştırabilirsiniz. Daha fazla bilgi edinmek ve birkaç kod örneğini görmek için modüler web bileşenlerinde bu CSS-Tricks yazısını okuyabilirsiniz.
17. Çevrimiçi Öğrenme Kaynakları
Hepimiz biliyoruz ki, bilgisayarınızın rahatlığından herhangi bir beceri öğrenmenin en kolay zamanıdır. Her yıl açılan yeni kurslar ve web siteleriyle çevrimiçi öğrenme pazarının katlanarak büyüyor gibi görünüyor..
Her zamankinden daha fazla kendimi güvende hissediyorum, çevrimiçi öğrenmenin yükselişini göreceğiz. Treehouse ve CodeSchool gibi tanınmış siteler, Bitfountain ve Learn-Verified gibi yeni sitelerin yanı sıra inanılmaz kurslar sunuyor.
Öğrenmek istediğiniz bir konu varsa, muhtemelen çevrimiçi bir kurs vardır - özellikle UI tasarımı veya uygulama geliştirme gibi dijital teknikleri öğrenmek istiyorsanız.
18. Sunucu Tarafı JavaScript
Sunucu tarafı JS'si için geçmiş seçenekler olsa da, hiçbiri Node.js. JavaScript geliştiricileri bu kütüphaneye aşık oldu ve Python veya PHP gibi diğer arka uç dilleriyle doğrudan rekabet etmesini izledi.
Düğüm, geliştiricilerin her iki ön uç + arka uç kodu için tek bir dil kullanarak web siteleri oluşturmasına olanak tanır. Ve Node Package Manager gibi kaynaklar Node.js için daha fazla değer verir.
Söyleyebileceğim kadarıyla, Node hala yükselişe geçmiş durumda ve endüstri meraklılarından çekiş kazanmaya devam ediyor. Düğüm öğrenip öğrenmemek isteyin, 2016'da büyük bir trend olarak büyümeye devam edeceğinden şüphe yok.
19. Dokunma Destekli Web Sitesi Özellikleri
Akıllı telefon tarayıcıları, geriye dönük uyumluluğu korumak için tüm web sitelerinin dokunma özelliklerini her zaman desteklemiştir. Son zamanlarda, dokunma olaylarını ele alma özelliğine sahip web sitelerine eklenen daha fazla eklenti ve özel özellik fark ettim..
Photoswipe ve Dragend.js gibi eklentiler, dokunmatik ekranlarda kaydırma ve hafifçe dokunma işlemlerini gerçekleştirmek için üretilmiştir. Görünüşe göre, web geliştiricileri yalnızca duyarlı web siteleri oluşturmakla kalmıyor, aynı zamanda dokunmatik web siteleri de kullanıyor.
Etrafta arama yaparsanız, yalnızca dokunma etkinliklerine dayanan web için oluşturulmuş etkileyici bazı özellikler bulacaksınız..
20. İnternette Materyal Tasarımı
Google’ın malzeme tasarımını yayınlaması, Android tasarımcıları için çok büyük bir başarıydı. Materyal tasarımı, Android akıllı telefonlar için kullanıcı arayüzleri hazırlama sürecini basitleştirmeyi amaçlayan bir tasarım dili olarak kabul edilir..
Zaman içinde web tasarımcıları bunu Google'ın yeni tasarım diline dayalı olarak tüm web sitelerinin kalbine alıp yerleştirmişlerdir. Materyal tasarım trendinin sadece mobil uygulamaların ötesinde web tasarım dünyasına taşındığı görülüyor..
Materyal web siteleri oluşturmak isteyen millet bile tekerleği yeniden icat etmek zorunda değildir. Material UI ve Materialize gibi ücretsiz kütüphaneler, malzeme tasarım temeli üzerine yeni bir düzen oluşturmak için özel kodlar sunar.
Kapanış
Bu eğilimleri incelemek, web sitelerinin yapım sürecini kolaylaştırmak için gerçek bir ortak çaba gösterdiğimizi açıkça göstermelidir. Hepimiz günlük iş akışımızda zaman kazanmak istiyoruz.
İnternetin kuruluşundan bu yana, daha iyi alternatiflerle değiştirilmek üzere birçok teknolojinin yükseldiğini gördük. Bu 2016 eğilimleri, web sitelerini daha kolay ve daha az karmaşık hale getirecek daha düzgün bir tasarım teknikleri setini zorluyor.
