[TANYA] Cara Membuat Mockup User Interface

Aplikasi-aplikasi diubuntu: • Aplikasi Grafis •
Aplikasi Internet •
Aplikasi Office •
Aplikasi Sound & Video •
Aplikasi Programming
Post Reply
User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

[TANYA] Cara Membuat Mockup User Interface

Post by Malsasa » 12 Apr 2012, 12:28

Beberapa orang telah berhasil membuat mockup untuk user interface Ubuntu maupun aplikasi-aplikasi open source. Mockup menurut pendapat saya adalah sama dengan prototipe desain suatu barang. Nah, aplikasi yang biasa dipakai untuk membuat mockup adalah Inkscape. Masalahnya saya belum tahu tutorial membuat mockup meski saya sudah cari ke Google dan deviantart. Adakah kawan-kawan yang tahu caranya atau bisa kasih saya tutorial? Saya ingin sekali mengetahuinya. Saya ingin membikin mockup. Terima kasih.


User avatar
SatriyaMujung
Posts: 669
Joined: 19 Feb 2011, 08:33

Post by SatriyaMujung » 12 Apr 2012, 13:20

bukannya caranya sama kalau kita bikin gambar dengan inkscape? :grin:
maksud saya, tutorial-tutorial inkscape bisa kok dipakai buat bikin mockup. tinggal kreatif-kreatifnya kita.
btw, saya dulu juga pernah coba bikin mockup tema gtk, tapi pakai gimp. sayang ga selesai. :grin:


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 12 Apr 2012, 14:31

Cara sama, programnya sama, tapi saya inilah yang jadi masalahnya. Saya kurang kreatif soalnya.

Kalau akang nggak repot, tolong unggah ke sini. Maaf merepotkan, Kang.


User avatar
SatriyaMujung
Posts: 669
Joined: 19 Feb 2011, 08:33

Post by SatriyaMujung » 12 Apr 2012, 19:34

tak cek dulu di gudang, mungkin udah jamuran. :grin:


User avatar
belthsazar
Posts: 1300
Joined: 02 Jul 2011, 04:38
Location: Surabaya, Indonesia

Post by belthsazar » 12 Apr 2012, 21:18

saya ikut antri deh..


User avatar
SatriyaMujung
Posts: 669
Joined: 19 Feb 2011, 08:33

Post by SatriyaMujung » 13 Apr 2012, 06:48

waduh gak ketemu filenya. lupa ga di beckap. mangap.. eh.. maap blum bisa bantuin.
yah, intinya sama seperti yg di atas. 'kan @Malsasa udah bikin tutorial macem2? jangan2 udah mastah nih. :grin:
kalo udah jadi, jgn lupa dibagiin ke kita2, biar sy juga bs ikut belajar. kalau inget gini jadi pengen bikin lagi, tapi sy masih ada proyek tutorial, moga2 bln depan udah jadi, judulnya rahasia, biar surpres.. :grin:


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 13 Apr 2012, 09:28

Nggak papa, Kang. Saya bingungnya karena belum pernah lihat mockup terus lihat-lihat mockup dan saya belum pernah bikin. Kalau kover sedikit-sedikit pernah, tapi GUI...belum. Ya sudah, saya nantikan tutorial akang.


User avatar
husnia
Posts: 846
Joined: 26 Jan 2011, 15:31
Location: Malang-Tuban, East Java
Contact:

Post by husnia » 13 Apr 2012, 10:42

ini termasuk mockup apa bukan?

Image
Image

Code: Select all

http://sixrevisions.com/user-interface/website-wireframing/


User avatar
SatriyaMujung
Posts: 669
Joined: 19 Feb 2011, 08:33

Post by SatriyaMujung » 14 Apr 2012, 06:51

betul, itu mockup juga. tp mungkin yg dimaksud @Malsasa mungkin yg kayak gini :
[spoiler]Image[/spoiler]
udah ada finising toch-nya


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 16 Apr 2012, 14:06

Ya, seperti punya kang satriya itu yang saya maksud. Yang ini juga:

[spoiler]Image[/spoiler]

ini juga:

[spoiler]Image[/spoiler]

tambah lagi:

[spoiler]Image[/spoiler]

yang keren lagi:

[spoiler]Image[/spoiler]

ada lagi:

[spoiler]Image[/spoiler]

lagi:

[spoiler]Image[/spoiler]

dan lagi:

[spoiler]Image[/spoiler]
bagus juga:

[spoiler]Image[/spoiler]

skyos:

[spoiler]Image[/spoiler]

Yang saya bingung: BAGAIMANA CARANYA MEMBUAT ITU? Seandainya saya menggunakan LibreOffice yang seperti itu, mungkin akan lebih nyaman.


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 16 Apr 2012, 14:07

amree wrote:ini termasuk mockup apa bukan?

Code: Select all

http://sixrevisions.com/user-interface/website-wireframing/
Ini juga mockup, Kang. Cuma, bukan ini yang saya maksud. Terima kasih.


User avatar
husnia
Posts: 846
Joined: 26 Jan 2011, 15:31
Location: Malang-Tuban, East Java
Contact:

Post by husnia » 16 Apr 2012, 14:36

hehe..

maksudnya sebelum jadi mockup keren kyk contoh2 d atas disketsa dulu om..
biar ndak mati ide pas berkreasi d inkscape/gimp/??? :grin:


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 16 Apr 2012, 21:55

Kalau saya, ide ada. Tapi teknik nggak. Belum pernah bikin mockup seumur hidup. Jadinya pas lihat mockup-mockup itu, kaget. Kok bagus sekali? Nah, gitu.


User avatar
husnia
Posts: 846
Joined: 26 Jan 2011, 15:31
Location: Malang-Tuban, East Java
Contact:

Post by husnia » 17 Apr 2012, 00:02

nah itu.. idenya digambar aja trus diupload disini. siapa tau ada yg bantu bikin/saran.

gara2 sampeyan ngomongin mockup saya juga jd tertarik sm mockup. :D

btw. maunya nanti mockup2 tsb berupa gambar mati apa bisa di klik?


User avatar
SatriyaMujung
Posts: 669
Joined: 19 Feb 2011, 08:33

Post by SatriyaMujung » 17 Apr 2012, 07:43

Ternyata udah ada softwarenya mas, namanya Pencil . Ini kayaknya buat bikin prototip beneran.
Attachments
PictureHandler.ashx?ResourceId=c30cfe1c-cd53-463f-be17-92da8ad6c925&Width=881&Height=0.jpg
PictureHandler.ashx?ResourceId=c30cfe1c-cd53-463f-be17-92da8ad6c925&Width=881&Height=0.jpg (71.53 KiB) Viewed 1033 times


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 17 Apr 2012, 12:51

Kalau yang ini saya sudah tahu, yang saya mau gimana caranya bikin mockup dengan Inkscape/GIMP... :D

Tapi terima kasih banyak, Kang!


User avatar
masdana
Posts: 718
Joined: 08 Jun 2010, 13:09
Location: East Borneo
Contact:

Post by masdana » 18 Apr 2012, 07:37



User avatar
ilham2930
Posts: 1123
Joined: 02 Jan 2010, 19:30
Location: /indonesia/tangerang/bonank_city
Contact:

Post by ilham2930 » 18 Apr 2012, 09:04

masdana wrote:apa mungkin ini kali ya :D
http://mairin.wordpress.com/2010/08/02/ ... -tutorial/

widih manteb, creatornya cewe...hebaaaattt....


User avatar
husnia
Posts: 846
Joined: 26 Jan 2011, 15:31
Location: Malang-Tuban, East Java
Contact:

Post by husnia » 18 Apr 2012, 10:18

ilham2930 wrote:widih manteb, creatornya cewe...hebaaaattt....

mangkin semangat belajarnya :grin:


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 18 Apr 2012, 12:24

Yang itu juga sudah saya lihat. Masih kurang memenuhi rasa ingin tahu saya :D Tapi terima kasih banyak.


User avatar
DaniarRa
Posts: 49
Joined: 25 Dec 2011, 10:47
Location: Jakarta,Indonesia
Contact:

Post by DaniarRa » 17 Nov 2012, 14:11

mock up itu bikin design product yang mau kita banguun kaaang...
#sok tau
ini beberapa aplikasi untuk mockUp

cekidot here...
http://www.balsamiq.com/products/mockups

and here...
http://bisakomputer.com/9-aplikasi-kere ... e-website/


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 17 Nov 2012, 20:34

Terima kasih, Kang!


User avatar
linuxers_cilik
Posts: 306
Joined: 24 Nov 2011, 22:45
Location: Medan, Indonesia

Post by linuxers_cilik » 17 Nov 2012, 21:58

Mungkin dengan cara membongkar file themes di /usr/share/themes, kan biasanya file tersebut terdiri dari file gambar dan file konfigurasi. Mungkin aja pembuat mengintip dan mengopi beberapa file agar hasil akhirnya terlihat native.


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 18 Nov 2012, 21:27

Bisa kasih skrinsot, Kang?


User avatar
linuxers_cilik
Posts: 306
Joined: 24 Nov 2011, 22:45
Location: Medan, Indonesia

Post by linuxers_cilik » 05 Dec 2012, 11:06

ini contoh mockup dari nautilus yang dibuat dengan inkscape
pada mockup berikut tombol back/forward dihapus digantikan dengan smart address bar (baru usulan nama)

omong2 gambar asalnya dari
https://github.com/gnome-design-team/gn ... style3.svg
Attachments
nautilus_mockup.png
nautilus_mockup.png (85.07 KiB) Viewed 655 times


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 05 Dec 2012, 11:58

Saya simpan halaman ini.

Terima kasih kang linux, Anda menjawab apa yang saya butuhkan. Kalau ada yang lain lagi, kasih ke sini ya, Kang?


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 05 Dec 2012, 12:00

Oya, jangan lupa update blog akang, yah? :D


User avatar
rizaaal
Posts: 1212
Joined: 01 May 2011, 16:02
Location: Bekasi, Indonesia
Contact:

Post by rizaaal » 05 Dec 2012, 14:12

waaaah keren ini. Baru tau yang beginian namanya mockup. CUma bisa nyimak :(


User avatar
Malsasa
Posts: 2976
Joined: 07 Jun 2010, 22:37
Location: Mojokerto, Indonesia
Contact:

Post by Malsasa » 07 Dec 2012, 09:34

Saya pun baru tahu dan langsung jatuh hati pada UI mockup, Kang. Saya yakin akang langsung senang ini:

Image

Image

Image

Image

Image

Image

Saya yakin akan langsung jatuh hati juga seperti saya :D Hahaha.


Post Reply

Who is online

Users browsing this forum: No registered users and 12 guests