Bagaimana Mendesain Prototipe Website dari Wireframe

Anda mungkin pernah mendengar pepatah lama: "Ukur dua kali, potong sekali." Nah, itulah mengapa Anda harus merencanakan sebuah situs web sebelum Anda membangunnya. Dan di situlah pembuatan prototipe masuk.

Saat kami mendesain situs web kami, kami berkembang dari wireframing ke prototyping hingga - akhirnya - desain lengkap.

Saya ingin menjelajahi dan memperluas apa sebenarnya arti Prototyping dengan membawa Anda melalui proses penuh.

Perhatikan bahwa saya membuat kursus lain yang mencakup langkah pertama merancang situs web: membangun bingkai gambar. Anda dapat membaca tentang wireframing dan menonton video kursus 30 menit saya di sini.

Dalam tutorial ini, kami akan membahas:

  1. Apa itu Prototipe Awal
  2. Membuat Struktur: Bingkai, Baris, Kolom
  3. Menambahkan Konten: Header, Slider, About
  4. Merancang Bagian
  5. Kesimpulan: Apa yang telah kita pelajari dari proses pembuatan prototipe

Apa itu Prototipe Awal?

Sebuah prototipe biasanya merupakan iterasi sekunder dari sebuah desain, karena dibuat di atas wireframe.

Gambar rangka biasanya melibatkan sketsa yang digambar sederhana melalui kertas, pena, atau alat online. Selanjutnya kami membangun prototipe, yang merupakan mockup kami yang lebih halus untuk situs web atau aplikasi.

Mari kita lihat wireframe awal yang kami buat di artikel sebelumnya:

Ini memiliki sejumlah halaman, bagian, dan area di mana teks dan gambar akan ditambahkan nanti.

Tujuannya, dalam Prototipe adalah untuk membangun ini secara visual, tetapi tanpa menambahkan warna atau gambar.

Dalam contoh ini, saya akan menggunakan Figma untuk melakukan Prototipe. Anda dapat melihat seluruh protipe Figma di sini.

Cara Membuat Struktur Prototipe Website: Bingkai, Baris, Kolom

Ketika kami membuat wireframe, kami mempertimbangkan gridnya - tapi itu digambar dengan tangan.

Saat melakukan prototipe awal, kita harus mendefinisikannya dengan benar sehingga keseluruhan desain mengikuti struktur grid.

Dalam contoh ini, saya akan menggunakan desain 12 kolom dengan lebar reguler 1140px, yang secara tradisional digunakan dan terlihat dalam desain Bootstrap. Ini memberi kita margin 15-30px antara unit grid.

Ini akan berguna nanti ketika kita menciutkan kolom ke baris untuk respon seluler.

Anda dapat membuat struktur grid Anda sendiri di Figma. Namun ketahuilah bahwa Anda (atau orang lain) nantinya perlu benar-benar membuat kode untuk desain ini.

Setiap kali Anda mendesain sesuatu, pastikan untuk mempertimbangkan pengembang.

Cara Menambahkan Konten ke Prototipe Situs Web: Header, Slider, Sections

Berbeda dengan Wireframe, kami tidak lagi merepresentasikan teks dengan garis, dan header dengan blok. Sebagai gantinya kita perlu mengisi konten untuk mockup.

Ini tidak berarti menambahkan warna atau gambar. Tapi itu berarti kita harus menunjukkan teks yang sebenarnya.

Pada tahap ini, ada baiknya untuk memastikan bahwa header dan bagian ditampilkan dengan konten sebenarnya yang dimaksudkan untuk disimpan. Ini akan memungkinkan pemilihan warna dan gambar yang lebih baik di tahap desain selanjutnya.

Di bagian contoh ini, saya membuat bilah geser dengan teks pahlawan, dan deskripsi di bawahnya. Ada beberapa hal yang harus diperhatikan pada fase proses prototipe ini:

  • Ukuran dan pemosisian font
  • Lokasi dan spasi konten
  • Margin dan padding antara bagian dan konten

Bagaimana Merancang Bagian Prototipe Situs Web

Untuk pembuatan prototipe dan mockup terakhir, penting untuk mulai melapisi grup dan bagian Anda. Bagian dapat mencakup hal-hal seperti tajuk, bagian "tentang kami", dan bagian sponsor.

Anda dapat membuat grup di alat UI Anda (Figma melakukan ini dengan Ctrl + G). Beri label pada bagian Anda dan atur dengan warna latar belakang yang berbeda. Ini akan memudahkan untuk mengidentifikasinya, dan memungkinkan Anda untuk memindahkannya dengan mudah.

Terlalu sering saya diminta untuk memindahkan bagian-bagian tertentu dari sebuah situs web ke atas dan ke bawah pengelompokan. Dengan mengelompokkan semua komponen Anda menjadi beberapa bagian, Anda akan mempermudah diri Anda sendiri selama fase prototipe pekerjaan desain.

Kesimpulan: Apa yang Telah Kami Pelajari dari Proses Pembuatan Prototipe

Saat kami membangun sisa desain, penting untuk memastikan bahwa prototipe awal ini tidak menjadi mockup lengkap untuk desain situs web.

Mudah terbawa suasana. Tetapi tujuan melakukan prototipe setelah wireframe adalah untuk memastikan bahwa kami dapat terus merencanakan pengembangan situs web.

Jauh lebih mudah untuk mengidentifikasi masalah dan masalah di tahap perencanaan awal dan memperbaruinya sebelum terjun ke dalam membuat desain lengkap. Pembuatan prototipe semacam itu mungkin hanya membutuhkan waktu beberapa jam, tetapi dapat menghemat usaha selama berhari-hari dalam prosesnya.

Setelah Anda membuat prototipe beberapa halaman, Anda dapat melanjutkan ke fase desain mockup lengkap. Ini akan melibatkan mencari tahu teori warna, tipografi, dan gambar yang berfungsi sesuai. Kami akan melihat ini di artikel berikutnya dalam seri ini bulan depan.

Bonus: Menambahkan Proses Prototipe Interaktif

Kami hanya membuat satu halaman untuk contoh ini. Meskipun demikian, pembuatan prototipe juga memungkinkan Anda membuat contoh operasi situs yang ditiru.

Emulasi ini sangat berguna untuk melakukan demo, menguji bagaimana klien merespons untuk melihat contoh dunia nyata dari mock-up awal, dan merevisi bagaimana semua tautan Anda mengalir.

Saya harap Anda menikmati artikel ini. Jika Anda tidak tahu siapa saya, saya Adrian dari Australia. ? Saya memiliki saluran kecil di Twitter & YouTube, jadi jika Anda ingin tahu lebih banyak tentang saya atau menikmati konten saya, lihat saya kapan-kapan?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog