Sunday, June 18, 2017

7 Macam Desain Web Terbaik

Tags

Selamat siang dan selamat datang di blog Pintar Sekolah. Seperti biasa, kali ini kita akan mempelajari sesuatu yang baru lagi. Sebelumnya, kemarin blog Pintar Sekolah sudah memberikan materi mengenai Sejarah dan Perkembangan HTML yang termasuk kedalam kategori Pemrograman Web maka kali ini kita akan mempelajari tentang desain dari sebuah web, atau lebih tepatnya 7 Macam Desain Web Terbaik dan artikel ini termasuk kedalam kategori Desain.


7 Macam Desain Web Terbaik Pintar Sekolah

Sebelum membahas inti dari materi desain web pada artikel kali ini. Apakah kamu tahu apa yang dimaksud dengan web itu sendiri? Bagi kamu yang belum tahu, bisa membaca uraian singkat tentang pengertian web melalui catatan dibawah ini.

Web atau singkatan dari website adalah sebuah halaman yang tersedia di internet dimana didalam halaman tersebut terdapat berbagai macam informasi, baik berupa text, gambar maupun video.

Kurang lebih seperti itulah pengertian tentang web, untuk informasi lebih lanjut kamu bisa mengunjungi halaman Web Wikipedia. Perlu kamu ketahui juga bahwa blog itu berbeda dengan web, Pintar Sekolah adalah blog dan bukan termasuk kedalam web. Kamu bisa membaca Persamaan dan Perbedaan Blog Dengan Website. Dalam pembuatan web sendiri, seorang admin atau pengelolanya harus merencanakan terlebih dahulu tampilan, gaya atau desain dari web yang akan dibuatnya. Karena, jika seorang admin website tidak mementingkan desain dari web yang dibuatnya, pasti hasilnya tidak akan maksimal. Desain dari sebuah website juga mencerminkan tujuan website itu sendiri. Selain itu, dengan memperhatikan desain sebuah website, kemungkinan orang mengunjungi halaman website tersebut akan meningkat karena menariknya desain websitenya. Jadi, sudah kita ketahui bahwa betapa pentingnya desain dari sebuah website.

Nah, dari sekian banyaknya desain web yang ada di internet, Pintar Sekolah akan merangkumnya menjadi 7 macam desain web terbaik dan paling banyak digemari. Apa sajakah 7 desain web tersebut?


1. Flat Desain


Diurutan pertama adalah web dengan gaya Flat Desain. Flat desain adalah gaya desain yang mengutamakan kesederhanaan warna, praktis, simple tetapi enak dilihat. Dalam gaya flat desain, ada beberapa unsur desain yang dihilangkan demi terciptanya desain flat atau datar yang indah, diantaranya adalah efek gradasi, bayangan, glossy, embos dan beberapa unsur lainnya. Dengan menghilangkan unsur-unsur tersebut, desain yang tercipta hanya mengandung kesederhanaan dan pemilihan warna yang serasi. Pada awal penemuan flat desain, banyak desainer yang menentang flat desain karena menganggap bahwa flat desain akan membawa dunia desain kembali ke zaman dulu akibat dari hilangnya berbagai macam-macam efek modern seperti gradasi, tetapi sejak tahun 2014 flat desain kembali populer hingga sekarang dan menjadi favorit pada pemilik website serta desainer. Saya sendiri juga penggemar berat web desain, keserasian warna dari flat desain akan menghasilkan keindahan yang tidak akan ditemukan pada gaya desain lainnya.

Karena itulah, banyak sekali pemilik website yang senang menggunakan flat desain sebagai desain websitenya. Meskipun terlihat sederhana, untuk membuat flat desain sendiri tidak mudah, karena kamu harus bisa memilih warna-warna yang tepat, tetapi sekarang sudah banyak web yang memberikan berbagai macam warna khusus untuk membuat flat desain. Melihat flat desain semakin digemari oleh para pemilik website, maka para pembuat template blog juga mengambil tindakan, banyak sekali para pembuat template blog professional seperti Arlina dan Dunia Blanter membuat berbagai macam template blog yang mengusung gaya flat desain yang keren. Dan untuk pengaplikasian flat desain kedalam sebuah website akan menjadi sebuah tantangan tersendiri bagi para programmer.

Berikut dibawah ini gambar contoh web dengan gaya flat desain.

7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Flat Web Desain 1


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Flat Web Desain 2


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Flat Web Desain 3

2. Material Desain


Pada tahun 2014 lalu, perusahaan mesin pencari terbesar di dunia, yaitu Google merilis sebuah proyek baru mereka, yaitu Material Desain. Google memberitahukan konsep material desain melalui produk Google I/O. Mungkin, bagi orang yang pertama kali melihat material desain, akan langsung berpikir bahwa itu adalah flat desain. Memang material desain masih menggunakan konsep dari flat desain, tetapi ada sedikit perbedaan dalam didalamnya. Dalam material desain, Google telah membuat desainnya menjadi senyata mungkin sehingga sebuah elemen tampak seperti tumpukan kertas dimana masing-masing tumpukan memiliki perbedaan tersendiri. Selain itu, Google juga telah menambahkan berbagai macam animasi dan efek yang indah kedalam material desain, salah satu contohnya adalah efek Ripple atau efek yang terjadi ketika sebuah tombol ditekan maka akan memunculkan sebuah efek riak yang diimplementasikan dalam flat desain. Animasi pada elemen yang sedang dihover maupun yang sedang ditekan juga sangat berbeda dan perlu diketahui juga bahwa font utama yang digunakan pada material desain ada font Roboto, jadi Google benar-benar memperhatikan setiap segi dalam material desain.
Baca Juga
Awalnya, material desain hanya bisa digunakan pada Android saja, seperti Android marshmallow dan nougat yang sudah secara otomatis mengusung konsep material desain, tetapi karena semakin banyaknya permintaan maka Google sudah "memperbolehkan" material desain digunakan pada aplikasi atau software desktop dan pada sebuah website. Bahkan, Google sampai membuat sebuah panduan lengkap penggunaan material desain yang bisa kamu kunjungi dihalaman Material Design Guidelines. Karena masih tergolong baru, masih belum banyak website yang menerapkan tema material desain ini, tetapi menurut saya material desain adalah sebuah desain modern yang keren dan mengusung tema animasi yang indah.

Sebenarnya, masih banyak lagi kelebihan yang ada didalam material desain, Pintar Sekolah akan membahasnya di artikel yang akan datang. Kamu bisa melihat video dibawah ini untuk menyimak bagaimana pembuatan material desian oleh Google secara langsung.

Berikut dibawah ini beberapa contoh gambar yang menampilkan website dengan gaya material desain.


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Material Web Desain 1


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Material Web Desain 2


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Material Web Desain 3

3. Parralax Effect


Diurutan ketiga dari 7 macam desain web terbaik, ada desain dengan nama Parralax Effect. Sebenarnya parralax effect bukan sebuah web desain, melainkan sebuah fitur yang terdapat dalam sebuah website, tetapi karena lebih praktis cara penyebutannya, maka lebih dikenal dengan nama desain web parralax. Web dengan desain parralax effect berisi kumpulan gambar yang dipadukan sedemikian rupa dan gambar-gambar tersebut dijadikan sebuah background yang berbeda-beda, lalu ketika website tersebut discroll kebawah, maka gambar yang dijadikan background tadi tidak akan ikut terbawa kebawah, seolah-olah text nya saja yang naik keatas dan gambarnya juga akan berganti secara otomatis.

Karena web yang mengandung parralax effect memiliki banyak sekali gambar, kadang untuk membukanya memerlukan waktu yang sedikit lebih lama daripada ketika membuka website biasa, tetapi masih banyak desainer website yang memilik desain web seperti ini karena menarik perhatian pengunjung. Website game adalah website yang paling banyak menerapkan desain web parralax.

Tidak mudah untuk membuat sebuah web dengan desain parralax effect, para programmer website yang ingin membuat desain web parralax effect setidaknya harus sudah paham betul mengenai framework bahasa pemrograman Javascript, yaitu jQuery.

Kamu bisa melihat gambar dibawah ini sebagai contoh desain web parralax effect, tetapi kamu tidak akan menemukan efeknya, untuk menemukan efeknya kamu bisa melihat demo website yang menggunakan parralax effect dan yang tidak menggunakan dibawah gambar-gambar berikut.


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Parralax Web Desain 1


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Parralax Web Desain 2


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Parralax Web Desain 3

4. Better Typography


Selanjutnya, ada Better Typography. Better Typography adalah gaya desain web yang menggunakan banyak sekali kata atau kalimat. Kata-kata yang terdapat dalam web yang mengusung desain Better Typography juga bukan kata yang sembarangan. Biasanya, kata yang digunakan adalah identitas atau informasi website tersebut, dan kadang sebuah kalimat yang menjadi slogan atau daya tarik pembaca website tersebut. Lalu kata-kata tersebut akan disusun sedemikan rupa sehingga membentuk gaya penulisan yang indah, unik dan beda dari yang lain.

Sekilas, website yang menggunakan desain Better Typography terlihat seperti website klasik, tetapi tidak semua website yang menggunakan desain Better Typography adalah website klasik,

7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Better Typography Web Desain 1


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Better Typography Web Desain 2
7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Better Typography Web Desain 3

5. Hand Drawn Illustrations


Hand Drawn Illustrations adalah sebuah gaya desain web yang unik dimana web yang menggunakan hand drawn illustrations tampak seperti hasil tulisan atau gambar ilustrasi yang dibuat dengan tangan manusia. Biasanya, ada website yang menggunakan desain hand drawn illustrations yang menggunakan warna dan yang tidak menggunakan warna. Pembuatan web dengan desain hand drawn illustrations ini biasanya menggunakna software-software tertentu, tetapi hasilnya sangat menarik dan untik. Walau begitu uniknya, tidak banyak pemilik website yang menggunakan desain web hand drawn illustrations, artinya desain web hand drawn illustrations sangat jarang dijumpai.

7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Hand Drawn Illustrations Web Desain 1


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Hand Drawn Illustrations Web Desain 2


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Hand Drawn Illustrations Web Desain 3


6. Minimize


Kadang, banyak sekali pengunjung sebuah website yang lebih mementingkan isi atau konten dari website yang dikunjungi tersebut daripada memperhatikan desain yang dipakai. Mungkin itu adalah alasan banyak pemilik web dan web desainer yang memilih desain web Minimize. Web dengan desain minimze akan memadukan konsep flat desain dan better typography, tetapi dibuat lebih sederhana, simpel dan praktis sehingga loading kecepatan website juga sangat cepat. Tetapi, walaupun desainnya yang terkesan minimalist, web dengan desain minimize lebih banyak digemari orang daripada web dengan desain hand drawn illustrations.

7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Minimize Web Desain 1


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Minimize Web Desain 2


7 Macam Desain Web Terbaik Pintar Sekolah
Contoh Minimize Web Desain 3

7. Responsive


Dan desain web yang terakhir dari 7 macam desain web terbaik yang diulas oleh Pintar Sekolah adalah desain web Responsive. Web yang mengusung desain responsive akan menyesuaikan ukuran atau bentuknya secara otomatis dengan perangkat atau device yang digunakan oleh pengunjung website. Misalnya, sebuah website bisa dikatakan responsive jika ketika dibuka melalui perangkat yang lebih kecil dari komputer seperti ponsel pintar, tampilannya tetap rapih dan tidak berantakan. Sebaliknya, website yang tidak responsive tidak mendukung semua perangkat sehingga ketika dibuka dari berbagai perangkat yang berbeda tampilannya akan berantakan. Umumnya, hampir semua website bahkan blog yang ada di internet sekarang sudah memiliki desain web responsive demi memanjakan pengunjungnya. Untuk demonya, kamu bisa meresize ukuran browser dari komputer atau laptop kamu ketika membuka blog Pintar Sekolah dan tampilannya tetap rapih dan tidak berantakan.

7 Macam Desain Web Terbaik Pintar Sekolah
Konsep Web Desain Responsive

Mungkin masih banyak desain web yang lainnya, tetapi Pintar Sekolah merangkumnya menjadi 7 macam desain web yang terbaik dan paling banyak digunakan oleh berbagai macam website di internet. Apakah kamu tahu desain web yang menarik lainnya? Beritahu dikolom komentar.

Nantikan artikel menarik lainnya tentang desain hanya di blog Pintar Sekolah. Mohon dikoreksi jika ada yang salah dan jangan lupa bagikan ke teman-teman kamu.

Seorang siswa dari XI RPL 1 dan bersekolah di SMKN 1 Karawang. Hobi menulis dan sangat menggemari dunia web development, internet dan desain.

18 komentar

Kalau aku pribadi min, paling suka dengan mengkombinasikan 3 jenis tamoilan website diatas yakni flat website, parallax efect dan responsive website.. Tapi ada satu kekurangan fatal bagi pengguna website parallax lho min yakni ketidakefektifakan efek parallax tersebut pada perangkat yang mengusung fitur responsive seperti tablet dan smartphone

Betul sekali gan, ini bisa menjadi informasi yang sangat berguna bagi para pemilik website dan programmernya (y)

kalau web seperti blog sotazone dot net itu pakai jenis desain web apa ya .... kok beda dari yang lain., hehe..

kalau itu namanya desain web anti mainstream gan hihi

Di wwbsite yang saya kembangkan sendiri lebih ke flat dan responsive gan :)

Ada yg mau saya tanyakan nih gan. saat menggunakan responsive tampilan website saya terkesan menarik tetapi loading website saya menurun dan jika menggunakan versi mobile template khusus nya. Loading blog saya fast loading saat dibuka di handphone/smartphone. Menurut agan lebih baik menggunakan responsive atau versi mobile nya ya ? Mohon infonya :)

Halo agan Sofhan,

Kalau saran saya lebih baik menggunakan yang responsive pada mobile daripada menggunakan template khusus versi mobile default. Mengapa begitu? Karena, selain tampilannya menjadi menarik dan responsive, website kamu juga akan memiliki fitur yang sama ketika dibuka melalui komputer maupun mobile. Untuk masalah loading, kamu bisa mengurangi ukuran gambar yang digunakan, atau dengan mengkompres CSS dan kurangi penggunaan javascript pada website kamu.

Semoga membantu dan terima kasih telah mengunjungi blog Pintar Sekolah :D

Paling suka sama yg flat design dan material design tapi nggak tau mana yg lebih bagus...
Kalo responsive mah sudah pasti (y)

Kalau menurut saya lebih bagus material desain kalau diterapkan untuk desain web mas. Tapi benar, responsive mah harus hihi

Ternyata banyak banget yaa jenis-jenis desain website.

Iya gan, silahkan bisa dipilih-pilih buat website nya hihi

Biasanya website yang mengusung fitur paralax hanya WordPress saja kang, blogger sangat jarang. Mungkin termasuk fitur yang condong ke berbayar alias premium ya.

Kalau saya sih lebih pilih responsive, flat design, dan minimalis gan. Terlihat lebih profesional soalnya :)

Benar gan, di plafform Blogger memang sangat jarang ditemui gaya desain parallax, mungkin karena gaya desain web parallax lebih dikhususkan untuk website seperti company profile dan landing page :D

Saya malah lebih suka yang flat, soalnya warna elegan, dan enggak bosenin juga

yang flat design memang mantap

Sama yang material desain gan hehe :D

menurut ane paling bagus flat design yang desainnya responsive dan mendukung teknologi amp dari google, dan juga fast load :D

Silahkan berkomentar atau berpendapat melalui form dibawah. Berkomentarlah sesuai dengan isi artikel, link tidak akan ditampilkan, dan komentar yang mengandung unsur SARA tidak diperkenankan.
Jadilah orang yang bijak dan bisa menghargai orang lain
EmoticonEmoticon