Saat mempelajari pemrograman, seseorang mungkin menemukan dua fase berbeda
-
Mempelajari dasar-dasarnya: Anda mulai menjelajahi anatomi program komputer, mempelajari cara memikirkan masalah sederhana dalam satuan logika, dan mulai memformalkan unit-unit ini menjadi instruksi kode. Pada tahap ini, Anda belajar tentang mata pelajaran abstrak dan latihan sederhana. Jika dilakukan dengan benar dan diberi waktu yang cukup, siapa pun akan mampu memahami dan menulis program logis sederhana menggunakan bahasa pilihan.
-
Fase kedua, yang bagi kebanyakan orang dianggap sedikit lebih menakutkan, terdiri dari mempelajari ekosistem pengembangan: langkah alami berikutnya setelah memperoleh pengetahuan pemrograman sederhana adalah memilih subdomain pemrograman (pengembangan web, pengembangan aplikasi seluler, sistem tertanam, dan sejenisnya ) dan mulai belajar tentang cara memecahkan masalah menggunakan platform spesifik tersebut. Kesulitannya di sini adalah tidak lagi soal mencakup serangkaian hal mendasar, mempraktikkan setiap konsep, dan mengulanginya. Seringkali mustahil untuk mencakup setiap alat, setiap teknologi, dan mengikuti setiap prinsip. Cara yang tepat untuk melakukan hal ini adalah dengan melakukan eksperimen dan penelitian dalam jumlah yang sehat. Kemungkinannya adalah Anda hanya perlu memperoleh sedikit keterampilan, dan menggunakan sejumlah alat untuk memulai tugas-tugas sederhana. Setelah Anda merasa nyaman pada level ini, Anda dapat mencoba memperluas ke seperangkat alat baru dan terus berkembang. Mengikuti metodologi ini, kami akan mencoba membangun landasan yang kuat dalam domain pengembangan web melalui eksplorasi teknologi dan alat yang digunakan untuk membuat halaman arahan sederhana.
Dalam postingan blog ini, kami akan melakukan eksplorasi singkat tentang lanskap pengembangan web frontend, dengan fokus pada pengembangan halaman arahan. Kami akan membahas pilihan sumber daya yang kami sarankan Anda periksa untuk berbagai bagian pengembangan yang mungkin Anda temui. Di akhir artikel ini, Anda akan memiliki gambaran yang lebih jelas tentang cara membuat halaman arahan. Lihat video pendamping ini untuk melihat contoh praktisnya.
Lanskap Pengembangan Laman Landas
Halaman arahan adalah istilah yang awalnya digunakan oleh pakar pemasaran digital untuk merujuk pada halaman web mandiri yang digunakan untuk tujuan pemasaran dan kampanye periklanan. Konsepnya agak sederhana: pengunjung yang tertarik pada produk atau layanan yang disediakan oleh perusahaan mengklik link produk tersebut, lalu “mendarat” di halaman web yang memiliki deskripsi kaya yang menggabungkan teks, gambar, dll. dari produk atau melayani. Halaman tersebut berisi tombol pembelian, yang disebut “CTA” (Call To Action) untuk mengubah pengunjung menjadi pelanggan yang membayar. Seperti yang Anda duga, menciptakan pengalaman pengguna yang baik sangat penting untuk memiliki tingkat konversi yang baik.
Sepanjang artikel ini, kita akan mempelajari banyak cara dan alat yang memungkinkan kita membuat halaman arahan yang memenuhi perannya. Penting untuk disebutkan bahwa ada pertimbangan lain saat membuat halaman arahan yang terkait dengan SEO (Search Engine Optimization). SEO akan dibahas di lokakarya mendatang.
Inspirasi Desain
Baik Anda berpengalaman dalam membuat halaman arahan atau baru memulai, Anda akan mendapati bahwa sering kali sulit menentukan dengan tepat seperti apa tampilan situs web yang Anda inginkan. Seringkali juga terjadi ketika bekerja dengan klien, mereka tidak tahu persis desain apa yang mereka inginkan untuk halaman web mereka. Biasanya, desain mockup dan prototipe akan diserahkan kepada pengembang oleh desainer web yang berspesialisasi dalam jenis pekerjaan ini. Memiliki sumber desain web yang andal akan sangat membantu. Sumber-sumber tersebut akan memungkinkan Anda mengikuti perkembangan tren desain, mendorong kreativitas Anda, dan… membantu Anda memulai. Dua sumber daya terbaik yang dapat Anda gunakan untuk mendapatkan inspirasi desain untuk proyek Anda berikutnya adalah Dribbble dan Behance.
Menggiring bola
Dribbble mungkin adalah sumber daya paling populer di bidang desain web. Ini adalah komunitas desainer yang berbagi karyanya untuk meningkatkan keterampilan, saling membantu, dan mendapatkan masukan yang membangun. Ini berisi berbagai macam desain di hampir semua subjek atau bidang yang dibuat oleh orang-orang kreatif dari seluruh dunia, bersama dengan masukan dari komunitas, menjadikannya tempat yang ideal untuk mendapatkan inspirasi.
Terima kasih
Behance adalah komunitas desain populer lainnya yang dapat membantu Anda menemukan inspirasi. Situs web ini menawarkan fitur pencarian lanjutan yang memberi Anda akses mudah ke karya spesifik yang Anda minati, menggunakan kata kunci, bidang, dan palet warna. Penting juga untuk dicatat bahwa Behance adalah bagian dari Adobe, dan terintegrasi dengan rapi dengan cloud kreatif Adobe.
Dribbble dan Behance keduanya merupakan platform hebat untuk inspirasi desain web dan Anda juga tidak akan salah memilihnya. Kami mendorong Anda untuk mulai menjelajahi desain dan membuat desain Anda sendiri!
Pembuatan Prototipe Desain
Sekarang setelah Anda terinspirasi oleh karya desainer berbakat, inilah saatnya Anda mulai membuat prototipe desain halaman arahan Anda. Pembuatan prototipe adalah fase penting dalam membangun halaman arahan. Ini dapat didefinisikan sebagai proses eksperimental di mana Anda menerapkan ide ke dalam struktur yang terlihat, sehingga Anda dapat menyempurnakan dan memvalidasinya dengan tim atau klien Anda. Pada akhir fase pembuatan prototipe, Anda akan memiliki desain yang siap untuk ditampilkan di halaman arahan Anda.
Ada banyak sekali solusi perangkat lunak yang dapat digunakan untuk membuat prototipe desain. Faktanya, ada begitu banyak alat sehingga sulit untuk mengevaluasi, membandingkan, dan memilih satu alat. Kita akan menggunakan Figma, seperti yang biasa digunakan oleh desainer ux/ui. Jika Anda ingin mempelajari cara menggunakan Figma untuk pembuatan prototipe, Anda dapat melihat kursus kilat kami di youtube langsung di sini.
Gambar
Figma adalah alat desain lengkap yang memudahkan desainer dan pengembang UX untuk membangun dan berkolaborasi dalam prototipe desain pada platform berbasis browser yang dihosting di cloud . Figma menekankan pada kesederhanaan dan kemudahan penggunaan.
Antarmuka Figma memungkinkan Anda membuat elemen dan menatanya dengan mengontrol tampilan teks, kisi, dan komponen lain di seluruh halaman. Ia menawarkan berbagai plugin pelengkap, seperti Autoflow untuk menampilkan alur pengguna, Figmotion untuk animasi, dan banyak lagi.
Ikon dan Font
Ikon Tipografi dan Gaya adalah beberapa fitur paling sederhana yang digunakan untuk meningkatkan tampilan halaman web mana pun. Anda ingin menggunakan font dan ikon yang tepat di halaman arahan Anda agar sesuai dengan gagasan umum yang ingin Anda komunikasikan. Untungnya, mudah untuk menemukan dan menerapkan banyak pilihan font dan ikon menggunakan Font Awesome atau Google Fonts.
Font Luar Biasa
Font Awesome adalah perangkat font dan ikon berdasarkan CSS dan Less . Pada tahun 2020, Font Awesome digunakan oleh 38% situs yang menggunakan skrip font pihak ketiga, menempatkannya di posisi kedua setelah Google Fonts (Wikipedia).
Font Awesome didukung oleh banyak perpustakaan frontend seperti Bootstrap, yang awalnya dibuat. Font Awesome membuat integrasi font dan ikon di halaman web semudah menyertakan link CDN. Kemudahan penggunaan ini, serta banyaknya pilihan font dan ikon menjadikannya solusi paling populer di bidangnya.
Google Font
Google Fonts adalah layanan web sumber terbuka gratis yang ditawarkan oleh Google untuk penyematan font di situs web. Ini menawarkan integrasi tanpa batas serta fleksibilitas dan penyesuaian tingkat tinggi.
Terapkan Laman Landas Anda
Sekarang setelah Anda membuat halaman arahan, sekarang saatnya membagikannya kepada semua orang! Langkah terakhir adalah menerapkan halaman arahan Anda menggunakan solusi penyedia hosting. Halaman Github dan Vercel adalah pilihan utama kami. Mereka adalah yang paling populer dan paling mudah digunakan. Vercel adalah alat yang diperkenalkan di [workshop] kami(https://youtu.be/mTfbzZDSv2I), tetapi Halaman Github bekerja dengan cara yang sama.
Halaman Github
Jika Anda sedang belajar coding, kemungkinan besar Anda pernah mendengar tentang Github. Github adalah platform untuk berbagi dan menghosting kode sebagai bagian dari komunitas sumber terbuka. Ia menawarkan fitur yang disebut Halaman GitHub, yang merupakan layanan hosting untuk halaman web publik yang dapat digunakan oleh individu dan organisasi. Semua halaman dihosting secara gratis di domain github.io GitHub, atau pada nama domain khusus jika Anda memilikinya. Halaman GitHub adalah cara sederhana dan efisien untuk menghosting proyek Anda secara gratis jika Anda sudah menggunakan Github untuk kontrol versi.
Vercel
Vercel adalah alternatif Halaman Github yang menawarkan beragam fitur dan konfigurasi. Muncul dengan versi gratis. Kami merekomendasikan Vercel untuk siapa pun yang memiliki proyek kompleks, karena Vercel memberikan pengalaman pengembang yang luar biasa, dan menawarkan dukungan yang luar biasa. Code Labs Academy menggunakannya sebagai bagian dari proses pengembangannya.
Kesimpulan
Artikel ini memperkenalkan alat yang berguna untuk mengembangkan halaman arahan. Lagi! Cara terbaik untuk belajar adalah dengan melakukan, jadi kami sangat menganjurkan Anda untuk mencoba alat ini pada proyek pribadi Anda! Sebagian besar pekerjaan pengembang adalah meneliti solusi yang ada terhadap masalah yang mereka hadapi, dan menghindari penemuan kembali (reinventing the wheel). Hal hebat tentang komunitas pemrograman adalah sifat kolaboratifnya. Kami mendorong Anda untuk memanfaatkan pekerjaan yang telah dibagikan oleh orang lain dan berkontribusi dengan pekerjaan Anda sendiri!
Dan jika Anda ingin mempelajari lebih lanjut tentang mendesain dan membangun situs web keren, lihat Desain UX/UI dan Pengembangan Web kami ) Kamp Pelatihan!
