Menyempurnakan dan Menstandarkan Proses Desain dan Pengembangan Divi Anda

Selamat datang di bagian 4 dari 5 seri kami Mengatur dan Mengendalikan Bisnis Desain Web Divi Anda. Dalam seri ini, kami mengeksplorasi beberapa taktik, alat, dan strategi yang akan membantu Anda mengatasi kesulitan sehari-hari yang kita semua hadapi sebagai Divi Web Designer. Dari mengoptimalkan rutinitas harian Anda, hingga membuat sistem dan proses, hingga memberikan pengalaman desain web terbaik untuk klien Anda; kami menyediakan item dan langkah yang dapat ditindaklanjuti yang dapat Anda terapkan segera dengan tujuan membantu Anda mengendalikan bisnis Divi Web Design Anda apakah Anda seorang freelancer solo, agensi kecil, atau tim jarak jauh.

Membuat proses standar untuk merancang dan mengembangkan situs web Divi sangat penting untuk produktivitas dan kesejahteraan Anda sebagai perancang web. Meskipun proyek desain situs web jarang berjalan persis seperti yang direncanakan, jika Anda memiliki proses dan jalur untuk dipatuhi, itu akan menghemat waktu yang serius dan membuat Anda tetap di jalur untuk mencapai tenggat waktu Anda ketika proyek tumbuh.

Menyempurnakan dan Menstandarkan Proses Desain dan Pengembangan Divi Anda

Kemarin kami mereferensikan posting sebelumnya tentang membuat halaman memulai untuk membantu mempersiapkan klien Anda. Dalam posting itu, kami berbicara tentang bagaimana mempresentasikan proses Anda kepada klien baru Anda. Inilah cara saya mempresentasikan proses saya kepada klien saya:

1. TATA LETAK DAN DESAIN – Sebagian besar dan memakan waktu dalam merancang situs web berada dalam tahap perencanaan dan tata letak proses. Saya akan membuat peta situs (hierarki Halaman/Menu) situs web untuk persetujuan terlebih dahulu, kemudian saya akan mendesain halaman beranda dan sub halaman (atau lebih jika diminta) untuk persetujuan.
2. PENGEMBANGAN – Setelah tata letak dan desain situs disetujui, saya akan melanjutkan dengan merancang seluruh situs, halaman, dan menambahkan semua fungsi dan plugin. Kami akan memastikan situs Anda terlihat bagus dan berfungsi dengan baik di semua perangkat dan browser web sebelum pindah ke langkah terakhir.
3. EDIT & REVISI – Setelah situs siap untuk tinjauan akhir, Anda dapat meninjau setiap halaman dan kami dapat melakukan pengeditan terperinci hingga situs direvisi sepenuhnya. Kami meminta Anda untuk meninjau SEMUA halaman untuk memastikan semua ejaan, tata bahasa, alamat, dan informasi sudah benar sebelum ditayangkan.

Sekarang Anda sebagai sesama desainer web tahu bahwa merancang dan mengembangkan situs web lebih dari sekadar proses 3 langkah sederhana. Proses saya sebenarnya lebih dari 20 langkah proses tetapi saya telah menemukan bahwa jika saya membebani klien saya dengan semua yang terlibat, mereka akan sering terlalu memikirkan hal-hal ketika harus menyediakan konten. Inilah yang sebenarnya terlihat seperti proses Desain/Pengembangan Web Divi saya dalam sedikit lebih detail:

1. Buat halaman dan tata letak navigasi untuk persetujuan
2. Header dan footer dirancang
3. Halaman rumah dirancang
4. Sub halaman dirancang
5. Kirim ke klien untuk persetujuan
6. Revisi pada header, footer, beranda dan sub halaman
7. Setelah disetujui, buat halaman yang tersisa
8. Buat template untuk bagian standar situs web dan halaman berulang seperti galeri, proyek, produk, dll
9. Terapkan semua integrasi untuk pendaftaran daftar email, media sosial, widget, dll
10. Buat dan uji semua formulir kontak
11. Sesuaikan dan optimalkan desain untuk penggunaan seluler dan responsif
12. Masukkan pengaturan SEO yang diperlukan
13. Periksa kembali tata bahasa dan konten situs
14. Pemeriksaan lintas browser dan perbaikan bug
15. Kirim untuk tinjauan akhir
16. Buat semua revisi klien akhir
17. Buat dasbor khusus klien dan video pelatihan (jika perlu)
18. Hapus plugin, gambar, dan alat yang tidak perlu
19. Cadangkan situs dan simpan secara lokal
20. Situs peluncuran

Proses ini sering dipecah menjadi lebih detail tetapi ini adalah struktur dasar dari semua yang terlibat dengan setiap bangunan saya apakah itu situs bergaya brosur 5 halaman atau situs 50 halaman dengan acara, e-niaga, dll. semua ini sebagai daftar periksa dan merupakan praktik yang baik bagi saya untuk memastikan bahwa saya tidak mengabaikan apa pun sebelum meluncurkan situs. Membuat daftar periksa seperti ini dan memasukkan garis waktu bersamanya bisa menjadi cara yang sangat efisien untuk memastikan proses desain/pengembangan Anda sejalan dengan tenggat waktu proyek Anda.

Oke, sekarang setelah Anda memiliki gagasan tentang bagaimana saya mengatur proses desain/pengembangan internal saya, mari masuk ke beberapa detail lebih lanjut tentang bagaimana Anda dapat mengoptimalkan proses Desain Web Divi ANDA.

1) Membuat Proses Desain Standar

Salah satu pertanyaan dan diskusi berulang terbaik yang saya lihat di grup Facebook Divi adalah sesuatu yang berkaitan dengan "Bagaimana Anda mendesain situs Divi Anda?" Apakah Anda mengejeknya di Photoshop atau Illustrator? Apakah Anda membuat gambar rangka dasar untuk disetujui klien? Apakah Anda baru saja menyelam ke Divi dan melakukannya langsung?

Tentu saja tidak ada cara yang benar atau salah untuk melakukan ini. Saya telah menemukan bahwa bagaimanapun Anda memilih proses desain Anda, itu perlu melakukan 3 hal:

1. Itu perlu bekerja untuk Anda atau tim Anda
2. Itu perlu bekerja untuk klien Anda
3. Ini perlu menghemat waktu Anda

Ketika saya memulai proyek baru, saya cenderung membuat sketsa yang sangat kasar di atas kertas dan langsung masuk ke Divi untuk mendesain header, footer, halaman beranda, dan sub halaman apa pun yang diperlukan untuk persetujuan awal.

Inilah alasannya:

• Ini bekerja untuk saya – Secara tradisional desain web dimulai dengan proses wireframe ekstensif melalui kertas atau program seperti Adobe Illustrator untuk merancang dan menunjukkan klien untuk persetujuan bahkan sebelum online. Metode ini bekerja untuk beberapa dan dapat menjadi rute yang sangat efisien khususnya jika Anda berada dalam tim dan Anda menyerahkan desain Anda kepada pengembang untuk dikodekan. Tapi begitu Divi datang, itu mengubah proses saya sepenuhnya. Saya sekarang terjun langsung ke Divi setelah saya memiliki struktur dasar dan konsep visual di pikiran saya dan di atas kertas.
• Ini bekerja untuk klien saya – Saya telah menemukan bahwa klien suka melihat pratinjau langsung yang sebenarnya yang dapat mereka lihat di browser lebih dari sekadar tiruan datar. Terkadang aliran dan perasaan sebuah situs bisa hilang dalam satu halaman mock up sedangkan ketika klien melihat situs tersebut langsung di browser, sering kali mengarah ke "faktor wow" yang jauh lebih besar. Mereka dapat melihat hover over, efek gulir, dan alur desain situs yang memberikan kesan pertama yang baik dan seringkali lebih sedikit pengeditan dan revisi.
• Ini menghemat waktu saya – saya dapat mengubah banyak hal dengan sangat cepat dengan CSS dan tata letak dan pengaturan yang saya simpan di Divi sehingga tidak masuk akal bagi saya untuk membuat revisi tersebut di photoshop atau ilustrator kemudian menduplikasi yang sama di stylesheet dan pengaturan Divi saya. Saya menghemat banyak waktu dengan revisi dan perancangan awal dengan melakukan hal-hal langsung menggunakan elemen inspeksi langsung di situs pengembangan Divi saya. Saya juga dapat membuat perubahan dan revisi di situs sesering mungkin saat saya sedang berbicara di telepon dengan klien. Anda dapat terlihat seperti bintang rock desainer web nyata ketika klien meminta Anda untuk mengubah beberapa hal dan Anda telah melakukannya saat di telepon dengan mereka atau dalam hitungan menit.

Sekarang lagi, proses desain inilah yang bekerja untuk ME sebagai toko satu orang. Dengan tim, proses perlu bekerja untuk semua yang terlibat. Tetapi sebagian besar desainer web lepas adalah campuran desainer/pengembang, jadi lakukan proses apa pun yang sesuai untuk Anda, sesuai untuk klien Anda, dan hemat waktu Anda!

2) Memanfaatkan Perpustakaan Divi dan Pekerjaan Anda Sebelumnya

Salah satu fitur favorit saya dari Divi adalah kemampuan untuk menyimpan tata letak dan desain halaman Anda. Fitur ini adalah pengubah permainan dan dapat menghemat waktu Anda saat mendesain dan mengembangkan dengan Divi. Dalam episode DiviChat baru-baru ini, panel berbicara tentang menyimpan beberapa templat desain halaman, lalu menghapus yang tidak mereka gunakan di situs baru. Bicara tentang cara untuk menghemat waktu! Jika Anda dapat membuat serangkaian tata letak halaman dan templat halaman dan yang harus Anda lakukan hanyalah mengimpor dan mengubah konten, warna, dan gambar, Anda mengurangi waktu untuk merancang dan mengembangkan potensi.

Berikut adalah 3 tip cepat yang akan saya tawarkan untuk menyimpan item Divi Library dan pekerjaan sebelumnya:

1. Simpan CSS Anda – Saya memiliki “master stylesheet” dengan sebagian besar kode CSS yang saya tulis untuk modul, bagian halaman, dan kelas tertentu yang ingin saya tiru di situs lain. Dengan begitu saya dapat membukanya dan menarik kode apa pun yang ingin saya gunakan pada proyek saat ini. Sangat luar biasa untuk menghemat waktu daripada harus menulis ulang baris CSS berulang-ulang.
2. Buat Item Perpustakaan Divi – Menyimpan tata letak sebagai item perpustakaan dapat menjadi cara yang bagus untuk menyimpan pekerjaan Anda di halaman atau sebagai situs lengkap yang dapat diduplikasi dan mudah diubah dengan gambar dan warna. Jika Anda tidak yakin bagaimana melakukannya, ikuti tutorial ini.
3. Ekspor File json – Saya akan sering memiliki klien yang akan mereferensikan halaman dari situs sebelumnya jadi daripada harus membuatnya kembali dari awal, saya akan sering mengekspor halaman itu dari situs lama, mengimpornya ke situs baru saya dan sesuaikan gaya dan gambarnya! Sekali lagi, cara hebat lain Divi menghemat waktu kita dalam proses desain dan pengembangan. Detail lebih lanjut tentang itu di sini jika Anda tidak terbiasa.

3) Mengungkapkan Situs Web Anda ke Klien

Ini adalah salah satu aspek desain web saya yang paling penting, namun diabaikan dan diremehkan menurut saya. Begitu banyak bergantung pada kesan pertama dan apa yang klien pikirkan pada awalnya ketika mereka melihat desain baru Anda. Jika Anda melakukan mockup atau gambar rangka, tentu saja kesan pertama akan sedikit mengecewakan sampai klien melihat versi langsung online yang benar-benar dapat dimengerti dan sekali lagi, dapat bekerja tergantung pada kerumitan proses Anda mulai dari desain hingga pengembangan. Seperti yang Anda lihat dalam proses saya di atas, saya menyiapkan header dan footer dan mendesain halaman beranda secara penuh bersama dengan biasanya satu subhalaman atau lebih tergantung pada kebutuhan proyek kemudian mengirim untuk ditinjau. Namun, bagaimana saya mengirim klien desain awal saya baru-baru ini berubah, dengan efek yang luar biasa.

Saya dulu hanya mengirim tautan pengembangan langsung sehingga klien dapat melihat situs itu sendiri, di waktu luang mereka sendiri. Ini bekerja dengan cukup baik tetapi saya menemukan bahwa kesempatan langka yang saya dapatkan untuk melakukan pratinjau secara langsung atau melalui Skype, kesan pertama itu menjadi lebih baik dan mengapa? Saya percaya itu karena klien mendengar visi saya ketika mereka melihat situs dan itu memungkinkan saya untuk memandu mereka melalui ide-ide saya tentang desain, warna, dan estetika tanpa mereka membuat penilaian sendiri terlebih dahulu.

Sekarang saya membuat video pratinjau cepat (biasanya kurang dari 5 menit) tentang saya yang memandu mereka melalui situs! Ini telah diterima dengan umpan balik yang sangat positif sejauh ini. Apakah sedikit memakan waktu tetapi saya merasa sangat berharga untuk mendapatkan kesan pertama yang luar biasa dari klien saya.

Berikut adalah tangkapan layar bagaimana saya memamerkan situs baru ke klien di Basecamp:

Saya merekam video walk-through saya dengan Screenflow untuk Mac. Saya kemudian mengunggah video ke saluran Vimeo saya dan menjadikannya video pribadi. Dari sana, seperti yang Anda lihat dalam cuplikan di atas, saya mengirim tautan video itu ke klien bersama dengan deskripsi singkat, daftar peluru tentang apa yang diharapkan selanjutnya dan URL sebenarnya dari situs dev untuk dilihat klien di browser mereka setelah mereka menonton video.

Berikut adalah beberapa video pratinjau terbaru saya jika Anda ingin melihat bagaimana saya menyajikan situs baru kepada klien:

Video Pratinjau Situs Web 1

Video Pratinjau Situs Web 2

4) Menangani Revisi dan Pengeditan

Akhirnya, bagian utama dari proses desain dan pengembangan Anda adalah bagaimana Anda menangani revisi dan pengeditan klien. Jika Anda telah merancang situs web untuk waktu berapa pun, Anda tahu bahwa proses ini dapat memakan waktu. Pertemuan tatap muka, panggilan telepon yang diperpanjang, dan email acak dengan sedikit perubahan di sini atau di sana dapat membuang banyak waktu dalam proses pengeditan dan revisi.

Ada beberapa cara untuk memerangi ini. Saya mencoba membuat semua klien saya memposting semua revisi mereka (per halaman jika perlu) di Basecamp tempat saya membuat diskusi untuk revisi. Saya akan menyetujui panggilan telepon atau pertemuan langsung jika perlu tetapi hanya setelah perubahan awal dikirim dengan cara yang saya inginkan untuk menerimanya terlebih dahulu. Saya juga membuatnya SANGAT jelas bahwa saya tidak ingin mendapatkan revisi satu per satu, selama beberapa hari melalui email. Saya memberi tahu klien saya jika memungkinkan untuk mengumpulkannya selama beberapa hari dan memposting semuanya sekaligus atau sebanyak yang tampaknya disukai klien saya, untuk mengatur semuanya dalam .doc atau .pdf.

Kembali ke posting sebelumnya dalam seri ini dan pembicaraan saya dengan orang-orang dari Artillery Media, mereka memiliki proses yang sangat efisien untuk revisi di mana mereka mengharuskan klien mereka mengirim suntingan mereka dalam dokumen di Google Drive sehingga mereka dapat melakukan pengeditan semua sekaligus. Ini juga merupakan penghemat waktu yang besar. Triknya di sini adalah membuat proses pengeditan dan revisi bekerja untuk Anda dengan cara yang paling menghemat waktu. Dan hanya nasihat, setiap klien memiliki caranya sendiri dalam melakukan sesuatu, jadi tugas Anda untuk membimbing mereka tentang bagaimana Anda menginginkan revisi dan pengeditan

Dalam Penutupan

Saya harap ide-ide ini dan proses desain/pengembangan saya telah mendorong Anda untuk membuat sendiri jika Anda belum memiliki proses standar! Jika Anda memiliki beberapa proses yang bekerja dengan baik untuk Anda, jangan ragu untuk memberi tahu kami di komentar di bawah!

Selanjutnya: Cara Efektif Mengelola Beberapa Proyek Desain Web Divi

Ketika Anda memiliki banyak proyek yang sedang berjalan, sulit untuk mengelola semuanya sambil tetap kreatif, mengatasi tenggat waktu, dan memenuhi harapan klien. Dalam posting terakhir kami dalam seri ini, kami akan berbicara tentang beberapa cara Anda dapat secara efektif mengelola semua proyek Divi Web Design Anda sehingga Anda dapat menyeimbangkan orientasi klien baru, merancang, mengembangkan, dan berpegang teguh pada tenggat waktu yang telah Anda tetapkan. keluar untuk memukul. Semua sambil tetap kreatif dan segar. Sampai kemudian!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!