🧖🏾 👩🏾‍✈️ ➡️ Tren desain web paling cemerlang di tahun 2016 🌻 🙍🏼 💅

Dunia desain web cerah dan beragam. Perubahan besar tidak terjadi di sini setiap tahun. Ini juga dikonfirmasi oleh pertumbuhan teknologi yang pesat, yang selama beberapa tahun terakhir telah menunjukkan bahwa tren penting dalam desain web dalam waktu dekat akan fokus pada peningkatan perkembangan yang ada.

Desain datar akan menjadi lebih bertekstur, "pengalaman sinematik" akan lebih umum, dan menggunakan perpustakaan JavaScript akan memungkinkan lebih banyak eksperimen. Kami yakin bahwa semakin populernya WebGL dan realitas virtual akan memungkinkan kami mengubah situs web yang kami ketahui menjadi sesuatu yang baru dengan fitur interaktif yang menarik.

Pada artikel ini, kita akan melihat 11 tren desain web terbesar yang diharapkan tahun ini. Jadi nyaman dan mulai membaca!

1. WebGL (Perpustakaan Grafik Web)

Di antara prestasi terbaru adalah teknologi nyata WebGL (Web Graphics Library). Dia menggunakan banyak situs luar biasa yang telah muncul baru-baru ini.

Sederhananya, WebGL adalah cara untuk membuat grafik 3D dan 2D interaktif dalam peramban yang dipercepat perangkat keras tanpa plugin apa pun.

1.1 Aplikasi 3D WebGL Interaktif

Experience Curiosity (NASA)

WebGL adalah salah satu topik utama konferensi SIGGRAPH 2015 . Anda dapat menonton presentasi pada grafik 3D dan WebGL di saluran YouTube ini .

Dari video satu setengah jam, Anda akan belajar tentang aplikasi web " Experience Curiosity " NASA , yang ciptaannya menandai ulang tahun ketiga pendaratan penjelajah Curiosity di Mars. Aplikasi ini memungkinkan pengguna untuk "menggulung" bajak NASA tiga dimensi di permukaan Mars dan "mengendalikan" lengan manipulator.

Untuk membuat sumber daya ini, Blend4Web (kerangka kerja untuk membuat aplikasi 3D berbasis browser) dan Blender (paket untuk pemodelan dan animasi tiga dimensi) digunakan.

Situs web Beloola menggunakan three.js (perpustakaan JavaScript)

Beloola adalah jejaring sosial pertama yang dirancang dalam bentuk dunia tiga dimensi. Itu menyerupai Linden Lab di Second Life, tetapi tidak memerlukan perangkat lunak khusus selain dari peramban itu sendiri.

1.2 "Video" 3D WEBGL

Angry Wife (Disp. Madeo)

Jenis lain dari 3D di WebGL adalah promosi game Angry Wife . Pada pandangan pertama, ini terlihat seperti video biasa, tetapi tidak sama sekali. Bahkan, adegan 3D yang diintegrasikan ke dalam halaman web menggunakan pustaka JavaScript three.js .

Proyek “The Boat” SBS TV (Australia)

SSB TV Australia mengubah kisah penulis Vietnam Nam Le “The Boat” dan mengubahnya menjadi sebuah kisah video interaktif menggunakan WebGL. Aplikasi ini terdiri dari beberapa bagian dengan animasi luar biasa dan ilustrasi yang dilukis secara manual. Three.js juga digunakan di sini , seperti pada contoh sebelumnya.

Karena Pemilihan

Dalam AplikasiKarena ingat ide menciptakan semacam mesin waktu, tetapi hanya dalam kaitannya dengan musik. Sejumlah besar efek suara terkait erat dengan apa yang terjadi di layar dan tergantung pada tindakan pengguna. Proyek ini dibuat menggunakan PIXI dalam bentuk serangkaian klip yang dikompilasi yang diaktifkan oleh berbagai elemen interaktif.

1.3 Visualisasi Data dengan WebGL

Histografi (Matan Stauber)

Histografi menunjukkan peristiwa historis dari Wikipedia pada timeline interaktif (catatan penerjemah. Diperlukan browser Chrome untuk menjalankan) . Mungkin sepertinya tidak terlalu menarik, tetapi cobalah sendiri dan Anda mungkin akan terkejut betapa banyak data dapat diubah menjadi alat yang sederhana dan responsif.

"The Museum of The World" (dikembangkan oleh British Museum dan Google)

Gagasan serupa diterapkan dengan cara yang sedikit berbeda untuk koleksi British Museum. Proyek " The Museum of The World " adalah hasil dari kemitraan antara British Museum dan Google Institute of Culture. Objek bersejarah dari koleksi museum ditampilkan pada "garis waktu" yang dibuat dalam 3D menggunakan WebGL.

Anda dapat bergerak maju dan mundur dalam waktu di sepanjang sumbu Z atau Y dan benua menggunakan sumbu X. Menggunakan menu, Anda dapat memilih tag untuk objek yang dikelompokkan berdasarkan topik utama (perdagangan, konflik, dll.).

1.4 Animasi 2D berdasarkan WebGL

Nouvelles-Ecritures from FranceTV

Proyek " Nouvelles Ecritures " (kira-kira Penerjemah. "Modern Scrolls") dari saluran televisi Prancis FranceTV adalah sebuah situs dengan implementasi yang sangat menarik dari animasi WebGL 2D dalam sebuah browser. Perasaan bahwa Anda membaca sebuah gulir bergambar kaya yang menggulung dengan lancar secara vertikal. Proyek ini dilaksanakan dengan bantuan JavaScript perpustakaan Pixi.js .

Dari sudut pandang teknis, ini adalah animasi dua dimensi berkelanjutan yang berjalan di ruang 3D semu. Terlihat sangat mengesankan!

2. VR (Virtual Reality)

Virtual Reality (VR) adalah teknologi terkait yang dapat mengguncang dunia gadget pada tahun 2016. Mungkin segera semuanya akan menjadi jauh lebih menarik.

Pernahkah Anda mendengar tentang Google Karton ? Dengan ponsel Android dan selembar karton, Anda bisa merasakan realitas virtual di rumah. Google menambahkan ke dalam kacamata sementara aplikasi Android khusus - Cardboard Camera , yang memungkinkan Anda untuk melihat foto virtual. Aplikasi ini adalah salah satu yang terbaik menurut The Guardian pada Januari 2016.

Namun, jika Anda menginginkan "realitas virtual" yang lebih baik, Anda dapat memesan di muka paket Rift VRdari Oculus (sekitar $ 600). Ada persilangan antara Google Cardboard dan Oculus - ini adalah Samsung's
GEAR VR ($ 100).
Apakah ada bedanya dengan desain web? Belum, tetapi lihat WebVR (API JavaScript yang menyediakan akses ke perangkat VR) dan beberapa proyek yang menggunakan teknologi ini. Contoh kerja dapat ditemukan di situs web Mozilla VR . Inilah yang dikatakan oleh para pengembang itu sendiri: “Kami ingin membuat sistem realitas virtual terbuka dan berkinerja tinggi untuk situs-situs.”

2.1 VR video

Catch the Dragon oleh Peugeot

Promo Peugeot 208 adalah contoh yang bagus tentang bagaimana perangkat VR berinteraksi dengan video. Saat startup, diusulkan untuk memilih opsi tampilan yang diinginkan: VR (untuk Google Karton) atau video panorama 360. Kedua versi sepenuhnya interaktif. Jika Anda menggunakan perangkat dengan giroskop, Anda harus secara aktif memutar kepala untuk "menangkap naga".

3. Sistem partikel

Sistem Partikel Deutser

dalam grafik tiga dimensi mulai digunakan sejak tahun 80-an untuk meniru beberapa fenomena alam, seperti kabut, asap, api, air, rumput dan awan. Sekarang dengan munculnya WebGL, telah tersedia untuk browser.

Contoh menarik penggunaan partikel adalah halaman web Deutser . Tonton bagaimana elemen-elemen terbang terpisah dan kembali dalam bentuk angka dan simbol, menanggapi gerakan mouse. Hasilnya benar-benar memukau.

4. Tampilan panorama

Rainforest (Rainforest) oleh Regnskogfondet

Rainforest bukan hanya gambar panorama. Dengan setiap langkah, Anda semakin tenggelam dalam hutan dengan tampilan 360 derajat penuh.

Di sini, pemandangan tiga dimensi berkualitas tinggi, panorama layar penuh. Namun, integrasi elemen navigasi ke dalam struktur "dunia" terlihat jauh lebih menarik.

5. Video layar penuh dengan adegan dan elemen interaktif

Milka's Christmas Express (Christmas Express) menggunakan satu set episode video yang dipisahkan oleh adegan interaktif.

Situs web Christmas Express juga mengeksploitasi ide video layar penuh, tetapi seperti yang saya pahami, tidak ada hubungannya dengan WebGL.

Anda akan melalui langkah-langkah membuat surat Natal. 10 menit untuk menulis pesan dan satu hari untuk pengiriman. Semuanya terlihat sangat nyata, detailnya sempurna dan bahkan animasi pena persis mengikuti pola huruf. Suasana Natal disediakan!

6. Cerita animasi

Gagasan penyiaran melalui animasi ulang bukan hal baru. Namun masih ada tren yang terus berkembang dari waktu ke waktu. Menariknya, transformasi tidak hanya terkait dengan aspek visual atau teknis.

Untuk membuat cerita animasi yang bagus, tidak cukup hanya dengan mengembangkan desain dan mencari artis. Dibutuhkan keberanian untuk mengatasi stereotip perusahaan dan batasan pemegang hak cipta. Hasilnya akan terlihat tidak biasa, tetapi situs yang menggunakan teknik ini jelas akan menonjol di dunia halaman web perusahaan.

Laporan Tahunan oleh Danish Crown (produsen daging babi terbesar di Eropa)

Laporan Tahunanselama setahun terakhir, dari produsen makanan Eropa Danish Crown, ini bukan grafik dan tabel membosankan yang biasa digunakan semua orang. Halaman laporan menarik bagi investornya dalam bahasa visual yang sederhana dan berani, yang secara aktif menggunakan humor abstrak dan ilustrasi lucu. Gaya teks juga dirancang dalam ekspresi yang sederhana dan jelas.

Dan inilah yang dikatakan perwakilan perusahaan: “Tidak terlihat muskil. Tidak mengungkapkan pandangan seseorang, tidak menyampaikan tugas, tidak bertabur istilah. Ini tidak ada hubungannya dengan nilai-nilai inti rata-rata - rasa hormat dan inisiatif. Untuk alasan ini, kami melakukan ini. Kami menunjukkan rasa hormat dan inisiatif. "

Keputusan termudah di dunia

Kisah semacam ini lebih umum di halaman web organisasi-organisasi LSM. Jadi situs web Proyek Realitas Iklim “Keputusan termudah di dunia ”adalah strip komik interaktif tentang perubahan iklim. Pengunjung menjawab pertanyaan sederhana dan, tergantung pada jawabannya, sebuah film diperlihatkan atau diusulkan untuk menandatangani petisi.

Contoh ini menunjukkan dengan sempurna seberapa baik desain datar dikombinasikan dengan tekstur.

7. Navigasi linear

Beberapa tahun yang lalu, desainer dan pengembang melakukan segalanya untuk menghindari navigasi linear. Penekanan utama adalah pada kenyamanan menu dan kesederhanaan bergerak melalui halaman sumber daya.

Sekarang tidak mungkin untuk membayangkan bahwa menggulir di situs pernah dianggap sebagai sesuatu yang tidak berhasil (ya itu). Meskipun Anda masih dapat mendengar tentang mitos "di atas flip" dari beberapa pengembang, klien atau desainer (penerjemah catatan. "Di atas flip" adalah bagian dari halaman yang dapat dilihat oleh pengguna tanpa menggulir) .

Dalam artikel ini, kami tidak menyoroti situs kartu nama terbaik tahun ini. Mari kita coba menemukan beberapa cara baru dan menarik yang digunakan desainer untuk membuat navigasi linear di situs.

Video portofolio dari

situs web Julien Belmonte FilmmakerJulien Belmonte berisi semua filmnya, dan navigasi pada mereka dilakukan dengan cara yang sangat sukses. Film bergerak secara horizontal dari kiri ke kanan dan disorot satu demi satu. Dalam hal ini, garis merah bergerak yang menyerupai penanda sementara digunakan.

Hampir tidak ada navigasi lain. Kecuali, di bagian “Tentang”, di mana teks terlihat seperti kredit akhir dari film apa pun.

Francesco Bertelli CSV online

Francesco Bertelli telah datang dengan pendekatan inovatif untuk CSV online-nya. Kalender interaktif yang digunakan terlihat menyenangkan secara estetika dan merupakan alat yang efektif untuk menunjukkan pertumbuhan profesional seseorang.

Antarmuka memungkinkan Anda menavigasi dengan cepat dan mudah, membantu mencoret tanggal yang telah Anda jelajahi. Ketika Anda memilih item yang diinginkan, layar dengan informasi akan terbuka ke seluruh browser. Pendekatan ini memfokuskan perhatian pengunjung situs hanya pada topik yang ia butuhkan.

8. Navigasi halaman

Jenis navigasi ini telah digunakan sejak lama. Dalam artikel sebelumnya " Tren 2013 ", situs web Bagiga adalah contoh dari jenis navigasi seperti: "layar-setelah-layar" atau " sebelumnya / berikutnya ".
Membaca buku biasa, kami membuka halaman demi halaman dan beberapa desainer mencoba menggunakan kebiasaan ini.

Produsen Karya

produsen perhiasan Imperiali Geneve menggunakan pendekatan yang sama, serta Francesco Bertelli, ketika perhatian pengguna difokuskan pada setiap layar, yang menceritakan cerita tersendiri. Situs ini linear, tetapi tanpa pengguliran gratis. Anda berpindah dari layar ke layar tanpa perantara.

Ini menggunakan navigasi slide, dengan elemen antarmuka untuk awal dan akhir setiap layar. Semua ini lebih mirip transisi antara adegan film daripada bergulir melalui situs kartu nama.

Museum Van Gogh di Amsterdam

Jenis navigasi yang serupa digunakan di situs Museum Van Gogh di Amsterdam. Nomor halaman dan jumlahnya, panah dalam kombinasi dengan transisi slide antar layar - perasaan lengkap bahwa Anda membaca buku tradisional.

Desainer berusaha untuk lebih dekat dengan solusi biasa kami yang menggunakan sumber informasi tradisional. Jadi apa desain web di masa depan? Jadi bingkai di sekitar halaman adalah trik lama, yang bagaimanapun sering digunakan.

9. Halaman dibingkai

Penelitian telah menunjukkan bahwa tren ini menjadi lebih populer daripada yang kita duga di awal. Gagasan serupa dalam desain web telah berkembang sejak lama, tetapi belum pernah dieksekusi dengan selera dan keanggunan seperti itu.

Cabang Roti Jahe oleh The PNC Financial Services Group, Inc.

Situs ini didedikasikan untuk toples ukuran penuh pertama yang dibuat dari cookies gingerbread asli. Ini juga menarik sebagai panduan untuk belajar ekonomi. Pada sumber daya ini, tidak hanya bingkai di dalam jendela browser digunakan, tetapi juga navigasi halaman.

wloks

situs Wloks penawaran grafis Asset chic dan cara yang unik. Alih-alih antarmuka elektronik biasa dari stok foto, situs ini menggunakan gaya yang menarik dari katalog cetak dan mural palsu., dengan bingkai dan menu elemen ditempatkan di sudut-sudut layar.

Bir 34

Produsen bir Beer 34 menemukan solusi unik mereka untuk mengendalikan layar dalam berbagai resolusi, menggambar inspirasi dari infografis dan sejarah. Pada saat yang sama, tampilan label lama dipertahankan. Semuanya dilakukan dengan cukup sederhana dan ini adalah contoh paling menarik dalam set ini.

10. Mengenal Konversi CSS

Stand4humanrights

Stand4HumanRights mengundang Anda untuk bergabung dengan komunitas dengan menambahkan foto Anda ke dinding sosial yang terlihat seperti permukaan melengkung besar. Kemudian Anda dapat memposting di jejaring sosial. "Dinding sosial" dapat diseret dan didasarkan pada transformasi CSS. Ini terlihat menarik, namun, itu membutuhkan daya komputasi yang besar dan tidak sepeka yang diharapkan.

Spesies Dalam Potongan

Spesies Dalam Potongan menggunakan animasi CSS untuk pameran interaktifnya, yang menawarkan 30 spesies langka dari seluruh dunia untuk dijelajahi. Model hewan terdiri dari potongan-potongan terpisah yang bertambah ketika bergerak dari satu objek ke objek lainnya(penerjemah catatan. Agar berfungsi membutuhkan browser Chrome) .

11. Animasi SVG

holohalo

Tampaknya aneh bahwa ada begitu sedikit halaman yang menggunakan teknologi Scalable Vector Graphics (SVG) klasik untuk menampilkan sesuatu yang lebih menarik daripada ikon yang dapat diskalakan untuk resolusi yang berbeda. Holo Halo merupakan pengecualian terhadap aturan dan dapat berfungsi sebagai sumber inspirasi bagi desainer, menunjukkan apa yang dapat dilakukan dengan SVG.

Ringkasan

Tanpa ragu, tren terkemuka dalam desain web pada 2016 adalah WebGL dalam semua manifestasinya: video interaktif, game, animasi, dan visualisasi data. Realitas virtual diharapkan memiliki masa depan yang baik, tetapi banyak tergantung pada ketersediaan perangkat VR.

Tren umum lainnya adalah penekanan pada media standar. Ini berlaku untuk elemen yang dilukis dengan tangan, diwarnai dan dipindai seperti proyek The Boat. Kecenderungan untuk membuat halaman web yang menyerupai buku cetak, majalah, stiker, poster dan komik juga terlihat. Ini dicapai melalui navigasi halaman demi halaman, penggunaan bingkai, dan upaya untuk melihat layar monitor sebagai "halaman" daripada "jendela" yang biasa.

Dan jika Anda berhasil menguasai artikel besar ini, Anda akan mendapatkan bonus kecil - ikutilah Delahaye 165 :

Timeshift165 situs web

Tren desain web paling cemerlang di tahun 2016