Cara Melakukan Skema Situs Web

Setelah situs web perusahaan Anda berkembang melampaui diagram situs dasar, Anda dapat mulai membuat keputusan tentang apa yang terjadi di mana pada setiap halaman. Skema situs web, atau kerangka gambar, menyajikan mur dan baut fungsi halaman tanpa memasukkan elemen desain, skema warna, tipe gaya atau elemen interaktif itu sendiri. Pikirkan skema sebagai denah lantai dan halaman selesai sebagai ruang berperabot. Daripada mengecat dinding dan menata ulang atau mengganti furnitur untuk mengubah cara halaman Anda bersatu, Anda dapat merencanakan ruang online Anda menggunakan kotak dan penampung yang menentukan bagaimana fungsi halaman situs Anda.

Daftar item berulang yang akan muncul di halaman Anda. Ini termasuk elemen-elemen seperti logo Anda, navigasi situs, area foto, area teks, header, footer dan sidebars.

Gambarlah diagram yang menunjukkan ukuran relatif elemen halaman, dan posisi vertikal dan horizontalnya. Anda dapat membuat sketsa diagram ini di atas kertas, mengerjakannya dalam program pengeditan gambar atau ilustrasi, atau menggabungkannya menggunakan aplikasi wireframing online.

Buat diagram halaman untuk setiap jenis halaman yang dibutuhkan situs web Anda. Beranda Anda mungkin menampilkan subset elemen halaman yang berbeda dari halaman produk atau layanan, halaman kontak atau blog.

Gunakan teks placeholder untuk menunjukkan di mana kata bertele-tele muncul. Anda mungkin ingin memilih antara tipografi serif dan sans serif, tetapi skema bukan tempat untuk eksperimen dan demonstrasi tipe-gaya.

Beri anotasi gambar rangka Anda dengan catatan tentang bagaimana elemen berfungsi atau di mana tautannya. Tambahkan ikon yang menautkan ke situs atau layanan luar, termasuk RSS, Twitter, Facebook, dan situs mitra atau produsen.

Sirkulasikan wireframe Anda untuk ditinjau, dibahas, dan disetujui, ubah seperlunya. Ketika Anda mencapai titik di mana skema Anda mencakup semua elemen berulang yang diperlukan halaman aktual Anda, dan posisi relatif dan ukuran elemen yang sesuai dengan kebutuhan situs web Anda, Anda dapat maju melampaui tahap kerangka gambar.

Kiat

Skema situs web biasanya mendahului maket dan prototipe dalam proses desain. Mockups menunjukkan skema warna, gaya tipe, dan detail desain lainnya dalam bentuk yang sebenarnya Anda pertimbangkan untuk diterapkan. Prototipe berkembang melampaui mockup ke contoh yang diformat dengan ketat yang menunjukkan tampilan halaman nyata.
Jika Anda berencana membuat versi seluler dan situs berbasis peramban, Anda mungkin perlu membuat skema untuk lebih dari satu aliran desain.
Jika Anda menggambar skematik Anda dengan tangan, gunakan pena atau pensil warna untuk menekankan bidang-bidang khusus tata letak halaman Anda yang lebih penting dalam proses desain atau pengembangan. Misalnya, Anda dapat memilih warna tertentu untuk mewakili modul yang akan dikodekan oleh individu tertentu. Warna-warna ini menunjukkan elemen perencanaan, bukan pilihan desain.

Peringatan

Jika Anda mengembangkan skema Anda dalam alat desain situs web dan membuat CSS untuk gambar rangka Anda, hindari mengubah fase skematis pengembangan situs menjadi latihan desain. Wireframes menyampaikan fitur, bukan gaya.