Hobby
Batal
KATEGORI
link has been copied
76
KASKUS
51
244
https://www.kaskus.co.id/thread/5136d6f8611243cf2b000006/share-konsep-dasar-desain-ui-ux-gui-website-mobile-app-dll
Hi, saya di sini ingin membagi sedikit pengetahuan saya mengenai konsep dasar Desain User Interface untuk Web ataupun Mobile App karena banyaknya yang menanyakan 'gimana sih cara desain web' ? Konsep ini ditujukan untuk pemula dan apabila sudah merasa advance, mohon maaf kiranya kalau tulisan saya tidak terlalu berbobot. Introduction Kenapa Membahas Web dan Mobile App? Karena pada zaman sekarang i
Lapor Hansip
06-03-2013 12:41

[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)

Hi, saya di sini ingin membagi sedikit pengetahuan saya mengenai konsep dasar Desain User Interface untuk Web ataupun Mobile App karena banyaknya yang menanyakan 'gimana sih cara desain web' ? Konsep ini ditujukan untuk pemula dan apabila sudah merasa advance, mohon maaf kiranya kalau tulisan saya tidak terlalu berbobot.

Introduction

Kenapa Membahas Web dan Mobile App?
Karena pada zaman sekarang ini adalah zamannya teknologi , gadget, penyebaran informasi melalui internet, social media, bisnis online dan sebagainya. Banyak perusahaan (terutama di luar negri) yang mulai menggunakan sarana internet untuk menunjukkan eksistensinya seperti pembuatan website perusahaan, aplikasi iphone , android, dll.

Desain User Interface
Untuk perancangan sistem dan dan pembangunan aplikasi sendiri biasanya dikerjakan oleh programmer dan Web Developer/App Developer , nah bagaimana dengan tampilan grafisnya ? Siapa yang merancang Front-End Design nya? Apa yang perlu dipertimbangkan dalam perancangan antarmuka aplikasi dengan Client? Bagaiman agar tampilan antarmuka menyenangkan untuk user (nyaman dipandang mata) dan mudah digunakan (user-friendly) ? Tentu itulah tugas kita sebagai Designer. emoticon-Smilie

Web UI

Untuk belajar melayout Website, hal pertama yang perlu diketahui adalah apa saja Elemen-elemen dalam web, kemudian setelah mengenal elemen-elemen web, perancangan wireframe (meliputi layout dan user experience). Setelah perancangan wireframe, selanjutnya adalah merancang tampilan GUI (Meliputi Warna, Pemilihan Fonts dan lain2).

Mengenal Elemen-Eemen dalam Web
Perancangan Wireframe
Perancagan GUI


Mobile App UI
Sebenarnya konsep desainnya hampir sama dengan Web UI, akan tetapi ada beberapa hal yang perlu diketahui dalam designing Mobile App UI:

User Gesture : pertimbangkan berbagai macam interaksi user yang memungkinkan misalnya Swipe, Slide, Pitch, Rotate sebelum merancang UI.
"user gesture"


Layouting : pertimbangkan dimana meletakkan Menu app , apakah di bawah, disimpan di samping (user harus menekan tombol tertentu untuk memunculkan menu) ,dsb.
"Wireframe"


Effectiveness :Lalu pertimbangkan screen mobile yang kecil, sesuaikan ukuran item-item agar mudah digunakan, misal fonts yang tidak terlalu kecil, tombol yang agak besar untuk memudahkan user menekan tombol (ingat jari orang beda-beda).

Viewable Screens : bagaimana jika app tersebut dilihat dari vertical view dan horizontal view.
"Viewable Screens"


Compatibility : Sesuaikan size desain Anda dengan device yang akan digunakan, misalnya untuk iphone 5 ukuran 1136x640-pixel dengan resolusi 326 ppi, untuk ipad 2048x1536 dengan resolusi 264 ppi. Hal ini akan memudahkan developer nantinya untuk membangun app tersebut.
Diubah oleh leyayumi
profile-picture
profile-picture
restusaputera19 dan Sikamari memberi reputasi
2
Tampilkan isi Thread
Masuk atau Daftar untuk memberikan balasan
Halaman 5 dari 6
Post ini telah dihapus oleh babanbe
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
10-01-2017 11:14
Halo agan-agan, mau tanya nih. Agan-agan di sini kalo bikin presentasi prototype UI/UX ke client bentuk apa ya?
Apa dibikin video apa gimana gan? Ane sering bingung kalo masalah pas presentasi gini. Ane sih biasanya gambar aja atau kl memungkinkan ane bikin GIF biar keliatan gerak. Tapi kok kayaknya kurang sip emoticon-Big Grin
Mungkin ada masukan dari agan2 di sini.. Thanks emoticon-Angkat Beer
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
14-01-2017 02:55
Wah nemu thread yang bagus banget, tapi kenapa sepi ya... emoticon-Embarrassment Btw ane daridulu pengen banget nih menggeluti bidang ini, tapi pendidikan dasar ane dari DKV (desain grafis) yang gak ada mata kuliah User Experience.
Kira2 ane perlu kuliah lagi atau cukup kursus2 aja gitu untuk mendalami interaction design kayak gini? emoticon-Malu
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
02-03-2017 12:22
wah ternyata ada trit khususnya yah
ane sendiri bener2 nubie yg baru tahap perkenalan dgn UI/UX design ini

kmaren ane dapet loker yg nyari designer UI/UX tapa mengharuskan kemampuan web developper (coding)
sayang sekali ane gagal karna design ane dianggap terlalu websentris emoticon-Frown emoticon-Frown emoticon-Frown

yah sebagai pelajaran, ane memang kudu lebih byk belajar lagi emoticon-Big Grin
Diubah oleh MacZFreak
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
03-03-2017 14:23
Quote:Original Posted By MacZFreak
wah ternyata ada trit khususnya yah
ane sendiri bener2 nubie yg baru tahap perkenalan dgn UI/UX design ini

kmaren ane dapet loker yg nyari designer UI/UX tapa mengharuskan kemampuan web developper (coding)
sayang sekali ane gagal karna design ane dianggap terlalu websentris emoticon-Frown emoticon-Frown emoticon-Frown

yah sebagai pelajaran, ane memang kudu lebih byk belajar lagi emoticon-Big Grin


yang bener mah emang gitu, UI/UX fokus di design baik tampilan maupun sistem flownya, gak nge coding
kerjanya pasti team
kalo ada perusahaan yang jobdesknya rangkap, kalo gajinya gak rangkap juga mah jangan mau emoticon-Malu
Diubah oleh Koboy.Cihuuuy
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
03-03-2017 15:10
Quote:Original Posted By Koboy.Cihuuuy


yang bener mah emang gitu, UI/UX fokus di design baik tampilan maupun sistem flownya, gak nge coding
kerjanya pasti team
kalo ada perusahaan yang jobdesknya rangkap, kalo gajinya gak rangkap juga mah jangan mau emoticon-Malu


masalahnya kebanyakan lowongan kerja UI/UX Designer itu disertai (req) kemampuan coding (mysql, java, html dan temen temenya emoticon-Big Grin )
kmaren seneng bgt tuh pas dapet loker yg mencantumkan "tidak harus bisa coding" emoticon-Big Grin padahal kerjain design aja juga ga gampang, belom lagi mikirin sistem flownya, logika kudu jalan juga nih emoticon-Big Grin
tp tetep gagal, btw ada yg tau maksudnya WEBSENTRIS?
atau ada yg bisa ngejelasin soal type design yg websentris dan jenis lainnya?
Diubah oleh MacZFreak
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
03-03-2017 15:57
Quote:Original Posted By MacZFreak


masalahnya kebanyakan lowongan kerja UI/UX Designer itu disertai (req) kemampuan coding (mysql, java, html dan temen temenya emoticon-Big Grin )
kmaren seneng bgt tuh pas dapet loker yg mencantumkan "tidak harus bisa coding" emoticon-Big Grin padahal kerjain design aja juga ga gampang, belom lagi mikirin sistem flownya, logika kudu jalan juga nih emoticon-Big Grin
tp tetep gagal, btw ada yg tau maksudnya WEBSENTRIS?
atau ada yg bisa ngejelasin soal type design yg websentris dan jenis lainnya?


iya biasanya perusahaan yang maunya bayar seorang untuk jobdesk 2 orang emoticon-Big Grin
UI/UX aja sama pemograman jalur kuliahnya udah beda jauh emoticon-Big Grin

ane gak tau, karena gak liat hasil kerjaan ente yg dibilang websentris
mungkin cuma istilah2an aja dipake untuk bilang desainnya terlalu kaku, kayak web pada umumnya? (well, jaman UI/UX designer belum ngetrend, biasanya tampilan web di urus sama yg ngoding juga biasanya alhasil dulu sebutan web desainer itu melekat juga kepada orang yg ngerjain web tanpa latar belakang desain, layout2 yang dihasilkanpun berkesan kaku kalo dibilang untuk jaman skr, bener2 desain2 web tahun 2008an kebawah kali kalo diitung tahun)

UI/UX ngetrend setelah ada ios&android, terutama produk2 apple dimana user interfacenya ramah bagi pengguna, gak bingung saat pertama kali make dan user experiencenya bener2 berbeda feel yang didapat karena workflownya beda sama yang lain.
kalo di aplikasiin di website, UI/UX tentu point2nya ada di layout, pemilihan warna, yang bikin user interfacenya menarik, UX lebih susah lagi karena harus mikirin workflow yang berdapak pada user.
contoh paling gampang, beberapa situs jualbeli UXnya rada-rada membingungkan user untuk melakukan proses jual-beli, bisa dibilang UXnya gagal berarti emoticon-Big Grin
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
04-03-2017 09:25
Quote:Original Posted By Koboy.Cihuuuy


iya biasanya perusahaan yang maunya bayar seorang untuk jobdesk 2 orang emoticon-Big Grin
UI/UX aja sama pemograman jalur kuliahnya udah beda jauh emoticon-Big Grin

ane gak tau, karena gak liat hasil kerjaan ente yg dibilang websentris
mungkin cuma istilah2an aja dipake untuk bilang desainnya terlalu kaku, kayak web pada umumnya? (well, jaman UI/UX designer belum ngetrend, biasanya tampilan web di urus sama yg ngoding juga biasanya alhasil dulu sebutan web desainer itu melekat juga kepada orang yg ngerjain web tanpa latar belakang desain, layout2 yang dihasilkanpun berkesan kaku kalo dibilang untuk jaman skr, bener2 desain2 web tahun 2008an kebawah kali kalo diitung tahun)

UI/UX ngetrend setelah ada ios&android, terutama produk2 apple dimana user interfacenya ramah bagi pengguna, gak bingung saat pertama kali make dan user experiencenya bener2 berbeda feel yang didapat karena workflownya beda sama yang lain.
kalo di aplikasiin di website, UI/UX tentu point2nya ada di layout, pemilihan warna, yang bikin user interfacenya menarik, UX lebih susah lagi karena harus mikirin workflow yang berdapak pada user.
contoh paling gampang, beberapa situs jualbeli UXnya rada-rada membingungkan user untuk melakukan proses jual-beli, bisa dibilang UXnya gagal berarti emoticon-Big Grin


awalnya perusahaannya ngirimin desain awal, yang kemudian ane disuruh lanjutin
desain awal


ane bikin design ini sebagai jawaban
jawab


katanya kesalahan ane fotal,
makanya ane mau blajar disini berharap ada yg bisa nunjukin detil kesalahan ane. biar kedepannya bisa lebih baik lagi emoticon-Big Grin

mohon bimbingan emoticon-Smilie
Diubah oleh MacZFreak
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
05-03-2017 11:21
Quote:Original Posted By MacZFreak


awalnya perusahaannya ngirimin desain awal, yang kemudian ane disuruh lanjutin
desain awal


ane bikin design ini sebagai jawaban
jawab


katanya kesalahan ane fotal,
makanya ane mau blajar disini berharap ada yg bisa nunjukin detil kesalahan ane. biar kedepannya bisa lebih baik lagi emoticon-Big Grin

mohon bimbingan emoticon-Smilie


mungkin yang kayak gini
- If user choose Now, a map will show the offices based on the service he chose
- If user choose Later, user need to choose the date range.

enaknya dibikin mockup flownya/ mockup video gif
contoh

jadi tau kalo choose now>langsung masuk ke scene map
pake mockup video lebih bagus lagi, karena bakal bisa ngasih liat motionnya (optional aja, belajar after effect gak nyampe seminggu juga biasanya udah bisa bikin ginian karena cuma pake tools2 dasar)

terus kalo misalnya choose "Later" di pic 2, keliatannya yang ditap itu "back"> nyambung ke pic 3 choose date range.
kalo bisa sih klien dibikin easy memahami wireframenya, kalo kita yang bikin sih, udah pasti kita sendiri tau, tp kalo orang lain yang liat? belum tentu mereka ngerti juga emoticon-Smilie

option choosenya juga, semuanya ditampilin di 1 page, khas2 web emoticon-Big Grin, kesannya penuh banget numpuk
option2nya juga bisa dimainin, kayak per page 1 option (best,disertai page pemaparan kenapa di buat seperti itu)
profile picture gak harus di semua page nongol
text paling atas contrastnya agak kurang, terutama yg tulisan service&summary (inget UX, jangan sampai klien mengalami bad experience karena harus mengerutkan dahi untuk bisa membaca sesuatu emoticon-Big Grin)
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
13-03-2017 10:05
banyak juga yah yang nyari ini thread ini emoticon-Big Grin

gimana kalo ada yg buat thread khusus UI/UX ? berguna kayaknya emoticon-cystg
0 0
0
Post ini telah dihapus oleh babanbe
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
19-03-2017 11:13

Tanya tempat kursus UI/UX Jakarta

Gan ada yg tau tmpat kursus UI/UX di jabodetabek? trims
0 0
0
Post ini telah dihapus oleh babanbe
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
26-03-2017 08:57
Quote:Original Posted By nudhame
Gan ada yg tau tmpat kursus UI/UX di jabodetabek? trims


kalo punya basic design, mending langsung masuk industri game/apps
lamar jadi junior, ato kalo emang mau belajar tanpa bayar, sabet aja kalo ada lowongan intern
langsun belajar keperluan diindustrinya
web developer juga bisa, tapi gak tau ente bakal dapet proyek yang gimana emoticon-Big Grin
yang bergerak di apps, biasanya develop 1 app 1thn-6bln-3bln tergantung appsnya (makro-medium-mikro)

soalnya jarang kayaknya kursus UI/IX
seandainya ada pun kayaknya, maaf, mungkin "rada-rada"
kalo mau belajar yang uptodate sih mending intern/lamar junior ui/ux
0 0
0
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
30-03-2017 23:34
Quote:Original Posted By nudhame
Gan ada yg tau tmpat kursus UI/UX di jabodetabek? trims


Quote:Original Posted By Koboy.Cihuuuy


kalo punya basic design, mending langsung masuk industri game/apps
lamar jadi junior, ato kalo emang mau belajar tanpa bayar, sabet aja kalo ada lowongan intern
langsun belajar keperluan diindustrinya
web developer juga bisa, tapi gak tau ente bakal dapet proyek yang gimana emoticon-Big Grin
yang bergerak di apps, biasanya develop 1 app 1thn-6bln-3bln tergantung appsnya (makro-medium-mikro)

soalnya jarang kayaknya kursus UI/IX
seandainya ada pun kayaknya, maaf, mungkin "rada-rada"
kalo mau belajar yang uptodate sih mending intern/lamar junior ui/ux


Bener kata agan ini, kalau mau belajar UI/UX mending langsung cari kerja aja. Di Indonesia masih rada-rada.
Jangan ikut kursus buang-buang duit. Asal ada sedikit keahlian di dibidang desain terutama photoshop/sketchapp/adobeXD sama web atau apps.. gampang kok ngelamar jadi Junior..

Sekedar referensi untuk UI/UX sih biasanya ane nyari di Dribbble, behance, medium atau youtube.

dan sering2 show off aja.. biar banyak yang kritik emoticon-Shakehand2
Diubah oleh rinaldysam
0 0
0
Post ini telah dihapus oleh babanbe
Post ini telah dihapus oleh babanbe
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
13-04-2017 02:52
ane baru tau ada thread beginiaan..

bakal mejeng disini deh emoticon-Big Grin


Quote:Original Posted By nudhame
Gan ada yg tau tmpat kursus UI/UX di jabodetabek? trims


ikut2 workshop http://uxindo.com/training-ux-indonesia/

kalo mmg mau buang2 duit, ke singapur aja gan sekalian emoticon-Wink

0 0
0
Post ini telah dihapus oleh babanbe
[Share] Konsep Dasar Desain UI, UX, GUI (Website, Mobile App, dll)
04-06-2017 17:35
gila ini thread 2 bulanan sepi, yuk ramein hehe
kebeneran skrg gw di kantor di pivot dari graphic designer jadi UI/UX designer huhuhu.

Btw pada wireframing di sketch atau XD? dan klo bikin apps android boleh gak sih gk ikutin https://material.io tp pake apple element? emoticon-Wowcantik
0 0
0
Halaman 5 dari 6
icon-hot-thread
Hot Threads
obrolan-hangat-logo
Obrolan Hangat
Copyright © 2021, Kaskus Networks, PT Darta Media Indonesia