Prototyping adalah tahap penting dalam pengembangan web, yang memungkinkan Anda mengidentifikasi dan membentuk DNA suatu proyek pada tahap awal. Dalam beberapa tahun terakhir, jumlah layanan online dan alat untuk prototyping telah tumbuh secara signifikan. Ulasan ini menyajikan 10 layanan untuk membuat peta situs visual.
Sebelum melanjutkan ke deskripsi alat, tidak akan berlebihan untuk memahami terminologi.
Sitemap adalah struktur halaman situs yang disajikan dalam model hierarkis. Skema semacam itu membantu mengevaluasi volume halaman yang membentuk situs, serta memahami logika hubungan mereka. Terkadang ini adalah skema yang primitif dalam organisasi dan struktur. Dan terkadang sangat kompleks dengan kartu bertingkat multi-level. Situs membantu merencanakan distribusi konten dan mekanisme navigasi untuk situs masa depan.
Pertimbangkan tiga jenis peta situs:
Peta Situs visual digunakan sebagai elemen tambahan dalam perencanaan, analisis, dan pembuatan prototipe proyek. Hari ini sulit membayangkan mulai bekerja pada suatu proyek tanpa perencanaan sebelumnya. Peta situs akan membantu untuk lebih memahami mekanisme navigasi di masa depan, untuk mengevaluasi jumlah konten yang diperlukan. Peta situs visual adalah elemen penting dalam membangun komunikasi dalam tim pengembangan. Berkat struktur visual situs, diskusi, penilaian, dan alokasi sumber daya sangat disederhanakan.
Template situs web HTML dirancang untuk membantu Anda menavigasi situs Anda. Tradisi membuat halaman terpisah dengan sitemap dianggap usang, tetapi bagaimanapun, pendekatan ini tidak akan berlebihan jika proyek memiliki struktur yang kompleks dan bersarang multi-level.
Peta Situs XML tersembunyi dari pengguna, tetapi penting. Dengan menggambarkan struktur situs dan hubungan halaman, sitepamps XML memudahkan mesin pencari untuk menganalisis situs. Karena itu, berpengaruh positif pada peringkat. Di situs XML, kejelasan deskripsi struktur dan sintaksis yang digunakan adalah penting, karena perayap mesin pencari tidak mentolerir ketidakkonsistenan dan kelambanan kode. XML sitemap menggantikan metode lama "unduh langsung ke mesin pencari" pada halaman terpisah khusus. Sekarang sitemap sedang memuat secara langsung, atau pengembang hanya menunggu sampai mesin pencari menemukan file sendiri. Dengan memperbarui file peta situs dengan struktur baru, Anda memberikan pengindeksan halaman yang lebih cepat dibandingkan dengan prosedur mesin pencari otomatis standar.
Mengapa kita membutuhkan peta situs visual?
Perencanaan dan pembuatan prototipe situs web telah lama menjadi standar industri. Paling sering, peta pikiran proyek dibangun terlebih dahulu. Ini dilakukan untuk menentukan elemen utama dan sekunder dari situs masa depan, serta tugas-tugas yang akan diselesaikan oleh situs atau layanan tersebut.
Pada tahap selanjutnya, hierarki halaman yang terperinci, strukturnya direncanakan. Tahap ini membutuhkan refleksi dan diskusi. Oleh karena itu, prototipe seperti itu harus jelas bagi semua peserta dalam proses (programmer, desainer, pengembang, manajer konten). Struktur situs yang diformalkan (sitemap) menjadi titik awal.
Layanan dengan pendekatan desain antarmuka yang minimalis dan segar, diluncurkan pada 2019. Tanpa detail dan tambahan yang tidak perlu, Octopus bekerja dengan cepat, dan bahasa visual yang bersih membuatnya berfungsi.
Ide dasar desain situs web Octopus adalah untuk membentuk halaman dari blok. Desain semacam itu jelas dan dirancang untuk memberikan gagasan terperinci tentang struktur halaman yang akan datang.
Uji Octopus.do tanpa registrasi. Anda hanya perlu mendaftarkan profil ketika proyek disimpan.
Antarmuka intuitif tidak dipenuhi dengan elemen dan animasi. Meskipun masing-masing ikon mungkin tampak agak kecil. Membuat dan menambahkan blok cepat dan mudah dengan mekanik yang jelas.
Ada cara yang lebih nyaman untuk menambahkan blok - cukup tekan Enter, dan blok baru akan muncul di bagian bawah halaman. Metode ini memungkinkan Anda mengisi konten dengan cepat hanya menggunakan satu keyboard. Drag'n'drop berjalan dengan cepat dan terprediksi.
Blok dapat diberi warna dari palet warna yang diberikan:
Pengguna berlangganan berbayar Octopus.do dapat mengekspor peta situs ekspor dalam format PNG dan PDF. Dengan berlangganan gratis, Anda dapat membagikan tautan langsung ke proyek. Pada saat yang sama, pengguna eksternal akan dapat membuat perubahan pada peta situs, yang menyederhanakan kerja tim.
Organisasi lapisan informasi dan bagian dari layanan terbuka dengan pop-up yang rapi. Ini memberi kesan bahwa pengguna tidak meninggalkan ruang kerja editor minimalis.
Fungsi menambahkan deskripsi teks ke blok akan berguna untuk merencanakan konten dalam suatu proyek. Munculan dipanggil dengan mengklik ikon dokumen di sisi kanan blok:
Dalam proses perakitan konten, seringkali perlu untuk menilai dengan cepat lokasi materi visual (foto, ilustrasi). Fungsi menambahkan gambar akan membantu mengatasi tugas ini:
Ngomong-ngomong, dengan menambahkan gambar ke struktur, Anda dapat memasukkan tata letak desain halaman yang lengkap saat siap.
Fitur khas Octopus adalah adanya fungsi Perkirakan. Antarmuka diimplementasikan dalam bentuk panel perjalanan, yang berisi tabel kalkulator untuk memperkirakan biaya kerja. Dan dengan tarif per jam yang diketahui untuk pemeriksaan khusus, Anda dapat memperkirakan biaya waktu dan anggaran proyek.
Pengguna memiliki opsi untuk menduplikasi halaman dalam hierarki dan membuat salinan proyek. Kontrol atas desain sitemap: gaya batas halaman yang dapat disesuaikan dan gaya untuk bingkai smartphone, serta mekanisme kerja tim yang ditingkatkan.
RingkasanSeperangkat alat yang rasional dan desain antarmuka cerdas yang memenuhi semangat zaman. Pembaruan rutin dan peningkatan fungsional dari tim Octopus menjadikan layanan ini menarik dan, tentu saja, berguna.
Biaya, berlangganan : paket gratis termasuk 1 proyek aktif. Berlangganan berbayar dari $ 8 per bulan.
Kemudahan penggunaan: untuk pengguna pemula dan menengah
Desain : ★★★★ ☆
Kerja tim : ✓
Ekspor : tautan, PDF, dan PNG (hanya pengguna berbayar)
Kesuraman
Tidak perlu mendaftar adalah keuntungan dari layanan Gloompas. Pengguna segera menemukan dirinya di lingkungan kerja dengan desain minimalis. Antarmuka intuitif dan membantu Anda terlibat dalam proses dengan cukup cepat. Menambah dan menghapus blokir sitemap terjadi dengan mekanisme yang dapat dipahami dan diprediksi.
Kemampuan untuk menyesuaikan warna setiap blok individu, untuk mengatur ukuran font adalah fitur yang nyaman yang membantu untuk membuat aksen di peta situs.
Secara terpisah, perlu diperhatikan pengaturan tampilan: Tampilan Peta, Tampilan Matriks, dan Garis Besar. Bergantung pada struktur dan skala proyek, Anda dapat memilih cara menampilkan peta situs.
Dalam proyek-proyek dengan struktur rumit dan bersarang multi-level, keruntuhan dan perluasan sekelompok halaman akan nyaman. Gloomaps adalah layanan gratis, tetapi bukan tanpa batasan. Tautan ke proyek disimpan selama 14 hari, dan setiap kunjungan baru ke halaman proyek memperluas ketersediaan tautan selama 14 hari berikutnya. Sejauh diketahui, proyek-proyek swasta tidak dapat dibuat. Fungsi untuk pembuatan peta situs otomatis tidak disediakan.
Bagi mereka yang akan menggunakan layanan ini secara teratur, akan bermanfaat untuk menggunakan jalan pintas, yang dijelaskan di bilah menu kiri. Dan fungsi ekspor dalam berbagai format memperluas kemampuan untuk berbagi peta situs yang dibuat.
RingkasanLayanan gratis dengan serangkaian fungsi optimal dan kemungkinan luas untuk mengekspor proyek yang sudah selesai.
Biaya, berlangganan : gratis
Kemudahan penggunaan : cocok untuk pemula
Desain : ★★★ ☆☆
Kerja tim : ✓
Ekspor : tautan, PNG, PDF, XML
Intuitif dan kaya template, Flowmapp membantu membuat peta situs visual dan merencanakan aliran pengguna.
Anda harus mendaftar terlebih dahulu. Proyek ini dapat:
- mulai dari awal
- impor dari file xml
- perluas template yang ada
Ada tiga jenis proyek dalam template yang disiapkan: e-Commerce, proyek perusahaan dan portal berita.
Dalam proses mengenal layanan, rekomendasi yang berguna dan tips mengenai alat dan fitur lingkungan kerja akan secara teratur muncul di sudut kanan bawah.
Animasi dan reaksi elemen antarmuka membantu untuk terlibat dalam proses dan mempelajari manipulasi dasar. Alokasi grup grup yang diimplementasikan dengan mudah untuk menghapus atau mengubah label.
Salah satu keuntungan utama adalah template halaman visual. Perpustakaan template mencakup sebagian besar pola informasi yang mungkin - fitur yang sangat diperlukan dan jelas dalam persiapan dan perencanaan konten untuk situs masa depan.
Dan bagi mereka yang terutama tertarik pada struktur, Anda dapat beralih ke tampilan yang ringkas dengan hanya header.
Sedangkan untuk navigasi, mekanik yang lebih nyaman, Project Map, telah ditambahkan ke set fitur standar. Peta Proyek menggabungkan nilai visual dan mekanik - bergerak di sekitar struktur proyek besar disederhanakan.
Ke setiap halaman proyek, Anda dapat menambahkan deskripsi yang diperluas dan melampirkan file individual. Fitur ini bermanfaat dalam proses mengisi situs dengan konten.
Pilihan ekspor yang luas dalam format SVG dan PNG memungkinkan Anda memilih opsi terbaik dan bahkan mengatur resolusi gambar pada output.
RingkasanLayanan dengan serangkaian fungsi yang dipikirkan dengan matang dan antarmuka yang bagus. Dalam berlangganan gratis, fitur tersedia dalam jangkauan luas. Cocok untuk presentasi proyek sitemap yang efektif dan berkualitas tinggi.
Biaya, berlangganan : paket gratis menyediakan 1 proyek aktif dan ruang 100 MB, tanpa batasan kolaborator. Berlangganan berbayar dari $ 8 per bulan untuk pembayaran tahunan.
Kemudahan penggunaan : untuk pengguna pemula dan menengah
Desain : ★★★★★
Kerja tim : ✓
Ekspor : tautan, PNG, SVG, PDF, DOCX
Relatif sederhana dalam organisasi Writemaps membantu merancang peta situs dan merencanakan konten proyek. Untuk menguji layanan ini, Anda harus mendaftar.
Dari sudut pandang desain, antarmuka dapat digambarkan sebagai "folk" atau polos. Paket gratis menyediakan akses ke bagian fungsi: 3 peta situs aktif dengan 50 halaman. Fitur yang tersisa tersedia untuk pengguna berbayar.
Bagian dari fungsi berbayar mencakup kemampuan untuk menyorot halaman proyek dengan warna, menggabungkan dan menambahkan konten ke dalamnya, membuat bagian, berbagi proyek dan mengekspor peta situs ke PDF. Meskipun untuk paket gratis, ekspor ke CSV dan XML disediakan.
Perlu dicatat bahwa peralihan antara peta situs dan konten dilaksanakan dengan mudah dan jelas. Daftar jalan pintas akan membantu mempercepat pekerjaan.
Ringkasan“Hanya yang paling diperlukan” adalah bagaimana Anda dapat menentukan pendekatan untuk fungsionalitas versi gratis. Langganan berbayar cocok untuk pengguna yang berencana untuk mendistribusikan konten, selain struktur umum situs.
Biaya, berlangganan : paket gratis mencakup 3 proyek aktif dengan batas 50 halaman. Berlangganan berbayar dari $ 14,99 per bulan.
Kemudahan penggunaan : untuk pengguna pemula dan menengah
Desain : ★★ ☆☆☆
Kerja tim : ✓
Ekspor : CSV, XML, PDF, dan tautan (hanya pengguna berbayar)
Raarki
Versi beta dari proyek ini memiliki serangkaian fitur sederhana. Peta situs dibuat dari awal dan dalam urutan generatif menggunakan tautan ke situs.
Pada saat publikasi ulasan, mekanisme penambahan halaman diatur sebagai berikut - Anda perlu memanggil menu konteks dengan mengklik blok halaman.
Tidak ada pengaturan tampilan blok tambahan yang disediakan. Namun, drag'n'drop bisa dimengerti. Dan format tampilan skema memungkinkan Anda untuk mengubah proyek menjadi skema biomorfik. Mungkin pandangan ini tampak jelas dan tepat.
Pada saat publikasi, ekspor hanya ke file CSV tersedia. Anda tidak dapat membagikan tautan langsung.
Biaya, berlangganan : gratis
Kemudahan penggunaan : untuk pemula
Desain : ★★ ☆☆☆
Kerja tim :
Ekspor : CSV
Dalam layanan Peta Situs Visual, peta situs dibangun berdasarkan proyek yang sudah diluncurkan secara otomatis. Alat ini merayapi struktur situs dan mengambil tangkapan layar halaman ukuran penuh. Pada saat yang sama, pengguna menentukan jumlah tangkapan layar dan kedalaman perayapan di tingkat. Pengguna berlangganan gratis memiliki akses ke kedalaman tidak lebih dari 2 level.
Proses perayapan relatif cepat. Tetapi jika proyek ini banyak, akan lebih bijaksana untuk memulai proses dan terganggu oleh tugas-tugas lain, dan layanan akan memberitahukan kesiapan situs secara otomatis melalui surat. Proyek ini diekspor ke PDF.
Pada saat publikasi, tidak ada begitu banyak fungsi tambahan, tetapi komentar pada screenshot halaman, kemampuan untuk menata ulang struktur proyek dan melindungi proyek dengan kata sandi telah diumumkan.
RingkasanPeta Situs Visual akan nyaman untuk analisis awal proyek. Terutama jika ada kebutuhan untuk melihat dan mengevaluasi tata letak halaman.
Biaya, berlangganan : paket gratis menyediakan pendaftaran satu pengguna dan 50 tangkapan layar dengan batasan kedalaman perayapan hingga dua tingkat. Berlangganan berbayar dari $ 29 per bulan.
Kemudahan penggunaan : untuk pengguna pemula dan menengah
Desain : ★★★★ ☆
Kerja tim : ✓
Ekspor : tautan, PDF
Slickplan
Layanan Slickplan multi-fungsi mencakup perancang peta situs, diagram, dan alat pembuatan aliran. Berbagai alat perencanaan konten dan template desain.
Lingkungan logis, area kerja jelas dipisahkan dari elemen navigasi. Dan bilah navigasi mewarisi logika aplikasi desktop klasik. Anda dapat membuat peta situs dari awal atau mengimpornya: dimungkinkan untuk menggunakan file XML dan teks, serta crawler bawaan.
Mekanisme manipulasi blok bersifat intuitif. Menambahkan halaman baru dengan cepat, dan drag'n'drop objek memungkinkan Anda untuk mengubah urutan dan hierarki. Pengaturan untuk setiap elemen (halaman, blok) dari peta situs meliputi:
- Menambahkan konten (teks dan multimedia)
- Tambahkan catatan
- Pemilihan jenis halaman
- Template Desain Distribusi
- Bagan
- Tambahkan tautan
Di Slickplan, Anda dapat menyesuaikan dgn mode peta situs tidak hanya dengan bantuan skema warna yang disiapkan, tetapi juga secara individual. Pengaturan dapat ditemukan di tab Styles di toolbar atas.
Kerja tim diimplementasikan secara rinci. Selain pengguna dengan hak editor, Anda dapat menghubungkan pengguna yang haknya terbatas untuk melihat proyek. Bagian dengan komentar akan membantu melakukan diskusi tentang proyek secara online.
Layanan ini menyediakan koneksi Google Analytics. Ini adalah fitur khas dan berguna dari Slickplan. Integrasi dengan layanan pihak ketiga (Basecamp, Slack, dan lainnya) memungkinkan Anda untuk berbagi proyek dalam format yang nyaman. Proyek ini dapat dilindungi kata sandi.
Tentu saja, dengan set fitur ini Anda seharusnya tidak mengharapkan berlangganan gratis. Periode uji coba 30 hari akan mengarah pada pemilihan paket yang cocok dari $ 9,99 per bulan.
RingkasanKumpulan fitur yang kaya dan antarmuka yang cerdas. Satu set besar fitur dan pengaturan ekspor.
Biaya, berlangganan : masa percobaan 30 hari. Berlangganan berbayar dari $ 9,99 per bulan.
Kemudahan penggunaan : untuk pengguna tingkat menengah dan lanjutan
Desain : ★★★★ ☆
Kerja tim : ✓
Ekspor : Tautan, PDF, EPS, HTML, CSV, TXT, DOCX, Peta Situs Slickplan XML
Untuk melihat-lihat di Dynomapper Anda harus membuat akun. Masa percobaan 14 hari tersedia. Kenalan dengan layanan akan dimulai dengan penjelajah video visual.
Seperti dalam layanan pemetaan situs visual canggih, pengguna diundang untuk memulai proyek dari awal atau menggunakan ekspor. Ngomong-ngomong, ada juga di sana.
Perlu dicatat bahwa desain lingkungan tertahan dan konservatif. Dan proses membuat sitemap lebih seperti interaksi klasik dengan Explorer (Win) atau Finder (Mac). Struktur situs, berbeda dengan layanan yang dijelaskan sebelumnya, ditampilkan dalam bentuk yang menyerupai pohon file.
Ringkas dan akan menarik bagi mereka yang terbiasa dengan interaksi seperti itu. Meskipun mode Preview sudah ditampilkan dalam bentuk diagram alur, dan menyediakan 4 jenis tampilan tambahan.
Pengaturan untuk properti dan fungsi elemen berlokasi di panel kanan tab:
- Halaman (Informasi Halaman yang Diperpanjang)
- Konten (Perencanaan (menambahkan) konten teks dan multimedia)
- Analisis
- Komentar
Proyek pribadi hanya akan tersedia bagi pengguna yang terhubung ke akun.
Opsi ekspor fleksibel ke PDF memungkinkan Anda memilih format (ukuran) sebelum menyimpan. Selain itu, pengguna menentukan dan membatasi jumlah tingkat bersarang untuk ekspor.
Manipulasi dan tindakan yang terpisah memerlukan studi bagian bantuan yang lebih rinci.
RingkasanAlat ini memberi kesan menyeluruh dan kemungkinan besar menyiratkan studi yang lebih mendalam tentang proyek dan bekerja dengan konten.
Biaya, berlangganan : masa percobaan 14 hari. Berlangganan berbayar dari $ 49 per bulan.
Kemudahan penggunaan: untuk pengguna tingkat menengah dan lanjutan
Desain : ★★ ☆☆☆
Kerja tim : ✓
Ekspor : tautan, PDF, CSV
Perayap gratis, menghasilkan sitemap situs yang ada secara otomatis. Hasil perayapan adalah diagram tautan halaman situs. Dan dalam beberapa kasus, hasilnya mungkin berskala besar.
Pembuat layanan memposting kode sumber di Github (
https://github.com/alentum ). Perayap dengan hati-hati menyimpan riwayat permintaan.
Biaya, berlangganan : gratis
Kemudahan penggunaan : untuk pemulaDesain : ★★ ☆☆☆Secara pribadi
Creatly menciptakan lingkungan demo dengan hati-hati untuk menguji layanan tanpa registrasi. Membuat peta situs hanya bagian dari fungsi alat. Creatly dirancang untuk memvisualisasikan berbagai struktur informasi.Proyek demo telah dibuat di lingkungan pengujian untuk membuat peta situs. Sebuah contoh dirancang untuk membantu memahami mekanika dasar, dan mengatasi tugas ini.
Drag'n'drop bersifat visual: elemen seret dan lepas disertai dengan tautan visual antara halaman dan objek. Mengedit halaman, menghapus objek, dan menghubungkan garis berfungsi seperti pada editor vektor yang sudah dikenal. Oleh karena itu, bagi para desainer, mekanika akan dapat dimengerti dan ditutup.
Panel kanan yang dapat diperluas berisi pengaturan gaya dan informasi tambahan. Grid dan mengikatnya adalah fitur yang nyaman. Dimungkinkan untuk memilih font, menentukan perataan teks dalam suatu blok, dll. Palet yang kaya gaya akan membantu mengatur aksen pada peta situs.
Ukuran dokumen dalam piksel adalah fitur yang aneh. Pengguna selalu menyadari resolusi gambar sebelum mengekspornya.
Ringkasanmekanika Creately paling dekat dengan editor grafis. Fungsi layanan memungkinkan Anda membuat tidak hanya peta situs, tetapi juga banyak diagram dan diagram alur lainnya.Biaya, berlangganan : paket gratis mencakup 5 dokumen publik dan kemampuan untuk menambah hingga 3 kolaborator. Berlangganan berbayar dari $ 5 per bulan.Kemudahan penggunaan: untuk pengguna tingkat menengah dan lanjutanDesain : ★★★★ ☆Kerja Tim : ✓Ekspor : tautan, PNG, JPG, SVG*********************** **************PS
Untuk membuatnya lebih mudah untuk dipilih, berikut adalah tabel perbandingan untuk semua layanan (di bagian paling akhir) dan beberapa tangkapan layar lainnya.