Dalam artikel ini kita akan berbicara tentang desain flat. Anda mungkin pernah mendengar tentang hal itu karena itu merupakan salah satu tren utama dalam desain untuk beberapa tahun sudah. Mari kita lihat lebih dekat tren ini dan mengenal apa itu, dari mana asalnya, dan apa yang perlu Anda lakukan untuk membuat desain flat yang bersih, jelas dan responsif! Anda dapat menemukan banyak contoh dari flat design web layouts, flat icons, templates dan material lainnya di Envato Market. Memeriksa mereka dalam rangka untuk memiliki visi yang jelas tentang seperti apa desain flat modern terlihat!
1. Apa itu Desain Flat?
Desain flat adalah gaya modern minimalis dari antarmuka pengguna dan desain grafis, yang menggunakan elemen minimal dan mengesampingkan setiap jenis warna yang kompleks, gradiasi, highlight dan efek mengkilap, bertekstur, efek gelap lainnya.
Desain flat adalah kebalikan langsung dari skeuomorphism dan desain yang kaya. Namun, saya tidak bisa berkata tidak bahwa desain flat tak sesederhana yang mungkin terlihat. Hal ini masih bisa mencakup beberapa fitur skeuomorphism, tapi kita akan berbicara tentang itu sedikit di kemudian. Dari kesemuanya, desain flat membantu untuk lebih fokus pada konten, tanpa mengganggu pemirsa dari segi efek visual. Ini menekankan kesederhanaan elemen dan pada saat yang sama membuat tampilan lebih responsif, lebih cepat dan lebih mudah digunakan.
2. Sedikit Sejarah
Desain flat diketahui telah digunakan jauh sebelum menjadi tren besar di komunitas desain. Hal itu luas digunakan di tahun 80-an karena teknologi yang belum mampu menciptakan dan mendukung efek yang kompleks, bertekstur dan bentuk. Namun, bahkan di beberapa tahun-tahun, desain cenderung untuk dapat tampil pertama dan dengan fitur skeuomorphic sederhana, mencoba untuk terlihat seperti bentuk hidup sebenarnya.
Desain flat, seperti yang kita lihat sekarang, mulai mendapatkan popularitas setelah Microsoft merilis yang disebut produk gaya desain Metro. Metro adalah bahasa desain UI yang dibuat oleh Microsoft dan dari kesemuanya itu tentang sederhana, bersih dan modern.
Pada tahun 2010, Microsoft merilis Windows Phone 7, yang digunakan sederhana, UI desain flat dengan tepi yang tajam dan grafis yang jelas, diwarisi dari salah satu produk sebelumnya Microsoft (Zune). Kemudian, terinspirasi oleh keberhasilannya, Microsoft merilis Windows 8 OS, berdasarkan gaya Metro grafis desain flat yang sama.
Akhirnya, desain flat mencapai puncak popularitasnya di tahun 2013, saat Apple meluncurkan iOS 7, menghadirkan desain barunya dan benar-benar mengubah semua elemen UI sebelumnya, termasuk ikon dan font. Mereka membuat pedoman yang sangat deskriptif pada desain UI dan ikon.
Segera setelah itu, Google juga mengalihkan gaya halaman web dan aplikasinya ke flat design, menamainya Material Design. Google memiliki keseluruhan bagian yang didedikasikan untuk Material Design, termasuk tujuan, prinsip, dan pedoman yang bagus untuk membuat ikon material, UI, tata letak dan sebagainya.
Sejak itu, desain flat telah menjadi arahan kunci dalam desain selama beberapa tahun terakhir, dalam hal membuat website, aplikasi dan elemen desain yang elegan, rapi dan stylish.
Singkatnya, ada tiga contoh global gaya desain flat yang harus disebutkan di media modern dunia:
- Desain Metro oleh Microsoft
- Desain Apple iOS 7
- Material Design oleh Google
3. Jaga Agar Tetap Simpel
Desain flat jelas dinamai karena tidak adanya elemen dan efek tiga dimensi, seperti gradien, tekstur, pencahayaan, overtone dan bayanga. Gaya flat adalah visualisasi objek dua dimensi. Selain itu, objek yang kompleks cenderung sangat disederhanakan dan disesuaikan. Terkadang kita hanya menggambarkan siluet atau garis besar yang membuat objek sebenarnya dikenali, tanpa detail kecil.
Minimalisme adalah tren global saat ini, dan kesederhanaan bentuk dan penggunaan tepi tajam menekankan desain yang rapi dan menarik secara visual. Bentuk sederhana lebih mudah untuk dipahami dan mudah pula untuk dilihat. Mereka benar-benar membuat potongan desain terlihat minimalis dan bersih, menghindari tampilan yang ramai dan berantakan.
4. Buatlah Sempurna
Ketika sampai pada ikon flat dan elemen UI, diperlukan untuk membuatnya terlihat seiringan, akurat dan pixel-perfect sebisa mungkin. Ini penting untuk grafis raster dan vektor.
Dalam hal ini, semuanya jelas dengan Adobe Photoshop, karena bekerja dengan grafis raster yang berbasis pixel.
Ketika mulai menggunakan Adobe Illustrator, ini adalah program grafis vektor, yang berurusan dengan garis dan kurva, yang disebut vektor, yang digambar secara matematis. Beberapa waktu silam, Adobe Illustrator tidak begitu mudah untuk membuat grafis dengan pixel-perfect. Kabar baiknya adalah, versi terbaru dari Adobe Illustrator telah menjadi alat yang hebat bagi para desainer untuk menangani grafis dengan pixsel-perfect.
Selain itu, grafis vektor pada dasarnya menyiratkan bekerja dengan bentuk datar dan sederhana dengan warna dan grid yang berbeda. Adobe Illustrator sangat fleksibel dalam hal pengaturan dan memungkinkan Anda mengubah Unit, menyesuaikan Panduan dan Kotak dengan kebutuhan Anda, menyelaraskan objek dan menggunakan berbagai jenis Snapping. Semua ini membuat lebih mudah untuk membuat desain pixel-perfect yang tetap segar dan bersih pada tampilan apapun. Jika Anda menargetkan grafis dengan pixsel-perfect, pastikan untuk memeriksa panduan hebat ini untuk menciptakan karya seni yang pixel-perfect di Adobe Illustrator.
5. Aksen Warna & Tren
Salah satu fitur yang paling spesifik dari desain datar, selain bentuknya, adalah penggunaan warna. Sebagian besar palet warna untuk elemen gaya flat terdiri dari beberapa warna dasar. Warna yang cerah, berani, bersemangat, dan jenuh sangat penting untuk desain flat.
Skema warna pada desain flat tidak terbatas pada beberapa warna tertentu. Ini mencakup berbagai warna dan corak dan tergantung pada apa yang Anda gambarkan, apakah itu ikon permen yang terang atau benda bergaya retro di palet retro yang halus.
Jika Anda seorang perancang berpengalaman dan Anda memiliki mata untuk palet warna yang tepat, Anda dapat bermain-main dengan panel Warna Photoshop atau Illustrator, memilih warna hanya dengan cara menerka-nerka. Namun, proses ini membutuhkan intuisi, latihan, dan keterampilan yang baik. Dan ada beberapa alat yang mungkin berguna untuk membangun palet yang tepat.
Beberapa dari mereka cocok untuk semua jenis desain dan ilustrasi, tidak hanya untuk desain flat. Berikut ini adalah layanan Adobe Color CC, yang sebelumnya dikenal sebagai Kuler. Kini Anda bisa mengaksesnya melalui website atau langsung dari produk Adobe. Ini adalah alat yang sangat fleksibel, yang memungkinkan Anda untuk membuat palet Anda sendiri atau menggunakan berbagai palet buatan pengguna dari pustaka.
Generator palet sederhana dan berguna lainnya adalah Coolors. Cukup tekan spasi dan warnai beragam palet Anda, yang bisa disesuaikan dan diekspor.
Ada beberapa layanan serupa lainnya dengan palet kustom yang bisa membantu. Namun, ada satu yang dibuat khusus untuk desain flat. FlatUIColors.com oleh Designmodo Adalah serangkaian swatches warna flat dengan kode hex, yang sangat nyaman untuk digunakan. Ini telah menjadi sangat populer di kalangan desainer yang mencari warna untuk desain pixel-perfect. Coba lihat! Dan Anda juga dapat menemukan berbagai macam ragam warna dan palet di panduan Material Design Google.