29 Tutorial Desain Web Terbaik

esain web sangat penting untuk kesuksesan sebuah situs web — menurut laporan State of Create dari Adobe , 46% orang “tidak akan membeli dari suatu merek jika situs web atau pengalaman selulernya tidak dirancang dengan baik.” Jadi, bagaimana Anda bisa belajar membuat desain web yang luar biasa dan membangun keterampilan Anda? Jawabannya: tutorial desain web. Ada banyak tutorial desain web yang fantastis di luar sana yang akan mengajarkan Anda apa pun, mulai dari desain responsif, tata letak, dan hierarki hingga wireframing, UX, dan UI.

Tutorial desain web terbaik
Ilustrasi oleh OrangeCrush

Seperti yang akan dikatakan oleh sebagian besar perancang web profesional kepada Anda, desain web paling baik dipelajari dengan melakukannya. Anda hanya perlu menguasai dasar-dasarnya sebelum memulai. Untuk itu, tutorial desain web online adalah pilihan yang bagus. Dari kelas video gratis hingga tutorial desain web interaktif berbayar, Anda memiliki banyak opsi berbeda — begitu banyak, sulit untuk memilih yang terbaik.

Untuk membantu Anda, berikut adalah pilihan kami untuk tutorial desain web terbaik di internet dan di mana menemukannya, bersama dengan spesialisasi berbagai platform pembelajaran, harga dan untuk siapa mereka direkomendasikan.

Berikut adalah 29 tutorial desain web terbaik untuk setiap tingkat keahlian:

  1. Envato Tuts + tutorial desain web
    • Menggunakan Grid dalam Desain Web
    • Panduan Pemula untuk menggunakan WordPress
    • Cara Membuat Halaman Pendaratan di WordPress dengan Cepat
    • Memulai dengan SVG untuk Desain Web
  2. Tutorial desain web Lynda.com (LinkedIn Learning)
    • Javascript untuk Desainer Web
    • Karir dalam Desain dan Pengembangan Web
    • Penelitian UX: Goer Guerrilla
    • Perancang Web yang Tidak Disengaja
  3. Tutorial desain web Coursera
    • Desain Web untuk Semua Orang: Dasar-Dasar Pengembangan Web & Pengkodean
    • Pengantar Desain UI
    • Pengantar Desain Pengalaman Pengguna
  4. Tutorial desain web Youtube
    • Proses Desain UX: Cara Membuat Sketsa Wireframes
    • Merancang situs web: Perencanaan & peta situs
    • Pengantar Desain Web Responsif – HTML & CSS Tutorial
    • Kursus Desain Crash UI untuk Pemula
  5. Tutorial desain web Pluralsight
    • Seni Pengujian A / B dalam Desain Web
    • Desain Web Responsif Pertama Seluler
    • Desain Web Hands On Responsif
  6. Tutorial desain web Udemy
    • 7 Proyek Desain Web Photoshop. Pelajari Desain Web dengan Melakukan
    • Kursus Merancang Web Terbaik di Photoshop
    • Pelajari Photoshop, Desain Web & Freelancing Menguntungkan
    • Desain Web Lengkap: Dari Figma ke Webflow ke Freelancing
  7. Tutorial desain web Dreamweaver
    • Ambil Info Desain Web dari File Photoshop
    • Tahapan Proyek Desain Web di Dreamweaver
    • Anatomi Konstruksi Situs Web
    • Dasar-dasar Desain Web Responsif
  8. Tutorial desain web Skillshare
    • Essentials Desain Web: Membuat Homepage Pemasaran yang Mendorong Hasil
    • Masterclass Desain Digital untuk Desainer Grafis
    • Visual Hierarchy & Spacing dalam Desain Web

 

1. Envato Tuts + tutorial desain web

Cuplikan layar tutorial Envato Tuts + web design
melalui Envato Tuts +

Pastikan Anda memeriksa:

Menggunakan Grid dalam Desain Web. Dalam tutorial ini Anda akan belajar cara menggunakan sistem grid dari awal hingga selesai. Panduan hebat untuk pemula yang menunjukkan kepada Anda bagaimana kisi dapat membantu Anda membuat desain web yang bersih dan terorganisir.

 

Cuplikan layar tutorial Envato Tuts + web design
melalui Envato Tuts +

Tentang Envato Tuts +

Envato Tuts + adalah nama lama dan tepercaya tidak hanya untuk tutorial desain web, tetapi juga pengembangan pendidikan juga. Dengan demikian, mereka adalah tempat yang baik untuk memulai daftar kami dan untuk calon desainer web.

Envato Tuts memecah materi pokoknya menjadi artikel, video, dan ebook yang mudah dicerna, yang dapat Anda jelajahi dengan cukup mudah di situs mereka. Ini memungkinkan mereka untuk benar-benar mengasah subjek tertentu, jadi, misalnya, jika Anda ingin merancang halaman arahan, Anda dapat menemukan beberapa konten khusus tentang halaman arahan.

Ada banyak sampel gratis di situs mereka, sehingga Anda dapat mencicipi gaya mengajar mereka untuk melihat apakah itu sesuai dengan Anda.

Spesialisasi: 

  • pengembangan web
  • Desain web untuk anak-anak
  • Desain situs WordPress
  • Tutorial desain web responsif
  • Halaman arahan dan situs web satu halaman

Harga: 

  • $ 16,50 / bulan
  • tutorial dasar gratis, dan banyak kursus menawarkan sampel gratis

Direkomendasikan untuk: 

  • Desainer yang ingin mendidik diri mereka dalam pengembangan web untuk melengkapi keahlian desain mereka
  • Pembelajar cepat yang ingin mengambil mata pelajaran lebih menengah dan lanjutan

2. Lynda.com (LinkedIn Learning) tutorial desain web

Cuplikan layar tutorial desain web Lynda.com
melalui Lynda.com

Pastikan Anda memeriksa:

Javascript untuk Desainer Web . Sebagai seorang perancang web, memiliki keterampilan pengkodean dalam kotak peralatan Anda — bahkan pengkodean bukanlah sesuatu yang Anda lakukan secara teratur — dapat sangat membantu Anda. Ini bisa berarti menawarkan Javascript sebagai salah satu keahlian Anda kepada klien potensial, atau itu bisa berarti memahami bagaimana Javascript bekerja dan berkolaborasi lebih efektif dengan pengembang.

 

Cuplikan layar tutorial desain web Lynda.com
melalui Lynda.com

Tentang Lynda

Sekarang diakuisisi oleh LinkedIn Learning, Lynda.com mengambil pendekatan akademik yang lebih terstruktur dengan tutorial desain web mereka. Mereka memiliki beragam topik yang mencakup pengembangan web, pengkodean, dan aspek bisnis pembuatan situs web , dan memecah kursus mereka menjadi topik individual sehingga Anda dapat mencampur dan mencocokkan sesuai kebutuhan.

Lynda.com juga merupakan tempat yang tepat untuk mempelajari cara menggunakan alat desain web tertentu, seperti Dreamweaver CC atau Adobe Animate CC, serta platform pembangun situs tertentu seperti Shopify atau Wix. Strukturnya tampaknya dibangun untuk orang yang tahu apa yang ingin mereka pelajari.

Spesialisasi: 

  • pengembangan web
  • Perangkat lunak desain web
  • Instruksi pembangun situs
  • Desain UX
  • Teknik desain web

Harga: 

  • $ 29,99 / bulan ($ 19,99 / bulan ditagih setiap tahun)
  • Uji coba gratis 1 bulan

Direkomendasikan untuk: 

  • Peserta didik yang memiliki topik tertentu dalam pikiran
  • Desainer yang ingin mempelajari alat atau platform desain tertentu

3. Tutorial desain web Coursera

Cuplikan layar tutorial desain web Coursera
melalui Coursera.com

Pastikan Anda memeriksa:

Desain Web untuk Semua Orang: Dasar-Dasar Pengembangan Web & Pengkodean . Kursus ini menyentuh sedikit dari segalanya, dan semuanya ada di tingkat pemula jadi jika Anda baru mengenal desain web, atau hanya merek baru untuk aspek-aspek tertentu dari desain web, Anda akan mendapatkan dasar yang kuat di sini. Keterampilan yang tercakup dalam kursus ini termasuk lembar gaya kaskade, desain web responsif, HTML dan aksesibilitas web.

Cuplikan layar tutorial desain web Coursera
melalui Coursera.com

Tentang Coursera:

Dari semua tutorial desain web dalam daftar ini, Coursera adalah yang paling mirip perguruan tinggi yang sebenarnya — terutama karena mereka menawarkan kursus perguruan tinggi terakreditasi dan berpartisipasi dalam program gelar online untuk universitas di seluruh dunia.

Coursera sangat besar , dan berhubungan dengan topik yang jauh lebih dari sekedar desain web — tetapi hanya karena mereka tidak berspesialisasi secara khusus dalam desain web tidak berarti kelas mereka tidak memadai. Sebagian besar kelas mereka datang langsung dari universitas dan diajarkan oleh para profesor. Dan karena mereka organisasi yang sangat besar, Anda dapat menemukan kelas dalam banyak bahasa berbeda tentang berbagai topik.

Spesialisasi: 

  • pengembangan web
  • Tutorial desain web responsif
  • Desain UX
  • Ilmu Komputer
  • Pemasaran Konten
  • Desain grafis
  • … mereka memiliki cukup banyak topik yang dibahas

Harga: 

  • Biaya Coursera sangat bervariasi; Anda akan menemukan kelas sampel gratis bersama program gelar online $ 15.000.
  • Seperti biaya kuliah, mereka memiliki opsi bantuan keuangan yang tersedia.

Direkomendasikan untuk: 

  • Peserta didik yang menginginkan gelar atau sertifikasi aktual
  • Penutur bahasa Inggris bukan asli

4. Tutorial desain web Youtube

 

Pastikan Anda memeriksa:

Proses Desain UX: Cara Membuat Sketsa Wireframes . Tutorial ini memecah proses desain UX dari awal hingga selesai dan membawa Anda melalui pertimbangan pertama ke sketsa gambar rangka yang sudah jadi.

 

Tentang Youtube:

Youtube adalah sumber yang luar biasa untuk mempelajari hampir semua hal — dan desain web, pengembangan web, UX, dan UI tidak terkecuali. Hal yang hebat tentang Youtube adalah kekayaannya dari beragam video dari para pakar desain web yang berbagi kebijaksanaan dan pengalaman mereka. Apa pun yang ingin Anda pelajari atau di mana minat Anda, ada saluran Youtube di luar sana untuk Anda.

Harga: 

  • Gratis

Direkomendasikan untuk:

  • Pemula hingga profesional yang mencari pengalaman belajar biasa

5. Tutorial desain web Pluralsight

Cuplikan layar tutorial desain web responsif Pluralsight
melalui Pluralsight.com

Pastikan Anda memeriksa: 

Seni Pengujian A / B untuk Desain Web . Tutorial ini untuk perancang web tingkat lanjut, dan ini membimbing Anda melalui topik yang perlu dikuasai perancang serius: pengujian A / B. Anda akan belajar cara mengintegrasikan alat pengujian terpisah ke halaman arahan responsif dan menganalisis hasil yang dihasilkannya, sesuatu yang kemungkinan besar akan Anda lakukan sebagai perancang web yang aktif.

 

Cuplikan layar tutorial desain web responsif Pluralsight
melalui Pluralsight.com

Tentang Pluralsight

Meskipun banyak konten mereka berasal dari beberapa tahun yang lalu, Pluralsight masih tetap menjadi salah satu tutorial desain web yang paling dicintai dan berperingkat terbaik. Melalui video yang dapat diunduh, Anda dapat menonton secara offline, Pluralsight memecah kursus menjadi bagian-bagian yang dapat dikelola masing-masing sekitar 5 menit (dengan beberapa hanya satu menit dan beberapa terbentang hingga 20 menit).

Secara khusus, Pluralsight berspesialisasi dalam tutorial desain web yang responsif. Jika Anda ingin memprioritaskan desain web untuk perangkat seluler, Anda akan menemukan lebih banyak kursus di sini dengan dedikasi itu. Mereka juga menawarkan tutorial desain web interaktif, tetapi hanya untuk anggota Premium.

Spesialisasi: 

  • Tutorial desain web responsif
  • pengembangan web
  • Perangkat lunak desain web

Harga: 

  • $ 29 / bulan ($ 24,92 / bulan ditagih setiap tahun)
  • $ 37,42 / bulan ditagih setiap tahun untuk Premium, yang meliputi ujian praktik sertifikasi dan tutorial desain web interaktif
  • Uji coba gratis 10 hari

Direkomendasikan untuk: 

  • Desainer web yang ingin memprioritaskan desain seluler
  • Pelajar yang lebih suka bekerja offline

6. tutorial desain web Udemy

Cuplikan layar tutorial desain web Udemy
melalui Udemy.com

Pastikan Anda memeriksa:

7 Proyek Desain Web Photoshop. Pelajari Desain Web dengan Melakukan . Photoshop adalah program populer untuk desainer web. Kursus ini sebenarnya adalah tujuh tutorial dalam satu, semua berfokus pada pembuatan desain web dari awal di Photoshop. Ini mencakup desain yang harus diketahui seperti cara menghapus gambar dari latar belakang tanpa merusak gambar dan cara menyelaraskan banyak lapisan serta hal-hal yang ingin Anda ketahui jika Anda ingin menjadi perancang web profesional, seperti cara menonjol di antara persaingan dan bagaimana membantu klien Anda mengembangkan bisnis mereka melalui desain web yang hebat.

 

Cuplikan layar tutorial desain web Udemy
melalui Udemy.com

Tentang Udemy: 

Salah satu nama paling tepercaya dalam tutorial desain web, Udemy sering menjadi pilihan pertama bagi para desainer yang ingin mempelajari topik atau keterampilan baru. Itu sebagian berkat model pay-as-you-go mereka — alih-alih membeli keanggotaan atau berlangganan, Anda membeli kursus individual, jadi Anda hanya membayar untuk apa yang Anda butuhkan.

Karena Udemy sangat populer, mereka memiliki sistem penilaian yang andal sehingga Anda dapat melihat kelas mana yang berharga. Itu sangat penting karena ada banyak kelas, keuntungan lain jika Anda ingin menemukan topik yang kurang populer seperti Teori Gestalt atau mendesain untuk tema individu.

Spesialisasi: 

  • pengembangan web
  • Desain situs WordPress
  • Tutorial desain web responsif
  • Perangkat lunak desain web

Harga: 

  • Harga bervariasi berdasarkan kelas, tetapi kebanyakan adalah $ 18,99
  • Jumlah jam juga bervariasi, jadi periksa untuk melihat apakah Anda mendapatkan nilai uang Anda
  • Beberapa kelas gratis.

Direkomendasikan untuk:

  • Pemetik ceri — Anda hanya dapat membayar untuk kelas yang Anda butuhkan
  • Peserta didik yang tidak dapat menemukan topik tertentu di tempat lain.

7. Tutorial desain web Dreamweaver

Cuplikan layar Tutorial Dreamweaver tutorial desain web
melalui Tutorial Dreamweaver

Pastikan Anda memeriksa:

Ambil Info Desain Web dari File Photoshop . Dalam tutorial video ini, Anda akan belajar cara mengekstrak warna, teks, gambar, dan kode CSS dari file Photoshop untuk menggunakannya dengan mudah di web.

Cuplikan layar Tutorial Dreamweaver tutorial desain web
melalui Tutorial Dreamweaver

Tentang Tutorial Dreamweaver:

Agar lebih jelas, Adobe Dreamweaver CC adalah perangkat lunak individual untuk desain web, dianggap sebagai pemimpin industri di antara desainer profesional. Blog mereka, Tutorial Dreamweaver , menawarkan puluhan artikel dan video dengan tutorial desain web mendalam pada kedua teknik desain itu sendiri, dan bagaimana menerapkannya di Dreamweaver.

Menariknya, Anda tidak perlu menggunakan Dreamweaver untuk belajar dari tutorial ini — tetapi itu memang membantu. Keuntungan besar adalah konten ini gratis, menjadikannya titik awal yang bagus jika Anda kekurangan uang tunai.

Spesialisasi 

  • Mendesain dalam Dreamweaver CC
  • Tutorial desain web responsif
  • Merencanakan proses desain
  • pengembangan web

Harga: 

  • Gratis

Direkomendasikan untuk: 

  • Peserta didik kekurangan uang tunai
  • Desainer yang menyukai Dreamweaver CC

8. Tutorial desain web Skillshare

Cuplikan layar tutorial desain web Skillshare
via Skillshare

Pastikan Anda memeriksa:

Essentials Desain Web: Membuat Homepage Pemasaran yang Mendorong Hasil . Video tutorial ini hanya berdurasi 60 menit, tetapi dalam 60 menit itu, Anda akan mempelajari prinsip utama merancang beranda pemasaran yang efektif. Tutorial ini bukan hanya tentang aspek visual desain, tetapi bagaimana mendesain halaman web dengan tujuan mengubah pengunjung sebanyak mungkin.

 

Cuplikan layar tutorial desain web Skillshare
via Skillshare

Tentang Skillshare:

Seperti Coursera, Skillshare sangat luar biasa dan menawarkan kelas di luar desain dan pengembangan web — meskipun mereka melayani profesi kreatif seperti desain web. Kursus dibagi menjadi pelajaran video sekitar 5-10 menit masing-masing, yang dapat Anda tonton sesuai jadwal Anda sendiri sampai selesai.

Keindahan Skillshare adalah Anda dapat dengan mudah mengembangkan topik yang terpisah, namun terkait. Misalnya, jika Anda ingin memasukkan taktik SEO ke dalam desain web Anda, Anda dapat mengikuti kursus itu. Paket keanggotaan mereka menawarkan kelas tanpa batas, sehingga peserta didik dapat memanfaatkannya dengan mempelajari bidang-bidang seperti desain grafis, animasi, penulisan kreatif, atau strategi bisnis digital.

Spesialisasi: 

  • pengembangan web
  • Desain UX
  • Tutorial desain web responsif
  • Desain situs WordPress
  • Desain grafis
  • Animasi
  • Topik terkait lainnya: SEO, e-commerce, dll.

Harga: 

  • $ 15 / bulan ($ 8,25 / bulan ditagih setiap tahun)
  • Jejak 14 hari gratis setelah mendaftar
  • Ribuan kelas gratis jika Anda kekurangan dana

Direkomendasikan untuk: 

  • Peserta didik yang menginginkan pendidikan yang lebih luas di luar desain web saja

 

 

 

 

sumber:99designs.com

Latest articles

12.6k Followers
Follow

Related articles