Isi
- Metodologi yang responsif
- Bagaimana cara menyimpan konten terlebih dahulu?
- Mengapa?
- 01. Tentukan tujuan bisnis dan pengguna Anda
- 02. Referensikan mereka setiap ada kesempatan
- 03. Jangan takut untuk melawan
- 04. Dorong tim Anda sendiri juga
- 05. Tentukan semua kebutuhan konten Anda di muka
- Bagaimana cara saya mengabstraksi konten dari presentasi?
- Kita perlu berhenti memikirkan konten dalam hal tata letak
- Paksa klien Anda untuk merencanakan konten mereka terlepas dari desain
- Selesaikan konten Anda sebelum desain
- Gunakan konten nyata - setiap saat
- Jadi bagaimana cara kerja wireframe untuk proyek desain responsif?
- Membuat sketsa
- Kerangka kerja dalam browser
- Anotasi
- Gunakan konten nyata di wireframes
- Bagaimana cara mendesain layar kecil terlebih dahulu?
- Desain abstrak dari perangkat di awal
- Gunakan Style Tiles
- Ciptakan harmoni antarmuka
- Lihat semuanya di browser
- Keseimbangan dengan program statis
- Kesimpulan
Mari kita perjelas: desain adalah solusi hanya jika berfokus pada masalah yang lebih dalam yang dihadapi, alasan di balik semuanya. Proses yang solid harus selalu memandu pekerjaan kita, tetapi kita perlu merangkul sesuatu yang lebih fleksibel. Media kita akhirnya terbukti bisa berubah-ubah, jadi bukankah seharusnya proses kita? Pikirkan tentang desain sistem: Anda perlu melihat keseluruhan gambar dan detail kecil. Mustahil? Jauh dari itu!
Frank Chimero menaruhnya dengan indah dalam bukunya The Shape of Design: “Ada bagian di mana seniman mundur dari kuda-kuda untuk mendapatkan perspektif baru tentang karya tersebut. Melukis adalah bagian yang sama dekat dan jauh: ketika dekat, sang seniman bekerja keras untuk membuat tandanya; ketika jauh, dia menilai pekerjaan untuk menganalisis kualitasnya. Dia mundur untuk membiarkan pekerjaan berbicara dengannya. "
Kita perlu membiarkan pekerjaan kita, media kita, berbicara kepada kita. Dengan munculnya desain responsif, kami akhirnya merangkul media kami sebagaimana mestinya: lancar. Ini adalah waktu yang brilian untuk mundur dan menilai pekerjaan, menganalisis, dan merangkul cara baru dalam melakukan sesuatu, proses baru. Lewatlah sudah hari-hari maket statis dan desainer web yang tidak memahami kode. Sudah waktunya untuk proses responsif.
Metodologi yang responsif
Kami akan memberikan rahasia besar untuk proses yang solid tepat di awal artikel ini. Karena kami gila seperti itu. Siap? Proses responsif adalah proses yang bertanggung jawab. Samar? Mungkin. Bodoh? Tidak. Seperti gerakan standar web sebelumnya, desain responsif mendorong web ke depan dengan metode yang ramah masa depan.
Seperti proses desain lainnya, itu harus fokus pada 'mengapa' di balik itu semua. Jadi mengapa situs web ada? Untuk menyampaikan konten. Itu bisa berbasis tugas, sosial, informasi ... tidak masalah. Semuanya bermuara pada ini: mulailah dengan mengapa, konten yang terstruktur dengan baik, dan interaksi yang penting.
Berikut adalah pertanyaan yang paling sering kami dengar tentang proses desain responsif kami.
Bagaimana cara menyimpan konten terlebih dahulu?
Kami semua sangat optimis di awal proyek. "Konten dulu!" kami bilang. “Sasaran pengguna! Ingat apa yang penting! " Itu benar. Tapi apa artinya? Bagaimana Anda menerapkan proses yang mengutamakan konten?
Bahkan jika Anda tahu (atau berpikir Anda tahu), mudah untuk dilupakan saat sebuah proyek sedang berjalan. Proyek jangka panjang memiliki kecenderungan untuk berlarut-larut (dan terus… dan terus…). Kami berhenti memikirkan alasannya, dan mulai berfokus pada caranya. Kami membodohi diri sendiri dengan berpikir bahwa proyek kami dapat dibagi menjadi fase 'penemuan' dan 'pengembangan' terpisah yang dapat ada secara mandiri.
Sebenarnya, kita harus terus bertanya mengapa, sepanjang waktu. Tidak peduli seberapa banyak Anda pikir Anda tahu, tidak peduli seberapa banyak perencanaan yang telah Anda lakukan - setiap kali Anda membuat keputusan, setiap kali Anda mendesain tombol atau menulis judul, Anda harus bertanya…
Mengapa?
Mengapa aku melakukan ini? Untuk siapa ini? Sasaran bisnis apa yang akan membantu klien saya mencapai? Kebutuhan apa yang akan membantu pengguna saya mengatasi? Jangan hanya menyimpan konten terlebih dahulu. Pertahankan alasannya terlebih dahulu.
Ini membuatnya terdengar mudah. Tetapi untuk melakukannya dengan baik, Anda harus mendorong. Dorong klien dan tim Anda untuk menentukan alasan mereka terlebih dahulu. Tidak Lorem Ipsum, tidak 'kita akan membahasnya nanti'. Kerjakan pekerjaan rumah Anda! Semua cara Anda harus dimulai dengan alasan yang kuat. Di Yellow Pencil, ini berarti perubahan besar pada cara kami mempromosikan, memperkirakan, menganggarkan, dan merencanakan proyek. Kami harus mendorong anggaran dan waktu untuk melakukan penelitian, strategi, dan perencanaan yang solid. Anda mungkin juga. Namun begitu klien dan tim Anda melihat manfaat besar dari menentukan kebutuhan konten di awal, mereka tidak akan pernah melihat ke belakang.
Dan tugas kami adalah mendidik mereka. (Baca buku bagus Mike Monteiro Design is a Job jika Anda ingin mempelajari lebih lanjut tentang berurusan dengan klien.) Klien dapat mengalami kesulitan memahami nilai melakukan semua penelitian itu dan bekerja di depan. Dan mengapa mereka harus melakukannya? Mereka tidak mendapatkan apa pun yang 'selesai' pada akhirnya - dan terlalu sering mereka hanya mendapatkan faktur dan dokumen Word yang besar.
Itu bukan salah mereka - itu salah kami. Tanggung jawab kami adalah melakukan pekerjaan yang lebih baik dalam mendemonstrasikan nilai itu. Setiap langkah, kita perlu mengembalikan semuanya ke alasan yang paling penting.
Ini sangat penting untuk desain responsif. Situs web yang responsif tidak membutuhkan lebih banyak upaya pengembangan, tetapi itu berarti lebih banyak perencanaan. Sungguh, itu perencanaan yang seharusnya kita lakukan selama ini. Saksikan siklus proyek desain ulang-setiap-tiga-tahun-tahun saat ini. Apakah Anda ingin terus melakukannya? Kami yakin tidak.
Jadi, inilah tiga langkah untuk menjaga konten terlebih dahulu dalam proses proyek Anda.
01. Tentukan tujuan bisnis dan pengguna Anda
Buat daftar prioritas bisnis dan tujuan pengguna untuk proyek Anda. Apa yang paling ingin diketahui atau dilakukan pengguna Anda? Lakukan riset Anda. Buat kesimpulan berdasarkan informasi, bukan tebakan liar. Buat semua pemangku kepentingan Anda setuju.
02. Referensikan mereka setiap ada kesempatan
Setiap kali Anda membuat keputusan, setiap kali seseorang mengusulkan fitur atau elemen desain baru, atau halaman konten, minta mereka untuk memetakan permintaan ke tujuan bisnis dan pengguna. Kebutuhan nyata apa yang akan dipenuhi fitur ini? Apa alasan sebenarnya? (Petunjuk: 'Karena saya ingin' atau 'Saya sangat suka biru' atau 'semua orang di Facebook' tidak dihitung.)
03. Jangan takut untuk melawan
Ini bisa jadi hal yang sulit. Hubungan klien bisa rumit, dan Anda bisa tergoda untuk menyerah dalam pertempuran demi memenangkan perang. Tapi ingat, kita semua bersama-sama! Ini bukan bisnis vs pengguna; kami vs mereka.
Memenuhi kebutuhan pengguna adalah cara terbaik untuk memenuhi kebutuhan bisnis. Karena tanpa pengguna, kami tidak memiliki bisnis! Klien (klien yang baik) tidak mempekerjakan Anda untuk mengatakan 'ya' untuk semuanya. Jadi, jika klien Anda meminta sesuatu yang tidak akan memenuhi tujuan mereka atau kebutuhan pengguna mereka, jangan takut untuk menantangnya. Ini bukan tentang ego. Ini tentang menciptakan solusi terbaik.
04. Dorong tim Anda sendiri juga
Ini juga bisa menjadi tantangan saat bekerja dalam tim kreatif. Pemisahan peran - desain visual, pengalaman pengguna, arsitektur informasi, strategi konten, produksi konten - dapat menyebabkan miskomunikasi. Kami sibuk, kami kewalahan dengan email. Sulit untuk bertahan dengan sebuah proyek dari awal sampai akhir, terutama setelah pekerjaan 'Anda' selesai.
Hubungan tim Anda setidaknya sama pentingnya dengan hubungan klien Anda. Kita harus mengingatkan diri kita sendiri mengapa, seperti yang kita lakukan pada klien kita. Kolaborasi adalah kuncinya. Anda tidak bisa begitu saja 'menyerahkan' rencana konten, atau gambar rangka, atau desain. Sebisa mungkin, kami harus bekerja bahu membahu. Sangat mudah untuk 'menyelesaikan' kiriman dan beralih ke hal lain. Jauh lebih sulit untuk bertahan dengan sebuah proyek ketika keadaan semakin sulit.
Pendekatan waterfall untuk pekerjaan kreatif tidak berhasil. Kerja yang tangkas dan kolaboratif antara anggota tim memberikan hasil yang lebih baik.
05. Tentukan semua kebutuhan konten Anda di muka
Inilah masalahnya: situs web yang responsif membutuhkan waktu lebih lama untuk direncanakan. Kami tidak hanya merencanakan satu konteks lagi. Kami berencana untuk semua konteks yang kami ketahui sekarang, dan beberapa yang belum ada.
Namun, dibutuhkan waktu yang jauh lebih sedikit untuk merencanakan semua kerumitan tersebut di depan daripada untuk kembali dan retrofit fitur dan fungsi yang tidak Anda perhitungkan. Jadi habiskan waktu / tenaga / anggaran. Paksa klien dan tim Anda untuk menentukan (dan berkomitmen!) Semua konten mereka sebelum Anda mulai mendesain. Gunakan tabel halaman. Gunakan konten terstruktur. Buktikan konten Anda di masa depan sekarang! Atau menangis nanti.
Bagaimana cara saya mengabstraksi konten dari presentasi?
Anda sering mendengar ini di seputar internet-o-sphere. Tapi tunggu, apa? Dan tunggu - kenapa?
Karena presentasi bisa (dan akan) berubah. Cara kami merancang situs web 15 tahun yang lalu hampir tidak dapat dikenali dari cara kami menyajikannya sekarang. Tapi tahukah Anda apa yang tidak berubah? Kata-kata. Kami masih menggunakan mereka. Internet ada terutama untuk konten (berbasis teks). Kami masih menggunakannya untuk memecahkan masalah informasi; untuk menyelesaikan tugas. Tetapi jika konten Anda bergantung pada alat presentasi (halaman perkenalan Flash, siapa?) Ada kemungkinan besar konten tersebut tidak akan dapat digunakan dalam beberapa tahun. Dan itu menyebalkan.
Kita perlu berhenti memikirkan konten dalam hal tata letak
Kami (sebagai industri) telah melatih klien kami untuk memikirkan konten dalam hal tata letak. “Taruh di sidebar,” kata kami. “Itu harus dicatat di footer.” Berhenti! Hentikan. Berhenti. Ini bukan tentang lokasi. Ini tentang prioritas. Konten apa yang paling penting bagi pengguna Anda? Karena coba tebak: tata letak berubah di seluruh konteks. Ada (mungkin) tidak akan ada sidebar di desain layar kecil Anda.
Menu super raksasa yang diinginkan klien Anda? Tidak akan terbang dengan iPhone.
Paksa klien Anda untuk merencanakan konten mereka terlepas dari desain
Oke, Anda tidak perlu memaksa mereka. Mendorong mereka. Sangat mendorong. Tabel halaman bagus untuk ini. Jika Anda belum membacanya, segera lanjutkan ke Kristina Halvorson dan Strategi Konten Melissa Rach untuk Web untuk informasi lebih lanjut tentang cara membuatnya. Aturlah dalam urutan prioritas. Jangan merujuk lokasi atau tata letak. Ini akan membantu klien Anda memikirkan konten mereka dengan cara yang lebih produktif, dan juga akan membuat proses pembuatan konten bergerak, sebelum gambar rangka atau desain selesai.
Selesaikan konten Anda sebelum desain
Oke, ini tidak selalu memungkinkan. Namun, semakin banyak ketidakpastian yang dapat Anda hilangkan sebelum mulai mendesain, semakin sedikit Anda harus kembali dan mengubah berbagai hal nanti.
Gunakan konten nyata - setiap saat
Jika memungkinkan, gunakan konten kasus tepi - tunjukkan klien Anda halaman, gambar, dan menu yang paling rumit. Ini akan menghindari kejutan di kemudian hari dalam prosesnya, saat mereka melihat konten paling berantakan di produk jadi.
Gambar rangka yang fungsional dan dalam browser membuat perbedaan dunia. Izinkan klien Anda untuk mengamati konten mereka bergerak dan berubah di berbagai ukuran layar. Tunjukkan saat Anda mempresentasikan wireframe Anda (Anda melakukan presentasi secara langsung, bukan?) Tunjukkan kepada mereka bagaimana prioritas informasi mereka tetap sama di seluruh ukuran layar, sementara tata letak berubah.
Jadi bagaimana cara kerja wireframe untuk proyek desain responsif?
Kami sangat yakin bahwa desain interaksi untuk RWD harus masuk ke browser dengan cepat dan sering. Sangat tidak mungkin untuk membuat dokumen statis yang akan mendeskripsikan segalanya. Tentu, kita bisa membuat dokumen yang menunjukkan tiga, empat atau lima break point, tapi itu hanya sebagian kecil dari ceritanya. Bagaimana dengan semua momen di antara breakpoint? Itu terjadi di browser.
Membuat sketsa
Tetap saja, bagus untuk dapat dengan cepat membuat sketsa ide-ide Anda secara kolaboratif. Ini tidak perlu terjadi di media tertentu, tetapi ada sesuatu tentang pensil di atas kertas. Intinya di sini adalah mengeluarkan ide dengan cepat dan berulang. Kami suka membuat sketsa jika memungkinkan, dan bahkan ada aplikasi untuk itu: UI Sketcher.
Kerangka kerja dalam browser
Ini tiket sebenarnya untuk kita. Kami senang menggunakan kembali pola dan sistem saat mendemonstrasikan RWD di browser. Tentu saja, kami dapat membuat sistem kami sendiri dari awal setiap saat, tetapi itu tidak membantu kami atau klien kami.
Kami juga ingin menggunakan kerangka kerja pembuatan prototipe yang cepat dan responsif seperti Twitter's Bootstrap atau Zurb’s Foundation. Kami secara pribadi bersandar pada Foundation karena sesuai dengan alur kerja kami. Akan sangat bagus jika salah satu dari mereka akan mengambil pendekatan layar kecil, bandwidth rendah, tapi begitulah cara kami melakukannya.
Anotasi
Anotasi untuk wireframe RWD sangat penting tetapi, kami temukan, sering terlewatkan. Katakan dengan lantang: dokumentasi, dokumentasi, dokumentasi! Kami telah melihat beberapa contohnya dari teman-teman dan menurut kami juri masih mencari cara 'terbaik' untuk menganotasi wireframe responsif dalam browser dengan benar. Seperti disebutkan di atas, kami secara teratur menggunakan Foundation by Zurb dan suka menggunakan add-on Reveal untuk menampilkan anotasi kami. Anotasi ini hanya muncul untuk layar yang lebih besar dan idealnya dapat diaktifkan dan dinonaktifkan.
Gunakan konten nyata di wireframes
Ada banyak perdebatan seputar Lorem Ipsum dalam wireframe dan mock-up desain, tetapi jika Anda tidak memiliki konten nyata di wireframe Anda, Anda salah melakukannya. Konten menginformasikan keputusan interaksi dan memberi tahu Anda kapan desain akan rusak. Bagaimana Lorem Ipsum bisa melakukan itu?
Bagaimana cara mendesain layar kecil terlebih dahulu?
Selama bertahun-tahun kami merancang dengan resolusi khusus. Itu adalah pengaturan default. Baik membuat sketsa di notebook, wireframing di OmniGraffle, bekerja di Photoshop atau mendesain di browser, kami tahu ukuran kanvas kami nantinya. Hari-hari itu telah berlalu. Kami sangat percaya dalam mendesain untuk layar kecil terlebih dahulu dan menyempurnakannya secara bertahap. Jadi, bagaimana seorang desainer mengubah alur kerjanya dari ukuran kanvas tetap menjadi ukuran yang dapat disesuaikan?
Desain abstrak dari perangkat di awal
Kecuali kita mendesain untuk perangkat tertentu, penting bagi kita untuk berhenti memikirkan perangkat dan mulai memikirkan pengalaman. Semua teknik berikut membantu desainer untuk menyusun pengalaman mereka sambil tetap dapat mempertahankan perangkat agnostik (hingga titik tertentu).
Gunakan Style Tiles
Gunakan Style Tiles untuk menetapkan arah dan mengulanginya dengan cepat. Style Tiles memungkinkan seorang desainer untuk menetapkan arah sistem desain tanpa menjadi terlalu spesifik. Pencipta mereka, Samantha Warren, menggambarkan mereka seperti ini:
“Style Tiles digunakan saat moodboard terlalu kabur dan komposisinya terlalu literal. Style Tiles membuat koneksi langsung dengan elemen antarmuka sebenarnya tanpa menentukan tata letak. "
Ciptakan harmoni antarmuka
Bayangkan sebuah kanvas dengan semua elemen visual dan interaktif yang disatukan. Bukan untuk melihat tata letak UI tertentu, tetapi untuk melihat bagaimana semua elemen bekerja bersama. Ini adalah kanvas harmoni antarmuka. Kanvas harmoni antarmuka memungkinkan perancang untuk menyatukan ide, tetapi tidak berfokus pada satu ukuran layar. Plus, ini adalah cara yang bagus untuk mengkomunikasikan dan mendokumentasikan elemen yang dirancang secara efisien daripada menghasilkan panduan gaya lengkap.
Jika Anda tertarik untuk membaca lebih lanjut, dua artikel bagus tentang subjek harmoni antarmuka dapat ditemukan di sini dan di sini.
Lihat semuanya di browser
Semuanya perlu disatukan di browser. Di sinilah desain UI benar-benar menjadi hidup. Sangat penting untuk melihat bagaimana konten nyata berinteraksi dengan elemen visual. Tidak ada cara untuk melakukan ini dengan benar dalam lingkungan statis. Anda perlu melihat bagaimana tanggapannya di media asli.
Keseimbangan dengan program statis
Ada aliran antara browser dan program statis seperti Photoshop. Harus ada keseimbangan yang memungkinkan sistem desain dibuat dengan cara yang cair dan alami. Tentu, ini akan terjadi di Photoshop, tetapi desainer yang mendesain secara responsif perlu belajar cara berpikir kreatif di browser juga.
Kesimpulan
Sekali lagi, dengan perasaan: mulailah dengan alasannya, dengan konten yang terstruktur dengan baik dan interaksi yang penting. Fokus pada layar kecil dan bandwidth rendah terlebih dahulu, dan secara bertahap tingkatkan konsep responsif Anda. Media kita sudah dewasa. Kami memiliki kesempatan untuk melakukan hal yang benar dan mengubah dunia, satu proyek web dalam satu waktu.
Temukan 20 alat wireframing terbaik untuk desainer
Steve Fisher mengoordinasikan penelitian, analisis, desain, dan strategi di Yellow Pencil di Kanada, dan berbicara tentang topik seperti RWD, UX, dan open source. Alaine Mackenzie adalah ahli strategi konten di Yellow Pencil.
