10 Inspirasi Flat Design #2








10 Inspirasi Flat Desain, dengan perkembangan zaman, sebuah desain model baru telah hadir, dengan sajian minimalis dan terkadang kita sebut desain simpel. mungkin simpel disini bukan yang simpel bad, tapi simpel atau Flat Design disini memiliki nilai positifnya apabila kita terapkan disuatu desain atau user interface.

Kita contohkan sebuah rilisan OS terbaru dari Microsoft? Windows 8 adalah salah satu contoh UI (User Interface) yang memiliki tampilan datar/flat dengan warna-warna yang menyatu membuat windows 8 ini nyaman digunakan.

Pada bagian tertentu, Flat Design juga memiliki karakteristik yang dimilikinya, semisal suatu penempatan objek-objek meskipun objek ramai namun tetap terjaga dengan kerapianya. Dari susunan sebuah objek selanjutnya adalah warna, sebenarnya semua warna bisa dipakai untuk Flat Design namun keseimbangan mulai dari penempatan objek dan warna harus kita perhatikan agar Flat Design tercipta.

Dan di bawah ini adalah sebuah karya-karya yang bisa kita gunakan menjadi Inspirasi Flat Desgin, kecocokan warna dan ruang kosong bisa menjadi hal yang paling penting dari desain datar atau flat. Goodluck!.


Upload ATHOME by Zamrud Muhammad
Contoh antar muka website penyedia Cloud Stroge atau penyimpanan pada internet.

MTS Bank Online by Sergey Popkov
Sebuah aplikasi desktop maupun mobile oleh MTS Bank Online, pada tampilan desktop aplikasi ini menguasai pengalaman user yang cukup baik begitu pula antar muka pada versi mobile/hp yang membuat penguna menjadi lebih mudah mengelola konten yang ada pada aplikasi tersebut.

icons and icons-No.2 by by ONG

Bayangan yang memperlihatkan icon tersebut mempunyai kesan lebih hidup pada flat design. Desain seperti ini juga cocok digunakan pada sebuah aplikasi mobile seperti aplikasi alarm, photography, dll.

ThoughtSpot [dot] com by Barthelemy Chalvet
SproutVideo Homepage, v1 by Meagan Fisher
Gaya flat desain jika diterapkan di desain web juga bervariasi menurut tema atau perusahaan website tersebut, setiap negera juga memiliki kebudayaan masing-masing yang menjadikan ciri khas dari negara tersebut, misalkan negara korea yang menggunakan alfabet Hangul di negaranya, dengan gaya huruf yang berbeda dengan bahasa internasional jika diterapkan ke dalam website maka akan lebih unik. Anda bisa mencarinya dengan keyword Inspirational Korean Websites.

Web desain yang dibuat oleh Sprout Video ini juga menggunakan gaya datar, terlihat dari ruang kosong yang tertata rapi dengan kecocokan paduan warna hijau dan coklat yang membuat web design flat ini terlihat menarik.

Flat UI Release (logo evolved) by Sergey Shmidt
Flat Design ini sangat cocok digunakan pada icon permata, gradasi warna dan cahaya bayangan tampak sangat bagus.

Ark Designs Line by Mark Conlan
Rawr!!!! by Sam Stratton for Focus Lab
Desain flat juga bisa dibuat pada gambar hewan contohnya harimau yang dibuat oleh Sam Stratton ini, terlihat simple jika diterapkan pada hewan ini. jika anda ingin mencari lebih banyak lagi gambar seperti ini anda bisa mencarinya dengna keyword flat design animal.

Ui Kit Rainy Season by Sunbzy
UI Kit, dibuat berbagai beberapa material user interface pada setiap bagian-bagian salah satu contohnya pemutar lagu diatas yang juga mengunakan prinsip flat design. Pemutar lagu tersebut terlihat bersih tanpa ada tombol pemutar yang mempunyai ciri bukan flat desain.

To-Do Dashboard by Tiberiu Neamu
Mungkin ini adalah sebuah cotoh data-data yang tersimpan dalam sebuah project yang ada dalam UI pada desktop yang menyerupai tampilan halaman antar muka Dashboard oleh user dengan grafik statistik unik terdapat pada bawah tampilan.





Artikel Terkait




74 C:

  1. terimakasih buat infonya mass.. salah sukes !!

    http://obatherbalampuh.com/

    ReplyDelete
  2. Cara bikin gambar yang backgroundnya kaya di artikel ini gimana ya om admin ?

    ReplyDelete
  3. maksutnya yang a little thing called love ?

    ReplyDelete
  4. coba screenshot nya ?


    atau reinstall corelnya lagi

    ReplyDelete
  5. coba edit dengan edit power clip, arahkah mouse tepat sekitar dibawah objek..

    ReplyDelete
  6. sangat menginspirasi

    ReplyDelete
  7. Cara intersect yg lebih detail sama bikin transparan ny gimana ya ? blm bisa-bisa. Mohon bantuan ny. Terima kasih.

    ReplyDelete
  8. Lebih lanjut untuk Intersect : http://www.desainerindonesia.net/2013/07/cara-memotong-foto-di-corel-draw.html , cari intersect

    tekan shift/seleksi kedua objek lalu intersect, hapus objek pertama(warna biru) krn dibalik objek utama ada objek lagi dibawahnya (yang saya beri tanda merah), selesai .

    Objek transparan : http://www.desainerindonesia.net/2013/03/cara-membuat-objek-transparan-di.html

    ReplyDelete
  9. Thanks info ny. Mantap.

    ReplyDelete
  10. Saya juga mengalami gambar pecah resolusi gambar yang saya drag ke lembar kerja 80 x 38. Supaya tidak pecah caranya bagaimana gan?

    ReplyDelete
  11. @Ardyan Satya
    Pastikan terlebih dahulu resolusi gambar yang akan dimasukkan ke coreldraw.

    1. Jika anda pengguna windows, detail gambar tersedia dibagian kolom bawah, pada dimension pd gambar misal 256x258px.

    Pastikan juga pada coreldraw dimensionya sama, lihat gambar dibawah.

    2. Dimension di coreldraw

    3. Ini adalah Scale Factor, dimana nilai 100 adalah nilai asli dr gambar tersebut saat import,

    kecuali anda copy paste langsung dr internet maka dimensions akan berubah, sebaiknya melakukan Save terlebih dahulu pada desktop anda.

    4. Jika resize ukuran.

    5. Maka Scale factor akan berubah bisa lebih atau kurang, semakin tinggi nilai semakin jg gambar akan blur, krn ukuran dibesarkan tetapi di coreldraw biasanya tampilanya tetap tidak blur, maka anda harus menconvert terlebih dahulu agar gambar tersebut benar2 ukuran yang sudah diubah.

    6. Cara klik menu Convert to Bitmap

    7. Anda bisa menggantinya 300 Dpi . klik ok.

    maka gambar yang dibesarkan akan terlihat blur setelah dibesarkan.

    ReplyDelete
  12. Sandia Wira PermanaJuly 29, 2015 at 1:29 PM

    pas export gambar yg di canvas nya mepet ke pinggir , gimana biar tidak mepet ?

    ReplyDelete
  13. Biasanya misal gambar udeh gede tp kita scale ke kecil malah jadi pecah, tiu ngatasinnya gimana gan?

    ReplyDelete
  14. karena resolusi gambar semakin kecil kalau gambar diperkecil ?


    coba lihat jawaban dari @Ardyan Satya dibawah ini? mungkin bisa membantu?

    ReplyDelete
  15. Sangat memukau... pake program apa ya... hasil yang halusss… kalo saya biasanya pake photoshop sama corel.. biar sesuai namanya vector & pixel.. he..he..he..

    ReplyDelete
  16. Keren - keren gan..,

    ReplyDelete
  17. Flat designnya keren-keren
    Salam
    UPVC

    ReplyDelete
  18. Terima kasih, sangat bermanfaat tutorialnya.. Terus update ya mas. hehe

    ReplyDelete
  19. Min, mau tanya. Kan aku bikin objek ya, bikin ny pakai garis2 gitu yang banyak. Trus kan udah jadi, kalo di zoom in atau zoom out kan garis ny tetep segitu ukuran ny (ga sesuai sama lebar dan panjang gambar ny). Cara supaya gambar itu ukuran garis ny menyesuaikan sama yg udah kita buat gimana min ? Jadi kalo dizoom in (digedein) garis ny ga terkesan tipis, atau kalo dizoom out (dikecilin) garis ny ga terkesan terlalu tebel. Makasih min sebelum ny. :D

    ReplyDelete
  20. Coba aktifkan opsi ini, semoga membantu.

    ReplyDelete
  21. Makasiih banyak min. Manjur sekali.

    ReplyDelete
  22. sama-sama, silahkan jika mengalami masalah.

    ReplyDelete
  23. sama-sama, terimakasih, silahkan bertanya jika mengalami masalah.

    ReplyDelete
  24. sama-sama, terimakasih, silahkan tanyakan lagi apabila mengalami masalah.

    ReplyDelete
  25. Oh iya btw cara bikin panah yang melingkar itu bagaimana ya ? hehe

    ReplyDelete
  26. nama font "First" diatas apa ya?

    ReplyDelete
  27. TERIMAKASIH BANYAK ATAS TUTORIALNYA,,, PEKERJAAN SAYA JADI TERBANTU,,, INSYAALLAH ILMUNYA BERMANFAAT DAN MENJADI AMAL JARIYAH AMINNN :)

    ReplyDelete
  28. makasih mas sangat membantu,,,,ini aku lg mulai belajar corel

    ReplyDelete
  29. Saya Export hasil dari Corel ke PNG, kenapa backrgound-nya jadi lebih burem ya? Maksudnya malah jadi lebih transparan daripada aslinya...

    ReplyDelete
  30. anda menggunakan coreldraw versi berapa? coba anda tampilkan screenshot filter dialognya sblm export ke PNG dan bisa anda tampilkan file hasil export file PNGnya juga disini ..

    ReplyDelete
  31. saya suka font "DESAINER INDONESIA" itu font apa ya??

    ReplyDelete
  32. boleh nanya ga? kalo mau bikin motif d garis nya bisa ga yah? jdi ga polos warna aja? terimakasih

    ReplyDelete
  33. Itu dia.. Ane juga buka situs ini, kirain situs ini ngajarin membuat motif atau gradien pada outline...

    Kalo outline gini doang si,, ane juga bisa gan...

    ReplyDelete
  34. terimakasih sangat membantu

    ReplyDelete
  35. terimakasih sangat membantu

    ReplyDelete
  36. Ngebayangin bisa jadi inspirasi juga :D

    ReplyDelete
  37. Luthfy Yandi AlfariziFebruary 1, 2016 at 11:40 AM

    cara intersect nya gimana,soal nya agak bingung..???

    ReplyDelete
  38. Langsung ke poin Intersect
    pada link berikut

    http://www.desainerindonesia.net/2013/07/cara-memotong-foto-di-corel-draw.html

    ReplyDelete
  39. Terimakasih.

    ReplyDelete
  40. ada rekomendasi buat font flat design? selain bebas neue, geo light, baron neue..
    Kalo bisa rekomendasi font flat design buat UI kaya gambar Sun Bzy

    ReplyDelete
  41. ini yang kayak Sun Bzy
    - Bariol Font (versi free dapat reguler sama italic saja) (premium font)
    - Moon Font (dapat uppercase bold dan light)

    Mungkin yang lain
    - Tw Cen Mt Font
    - Hero Light + Regular

    ReplyDelete
  42. kenapa ya corel saya tidak bisa intersect gambar bitmap ada yang salah kah dengan coel saya? atau ada yang salah dengan proses saya. saya mau memotong gambar bitmap sesuai dengan objek yang telah saya gambar di corel

    ReplyDelete
  43. mungkin terletak pada proses ?
    jadi acuanya adalah gambar bitmap maksutnya ?
    coba anda kirim cara anda saat saat proses intersect, nanti saya akan identifikasi kesalahanya...
    #terimakasih

    ReplyDelete
  44. bang, mau tanya, saya mengedit gambar bitmap (misal foto) menggunakan coreldraw kenapa setelah saya export ke JPG malah warnanya menjadi hitam, kalau di export ke png sama seperti di lembar kerja coreldraw. itu saya lampirkan capturenya, Nah file JPG tadi kalau di buka dengan photoshop atau paint akan seperti file PNG, saya bingung bang.

    ReplyDelete
  45. 1. Coba kasih background lagi, backgroud lebihan warna putih di belakangnya? lalu export

    2. coba atur Matte ke putih saat export, :D tetapi saya rasa bukan ini permasalahanya :D

    3. Coba buka pake viewer yg berbeda lain Windows photo Viewer, misal Picasa..

    4. Coba buat dokumen baru ctrl + N lalu copy itu ke dokumen baru, dn export.

    5. jika tidak bisa, coba anda tnyakan lagi ke forum atau grup2 pengguna coreldraw misal di facebook, dll. terimakasih

    ReplyDelete
  46. Fashhan Adilla RahmanJuly 31, 2016 at 10:54 AM

    Gan, kalau desainnya keluar lembar kerja, biar di export ke jpeg atau png jadi gambarnya hanya didalam lembar kerja aja. gimana ya?

    ReplyDelete
  47. Hi Fashhan Adila R.

    Selamat pagi,
    Maksud anda adalah export desain pada halaman lembar kerja saja tanpa desain yang ada diluar lembar kerja?
    Coba centang "Selected Only" saat dialog export muncul jangan lupa seleksi terlebih dahulu desian apa yang mau di export didalam lembar kerja.

    Atau gunakan Crop Tool , caranya select semua desain diluar dan didalam lembar kerja, lalu Crop seperti bentuk lembar kerja anda.

    masih tidak dapat menemukan jawaban yang tepat?
    Silahkan bertanya kembali.
    Terimakasih.

    ReplyDelete
  48. Saya sudah mengekspor gambar, tapi saat di kirim ke handphone malah tidak ada gambar

    ReplyDelete
  49. Mungkin ukuran gambar atau file size yang terlalu besar. Soalnya saya pernah gitu juga.

    ReplyDelete
  50. Gan, ane pake x7,
    saya eksport gambar ke JPG pake high untuk di tampilkan di TV flat screen 14" hasilnya jadi blur,
    bisa di screenshot nggak gan setingan yg optimal buat itu biar gambarnya tidak blur di TV.

    Makasih gan.

    ReplyDelete
  51. Biasanya untuk export maksimal pemilihan opsi quality adalah Highest, namun hightest quality jadi baik jika resolusi itu tinggi, misal 2500px.


    https://uploads.disquscdn.com/images/01dff3fea947f95dfff7ff552ad1d6986b794bc9d6efcd0f402859198bfa7378.png

    ReplyDelete
  52. Terima Kasih atas informasinya . sangat membantu dan sangat bermanfaat untuk dipelajari . semoga semua juga sepertiiyu . sukses selalu

    Jangan lupa kunjungi website kami http://flashcomindonesia.com/kursus-coreldraw-di-surabaya.html

    ReplyDelete
  53. Min, mau tanya kenapa gambar yg mau saya save itu kosong alias 0 byte ?
    alias di tampilan window filter dialog JPG.
    gambar hasil kerja saya gak muncul

    mohon pencerahannya

    ReplyDelete
  54. tutorialnya bermanfaat gan// terima kasih banyak..//

    ReplyDelete
  55. Aaroniero ArruruerieNovember 10, 2016 at 12:50 PM

    bermanfaat

    ReplyDelete
  56. bang mau tanya kalo ane mau nyetak jadi banner di daerah ane ,ane malah diharuskan export jpg RGB dari pada CMYK ,nah untuk RGB Progresiv n optimize enak di centang atau ga usah duaduanya? mksh

    ReplyDelete
  57. Kutip "Progressive is an alternative method of loading where the entire image is displayed but gets better and better in quality as it loads; if you've never seen progressive encoding on images, you may recognise it as the way satellite maps often load as you zoom into locations. "
    Source: https://support.corel.com/hc/en-us/articles/215926428-The-Basics-of-Saving-Files-in-PaintShop-Pro

    Klihatanya tidak perlu dicentang karena kedua opsi tersebut untuk Enhanced Web Graphics

    Source:http://www.coreldraw.com/en/pages/items/1200085.html

    ReplyDelete