Tren Terbaru Web Design 2015
Assalamualaikum. Pada kesempatan kali ini saya akan berbagi tentang web desain yang ngetren di tahun 2015. Ketika akan mendesain sebuah web, kita juga harus mempertimbangkan tren yang sedang berkembang. Berikut beberapa web yang desain nya banyak digunakan di tahun 2015.
#1 Tren Layar Penuh
Tren website yang pertama ini terinspirasi dari tampilan film atau tepatnya sebuah TV, dengan background penuh atau hampir penuh dengan sedikit tulisan atau elemen yang berada di atas background nya.
Tren layar penuh ini seakan menjadi tren utama yang paling banyak berpengaruh pada tahun 2015 ini. Terkadang menu navigasinya juga dihilangkan atau diganti dengan menu humberger (icon 3 garis horizontal) seperti yang ada di pojok kanan atas dari web Born.
#2 Tren Efek Parallax
Parallax has evolved into many different mutations that have one thing in common: designers use page scrolling or mouse movement to animate elements or properties of the page. If you look carefully, most of the websites showcased in this article use this logic. Here are some additional examples.
Parallax telah mengembangkan beberapa efek gerakan yang berbeda-beda, dan yang paling umum digunakan adalah page scrolling atau mouse hover untuk menimbulkan animasi pada sebuah elemen di sebuah halaman web. Berikut adalah contoh web yang menggunakan efek parallax.
Scroll event dan amimasi lukisan tangan
Silahkan dibuka! bagaimana menurut kalian? Website ini menjadi lebih menaraik dan unik
Innovative scrolling
Laman web QUO+ ini akan membuat kita amaze, karena efek scrolling vertikal dan horizontalnya yang sangat sedikit ribet, Juga bagian menarik lainnya yaitu saat kita melakukan scroll pada warna produk-produk mereka.
#3 Tren Multimedia Experience
Web Jack Daniel’s adalah salah satu contoh web yang menggunakan tren ini. Tren ini menggunakan HTML5 <canvas> yang memampukan kita untuk membuat visual efek pada sebuah website. HTML5 ini mampu menyingkirkan peran Flash yang dahulu sempat merajalela di dunia web.
Contoh keren lainnya yang dibangun dengan HTML Canvas adalah DNA Project oleh Musisi Jonthan Dagan yang bermarkas di Brooklyn (aka j.viewz). Website ini dibuka dengan visual background video, j.viewz ingin memberitahu si viewer bagaimana dia merencanakan album musik barunya melalui experimen pribadinya (yang dapat di download oleh public) dan di web ini juga ada video dari rekan-rekan kolaborasinya.
#4 Tren Animasi Buku Cerita
Pada contoh kali ini, sebenarnya hampir sama dengan contoh web yang sebelumnya, serangkaian animasi akan dimulai ketika si user mencapai posisi scroll tertentu. Web Boldking di atas menggunakan lightweight SVG dan Javascript untuk memperkenalkan perubahan bagaimana produk mereke bekerja.
Website Colin and Dewi ini sangatlah simpel namun sangat efektif untuk menaga user tetap fokus ketika membaca cerita mereka. Kita akan disuguhkan sebuah penggalan cerita pada saat melihat web mereka. Untuk melihat bagian lain, kita harus melakukan scroll ke bawah atau atas.
#5 Tren Flat Design
Selama 3 tahun ini, flat design seakan menjadi “raja”. Semakin marak dan tampaknya tren positif dari flat design ini akan terus berlanjut – secara terkhusus untuk elemen kecil seperti icon, menu, dan ilustrasi. Silakan melihat penjelasan lebih detail tentang Apa itu Flat Design .
#6 Tren Unboxes
Layar Monitor yang kita ketahui adalah berbentuk persegi/kotak, yang akan menjadi bingkai dari setiap web design yang kita buat. Setiap elemen HTML pada sebuah laman web juga mempunyai bentuk persegi. Sehingga pada tren ini, kita harus mencoba membuat elemen yang tidak berbentuk persegi, baik itu bulat, hexagon, ataupun bentuk tidak beraturan.
Menu yang dibuat berbentuk lingkaran sebagai navigasi terhadap foto-foto instagram Dan.
Menjadikan sebuah objek miring horizontal, dan menjadikan layout website kita dalam bentuk axonometric seperti website Lorenzo Bocchi diatas, akan memberikan kesan tidak terbatas dan tidak kaku.
#7 Tren Tiles
Namun jika kamu sebagai designer, sangat suka dengan tampilan kotak atau persegi, cara untuk mensiasatinya supaya terlihat modern adalah dengan memberikan layout Tiles. Tren Tiles ini terlihat sangat keren dan juga akan pas dengan metode responsive website yang akan kita pakai dalam mengembangkan sebuah web.
#8 Integrasi dengan Google Maps
Pengintegrasian dengan Google Maps mulai ramai digunakan pada saat ini. Bukan hanya integrasinya saja yang membuat ini keren, namun juga Google telah menyediakan pilihan kustomisasi tampilan visual Google Maps, sehingga memungkinkan kita untuk membuat tampilan yang lebih menarik dan pastinya keren. Seperti gambar di atas.
#9 Minimize
Mungkin kita pernah dengar istilah KISS (“Keep It Simple, Stupid!” atau “Keep It Short and Simple“). Istilah ini sudah sejak lama digunakan. Dan tampaknya ini masih dan terus berlaku untuk web design. Kita harus berusaha lebih keras untuk membuat desain kita sesimpel mungkin.
Kesimpulan
Ke 9 tren web design ini telah ada sejak tahun-tahun sebelumnya, namun akan diprediksi semakin marak dan berkembang di tahun 2015 ini. Namun yang terpenting, bila kita menyimpulkan dan mengambil garis besar dari semua tren yang ada di atas, yang terpenting dalam mendesain sebuah web adalh “Content First”. Utamakan konten. Sebisa mungkin kita membawa fokus user kepada konten, animasi dan efek-efek yang tadi kita bahas hanyalah sebagai pendukung untuk mengarahkan perhatian si user ke konten kita.
Sekian semoga bermanfaat.
#1 Tren Layar Penuh
Tren website yang pertama ini terinspirasi dari tampilan film atau tepatnya sebuah TV, dengan background penuh atau hampir penuh dengan sedikit tulisan atau elemen yang berada di atas background nya.
Tren layar penuh ini seakan menjadi tren utama yang paling banyak berpengaruh pada tahun 2015 ini. Terkadang menu navigasinya juga dihilangkan atau diganti dengan menu humberger (icon 3 garis horizontal) seperti yang ada di pojok kanan atas dari web Born.
#2 Tren Efek Parallax
Parallax has evolved into many different mutations that have one thing in common: designers use page scrolling or mouse movement to animate elements or properties of the page. If you look carefully, most of the websites showcased in this article use this logic. Here are some additional examples.
Parallax telah mengembangkan beberapa efek gerakan yang berbeda-beda, dan yang paling umum digunakan adalah page scrolling atau mouse hover untuk menimbulkan animasi pada sebuah elemen di sebuah halaman web. Berikut adalah contoh web yang menggunakan efek parallax.
Scroll event dan amimasi lukisan tangan
Silahkan dibuka! bagaimana menurut kalian? Website ini menjadi lebih menaraik dan unik
Innovative scrolling
Laman web QUO+ ini akan membuat kita amaze, karena efek scrolling vertikal dan horizontalnya yang sangat sedikit ribet, Juga bagian menarik lainnya yaitu saat kita melakukan scroll pada warna produk-produk mereka.
#3 Tren Multimedia Experience
Web Jack Daniel’s adalah salah satu contoh web yang menggunakan tren ini. Tren ini menggunakan HTML5 <canvas> yang memampukan kita untuk membuat visual efek pada sebuah website. HTML5 ini mampu menyingkirkan peran Flash yang dahulu sempat merajalela di dunia web.
Contoh keren lainnya yang dibangun dengan HTML Canvas adalah DNA Project oleh Musisi Jonthan Dagan yang bermarkas di Brooklyn (aka j.viewz). Website ini dibuka dengan visual background video, j.viewz ingin memberitahu si viewer bagaimana dia merencanakan album musik barunya melalui experimen pribadinya (yang dapat di download oleh public) dan di web ini juga ada video dari rekan-rekan kolaborasinya.
#4 Tren Animasi Buku Cerita
Pada contoh kali ini, sebenarnya hampir sama dengan contoh web yang sebelumnya, serangkaian animasi akan dimulai ketika si user mencapai posisi scroll tertentu. Web Boldking di atas menggunakan lightweight SVG dan Javascript untuk memperkenalkan perubahan bagaimana produk mereke bekerja.
Website Colin and Dewi ini sangatlah simpel namun sangat efektif untuk menaga user tetap fokus ketika membaca cerita mereka. Kita akan disuguhkan sebuah penggalan cerita pada saat melihat web mereka. Untuk melihat bagian lain, kita harus melakukan scroll ke bawah atau atas.
#5 Tren Flat Design
Selama 3 tahun ini, flat design seakan menjadi “raja”. Semakin marak dan tampaknya tren positif dari flat design ini akan terus berlanjut – secara terkhusus untuk elemen kecil seperti icon, menu, dan ilustrasi. Silakan melihat penjelasan lebih detail tentang Apa itu Flat Design .
#6 Tren Unboxes
Layar Monitor yang kita ketahui adalah berbentuk persegi/kotak, yang akan menjadi bingkai dari setiap web design yang kita buat. Setiap elemen HTML pada sebuah laman web juga mempunyai bentuk persegi. Sehingga pada tren ini, kita harus mencoba membuat elemen yang tidak berbentuk persegi, baik itu bulat, hexagon, ataupun bentuk tidak beraturan.
Menu yang dibuat berbentuk lingkaran sebagai navigasi terhadap foto-foto instagram Dan.
Menjadikan sebuah objek miring horizontal, dan menjadikan layout website kita dalam bentuk axonometric seperti website Lorenzo Bocchi diatas, akan memberikan kesan tidak terbatas dan tidak kaku.
#7 Tren Tiles
#8 Integrasi dengan Google Maps
Pengintegrasian dengan Google Maps mulai ramai digunakan pada saat ini. Bukan hanya integrasinya saja yang membuat ini keren, namun juga Google telah menyediakan pilihan kustomisasi tampilan visual Google Maps, sehingga memungkinkan kita untuk membuat tampilan yang lebih menarik dan pastinya keren. Seperti gambar di atas.
#9 Minimize
Mungkin kita pernah dengar istilah KISS (“Keep It Simple, Stupid!” atau “Keep It Short and Simple“). Istilah ini sudah sejak lama digunakan. Dan tampaknya ini masih dan terus berlaku untuk web design. Kita harus berusaha lebih keras untuk membuat desain kita sesimpel mungkin.
Kesimpulan
Ke 9 tren web design ini telah ada sejak tahun-tahun sebelumnya, namun akan diprediksi semakin marak dan berkembang di tahun 2015 ini. Namun yang terpenting, bila kita menyimpulkan dan mengambil garis besar dari semua tren yang ada di atas, yang terpenting dalam mendesain sebuah web adalh “Content First”. Utamakan konten. Sebisa mungkin kita membawa fokus user kepada konten, animasi dan efek-efek yang tadi kita bahas hanyalah sebagai pendukung untuk mengarahkan perhatian si user ke konten kita.
Sekian semoga bermanfaat.
