Magic4rt Blog

Digital Art And Information

Selasa, Juli 23, 2013

9 Cara Membuat Website 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.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. 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:

1. Uppercase Lettering
Banyak website dengan gaya flat design sukses menggunakan gaya tipografi ini. Banyak website menggunakan teks dengan huruf kapital sebagai navigasi dan headline.

2. 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

Dengan mengetahui tips mendesain website dengan gaya flat design, Anda sekarang dapat membuat website dengan lebih maksimal dan tentunya lebih modern. Selamat mendesain.

1 komentar:

  1. 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.

    BalasHapus

Berkomentarlah Yang Membangun Dan Tanpa Link