fbpx
Kelas Wordpress
  • Panduan Pemula
  • WordPress Tutorial
  • Tips & Trick
  • Bisnis
No Result
View All Result
KelasWP - Tempat Belajar Wordpress
No Result
View All Result
Home Panduan Pemula

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

11 bulan lalu
di Panduan Pemula
10 menit membaca
0
Cover menjadi web developer dalam 30 hari part 1
Table of contents – part 1
  • Intro
    • Kasus
  • Planning
    • Membuat Sketsa Website / Wireframe
  • Design
    • Membuat logo dengan logo maker
    • Mockup Branding
  • Tips

Intro

Apa yang akan anda dapat dari tutorial ini :

  • Memvisualisasikan ide menjadi design yang fungsional
  • Belajar membuat logo design dengan ready to use app.
  • Belajar Basic design dengan Phothosop
  • Membuat form kontak di wordpress
  • Membuat layout dan konten design lainnya, menjadi website bagus dan atraktif.
  • Berisikan Tips komunikasi dengan klien.
  • Personal branding
  • Tips Mencari klien untuk membuat website.
  • Anda siap menjadi web developer yang bisa menjual jasa pembuatan website
  • Beberapa tips menjadi juara di mata klien dan FAQ

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.

Penting. Sebelum kita mulai. Agar tutorial ini lebih mudah di ikuti, saya sarankan anda sudah bisa dan mengerti tentang:
– Cara instal wordpress
– Fungsi-fungsi dasar pada wordpress

Estimasi waktu yang di butuhkan adalah kurang lebih 2-4 hari untuk membaca, mengerti dan mem-praktekannya kedua tutorial tsb.

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

Kasus

Klien memiliki usaha keluarga di bidang kopi dan cafe yang sudah berjalan lama dan ingin memilki website untuk usahanya. Klien juga membutuhkan branding sederhana yaitu re-design logo untuk perusahaannya.

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.

Video Tutorial Membuat Sketsa Website.

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

Hasil Desain 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!

Video cara pembuatan logo dengan logo maker

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

Mockup Branding

Branding logo untuk di presentasikan,

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.

Video Tutorial Desain Branding

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…

Tampilan home yang akan di buat

Tips

  • Gunakan social media seperti pinterest atau google image untuk mencari inspirasi desain, baik itu desain logo atau branding. Gunakan kata kunci yang sesuai dan paling penting coba dengan bahasa inggris apabila hasil dalam bahasa indonesia kurang banyak. Sebagai contoh : Coffee logo, Cafe logo, coffee branding, coffee shop branding dll.
  • Selalu presentasikan desain dalam tampilan branding atau mock up kepada klien.
  • Berikan logo minimal 2 alternatif atau maksimal 3. Jangan terlalu banyak alternatif.
  • Lakukan untuk hasil, uang belakangan, terutama apabila anda baru. trust me. it works!
  • Jangan malu bertanya!

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

Tags: case studyweb development
Share33Tweet21Pin7SendSend

Related Posts

Cover artikel template membeli template wordpress terbaik

Tips & Tempat Membeli template WordPress Premium.

Maret 24, 2020
2k
Cover cara seting SSL HTTPS dan CDN Gratis

Install SSL dan CDN Gratis dengan Cloudflare

Maret 13, 2020
2k
Next Post
Cara Menjalankan WordPress Pada Komputer.

Cara Menjalankan Wordpress Pada Komputer.

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Seri Tutorial:
List tutorial membuat website dari nol

Panduan Pemula

Tutorial Lengkap Cara Membuat Website Dengan WordPress Untuk Pemula (2020)

Penjelasan Fungsi Dasar & Fitur WordPress

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

Real Case Study: Menjadi Web Developer dalam sebulan – Part 2 (selesai)

Cara upload WordPress dari local host komputer ke server hosting.

Load More
  • Semua
  • Ngobrol Bisnis
  • Tips & Trick
cara-menampilkan-custom-field-pada-halaman-depan-website-wordpress

Cara menampilkan Advanced Custom Field pada halaman depan website

Mei 26, 2020
2k
Step by step, cara upload Android app ke Play Store

Step by step, cara upload Android app ke Play Store

April 29, 2020
2k
Cara Menjalankan WordPress Pada Komputer.

Kenapa project “thank you” itu penting untuk pemula

April 29, 2020
2k
cove-tutorial-branding

Tutorial membuat desain branding untuk usaha : Logo & stationary

April 5, 2020
2k
Kelas Wordpress

© 2020 KelasWP.com
By DesainBagus.com

Navigate Site

  • Tentang Saya
  • Terms & Conditions
  • Privacy Policy
  • Kontak
  • Glossary

Follow Us

No Result
View All Result
  • Panduan Pemula
  • WordPress Tutorial
  • Tips & Trick
  • Bisnis

© 2020 KelasWP.com
By DesainBagus.com

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Website ini menggunakan cookies, dengan menggunakan website anda menyatakan setuju Privacy and Cookie Policy.