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


75 C

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

maksutnya yang a little thing called love ?

coba screenshot nya ?


atau reinstall corelnya lagi

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

sangat menginspirasi

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

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

Thanks info ny. Mantap.

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

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

Sandia Wira Permana delete July 29, 2015 at 1:29 PM

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

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

karena resolusi gambar semakin kecil kalau gambar diperkecil ?


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

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

Keren - keren gan..,

Flat designnya keren-keren
Salam
UPVC

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

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

Coba aktifkan opsi ini, semoga membantu.

Makasiih banyak min. Manjur sekali.

sama-sama, silahkan jika mengalami masalah.

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

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

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

Oh begitu, terima kasih banyak (y)

nama font "First" diatas apa ya?

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

makasih mas sangat membantu,,,,ini aku lg mulai belajar corel

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

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

saya suka font "DESAINER INDONESIA" itu font apa ya??

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

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

terimakasih sangat membantu

terimakasih sangat membantu

Ngebayangin bisa jadi inspirasi juga :D

Luthfy Yandi Alfarizi delete February 1, 2016 at 11:40 AM

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

Langsung ke poin Intersect
pada link berikut

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

Terimakasih.

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

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

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

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

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.

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

Fashhan Adilla Rahman delete July 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?

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.

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

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

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.

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

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

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

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

bermanfaat

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

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

Coba lakukan Publish to PDF dan lakukan cetak,
apakah foto masih tidak tercetak?
terimakasih.

https://uploads.disquscdn.com/images/a9eb185d2d7d6c7987b9477ed4bd03a1055d0ee547f4f9e26238715d95be7c50.png