Courses Details

Web & Mobile Designer Training

Kurikulumnya akan sangat praktis saat kami memandu Anda dari awal hingga akhir bekerja sebagai Desainer, hingga mempelajari cara membuat desain profesional akhir dan kemudian mengubahnya menjadi situs web atau aplikasi sebenarnya menggunakan HTML dan CSS. 

Topik yang dibahas dalam kursus ini adalah ...

• 00 Prinsip Desain Web & Seluler + Desain vs Pengembangan Web

• 01 MEMULAI – Sketsa, Inspirasi + Struktur

  • 1. Membuat sketsa

    • Pengantar membuat sketsa

    • Membuat sketsa aliran UX

    • Tips membuat sketsa

  • 2. Inspirasi

    • Bagaimana tetap terinspirasi

    • Cara mencari inspirasi online

  • 3. Arus Pengguna

    • Apa itu aliran pengguna?

    • Yang harus dan tidak boleh dilakukan

    • Mempercepat alur kerja kami dengan komponen

    • Membuat alur pengguna kita sendiri (Pendaftaran) Bagian 1

    • Membuat alur pengguna kita sendiri (Pencarian) Bagian 2

    • Membuat alur pengguna kita sendiri (Checkout) Bagian 3

  • 4. Peta Situs

    • Pengantar peta situs

    • Membuat peta situs dasar

    • Apa yang harus Anda lakukan sebelum memulai

    • Membuat peta situs (bagian 1)

    • Membuat peta situs (bagian 2)

    • Kiat untuk memulai

• 02 JELAJAHI DAN ITERASI – Wireframe, Prototyping, dan Umpan Balik

  • 1. Gambar rangka

    • Apa itu wireframe?

    • Bagaimana cara membuat gambar rangka?

    • Mempercepat alur kerja Anda di Figma

    • Membuat halaman rumah kami

    • Membuat halaman produk

    • Membuat halaman checkout

  • 2. Pembuatan prototipe

    • Dasar-dasar pembuatan prototipe di Figma (Perangkat + Pemicu)

    • Dasar-dasar pembuatan prototipe di Figma (Aksi)

    • Dasar-dasar pembuatan prototipe di Figma (Overflow)

    • Dasar-dasar pembuatan prototipe di Figma (Presentasi + Kolaborasi)

    • Menghubungkan bersama aliran pengguna yang cepat di Figma

    • Bekerja pada interaksi kecil dengan Figma

  • 3. Mendapatkan umpan balik

    • Mengapa umpan balik sangat penting?

    • Cara mendapatkan umpan balik yang membangun

• 03 DESAIN VISUAL – Teori Desain + Aksesibilitas

  • 1. Kisi + Spasi

    • Spasi dan Dasar-dasar Grid

    • Grid Responsif di Figma

    • Membuat grid kita sendiri di Figma

    • Aturan jaringan

  • 2. Tipografi

    • Dasar-dasar tipografi Bagian 1

    • Mencocokkan tipografi dengan era

    • Dasar-dasar tipografi Bagian 2

    • Memilih jenis huruf yang tepat

    • Dasar-dasar tipografi Bagian 3

    • Memilih jenis huruf

    • Apakah jenis huruf Anda sesuai dengan skenario Anda?

    • Memperluas sistem tipe yang ada

    • Memilih tipografi di Google Font

    • Mempersempit pilihan tipografi Anda

    • Membuat sistem tipe di Figma

  • 3. Warna

    • Skema Warna

    • Pertanyaan penting untuk ditanyakan sebelum memilih warna

    • Kiat bermanfaat untuk membuat palet warna

    • Membuat palet warna monokromatik

    • Menerapkan palet warna sederhana kami

    • Memperluas palet warna yang ketat

    • Membuat palet warna kita sendiri

  • 4. Formulir + Elemen UI

    • Apa itu Elemen UI

    • Praktik terbaik Bagian 1: Formulir

    • Praktik terbaik Bagian 2: Masukan Bagian 1

    • Praktik terbaik Bagian 2: Masukan Bagian 2

    • Praktik terbaik Bagian 2: Masukan Bagian 3

    • Praktik terbaik Bagian 2: Masukan Bagian 4

    • Praktik terbaik Bagian 3: Tombol

    • Cara membuat komponen di Figma

    • Menggunakan elemen atom di Figma

    • Menggunakan Instance di Figma

    • Mengedit instance untuk membuat komponen baru

    • Menggunakan batasan untuk membuat komponen responsif

    • Membuat formulir pendaftaran di Figma

  • 5. Citra + Ikonografi

    • Sumber daya dan teknik untuk membuat aset visual yang hebat

    • Bekerja dengan foto di Figma Bagian 1

    • Bekerja dengan foto di Figma Bagian 2

    • Bekerja dengan ilustrasi di Figma

    • Menggunakan plugin Figma untuk menemukan Ikon dengan cepat

    • Membuat ikon kustom kami sendiri

  • 6. Aksesibilitas

    • Apa itu aksesibilitas?

    • Teknologi bantu

    • Pola visual untuk aksesibilitas (Bagian 1)

    • Alat untuk membuat desain Anda dapat diakses

    • Pola visual untuk aksesibilitas (Bagian 2)

• 04 EKSPLORASI DESAIN – Desain Aplikasi + Sistem Desain

  • 1. Pola Desain

    • Apa itu pola desain?

    • Mengapa pola desain berharga?

    • Bagaimana menerapkan pola desain

    • Menganalisis pola desain bersama

    • Membedah dan memilih pola desain bersama

  • 2. Desain Seluler

    • Praktik terbaik desain seluler (Bagian 1)

    • Praktik terbaik desain seluler (Bagian 2)

  • 3. Menerapkan Desain Visual

    • Kesetiaan Desain

    • Eksplorasi gaya (Navigasi)

    • Eksplorasi gaya (Kartu)

    • Eksplorasi gaya (Minat)

    • Eksplorasi gaya (Elemen baru)

  • 4. Gerak

    • Pentingnya gerak

    • Tujuan gerak

    • Pengantar Animasi Cerdas

    • Menampilkan kekuatan Smart Animate

  • 5. Interaksi mikro

    • Apa itu interaksi mikro?

    • Mengapa mereka begitu penting?

    • Membuat interaksi mikro kita sendiri (Bagian 1)

    • Membuat interaksi mikro kita sendiri (Bagian 2)

    • Menggunakan Figmotion (Bagian 1)

    • Menggunakan Figmotion (Bagian 2)

• 05 MENEMPATKAN SEMUANYA – Menggunakan Sistem Desain dan pembuatan prototipe Hi-Fi kami dengan Figma

  • 1. Sistem Desain

    • Apa itu sistem desain?

    • Yayasan (warna)

    • Pondasi (grid dan spasi)

    • Fondasi (tipografi)

    • Yayasan (ikonografi)

    • Komponen (tombol)

    • Komponen (Input)

    • Komponen (kartu)

    • Resep (tata letak kartu)

    • Resep (pencarian)

    • Resep (pesanan)

  • 2. Komposisi Akhir

    • Menggunakan sistem desain kami (Penelusuran)

    • Menggunakan sistem desain kami (Deskripsi Produk)

    • Menggunakan sistem desain kami (Keranjang)

• 06 DARI FIGMA KE SITUS WEB (ambil desain Figma dan ubah menjadi situs web langsung menggunakan HTML dan CSS)

   

• 07 HTML + HTML5

• 08 CSS + CSS3 - Dasar-Dasar CSS, Kotak CSS, Flexbox, Animasi CSS

   

• 09 MENYATAKAN SITUS WEB ANDA ONLINE

Kursus baru ini akan membawa Anda dari dasar-dasar di mana kita berbicara tentang prinsip dan dasar-dasar desain grafis, hingga menciptakan produk yang indah, belajar tentang UX/UI dan interaksi, dan menciptakan proses desain lengkap untuk Anda gunakan dengan semua proyek masa depan Anda dan klien. Kami cukup banyak membahas semuanya sehingga pada saat Anda bertanggung jawab merancang produk, Anda memiliki garis besar langkah demi langkah dan panduan untuk bekerja sebagai desainer profesional.

Kami akan mengajari Anda keterampilan yang memungkinkan Anda menagih banyak uang untuk waktu Anda. Tidak bersaing untuk beberapa dolar per jam di beberapa situs web lepas acak. Tujuannya adalah untuk memberi Anda keterampilan seorang desainer top, dan di sepanjang jalan, kami akan merancang produk aktual untuk perusahaan yang dapat Anda tambahkan ke portofolio Anda.

Kursus ini bukan tentang membuat Anda hanya menonton tanpa memahami prinsip-prinsipnya sehingga ketika Anda selesai dengan kursus Anda tidak tahu apa yang harus dilakukan selain menonton tutorial lainnya. Tidak! Kursus ini akan mendorong Anda dan menantang Anda untuk beralih dari seorang pemula mutlak menjadi seseorang yang merupakan Desainer papan atas yang dapat dipekerjakan! Desain adalah keterampilan berharga yang tidak mudah ketinggalan zaman seperti kebanyakan keterampilan teknis. Tren berubah, tetapi keterampilan dan dasar-dasar yang Anda pelajari dalam kursus ini akan membawa Anda bertahun-tahun ke depan.

Kursus ini untuk Anda jika:
- Anda adalah seorang pemula yang ingin menjadi seorang desainer dan freelance

- Anda adalah seorang desainer yang ingin mengenakan biaya lebih untuk pekerjaan Anda

- Anda adalah seorang pengembang yang ingin meningkatkan keterampilan desain mereka

Untuk siapa kursus ini:

• Siapa saja yang ingin memulai bisnis Web atau Desain Seluler sebagai freelancer, atau bekerja sebagai desainer di perusahaan
• Pengembang Web dan Pengembang Seluler yang ingin menambahkan keterampilan berharga lainnya ke sabuk alat mereka
• Siapa pun yang ingin dipekerjakan sebagai Desainer Web, Desainer Seluler, Desainer UI/UX
• Siapapun yang ingin belajar tentang fitur CSS3 terbaru seperti Flexbox, CSS Grid dan Variabel CSS serta HTML5

• Daftar Sekarang
• 4.8 ( 3,264)

Created by DigiTech Training Center