20 Tren Terpanas Yang Akan Membentuk Desain Web Datang Tahun 2016

Seiring berlalunya waktu seiring dengan berlalunya tahun, banyak tren desain baru tampak di cakrawala. Bidang desain web selalu berubah dengan alat baru, alur kerja, dan praktik terbaik untuk membangun tata letak yang dapat digunakan.

Sulit untuk memprediksi tren pasti mana yang akan menarik perhatian terbesar. Namun sejarah baru-baru ini menunjukkan pola tren yang telah berkembang pesat. Saya telah mengorganisir 20 tren unik yang telah memperoleh daya tarik selama 2015 dan kemungkinan akan berlanjut hingga 2016.

1. Aplikasi Sketsa untuk Desain UI

Sketsa dengan cepat menggantikan Photoshop untuk semua tugas desain UI mulai dari gambar rangka rendah kesetiaan untuk desain mockup & ikon berkualitas tinggi.

Sketch App adalah aplikasi khusus Mac yang dibuat khusus untuk desainer web dan seluler. Ia menawarkan lingkungan kerja yang lebih halus untuk membuat elemen vektor untuk antarmuka apa pun, namun juga mempertahankan banyak fitur yang Anda harapkan dari Photoshop seperti efek teks dan gaya layer.

Meskipun tidak ada bukti bahwa Sketch akan dirilis untuk Windows, itu masih menjadi pilihan berharga oleh pengguna OS X. Alur kerja yang disederhanakan dan label harga yang lebih murah membuat Adobe kehilangan uangnya. Jika Sketch terus memberikan pengalaman desain UI terbaik maka pasti akan terus berkembang hingga 2016 dan seterusnya.

2. IDE Berbasis Browser

IDE Desktop telah ada selama beberapa dekade dengan pilihan mulai dari Notepad ++ hingga Xcode dan Visual Studio. Suatu IDE membuatnya lebih mudah untuk menulis kode dengan saran dan penyorotan sintaks (di antara fitur-fitur lainnya).

Tetapi secara tradisional IDE telah dirilis sebagai aplikasi desktop. Selama beberapa tahun terakhir kami telah melihat peningkatan dramatis dalam IDE cloud berbasis browser. Ini tidak memerlukan perangkat lunak apa pun selain peramban web, yang memungkinkan devs untuk menulis kode dari komputer mana pun dengan akses Internet.

Cloud IDE berfungsi lebih seperti aplikasi web tempat Anda dapat menyimpan potongan kode ke akun Anda untuk berbagi atau penyimpanan pribadi. CodePen adalah salah satu IDE paling populer dengan dukungan untuk HTML / CSS / JS bersama dengan preprocessing khusus seperti Jade / Haml dan KURANG / SCSS.

Mozilla Thimble adalah IDE lain untuk pengembang pemula yang ingin belajar ketika mereka membuat kode. Codeply juga bagus untuk menguji kerangka kerja responsif tertentu seperti Bootstrap atau Zurb's Foundation tanpa perlu mengunduh file apa pun.

3. Mixins Sass / SCSS Gratis

Preprosesor telah menjadi trendi selama bertahun-tahun, tetapi baru-baru ini menjadi cukup umum untuk terasa di mana-mana di seluruh bidang desain / pengembangan web. Saat ini rasanya aneh untuk menulis CSS vanilla ketika Sass / SCSS dapat menyediakan lebih banyak lagi.

Salah satu manfaatnya adalah meningkatnya pasokan perpustakaan Sass mixin. Mixin sederhana seperti cuplikan kode atau fungsi dasar untuk menghasilkan kode berulang di CSS. Meskipun Anda selalu dapat menulis sendiri, banyak pengembang telah berbaik hati untuk merilis mixin online gratis.

Beberapa mixin datang di perpustakaan seperti Bourbon sementara yang lain bisa menjadi item mandiri. Coba lakukan pencarian di GitHub untuk mixins Sass / SCSS untuk melihat apa yang dapat Anda temukan.

4. Tata Letak Kartu

Tata letak kartu situs web pertama kali dipopulerkan oleh Pinterest beberapa tahun yang lalu dan sejak itu menjadi tren untuk halaman web yang padat konten. Plugin gratis seperti jQuery Masonry dapat digunakan untuk meniru gaya tata letak ini dengan kartu animasi untuk berbagai ketinggian & lebar.

Tata letak kartu paling baik digunakan pada halaman dengan banyak data yang harus dipindai. Laman landas untuk Google Now menggunakan tata letak kartu untuk mengiklankan kartu opsional untuk aplikasi Google Now.

Anda dapat menganggap tata letak kartu sebagai kisi-kisi yang lebih dinamis dengan fokus pada meminimalkan konten pada esensi telanjang untuk mendaftarkan lebih banyak item bersama-sama. Majalah daring seperti UGSMAG dan The Next Web adalah contoh sempurna tata letak kartu yang digunakan untuk menampilkan konten posting terbaru.

5. Video Penjelajah Kustom

Perusahaan besar dan kecil sama-sama telah mengikuti tren video penjelajah khusus. Ini sering dibuat dengan animasi seperti contoh Crazy Egg. Tapi video lain mengandalkan rekaman kehidupan nyata seperti Instagram Direct.

Tujuan video penjelajah adalah untuk menunjukkan cara kerja suatu produk atau layanan. Pengunjung mungkin membaca sekilas daftar fitur dan masih tidak tahu bagaimana produk beroperasi. Video mengklarifikasi semuanya secara visual dan mencakup hal-hal penting hanya dalam beberapa menit.

Jika Anda ingin mencoba membuat video penjelajah khusus, periksa kursus Udemy ini. Ini adalah studi mendalam yang berfokus pada video untuk desain halaman arahan.

6. Pratinjau Produk Langsung

Desain halaman arahan telah melihat pertumbuhan luar biasa yang berasal dari kecepatan Internet yang lebih besar dan kemampuan browser. Salah satu tren utama yang saya perhatikan adalah penambahan pratinjau produk langsung di beranda atau halaman arahan khusus.

Ambil contoh halaman produk Slack. Ini fitur tur video dan grafik vektor yang mencakup antarmuka Slack. Pratinjau produk ini dimaksudkan untuk memberikan pandangan sekilas kepada pengguna potensial tentang cara produk beroperasi.

Webydo adalah contoh cemerlang lainnya dengan animasi langsung diputar di beranda. Ini memungkinkan pengunjung untuk melihat Webydo dalam aksi tanpa harus secara manual mendemonstrasikan produk. Tetapi Anda tidak selalu harus bergantung pada animasi untuk pratinjau produk. Iconjar menggunakan tangkapan layar PNG sederhana untuk menunjukkan apa produk itu dan cara kerjanya.

7. Pelari Tugas Otomatis

Dunia pengembangan frontend telah banyak berubah dengan sejumlah praktik terbaik baru untuk pembuatan situs web. Pelari tugas / sistem bangun seperti Gulp dan Grunt lebih sering digunakan untuk banyak tugas yang sebelumnya membutuhkan upaya manual.

Otomasi adalah sumber kehidupan dari perputaran cepat dan menghasilkan kode kualitas. Mesin tidak melakukan kesalahan, sehingga semakin Anda dapat mengotomatisasi dengan keyakinan semakin sedikit masalah yang Anda miliki (secara teori).

Untuk mempelajari lebih lanjut, lihat pos Reddit ini menjelaskan bagaimana pelari tugas beroperasi. Alat-alat ini pada dasarnya menjalankan kode JS yang akan mengotomatisasi bagian dari alur kerja Anda, baik JS kustom atau skrip yang ditulis oleh orang lain.

8. Aplikasi Seluler JS Asli

Saya seorang penganjur besar menggunakan alat yang tepat untuk pekerjaan itu. Dalam hal pengembangan aplikasi seluler ini berarti Java untuk Android, Objective-C / Swift untuk iOS.

Tetapi tidak semua orang ingin belajar bahasa baru hanya untuk membangun aplikasi seluler. Untungnya, aplikasi asli menjadi lebih mudah dibuat & dikompilasi dengan pustaka alternatif seperti NativeScript atau React Native.

Kesenjangan untuk menjadi pemrogram aplikasi seluler dipersingkat dengan kemampuan untuk membuat aplikasi seluler melalui JavaScript. PhoneGap adalah pilihan lain berdasarkan kode HTML / CSS / JS.

Sementara proses pembuatannya sangat bervariasi, JS dengan cepat menjadi solusi bagi pembuat kode yang ingin membangun aplikasi seluler tanpa mempelajari bahasa baru.

9. Alat Kolaborasi untuk Desain

Pesan instan dan obrolan grup telah ada selama lebih dari satu dekade. Namun sumber daya ini secara tradisional mengandalkan plaintext dengan beberapa kemampuan untuk melampirkan file.

Tren baru yang muncul adalah kemampuan untuk berbagi dokumen desain langsung dalam aplikasi obrolan. Yang perlu diperhatikan adalah salah satu contoh di mana anotasi dan komentar dapat berlapis tepat di atas dokumen. Ini memberikan desainer cara yang bersih untuk berbagi pekerjaan secara langsung dengan semua orang di tim.

Slack adalah aplikasi obrolan paling populer saat ini yang mendukung banyak fitur serupa. Slack userbase yang berkembang telah bersikukuh tentang membuat ekstensi yang sangat meningkatkan kemampuan Slack & mengikat ke produk lain seperti Hangouts, MailChimp, dan bahkan WordPress.

10. Kerangka Kerja Frontend Responsif

Kerangka kerja frontend seperti Bootstrap telah ada selama bertahun-tahun dan terus terbukti bermanfaat pada proyek baik pribadi maupun profesional. Desain responsif telah memaksa masuk ke dalam kerangka kerja dan menciptakan permintaan untuk kode frontend bukan hanya backend (Django, Laravel, dll).

Pindah ke 2016 saya pikir kita akan membaca lebih banyak tentang kerangka kerja frontend responsif & nilainya dalam proyek web. Banyak devs sedang menunggu rilis Yayasan 6 dan rilis publik v1 Bootstrap 4.

Kerangka kerja lain yang kurang dikenal Anda mungkin memeriksa termasuk Gumby dan Pure CSS.

11. Fokus Lebih Besar pada Desain UX

Bidang desain pengalaman pengguna akan terus berkembang pesat dengan lebih banyak desainer dan pengembang memperhatikan. Desain UI adalah bagian dari desain UX tetapi itu bukan tujuan akhir. UI adalah sarana untuk mencapai tujuan, dengan tujuan menjadi pengalaman pengguna yang fantastis.

Hanya 5 tahun yang lalu saya hampir tidak terbiasa dengan UX atau bagaimana itu diterapkan pada desain antarmuka. Sekarang kami memiliki sumber daya seperti UX Stack Exchange dan ebook UX gratis. Jika Anda tidak tahu banyak tentang pengalaman pengguna maka sekarang adalah waktu terbaik untuk mempelajari & mempelajari bagaimana prinsip-prinsip UX dapat diterapkan ke semua bentuk antarmuka digital.

12. Manajer Paket

Manajer paket digital telah meningkat begitu cepat sehingga mereka praktis merupakan persyaratan untuk pengembangan web modern. Solusi seperti Bower dan NPM dapat menghemat banyak waktu untuk memulai proyek baru.

Menguasai teknologi baru apa pun akan membutuhkan waktu dan dilengkapi dengan kurva belajar. Tetapi jika ada satu hal yang harus diketahui oleh setiap pengembang frontend (atau backend), itu adalah manajer paket. Mereka membutuhkan beberapa pengetahuan tentang perintah terminal tetapi begitu Anda terbiasa dengan proses ini, Anda tidak akan pernah ingin kembali.

13. Animasi UI Tingkat Lanjut

Transisi CSS3 hanyalah awal dari tren jangka panjang animasi di web. Sekarang kami memiliki puluhan perpustakaan CSS dan JavaScript yang didedikasikan untuk animasi. Hal-hal yang tidak pernah saya impikan sekarang dibangun & tersedia secara gratis jika Anda tahu ke mana harus mencari.

Animasi bukan persyaratan untuk desain yang baik. Tapi itu bisa membuat desain yang bagus menjadi desain yang hebat jika digunakan dengan benar.

Mengawasi tren animasi untuk antarmuka dan lihat apa yang dapat Anda ambil dari berbagai situs web. Ingat bahwa animasi web bukan film Disney dan harus diperlakukan dengan hormat. Gunakan animasi dengan lembut sehingga meningkatkan antarmuka tanpa menjadi elemen mengganggu atau mengganggu desain.

14. Desainer Belajar Kode

Topik tombol panas tahun ini telah menjadi kasus bagi desainer belajar kode. Beberapa desainer merasa itu bukan tugas mereka untuk menulis kode, sementara yang lain merasa itu menjadi norma & harus dipeluk.

Saya telah membaca diskusi hangat dan posting menarik tentang subjek ini yang sepertinya hanya menarik tanggapan emosional. Desain yang bagus hanyalah gambar cantik tanpa kode. Namun untuk fokus pada keduanya membutuhkan desainer untuk menghabiskan lebih sedikit waktu berlatih kerajinan.

Jadi, apakah ada jawaban yang pasti? Beberapa orang akan berpendapat bahwa peningkatan pekerjaan meningkat untuk desainer yang mengetahui pengkodean frontend. Namun bagaimana jika seseorang tidak ingin menulis kode? Apakah layak belajar hanya untuk bersaing?

Saya merasa jawaban yang paling jelas adalah melakukan apa pun yang Anda inginkan. Tapi sepertinya topik ini masih di atas meja bagi banyak desainer yang kemungkinan akan melanjutkan diskusi hingga 2016.

15. Alat & Webapps Online Gratis

Dulu semua program dijalankan dari desktop tidak peduli apa yang perlu Anda lakukan. Tetapi saat ini saya secara konsisten kagum dengan banyaknya webapp yang tersedia secara online gratis.

Anda akan menemukan segalanya mulai dari penyandian / penguraian URL hingga editor penurunan harga yang sepenuhnya gratis. Bahkan Google Drive telah membawa produk Microsoft Office ke browser (sekali lagi, benar-benar gratis).

Tingkat daya komputasi saat ini dan standar homogen dari peramban web menawarkan jumlah peluang yang tampaknya tidak terbatas. Tugas kompleks seperti pembuatan resume hingga kompresi gambar dapat ditangani langsung dari jendela browser.

16. Pertumbuhan Komponen Web

Komponen web berusaha memecahkan masalah kompleksitas untuk pengembang. Situs web WebComponents memiliki sumber daya dan bahan yang bagus untuk memberi para pengembang langkah awal ke topik ini.

Jika Anda tidak yakin bagaimana memahami komponen web modular, maka periksa pos ini untuk mempelajari lebih lanjut.

Sementara komponen belum secara khusus meledak ke status arus utama, mereka sedang dibahas oleh pengembang profesional di seluruh dunia. Google telah merilis Polymer yang merupakan kerangka kerja yang digunakan untuk menambahkan komponen web melalui JS dan HTML.

Ini mungkin tidak praktis untuk digunakan dalam proyek-proyek klien besar dulu. Namun, teknologi tersedia dan dengan sedikit latihan Anda dapat menguasai konsep dengan mudah. Untuk mempelajari lebih lanjut dan melihat beberapa contoh kode, Anda dapat membaca posting CSS-Trik ini pada komponen web modular.

17. Sumber Belajar Online

Kita semua tahu bahwa sekarang adalah waktu yang paling mudah untuk mempelajari keterampilan apa pun dari kenyamanan komputer Anda. Tampaknya pasar pembelajaran online tumbuh secara eksponensial dengan kursus dan situs web baru bermunculan setiap tahun.

Saya merasa lebih percaya diri daripada sebelumnya bahwa kita akan melihat peningkatan pembelajaran online. Situs terkenal seperti Treehouse dan CodeSchool menawarkan kursus luar biasa di samping situs yang lebih baru seperti Bitfountain dan Learn-Verified.

Jika ada subjek yang ingin Anda pelajari, kemungkinan ada kursus online - terutama jika Anda ingin mempelajari teknik digital seperti desain UI atau pengembangan aplikasi.

18. JavaScript Sisi Server

Sementara ada opsi masa lalu untuk JS sisi server, tidak ada yang meresap secepat Node.js. Pengembang JavaScript telah jatuh cinta dengan perpustakaan ini dan melihatnya naik ke kompetisi langsung dengan bahasa backend lainnya seperti Python atau PHP.

Node memungkinkan pengembang untuk membangun situs web menggunakan bahasa tunggal untuk kedua kode frontend + backend. Dan sumber daya seperti Node Package Manager memberi nilai lebih kepada Node.js.

Dari apa yang bisa saya katakan, Node masih terus meningkat dan terus mendapatkan daya tarik dari para penggemar industri. Apakah Anda berencana untuk belajar Node atau tidak, tidak ada keraguan itu akan terus tumbuh sebagai tren utama di 2016.

19. Fitur Situs Web yang Didukung Sentuh

Browser smartphone selalu mendukung fitur sentuh untuk semua situs web untuk menjaga kompatibilitas. Namun baru-baru ini saya memperhatikan lebih banyak plugin dan fitur khusus yang ditambahkan ke situs web dengan tujuan khusus menangani acara sentuh.

Plugin seperti Photoswipe dan Dragend.js dibangun untuk menangani menggesekkan dan mengetuk tampilan layar sentuh. Tampaknya pengembang web tidak hanya membangun situs web yang responsif, tetapi juga situs web yang mendukung sentuhan.

Jika Anda mencari di sekitar Anda akan menemukan beberapa fitur yang sangat mengesankan dibangun untuk web yang hanya mengandalkan acara sentuh.

20. Desain Bahan di Web

Rilis desain material Google adalah kesuksesan besar bagi desainer Android. Desain material dianggap sebagai bahasa desain yang dimaksudkan untuk menyederhanakan proses pembuatan antarmuka pengguna untuk smartphone Android.

Seiring waktu desainer web telah mengambil hati ini dan membangun seluruh situs web berdasarkan bahasa desain baru Google. Tampaknya tren desain material telah berpindah dari sekadar aplikasi seluler ke dunia desain web.

Orang yang ingin membuat situs web materi bahkan tidak perlu menemukan kembali roda. Perpustakaan gratis seperti Material UI dan Materialize menawarkan kode khusus untuk penataan tata letak baru di atas dasar desain material.

Penutupan

Melihat tren ini, harus jelas bahwa kita melihat upaya nyata dari komunitas web untuk membuat proses membangun situs web menjadi lebih mudah. Kita semua ingin menghemat waktu dalam alur kerja kita sehari-hari.

Sejak awal web kami telah melihat banyak teknologi meningkat, hanya untuk digantikan oleh alternatif yang lebih baik. Tren 2016 ini mendorong serangkaian teknik desain yang lebih seragam yang akan membuat membangun situs web lebih mudah dan tidak terlalu rumit.