Teknik Merancang Desain Website

Description

Kami BABA STUDIO telah berdiri selama 17 tahun dengan 130 ribu murid dan alumni. Beberapa Pencapaian BABA STUDIO adalah:

1. Peraih Ratusan Penghargaan
2. Termasuk 5 ICT Award dari Menkominfo

Tentang materi

1. Judul Pelatihan

Teknik Merancang Desain Website

2. Deskripsi Pelatihan

Di era digital, seiring dengan perkembangan bisnis melalui media digital membuka peluang bagi para
pebisnis start up untuk membangun bisnisnya melalui website perusahaan, toko online, bahkan aplikasi
mobile dengan bertujuan untuk memberikan kesan positif dan kemudahaan terhadap pengguna, Tata
Letak Fitur yang benar sehingga dapat memudahkan user saat menggunakan aplikasi tersebut. Ketika
user merasa nyaman hal tersebut akan membantu untuk meningkatkan penjualan atau bisnis.

3. Tujuan Umum Pelatihan

Pada akhir pelatihan peserta akan mampu memahami dan membuat desain aplikasi menggunakan
Figma/Adobe XD dengan menunjukkan minimal 60 persen penguasaan materi pada saat tugas akhir
(unjuk keterampilan) setelah peserta mengikuti seluruh proses pembelajaran

4. Tujuan Khusus Pelatihan

Setelah mengikuti pelatihan, peserta mampu :

1. Mampu memahami apa itu UI UX dan dapat menerapkannya
2. Mampu membuat prototyping dan wireframe
3. Mampu mengaplikasikan cara menggunakan adobe XD dan Figma
4. Mampu membuat desain menggunakan figma dan adobe XD
5. Mengaplikasikan cara membuat desain website dengan HTML dan CSS

5. Kelompok Sasaran

1. Pendidikan minimal SMA/SMK

2. Memiliki Smartphone atau Laptop

3. Pernah melakukan penjualan secara online

4. Mengenal minimal satu (1) sosial media

6. Durasi Detail dan Total Durasi

Total Durasi : 15 Jam

Total Pertemuan : 5x

Total Jam/Sesi : 3 Jam/Sesi

7. Silabus/Gambaran Materi

Pertemuan 1

Sesi 1 09.00 - 10.00 WIB

Sesi 2 13.00 - 14.00 WIB

(60 Menit - Pemahaman UI UX dan penerapannya)

- Peserta Memahami apa itu User Interface (UI)
- Peserta Memahami apa itu User Experience (UX)
- Peserta Memahami penerapan UI/UX

Sesi 1 10.00 - 11.00 WIB

Sesi 2 14.00 - 15.00 WIB

(60 Menit - Pemahaman UI UX dan penerapannya)

● Pelatih menjelaskan apa yang dimaksud dengan User Interface melalui presentasi dan aplikasi yang
dijadikan percontohan
● Pelatih menjelaskan apa yang dimaksud dengan User Experience melalui presentasi dan aplikasi yang dijadikan percontohan
● Pelatih menjelaskan contoh-contoh penerapan
● Pelatih mempraktekan cara untuk melakukan penerapannya

Sesi 1 11.00 - 12.00 WIB

Sesi 2 15.00 - 16.00 WIB

(60 Menit - Pemahaman UI UX dan penerapannya)

● Instruktur akan meminta peserta untuk melakukan browsing dan mencari reference website atau
aplikasi kemudian peserta diminta untuk memahami penerapan desain tersebut.
● Di Akhir sesi peserta diberi tugas mengisi kuis , sesi tanya jawab, dan pembahasan mengenai
pengerjaan praktek tugas mandiri
● Setelah mengikuti aktivitas process peserta memperoleh dan mengolah berbagai informasi yang
relevan dengan materi pembelajaran yang akan diberikan

Pertemuan 2

Sesi 1 09.00 - 10.00 WIB

Sesi 2 13.00 - 14.00 WIB

(60 Menit - Pemahaman dan pembuatan prototyping dan wireframe)

- Mampu membuat prototyping
- Mengaplikasikan cara membuat wireframe

Sesi 1 10.00 - 11.00 WIB

Sesi 2 14.00 - 15.00 WIB

(60 Menit - Pemahaman dan pembuatan prototyping dan wireframe)

● Melibatkan peserta pelatihan dalam melaksanakan langkah-langkah yang telah direncanakan
untuk membuat prototyping dan wireframe. Peserta akan menerapkan konsep-konsep desain,
menggunakan alat desain yang sesuai, dan menghasilkan prototyping dan wireframe yang
konkret
● Melibatkan peserta pelatihan dalam berkolaborasi dengan rekan tim untuk mendapatkan umpan
balik dan masukan. Peserta akan berinteraksi dengan orang lain, mempresentasikan prototyping
dan wireframe yang telah dibuat, serta menerima tanggapan yang konstruktif.
● Peserta akan melihat kembali desain yang telah dihasilkan, memeriksa kesesuaian dengan kebutuhan dan tujuan awal, serta melakukan analisis kualitatif terhadap pengalaman pengguna
yang mungkin dialami
● Peserta akan mencatat semua langkah dan proses yang telah dijalankan, menjelaskan pemikiran
di balik desain yang dibuat, serta membuat dokumentasi yang dapat digunakan untuk referensi di
masa mendatang.

Sesi 1 11.00 - 12.00 WIB

Sesi 2 15.00 - 16.00 WIB

(60 Menit - Pemahaman dan pembuatan prototyping dan wireframe)

● Peserta Akan membuat prototyping dan mengaplikasikannya di wireframe
● Di Akhir sesi peserta diberi tugas mengisi kuis , sesi tanya jawab, dan pembahasan mengenai
pengerjaan praktek tugas mandiri

Pertemuan 3

Sesi 1 09.00 - 10.00 WIB

Sesi 2 13.00 - 14.00 WIB

(60 Menit - Pemahaman dan cara menggunakan adobe XD dan Figma)

- Mengaplikasikan cara instalasi Adobe XD dan Figma
- Mengaplikasikan cara menggunakan adobe XD dan Figma

Sesi 1 10.00 - 11.00 WIB

Sesi 2 14.00 - 15.00 WIB

(60 Menit - Pemahaman dan cara menggunakan adobe XD dan Figma)

● Pengajar memberikan penjelasan mendetail tentang fitur dan fungsi Adobe XD dan
Figma, serta memberikan contoh penggunaan dalam desain UI/UX.
● Peserta diberi kesempatan untuk mengajukan pertanyaan dan berdiskusi mengenai
hal-hal yang belum mereka pahami.

Sesi 1 11.00 - 12.00 WIB

Sesi 2 15.00 - 16.00 WIB

(60 Menit - Pemahaman dan cara menggunakan adobe XD dan Figma)

● Peserta akan membuat desain sesuai dengan contoh yang diberikan instruktur menggunakan
Adobe XD atau Figma yang sudah di instal
● Di Akhir sesi peserta diberi tugas mengisi kuis , sesi tanya jawab, dan pembahasan mengenai
pengerjaan praktek tugas mandiri

Pertemuan 4

Sesi 1 09.00 - 10.00 WIB

Sesi 2 13.00 - 14.00 WIB

(60 Menit - Pembuatan desain menggunakan figma dan adobe XD)

- Mampu membuat desain menggunakan figma dan adobe XD
- Mengaplikasikan website icon untuk project UI dan UX

Sesi 1 10.00 - 11.00 WIB

Sesi 2 14.00 - 15.00 WIB

(60 Menit - Pembuatan desain menggunakan figma dan adobe XD)

● Peserta diberikan tugas untuk membuat desain UI/UX yang spesifik menggunakan Figma dan
Adobe XD, dengan mempertimbangkan prinsip desain yang relevan.
● Peserta diberikan penugasan untuk mencari dan mengaplikasikan ikon-ikon website yang sesuai
dengan proyek desain mereka, baik melalui situs web penyedia ikon maupun menggunakan ikon
kustom yang mereka buat sendiri.
● Peserta akan diminta untuk mempresentasikan hasil desain mereka di kelas, menjelaskan
pemikiran dan alasan di balik desain yang mereka buat, serta mendapatkan umpan balik dari
pengajar dan sesama peserta

Sesi 1 11.00 - 12.00 WIB

Sesi 2 15.00 - 16.00 WIB

(60 Menit - Pembuatan desain menggunakan figma dan adobe XD)

● Peserta akan mengimplementasikan icon di website atau aplikasi yang sudah dibuat
● Di Akhir sesi peserta diberi tugas mengisi

Pertemuan 5

Sesi 1 09.00 - 10.00 WIB

Sesi 2 13.00 - 14.00 WIB

(60 Menit - Pembuat desain website dengan HTML dan CSS)

- Mengaplikasikan cara membuat desain website dengan HTML & CSS

Sesi 1 10.00 - 11.00 WIB

Sesi 2 14.00 - 15.00 WIB

(60 Menit -

Pembuat desain website dengan HTML dan CSS)

● Pengajar memberikan penjelasan mendetail mengenai dasar-dasar HTML dan CSS, termasuk
struktur dasar HTML, pemformatan teks, penggunaan tag, dan styling menggunakan CSS.
● Peserta akan diajak untuk mengikuti langkah-langkah praktis dalam membuat desain website
sederhana menggunakan HTML dan CSS, seperti membuat layout, mengatur tata letak, dan
menerapkan efek visual.

Sesi 1 11.00 - 12.00 WIB

Sesi 2 15.00 - 16.00 WIB

(60 Menit -

Pembuat desain website dengan HTML dan CSS)

● Peserta akan membuat desain tampilan dengan menggunakan HTML dan CSS
● Di Akhir sesi peserta diberi tugas mengisi kuis , sesi tanya jawab, dan pembahasan mengenai
pengerjaan praktek tugas mandiri

8. Aspek Kompetensi / Output Kompetensi

PENGETAHUAN (KOGNITIF)

Merancang desain sesuai dengan design thinking UI/UX
Menggunakan aplikasi Adobe xd dan Figma
Penerapan UI/UX dalam suatu website dan aplikasi
Penerapan prototyping dalam suatu website dan aplikasi
Penerapan icon untuk project UI dan UX pada suatu website
Penggunaan fitur figma untuk proses pembuatan desain aplikasi dan website
Penerapan desain website dengan HTML & CSS

SIKAP KERJA (AFEKTIF)

Sikap cermat dalam mengimplementasikan design
thinking UI UX
Sikap cermat dalam menggunakan aplikasi Adobe xd dan Figma
Teliti dalam menggunakan tool-tools yang ada di dalam aplikasi Figma
Teliti dalam membuat desain prototyping
Cermat dalam memilih icon-icon yang tepat untuk di pasang di desain
Teliti dalam membuat desain aplikasi
Cermat dalam membuat design website menggunakan HTML & CSS

KETERAMPILAN (PSIKOMOTOR)

Merancang prototyping dengan kaidah design
Mengombinasikan cara dalam menginstall Adobe xd dan Figma
Mengintegrasikan cara membuat website icon untuk project UI dan UX dengan teliti
Mengintegrasikan prototyping berdasarkan Client Brief
Menampilkan icon pada desain website
Menyelesaikan desain website dengan figma
Menyelesaikan desain Website perusahaan menggunakan HTML & CSS

9. Metode Ajar

Metode Ajar yang digunakan dalam pelatihan ini yaitu DARING (FULL WEBINAR)

10. Harga

Rp. 1.500.000

11. Tenaga Pelatih