Yukk, mengenal Flat dan Skeuomorphism Design pada User Interface, wajib tau!

Beranda
Komunitas
Entertainment
The Lounge
Yukk, mengenal Flat dan Skeuomorphism Design pada User Interface, wajib tau!

seLeketeb

02-06-2014 18:04

Yukk, mengenal Flat dan Skeuomorphism Design pada User Interface, wajib tau!

Sebelumnya makasih udah mampir(walau terpaksa) emoticon-Malu (S)

melalui trit ini ane mau membahas tentang Flat dan Skeuomorphism Design pada UI / User Interface. langsung aja (bacanya pelan-pelan) gan emoticon-Big Grin

Quote:

Saat ini setiap kita melihat desain web ataupun icon pada tampilan smartphone semua mengusung “Flat design” atau Disain datar, dan itu smua muncul beberapa tahun trakhir, dan tampaknya desain “datar” merubah perusahaan besar dan organisasi mengubah estetika desain yang tadinya serupaa 3d menjadi desain datar.

Quote:

Tapi dari mana desain datar berasal? Dan mengapa kita melihatnya di Web? Seperti apapun dalam desain , mengetahui di mana gaya atau teknik berasal dan sejarah di balik itu.

Mari kita berjalan melalui apa desain flat , pengaruhnya dari periode desain sebelumnya , dan bagaimana desain datar menjadi begitu populer saat ini .

Apa sebenarnya adalah " desain flat? "

Bagi kita yang belum pernah mendengar istilah , "Flat " terutama istilah yang diberikan dengan gaya desain di mana elemen iini kehilangan jenis karakter gaya yang tadinya membuat mereka tampak seolah-olah terangkat dari halaman .

Dengan kata lain karakter seperti bayangan , gradien , tekstur , dan jenis lain dari desain untuk membuat elemen terasa tiga dimensi semua dihilangkan

Sejak kapan desain datar atau flat itu muncul?

Cikal bakal Flat itu berasal dar The Swiss Style ( kadang disebut International tipografi Style ). desain ini adalah desain dominan sepanjang tahun 1940-an dan 1950-an berasal di Swiss.

Spoiler for Swiss:

Quote:

Sejarah berulang dengan sendirinya, dan hal yang sama berlaku dengan saat ini tren desain datar. Seperti yang kita lihat di atas, ditelusuri kembali sampai ke tahun 1940-an dan telah mempengaruhi adaptasi kita saat ini dengan desain datar.

Adalah Microsoft sang pembangkit desain 'flat' cukup populer selama beberapa tahun terakhir. Dengan menghadirkan Windows 8 yang mengusung “Metro UI” dan bisa kita lihat sendiri:
Keidentikan Flat design atau disain datar tak lepas dari corak warna warni yang memanjakan mata

Spoiler for W8:

Meskipun awalnya banyak cemoohan atau respon yang kurang dari banyak kalangan mengenai tampilan yang “sederhana (flat)”.
dan ini tampilan Windows Phone 8 yang juga menggunakan desain Flat:

Spoiler for MetroUI:

Quote:

Dan seperti yg udah kita ketahui belum lama update iOS7 pun ikut mengusung tampilan Flat untuk Iphone nya:

Spoiler for ipon:

sebelah kanan ios7

Quote:

dikutip dari idwinphone.c*m

Windows Phone Kiblat Baru Smartphone?

Spoiler for Wp8:

artinya : "Imitasi adalah bentuk pujian terbaik"

Berbicara desain Flat/ datar Awal kemunculan WindowsPhone memang tak semulus paha cherrybelle, banyak orang tiak suka dengan desain Flat dan kotak kotak ubin WC yang dipakain WP7/8, namun seiring berjalannya waktu perlu kita ketahui justru belakangan ini disain tersebut manjadi 'kiblat' era smartphone sekarang.

LUMIA WANNABE

Spoiler for wannabe:

METRO UI WANNABE

Setelah penampilan luar yang menginspirasi smartphone lain, dalemannya juga ternyata menginspirasi banyak smartphone. Dan yang terbaru adalah antar muka smartphone Android Acer Liquid Z5, baru saja diperkenalkan 22 Januari kemaren. Jika kamu perhatikan gambar dibawah kamu akan merasa Smartphone Acer sangat terinspirasi oleh Metro UI milik Windows Phone.

Spoiler for wannabe2:

Antar Muka Smartphone Android Acer Liquid Z5 Terinspirasi Antar Muka Windows Phone?

Jika ditelusuri lebih jauh, kamu akan menemui antar muka ala Windows Phone juga bisa ditemui di smartphone berbasis Android lainnya seperti “Blink Feed” dari HTC maupun antar muka Huawei di seri Ascend.

Spoiler for wannabe3:

Bahkan Samsung juga seperti kena tudingan serupa, mayoritas pembaca situs Phandroid.com (64%) sepakat tampilan Magazine di jajaran Tablet terbaru Samsung di 2014 ini terinspirasi oleh Metro UI milik Windows Phone.

Spoiler for wannabe4:

FLAT DESIGN DIIKUTI DENGAN BERUBAHNYA LOGO BERIKUT:
agan pasti tau logo ini emoticon-Ngakak

Spoiler for gobleh:

Logo google berubah jadi flat (atas) dan logo Chrome juga jadi flat (kanan)

Spoiler for firepok:

dan terlihat logo firefoxpun jadi flat.

Emang sebelumnya nama desainnya apa sebelum Flat Design populer?

Sebelumnya dan masih dipakai saat ini adalah Skeuomorphism gan.

Apa sebenarnya yang dimaksud Skeuomorphism ?
Skeuomorphism merupakan prinsip desain (sering diterapkan pada desain User Interface) yang meminjam bentuk-bentuk dari fitur di dunia nyata yang sudah ada sejak lama, meskipun kebutuhan fungsionalnya tidak ada sama sekali. Tujuan utamanya adalah untuk membangkitkan ingatan akan dunia nyata dan membuatnya lebih familiar bagi user. Contohnya adalah seperti gambar di bawah ini :

Spoiler for Skeu:

Quote:

Quote:
Sebaliknya, Flat design (read : Mengenal flat design ) menawarkan gaya yang minimalis, menghindari tekstur dan efek pencahayaan serta menggunakan warna yang datar. Contohnya yaitu :

Spoiler for Flat:

terus?

Flat Design dan Skeuomorphism memiliki Kekurangan dan kelebihan:

Quote:

Kelebihan Gaya Skeuomorphism :

- Interface Skeuomorphism Mudah Menjadi Familiar bagi Pengguna
Setiap pengguna menginginkan kesan familiar ketika mereka melihat sebuah tampilan baru. Bayangkan saat Anda duduk di kokpit pesawat untuk pertama kalinya dan mencoba menerbangkan pesawat. Anda mungkin akan kebingungan, tetapi pilot yang terlatih dapat terbang dengan berbagai jenis pesawat karena mereka akrab dengan ruang kendali tersebut.

- Kaya secara Visual dan Menarik
Bila dibandingkan dengan desain minimalis, ada nilai lebih pada segi visual pada desain Skeuomorphism, sehingga dapat menambah user experience yang sangat menarik.

Kelebihan Flat design :
-        Flat design menempatkan penekanan pada konten dan pengguna tanpa bergantung pada metode lama. Flat design juga cocok untuk teknologi responsif karena menggunakan lebih sedikit tekstur / gambar.
-        Flat design membuat desainer lebih fokus pada struktur yang jelas dan kegunaan yang baik.
-        Membuat proses design dan pengkodean lebih cepat karena ada efek yang dikurangi untuk itu.
-        Tidak hanya cepat dalam desain dan pengkodean , yang paling penting itu penggunaan flat design membuat beban menjadi lebih cepat pada aplikasi / perangkat mobile sebab menggunakan bandwidth yang lebih sedikit.

Kelemahan Gaya Skeuomorphism :
-        Interface Skeuomorphism kadang Menghambat Usability
Kadang-kadang, menggunakan gaya Skeuomorphism tidak selalu efisien bagi aplikasi Anda. Sebagai contoh sebuah aplikasi mungkin membutuhkan 3 hingga 4 kali sentuhan jari untuk sesuatu yang sebenarnya dapat dilakukan dengan sekali tekan.
-        Dapat Menghabiskan Ruang pada Layout Secara Berlebihan
Desain Skeuomorphism yang memiliki gambar atau hiasan berlebihan pada dasarnya hanya membuang-buang tempat pada layar bagi beberapa pengguna, terutama bagi pengguna ponsel dengan layar sempit.
-        Berpotensi untuk Ketinggalan Jaman dalam Waktu Singkat
Sama halnya pada bidang fashion. Semua antarmuka pengguna, tidak peduli semodern dan sekeren apapun aplikasi itu terlihat saat ini, akan terkesan tua dan ketinggalan jaman.

Kelemahan Flat design :
-        Flat design kadang berpotensi membingungkan pengguna. Warna dan kontras yang digunakan perlu dipertimbangkan dengan cermat sehingga tombol atau icon yang digunakan untuk tindakan/navigasi tertentu dapat dipahami dengan baik oleh user.
-        Karena prinsip flat design adalah minimalis, orang sering menganggapnya terlalu sederhana. Beberapa orang berpikir bahwa situs web / aplikasi mobile yang sederhana tersebut bukan ide yang baik karena harus cukup ramai untuk menarik pengguna.
Tak satu pun dari prinsip desain yang sempurna. Selanjutnya dari persepsi designer itu sendiri apakah lebih nyaman dalam menggunakan prinsip skeuomorphism atau Flat design, asalkan desain yang dibuat sesuai dengan kebutuhan dan memiliki kegunaan yang baik.

Coba dong bandingin gambar Flat dan Skeu apa namanya,

Skeuomorphism , gan

Quote:

Skeuomorphism VS Flat Design

Spoiler for FvsS:

et sory gan salah emoticon-Big Grin

nih yang bener

Spoiler for SvsF:

Skeu vs Flat

Spoiler for FvsS:

Terus site yang dulunya Skeu terus berubah jadi flat ada gak contohnya?

Ada dong, ini : emoticon-Big Grin

Dan ini adalah contoh site yang dulunya bergaya Skeuomorphism kemudian beerubah menjadi Flat :

dulu (Skeu)

Spoiler for kompasDulu:

Sekarang (Flat)

Spoiler for KompasSekarang:

Bahkan kaskus tercinta kita juga menggunakan Flat Design gan emoticon-Big Grin

masa? mana mana? emoticon-Bingung (S)

nih gan :

Quote:

Spoiler for kaskus:

Spoiler for KaskusSekarang:

liat gan kaskus sekarang udah flat semua emoticon-Matabelo

Quote:

Jadi gak usah komplen ya gan dengan tampilan kaskus yang sekarang, karna ya memang tampilan flat menjadi pilihan tepat dan mengikuti perkembangan jaman

Spoiler for Sumur:

Sumber

Sumber

Sekian dari ane, semoga bermanfaat emoticon-Big Grin

Lemparin ane
emoticon-Blue Guy Bata (L)

jangan lupa

Spoiler for Komeng:

ane doain yang komeng dapet beginian

Spoiler for beginian:

monggo kalo ada yang mau nambahin, nanti ane pajang di pejwan emoticon-Big Grin

Quote:

Original Posted By ariopoaji►setelah flat desain kaya gmn ya ntar?
apa nanti di user interfacenya jadi 1 warna semua emoticon-Hammer2

mungkin transparan gan emoticon-Big Grin

Quote:

Original Posted By kaminomi.senpai►ini desain desain yang ane suka banget minimalis emoticon-Big Grin

nyaman dan enak juga dipandang emoticon-Peace

iya gan ane juga suka, karena terkesan lebih gesit emoticon-Ngakak

Quote:

Original Posted By juniorkaskuser►tapi ane ko lebih suka Design Skeuomorphism ya ? Hehe emoticon-Malu

berarti ente gak suka tampilan kaskus sekarang ya? emoticon-Ngakak

Quote:

Original Posted By Dretzz►yg skeu jadi kelihatan jadul yaa emoticon-Big Grin

wah iya ya kaskus jd flat semua tampilannya.

betuul sekali, ane juga mikirnya jadi kelihatan jadul emoticon-Big Grin

Quote:

Original Posted By ReinhardRawel►Ane penasaran desain UI yang bakal populer setelah flat dan metro UI emoticon-Confused

Tapi ane masih demen sama flat dan metro, simpel dan enak dipandang emoticon-Big Grin

Transparent UI gan setelah flat emoticon-kisssing

Quote:

Original Posted By gogorizqal►bagus nih gan pembahasannya

semoga HT ya gan
emoticon-Rate 5 Star

iya gan makasih jangan lupa rate 5 emoticon-Ngakak

Quote:

Original Posted By fandan►oh namanya Gaya Skeuomorphism
ane udh nyari2 dari dulu namanya gaya apaan emoticon-Ngakak (S)

banyak sebener nya yg make ginian ya ..

makasih mas gan emoticon-Matabelo

nahh untungnya ente masuk ke trit ane emoticon-Ngakak

Quote:

Original Posted By Adityus►Emnk hasil karya dengan tehnik design ini emnk unik gan.! Simpel, g terkesan lebay, n berasa sedep aja klo dipandang mata.. emoticon-Malu (S)

bener gan flat itu irit bandwith lho, jadi irit kuota juga emoticon-Ngakak

Quote:

Original Posted By mr.dududd►tampilan Flat memang sudah berada dimana" gan,
soalnya selain Flat , itu juga userfriendly themenya ,

sehingga membuat orang lebih tertarik lagi kepada website" yang menggunakan Theme yang Flat & UserFriendly . emoticon-Malu (S)

betul gan, terkesan lebih fresshh.. emoticon-Cendol (S)

Quote:

Original Posted By mr.ejaa►tapi kalo kata ane sih jadul is not bad

Quote:

Original Posted By iz66731►triit ente mantap dah gan

jangan lupa di rate 5 gan emoticon-Big Grin

Quote:

Original Posted By john2w► emoticon-Rate 5 Star

Quote:

Original Posted By wiorestia►yg flat lbh adem.. emoticon-Matabelo

btw ntu ane ogah akh bonus "yg komeng" dr ente.. emoticon-Najis

bonusnya bukan si komengnya gan emoticon-Big Grin

Quote:

Original Posted By asyshahid►wah jadi tau ane kenapa kaskus merubah tampilannya emoticon-Matabelo

iya gan, biar lebih enteng buka kaskusnya emoticon-Ngakak

Quote:

Original Posted By KaktusKecil►Sangat mencerahkan, bray... Cek Kulkas yah... emoticon-Blue Guy Cendol (L)

makasih gan emoticon-Ngakak

Quote:

Original Posted By orang-kurus►calon HT emoticon-Angkat Beer

Quote:

Original Posted By romyalfarezy► Flat design
desainnya bagus emoticon-Belo

beehh sepii trit ane dengan cepatnya trit ane ini tenggelam diterjang trit "REKENING GENDUT", "BERAWAL DARI MAIN GAME KASKUSER INI..Bla..blaaa.."

kecuali agan masuk trit ini, komeng, rate

update gan

Tambahan dari kaskuser :

Quote:

Original Posted By javanesse►Macintosh osx terbaru 10.10 yosmite jg flat gan

Osx Tiger 10.5