Tutorial Membuat Desain Web Klinik Kesehatan dengan Adobe XD | Bahasa Indonesia

Tutorial mendesain website menggunakan Adobe XD dalam bahasa Indonesia. Kali ini saya menjelaskan bagaimana membuat desain hero section sebuah website.
Adobe XD adalah software desain UI/UX GRATIS dari Adobe, bs di download dsni: www.shrink-ser...
========================
Font yg saya gunakan:
Poppins, download www.shrink-serv...
Raleway, download www.shrink-serv...
Sumber gambar2 yg saya gunakan, saya download gratis dari Freepik, link : www.shrink-serv...
Video tutorial desain web yang lain:
Belajar dasar-dasar Adobe XD • Belajar Dasar Mengguna...
Desain web seharga 20jt rupiah • Cara Membuat Desain We...
Desain web klinik kesehatan • Tutorial Membuat Desai...
Desain web restaurant • Tutorial Membuat Desai...
=========================
Duosweb adalah tim web development yang saya bangun bersama teman saya untuk memenuhi kebutuhan web anda. Silahkan hubungi saya di email ini jika anda membutuhkan web 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

[@ardiansyukri8173]

Alhamdulillah dapat pedoman orang design .. yang saya garis bawahi "GOLONGAN COREL GARIS KERAS". Kebetulan juga sama, jadi ini channel beneran bisa jadi panutan saya :) thanks mas @MasKukuhAldy

[@MasKukuhAldy]

Haha iya ni gbs move on dr corel 😆

[@dedirohmat8514]

menit 7:53 moment paling berat pengakuan jujur "Golongan corel garis keras" wkwkwkwk ternyata pengguna adobe xd ini blum bisa move on dari corel wkwkwkwk kita punya DNA yg sama mas he...he.. yang senasib blum bisa move on like.. :)

[@MasKukuhAldy]

wkwkw bener mas, rasanya susah bgt move on dr CDR soalnya dari prtama belajar desain yg dipegang udah CDR. Udah apal smua tool - toolnya, jadi rasanya males bgt kalo blajar Ai dr awal lagi, haha. Namun sbnernya ga baik d contoh soalnya klien luar kbnykan pake Ai

[@dedirohmat8514]

@@MasKukuhAldy iya sih harus terus belajar.. Tapi masih ada alternatif dari Corel d export ke AI buka d AI eksport lagi dari AI.. #maksa Bagi yg gak bisa move on akut... Wkwkwkwk...

[@MasKukuhAldy]

Adam Fathurrabani wkwk saya biasanya jg gt. Kalo kliennya minta file Ai atau EPS, saya export dr corel jd SVG br dibuka di Ai 😆

[@windiariska3474]

@@MasKukuhAldy kalau buat desain web di sket dulu mas?

[@bloodblooz9831]

@@windiariska3474 wireframe mungkin maksudnya.

[@arinartsonline4932]

alhamdulillah makasih mas atas ilmunya.. saya sedang menonton semua video-video dari mas kukuh.

[@MasKukuhAldy]

Mntappp

[@WahyuHidayat97]

Alhamdulillah tutorial yang sangat bermanfaat ini pertama kalinya saya belajar xd, semoga bnyak ilmu yang saya dapatkan disini terimakasih mas :)

[@MasKukuhAldy]

Aminn samsamaa

[@ditapermataputra3512]

Lagi pengen belajar web desainer, muncul chanel abang, saya lihat beberapa video dan langsung cocok. Saya subcriber baru bang. Salam kenal dari sidoarjo

[@krisbudiyantoh6400]

Terima kasih banyak mas Kukuh sudah sharing pengalamannya 🙏

[@adeagungkurniawan]

Mantap mas cukup mudah dipahami & dipljrin..tq

[@anonimanon83]

Channel premium tapi gratis 👍 mantap sukses terus bang

[@MasKukuhAldy]

🙏🙏🙏

[@evloo7376]

lagi estafet nonton + praktek ilmu nya..mohon izin nimba ilmunya, smoga bisa sprti mas kukuh

[@MasKukuhAldy]

Wahh semangat mas!

[@ramadiansandy]

wah mudah dipahami tutorial ini.. kalau untuk adobe xd ke elementor mas...

[@MasKukuhAldy]

Trimakasii

[@muhawanisme9007]

Lanjutin terus bang tutorialnya. Bermanfaat sekali ini Oiya bang, kalo ngedesign ui/ux tuh cuma bikin designnya atau sama coding juga bang?

[@MasKukuhAldy]

Muhawan96 siapp, makasih mas 🙏. Trgantung permintaan klien, kalo saya punya tim sndiri buat web development nya, jd bs jg bkin webnya skalian.

[@jinanghinia6814]

@@MasKukuhAldy bikin tutorialnya yang dari desain sampe jd web/apk dong mas masi gatau gmn cara nyambunginnya. thanks mas

[@zerkyyulyandri1663]

Keren mas, penjelasan juga mudah d mengerti..

[@MasKukuhAldy]

Trimakasih mas 🙏

[@kuro5391]

terimakssih ilmunya bang

[@Jul-yy5in]

Mas kukuh, Untuk tutorial website, kalo bisa, sekalian dibikin prototypenya juga dong.. Supaya orang non designer sperti saya, bisa lebih paham dan lebih tertarik dengan design web ataupun design grafis. Terimakasih. Sukses selalu!

[@MasKukuhAldy]

sudah ada mas tutornya di video2 slanjutnya, silahkan dicek

[@SkuyNgoding]

Saya harap kedepan bisa diterapkan dalam coding .. mantap Pasti. Terima kasih tutorial nya mas

[@sigitcahyono8626]

Lewat elementor wordpress aja jg sudah bisa

[@sigitcahyono8626]

Tak perlu coding mengcoding tinggal drag and drop doang

[@mylembarantiga4298]

mas, maaf mau bertanya, misal kita menang di web design, yang kita kirim hanya file psd atau kita mengaturnya pada wordpres klien kita? misal di 99d

[@ulphamudzakirillah7561]

keren banget mas. Tapi saya masih belum paham yg grid banyak di awal itu untuk apa ya? karna endingnya itu ga diperlihatkan di tampilan nya kan ya

[@mineoomino1109]

keren bgt kakk. helpful bangeet channel nya

[@MasKukuhAldy]

trimakasiii

[@saifulnurokhman5858]

Punten bang, misal kalo hasil desain dari bang kukuh terus colab sama front end itu gimana prosesnya ya bang? makasih bang

[@ArbiSyarifudin]

Yg full satu landing page jg dong bang. Itu bru hero areanya kan? 😅

[@nr.rahmaan]

Assalamu'alaikum bang Baru-baru ini di kampus, saya disuruh belajar Adobe XD ini sama dosen. Bisa nggak bang buatin tutorial membuat desain web sekolah/pesantren 🙏

[@MasKukuhAldy]

Caranya sama mas, tinggal cari inspirasi dsain skolah aja

[@alimsyahidatulichrom4714]

kak boleh tanya saya baru pemula menggunakan adobe XD langkah langkahnya hasil kerja kita di adobe XD lalu kita mau online kan apakah itu di proses lagi di text editor terima kasih

[@berizikh]

Wow corel garis keras!! Sama bang

[@MasKukuhAldy]

berizikh hahaha

[@julyoiyo2915]

Terima kasih banyak mas atas tutorialnya 🙏😊

[@MasKukuhAldy]

sama samaa

[@bimaseptiarfiandi5005]

Mas kukuh bisa tolong tutorial bikin web untuk Panti Asuhan? Terimakasih mas kukuh sebelumnya.

[@waktutube]

Om maaf sebelumnya saya kan baru tau adobe XD nah klo di liat kan lebih mudah dan gampang pake Adobe XD ... Yang mau saya tanyakan apa iya nanti orang bikin front end gak ngoding dari awal lagi ? Dan apa iya hasil export adobe XD bisa kita edit di html ? Mohon info nya om

[@ahmadkhoisya5145]

Thanks gan, lanjutkan

[@MasKukuhAldy]

ahmad Khoisya haha suwun go!

[@ahmadkhoisya5145]

Aku tak tiru kuh, lumayan nek nyonyah wes buka klinik mengko.. Hehehe

[@MasKukuhAldy]

ahmad Khoisya wah mantap, ngevlog ng klinik?

[@ahmadkhoisya5145]

Yess 😄

[@andiirawanart]

Thans tutorialnya bang

[@MasKukuhAldy]

Andi Irawan0828 sama sama mas! 🙏

[@gungwah1202]

halo mas kukuh, saya mau bertanya dari beberapa konten yang mas buat itu selalu menggunakan ukuran page artboard nya sebesar 1440 x 900, itu kenapa ya? kalo menggunakan ukuran 1980 x 1080 contohnya apa gimana ya? terima kasih mas

[@aseprudi185]

Mas kukuh, kalo buat design web icon nya bikin sendiri atau dari situs icon free? saya baca kalo pake dari situs icon free harus di cantumin link nya di footer ya?

[@arwahsapi]

Dari Adobe XD bisa di export ke HTML gak bang?

[@mcmgroup4350]

Mas kalau sudah jadi desainya langkah untuk koneksi ke Internet / Website kita bagaimana tolong kasih tutorialnya makasih

[@kaisaramaaraaf4476]

Request mahamin brief web design sampe ekseskusi mas

[@MasKukuhAldy]

Kaisarama Araaf trimakasih mas sarannya 🙏

[@kaisaramaaraaf4476]

D tunggu ya mas heheh, auto subscribe, sangat bermanfaat

[@andianwari9806]

Auto Subs. mau tanya mas kukuh, cara implementasikan desain dengan coding, bagaimana ya? terimakasih banyak mas jawababnnya

[@MasKukuhAldy]

Coba cari d channel Pemrograman Unpas

[@RhesaChristian]

Mas kukuh, aku baru ngikutin youtubenya dari awal lagi. Apa ada alasan khusus ukuran webnya selalu 1440x900 px?

[@MasKukuhAldy]

Kbnykan orang luar pake macbook pro, dgn resolusi itu

[@shintaluthfia8160]

Bedanya px sama pt apa kak, saya nyoba pake pixel kekecilan terus ganti pt

[@realestatedepok]

Setelah jadi nih mas. Terus, dsave as web desain kan ya. Itu jadi file html kah? saya kmrn nyoba kok hasil exportnya png ya.. ada yang salah kah..

[@MasKukuhAldy]

kalo export di XD emang masih gambar mas. Desain cuma buat acuan programmer, bikin webnya ttep harus dicoding

[@realestatedepok]

@@MasKukuhAldy Oh gitu, mas.. Baik makasih penjelasannya. 2 pertanyaan lagi mas, pertanyaan diluar topik kalo berkenan menjawab. (1). Cara menampilkan preview font bagaimana ya. Apa memang gak bisa? (2). Cara memutus pen tool, saya mau bikin arow melengkung.. sedangkan pen tool, harus disambungkan antara first poin dengan last point. Tq

[@RikiSipahelut]

Kren Bang.. Mau tanya.. Latar Blakang Pendidikan abang Apa... ? Trus Basic apa ? Kapan mulai pake adobe XD

[@MasKukuhAldy]

Dulu kuliah di TI mas tp lebih tertarik ke desain. Pake XD belom lama kok,1thn an mgkin

[@RikiSipahelut]

Baru 1 Thn.. Tapi Pro.. bang.. Keren..

[@RioPranataSaputra]

Bang mau bertanya apakah bisa adobe XD menggunakan assets dari Bootstrap??

[@MasKukuhAldy]

Bisa, bkin sndiri

[@guspaasep]

Untuk download software ini, ada syarat spek Pac atau Laptop yg menjadi krterianya engga mas?. Jd minat untuk mempelajarinya... Keren

[@MasKukuhAldy]

Kalo windows mnimal windows 10 mas. Cb gugling “adobe xd spec requirement”

[@akhmadfahrudhin3962]

Bang ijin tanya adobe xd ku kok ada tulisan nya cant creat document ya

[@mochamadarfanfaisol2917]

Cara nge linknya gimana mas, misal klik sign up terus ngelink ke sign up gimana

[@windiariska3474]

kalau buat desain web di sket dulu mas?

[@MasKukuhAldy]

Windi Ariska dulu awal2 di sket dlu mbak, tp lama kelamaan udah hapal layoutnya, jd lgsung byangin dikepala aja, lgsung main di softwarenya 😅

[@windiariska3474]

@@MasKukuhAldy untuk ui/ux app juga mas?

[@MasKukuhAldy]

Windi Ariska kalo app baiknya di sket sih. Soalnya flow nya lebih kompleks

[@windiariska3474]

@@MasKukuhAldy bikin tutornya dong mas dari wireframe sampai ke sofawre, oh iya mas sya mau naya apa penting "contest types" di 99designs. apa unutk pemula baiknya pilih kontes yang terbuka-garansi-tidak cepat. ?

[@MasKukuhAldy]

Windi Ariska ok mbak trimakasih masukannya, saya tampung dlu ya. Kalo main di logo, sbaiknya yg non-blind dlu aja biar bs mmpelajaru dsain yg lain juga. Slain itu sama aja mau mlih kontes yg mana

[@rendipradana9684]

mas buat gambar seperti itu namanya apa ya, di edit setengah dengan bg seperti itu

[@MasKukuhAldy]

Kalo cara bkin gambarnya bisa masuk ke background itu toolnya pake clipping mask. Tapi kalo nama stylenya kurang tau juga ya mas, yg jelas ilustrasi sih.

[@rendipradana9684]

@@MasKukuhAldy terima kasih.. Update terus ya mas tutornya😁 sangat bermanfaat

[@MasKukuhAldy]

Rendi Pradana trimakasih mass, sama2 🙏

[@praktoisrevolution5088]

mas saya mau tanya gimana caranya kalo sudah kita bikin desainya dan mau kita jalankan webnya ?

[@MasKukuhAldy]

kzbin.info/www/bejne/bWm9mJx7oK-ii5Y

[@LBKHott]

Hai kak,saya belajar membuat desain web dengan adobe XD,saat di preview sudah bagus sesuai yang saya inginkan tapi saat di export ke HTML kok tidak sprti previewnya ya?prototypenya tidak ikut ke export,mohon pencerahan atau bikinkan tutorial dari adobe xd sampai ke websitenya. Terima kasih

[@MasKukuhAldy]

Desain di xd cuma sbg acuan mas, gbs diexport ke html, apalagi prototypenya, blom bs

[@LBKHott]

@@MasKukuhAldy owh memang gk bisa ya prototypnya.. Untuk codingnya biar sprti preview brrti manual ya kak? Terims kasih infonya

[@MasKukuhAldy]

Iya manual mas

[@feniserlina2270]

Bang, boleh gk pake freepik trus di modif trus di pke buat projek?

[@MasKukuhAldy]

boleh asal sudah langganan premium

[@sekawanphotodanvideo2213]

Nanya mas , misalkan kita mau bikin tombol atau ikon yang mengarah ke instagram atau facebookkita bisa gak?

[@MasKukuhAldy]

Kalo di XD gbs mas soalnya ini cm prototype

[@mochfikrikhoirurrizal1113]

mas kalo grid system nya sudah sesuai dengan bootstrap ga ya ? apakah harus di setting dulu ? atau grid system bootstrap nya yg di ubah biar sama kaya di xd ?

[@MasKukuhAldy]

Moch Fikri Khoirurrizal wah saya pake bootstrap dah lama bgt jd lupa widthnya berapa. Tp stau saya sama2 pake 12 kolom kok

[@mochfikrikhoirurrizal1113]

@@MasKukuhAldy bootstrap padding kolom nya itu kanan kiri 15 mas, kalo di total kalo ketemu kolom lagi jadi 30. . kalo bulma masing masing 12, di total 24. . nah apakah jarak default xd yg 16 itu disesuaikan sama grid yg mau di bangun gtu ga mas ? kan biar lebih tertata aja gtu... soalnya kadang saya design default xd gitu, bikin teks panjang dengan kolom yg sama di boostrap dan ukuran font juga sama, hasilnya beda jumlah baris atau gmna lah gtu 😁 mohon masukannya mas 🙏

[@MasKukuhAldy]

Moch Fikri Khoirurrizal mending settingan kolom di XD yg diubah biar ga perlu ubah css d bootstrap

[@mochfikrikhoirurrizal1113]

@@MasKukuhAldy oh gitu ya... jadi xd yg nyesuaiin bootstrap mas ?

[@MasKukuhAldy]

Moch Fikri Khoirurrizal iya gtu aja. Disesuaikan kbutuhan masing2

[@attargibran2715]

Mas request desain game 2d dong hehe

[@suldhilofficial2893]

Mas gimana sih cara mengatasi save tidak bisa jadi gini mas *Awalnya saya ingin save apa yang telah saya buat namun ketika disave gambarnya terpisah-pisah itu cara di jadikan satu gitu gimana ? Maaf mas saya masih pelajar namun syaa juga tertarik menjadi desainer *

[@MasKukuhAldy]

Di klik dlu artboardnya baru d export

[@suldhilofficial2893]

@@MasKukuhAldy ok mas,sudah berhasil makasih banyak

[@triolascarya]

Siang Mas, mau bertanya. Untuk menambahkan font ke dalam Adobe XD gimana ya mas caranya ? kebetulan Adobe XD saya tidak original :(

[@MasKukuhAldy]

Instal aja dr windows explorer. Btw adobe xd kan gratis, ngapain di crack 🤣

[@andiafaz]

keren mas cuman saya melihat terlalu lebar spacenya

[@MasKukuhAldy]

makasih mass. space bagian mana mas?

[@mrcuplacuplis1697]

Bg apakah hasil nya bisa export ke html seperti boostrap studio

[@MasKukuhAldy]

Gabisa diexport html

[@mrcuplacuplis1697]

@@MasKukuhAldy trus bagai mana kita memakai nya untuk ke web

[@aveclo245]

Mas saat import gambar ke adobe xd,file gambar nya berbentuk png bisa mas?makasih sebelumnya.

[@MasKukuhAldy]

bisaa

[@anandams3472]

Bang, dari XD itu terus dijadiin domain web itu gimana caranya bang??

[@MasKukuhAldy]

Uda prnah saya bahas dsni mas instagram.com/p/B0SbHWWhE4E/?igshid=bby2k3jblipm

[@erisdsr]

File .eps bukannya bisa dibuka di Corel ya bang?

[@samueltito6540]

Bang laptop yg cocok buat design gni apa bang

[@kapunduangx]

Ga berat lo bang,

[@kaksarah]

mas,kalau lowongan kerja untuk fullstack desiger banyak ya bang, saya semakin tertarik hehe

[@MasKukuhAldy]

Bnyak buanget mas hehe

[@kaksarah]

@@MasKukuhAldy oke mas hehe terimakasih jadi semangat belajarnya:)

[@kaksarah]

@@MasKukuhAldy kalau boleh tahu lokernya biasa diwebsite apa mas hehe

[@MasKukuhAldy]

Linkedin, kalibr, jobstreet

[@kaksarah]

Mas KukuhAldy terimakasih banyak mas

[@herher6441]

cara add font yang sudah di download bagaimana mas ?

[@MasKukuhAldy]

Diisntal aja nnti masuk sndiri

[@codingcorner3360]

mas, cara setting colomn grid nya bagaimana ya mas? mohon ilmunya :)

[@joliefelicia3691]

dibawah tanda centang dan layout ada pengaturan kolom

[@ArbiSyarifudin]

Voice nya pelan bgt Bang. Udh sya naikin volume nya pdahal.

[@MasKukuhAldy]

Arbi Syarifudin iya mas kayanya yg ini kmaren ngeditnya salah 😅

[@hendrywijaya1017]

Mas kukuh gw mau nanya dong, Adobe XD untuk Laptop 4 GB gimana?

[@MasKukuhAldy]

Bisa kok. Lengkapnya cb gugling : adobe xd spec requirement

[@hendrywijaya1017]

@@MasKukuhAldy ga ada kendala Kan mas?

[@realestatedepok]

Punyaku malah 2gb mas. Bisa jalan kok. HEhe

[@mengakuganteng5590]

Mas cara grid gimana?

[@MSuryaOkaTanjung-mk5ts]

Hasil desainnya bisa di eksport dalam bentuk HTML, CSS, dan JS gak mas? Jadi nanti tinggal di upload ke hosting gitu

[@MasKukuhAldy]

Gbisa, ini dsainnya cm buat patokan aja

[@kecudotcom]

Rekam layar kayak gini pake apa ya bang

[@MasKukuhAldy]

kalo saya pake bandicam

[@yonndevel5277]

mas? kok aku gabisa download yayh, saya mau jalankan di laptopku

[@MasKukuhAldy]

dnload Adobe Creative dlu aja, nnti install dr situ

[@irzayuni5075]

spek konputernya harus tinggi ya kak???

[@MasKukuhAldy]

Engga tinggi2 jg mbak, disarankan windowsnya pake yg 64bit, lalu RAMnya 4gb. Lebih detailnya bs dlihat dsni: helpx.adobe.com/xd/system-requirements.html Tp dicoba dlu aja siapa tau bisa

[@irzayuni5075]

@@MasKukuhAldy terimakasih balasannya kak..

[@citranawiraeda220]

Halo kak bisa bikinkan saya website kesehatan

[@madekipli381]

cara masukan ke website gimana bang

[@MasKukuhAldy]

Sudah prnah saya bahas dsni mas instagram.com/p/B0SbHWWhE4E/?igshid=l9rz6iutuymb

[@renaldiology6333]

Bang share templete grid nya juga dong yg 12 itu

[@MasKukuhAldy]

Renaldio logy gridnya itu bawaan dr XD mas, tinggal dikeluarin aja klik layout

[@gunstcyber3634]

adobe xd gak bisa di crak om :D

[@MasKukuhAldy]

gunawan cyber kalo gratis knapa harus di crack :)