Root » Blogging » Esensi Web Design Berbasis Metro Style

Esensi Web Design Berbasis Metro Style

Halo sobat, gimana kabarnya? Mudah-mudahan tetap dalam keadaan sehat wal’afiat ya.

Nah, belum lama ini saya iseng-iseng browsing, dan nemuin sesuatu yang menarik seputar bidang web design. Awal mulanya sih karena bosen atau pengen cari sesuatu yang beda untuk design web/template yang udah ada, dan mencari ide template yang mungkin sesuai dengan karakter diri sendiri hehe.

Dari hasil browsing itu, akhirnya saya nemu yang kira-kira cocok dan bisa dijadiin alternatif baru untuk design blog/website kita. Pernah dengar kata “Metro Style” ? Yup, itu dia yang saya temukan, dan mau coba share lebih jauh di artikel ini.

Mungkin bagi sobat yang belum tau bertanya-tanya apa itu metro? Metro ini awalnya merupakan bawaan dari Microsoft untuk implementasi pada Windows phone 7, dan akhirnya berevolusi di Windows 8.

Tapi sekarang kita bisa temukan implementasi design metro ini diberbagai bidang, termasuk di bidang web design. Untuk web design itu sendiri, sekarang sudah mulai bermunculan template-template WP dll yang berbasis pada metro style.

Nah, sebenarnya apa sih manfaat atau kelebihan design metro ini? Mari kita telusuri lebih lanjut dibawah ya.

Filosofi Metro

Kata Microsoft, “metro is our design language”. Jadi metro ini merupakan suatu gaya design yang jika dilihat sekilas kita sudah bisa mengetahui bahasa atau niat yang ingin disampaikan kepada orang yang melihatnya.

Metro ini terkesan modern, ditata dengan struktur yang rapih dan bersih, sehingga menghasilkan design yang minimalis, to the point, dan juga memungkinkan penggunanya untuk berakselerasi dengan cepat.

Keunggulan Metro Design

Jadi apa sih yang dititikberatkan dalam design metro ini? Sebelum lebih jauh ngebahas ini, berikut ini, contoh template WP berbasis metro:

subway

Dari contoh template WP ini, apa yang bisa sobat nilai? Kalau dilihat sekilas tentunya tampilan yang bersih, tersusun rapih dan terkesan sederhana/minimalis akan terlihat jelas.

Design dengan blok-blok kotak tentu akan mendominasi pada setiap bagian design berbasis metro. Dan masih banyak lagi bagian lainnya yang tersembunyi dan tanpa kita sadari akan sangat bermanfaat loh.

Saya akan coba kasih tau beberapa diantaranya ya :

1. Eye catching

Design template metro ini memang ditujukan untuk pengunjungnya. Yang dititikberatkan dalam hal ini adalah konsep design yang membuat pengunjung merasa nyaman dan akan betah untuk mengeksplor blog tersebut.

Penggunaan paduan warna terang dan kalem yang dominan membuat mata pengunjung merasa nyaman dan jelas akan maksud template tersebut.

2. To the Point

Semua design berbasis metro tidak akan bertele-tele, dalam hal ini justru akan langsung to the point. Semua pesan yang tersirat di template akan terlihat jelas, dan sudah terbagi pada seksi terpisah.

Jadi design ini lebih menitikberatkan kepada kemudahan komunikasi yang akan terlihat jelas, ketika pengunjung melihatnya. Pengunjung pasti akan tahu, baik navigasi, dan melihat apa yang ingin mereka cari.

3. User Friendly

Berkaitan dengan dua point diatas, design metro  ini tentunya akan membuat pengunjung menjadi lebih mudah mengeksplor isi blog/website. Dan kalau untuk web toko online/ecommerce, tentu semua pesan yang ingin disampaikan dapat terlihat dengan jelas oleh pengunjung, karena design metro umumnya menggunakan padding dan spacing pada huruf-hurufnya yang cukup besar dan jelas tanpa mengorbankan informasi lainnya.

4. Call to Action

Istilah ini kental hubungannya dengan website ecommerce atau yang berniat untuk menawarkan sesuatu kepada orang lain. Dalam dunia ecommerce, template cukup memegang peranan penting dan menjadi impresi awal bagi pengunjung untuk menilai baik atau tidak tokonya.

Kita ga bisa memungkiri kalo pandangan pertama akan menentukan langkah selanjutnya. Dan penggunaan template yang tidak baik atau kurang cocok, tentu akan berujung pada tingginya tingkat “bounce rate” dan menyia-nyiakan potensial konsumen yang ada, sehingga tingkat konversi penjualan akan sangat kecil.

Dalam arti lain kalau dalam dunia bisnis sama saja dengan membuang uang yang harusnya bisa jadi milik kita. Sekilas kita kurang menyadari hal ini, tapi pengaruh template cukup besar untuk memulainya suatu interaksi dan dapat mendorong tingkat penjualan bagi web ecommerce.

Call to action ini digunakan untuk “menghipnotis” atau mempengaruhi alam bawah sadar pengunjung untuk menuruti apa yang pemilik web tersebut inginkan. Saya kasih contohnya dibawah ini:

pt traveloka indonesia

Ini saya ambil dari salah satu website ecommerce yang menawarkan jasa meta search dan booking tiket pesawat secara online, yaitu Traveloka.com.

Website ini berbasis pada metro style, dengan paduan warna diwebsitenya. Nah, dari sekian banyak warna, mana yang dinamakan “Call to Action”? Biasanya call to action ini dicirikan dengan pesan yang bersifat persuasif di padu dengan warna mencolok dan warna tersebut tidak digunakan pada fungsi lainnya.

Dalam gambar Traveloka ini, Call to Action terletak pada bagian Cari Tiket. Penggunaan kata tersebut sangat cocok dengan jasa yang ditawarkan, ditambah dengan satu-satunya penggunaan warna mencolok sehingga secara tidak langsung menggugah pengunjung untuk melakukan pencarian tiket.

Hal ini berlaku juga untuk semuanya, termasuk template blog biasa. Jika ada sesuatu hal yang ingin di jadikan point dominan untuk menarik pengunjung, maka bisa menggunakan teknik Call to Action ini.

Itu sedikit gambaran dari saya tentang esensi dan manfaat dari template metro style. Selain terkesan modern, template ini juga memiliki banyak keunggulan, terlebih dalam hal penyampaian komunikasi kepada pengunjung blog. Terima kasih.

Twitter

Wandry

SEO Executive di PT Traveloka Indonesia, perusahaan tech start-up yang bergerak dibidang penyedia jasa meta search dan booking tiket pesawat resmi. Penulis menyukai dunia SEO, IM dan blogging, karena dengan aktifitas ini, penulis percaya dapat terus menambah pengetahuan dan berbagi satu sama lain.

telah mempunyai 1 Tulisan di JhezeR.com

Blogging » » » » contoh desain website keren » contoh web design » esensi design website »
Esensi Web Design Berbasis Metro Style Reviewed by wandry on . Sebuah Tulisan tentang Esensi Web Design Berbasis Metro Style @JhezeR.com

Halo sobat, gimana kabarnya? Mudah-mudahan tetap dalam keadaan sehat wal’afiat ya. Nah, belum lama ini saya iseng-iseng browsing, dan nemuin sesuatu yang menarik seputar bidang web design. Awal mulanya sih karena bosen atau pengen cari sesuatu yang beda untuk design web/template yang udah ada, dan mencari ide template yang mungkin sesuai dengan karakter diri sendiri

Rating: 4

25 Komentar "Esensi Web Design Berbasis Metro Style"


  1. JhezeR | 1760 Komentar +
    August 7th, 2013 @ 17:29

    design metro mmg lebih terlihat elegan pada web design daripada di OS windows 😀
    kdg sedikit membingungkan jg liat web dg metro style utk pertama kalinya, seperti perubahan pada kompas tekno.

    Tulisan yg bagus mas wandri 🙂

    Balas Yoo

    Wandry |

    Hehe, kesan membingungkan itu sendiri sebenarnya karena kita ga biasa aja sih mas, sama waktu dulu saya juga baru liat. Tapi kalo dilihat-lihat lagi, memang banyak manfaatnya, khususnya untuk membantu pengunjung untuk berinteraksi di web kita. Thanks

    Balas Yoo

  2. caradesign | 1 Komentar +
    August 15th, 2013 @ 16:43

    saya senang sekali dengan blog ini….kebanyakan artikelnya menarik dan ditulis dengan sangat baik makanya saya senang berkunjung ke sini….kalau bisa artikel tentang ini terus diperbaharui…

    Balas Yoo

    Wandry |

    Terima kasih Mas sudah membaca, semoga bermanfaat ya.

    Balas Yoo

  3. mesinpedia | 1 Komentar +
    August 15th, 2013 @ 16:44

    menarik sekali bisa berkunjung kesini…

    Balas Yoo

  4. Caritahu | 1 Komentar +
    August 31st, 2013 @ 22:36

    keren theme metronya kapan mau bikin mas 😛

    huahuahauahau

    Balas Yoo

  5. tomi | 103 Komentar + ♥♥♥
    September 3rd, 2013 @ 09:02

    saya pake metro style punya kentooz dot com.. bagus n eye catching mas., keren sih.
    tp karena masalah selera, saya lebih suka theme simple twenty thirteen

    Balas Yoo

  6. MC WISWO | 1 Komentar +
    October 8th, 2013 @ 18:43

    http://jhezer.com/wp-content/media/subway.jpg kalo yang ini alamat web nya apa ?

    Balas Yoo

  7. hanung | 7 Komentar +
    October 15th, 2013 @ 11:37

    sangat menarik

    Balas Yoo

  8. hanung | 7 Komentar +
    October 15th, 2013 @ 11:38

    jangan lupa kunjungan baliknya ya??

    Balas Yoo

  9. Hasby | 1 Komentar +
    November 8th, 2013 @ 23:56

    iya mas, ada kerapian di dalam desain metro. Typographnya juga bagus.
    Tapi bingung cara membuatnya 😀
    ada kerangka buat contoh ngga mas ?

    Balas Yoo

  10. Canon Ip2770 driver | 6 Komentar +
    April 29th, 2014 @ 11:14

    Makasih atas penjelasannya.

    Balas Yoo

  11. Dean | 2 Komentar +
    August 30th, 2014 @ 09:16

    lagi jaman pake metro design, kas kus pun udah ikut ikutan pake metro design

    Balas Yoo

  12. Vila Istana Bunga | 1 Komentar +
    September 1st, 2014 @ 15:48

    wah betah sekali di blog ini.. infonya dan tulisannya bagus-bagus… terimakasih ya gan… ditunggu tulisan-tulisan yang lainnya…
    Salam Sahabat…

    Balas Yoo

  13. batavia | 2 Komentar +
    November 21st, 2014 @ 11:21

    Sayangnya untuk wp ya gan, saya pengguna blogspot hanya bisa gigit jari dengan template cantik sederhana ini

    Balas Yoo

  14. Terbang Bebas | 1 Komentar +
    January 26th, 2015 @ 17:57

    Wahhh keren ya, selain dari konsep design tentunya isi content didalamnya juga menjadi salah satu faktor yang sangat penting 🙂

    Balas Yoo

  15. Gocioo | 2 Komentar +
    April 14th, 2015 @ 13:14

    udah jamannya metro skrng gan :v

    Balas Yoo

  16. resep cara membuat | 1 Komentar +
    April 18th, 2015 @ 20:54

    keren tampilannya gan

    Balas Yoo

  17. Minangkabau | 1 Komentar +
    October 16th, 2015 @ 13:51

    Metro ini memang sangat keren lah ya, kyknya perlu di coba untuk website-website pariwisata di Padang Sumatera Barat nih

    Balas Yoo

  18. Datamaya Consulting | 1 Komentar +
    December 31st, 2015 @ 11:21

    Saya juga menyukai dunia design. Untuk website, saya melihat design ala metro style Microsoft ini memiliki 2 kelemahan (selain kelebihannya tentunya):

    1. Tidak semua jenis bidang usaha cocok dgn design Metro. Gaya design ini lebih cocok untuk bidang usaha bidang kreatif, karena sifatnya yang warna warni.

    2. Harus dipadukan dgn fotografi berkualitas tinggi. Masalahnya banyak klien yang tidak bisa menyediakan gambar-gambar berupa fotografi berkualitas di websitenya, jadinya malah ancur kalau dipadukan dgn web design ala metro.

    Thanks.

    Balas Yoo

  19. Kopi Kampoeng | 1 Komentar +
    January 4th, 2016 @ 18:40

    kadang bingung ketika terus”an mengikuti trend design tapi yang pasti saya fokus di content dan tentunya tetep minum Kopi Indonesia 😀

    Balas Yoo

  20. Bimtek Diklat Nasional | 2 Komentar +
    July 27th, 2016 @ 14:11

    thanks for sharing ….

    Balas Yoo

  21. naik kelas | 1 Komentar +
    August 20th, 2016 @ 16:09

    rasanya udah mulai banyak banget yang gunain themes concept ini, palagi untuk hotel hotel di padang

    Balas Yoo

  22. pulsa | 5 Komentar +
    November 9th, 2016 @ 03:04

    sekiranya mau coba ada rekomendasi themes nya kah??

    Balas Yoo

  23. pulsa elektrik | 5 Komentar +
    November 9th, 2016 @ 03:04

    wahh boleh juga tuh.. coba saya mau cari.

    Balas Yoo

Halo, Silahkan Tinggalkan Jejak Komentarnya Yoo...