Bagaimana cara menyajikan maket desain web kepada klien?


8

Saya sedang mengerjakan proyek desain ulang situs web. Saya perlu memberikan beberapa maket yang berbeda kepada klien untuk ditinjau. Saya ingin memastikan klien dapat melihat semuanya dalam konteks. Saya tidak ingin berasumsi bahwa klien memiliki perangkat lunak yang tepat. Mungkin bahkan menambahkan beberapa komentar, pertanyaan, atau latar belakang pada arah desain.

Apa cara tipikal menyajikan maket kepada klien? Saya berasumsi bahwa menyajikan maket situs web dalam email bukanlah cara terbaik. Jika email adalah cara yang berhasil untuk menyajikan maket, tolong jelaskan itu dalam jawaban.


yah, cara mockup yang berhasil adalah mengkodekannya. Akan SELALU ada variasi dari desain ke kode. Variasi kecil itu akan menyebabkan klien bertanya atau mengatakan "tidak seperti itu dalam desain".
DᴀʀᴛʜVᴀᴅᴇʀ

Anda selalu bisa membuat server sendiri dan memberi mereka tautan ke mock up yang telah Anda rancang? Saya pikir itu akan menjadi cara terbaik. Anda mungkin ingin membuat akun tingkat rendah dan memberi mereka detail login.
BBking

Jawaban:


6

Yah ada beberapa cara untuk mengirim maket ke klien. Jika Anda khawatir tentang perangkat lunak, Anda dapat mengekspor setiap desain sebagai .pdfdan membangun halaman mutli .pdfdi Acrobat, dan menambahkan komentar untuk membantu presentasi jika Anda tidak ingin hanya mengirim gambar.

Pilihan lain adalah membuat mereka dicetak profesional di papan poster dan melakukan demonstrasi dalam rapat.

buat tayangan slide dan tampilkan dalam sebuah wawancara.

Kode keluar situs web dalam kerangka-kawat itulah sebabnya saya memposting ini .

Jika Anda ingin membeli secara murah beberapa kertas sketsa seperti ini , dapatkan penggaris sekitar 36 "gambar rangka situs Anda dan gunakan pensil warna untuk menggambarkan bingkai kawat.

Pertanyaan Anda sangat kabur dan ada beberapa ide dan solusi. Ketika saya membaca pertanyaan ini, saya tidak tahu tahap apa Anda dalam desain ulang. Ketika Anda merujuk ke mockup, saya berasumsi Anda berada di tahap wire-frame.

EDIT: tetapi dalam kenyataannya jika Anda sangat khawatir tentang klien mendapatkan rasa yang benar untuk situs Anda mungkin juga kode itu dan pastikan file CSS Anda cukup dapat diedit sehingga Anda tidak menggali lubang dengan perubahan. Apakah situs ini seharusnya merupakan situs CMS, situs HTML sederhana, situs eCommerce, dll. Mengapa tidak hanya membuat seluruh situs dalam kerangka-kawat CSS?


Itulah beberapa ide bagus. Maksud saya mockup adalah contoh berkualitas tinggi dari apa situs itu akan terlihat (belum html / css). Saya berencana membuat beberapa mockup berbeda di photoshop karena lebih cepat / mudah untuk mengubah desain di photoshop daripada kode. Membuat presentasi berbasis web akan membantu klien merasakan bagaimana situs akan terlihat di browser. Saya juga dapat menambahkan beberapa Google Analytics untuk mengetahui dengan tepat browser apa yang digunakan klien sehingga saya dapat memastikan itu terlihat bagus di browser mereka.
Andrew

baik browser apa yang digunakan klien tidak terlalu penting jika demografisnya mengarah ke sesuatu yang berbeda. Anda perlu mempelajari apa demografis mereka untuk melihat apakah IE diperlukan atau tidak.
DᴀʀᴛʜVᴀᴅᴇʀ

Saran yang bagus, tapi saya sudah tahu browser target. Bagian penting dari mengetahui browser klien adalah bahwa Anda tidak melakukan kesalahan mencolok yang akan segera dilihat klien. Juga, jika klien menggunakan alat admin untuk mengedit situs mereka, memastikan browser mereka didukung adalah penting.
Andrew

5

Jika saya mengerti dengan benar, Anda bertanya-tanya apakah ada cara 'standar' untuk berbagi maket (seperti ketika mengirim, misalnya, desain logo - di mana Anda biasanya mengikuti pedoman presentasi).

Sejauh yang saya ketahui: Tidak, tidak ada.

Sebagian besar akan tergantung pada apa sarana komunikasi yang telah Anda gunakan dengan klien Anda. Meskipun sebagian besar email benar-benar valid, Anda mungkin perlu membagikan hasil pekerjaan Anda dengan tim yang lebih besar, misalnya. Dalam hal ini, Anda mungkin ingin menggunakan beberapa aplikasi yang memungkinkan orang berinteraksi dengan cara yang lebih dinamis.

Beberapa alat manajemen proyek yang saya gunakan untuk umpan balik tim adalah BaseCamp dan Trello . Tetapi ada banyak yang serupa yang mungkin Anda temukan sangat berguna (bahkan Google Documents - Ada daftar lengkap di sini juga). Keuntungan mereka adalah bahwa mereka membiarkan anggota yang berbeda meninggalkan input pada pengembangan, dan seperti yang Anda sebutkan dalam komentar itu memungkinkan tindak lanjut atas segalanya.

Balsamiq adalah alat hebat lainnya untuk dengan mudah menambahkan komentar dan membuat modifikasi pada maket online (itu tidak benar-benar memerlukan keahlian apa pun oleh klien, itu sangat intuitif), tetapi Anda mungkin perlu mendapatkan lisensi tambahan untuk dapat mengundang orang lebih.


Daftar lengkap itu cukup bagus. Saya tidak perlu memikirkan layanan pihak ketiga (saya juga seorang pengembang, saya bisa membangun sendiri). Hanya ingin tahu bagaimana perancang biasanya menyajikan maket desain web dengan cara digital untuk mendapatkan umpan balik klien.
Andrew

3

Saya pikir Anda bertanya tentang tindakan fisik presentasi daripada rincian teknologi.

Anda benar dalam konteks itu adalah bagian besar dari presentasi yang sukses. Mengirimkan mock-up agar mereka melihatnya tanpa Anda berada di sana tidak ideal. Apa yang biasanya akan terjadi adalah bahwa Anda akan mendapatkan umpan balik yang tidak fokus ... sering kali di mana komentar akan berfokus pada detail estetika yang tidak penting dan sering subyektif daripada masalah-masalah besar gambaran strategis utama.

Yang saya rekomendasikan adalah semacam walk-through formal dengan mereka. Idealnya secara langsung, tetapi jika tidak secara langsung, Anda dapat dengan mudah menanganinya melalui panggilan telepon (mengirim file 5 menit sebelum panggilan) atau melalui semacam teknologi berbagi layar seperti Skype.

Dengan cara ini Anda tidak hanya dapat menampilkan visual Anda, tetapi Anda dapat MENJELASKAN visual Anda. Anda dapat berbicara tentang keputusan estetika dan strategi bisnis yang Anda buat untuk sampai pada kesimpulan yang Anda dapatkan. Anda dapat membantu memusatkan perhatian pada aspek-aspek utama dan membelokkan jauh dari detail-detail yang kurang penting untuk menjaga proyek tetap pada sasaran.

Mengenai apa yang harus ditampilkan, saya setuju dengan banyak komentar lain yang menunjukkan mock-up visual statis untuk situs web tidak ideal dan kemungkinan ada cara yang lebih baik untuk melakukannya, tapi itu benar-benar pertanyaan yang sama sekali berbeda.


Posting bagus dan untuk menambahkan saya yakin Anda merujuk ke webinar. Ada beberapa solusi bisnis kecil dan solusi korporat di luar sana.
DᴀʀᴛʜVᴀᴅᴇʀ

3

Sebagai pengembang dan komunikator, cobalah untuk memberi tahu klien Anda bahwa apa yang mereka lihat adalah gambaran statis dan datar dari desain situs prospektif mereka. Berikut adalah beberapa metode untuk memamerkan desain web kepada klien:

Metode Menyajikan Mock-Ups Desain Web

  • Tempatkan gambar di halaman web dan kirim mereka tautan

  • Kirim JPEG atau PNG melalui email

  • Gunakan beberapa jenis aplikasi berbasis web

  • Gunakan situs web CodedPreview

  • Buat A Client Studio

  • Ekspor mock-up dalam PDF

  • Kirimi mereka JPEG atau PNG & minta mereka untuk mencetaknya


2

Saya menghubungi seorang teman saya yang merekomendasikan yang berikut:

  • Jika Anda hanya bekerja dengan gambar, ada aplikasi seperti mocku.ps
  • Jika Anda mencari produk yang lebih lengkap, ada Pixelapse , yang lebih berfokus pada kolaborasi. Ini termasuk kontrol versi, cadangan, komentar, dll.

2

Tidak ada prosedur standar untuk pengetahuan saya. Seperti kebanyakan hal, begitu Anda mendapatkan lebih banyak di sisi bisnis proses, perusahaan yang berbeda dan individu yang berbeda memiliki praktik yang berbeda.

Saya telah melakukan pekerjaan dengan perusahaan, yang sedikit lebih pada sisi pekerjaan / pemasaran berkelanjutan untuk klien, memiliki sistem yang pintar, di mana mereka memberikan klien mereka login ke situs web mereka, yang membawa mereka ke halaman dengan semua sumber daya tersedia untuk diunduh. Ini lebih diarahkan untuk salinan logo mereka dan karya misc lainnya dalam berbagai format warna, resolusi, dan format file, sehingga perusahaan tanpa desain junky dapat mengambil variasi yang berbeda, atau file vektor jika mereka membutuhkannya untuk alasan apa pun. Anda dapat melakukan sesuatu yang mirip dengan ini, memiliki log yang menampilkan gambar, dan catatan tentang pekerjaan yang sedang berlangsung.

Itu prosedur yang cukup berat. Jika ini lebih kecil, satu pertunjukan, Anda mungkin hanya ingin mempertimbangkan untuk mengkompilasi gambar Anda ke dalam file pdf dengan catatan yang menjelaskan apa, di mana Anda atau mereka dalam proses, apa yang dibutuhkan dari siapa, dan apa yang terjadi selanjutnya. Tampar logo Anda di bagian atas dan format dengan baik, dan itu akan terlihat lebih profesional daripada hanya melampirkan gambar ke email.


1

Beberapa bulan yang lalu saya menemukan sebuah aplikasi bernama InVision . Ini memberikan kemampuan untuk mengunggah maket dan revisinya, membuat prototipe interaktif, dan kemampuan untuk meninggalkan komentar pada area spesifik dari maket tersebut. Aplikasi ini telah meningkatkan cara saya memberi / menerima umpan balik dan berkomunikasi dengan desainer dan klien saya.


0

Nah, Anda membuat maket untuk berkomunikasi. Jadi pergilah ke bengkel langsung kapan pun Anda bisa.

Dalam lokakarya semacam itu, diskusikan maket-maket tersebut sembari mengutak-atik dan membuat anotasi maket Anda saat itu juga. Anda menciptakan sesuatu bersama - ini membuatnya menjadi bayi mereka juga.

Perhatikan bahwa di atas berfungsi jika Anda melakukan beberapa langkah (sebagai lawan memiliki satu presentasi besar ketika Anda sudah menyelesaikan prototipe terperinci). Btw Anda ingin mockup layar / halaman utama Anda terlebih dahulu. Baru kemudian masuk ke detail, dan lakukan satu skenario pada satu waktu.


0

Pada proyek terakhir saya harus mempresentasikan kami mengadakan pertemuan dengan klien dan menunjukkan png papan cerita di browser. Tidak ada yang mewah tapi itu memang menghadirkan desain di lingkungan 'asli' mereka.


0

Pengalaman saya dalam mengirim gambar melalui email ke klien buruk - klien biasanya memiliki masalah dengan rasio gambar dan ukuran di klien email mereka. Ini dapat menyebabkan pratinjau desain web dapat terlihat dan terasa sedikit berbeda.

Kami menggunakan layanan online untuk mempublikasikan pekerjaan kami. Kami mengunggah gambar kami ke layanan hosting pihak ketiga dan mengirim URL untuk klien.


0

Sebelumnya, pada 2000-an mengirim tata letak melalui surat efektif. Sekarang, penyajian desain kepada pelanggan memiliki layanan khusus. Apakah ini dirancang khusus untuk ini.

Mari kita lihat bagaimana (m) layanan maquetter.com dapat membantu Anda. Ini dikembangkan secara khusus untuk tujuan ini yang Anda buat:

  • Tambahkan tata letak situs yang Anda gambar dengan cepat;
  • Bagikan tata letak berdasarkan bagian situs web (misalnya, mengulangi menu).

Ini juga memungkinkan Anda:

  • untuk menandai tata letak yang disetujui oleh klien
  • perbarui tata letak yang sama dan simpan riwayatnya.

Layanan ini memberi Anda tautan singkat. Anda mengirimnya (melalui surat, pesan teks atau Skype). Pelanggan dapat dengan mudah melihat tata letak Anda di browser apa pun. Anda dapat melakukannya seperti layaknya klien Anda melihatnya .

Layanan gratis. Tetapi Anda dapat menggunakan rencana tarif berbayar untuk dapat menghadirkan lebih banyak tata letak.

Cobalah sendiri

Untuk info lebih lanjut Anda bisa membaca blog


Salam pembuka. Ya, saya menciptakan ide layanan dan manajer proyek. Di waktu luang saya, saya ingin membantu desainer dalam pekerjaan mereka. Untuk menyampaikan kepada mereka ide tentang ini dan layanan serupa (saya tahu tentang 13ti). Ya maquetter terwakili dalam versi berbayar. Tetapi pada 1 Oktober, kami memperkenalkan paket layanan "gratis - selamanya."
Igor Abyzov

0

Anda dapat membuat demo interaktif dengan tangkapan layar / gambar Anda. Lihatlah alat-alat ini: http://www.appdemostore.com/ dan http://giveabrief.com/ .

Keduanya sangat mudah digunakan; pilih bingkai perangkat, unggah gambar Anda dan tambahkan interaksi apa yang Anda butuhkan. Anda dapat memasukkan tombol, ikon untuk cubitan, perpanjang dll. Semoga ini akan membantu Anda. :)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.