Teknologi

10 Hottest Web Design Trends yang Harus Anda Ketahui untuk 2018

 

Web adalah ruang yang berkembang cepat. Teknologi dan teknik pengembangan dapat muncul dengan cepat. Alat yang selalu ditingkatkan memungkinkan kebebasan yang lebih besar saat merancang antarmuka dan interaksi. Dan karena ini, pola dan teknik desain web dapat mulai tren dalam waktu singkat.

Di bawah ini adalah daftar tren desain web yang perlu diingat selama 2018. Mereka tidak semuanya baru; beberapa gaya yang telah mendapatkan dan / atau mempertahankan popularitas mereka selama 2016. Ini diharapkan akan terus digunakan untuk umum untuk situs web baru yang diluncurkan pada tahun 2018.

Ada juga beberapa teknik dan teknologi yang cukup baru yang mungkin ingin Anda terapkan dalam desain situs Anda. Ini belum tentu digunakan secara luas, tetapi Anda mungkin ingin memanfaatkannya sekarang untuk tetap berada di depan kurva.

Di bawah ini adalah daftar tren desain web yang perlu diingat selama 2018. Mereka tidak semuanya baru; beberapa gaya yang telah mendapatkan dan / atau mempertahankan popularitas mereka selama 2016. Ini diharapkan akan terus digunakan untuk umum untuk situs web baru yang diluncurkan pada tahun 2018.

Ada juga beberapa teknik dan teknologi yang cukup baru yang mungkin ingin Anda terapkan dalam desain situs Anda. Ini belum tentu digunakan secara luas, tetapi Anda mungkin ingin memanfaatkannya sekarang untuk tetap berada di depan kurva.

Warna
Pilihan warna untuk situs web sangat penting. Itu dapat memengaruhi emosi, pemikiran, dan rasio konversi pengunjung. Jadi, apa yang akan menjadi tren warna untuk 2018?

Pantone telah meluncurkan warna tahun 2018 mereka – Greenery. Itu telah dipilih sebagai simbol awal yang baru; warna yang menyegarkan dan meremajakan. Saya tidak berharap setiap situs web di 2018 menjadi hijau, tetapi saya yakin akan ada beberapa desain web yang terinspirasi oleh ini.

Jika Anda mencari inspirasi mengenai kombinasi warna, Anda dapat melihat beberapa pasangan warna Pantone yang direkomendasikan di halaman Warna 2018 mereka.

Karena popularitas Desain Material Google, kombinasi warna dan warna yang disarankan dalam pedoman desain tersebut cenderung cenderung meningkat di tahun 2018. Warna-warna ini cerah dan tebal. Bahkan di luar Desain Material, ada banyak contoh desain web yang menggabungkan warna-warna cerah baru-baru ini.

Ini tidak menunjukkan tanda berhenti dalam waktu dekat. Anda dapat menggunakan situs seperti Material Design Palette dan MaterialUI untuk membantu Anda memilih skema warna Desain Material.

Duotone adalah gambar yang terdiri dari dua warna. Kami telah melihat banyak gambar jenis ini digunakan dalam satu tahun terakhir dan saya mengharapkan gaya ini menjadi lebih populer di tahun 2018.

Situs seperti Spotify, telah menggunakan gambar duotone untuk efek yang luar biasa. Anda mungkin telah memperhatikan, duotone adalah gaya populer untuk banyak gambar mini video YouTube.

Situs web Adison Partners telah menggunakan duotone dalam desain situs web mereka.

 

Retro modern
Apakah itu seni pixel, tipografi vintage atau citra era 80-an dan 90-an yang terinspirasi; retro dengan sentuhan modern sekarang. Ini telah memiliki pengaruh yang lebih besar pada desain web selama beberapa tahun terakhir, dengan banyak situs memanfaatkan gaya ini.

Resume interaktif Robby Leonardi ini adalah contoh brilian dari retro modern. Dia telah menggabungkan gaya seni pixel semi / modern dengan sisi bergulir dari video game Super Marioesque.

Sweet Magnolia Gelato telah pergi untuk tampilan vintage, tetapi menggunakan beberapa animasi yang eye-catching. Ini memberikan nuansa modern yang apik, sementara tetap mempertahankan pesona gaya yang lebih tua.

Black Market juga pergi untuk tampilan vintage yang dikombinasikan dengan tata letak modular. Situs ini memiliki daya tarik pedesaan yang bekerja dengan baik dengan apa yang ditawarkan Black Market.

 

Cinemagraphs
Cinemagraphs masih berupa foto dengan elemen yang memiliki gerakan berulang. Mereka telah mendapatkan popularitas baru-baru ini, dan memang seharusnya demikian; cinemagraph yang dilakukan dengan baik dapat secara visual mencolok.

Cinemagraphs bisa berupa file GIF atau video. Keduanya dapat menghasilkan ukuran file yang agak besar jika cinemagraph memiliki kualitas tinggi. Cinemagraph GIF dapat dengan mudah menjadi lebih dari 3 MB, jadi Anda mungkin ingin mempertimbangkan streaming video.

Anda dapat melihat beberapa contoh sinemagraf yang indah tentang Flixel; layanan hosting untuk jenis gambar atau video ini. Lihatlah sekeliling untuk melihat beberapa pekerjaan hebat yang dilakukan orang-orang. Di bawah ini hanyalah satu contoh dari banyak cinemagraph berkualitas tinggi.

 

Desain Material
Desain Material Google telah ada di layar sejak tahun 2014. Pada dasarnya ini terbuat dari prinsip kertas dan tinta, yang menerjemahkan kualitas ini ke dalam format digital. Misalnya, penggunaan bayangan dan tepian untuk menunjukkan apa yang harus Anda sentuh, seperti tombol.

Dalam beberapa tahun terakhir, Desain Material semakin populer, dengan banyak tema dan template yang dibuat untuk CMS serta kerangka kerja front-end seperti Twitter Bootstrap. Salah satu kritik yang Anda akan mendengar tentang Desain Material adalah bahwa banyak situs yang dibangun menggunakan itu tampak sangat mirip; mungkin terlalu mirip. Ini karena terlalu melekat pada gaya Desain Material, bukan hanya berlaku.

Saya mengantisipasi bahwa kita akan melihat banyak proyek web yang lebih kecil mengadopsi Desain Material sebagaimana adanya. Bukan hanya prinsip Desain Material, tetapi gaya atau tema yang sebenarnya. Namun, kami kemungkinan akan melihat sebagian komunitas desain secara aktif menentang Desain Material, atau setidaknya menentang gaya stereotip, sambil tetap menerapkan prinsip-prinsip tersebut.

Contoh Desain Material yang bagus dalam bentuknya yang paling murni adalah Blog Desain Material (kejutan, kejutan). Di sini Anda dapat melihat sebagian besar prinsip Desain Material beraksi. Untuk bisa memiliki website murah klik disini.

 

Tipografi Kreatif
2016 melihat beberapa penggunaan tipografi yang sangat kreatif, dan 2018 kemungkinan akan terus mendorong batas-batas apa yang akan dilakukan desainer dengan tipe. Berharap untuk tidak hanya mengambil lebih banyak ruang di layar, tetapi juga berharap untuk melihat tipografi yang lebih kreatif daripada font web biasa yang biasa Anda gunakan.

Nurture telah menggabungkan tipografi dan video untuk membuat situs web yang bergaya dan berkelas. Video diputar di latar belakang, hanya dapat dilihat hanya melalui satu huruf besar dari kata “nuture.” Video dan hurufnya berubah ketika Anda menavigasi setiap bagian dari homepage.

Desain modular
Desain modular bukanlah sesuatu yang baru, tetapi telah mendapatkan popularitas selama beberapa tahun terakhir. Ini adalah pendekatan desain menggunakan modular, memblokir pola grid ke elemen tata letak. Melihat data Google Trends menunjukkan minat penelusuran untuk ‘desain modular’ meningkat sejak awal 2011. Saya berharap tren positif ini akan berlanjut di tahun 2018.

Build in Amsterdam telah membuat situs web desain modular yang sangat gurih. Pendekatan modular membantu mendefinisikan secara jelas setiap elemen konten.

SVG
Apakah Anda bosan dengan logo dan gambar lain yang diubah ukurannya? Jika demikian, Anda harus mencoba file SVG, bukan format PNG dan JPG biasa. Format SVG tidak cocok untuk semua gambar; mereka hanya akan bekerja dengan grafik vektor, sehingga Anda tidak dapat pergi dan menggores foto tanpa batas. Namun, untuk gambar seperti logo, mereka bekerja dengan sangat baik.

SVG telah ada sejak tahun 1999, tetapi masih, kita melihat format PNG dan JPG digunakan untuk gambar ketika SVG akan menjadi format yang lebih tepat. Ini semua tampaknya berubah. Anda mungkin telah melihat SVG disebutkan lebih lanjut dan data Google Trends menunjukkan bahwa minat terhadap SVG telah meningkat dari tahun ke tahun sejak 2013. Saya mengantisipasi peningkatan penggunaan format ini di 2018 serta peningkatan artikel yang ditulis pada topik tersebut.

Mengapa Anda harus menggunakan SVG? Alasan utamanya adalah bahwa gambar SVG Anda harus tampil sempurna tidak peduli apa skalanya. Juga, gambar dalam format SVG cenderung memiliki ukuran file yang sangat kecil; bagus untuk kecepatan halaman Anda.

Jika Anda ingin melihat aksi SVG, maka tidak terlihat lagi dari logo WPMUDEV di sudut kiri atas halaman ini. Jika Anda memperbesar menggunakan browser Anda, Anda akan melihat bahwa logo tidak menjadi pixelated, tidak peduli berapa banyak Anda memperbesarnya. Sebaliknya, logo WPMUDEV tetap tajam dan berkualitas tinggi.

 

Flexbox
Flexbox adalah mode layout CSS3 yang membuatnya jauh lebih efisien dan dapat diprediksi ketika bekerja dengan tata letak halaman yang akan ditampilkan menggunakan berbagai ukuran layar dan perangkat.

Flexbox terus menarik minat, dan dengan itu sekarang didukung oleh semua browser modern, sepertinya lebih banyak pengembang front-end yang akan menggunakannya. Anda dapat membaca lebih lanjut tentang Flexbox di panduan kami Memahami CSS3 Flexbox untuk Bersih, Desain Bebas-Rooting Bebas-Hack dan Pemahaman Grid CSS untuk Desain Situs Web WordPress Modern.

 

Video 360 & VR
2016 telah menjadi tahun VR. Banyak headset VR game telah dirilis, dan video 360 telah melihat lonjakan minat penelusuran. Saya berharap bahwa para desainer akan memikirkan cara-cara menarik untuk memasukkan video 360 ke situs web selama 2018.

Jika Anda belum menyadarinya, Google VR View adalah JavaScript API yang mudah memungkinkan Anda menambahkan pengalaman video 360 ke situs web Anda sendiri. Anda dapat membaca lebih lanjut tentang VR Google Lihat di sini.

Pengalaman VR 360 web interaktif diciptakan untuk film Blair Witch yang baru. Ini paling baik dilihat di seluler menggunakan headset VR untuk ponsel Anda.

Microinteractions
Microinteractions adalah momen tunggal dan spesifik ketika seorang pengguna berinteraksi dengan situs web Anda. Tidak harus berupa situs web semata, tetapi dalam kasus kami, itu adalah situs web. Momen-momen ini bisa berupa tindakan seperti menyukai posting, mengirim pesan atau mengisi kolom formulir. Tujuan dari mikro-interaksi selama momen-momen ini, adalah untuk memberikan umpan balik dan panduan bagi pengguna, meningkatkan UX.

Interaksi mikro telah menjadi semakin populer, dan cara di mana umpan balik dan bimbingan diberikan kepada pengguna semakin kreatif. Berharap untuk melihat lebih banyak dari ini di tahun 2018.

Di bawah ini adalah contoh animasi mikro-interaksi oleh Igor Izhik. Animasi adalah untuk interaksi yang serupa dan tidak seperti. Anda dapat melihat animasi di atas dribbble.

Cover
Itu menyimpulkan tren desain web 2018 kami yang harus diwaspadai. Semoga ini memperkenalkan Anda pada beberapa pola desain dan teknologi web baru yang tidak Anda sadari menjadi populer.

Bersenang-senang merancang situs Anda, tetapi ingat, Anda tidak harus menggunakan sesuatu hanya karena trendi. Pastikan itu meningkatkan pengalaman bagi pengguna Anda.