Tutorial Membuat Desain Web Restaurant dengan Adobe XD | Bahasa Indonesia

Tutorial cara membuat desain web UI/UX restaurant Balcony Jogja menggunakan Adobe XD dalam bahasa Indonesia. Di video kali ini saya memberikan tutorial mendesain website balcony dari awal, dari brief sampai menunjukkan website yang sudah jadi. Balcony adalah salah satu restaurant yang sudah cukup terkenal di Yogyakarta, terletak di lantai satu Mall Ambarrukmo Plaza.
Desain di atas sudah dibuat menjadi website yg sudah live di balconyjogja.com/
========================
Adobe XD adalah software desain UI/UX GRATIS dari Adobe, bs di download dsni:
www.adobe.com/...
Font yg saya gunakan:
Lato, download fonts.google.c...
Rosella, download www.dafont.com...
Video tutorial desain web yang lain:
Belajar dasar-dasar Adobe XD • Belajar Dasar Mengguna...
Desain web portfolio Duosweb • Tutorial Membuat Desai...
Desain web klinik kesehatan • Tutorial Membuat Desai...
Desain web 20juta rupiah • Cara Membuat Desain We...
=========================
Silahkan hubungi saya di email ini jika anda membutuhkan web desain dan development: [e-mail]
Duosweb officital site: duosweb.com/
Duosweb Instagram : / duosweb
IG: / kukuhaldy
#tutorialadobexd #tutorialdesainweb #desainwebindonesia #bahasa #adobe #xd #web #desain #design #webdesign #pemula #belajar #tutorial #desainerpemula #uiux

[@yudibagol2386]

Web design itu sebenarnya tidak terlalu sulit, yang sulit Web programming nya

[@jokimmr6591]

keren banget bang ty buat tutorialnya

[@ComputerNatic]

Cool MasKukuh, terima kasih.

[@amikking7691]

Terimakasih ilmunya bang

[@alamgunawan2869]

Tutorialnya Sangat Detail. saya suka

[@MasKukuhAldy]

trimakasii

[@ryanfajar9047]

terima kasih mas atas sharenya.... saya sangat terinspirasi untuk terus berkarya

[@PANJIHITAM777]

Ilmu yg sangat Bermanfaat bg, mksih

[@MasKukuhAldy]

Sama samaa yaa, senang bisa membantu 🙌

[@chilchannel9240]

tutorial yang sangat membantu. sukses terus untuk karyanya. thanks masKukuhAldy.

[@MasKukuhAldy]

Aminn trimakasii

[@adang-dadangkurnia2226]

Terima kasih manteb tutor jelas padat gx berete2 jadi tambahan buat sy belajar

[@MasKukuhAldy]

Sama samaaa

[@n4n4ng86tube]

mantabs kak, nyimak aje

[@MasKukuhAldy]

Trimakasih mas, smoga bermanfaat! 🙏

[@julianilhan2218]

makasih sangat bermanfaat mas Kukuh

[@MasKukuhAldy]

sama samaa

[@thisguy5718]

nice bang , bikin video tentang fundamental2 atau tips2 desain UI/UX yang baik dong bang , saya programmer backend ingin mencoba desain sendiri tapi blm ngerti gmn desain UI/UX yg baik harusnya kayak gimana

[@MasKukuhAldy]

StarryNight siapp mas, noted! Bakalan saya bahas d video2 selanjutnya. Jgan lupa subs ya biar ga ktinggalan, trimakasih 🙏

[@lharun8320]

Back end PHP?

[@sandysulaiman8914]

Makasih mas tutorialnya semoga berkah.

[@MasKukuhAldy]

Aminn

[@magdalenaocha]

Mantep bwannnngggg kukuhhh❤️❤️❤️

[@MasKukuhAldy]

luvvv

[@newconcept2498]

Makasih mas tutorialnya👍

[@MasKukuhAldy]

sama2 mas! senang videonya bs bermanfaat

[@Neko-gt5nq]

Mas tolong buat Vidio hasil akhir desain kemudian di lanjut dengan codingnya gmna? Apa ada aplikasi yg langsung export? Atau gmna cara mencocokkan dengan ukuran desain yg kita buat?

[@MasKukuhAldy]

Coba cek channelnya pemrogran Unpas

[@idorisakotta]

sangat membantu

[@MasKukuhAldy]

🙏🙏

[@david_ardianto]

Aduh puyeng mas project saya sudah jadi sih, udah ke export file jpg, cuman artboardnya belum sempet ke save dan kepencet undo banyak mau di redo ilang huhuhuhu... di klik shift ctrl z gamau balik, pusinggggg kenapa redo artboard gabisa

[@nadyazaen7289]

bang tutorial prototype nya dong, pengen tau pas bikin2 tombolnya :)

[@ingintau6039]

mas coba liat di footer, penulisan kabupaten nya typo jd kapbupaten :)

[@MasKukuhAldy]

Makasih mas, tp gppa cuma mockup kok hehe

[@deniscipta2419]

Keren sekali ilmu banget ini bang👍🤓

[@MasKukuhAldy]

Haha trimakasih mas smoga bermanfaat 🙏

[@deniscipta2419]

@@MasKukuhAldy semoga rezeki masnya d tambahin terus Aamiin

[@dandyramadhany1418]

mas share juga dong website rekomended buat nyari" info lomba" gitu yang sering ngadain dimana aja. Jadi sekalian belajar bisa coba" juga sembari ngelatih apa yang sudah di pelajari. trimakasih

[@MasKukuhAldy]

Kalo lomba ikutan di 99designs aja mas

[@dandyramadhany1418]

@@MasKukuhAldy baik mas trimakasih infonya

[@bocahbola1690]

mantullll bang

[@MasKukuhAldy]

Makasih mas! 🙏

[@andremarcelino6809]

Bang klo web 1 artboard full bgitu bisa pasang Slider di Homepage nya? soalnya dri tutor2 cuman bisa klo satu2 artboard, .. gak bisa klo artboardnya 1 penuh gitu

[@nug321]

Luar biasa, tutorialnya :D tadi coba lihat websitenya langsung, untuk webnya pake wordpress ya mas? dan themenya child dari grand restaurant. Pertanyaan saya, biasanya buat desainnya dulu, atau cari theme yg cocok dulu baru didesain lagi? terima kasih :)

[@MasKukuhAldy]

Bner bgt mas, wah masnya dah tau banyak nih haha. Biasanya cr theme yg klien suka dulu, br desain disesuaikan konten dr klien, gtu mas

[@nug321]

@@MasKukuhAldy 😁 ternyata sama step2 yg saya lakukan. Cuman bedanya karna saya gak bisa desain, jadinya langsung buat child theme dan masukin konten dari klien dan ditata langsung aja. Yaa... kalau budgetnya longgar ya tambahi pernik2 😆

[@MasKukuhAldy]

Nugroho Dwis Sugiharto hahaha bner mas, proses yg paling enak bgitu soalnya. Sbnernya saya cm yg bagian desain aja, ada tmen di tim yg bagian modif theme nya nanti ssuai desain. Asal dr mana mas Nugroho?

[@nug321]

@@MasKukuhAldy 😂 cara paling enak, paling cepet dan murah Saya dari sleman 😁 Oh ya kalau kerja tim, mas yg desain. Themenya yg cari mas atau tim lain? Lalu kalau orang lain yg cari apakah mas pelajari dulu theme yg dipilih? Kadang desainer tempatku imajinasinya terlalu luar biasa 😥 desainnya bikin puyeng, apalagi kalau cuman pake theme jadi 😔

[@MasKukuhAldy]

Nugroho Dwis Sugiharto biasanya aku sndiri yg cari mas. Dan karena aku sndiri jg yg dsain, sbisa mgkin aku pake elemen2 yg emang udah ada di theme nya, kalo ada prubahan pun cm dkit2, biar yg modef theme jd gmpang dan cepet. Udah sma2 tau soalnya haha Wah saya kerja d sleman mas haha. Cuman sambil freelance aja hhe

[@enzrmedia79]

thks bang

[@MasKukuhAldy]

Sama samaa yaa, senang bisa membantu 🙌

[@muhamadarabirizkiangkotasa906]

ka, cara untuk nulisin text rosella gimana ya, saya udh download tpi bingung cara memakai nya. terimkasih mas

[@sallysdays5867]

Kak kalau desain web yg untuk dijual ke klien (komersial) biasanya pakai aset desain yg free download atau harus beli? Thanks tutorialnya, very helpful!

[@MasKukuhAldy]

Saya biasanya kalo ga pake yg free for commercial ya beli

[@andisusilo1077]

mas kukuh saya pemula bgt di desain, tanya mas apa adobe xd bisa buat desain logo mas? trmkash . sukses selalu

[@MasKukuhAldy]

andi susilo halo mas andi. Sbnernya bisa, karena bisa bkin vector di XD. Tapi, disarankan menggunakan software yg memang dikhususkan untuk creating vector, misal: adobe ilustrator, corel, inkscape, affinity designer. Karena bakalan lbih gmpang soalnya fiturnya2 sudah disesuaikan

[@07tjtjqxw43]

mohin bantuannya bang menit 7:47 kita taruh dibawah yang dipencet itu bang (carannya) gimana bang ? terima kasih

[@ilhammaulana-jc8ew]

mas kalau foto foto makan dari asset itu dikasih dari client balconynya atau cari sendiri ?

[@MasKukuhAldy]

saya ambil dr unsplash, ada yg dr client jg

[@firdaus7258]

bikin tutorial cara menjalankan web nya kak

[@MasKukuhAldy]

Diconvert ke html css nya mas, lalu saya pake Wordpress untuk CMS nya

[@naufalakram9969]

Js pake mas?

[@TheAmstronk]

ini model nya sama kaya adobe muse ga om? klo habis design web bisa langsung upload ke hosting?

[@MasKukuhAldy]

Engga, ini cm sbgai acuan utk frontend aja

[@aveclo245]

Mas mau tanya untuk ipad pro apakah sudah bisa menggunakan adobe xd ya?lalu kalo buat mockup web desain gini jualnya masuk tagging apa ya?soalnya saya bingung rata" yg ngjual web desain sudah pada di coding sekalian.makasih mas

[@MasKukuhAldy]

stau saya balum ada appnya di ipad. Untuk mockup jualannya biasanya UI kit kategorinya

[@esweer23]

Permisi mas mau nanya itu gambarnya garap di software kah atau gimana mas?

[@MasKukuhAldy]

ambil di unsplash

[@esweer23]

@@MasKukuhAldy pernah gak masnya garap di software?

[@sahriramadhan74]

mas mohon petunjuk, kalau di 99designs mau coba ikutan yang web designya, cara menyampaikan kerjaannya bentuk filenya png atau jpg, atau file dari xd yang kita kirimkan, sbb selama ini masih di logo aja. ehhehe

[@MasKukuhAldy]

Png aja mas

[@muhammadalfatihauliaiskand5260]

Bang itu warna emasnya dapet dari mana bang?

[@AdiDolan]

pertamaax

[@MasKukuhAldy]

wahh trimakasih notif squad! haha

[@MasKukuhAldy]

rogelio ibarra Hi! How did you end up in my video? Haha. I’m sorry i don’t have the time to make english subtitle at the moment :(

[@sinemaart4289]

Mantap, tanya mz. Cara ngecek temple seofrndy gmnh?

[@MasKukuhAldy]

SINEMA ART ngecek apa mas??

[@sinemaart4289]

Mas KukuhAldy , ngecek templetnya yang seo frendly sama yg ga seo mz.

[@MasKukuhAldy]

SINEMA ART ngeceknya ya di search gan, tp harus nunggu bberapa hari dlu biar kata2nya bs ke search

[@sinemaart4289]

Makasih banyak info mz

[@ayuniw3428]

kak lebih mudah pake adobe xd atau adobe muse?

[@MasKukuhAldy]

Figma hehe

[@robkr]

kenapa ukuran artboardnya 1440 x 900 px? ada alasan khusus? terima kasih utk penjelasannya

[@rifkyakh]

Bantu jawab Mas, itu ukuran standar Macbook Pro. Biasa dipake orang luar juga.

[@griyaciptadesain4218]

setelah desain di adobe xd apa bisa langsung di online kan? atau masih harus di coding lagi kang?

[@MasKukuhAldy]

Coding lg gan

[@rendipradana9684]

cara agar navbarnya di index paling bawah gitu tombol shorcutnya apa mas

[@MasKukuhAldy]

Kalo mau kebawain per layer pake Ctrl+[ Kalo mau lgsung dijadiin layer yg paling bawah pake Shift+Ctrl+[ Sbnrnya bs liat sndiri mas, klik kanan d objeknya, lalu ke Arrange, nnti kliatan shortcutnya

[@rendipradana9684]

@@MasKukuhAldy ohh yg itu, terimakasih mas..

[@MasKukuhAldy]

Rendi Pradana masamaaa 🙏

[@marselinarosbalisare9818]

Kk apakah ada link tutorial yang buatnya di aplikasi adobe photosop🤗

[@MasKukuhAldy]

sekarang photoshop sudah jarang bgt digunakan utk membuat desain web / app, karena sudah ada software yg dikhusukan utk bkin UI, salah satunya Adobe XD ini, atau Figma

[@fadhilariezky7448]

mas, itu kalo di convert ke web pake nya apa? html css fw?

[@MasKukuhAldy]

Bner skali mas. Pake html css, lalu CMS nya saya pake wordpress

[@fadhilariezky7448]

@@MasKukuhAldy kalo wordpress itubbs buat website dinamis gk si mas

[@MasKukuhAldy]

Fadhil Zentrax memang fungsi utamanya biar bs dinamis mas, biar kontennya bs diedit2 dgn mudah

[@gamingbuddy5364]

Maaf bang mau tanya , kenapa ngga langsung aja desain web nya di wordpress ? Apa kelebihan desain di adobe xd bang?

[@robinmanullang9739]

Prototype nya gimana mas

[@hendronaldimanurung2638]

Bg cara buat biar shadownya dibawah bagaimana

[@carlesamson8172]

Hello bang, maw tanya..page website sya sda siap design ...bersama dgn prototype interactive... Sya trus export html...sya link di website, knapa button nya semua tdk function?

[@MasKukuhAldy]

Carle Samson harus dicoding manua mas. Gabisa lgsung export terus jadi. Saya biasa pake XD cm sbgai desain acuan saja, utk buat websitenya ttep bkin dr awal

[@carlesamson8172]

@@MasKukuhAldy gi mna cara nya coding mas? Sya baru mulai guna adobe xd 😅

[@MasKukuhAldy]

Carle Samson cari tutorial di ytub mas, tutorial html css php

[@tasyaauliaandriani737]

Mas apakah saat sedang buat sketch di adobeXD harus konek ke internet pc nya?

[@MasKukuhAldy]

Xd spertinya bs offline

[@tasyaauliaandriani737]

@@MasKukuhAldy terimakasih mas 🙏

[@ridhuwanm3386]

Menit ke 7:45 sampai 8:05 tekan tombol apa mas? , agar retangcle nya di transparan

[@MasKukuhAldy]

transparansinya dikurangi mas, di video sudah sya tnjukkan kok

[@denvirrr]

Bang kalo fungsi layout yg warna bitu untuk apaan bang?

[@MasKukuhAldy]

Itu namanya grid. Saya pakai grid 12, artinya ada 12 kolom biru. Fungsinya buat meletakkan elemen2 di desain agar lebir rapi, hanya buat garis bantu saja. Tidak harus sesuai itu

[@gustionusamba90]

jenengan dari jogja to mas?

[@matematikagakngitaj2625]

kak saya kok tidak ada mask with shapenya ya?

[@denvirrr]

Bang kalo bisa sekalian tutorial jadiin ke web nya hehe

[@MasKukuhAldy]

Noted mas, dalam waktu dekat masih fokus dlu di desain ni. Untuk HTML/CSS nya nnti mungkin di bulan2 berikutnya. Trimakasih!

[@MasKukuhAldy]

Mahyuddin Noor kalo blogspot saya kurang tau mas, coba digugling kali aja ada

[@nr.rahmaan]

@@MasKukuhAldy iya mas sangat ditunggu, semoga sehat dan sukses selalu

[@amrul3076]

Kak, apakah Adobe XD dapat membuat mobile app atau hanya UInya sja?

[@MasKukuhAldy]

Hanya UI aja mas

[@ahmadtaufiqimuhsininit3185]

belajar android studio kak, pake bahasa java/kotlin

[@dhimaspentjeng1644]

Orang Jogja om?

[@hafizhabhipraya4215]

Mas kalo boleh sekalian asset kayak iconnya dikasih link buat downloadnya hehe soalnya kadang ribet kalo download di flaticon

[@MasKukuhAldy]

Wahh sbnernya kalo dsruh nyari icon nya lg jg saya bakalan lupa mbak hhe, soalnya bkinnya uda lama. Bs pake icon yg mirip kok, ngga harus sama persis 👍

[@nailahf8438]

Buat linknya jg dong bro

[@imamshodiqin473]

Yang tulisan kyak blog trus home habis di rectagle .nah trus pindah ke bawah gmna caranya pak

[@MasKukuhAldy]

Klik kanan, arrange, send backward

[@imamshodiqin473]

Oh iya pak cara memasukan caracter styles gmna pak

[@hadiasik]

berapaan kira kira fee untuk designnya bg

[@kuro5391]

bang, tempat download icon icon yang lengkap ga ? yang free aja

[@danskuy3575]

Mau?

[@nillonegaragemedia]

gimana cara membuat design nya kita jadikan website jadi

[@MasKukuhAldy]

bisa cek di video ini mas kzbin.info/www/bejne/bWm9mJx7oK-ii5Y

[@bimasenainstitute2088]

Cari gambar yg mirip seperti itu keywoardnya apa ya

[@MasKukuhAldy]

Silahkan cek ini kzbin.info/www/bejne/hXmTXoRqn6aisKs

[@BUDIMAN-nr1pl]

ngambil gambar gambarnya dmn mas???

[@MasKukuhAldy]

Unsplash

[@priagungwicaksono5232]

klo cari font biasanya dmn ya mas?

[@MasKukuhAldy]

Google font

[@priagungwicaksono5232]

itu semua gambarnya dri klien ?

[@MasKukuhAldy]

Dr unsplash

[@keyzarrasya3416]

Bagaimana membuat text itu clickable mas/button?

[@MasKukuhAldy]

maksudnya di webnya bneran atau di adobe xd mas?

[@keyzarrasya3416]

@@MasKukuhAldy maksudnya buttonya bisa di pencet pencet gitu lo mas

[@MasKukuhAldy]

Ini Keyzar di xd ya brti. Pake prototype mas. Udah ada rencana bkin videonya kdepannya nnti

[@keyzarrasya3416]

@@MasKukuhAldy oke mas ditunggu terima kasih

[@sastrasaputra836]

cara publish ke web nya bagaimana ya ?

[@MasKukuhAldy]

Dibikin html / code nya, lalu di hosting deh

[@thelazycomputer99]

bos, mau tanya adobe xd ini untuk mockup/prototype aja atau bisa diexport menjadi html ?

[@MasKukuhAldy]

Cuma mockup dan prototype aja mas

[@thelazycomputer99]

@@MasKukuhAldy oke terimakasih bos, sangat membantu

[@fathanarvieno7493]

Ini gapake coding?

[@MasKukuhAldy]

Fathan A.p kalo tutor d atas cm web designnya aja mas

[@marselinarosbalisare9818]

Malam k saya boleh minta tutorialnya yg pake link...🤗

[@MasKukuhAldy]

Pakai link gimana?

[@sendiafirza]

4:01 margin gridnya brp ya mas?

[@sobatit2770]

Kuliah di mana ka?

[@MasKukuhAldy]

Sudah kerja mas hhe

[@MasKukuhAldy]

Mas kuliah dmna?

[@sobatit2770]

@@MasKukuhAldy ohh dulu nya kulia apa kerja?

[@MasKukuhAldy]

Dlu kuliah di IT mas, tp sbnre gada hbungannya sama UIUX, kbnykan bljar sndiri

[@sobatit2770]

Ohhh. Boleh minta no Wa nga buat tanya2 gitu