Metode Flat Design Dan Tips-Tips Cara Membuatnya

Satria Perwira    11/08/2014    Article   

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.

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.

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.

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.

White Text Over Background

Style ini juga cukup populer, dengan meletakkan teks di atas background warna solid atau bisa juga dengan background foto.

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.

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.

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.

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.

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.

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.

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