Kandungan
- Metodologi responsif
- Bagaimana saya menyimpan kandungan terlebih dahulu?
- Kenapa?
- 01. Tentukan matlamat perniagaan dan pengguna anda
- 02. Rujuk mereka setiap peluang yang anda dapat
- 03. Jangan takut untuk menolak
- 04. Tolak pasukan anda sendiri juga
- 05. Tentukan semua keperluan kandungan anda di muka
- Bagaimana saya mengaburkan kandungan dari persembahan?
- Kita perlu berhenti memikirkan kandungan dari segi susun atur
- Paksa pelanggan anda untuk merancang kandungan mereka tanpa reka bentuk
- Selesaikan kandungan anda sebelum merancang
- Gunakan kandungan sebenar - setiap masa
- Oleh itu, bagaimana rangka kerja berfungsi untuk projek reka bentuk responsif?
- Membuat lakaran
- Rangka kerja penyemak imbas
- Anotasi
- Gunakan kandungan sebenar dalam bingkai kawat
- Bagaimana saya merancang untuk skrin kecil terlebih dahulu?
- Reka bentuk abstrak dari peranti pada awalnya
- Gunakan Jubin Gaya
- Buat keharmonian antara muka
- Lihat semua dalam penyemak imbas
- Raih keseimbangan dengan program statik
- Kesimpulannya
Mari kita jelaskan: reka bentuk adalah penyelesaiannya hanya jika ia menumpukan pada masalah yang lebih mendalam yang dihadapi, sebab di sebalik segalanya. Proses yang mantap harus selalu membimbing kerja kita, tetapi kita perlu menerapkan sesuatu yang lebih fleksibel. Medium kami akhirnya membuktikan dirinya cair, jadi bukankah proses kita? Fikirkan tentang reka bentuk sistem: anda perlu melihat keseluruhan gambar dan perincian kecil. Mustahil? Jauh dari itu!
Frank Chimero menuliskannya dengan indah dalam bukunya The Shape of Design: “Ada bahagian di mana artis itu mundur dari easel untuk mendapatkan perspektif baru mengenai karya tersebut. Lukisan adalah bahagian yang sama dekat dan jauh: ketika dekat, artis bekerja keras untuk membuat tanda; ketika jauh, dia menilai karya tersebut untuk menganalisis kualitinya. Dia mundur untuk membiarkan pekerjaan itu berbicara kepadanya. "
Kita perlu membiarkan pekerjaan kita, medium kita, berbicara kepada kita. Dengan munculnya reka bentuk responsif, kita akhirnya merangkul media kita sebagaimana mestinya: lancar. Ini adalah masa yang cemerlang untuk mundur dan menilai karya, menganalisis, dan menerapkan cara baru untuk melakukan sesuatu, proses baru. Sudah berlalu zaman mock-up statik dan pereka web yang tidak memahami kod. Sudah tiba masanya untuk proses responsif.
Metodologi responsif
Kami akan memberikan rahsia besar untuk proses yang mantap pada awal artikel ini. Kerana kita gila seperti itu. Sedia? Proses responsif adalah proses yang bertanggungjawab. Tidak jelas? Mungkin. Bodoh? Tidak. Seperti pergerakan standard web sebelumnya, reka bentuk responsif mendorong web ke hadapan dengan kaedah mesra masa depan.
Seperti proses reka bentuk, ia harus memberi tumpuan kepada 'mengapa' di sebalik semua itu. Jadi mengapa laman web wujud? Untuk menyampaikan kandungan. Itu boleh berdasarkan tugas, sosial, maklumat ... tidak menjadi masalah. Ini semua berkaitan dengan ini: mulakan dengan sebabnya, kandungan berstruktur dengan baik, dan interaksi yang penting.
Berikut adalah soalan yang paling sering kita dengar mengenai proses reka bentuk responsif kita.
Bagaimana saya menyimpan kandungan terlebih dahulu?
Kami semua sangat optimis pada permulaan projek. "Kandungan dahulu!" kami kata. "Tujuan pengguna! Ingat apa yang penting! " Benar. Tetapi apa maksudnya? Bagaimana anda melaksanakan proses kandungan pertama?
Walaupun anda tahu (atau fikir anda tahu), mudah untuk dilupakan semasa projek berjalan. Projek jangka panjang mempunyai kecenderungan untuk terus berlanjutan (dan terus… dan seterusnya…). Kami berhenti memikirkan sebabnya, dan mula fokus pada caranya. Kita memperbodohkan diri sendiri untuk berfikir bahawa projek kita boleh dibahagikan kepada fasa 'penemuan' dan 'pembangunan' yang terpisah yang dapat wujud secara bebas.
Yang benar adalah, kita harus terus bertanya mengapa, sepanjang masa. Tidak kira seberapa banyak yang anda fikir anda tahu, tidak kira seberapa banyak perancangan yang telah anda buat - setiap kali anda membuat keputusan, setiap kali anda merancang butang atau menulis tajuk utama, anda mesti bertanya…
Kenapa?
Mengapa saya melakukan ini? Ini untuk siapa? Apakah matlamat perniagaan yang akan dapat dicapai oleh pelanggan saya? Apa keperluan untuk membantu pengguna saya menangani? Jangan hanya menyimpan kandungan terlebih dahulu. Terus mengapa.
Ini menjadikannya mudah. Tetapi untuk melakukannya dengan baik, anda harus mendorong. Dorong pelanggan dan pasukan anda untuk menentukan sebabnya terlebih dahulu. Tidak ada Lorem Ipsum, tidak 'kita akan sampai kemudian'. Buat kerja sekolah kamu! Semua cara anda mesti bermula dengan alasan yang kukuh. Di Yellow Pencil, ini berarti perubahan besar pada cara kita mempromosikan, memperkirakan, mengira, dan merancang projek. Kami terpaksa mengusahakan anggaran dan masa untuk melakukan kajian, strategi, dan perancangan yang mantap. Anda mungkin juga. Tetapi apabila pelanggan dan pasukan anda melihat banyak faedah menentukan keperluan kandungan di hadapan, mereka tidak akan melihat ke belakang.
Dan tugas kita adalah untuk mendidik mereka. (Baca buku Mike Monteiro yang sangat baik Design is a Job jika anda ingin belajar lebih banyak mengenai berurusan dengan pelanggan.) Pelanggan sukar untuk memahami nilai melakukan semua penyelidikan itu dan bekerja di hadapan. Dan mengapa mereka mesti? Mereka tidak mendapat apa-apa yang ‘selesai’ pada akhirnya - dan terlalu kerap mereka hanya mendapat invois dan dokumen Word yang besar.
Itu bukan salah mereka - ini salah kita. Tanggungjawab kita untuk melakukan pekerjaan yang lebih baik untuk menunjukkan nilai itu. Setiap langkah, kita perlu mengembalikan semuanya kepada sebab yang sangat penting.
Ini sangat penting untuk reka bentuk yang responsif. Laman web responsif tidak memerlukan lebih banyak usaha pembangunan, tetapi ini bermaksud lebih banyak perancangan. Sungguh, ini adalah perancangan yang seharusnya kita lakukan selama ini. Saksikan kitaran projek reka bentuk semula setiap tiga-ish-tahun semasa. Adakah anda mahu terus melakukannya? Kami pasti tidak.
Oleh itu, berikut adalah tiga langkah untuk memastikan kandungan sentiasa berada dalam proses projek anda.
01. Tentukan matlamat perniagaan dan pengguna anda
Buat senarai perniagaan dan tujuan pengguna yang diutamakan untuk projek anda. Apa yang paling ingin diketahui atau dilakukan oleh pengguna anda? Lakukan kajian anda. Buat kesimpulan yang tepat, bukan tekaan liar. Dapatkan semua pihak berkepentingan anda untuk bersetuju.
02. Rujuk mereka setiap peluang yang anda dapat
Setiap kali anda membuat keputusan, setiap kali seseorang mengusulkan fitur atau elemen reka bentuk baru, atau halaman konten, minta mereka memetakan permintaan ke tujuan perniagaan dan pengguna. Apa keperluan sebenar yang akan dipenuhi oleh ciri ini? Apa sebab sebenarnya? (Petunjuk: ‘Kerana saya mahu’ atau ‘Saya sangat suka biru’ atau ‘semua orang di Facebook’ tidak dikira.)
03. Jangan takut untuk menolak
Ini boleh menjadi sukar. Hubungan pelanggan boleh menjadi halus, dan menggoda untuk melepaskan pertempuran untuk memenangkan perang. Tetapi ingat, kita semua bersama-sama! Bukan perniagaan berbanding pengguna; kami vs mereka.
Memenuhi keperluan pengguna adalah kaedah terbaik untuk memenuhi keperluan perniagaan. Kerana tanpa pengguna kami, kami tidak mempunyai perniagaan! Pelanggan (pelanggan yang baik) tidak mengupah anda untuk mengatakan 'ya' kepada semuanya. Oleh itu, jika pelanggan anda meminta sesuatu yang tidak dapat memenuhi matlamat atau keperluan pengguna mereka, jangan takut untuk mencabarnya. Ini bukan soal ego. Ini mengenai mewujudkan penyelesaian terbaik.
04. Tolak pasukan anda sendiri juga
Ini juga boleh menjadi cabaran ketika bekerja dalam pasukan kreatif. Pemisahan peranan - reka bentuk visual, pengalaman pengguna, seni bina maklumat, strategi kandungan, pengeluaran kandungan - boleh menyebabkan miskomunikasi. Kami sibuk, kami diliputi e-mel. Sukar untuk mengikuti projek dari awal hingga akhir, terutamanya setelah kerja 'anda' selesai.
Hubungan pasukan anda sekurang-kurangnya sama pentingnya dengan hubungan pelanggan anda. Kita harus mengingatkan diri sendiri mengapa, sama seperti pelanggan kita. Kerjasama adalah kunci. Anda tidak boleh 'menyerahkan' rancangan kandungan, atau bingkai kawat, atau reka bentuk. Seboleh mungkin, kita harus berganding bahu. Sangat mudah untuk 'menyelesaikan' penghantaran dan beralih ke perkara lain. Jauh lebih sukar untuk kekal dengan projek apabila sukar.
Pendekatan air terjun untuk karya kreatif tidak berfungsi. Kerja yang tangkas dan kolaboratif antara ahli pasukan menghasilkan hasil yang lebih baik.
05. Tentukan semua keperluan kandungan anda di muka
Inilah masalahnya: laman web responsif mengambil masa lebih lama untuk dirancang. Kami tidak hanya merancang untuk satu konteks lagi. Kami merancang untuk semua konteks yang kami ketahui sekarang, dan beberapa yang belum ada.
Tetapi memerlukan lebih sedikit masa untuk merancang semua kerumitan di muka daripada yang diperlukan untuk kembali dan menyusun semula ciri dan fungsi yang tidak anda pertimbangkan. Oleh itu, luangkan masa / usaha / belanjawan. Paksa pelanggan dan pasukan anda untuk menentukan (dan komited!) Semua kandungan mereka sebelum anda merancang. Gunakan jadual halaman. Gunakan kandungan berstruktur. Bukti masa depan kandungan anda sekarang! Atau menangis kemudian.
Bagaimana saya mengaburkan kandungan dari persembahan?
Anda banyak mendengarnya di internet-o-sphere. Tetapi tunggu, apa? Dan tunggu - mengapa?
Kerana persembahan boleh (dan akan) berubah. Cara kami merancang laman web 15 tahun yang lalu hampir tidak dapat dikenali daripada cara kami mempersembahkannya sekarang. Tetapi anda tahu apa yang belum berubah? Perkataan. Kami masih menggunakan 'em. Internet wujud terutamanya untuk kandungan (berdasarkan teks). Kami masih menggunakannya untuk menyelesaikan masalah maklumat; untuk menyelesaikan tugas. Tetapi jika kandungan anda bergantung pada cara penyampaian (halaman intro Flash, ada orang?) Ada kemungkinan ia tidak akan dapat digunakan dalam beberapa tahun. Dan itu menyebalkan.
Kita perlu berhenti memikirkan kandungan dari segi susun atur
Kami (sebagai industri) telah melatih pelanggan kami untuk memikirkan kandungan dari segi susun atur. "Letakkan di bar sisi," kata kami. "Itu mesti berlaku di bahagian bawah." Berhenti! Berhenti. Berhenti. Ini bukan mengenai lokasi. Ini mengenai keutamaan. Apakah kandungan yang paling penting untuk pengguna anda? Kerana teka apa: susun atur berubah mengikut konteks. Tidak mungkin ada bar sisi pada reka bentuk skrin kecil anda.
Menu super gergasi yang pelanggan anda mahukan? Tidak akan terbang di iPhone.
Paksa pelanggan anda untuk merancang kandungan mereka tanpa reka bentuk
Baiklah, anda tidak perlu memaksa mereka. Galakkan mereka. Sangat menggalakkan. Jadual halaman sangat bagus untuk ini. Sekiranya anda belum membacanya, teruskan ke Kristina Halvorson dan Strategi Kandungan Melissa Rach untuk Web untuk maklumat lebih lanjut mengenai cara membuatnya. Susun mereka mengikut urutan keutamaan. Jangan merujuk lokasi atau susun atur. Ini akan membantu pelanggan anda memikirkan kandungan mereka dengan cara yang lebih produktif, dan juga akan membuat proses pembuatan kandungan bergerak, sebelum rangka atau reka bentuk wayar selesai.
Selesaikan kandungan anda sebelum merancang
Baiklah, ini tidak selalu mungkin. Tetapi semakin banyak ketidakpastian yang dapat anda hilangkan sebelum anda mula merancang, semakin sedikit anda harus kembali dan mengubah sesuatu di kemudian hari.
Gunakan kandungan sebenar - setiap masa
Sekiranya boleh, gunakan isi kandungan casing - tunjukkan halaman, gambar dan menu yang paling rumit kepada pelanggan anda. Ini akan mengelakkan kejutan di kemudian hari, apabila mereka melihat kandungan paling tidak kemas dalam produk siap.
Rangka kawat dalam penyemak imbas yang berfungsi menjadikan dunia berbeza. Benarkan pelanggan anda memerhatikan kandungan mereka bergerak dan berubah di pelbagai ukuran skrin. Tunjukkan itu semasa anda membentangkan bingkai kawat anda (anda melakukan persembahan secara langsung, bukan?) Tunjukkan kepada mereka bagaimana keutamaan maklumat mereka tetap sama di seluruh ukuran skrin, sementara susun aturnya berubah.
Oleh itu, bagaimana rangka kerja berfungsi untuk projek reka bentuk responsif?
Kami yakin bahawa reka bentuk interaksi untuk RWD mesti masuk ke penyemak imbas dengan cepat dan kerap. Sangat mustahil untuk membuat dokumen statik yang akan menerangkan semuanya. Pasti, kami dapat membuat dokumen yang menunjukkan tiga, empat atau lima titik putus, tetapi itu hanya sebahagian kecil dari ceritanya. Bagaimana dengan semua momen antara titik putus? Itu berlaku di penyemak imbas.
Membuat lakaran
Namun, ada baiknya anda dapat melakar idea anda dengan cepat secara kolaboratif. Ini tidak perlu berlaku dalam medium tertentu, tetapi ada sesuatu mengenai pensil di atas kertas. Inti keseluruhannya adalah mengeluarkan idea dengan cepat dan berulang-ulang. Kami suka melakar papan sketsa bila boleh, dan bahkan ada aplikasi untuk itu: UI Sketcher.
Rangka kerja penyemak imbas
Inilah tiket sebenar untuk kami. Kami suka menggunakan semula corak dan sistem semasa menunjukkan RWD di penyemak imbas. Sudah tentu, kita dapat membuat sistem kita sendiri dari awal setiap masa, tetapi itu tidak membantu kita atau pelanggan kita.
Kami juga ingin menggunakan kerangka prototaip responsif yang pantas seperti Bootstrap Twitter atau Zurb's Foundation. Kami secara peribadi condong ke arah Foundation kerana ia sesuai dengan aliran kerja kami. Alangkah baiknya jika kedua-duanya mengambil pendekatan layar lebar lebar lebar pertama, tetapi begitulah cara kami melancarkan.
Anotasi
Anotasi untuk bingkai kawat RWD adalah penting tetapi, kami dapati, sering diabaikan. Katakan dengan kuat: dokumentasi, dokumentasi, dokumentasi! Kami telah melihat beberapa contoh ini dari rakan-rakan dan berpendapat bahawa juri masih menggunakan kaedah 'terbaik' untuk memberi penjelasan dengan betul pada bingkai wayar responsif dalam penyemak imbas. Seperti yang disebutkan di atas, kami menggunakan Foundation by Zurb secara berkala dan ingin menggunakan add-on Reveal untuk menampilkan anotasi kami. Anotasi ini hanya muncul untuk skrin yang lebih besar dan idealnya dapat dihidupkan dan dimatikan.
Gunakan kandungan sebenar dalam bingkai kawat
Terdapat banyak perdebatan mengenai Lorem Ipsum dalam rangka kawat dan reka bentuk tiruan, tetapi jika anda tidak mempunyai kandungan sebenar dalam bingkai kawat anda, anda salah. Kandungan memberitahu keputusan interaksi dan memberitahu anda kapan reka bentuk akan rosak. Bagaimana Lorem Ipsum boleh melakukannya?
Bagaimana saya merancang untuk skrin kecil terlebih dahulu?
Selama bertahun-tahun kami merancang dengan mempertimbangkan resolusi khusus. Ini adalah tetapan lalai. Sama ada membuat sketsa di buku nota, wireframing di OmniGraffle, bekerja di Photoshop atau membuat reka bentuk di penyemak imbas, kami tahu apa ukuran kanvas kami. Hari-hari itu sudah tiada. Kami sangat percaya dalam merancang untuk skrin kecil terlebih dahulu dan meningkatkan secara progresif. Oleh itu, bagaimana seorang pereka mengubah aliran kerjanya dari ukuran kanvas yang tetap menjadi yang lancar?
Reka bentuk abstrak dari peranti pada awalnya
Kecuali kita merancang untuk peranti tertentu, adalah mustahak kita berhenti memikirkan peranti dan mula memikirkan pengalaman. Semua teknik berikut membantu pereka untuk membuat pengalaman mereka sambil kekal sebagai alat agnostik (sehingga satu tahap).
Gunakan Jubin Gaya
Gunakan Style Tiles untuk menentukan arah dan cepat berulang. Style Tiles membolehkan pereka untuk menentukan arah sistem reka bentuk tanpa terlalu spesifik. Pencipta mereka, Samantha Warren, menggambarkan mereka dengan cara ini:
"Style Tiles adalah untuk ketika moodboard terlalu kabur dan comp terlalu harfiah. Style Tiles mewujudkan hubungan langsung dengan elemen antara muka sebenar tanpa menentukan susun atur. "
Buat keharmonian antara muka
Bayangkan kanvas dengan semua elemen visual dan interaktif disatukan. Bukan untuk melihat susun atur UI tertentu, tetapi untuk melihat bagaimana semua elemen berfungsi bersama. Ini adalah kanvas harmoni antara muka. Kanvas harmoni antara muka membolehkan pereka untuk menyatukan idea, tetapi tidak tertumpu pada satu ukuran skrin. Tambahan, ini adalah kaedah terbaik untuk berkomunikasi dan mendokumentasikan elemen yang dirancang dengan cekap daripada menghasilkan panduan gaya penuh.
Sekiranya anda berminat untuk membaca lebih lanjut, dua artikel yang sangat baik mengenai subjek keharmonian antara muka boleh didapati di sini dan di sini.
Lihat semua dalam penyemak imbas
Semuanya perlu disatukan dalam penyemak imbas. Di sinilah reka bentuk UI menjadi nyata. Melihat bagaimana kandungan sebenar berinteraksi dengan elemen visual sangat penting. Tidak ada cara untuk melakukannya dengan betul di persekitaran yang statik. Anda perlu melihat bagaimana ia akan bertindak balas dalam medium asli.
Raih keseimbangan dengan program statik
Terdapat aliran antara penyemak imbas dan program statik seperti Photoshop. Harus ada keseimbangan yang memungkinkan sistem reka bentuk dibuat dengan cara yang lancar dan semula jadi. Pasti, ini akan berlaku di Photoshop, tetapi seorang pereka yang merancang secara responsif perlu belajar bagaimana berfikir secara kreatif di penyemak imbas juga.
Kesimpulannya
Sekali lagi, dengan perasaan: mulakan dengan sebabnya, dengan kandungan dan interaksi yang tersusun dengan baik. Fokus pada skrin kecil dan lebar jalur rendah terlebih dahulu, dan tingkatkan konsep responsif anda secara progresif. Medium kita semakin meningkat. Kami berpeluang melakukan sesuatu dengan betul dan mengubah dunia, satu projek web pada satu masa.
Cari 20 alat penyusun wayar terbaik untuk pereka
Steve Fisher menyelaraskan penyelidikan, analisis, reka bentuk dan strategi di Yellow Pencil di Kanada, dan berbicara mengenai topik seperti RWD, UX dan sumber terbuka. Alaine Mackenzie adalah ahli strategi kandungan di Yellow Pencil.
