Cara Membangun Situs Web Lebih Efisien

Pengembang Utama kami membagikan kiatnya untuk bersiap-siap membangun situs web secara efisien dan menghindari pembengkakan proyek.

Seperti dalam proyek apa pun, persiapan adalah kunci kesuksesan Anda. Di sini saya membagikan beberapa dari mereka proses utama yang kami gunakan untuk memastikan pengiriman proyek yang sukses.

Pembukaan Pengembangan

Sebelum Anda terjun langsung ke pengkodean situs web baru, ada baiknya Anda duduk bersama tim pengembangan selama 30 hingga 60 menit untuk membuat rencana. Idealnya, pemilik produk harus hadir dalam rapat untuk menjawab pertanyaan apa pun yang mungkin Anda miliki. Mereka mungkin akan menghadiri semua pertemuan klien dan akan memiliki pengetahuan yang lebih mendalam daripada siapa pun tentang apa yang harus dicapai situs dalam hal perjalanan dan fungsionalitas pengguna.

Mudah-mudahan, Anda telah melihat desain sebelumnya. Sebaiknya gunakan sesi ini untuk mengidentifikasi masalah apa pun yang Anda lihat dan diskusikan dengan tim bagaimana Anda akan menyelesaikannya. Misalnya, jika perancang telah memilih menu terbang keluar kanvas sejak iterasi terakhir , Anda dapat mendiskusikan bagaimana Anda akan membuatnya. Anda mungkin menemukan seseorang dalam tim telah membangunnya sebelumnya, sehingga mereka dapat mengambil pekerjaan itu.

Cetak Desainnya

Jenis ini berjalan seiring dengan awal pengembangan tetapi tahap ini seharusnya hanya benar-benar melibatkan tim pengembangan ujung depan.

Saya pikir ini adalah langkah yang baik untuk diambil sebelum memulai pembuatan situs karena hasil cetak dapat ditata untuk mendapatkan tampilan yang lebih jelas dari gambaran yang lebih besar. Anda tidak dapat dengan mudah melakukan ini menggunakan aplikasi seperti Sketch, Photoshop atau Invision. Anda harus memperkecil tampilan sejauh ini untuk melihat semua desain, atau Anda mungkin hanya dapat melihat satu templat halaman per jendela browser.

Melihat halaman web dalam bentuk sentuhan juga dapat memberi Anda perspektif yang berbeda dan membantu Anda mengasah elemen yang mungkin Anda lewatkan. Mampu membuat anotasi juga membantu.

Di Hallam, kami cenderung memberi anotasi pada hasil cetak kami, kemudian menggunakannya untuk membantu membagi beban kerja dan menempelkannya di papan tulis. Kami kemudian merujuknya selama pertemuan berikutnya selama proses pembangunan. Setelah template dibuat dan ditandatangani, template akan dihapus dari papan tulis, yang memberi kita pandangan yang jelas tentang apa yang tersisa untuk kita buat.

Jelas, kita semua harus meminimalkan jumlah pencetakan yang kita lakukan, jadi pastikan untuk menggunakan tempat sampah daur ulang setelah Anda selesai mendesain!

Identifikasi Elemen Umum

Salah satu prinsip yang kami anut di sini di Hallam adalah bahwa setiap desain yang kami buat tidak boleh dibuat dari template yang sepenuhnya dipesan lebih dahulu. Sebaliknya, mereka harus berbagi elemen desain umum yang dapat dibangun secara terpisah dan kemudian dimasukkan ke dalam template di mana mereka dibutuhkan.

Saya tidak mengatakan bahwa templat halaman tidak boleh memiliki elemen khusus, tetapi ini seharusnya hanya terjadi jika diperlukan. Misalnya, situs web dengan halaman Pelatihan Wawancara Radio dan halaman Pelatihan Wawancara Televisi tidak memerlukan dua templat ketika keduanya pada dasarnya adalah halaman "templat pelatihan".

Elemen umum juga menciptakan pengalaman pengguna yang lebih baik karena orang tidak dibombardir dengan hal-hal baru untuk ditemukan di setiap kesempatan.

Setelah Anda menyelesaikan semua elemen utama situs, Anda dapat menuliskannya di papan tulis, membuat tiket, dan menetapkannya ke berbagai anggota tim. Kemudian saat Anda menyusun halaman, Anda bisa "memasukkan" berbagai bagian ke dalam template dan membuatnya lebih cepat.

Bangun Dulu, atau Gaya dan Bangun Bersama?

Ini adalah sesuatu yang telah kami coba di masa lalu dan saat ini kami membuat dan menata template pada saat yang bersamaan.

Di masa lalu, kami biasa membangun semua struktur dan elemen templat halaman tanpa menggunakan css sama sekali (kecuali gaya tata letak yang terkait dengan Bootstrap atau Foundation). Kemudian setelah kami membangun seluruh situs, kami akan memeriksa dan menata semua template dan elemen. Metode ini tentu masuk akal dari sudut pandang lini produksi. Anda tidak akan mengecat bodi mobil sebelum memasangnya ke sasis, memasukkan mesin, dan memasang semua perlengkapan. Dengan metode ini, Anda memisahkan fungsi dari gaya. Pada fase pembuatan awal, Anda tertarik untuk memastikan situs berfungsi dari sudut pandang fungsional sebelum mempertimbangkan seperti apa tampilannya.

Sebagai gantinya, kami telah beralih ke kamp "desain dan bangun" sehingga kami dapat membuat produk yang dapat dikirim. Dengan kata lain, kami dapat melakukan siaran langsung pada tahap apa pun karena situs berfungsi dan terlihat bagus. Akibatnya, dengan metode "desain dan bangun" Anda masih membuat template tanpa gaya tetapi segera setelah Anda selesai meletakkannya, Anda melanjutkan dan menatanya. Anda tidak memarkirnya di satu sisi dan melanjutkan membangun template berikutnya.

Wastafel Dapur Dasar

Berikut adalah sesuatu yang cocok dengan metode "desain dan bangun". Ini melibatkan penataan beberapa elemen, seperti tipografi, menambahkan warna merek situs dan mungkin menambahkan gaya tombol ke file master settings.scss. Sungguh menakjubkan apa yang dapat dilakukan oleh elemen-elemen ini ke situs secara langsung. Anda segera memiliki situs web yang tidak lagi terlihat seperti situs boilerplate Foundation dan Anda merasakan kemajuan yang nyata hanya dengan menghabiskan waktu sekitar 30 menit untuk menulis beberapa aturan CSS.

Bingkai Situs

Preferensi pribadi saya adalah menata header dan footer sejak awal karena membantu membingkai situs dan membuat kanvas untuk melanjutkan menata dan membangun situs. Itu membuat situs lebih terlihat seperti produk jadi. Namun, situs yang dapat dikirim masih dapat memiliki navigasi dan footer tanpa gaya tetapi berfungsi.

Kesimpulan

Kita semua memiliki ide sendiri tentang bagaimana mengambil desain situs web dari Photoshop ke dalam proses pembuatan dan hal di atas kebetulan menjadi cara kita melakukan sesuatu.

Satu hal yang saya yakini sangat penting adalah membuat rencana sebelum membuka lingkungan pengembangan Anda. Apakah Anda seorang pekerja lepas yang bekerja sendiri, atau bagian dari tim pengembangan besar yang membuat rencana adalah cara yang pasti untuk bekerja lebih efektif dan cepat.

Jika Anda memerlukan bantuan dengan Pengembangan Web Anda, jangan ragu untuk menghubungi kami.