PERENCANAAN DAN DESAIN

Tulang punggung situs web adalah konten dan desain.
Arah utama dipandu oleh fase strategi
Kami merencanakan dan merancangnya dalam bentuk yang lebih spesifik.

Cara Membuat Website

Dalam proses produksi, kami melakukan perancangan dan pengembangan aplikasi yang mengarah pada peningkatan efisiensi kerja klien dan peningkatan produktivitas dari sistem web. Kami menerapkan cara membuat web terbaru untuk menciptakan hasil yang optimal dalam setiap produk website yang kami hasilkan.

Kami akan skenario pengalaman pengguna di situs dan mencerminkan dalam garis-garis aliran dan navigasi.

Peta jalan bisnis dan jurnal pelanggan yang diproduksi dalam fase strategis adalah diagram peran situs web dan pergerakan target di seluruh bisnis, dan pergerakan dan arus target di luar situs Web didefinisikan. Namun, walaupun ini sangat ideal untuk menggambar desain tanah dari situs web, tidak mungkin untuk secara jelas menarik aliran seperti apa dan bagaimana pengalaman pengguna di situs web. Jadi, hal pertama yang kita lakukan di tahap desain adalah membuat skenario pengalaman situs.

Skenario rinci flow dari pintu masuk untuk keluar dari website

Skenario pengalaman situs adalah diagram pergerakan pengguna yang mengunjungi situs web di dalam situs web. Jalur utama dari pintu masuk situs ke pintu keluar (goal) didefinisikan, dan berdasarkan kebijakan ini, struktur kategori situs web, komposisi navigasi global, komposisi navigasi lokal, atau tata letak dasar halaman akan diputuskan.

Meskipun merupakan situs Web dengan struktur yang sama, pengalaman seperti tempat kunjungan dan cara bermigrasi akan bervariasi dari target ke target. Juga, meskipun target yang sama memiliki kebutuhan dan status yang berbeda dalam proses pembelian, rute masuk dan halaman arahan akan berubah, dan garis perilaku di situs akan berubah juga.

Isi sistem akuisisi

Pengalaman konten

Berdasarkan skenario perjalanan dan pengalaman pelanggan, ada konten yang ditemukan berdasarkan kebutuhan informasi. Sebagai hasil dari kebutuhan pengguna sebagai basis, ia mungkin tumpang tindih dengan konten pelanggan yang menarik sebagai hasilnya, namun dibuat dari sudut pandang murni meminta pengguna tanpa memikirkan penyebaran dengan kata kunci atau SNS. Oleh karena itu, penting untuk mencocokkan tingkat pemenuhan konten dengan kebutuhan pengguna lebih dari sekadar menarik konten pelanggan.

Atur kelompok konten yang tercantum dalam fase strategi dan susunlah itu sebagai sebuah situs web. Kami akan menentukan struktur situs web sambil menyeimbangkan persyaratan strategis seperti sudut pandang pemasaran strategis dan sudut pandang UX dan logika informasi. Melalui serangkaian desain peta situs, struktur kategori dan jumlah halaman diselesaikan, sehingga memungkinkan untuk merumuskan kutipan dan jadwal yang lebih terperinci.

Sitemap tingkat tinggi

Ini adalah peta situs kasar yang mengatur struktur dasar situs web. Kami tidak melakukan identifikasi halaman secara terperinci, namun menentukan struktur kategori dasar yang mempengaruhi navigasi global dan hubungan antar kategori. Hal ini juga terletak antara skenario pengalaman situs dan peta tingkat rendah / situs dan juga digunakan untuk memasukkan gagasan desain garis aliran dalam struktur situs web. Terutama di situs yang sangat besar, saat membuat peta situs secara tiba-tiba oleh unit halaman, sering kali Anda tidak dapat memahami keseluruhan situs Web, jadi pada tahap awal Anda akan terlebih dulu membuat peta situs tingkat tinggi dan menentukan keseluruhan struktur .

Peta situs tingkat randah

Ini adalah peta situs yang tepat yang memecah ke unit halaman. Berdasarkan tingkat tinggi · sitemap, kita akan mengklasifikasikan isi yang diekstraksi dalam tahap strategi secara rinci dan membuatnya menjadi halaman. Pada peta tingkat rendah / situs, tidak hanya struktur yang didefinisikan secara sederhana, tetapi juga nama direktori, nama file, kata kunci yang sesuai, atribut TITLE dan atribut META, cakupan CMS dan SSL, ruang lingkup prototipe dan desain, ruang lingkup HTML, tahap pembelahan Ini adalah dokumen yang memiliki karakteristik yang mendekati spesifikasi yang menggambarkan informasi yang diperlukan untuk memproduksi situs web berdasarkan halaman. Ini juga akan menjadi dasar jadwal dan perkiraan setelah tahap pengembangan.

Wireframe adalah dokumen yang dibuat untuk desain layar. Informasi dan fungsi yang akan dipajang di layar ditentukan untuk setiap layar. Kerangka dari setiap halaman dan penyempurnaan isi dan desain visual dilakukan berdasarkan informasi ini. Selain itu, dengan perusahaan klien, kita akan membahas diskusi tentang isi setiap layar begitu kita melakukan konsultasi di tahap bingkai kawat.

Kerugian dari Wireframe

Sebenarnya, dalam alur kerja kita saat ini, kesempatan untuk membuat wireframes jauh berkurang. Sebagai gantinya, desain layar dilakukan dengan menggunakan HTML mockup. Itu karena wire frame memiliki kelemahan berikut.

• Perancang perlu menjelaskan maksud struktur dokumen pada coder
• Kami membutuhkan dokumen lain untuk menentukan struktur file dan informasi header yang dipikirkan perancang
• Saya harus menyalin dan menyalin teks pada WF atau PSD pada saat coding
• Ada batasan untuk mengekspresikan struktur tautan, gerakan, kegunaan di atas kertas
• Saat melakukan koreksi terhadap bagian umum, kita harus melakukan koreksi untuk setiap halaman
• Dalam kasus Web responsif, perlu dibuat dua jenis WF untuk PC dan smartphone
• Saya harus mencetak WF baru setiap kali saya memperbaruinya

Meskipun ini adalah masalah yang dapat dikurangi tergantung pada kecerdikan, dalam mockup HTML, karena banyak kelemahan ini dipecahkan, prototip HTML diadopsi secara preferensial dalam desain layar saat ini. Namun, pertimbangan diberikan pada kasus di mana orang yang bertanggung jawab atas perusahaan klien yang bertanggung jawab atas desain dan HTML oleh perusahaan lain terbiasa melakukan konfirmasi / pengambilan keputusan pada kerangka kawat, kasus bahwa jumlah layarnya kecil dan rangka kawat dapat berjalan dengan lancar. Jika ada keadaan yang harus dilakukan, Anda juga bisa memilih bingkai gambar untuk disain layar.

Mengapa kami merekomendasikan prototipe HTML

Prototipe HTML bisa mengatasi banyak kerugian dari wireframe. Misalnya, poin berikut bisa dikatakan sebagai keuntungan dari prototip HTML.

• Anda bisa mengecek struktur link, ukuran layar, ukuran karakter, tingkah laku yang responsif, dll.
• Karena file desain dapat dialihkan ke pengkodean, efisiensi produksi meningkat
• Isi dari desain layar bisa langsung tercermin dalam HTML
• Dokumen desain yang menyertai wireframe menjadi tidak perlu
• Anda bisa menggunakan penggantian massal dengan editor, sehingga Anda bisa melakukan perubahan dengan cepat
• Jangan repot-repot mencetak untuk pengiriman
• Penciptaan template CMS dapat dilanjutkan bersamaan dengan desain visual

Meskipun ada banyak manfaat terutama pada produktivitas sisi produksi, ini juga merupakan keuntungan besar bagi pihak perusahaan klien khususnya yang dapat dikonfirmasikan saat beroperasi dengan cara yang sama seperti situs web sebenarnya pada tahap perancangan. Memang, dari beberapa perusahaan klien yang biasa menggunakan wireframes, prototipe HTML jauh lebih mudah dipahami dan lebih mudah membayangkan bentuk jadi.

Desain layar dengan prototipe HTML unik bagi perusahaan kami, dan ini hampir tidak dilakukan oleh perusahaan lain. Ini karena semua staf memiliki pengalaman produksi, menyentuh HTML adalah faktornya. Selain itu, kami mempersiapkan template dan sebagainya untuk segera membuat prototipe HTML, dan kami berada di tempat.

Kami akan menganggap prototipe HTML ini sebagai hasil utama dalam desain layar, mengingat susunan isi, tata letak dasar, struktur dokumen akhir dan sebagainya.

Di situs Web terbaru, hampir tidak ada waktu untuk tidak memperbarui setelah diluncurkan. Oleh karena itu, ada banyak kasus di mana penerapan CMS diperlukan. Bahkan untuk sebagian besar proyek yang kami bantu, CMS / simplified CMS seperti WordPress diimplementasikan.

Manfaat mengenalkan CMS

Apakah CMS diperkenalkan atau tidak sering dinilai berdasarkan pembaruan atau tidak diperlukan, namun CMS memiliki banyak kelebihan sebagai berikut, termasuk itu.

• Anda dapat memperbarui tanpa menggunakan alat pengembangan
• Anda dapat mengontrol waktu rilis
• Anda bisa membatasi siapa yang bisa mengedit dan mempublikasikan dengan setting permission
• Konten diubah menjadi DB, membuat penambahan dan modifikasi menjadi lebih mudah
• Pekerjaan manual seperti link paste pada saat penambahan konten berkurang
• Karena bagian UI merupakan templated, menjadi mudah untuk memperbarui semua bersama-sama
• Tag dan konten lainnya ditangani sebagai data, sehingga mudah menambahkan fungsi dll.
• Lebih mudah untuk melakukan sinkronisasi dan back up pementasan dan produksi

Namun, spesifikasi rinci bervariasi tergantung pada CMS. Mengingat persyaratan server, ukuran lalu lintas, struktur operasi, update konten, kenyamanan UI, fleksibilitas kustomisasi, kerjasama dengan CRM dan SFC, biaya pengenalan, dll, juga memungkinkan untuk membantu Anda memilih solusi optimal. .

Manfaat WordPress

Karena kami bukan vendor CMS, kami tidak akan merekomendasikan CMS spesifik secara istimewa. Namun, situasi sebenarnya adalah WordPress sangat besar dalam hal pencapaian. Itu karena WordPress memiliki kelebihan sebagai berikut.

• Biaya lisensi open source gratis
• Digunakan di seluruh dunia dan memiliki banyak plugin
• Mengasumsikan lingkungan server umum, dan ada beberapa batasan oleh lingkungan
• Dibuat dengan PHP, jadi jika Anda seorang programmer Anda dapat dengan mudah menyesuaikannya
• Mudah menyesuaikan layar manajemen, bisa disesuaikan dengan tingkat kemahiran
• Kami memiliki track record yang luas dari WordPress, ada pengetahuan tentang penyesuaian yang setara dengan CMS berbayar

Karena WordPress banyak digunakan, ada kesalahpahaman bahwa security broken case difokuskan, mengakibatkan kelemahan keamanan, namun keamanannya tidak jauh berbeda dengan CMS umum dalam hal keamanan. Selain itu, kami juga menerapkan langkah-langkah untuk memaksimalkan keamanan dengan menerapkan pembatasan IP pada layar manajemen, mengubah URL layar manajemen menjadi string karakter yang sewenang-wenang, dan merancang otentikasi dasar dan otentikasi login.

• Lingkungan yang disarankan
• Setelan peramban prasyarat
• Versi HTML
• Kode karakter
• Kode umpan baris
• Aturan referensi badan
• Aturan karakter tergantung model
• Aturan Link / path
  
• Aturan META tag
• Aturan OGP tag
• Aturan TITLE tag
• Aturan analisis terkait analisis log
• Aturan elemen HEAD lainnya
• Aturan Logical tag
• Aturan Emphasis tag
• Aturan Form
• Accessibility compliant
• Aturan Section
• Indentasi karakter ruang
• Item terlarang (spam mesin pencari)
• Filosofi desain CSS
• Format deskripsi CSS
• Aturan deskripsi JavaScript
• Definisi perpustakaan JavaScript
• Aturan terkait antar perangkat
• Jenis direktori / aturan penamaan
• Jenis file / aturan penamaan
• Jenis gambar / aturan penamaan
• File referensi eksternal
• Tidak perlu file

Kami akan merumuskan peraturan yang digunakan di website dan memastikan kualitas dalam proses penyalinan.

Kami akan menyiapkan panduan untuk penyalinan di website terlebih dahulu. Dengan melakukan ini, ini mencegah inkonsistensi dalam notasi dan ekspresi, dan mengamankan kualitas konten. Pada dasarnya dibuat bagi staf produksi untuk memanfaatkan pada saat tes, namun jika perlu, hal itu dapat disampaikan sebagai kiriman.

Saya adalah blok teks. Untuk mengubah teks ini, klik tombol Edit. Dari sini, contoh teks dari blok teks disusun. Saat memasukkan teks Harap hapus dan masukkan

• Judul halaman
• Angka (notasi full-width / half-width / Chinese)
• Tanggal
• Alfabet
• Tanda baca
• Tanda kurung
• Simbol
• Karakter terlarang (karakter tergantung model)
• Notasi hak cipta
• Komposisi body
• Judul
• Label link
• Hypertext
• Aturan tombol
• Form terkait
• Langkah Notasi
  
• Notasi gambar
• Notasi & Tampilkan daftar aturan

Kami akan merancang sebuah metode untuk mendapatkan informasi pelanggan informatif yang dapat dimanfaatkan sebagai data pemasaran.

Formulir seperti pertanyaan dan bahan permintaan adalah fungsi yang disisihkan untuk website. Ini bukan hanya jendela penyelidikan. Terutama di situs BtoB, ini menjadi titik kontak penting untuk memperoleh informasi pelanggan, dan bentuknya seringkali merupakan tujuan akhir di situs web.

Oleh karena itu, kita tidak hanya merancang bentuk internal seperti EFO (Entry Form Optimization), tapi juga bagaimana mengatur bentuk dan cara memanfaatkannya dalam skenario pengalaman situs. Kami akan mengklarifikasi rencana terlebih dahulu.

• Jenis data yang akan diperoleh
• Metode input data
• Bagaimana meng output data
  
• Definisi kondisi input
• Spesifikasi validasi inline
• Definisi solusi dan API yang bekerja sama
• Teks konfirmasi e-mail dikirim ke pengirim
• Pengaturan teks dan alamat surat surat masuk untuk dikirim ke penanggung jawabnya
• Adanya / tidak adanya fungsi pelaporan berkala dan rincian spesifikasi

Kami adalah insinyur yang terdaftar di perusahaan, dan kami juga melakukan pengembangan di sisi server dan juga front end. Kami juga memiliki pengetahuan yang luas tentang metode perancangan berbasis dokumen seperti definisi persyaratan sistem dan dokumen desain.

Yang penting dalam dokumentasi sistem adalah menyeimbangkan penyempurnaan dan kecepatan. Dalam persyaratan definisi dan dokumen desain yang terlalu rumit, masalah besar akan terjadi setelah pembangunan. Di sisi lain, tidak mungkin mendokumentasikan spesifikasi sistem yang belum selesai. Oleh karena itu, kami akan memutuskan konten desain secara rinci dengan mempertimbangkan kegunaan dan efisiensi kerja yang realistis, seperti memperbaiki item yang sangat penting sementara memperbaiki faktor-faktor yang berubah tergantung pada cara disain dan pengembangan.

Dalam definisi persyaratan, hal-hal berikut terutama didefinisikan.

• Lingkup pengembangan
• Konsep sistem
• Persyaratan lingkungan (perangkat keras, perangkat lunak, jaringan)
• Proses bisnis
• Kebutuhan fungsional
• Persyaratan kinerja
• Input / Output
• Kebutuhan data (database)
• Persyaratan keamanan
• Persyaratan mutu

Mengenai disainnya, kita sering berhadapan dengan isi berikut.

• Struktur fungsional
• Tipe data dan metode pengolahannya
• Komponen layar dan perilaku backend
• Pemilihan software dan solusi
  
• Spesifikasi dan metode operasi API
• Definisi modul program
• Aliran proses
• Jenis dan perilaku data input / output