Metode Flat Design Dan Tips-Tips Cara Membuatnya

Original Article : http://mediabisnisonline.com/9-tips-membuat-website-dengan-gaya-flat-design/
Desainer yang baik, kita harus terus belajar, berusaha menguasai skill baru, dan menambah wawasan kita dengan mengikuti tren terbaru. Nah, Flat design adalah gaya yang paling happening saat ini. Mulai dari web design, mobile app, icon, ilustrasi, hingga video animasi. Kemarin kami telah membahas contoh-contoh website dengan gaya flat design. Maka kali ini saya akan membagikan sejumlah tips yang dapat anda terapkan jika anda tertarik untuk mempelajari style Flat Design. Semoga bermanfaat.

Bold Colors

Flat design biasanya menggunakan warna yang cerah dan warna-warna yang mencolok. Lihat contoh-contoh desain di bawah ini. Mereka memberikan kesan luas dengan warna cerah sebagai kunci elemen website dengan gaya Flat Design.
bold color2
bold color1
Tapi bagaimana memilih warna yang cocok untuk flat desain kita? Bisa saja kita pakai Photoshop untuk membuat palet warna. Tapi ada beberapa cara yang lebih efektif. Salah satunya menggunakan 6 Alat berikut untuk memilih kombinasi warna desain website. DesignModo juga memiliki tool yang cukup keren, yaitu FlatUIColors.com. Di sini, anda akan menemukan sejumlah warna pilihan User Interface kit DesignModo yang dikumpulan menjadi satu. Kita tinggal klik salah satu warna untuk copy kode HEX dari warna tersebut.
bold color3

Multi-Color Panels

Tips selanjutnya adalah menggabungkan beberapa warna lain yang lebih bervariasi. Umumnya, dalam mendesain web kita harus membatasi jumlah warna pada sebuah website. Namun dalam flat design kita dapat menggunakan lebih banyak variasi warna yang digunakan sebagai background website. Selama warna masih cocok, kita dapat mengkombinasikannya dengan baik. Tips berikut sedikit banyak mungkin bisa membantu anda: Cara Memilih Kombinasi Warna. Meski jangan khawatir soal pemilihan warna, karena Flat Design adalah kebebasan berekspresi. Anda boleh memilih warna kontras yang tidak memiliki ikatan satu sama lain sekalipun.
multi color panel

Typography

Tipografi adalah bagian yang sangat beperan penting dalam sukses tidaknya kita membuat Flat Design. Tipografi yang elegant akan menjadi pusat dari sebuah Flat design, asal warna background tidak menggangu unsur teks. Mainly Tipografi dalam Flat Design terbagi menjadi 2, yaitu:
Uppercase Lettering
Banyak website dengan gaya flat design sukses menggunakan gaya tipografi ini. Banyak website menggunakan teks dengan huruf kapital sebagai navigasi dan headline seperti contoh website di bawah ini.
uppercase lettering
White Text Over Background
Style ini juga cukup populer, dengan meletakkan teks di atas background warna solid atau bisa juga dengan background foto.
text over background2
text over background1

Vector Illustration

Karena kita sedang membahas flat design, gambar vektor sangat cocok digunakan sebagai ilustrasi yang dapat mempercantik situs kita. Karena vektor sendiri dibuat dari shape yang dasarnya memiliki flat color atau warna solid.
vector illustration2
vector illustration

Subtle Background Patterns

Jika Anda seorang yang senang menggunakan pattern, Anda dapat mengkombinasikannya ke dalam desain Anda. Karena tidak jarang pattern digunakan sebagai background website, dan pattern yang halus dapat membuat website lebih menarik daripada hanya menggunakan background gradient biasa. Hanya saja hal yang perlu diperhatikan adalah pattern yang Anda gunakan harus menggunakan flat design juga.
subbtle background pattern

Large Elements, Lots of Padding

Cara ini sebenarnya bukan hal yang baru lagi, tapi sangat cocok digunakan dalam flat design. Dengan membuat halaman website Anda lebih lebar dan memberinya lebih banyak ruang, akan membuat desain Anda tampak lebih rapi, lebih bersih, terlihat minimalis dan sesuai dengan tren flat design.
large element lots of padding

HTML 5 and CSS3 Transitions

Salah satu fitur yang juga sudah umum dijumpai pada website modern, yaitu digunakannya HTML5 dan CSS3. Flat design mungkin saja terlihat sangat sederhana, akan tetapi website dapat dibuat lebih menarik dengan animasi transisi dan mungkin juga efek lain yang dibangun menggunakan HTML5 dan CSS3.
html5 animation

Panoramic Background Photos

Ada banyak website yang tidak sepenuhnya menggunakan flat design, yaitu dengan menggunakan background berupa foto. Gambar digunakan sebagai bentuk visual dan ilustrasi dari sebuah website. Dan diberi tambahan elemen penunjang seperti judul headline.
panoramic background
panoramic background2

Flat Design UI Kit

Flat Design UI Kit adalah sebuah stock file desain User Interface yang dapat Anda gunakan ulang untuk membuat desain User Interface versi Anda serdiri. Fungsinya untuk memudahkan pekerjaan Anda dalam membuat desain. Anda dapat menemukan banyak sekali varian tools ini di Google, misalnya milikDesignModo atau WebDesignerDepot.
flat UI kit
Dengan mengetahui tips mendesain website dengan gaya flat design, Anda sekarang dapat membuat website dengan lebih maksimal dan tentunya lebih modern.
Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin

16 komentar

  1. Keren tutornya gan...ane akui membuat template flat memang tidak mudah..

    jangan lupa mampir balik gan

    BalasHapus
    Balasan
    1. Thank's gan sudah kemari dan berkomntar. Tenang saja saya akan kunjungan balik :)

      Hapus
  2. makasih kang tutornya lain waktu nanti pasti saya pelajari .... heheh ijin bookmark yah :)

    BalasHapus
    Balasan
    1. Iya kang, sama-sama. Monggo kang. Semoga bisa bermanfaat. Thank's sudah mampir

      Hapus
  3. Balasan
    1. Thank's gan, thank's juga sudah mampir kemari :)

      Hapus
  4. Thanks infonya gan. Nambah ilmu dan sangat bermanfaat buat ane =D

    BalasHapus
    Balasan
    1. Iya gan, semoga bisa bermanfaat ya. Thank's sudah kemari

      Hapus
  5. wah keren nih gan, ijin nyoba dulu ya gan, thanks info nya

    BalasHapus
    Balasan
    1. Iya gan monggo, thank's juga sudah kemari. :)

      Hapus
  6. beh keren om tutornya :D btw ijin bookmark dlu :D tar ane baca'' lagi metode flat nya

    BalasHapus
  7. Balasan
    1. Thank's bro :D ya sedikit modifikasi dari template asli

      Hapus
  8. kalo boleh berbagi ilmu brooo, emailku : [email protected]

    BalasHapus
    Balasan
    1. Saling tanya lewat Fb atau twitter saja bro :)

      Hapus

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon