This blog is under construction. Sorry, if the look of this blog bother you. Thank you.
September 12, 2013

Tentang Flat Design UI

Flat Design UI adalah salah satu topik yang banyak dibicarakan dalam tren Web Design dan UI (User Interface) di tahun ini. Tidak seperti pada posting sebelumnya, saya menghadirkan artikel desain grafis dengan software open source yang diadaptasi dari artikel tutorial photoshop, corel draw, illustrator. Kali ini kita akan membahas Desain Flat.

Kita tahu, di era sekarang tak pernah lepas dari perangkat mobile. Bahkan untuk berselancar internet saja dapat diakses di perangkat mobile seperti handphone, smartphone, tablet PC, dan lainnya yang kebanyakan menggunakan antarmuka layar sentuh (biasa disebut touchscreen). Untuk memudahkan penggunaan aplikasi atau website di perangkat mobile desain antarmuka dibuat minimalis tanpa menghilangkan fungsionalitas atau konten web/blog. Flat Design adalah jawaban untuk menghadapi situasi sekarang ini.

Flat Design sebenarnya sejak dulu sudah diperkenalkan di tahun 80 an. Pada waktu itu, desain flatnya terlihat biasa saja dan tidak menarik. Pada waktu itu dibuatlah seperti efek 3D dengan kombinasi shadow, gradient, bevel, dan lainnya agar menarik. Lihat OS Windows Vista/7 yang menggunakan Aero, dan juga Mac. Namun sekarang, kembali lagi ke jaman dahulu lihat saja tampilan Windows 8 dengan Metro UI nya, iOS, Android. Tapi Flat Design sekarang tidak seperti jaman dahulu. Sekarang Flat Design hadir dengan warna cerah, typografi yang elegan sehingga nyaman dipandang. Lihat gambar berikut adalah salah satu contoh Flat Design.

Flat Design UI, icon, website

Jika anda ingin membuat desain antarmuka dengan gaya flat tapi bingung untuk memilih warna terutama warna cerah. Anda dapat memanfaatkan tool atau color palette gratis flatuicolors.com. Di sana ada beberapa warna yang biasa digunakan dalam desain Flat.

flat colors ui, sampel warna untuk desain flat

Dalam Flat Design ini, kita hanya menggunakan shape dan warna cerah. Kita tak perlu disibukkan dengan pemberian efek-efek seperti shadow, gradient, bevel, dan lainnya yang memberi kesan 3D. Dalam Flat Design kita dapat menggabungkan variasi warna yang berbeda yang biasanya, dalam Web Design sebaiknya membatasi jumlah warna yang digunakan.

Flat Design ini, cocok untuk pembuatan web responsive dengan bantuan html5 dan CSS3. Tampilan web atau blog responsive biasanya minimalis, dan dapat dibuka di semua ukuran layar device. Penggunaan elemen besar dan padding pada web akan cocok bagi pengguna layar sentuh.

Typography juga bagian yang paling penting dalam flat design ini. Typografi yang elegan akan menjadi pusat dari flat design, asal background tidak mengganggu warna teks.


Nah, itu adalah beberapa hal mengenai flat design yang menjadi tren sekarang ini. Desain tampak minimalis, dan elegan tanpa melupakan fungsionalitas atau konten web.




Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Tentang Flat Design UI

14 comments:

  1. coba ahh..gimana sehhh rasa Design Flat UI...salam BW

    ReplyDelete
  2. Design flat memang sedang populer sepertinya, dalam sebuah desain memang pemilihan warna yang sulit, tapi menurut saya warna pastel lebih enak dipandang. Gak mencolok.

    Bener mas blog anda menyejukan hati, mungkin saya akan banyak belajar dari tulisan anda.

    ReplyDelete
  3. Untuk pemilihan warna, silahkan ke http://flatuicolors.com mas... Di sana ada beberapa warna yang sering dijumpai dalam flat design ui. Tinggal klik otomatis menyalin kode warnanya...

    @All Terima kasih telah berkunjung

    ReplyDelete
  4. @desainew, mantap nih artikelnya......jadi lebih tau tentang dunia desain yg ternyata menyenangkan... *salam kenal ya :-)

    ReplyDelete
  5. mantab nih gan tentang design flat, thanks ya udah share
    keepblogging

    ReplyDelete
  6. wah asik ini flat desain :)
    - AHS - http://ah-shared.blogspot.com

    ReplyDelete
  7. I love flat ... makasih infonya mas .. :)

    www.center60.com

    ReplyDelete
  8. Keren gan templatenya, infonya menarik, kesini juga ya gan aldirahmanuntoro.blogspot.com

    ReplyDelete
  9. @all : Terima kasih atas kunjungannya...

    ReplyDelete
  10. bisa tolong kasih tips cara bikin jadi flat ngga gan?
    makasih

    ReplyDelete
  11. Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
    Cara Menggunakan Template Flat Ui
    Thanks.

    ReplyDelete
  12. Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
    Cara Menggunakan Template Flat Ui
    Thanks.

    ReplyDelete