Technology

9 Tips Membuat Website Dengan Gaya Flat Design

 
  • 1
    Share

   

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 milik DesignModo 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. Selamat mendesain ;-)

Dapatkan Segera! Video Marketplace Domination: Cara Sukses Jualan di Tokopedia dan Bukalapak. Download Now!


  • 1
    Share

Artikel Terkait

5 komentar

  • Gitaadi
    3 December 2013 - pukul 15:51

    Bermanfaat, thx udah share tips nya. di tunggu tips tentang web designnya :D

    • Syahrul Munir
      23 December 2013 - pukul 19:16

      sama sama gan :)

  • 24 June 2014 - pukul 9:56

    wah keren gan… iji bookmark.. buat bahan belajar

    • 25 June 2014 - pukul 10:20

      makaasih gan, silahkan di bookmark.
      semoga bermanfaat :)

  • 27 May 2017 - pukul 21:53

    keren gan. oh iya gan, rekomendasi template landing page full artikel dong gan. terimakasih

Berikan Komentar

Your email address will not be published. Required fields are marked *