Materi pembelajaran ini disusun untuk membantu peserta didik Fase E (Kelas X) SMK dalam merancang, memproduksi, dan mempublikasikan sebuah website profil perusahaan (Company Profile) yang profesional dan mudah diakses oleh publik.
1. Pengantar Web Company Profile
Web company profile adalah wajah digital sebuah perusahaan. Tujuan utamanya adalah untuk membangun kredibilitas, memberikan informasi resmi kepada klien atau pelanggan, dan menjadi pusat informasi layanan atau produk yang ditawarkan.
Elemen Penting dalam Company Profile
- Identitas Visual: Logo, skema warna (color palette), dan tipografi yang konsisten dengan branding perusahaan.
- Informasi Perusahaan: Sejarah singkat, visi misi, dan struktur organisasi atau tim inti.
- Layanan atau Produk: Penjelasan mendetail mengenai apa yang ditawarkan oleh perusahaan kepada masyarakat.
- Kontak dan Lokasi: Alamat lengkap, nomor telepon, email, dan tautan ke media sosial resmi perusahaan.
2. Tahap Produksi: Merancang Arsitektur dan Antarmuka
Sebelum menulis kode (coding), seorang pengembang web dan desainer UI/UX harus merancang struktur web agar logis dan mudah dinavigasi.
A. Membuat Peta Situs (Sitemap)
Sitemap adalah diagram hierarki yang menunjukkan struktur halaman pada sebuah website. Sitemap membantu tim memahami alur navigasi pengguna.
Contoh struktur standar web company profile:
- Home (Beranda): Halaman pembuka yang berisi ringkasan layanan, hero image, dan tombol Call to Action (CTA).
- About Us (Tentang Kami): Berisi visi, misi, dan sejarah perusahaan.
- Services (Layanan): Detail produk atau jasa yang ditawarkan.
- Portfolio / Client: Bukti pekerjaan atau daftar klien yang pernah bekerja sama.
- Contact (Kontak): Formulir kontak, peta lokasi (Google Maps), dan info email/telepon.
B. Wireframing (Kerangka Visual)
Wireframe adalah sketsa kasar tata letak halaman web sebelum diberi elemen desain seperti warna atau gambar asli. Tujuannya adalah untuk memastikan penempatan elemen (teks, gambar, tombol) sudah tepat dan fungsional.
| Komponen Wireframe | Fungsi dan Penempatan |
| Header & Navigation | Terletak di paling atas. Berisi Logo (kiri) dan Menu Navigasi (Kanan/Tengah). |
| Hero Section | Bagian yang pertama dilihat di bawah header. Berisi gambar/video besar, headline penawaran utama, dan tombol CTA utama. |
| Body Content | Berisi grid layanan, keunggulan perusahaan, dan testimoni klien. |
| Footer | Terletak di paling bawah. Berisi copyright, tautan cepat (quick links), info kontak, dan ikon media sosial. |
3. Tahap Diseminasi: Publikasi dan Optimasi
Setelah website selesai diproduksi (baik melalui coding HTML/CSS/JS maupun CMS), tahap selanjutnya adalah diseminasi (penyebarluasan) agar web bisa diakses oleh publik di internet.
A. Domain dan Hosting
Untuk mempublikasikan web, dibutuhkan dua komponen utama:
- Domain: Alamat unik website Anda di internet. Pemilihan domain harus singkat, mudah dieja, dan merepresentasikan merek.
- Hosting: Tempat (server) untuk menyimpan semua file website (HTML, CSS, gambar, video) agar bisa diakses online 24 jam.
| Jenis Hosting (Contoh) | Karakteristik & Penggunaan |
| Shared Hosting | Satu server dibagi untuk banyak website. Cocok untuk web company profile pemula dengan traffic rendah hingga menengah. Harga terjangkau. |
| Cloud Hosting | Sumber daya fleksibel dan performa tinggi. Cocok untuk web perusahaan besar dengan traffic tinggi. |
| Static Hosting | Sangat cepat, namun hanya bisa digunakan untuk website statis (HTML/CSS/JS tanpa database). |
B. Dasar-dasar Search Engine Optimization (SEO)
SEO adalah praktik mengoptimalkan website agar mendapatkan peringkat tinggi di hasil pencarian organik (seperti Google). Strategi SEO dasar yang wajib diterapkan pada web company profile meliputi:
- Title Tags dan Meta Descriptions: Menyertakan kata kunci (keywords) relevan pada judul halaman dan deskripsi singkat yang muncul di Google.
- Optimasi Gambar (Alt Text): Semua gambar harus memiliki atribut teks alternatif (alt text) agar mesin pencari dapat memahami konteks gambar, serta ukuran file gambar harus dikompresi agar web memuat (loading) lebih cepat.
- URL Ramah Mesin Pencari: Gunakan struktur URL yang bersih dan bisa dibaca manusia.
- Responsivitas Seluler (Mobile-Friendly): Pastikan website tampil sempurna di perangkat smartphone, karena Google memprioritaskan website yang responsif.
4. Rekomendasi Perangkat (Tools) Produksi
- Desain UI/UX & Wireframing: Figma, Adobe XD, Balsamiq.
- Teks Editor / Code Editor: Visual Studio Code, Sublime Text.
- CMS / Web Builder: WordPress, Webflow, Wix.
