20 Trend Paling Hangat Akan Bentuk Reka Bentuk Web Datang 2016

Seperti masa yang berlalu ke hadapan dengan setiap tahun yang berlalu, banyak trend reka bentuk baru menjenguk di ufuk. Bidang reka bentuk web sentiasa berubah dengan alat baru, alur kerja, dan amalan terbaik untuk membina susun atur yang boleh digunakan.

Sukar untuk meramalkan trend yang tepat akan menarik perhatian paling besar. Tetapi sejarah baru-baru ini menunjukkan corak trend yang telah berkembang seperti kebakaran. Saya telah menganjurkan 20 trend unik yang telah mendapat daya tarikan pada tahun 2015 dan kemungkinan akan berterusan ke 2016.

1. Aplikasi Lakaran untuk Reka Bentuk UI

Lakaran dengan cepat menggantikan Photoshop untuk semua tugas reka bentuk UI bermula dari wireframe kesetiaan rendah kepada mockups tinggi kesetiaan & reka bentuk ikon.

App Lakaran adalah aplikasi Mac sahaja yang dibuat khusus untuk pereka web dan mudah alih. Ia menawarkan persekitaran kerja yang lebih lancar untuk memajukan unsur-unsur vektor untuk mana-mana antara muka, namun ia juga mengekalkan banyak ciri yang anda harapkan daripada Photoshop seperti kesan teks dan gaya lapisan.

Walaupun tidak ada bukti bahawa Sketsa akan dilepaskan untuk Windows, ia masih menjadi pilihan yang bernilai oleh pengguna OS X. Aliran kerja yang mudah dan tag harga yang lebih murah memberikan Adobe satu wang untuk wangnya. Jika Lakaran terus memberikan pengalaman reka bentuk UI yang terbaik maka ia pasti akan terus berkembang dengan baik ke 2016 dan seterusnya.

2. IDE berasaskan pelayar

IDE Desktop telah wujud selama beberapa dekad dengan pilihan antara Notepad ++ hingga Xcode dan Visual Studio. IDE menjadikannya lebih mudah untuk menulis kod dengan cadangan dan penonjolan sintaks (antara ciri-ciri lain).

Tetapi tradisi IDE telah dikeluarkan sebagai aplikasi desktop. Sejak beberapa tahun kebelakangan ini kami telah melihat peningkatan dramatik dalam IDE awan berasaskan pelayar. Ini tidak memerlukan apa-apa perisian selain pelayar web, yang membolehkan devs untuk menulis kod dari mana-mana komputer dengan akses Internet.

Fungsi IDE awan lebih seperti aplikasi web di mana anda boleh menyimpan coretan kod ke akaun anda untuk perkongsian atau storan peribadi. CodePen adalah salah satu daripada IDE yang paling popular dengan sokongan untuk HTML / CSS / JS berserta preprocessing tersuai seperti Jade / Haml dan KURANG / SCSS.

Mozilla Thimble adalah IDE lain untuk permulaan pemaju yang ingin belajar kerana mereka kod. Juga Codeply hebat untuk menguji kerangka responsif tertentu seperti Bootstrap atau Zurb's Foundation tanpa perlu memuat turun sebarang fail.

3. Sass / SCSS Mixins Percuma

Preprocessors telah menjadi trendy selama bertahun-tahun tetapi hanya baru-baru ini menjadi arus utama yang cukup untuk merasa di mana-mana di seluruh bidang reka bentuk / pembangunan web. Pada masa kini, ia kelihatan aneh untuk menulis CSS vanilla apabila Sass / SCSS dapat memberikan lebih banyak lagi.

Satu faedah adalah bekalan perpustakaan campuran Sass yang semakin meningkat. Mixins mudah seperti coretan kod atau fungsi asas untuk menghasilkan kod berulang dalam CSS. Walaupun anda sentiasa boleh menulis sendiri, banyak pemaju telah cukup baik untuk melepaskan mixin percuma secara dalam talian.

Beberapa campuran datang dalam perpustakaan seperti Bourbon sementara yang lain boleh menjadi barang mandiri. Cuba lakukan carian dalam campuran GitHub untuk Sass / SCSS untuk melihat apa yang anda boleh cari.

4. Layout Kad

Susun atur kad laman web pertama kali dipopularkan oleh Pinterest beberapa tahun lalu dan sejak itu menjadi trend untuk laman web kandungan yang berat. Plugin percuma seperti jQuery Masonry boleh digunakan untuk meniru gaya susun atur ini dengan kad animasi untuk pelbagai ketinggian & lebar.

Susun atur kad lebih baik digunakan pada halaman dengan banyak data yang perlu ditayangkan. Halaman pendaratan untuk Google Now menggunakan susunatur kad untuk mengiklankan kad pilihan untuk apl Google Now.

Anda boleh memikirkan susun atur kad sebagai grid yang lebih dinamik dengan tumpuan untuk meminimumkan kandungan kepada keperluan penting untuk menyenaraikan lebih banyak item bersama-sama. Majalah dalam talian seperti UGSMAG dan The Next Web adalah contoh sempurna susun atur kad yang digunakan untuk mempamerkan kandungan pos terkini.

5. Video Penjelasan Tersuai

Syarikat-syarikat besar dan kecil juga telah mengambil tren video penjelasan adat. Ini sering dibuat dengan animasi seperti contoh Telur Crazy. Tetapi video lain bergantung pada rakaman sebenar seperti Instagram Direct.

Tujuan video penjelasan adalah untuk menunjukkan bagaimana produk atau perkhidmatan berfungsi. Pengunjung boleh membuat skim senarai ciri dan masih tidak tahu bagaimana produk beroperasi. Video menjelaskan segala-galanya secara visual dan meliputi perkara penting dalam hanya beberapa minit.

Jika anda ingin mencuba tangan anda membuat video penjelasan khas menyemak kursus Udemy ini. Ini adalah kajian mendalam yang menumpukan pada video untuk reka bentuk halaman pendaratan.

6. Pratonton Produk Langsung

Reka bentuk laman pendaratan telah menyaksikan pertumbuhan luar biasa yang berpunca daripada kelajuan Internet yang lebih tinggi dan keupayaan penyemak imbas. Satu trend utama yang saya perhatikan ialah penambahan pratonton produk langsung pada halaman utama atau halaman arahan khas.

Ambil contoh halaman produk Slack. Ia mempunyai tur video dan grafik vektor yang meliputi antara muka Slack. Pratonton produk ini dimaksudkan untuk memberikan pengguna potensial melihat bagaimana produk beroperasi.

Webydo adalah satu lagi contoh cemerlang dengan animasi langsung yang bermain di laman utama. Ini membolehkan pelawat melihat tindakan Webydo tanpa perlu mempromosi produk secara manual. Tetapi anda tidak perlu bergantung pada animasi untuk pratonton produk. Iconjar menggunakan tangkapan skrin PNG yang mudah untuk menunjukkan apa produk dan cara ia berfungsi.

7. Pelari Tugas Automatik

Dunia perkembangan frontend telah berubah begitu banyak dengan beberapa amalan terbaik baru untuk pembuatan laman web. Sistem pelari / bina tugas seperti Gulp dan Grunt digunakan lebih kerap untuk membunuh tugas yang sebelum ini memerlukan usaha manual.

Otomasi adalah nyawa dari pemulihan pantas dan menghasilkan kod kualiti. Mesin tidak membuat kesilapan, jadi lebih banyak anda boleh mengotomatisasi dengan keyakinan mengenai isu yang lebih sedikit yang anda akan ada (dalam teori).

Untuk mengetahui lebih lanjut, lihat jawatan Reddit ini menjelaskan bagaimana pelari tugas beroperasi. Alat-alat ini pada dasarnya menjalankan kod JS yang akan mengautomasikan sebahagian daripada aliran kerja anda, sama ada JS atau skrip tersuai yang ditulis oleh orang lain.

8. Apl Mudah Alih Nokia Asli

Saya seorang penyokong besar menggunakan alat yang tepat untuk pekerjaan itu. Dalam kes pembangunan aplikasi mudah alih ini bermakna Jawa untuk Android, Objektif-C / Swift untuk iOS.

Tetapi tidak semua orang ingin belajar bahasa baru hanya untuk membina aplikasi mudah alih. Syukurlah, ia menjadi lebih mudah untuk aplikasi asli dicipta & disusun dengan perpustakaan alternatif seperti NativeScript atau React Native.

Jurang untuk menjadi pengaturcara apl mudah alih adalah memendekkan dengan keupayaan untuk membuat aplikasi mudah alih melalui JavaScript. PhoneGap adalah pilihan lain berdasarkan kod HTML / CSS / JS.

Walaupun proses penciptaan berbeza-beza, JS dengan cepat menjadi penyelesaian untuk coders yang ingin membina aplikasi mudah alih tanpa mempelajari bahasa baru.

9. Alat Kerjasama untuk Reka Bentuk

Pemesejan segera dan sembang kumpulan telah berlangsung sekitar satu dekad. Walau bagaimanapun, sumber-sumber ini secara tradisinya bergantung pada plaintext dengan beberapa keupayaan untuk melampirkan fail.

Trend yang baru muncul adalah keupayaan untuk berkongsi dokumen reka bentuk langsung dalam aplikasi sembang. Yang ketara adalah satu contoh di mana penjelasan dan komen boleh diletakkan tepat di atas dokumen. Ini memberi para perancang cara yang bersih untuk berkongsi kerja secara langsung dengan semua orang dalam satu pasukan.

Slack adalah aplikasi sembang yang paling popular pada masa ini yang menyokong banyak ciri yang serupa. Userbase Slack yang semakin berkembang telah menetapkan tentang membuat sambungan yang sangat meningkatkan keupayaan Slack & mengikat ke produk lain seperti Hangouts, MailChimp, dan bahkan WordPress.

10. Rangka Kerja Frontend Responsif

Rangka kerja frontend seperti Bootstrap telah bertahun-tahun dan terus membuktikan berguna pada projek baik peribadi maupun profesional. Reka bentuk responsif telah memaksa kerangka kerja dan mewujudkan permintaan untuk kod frontend bukan hanya backend (Django, Laravel, dll).

Bergerak ke 2016 Saya fikir kita akan membaca lebih banyak lagi mengenai rangka frontend responsif & nilai mereka dalam projek web. Banyak devs sedang menunggu pembebasan Yayasan 6 dan pelepasan v1 awam Bootstrap 4.

Rangka kerja yang kurang dikenali yang anda mungkin lihat termasuk Gumby dan CSS Tulen.

11. Fokus Lebih Besar pada Reka Bentuk UX

Bidang reka bentuk pengalaman pengguna akan terus berkembang pesat dengan lebih banyak pereka dan pemaju yang mengambil notis. Reka bentuk UI adalah sebahagian daripada reka bentuk UX tetapi ia bukan matlamat akhir. UI adalah cara untuk mengakhiri, dengan akhirnya menjadi pengalaman pengguna yang hebat.

Hanya 5 tahun yang lalu saya hampir tidak biasa dengan UX atau bagaimana ia digunakan untuk reka bentuk antara muka. Sekarang kita mempunyai sumber seperti UX Stack Exchange dan ebook percuma UX. Jika anda tidak mengetahui banyak tentang pengalaman pengguna maka sekarang adalah masa terbaik untuk belajar & belajar bagaimana prinsip UX boleh digunakan untuk semua bentuk antara muka digital.

12. Pengurus Pakej

Pengurus pakej digital telah bangkit dengan begitu cepat bahawa mereka praktikal merupakan keperluan untuk pembangunan web moden. Penyelesaian seperti Bower dan NPM boleh menjimatkan banyak masa untuk memulakan projek baru.

Menguasai mana-mana teknologi baru akan mengambil masa dan dilengkapi dengan lengkung pembelajaran. Tetapi jika ada satu perkara yang perlu diketahui setiap pembangun frontend (atau backend), itu pengurus pakej. Mereka memerlukan pengetahuan mengenai arahan terminal tetapi sebaik sahaja anda membiasakan diri dengan proses yang anda tidak akan mahu kembali.

13. Animasi UI lanjutan

Peralihan CSS3 hanya permulaan trend animasi jangka panjang di web. Kini kami mempunyai puluhan perpustakaan CSS dan JavaScript yang khusus untuk animasi. Perkara yang saya tidak pernah impikan sekarang boleh dibina & boleh didapati secara percuma jika anda tahu di mana hendak melihatnya.

Animasi bukanlah keperluan untuk reka bentuk yang baik. Tetapi ia boleh membuat reka bentuk yang baik menjadi reka bentuk yang hebat apabila digunakan dengan betul.

Perhatikan trend animasi untuk antara muka dan lihat apa yang boleh anda ambil dari pelbagai laman web. Ingatlah bahawa animasi web bukan filem Disney dan harus diperlakukan dengan hormat. Gunakan animasi dengan lembut supaya ia meningkatkan antara muka tanpa menjadi unsur gangguan atau unsur yang mengganggu reka bentuk.

14. Pereka Belajar Kod

Topik butang panas tahun ini telah menjadi kes bagi pereka belajar kod. Sesetengah pereka merasakan ia bukan tugas mereka untuk menulis kod, sementara yang lain merasakan ia menjadi norma & harus dipeluk.

Saya telah membaca perbincangan yang hangat dan jawatan menarik mengenai perkara ini yang hanya kelihatan menarik jawapan emosi. Reka bentuk yang baik hanyalah gambaran yang cantik tanpa kod. Tetapi untuk memberi tumpuan kepada kedua-duanya memerlukan seorang pereka untuk menghabiskan lebih sedikit masa berlatih kerajinan.

Jadi ada jawapan yang pasti? Ada yang berpendapat bahawa peningkatan daya maju pekerjaan bagi pereka yang mengetahui pengekalan frontend. Tetapi bagaimana jika seseorang tidak mahu menulis kod? Adakah ia bernilai belajar hanya untuk bersaing?

Saya rasa jawapan yang paling jelas adalah melakukan apa sahaja yang anda mahukan. Tetapi nampaknya topik ini masih di atas meja untuk banyak pereka yang mungkin akan meneruskan perbincangan ke 2016.

15. Alat Dalam Talian Percuma & Webapps

Sudah tentu semua program dijalankan dari desktop tidak kira apa yang perlu anda lakukan. Tetapi pada masa ini saya sentiasa kagum dengan berapa banyak webapp boleh didapati secara dalam talian secara percuma.

Anda akan mendapati segala-galanya dari pengekodan / penyahkod URL ke editor Markdown sepenuhnya. Malah Google Drive telah mengambil produk Microsoft Office ke dalam penyemak imbas (sekali lagi, sepenuhnya percuma).

Tahap kuasa pengkomputeran semasa dan piawaian homogen dari pelayar web menawarkan jumlah peluang yang tidak terbatas. Tugas kompleks seperti penciptaan resume kepada pemampatan imej boleh dikendalikan dari jendela penyemak imbas.

16. Pertumbuhan Komponen Web

Komponen web cuba menyelesaikan masalah kerumitan untuk pemaju. Laman web WebComponents mempunyai sumber dan bahan yang hebat untuk memberi pemaju melompat masuk ke dalam topik ini.

Jika anda tidak pasti bagaimana untuk memahami komponen web modular, maka semak post ini untuk mengetahui lebih lanjut.

Walaupun komponen tidak begitu meletus ke status arus perdana, mereka sedang dibincangkan oleh pemaju profesional di seluruh dunia. Google telah mengeluarkan Polymer yang merupakan rangka kerja yang digunakan untuk menambah komponen web melalui JS dan HTML.

Ini mungkin tidak praktikal untuk digunakan dalam projek utama utama. Walau bagaimanapun teknologi ini tersedia dan dengan sedikit latihan anda dapat menguasai konsep dengan mudah. Untuk mengetahui lebih lanjut dan melihat beberapa contoh kod anda, anda boleh membaca melalui jawatan CSS-Tricks ini pada komponen web modular.

17. Sumber Pembelajaran Dalam Talian

Kita semua tahu bahawa kini adalah masa yang paling mudah untuk mempelajari apa-apa kemahiran dari keselesaan komputer anda. Nampaknya pasaran pembelajaran dalam talian semakin pesat dengan kursus dan tapak web yang baru muncul setiap tahun.

Saya berasa lebih yakin berbanding sebelum ini bahawa kita akan melihat peningkatan pembelajaran dalam talian. Tapak-tapak terkenal seperti Treehouse dan CodeSchool menawarkan kursus-kursus yang luar biasa di samping laman web yang lebih baru seperti Bitfountain dan Learn-Verified.

Sekiranya ada subjek yang ingin anda pelajari, terdapat kursus dalam talian - terutamanya jika anda ingin mempelajari teknik digital seperti reka bentuk UI atau pembangunan aplikasi.

18. JavaScript Side Server

Walaupun terdapat pilihan lalu untuk JS-side server, tidak ada yang meresap secepat Node.js. Devs JavaScript telah jatuh cinta dengan perpustakaan ini dan menyaksikan ia meningkat kepada persaingan langsung dengan bahasa backend lain seperti Python atau PHP.

Node membolehkan pemaju untuk membina laman web menggunakan bahasa tunggal untuk kedua-dua frontend + kod backend. Dan sumber seperti Pengurus Pakej Node memberi nilai lebih kepada Node.js.

Dari apa yang saya boleh katakan, Node masih dalam peningkatan dan terus mendapat daya tarikan daripada peminat industri. Sama ada anda merancang untuk belajar Node atau tidak, tidak syak lagi ia akan terus berkembang sebagai trend utama pada tahun 2016.

19. Ciri-ciri Laman Web Sokong-Touch

Pelayar telefon pintar sentiasa menyokong ciri sentuhan untuk semua laman web untuk mengekalkan keserasian ke belakang. Namun baru-baru ini saya telah melihat lebih banyak plugin dan ciri tersuai yang ditambahkan ke laman web dengan matlamat khusus menangani peristiwa sentuh.

Plugin seperti Photoswipe dan Dragend.js dibina untuk mengendalikan swipe dan mengetuk pada paparan skrin sentuh. Nampaknya pemaju web tidak hanya membina laman web responsif, tetapi juga laman web yang membolehkan sentuhan.

Jika anda mencari di sekeliling anda, anda akan dapati beberapa ciri yang sangat menarik yang dibina untuk web yang hanya bergantung pada acara sentuh.

20. Reka Bentuk Bahan di Web

Rilis reka bentuk bahan Google adalah satu kejayaan besar untuk pereka Android. Reka bentuk bahan dianggap sebagai bahasa reka bentuk yang bertujuan untuk mempermudahkan proses pembuatan antara muka pengguna untuk telefon pintar Android.

Lama-lama pereka web telah mengambil ini ke dalam hati dan membina laman web keseluruhan berdasarkan bahasa reka bentuk Google yang baru. Nampaknya trend reka bentuk material telah bergerak di luar aplikasi mudah alih ke dunia reka bentuk web.

Orang yang ingin membina laman web material tidak perlu mencipta semula roda. Perpustakaan percuma seperti Material UI dan Materialize menawarkan kod tersuai untuk menstrukturkan susun atur baru di atas asas reka bentuk bahan.

Penutupan

Melihat ke atas trend ini, jelaslah bahawa kita melihat usaha bersepadu dari komuniti web untuk membuat proses membina laman web lebih mudah. Kita semua ingin menjimatkan masa dalam alur kerja sehari-hari kita.

Sejak penubuhan web kami telah melihat banyak teknologi meningkat, hanya untuk digantikan dengan alternatif yang lebih baik. Trend 2016 ini mendorong satu set teknik reka bentuk yang lebih seragam yang akan menjadikan laman web bangunan mudah dan kurang kompleks.