Real Case Study: Menjadi Web Developer dalam sebulan – Part 1

Intro

Ini adalah bagian pertama dari dua bagian yang akan saya buat untuk menjadikan anda yang ga paham website dan design, Menjadi web developer sekaligus bisa mencari klien untuk jasa anda. Yap benar! dalam sebulan atau bisa saja kurang dari itu. Butuh 3 hari buat saya sebelum saya siap menjadi web developer dulu. anda pun bisa!

Bahkan apabila anda buta mengenai web design sekalipun. Karena kali ini saya akan share proses pembuatan website from scratch (dari nol) sedetail mungkin untuk pemula. Walaupun perusahaan ini fiktif (tidak bisa share klien sebenernya karena policy kerahasiaan). Namun proses yang akan saya bagikan adalah real case study, yang sering saya lalui sebagi seorang web developer,

Oke… Jadi pada dasarnya website adalah portal atau media informasi yang dibuat dan ditujukan untuk pengunjung website. Dan prinsip ini bisa selalu anda jadikan pegangan dalam membuat website, bahwa website itu untuk pengunjung, dan anda sebagai pemilik website adalah penyedia informasi.

Maka “jadikanlah” diri anda sebagai pengunjung dan berikan informasi yang sekiranya pengunjung perlu ketahui tentang anda atau usaha, dan bungkus informasi tsb dalam design yang menarik dan profesional.

Berikut adalah langkah-langkah yang perlu kita siapkan dalam pembuatan website dimana secara garis besar saya akan bagi menjadi 3 bagian. yaitu :

1. Planning. Perencanaan untuk kira-kira berapa jumlah halaman dan fungsi masing-masing dari halaman tersebut
2. Design, Proses design layout dan menyiapkan konten untuk website.
3. Web Development. Eksekusi pembuatan website dengan wordpres

Planning

Dari hasil meeting singkat dengan klien, beberapa point yang bisa saya simpulkan yaitu bahwa klien :

1. Tau mengenai apa itu website secara general dan ingin memperluas usaha dengan meraih customer melalui online
2. Tidak ada gambaran seperti apa design websitenya dan tidak ada rekomendasi website lain yang disuka.
3. Tidak atau sudah memiliki konten namun tidak paham akan di masukan kemana di dalam layout
4. Klien cenderung menjual barang dengan partai besar dan tidak ingin fokus berjualan satuan atau memiliki toko online (opsi memiliki tokok online ini bisa dipertimbangkan kembali di masa yang akan datang).
5. Klien ingin me-redesign logo nya menjadi lebih dinamis, berjiwa muda, muda pengaplikasiannya, mudah di ingat, dan simpel.

Berdasarkan hal tersebut respon saya adalah :

1. Mengatakan YA BISA PAK! dengan nada yang meyakinkan. Bahkan dengan penjelasan, bahwa saya bisa membuat lebih baik dari yang minta dan menjukan beberapa folio dan study case saya yang sebelumnya.
2. Kemudian Saya ajukan proposal penawaran harga untuk ini sebesar Rp. 500juta dan langsung di approve! (ngayal boleh kan? hehe… tapi saya akan bahas mengenai berapa harga yang pantas di lain kesempatan yah).
3. Segera menterjemahkan ide hasil meeting diatas menjadi wireframe (atau sketsa) halaman-halaman website yang akan di buat. Berikut dibawah ini adalah sketsa final yang akhirnya di approve setelah melalui 100 kali revisi 🙂

Warning : Apabila anda newbie atau pemula, maka untuk awal selalu berikan dalam bentuk SKETSA, jangan dalam bentuk design jpeg atau design preview! anda akan tahu alasannya di dalam tutorial ini.

Membuat Sketsa Website / Wireframe

Membuat sketsa atau wireframe website penting dilakukan, agar struktur website menjadi jelas, terutam untuk klien. Dan apabila ada revisi dapat dilakukan dengan mudah. Dibandingkan apabila sudah dalam bentuk website.

Kita akan membuat web wireframe dengan wireframe.cc. Online tools yang sangat mudah di gunakan. Lihat video dibawah ini.

Jumlah halaman yang di butuhkan untuk website profile adalah kurang lebih sekitar 5 halaman, yang biasanya selalu dan selalu berisi :

1. Halaman Muka Sebagai stopping power, konten yang didesign harus memberikan kesan pertama yang meyakinkan untuk pengunjung dengan informasi sekilas tentang produk dan profile perusahaan secara singkat. Perbanyak gambar dan kurangi teks.
2. Tentang Kami adalah halaman yang berisikan lebih detail tentang latar belakang perusahaan itu, seperti sejarah perusahaan, visi misi, izin usaha, dan hal lainnya yang sekiranya penting untuk di ketahui pengunjung. Halaman ini cukup penting karena istilah “tak kenal maka tak sayang” itu seringkali benar.
3. What We Do, adalah list dari produk, jasa atau apapun yang akan dijual, tampilkan harga bisa memungkinkan.
4. Porfolio, adalah list dari yang pernah di kerjakan atau siapa saja klien yang pernah kerjasama dengan anda.
5. Hubungi Kami. Halaman kontak untuk customer dapat menghubungi anda. Selalu biat selengkap mungkin. Mulai dari alamat, no hp, email, fax apapun itu yang bisa di jadikan media yang menghubungkan anda dan calon pembeli.
6. Halaman Tambahan, biasanya adalah halaman artikel atau news, hal privacy policy, term and condtions yang bisa anda cari dari website sejenis dan edit-edit sedikit. atau halaman lain yang sekiranya di butuhkan klien.

Anda bisa membuat sub pages untuk masing-masing halaman apabila di rasa terlalu banyak untuk di jadikan satu halaman. Seperti misalnya sebuah laywer office memiliki banyak produk jasa, anda bisa sub kategorikan What We Do nya menjadi :

• Criminal
• Divorce
• Corporate Debt & Collection
• Goverment

Design

Ok tahap yang selanjutnya setelah sketsa website di setujui oleh klien adalah pembuatan segala tugas desain. dalam hal ini kita akan membuat desain logo dan branding untuk penempatan logonya.

Seringkali pada kasus nyata saya menyerahkan design dan sketsa website secara bersamaan. Namun saran saya baiknya untuk pemula adalah, berikan hasil pekerjaan secara berjenjang atau satu persatu.

Oke sekarang kita akan mulai dari membuat logo design.

Membuat logo dengan logo maker

Kali ini kita akan membuat logo dengan logomakr.com. Tools sederhana namun cukup powerfull. Dengan pilihan icon yang banyak, kita bisa membuat logo lumayan keren

Jangan presentasikan dulu logo tanpa branding!

Cukup cakep bukan? tanpa harus memiliki skill menggunakan photoshop anda bisa menghasilkan logo yang layak untuk di berikan kepada klien.

Mockup Branding

Kenapa kita membutuhkan branding untuk mempresentasikan logo:

1. Design logo akan terlihat lebih bagus jika logo tersebut nyata peng-aplikasiannya
2. Yang tadinya klien hanya memesan logo kemungkinan dia akan memesan jasa branding juga atau menyerahkan produksi brandingnya kepada anda. lumangnyan.. apalagi kalo rutin.
3. Menambah portfolio design anda.

Membuat design branding-pun kita akan menggunakan software online yaitu placeit.net dimana terdapat ribuan mock up design siap pakai. cukup drag n drop logo yang kita miliki dan jadi!

Berikut adalah video tutorial membuat desain branding dengan cara simpel, cepat dan tentu dengan hasil yang bagus.

Ok saya sudahi dulu untuk bagian pertama dari artikel ini. Pada part-2 kita akan fokus membuat website nya dengan wordpress. berikut adalah kurang lebih tampilan final website yang akan kita buat untuk klien kita KopiJoe pada bagian ke-2 (selesai).. so stay tune…

Klik disini untuk Part – 2 (selesai) dari tutorial ini.