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 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.
6. Bayangan Panjang
Seperti disebutkan di atas, desain flat cenderung sederhana dan elegan—itulah sebabnya ia menolak menggunakan beragam macam efek. Namun, ada satu efek yang muncul dari desain flat. Ini menjadi tren dan salah satu fitur penting.
Kita sedang membicarakan efek bayangan yang panjang. Ini memiliki beberapa ciri khas yang membuat efek ini dikenali. Itu adalah sudut 45 derajat dan dengan ukuran besar (bayangan harus sekitar dua kali lebih panjang dari objeknya). Akibatnya, bayangan panjang benar-benar membawa lebih jauh ke desain flat.
Efek seperti itu membuat objek terlihat lebih tiga dimensi, sambil tetap menjaga tampilan tetap terlihat datar.
7. Bekerja Dengan Font
Tipografi memainkan peran besar dalam desain flat. Seringkali, teks menjadi elemen utama dari komposisi, walaupun elemen bergaya flat tidak mengalihkan perhatian pemirsa.
Tipografi sederhana biasanya digunakan dalam desain flat, membuat keseluruhan potongan desain terlihat bersih dan mudah dibaca. Anda dapat menemukan banyak font gratis di Adobe Typekit jika Anda menggunakan produk Adobe. Jika tidak, Font Squirrel adalah sumber font gratis yang sesuai dengan selera. Pastikan Anda membaca lisensi terlebih dahulu, jika Anda perlu memilih font untuk penggunaan komersial.
Sebagian besar desain dengan gaya flat cenderung menggunakan huruf besar dan warna kontras, membuat teks lebih mudah terbaca.
Pilih fontnya dengan cermat. Ini harus ditekankan pada desain secara keseluruhan dan pastikan tampak terlihat cocok, tanpa membuatnya terlihat sebagai elemen yang janggal. Ini tidak berarti bahwa Anda tidak dapat menggunakan font Serif atau beberapa font tulisan tangan yang rumit dengan swirl dan elemen tambahan. Tetap berpegang pada tampilan minimalis dan jaga semuanya agar tetap seimbang. Namun desain flat yang paling sukses lebih seringnya menggunakan font Sans Serif, karena lebih lurus dan ketat, sebagiman semua elemen ilustrasi bergaya flat.
8. Pro & Kontra dari Gaya Flat
Sementara desain flat telah menjadi begitu populer karena berbagai kelebihannya, namun masih memiliki beberapa kekurangan, yang dihadapi desainer saat bekerja dengan gaya ini. Mari kita lihat pro dan kontra dari desain flat.
Pro
Tren
Desain flat telah berkembang menjadi tren, menarik banyak perhatian positif di kalangan desainer dan desainer web, dan sepertinya tidak akan kehilangan posisinya. Sebaliknya, ini semakin banyak menyebar dan memperoleh beberapa bentuk dan fitur baru, secara bertahap berubah menjadi sesuatu yang lebih kreatif.
Kesederhanaan
Desain flat itu sederhana, minimalis, dan bersih. Ketika datang ke situs web, desain flat sangat membantu Anda untuk lebih fokus pada konten, bukan pada efek visual yang mengganggu. Ini juga bekerja untuk antarmuka aplikasi seluler: desain bersih dengan tombol flat besar membuatnya sempurna untuk bekerja pada perangkat mobile.
Intens
Penggunaan warna adalah nilai tambah besar lainnya dari desain flat. Warna terang dan berani terlihat menarik dan bersih, dan minimnya gradiasi membuat tampilan desain tampak modern. Terlebih lagi, warna bersih seperti itu membuatnya terlihat lebih positif dan menarik, menciptakan suasana hati yang tepat.
Kontra
Ada banyak keuntungan lain dari desain flat, namun tidak ada desain yang sempurna, dan kita tidak bisa mengidealkannya. Masih ada beberapa kelemahan yang harus kita sebutkan:
Tidak Responsif
Terkadang, kurangnya detail tambahan atau efek visual membuat sangat sulit untuk membuat antarmuka yang mudah digunakan dan ramah pengguna, yang membuat keseluruhan desain tidak responsif. Tidak semua pengguna merasa nyaman dengan desain ini, karena mungkin sulit menemukan elemen yang dapat diklik pada halaman web atau elemen yang perlu Anda sentuh dalam aplikasi mobile, karena tidak interaktif.
Masalah Tipografi
Seperti disebutkan, tidak semua font sesuai desain flat. Terkadang sebagian desain seperti dengan huruf tebal dan lurus tampak sangat seimbang dan bergaya. Namun, memilih tipografi yang salah dapat menyebabkan kerusakan total pada desain Anda. Anda benar-benar perlu merasakan font mana yang sesuai untuk desain flat dan mana yang benar-benar tidak sesuai. Keterampilan tipografi yang lemah bisa membuatnya sangat sulit untuk memilih font yang tepat.
Visual yang Lemah
Karena keterbatasan penggunaan efek, warna dan font, desain flat mungkin terlihat terlalu sederhana dan tidak menarik. Minimalismenya juga bisa menjadi kerugian terbesar—semua desain itu akhirnya terlihat sama. Agak sulit untuk membuat ikon atau halaman web Anda berbeda dari desain orang lain, karena kita menggunakan bentuk sederhana yang disederhanakan, palet warna yang terbatas dan font yang serupa. Akibatnya, dalam perjalanannya desain flat bisa terlihat membosankan.
9. Tren Masa Depan Desain Flat
Desain flat tidak bisa disebut sepenuhnya terbentuk sempurna dan berkembang. Mungkin karena kelemahannya, seperti yang dijelaskan di atas, ia cenderung mentransformasikan serta mengembangkan, memperoleh fitur baru dan perangkat tambahan visual.
Jika Anda melihat lebih dekat contoh desain flat yang terbaru, Anda mungkin memperhatikan bahwa itu sebenarnya menyimpang dari modelnya yang ketat dan mulai menambahkan efek halus, seperti gradiasi (tidak kontras), bayangan, sorotan, dan perangkat tambahan visual lainnya.
Apa yang terjadi adalah bahwa dekorasi ini sebenarnya menambah kedalaman desain, tanpa membuatnya terlihat terlalu banyak dengan detail, seperti yang terkadang dilakukan desain skeuomorphic. Perangkat tambahan kecil ini membuat desain flat lebih responsif dan nyaman serta menghadirkan tampilan yang segar, membuatnya lebih serbaguna dan beragam.
Akibatnya, desain flat tampaknya tidak kehilangan karakteristiknya; Sebaliknya, hal itu menjadi lebih menarik, lebih fleksibel—justru menjadi lebih baik.
10. Cara untuk Memulai
Jadi, Anda bersedia untuk menggali desain flat dan tidak sabar untuk mulai membuat beberapa aset flat! Saya tidak bisa untuk tidak sependapat bahwa proses ini menggairahkan dan menantang, apakah Anda akan menciptakan objek yang terisolasi atau adegan flat lengkap, termasuk elemen kelompok.
Jika Anda ingin mencoba membuat ilustrasi flat, sebaiknya Anda mulai dengan seperangkat kecil ikon, yang terhubung dengan satu topik yang sama. Dan saat Anda merasa nyaman dengan teknik ini, beralih ke ilustrasi yang lebih rumit atau mencoba bidang desain lain, menerapkan pengetahuan baru tentang grafis flat dalam membuat templat web dengan gaya flat atau spanduk.
Berikut adalah beberapa tutorial yang mungkin bisa membantu Anda.
Jika Anda bekerja dengan Adobe Illustrator, lihatlah tutorial ikon flat berikut ini:
Cobalah membuat rincian lebih lanjut seperti gradiasi, highlight dan tekstur, menambahkan kedalaman dan realisme:
Coba penggambaran benda-benda yang lebih flat untuk menciptakan pemandangan flat:
Tantang diri Anda dengan membuat pemandangan kota yang lebih rinci:
Mungkin Anda menggunakan Affinity Designer? Berikut adalah beberapa tutorial yang berguna untuk Anda juga! Mulailah dengan membuat satu ikon sederhana:
Dan kemudian buat keseluruhan rangkaian ikon:
Atau melangkah lebih jauh dan desain poster dengan elemen bergaya flat!
Seperti yang saya sebutkan, grafis raster berbasis pixel, akan menjadi sangat bagus untuk desain ikon juga. Jika Anda lebih nyaman bekerja dengan Adobe Photoshop, maka silakan menggunakannya untuk desain flat juga!
Akhirnya, jika Anda ingin memperbaiki ketrampilan Anda dan menambahkan detail dan efek yang lebih rumit ke dalam desain Anda, cobalah video kursus Membuat Elemen Ruang Kerja Gaya Flat untuk Periklananan dengan deskripsi rinci dan proses langkah demi langkah untuk menggambar setiap objek dari yang sangat awal hingga akhir.
Mari Kita Rangkum
Untuk merangkum semuanya, kita telah mengungkapkan beberapa fakta dari sejarah desain flat, dan berbicara tentang warna, bentuk dan tipografi. Kita telah melihat desain flat dari berbagai sudut, membahas kelebihan dan kekurangannya, dan mencantumkan beberapa poin utama yang penting untuk membuat desain yang baik.
Saya harap Anda telah menemukan beberapa informasi baru dari artikel ini atau setidaknya menemukannya sebagai hal menarik dan memberi inspirasi. Anda harus benar-benar mencoba membuat desain flat jika Anda belum pernah mencobanya sebelumnya.
Semua dalam semua, apa lagi yang bisa disebutkan ketika berbicara tentang desain flat?
Jika Anda benar-benar menyukai desain flat, dan jika Anda menyukai bentuknya yang lurus, warna yang hidup, font yang tajam dan tampilan keseluruhan yang bersih dan minimalis, maka pergilah untuk itu!
Ini trendi, tapi, seperti gaya grafis lainnya, Anda tidak boleh membatasi kreativitas Anda pada teknik sejenis dan elemen visual yang sama. Tren saat ini tidak berarti Anda tidak dapat memilih gaya desain lain untuk proyek Anda. Skeuomorphisme masih terlihat rumit, dan tidak ada alasan untuk menyerah menggambar objek realistis dengan sekumpulan detail dan tekstur kecil. Ingatlah bahwa desain Anda harus sesuai dengan setiap proyek tertentu, yang mencerminkan nuansa dan tampilan, menjaga kegunaan dan fungsinya.
Sumber : https://design.tutsplus.com
Berikut video referensi untuk membuat Flat Design menggunakan Adobe Illustrator
Komentar
Posting Komentar