Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Great Design Hurts: Fight for Pixel Perfection

by
Length:MediumLanguages:
This post is part of a series called Web Design Theory.
Designing for the New Fold: Web Design Post Monitorism
Mathematics and Web Design: A Close Relationship

Malay (Melayu) translation by Urwah bin Azzubair (you can also view the original English article)

Saya akan berkongsi teori reka bentuk yang saya sedang kerjakan untuk melaksanakan aliran kerja saya sendiri dalam beberapa tahun yang lalu: pixel perfect mockups .  Bagi sesetengah orang, mungkin sangat jelas, tetapi satu prinsip yang sangat penting untuk proses reka bentuk saya sekarang, saya katakan bahawa ini adalah idea yang paling berpengaruh tunggal yang saya telah dibentangkan dalam reka bentuk selama lebih dari 10 tahun.

Mengamalkan teori ini bukanlah satu lagi langkah dalam proses reka bentuk, ia adalah perspektif yang mengubah minda revolusi yang pasti akan meningkatkan kualiti setiap reka bentuk yang telah anda kerjakan dari sekarang.  Ingin menjadi pereka web yang lebih baik dan bekerja pada projek yang lebih besar?  Baca terus

Great Design Hurts

Pixel Perfect Comps

Beberapa tahun yang lalu di SXSW 2008, saya mula-mula diperkenalkan kepada idea reka bentuk "piksel sempurna" mockups.  Michael Lopp (pengarang beberapa buku reka bentuk yang hebat dan pengurus kejuruteraan kanan di Apple) berada di panel untuk sesi yang bertajuk, " Hurts Design Great"; Pidatonya lucu dan ditambah dengan kata-kata yang tidak sesuai seperti dalam episod Bill Maher.  Di antara titik terdalam kuliahnya adalah permata kecil yang menerangkan bagaimana di Apple, setiap perancang menumpukan dirinya kepada idea kecerdasan piksel yang sempurna.  Iaitu, setiap syarikat yang berjalan di sekitar syarikat itu sangat tepat, sangat tulen, jadi terperinci bahawa penonton biasa tidak dapat membezakan antara rekabentuk dan menangkap kod sepenuhnya.

... Setiap syarikat di sekeliling syarikat sangat tepat, sangat tulen, sangat terperinci bahawa penonton biasa tidak dapat membezakan antara reka bentuk dan tangkapan skrin penuh yang dikodkan.

"Itu sahaja!",  Saya fikir, "idea yang akan merevolusikan proses reka bentuk saya".  Dan sesungguhnya ia adalah.

Lihat, untuk memulakan apa-apa projek reka bentuk dengan tujuan untuk mengikuti sehingga pixel terakhir mengubah hampir setiap aspek proses reka bentuk.  Walaupun anda tidak benar-benar mengikuti setiap masa, idea untuk memulakan reka bentuk dengan niat itu akan mempunyai kesan dramatik pada produk akhir.

Selepas satu atau dua bulan mencuba ini, JPA saya bersih, fail saya bergerak lebih cepat, projek saya tidak lagi 'menyeret' di peringkat seterusnya, dan saya menghabiskan lebih sedikit masa di telefon dengan pelanggan cuba menjelaskan perbezaannya. Antara mockup reka bentuk kasar dan produk siap.  Oh, dan saya mengupah lebih banyak, yang merupakan metrik yang baik untuk mengikut mana-mana saiz.

Jadi apa yang menjadikan comp sempurna pixel?  Pada dasarnya, ia bentuk mockup (terutama mockup web, tetapi boleh jadi apa-apa) seolah-olah anda menganjurkannya dengan kod di tempat pertama.  Sekiranya anda pernah bekerja sama dengan CSS / HTML anda akan tahu apa yang saya maksudkan. Ini termasuk:

  1. Margin yang sempurna
  2. Padding yang sempurna
  3. Penggunaan fon adalah sempurna dan konsisten
  4. Sempadan sempurna & latar belakang
  5. Penggunaan warna konsisten
  6. Penyimpangan pintar dan wajar dari 5 peraturan pertama.

Izinkan saya terangkan idea ini; Apabila kebanyakan pereka memulakan projek, reka bentuk mereka seolah-olah menjadi mockup.  Pengetahuan bahawa sesetengah pakar pembangunan atau Jaminan Mutu akan datang dan memperbaiki semua had berapa banyak masa dan usaha mereka dimasukkan ke dalam reka bentuk individu.

Apa yang berlaku seterusnya adalah semula jadi untuk kebanyakan pereka: Pelanggan diberitahu bahawa imej dan ikon hanya "ruang letak".  Teks Lorem Ipsum digunakan bukannya kandungan sebenar.  Malah navigasi dan elemen antara muka utama yang lain boleh ditukar untuk "pengisi" sehingga sebelum pelancaran dalam kebanyakan kes.

Apa itu "Sempurna"?

"Sempurna" bermaksud setiap elemen setiap reka bentuk sesuai dengan cara yang anda inginkan dalam produk yang diprogramkan akhir .

Dengan margin & padding, ini bermakna bahawa semua adalah konsisten di seluruh reka bentuk tapak.  Jika setiap blok bar sisi dalam reka bentuk dimaksudkan untuk mempunyai margin 10px, maka mereka bentuknya dengan cara itu setiap kali terdapat blok bar sisi.

Dengan fon & warna, ini bermakna kegunaan konsisten di seluruh laman web. Reka bentuk setiap bahagian fon seolah-olah berkaitan dengan elemen HTML (iaitu: semua H1 selalu 18px, tebal, georgia gunakan hitam).  Jangan menyimpang - salah seorang pengurus projek kegemaran saya pernah memberitahu saya, tidak perlu lebih dari 3 atau 4 gaya font pada satu halaman melainkan jika anda mempunyai alasan yang baik untuk berbuat demikian.  Jika anda menggunakan warna merah tertentu sebagai warna sorotan di laman web ini, pastikan warna merah tepat di setiap tempat (kecuali jika anda mempunyai alasan untuk kelihatan berbeza).

Sempadan, peraturan HR, dan latar belakang juga perlu konsisten - Saya telah melihat beberapa perbandingan di mana setiap sempadan & HR mempunyai nuansa warna yang berbeza - ini akhirnya membawa kepada perbandingan yang kelihatan cuai dan tidak profesional.  Untuk mata yang tidak terlatih, mudah dilihat apabila reka bentuk merasakan separuh bakar ... walaupun orang itu tidak dapat mencari apa yang sebenarnya salah.

Akhir sekali, gunakan ikon, imej, tajuk, dan teks yang menghampiri perkara sebenar.  Jika anda mendesain semula laman web, gunakan kandungan yang telah diterbitkan daripada Lorem Ipsum.  Jika pelanggan mengatakan bahawa mereka mempunyai ikon atau imej baru yang akan digunakan dalam reka bentuk semula, minta mereka dan masukkannya dalam reka bentuk.

Ingat, kami cuba membuat reka bentuk yang sangat tepat supaya kelihatan seperti tangkapan skrin keadaan sebenar, mudah, pelaksanaan kod.

Hujah terhadap Kesempurnaan

Sebelum pergi lagi, mari bincangkan argumen-argumen yang jelas.  Kos.  Masa. Usaha.   hujah yang sudah terbentuk dalam fikiran anda mungkin seperti ini:

"Sekiranya saya mengambil masa yang diperlukan untuk terperinci terperinci setiap mockup reka bentuk yang melepaskan tangan saya, saya akan menghabiskan masa 3x lebih banyak pada reka bentuk ... apatah lagi hakikat bahawa jika pelanggan tidak suka reka bentuk, semuanya berjalan dalam tong sampah".

Hujah yang adil dan pasti mempunyai kelebihannya, tapi itu pasti mempunyai kelebihannya, tetapi itu tidak cukup untuk menggagalkan artikel ini :) Ingat, matlamatnya bukan untuk membuat setiap mockup reka bentuk benar-benar sempurna (yang akan menjadi gila dan mahal) - matlamatnya adalah untuk mengubah pendekatan anda kepada reka bentuk .  Hakikatnya pendekatan piksel yang sempurna tidak begitu praktikal dalam kebanyakan kes ... tetapi ia sepatutnya menghalang anda daripada mencapainya.

Mari kita periksa faedah piksel sempurna dan kemudian kita akan kembali kepada hujah ini.

Manfaat Pixel Perfect Mockups

Ia memaksa anda menjadi lebih teratur.  Lebih banyak organisasi bermakna kurang masa yang dibelanjakan gusti dengan JPA anda dan lebih banyak masa yang dibelanjakan untuk reka bentuk lama.

Tiada lagi penjelasan kepada pelanggan.  Sekiranya anda telah merangka kompak dengan sempurna, iaitu, semuanya adalah sesuai dengan keinginan anda, anda tidak perlu menjelaskan kepada klien bahawa apa yang mereka lihat dalam reka bentuk itu bukanlah produk akhir. .

Tidak ada lagi yang menjelaskan kepada pemaju.  Ini amat berguna apabila pelanggan anda menyerahkan reka bentuk anda kepada sekumpulan pemaju di India di mana penjelasan panjang e-mel tidak diterjemahkan.  Jika satu-satunya tugas mereka adalah untuk memberikan kod PERTAHAN apa yang mereka lihat di komp, ini mengurangkan kemungkinan bahawa mereka akan salah menafsirkan sebarang spesifikasi reka bentuk.  Dan, lebih mudah bagi pengatur fasih yang bekerja dengan saya; Mereka boleh memberi tumpuan kepada pengaturcaraan, tidak cuba untuk mencari tahu jika saya mahu margin 10px atau margin 15px.

Kurang masa yang dihabiskan di QA.  Analisis kualiti, jika anda tidak dikenali, adalah reka bentuk peringkat akhir yang tidak baik di mana anda kembali kepada reka bentuk awal 'dicadangkan' dan mempersiapkannya untuk persembahan akhir.  Bagi pemaju, ini juga nama pusingan terakhir 'pre-roll' di mana setiap detail, bug berfungsi, dan piksel terikan dapat diluruskan.  Pasti, dalam satu projek kecil anda mungkin tidak akan lulus kitaran QA; Tetapi dalam projek yang lebih besar yang mempunyai anggaran, anda tidak boleh meninggalkan projek sehingga langkah ini selesai dan file sumber dibersihkan diserahkan.

Pengarah Seni / Pelanggan yang Selamat.  Sekiranya Pengarah Seni anda (atau apa sahaja nama mereka) boleh menghabiskan lebih sedikit masa untuk memikirkan butiran mengenai komps anda dan lebih banyak masa memberi petunjuk berharga, tekanan darah anda (dan anda) pasti akan jatuh semasa mesyuarat kajian reka bentuk.

Hasil akhirnya kelihatan lebih profesional.  Ya, comps anda akan kelihatan lebih profesional.  Sekarang anda meluangkan sedikit masa untuk menerangkan atau membuat alasan untuk mencuri ceroboh, anda boleh menghabiskan lebih banyak masa untuk meningkatkan tahap anda ...

Counter-Punch

Oleh itu, sebagai tindak balas terhadap hujah terhadap kompilator piksel yang sempurna, saya akan membuat titik terakhir ini.

Komps anda mestilah sempurna.  Ini adalah matlamat akhir dari mana-mana projek reka bentuk, dan jika anda tidak sampai ke sana pada akhirnya, mungkin kerana anda tidak pernah bermaksud untuk bermula dari awal.

Ia mengambil kurang daripada alternatif.  Pilih satu: berbelanja 6 jam dengan berhati-hati merancang mockup web dan dapatkan kelulusan pelanggan dengan cepat ATAU menghabiskan 4 jam pada reka bentuk dan 4 jam lagi memperbaiki kesilapan yang bodoh sebelum anda akhirnya meminta pelanggan menandatangani reka bentuk.

Pengeditan & Semakan berlaku lebih cepat dengan cara ini, tidak perlahan. Jika anda telah merancang mockup anda menggunakan mentaliti ini, dan JPA anda ditetapkan untuk mencerminkan ini, sebarang semakan semakan yang berikutnya yang diminta oleh klien akan berlaku pada kelajuan kilat.

Pengecohan yang sangat baik bermakna kurang masa dalam pembangunan. Ia menjimatkan wang anda (atau pelanggan anda).  Ini adalah penyewa asas prototaip pesat - lakukan dengan betul sebelum memasuki kitaran pembangunan mahal.

Ini adalah jurang terbesar antara projek kecil dan pekerjaan dengan belanjawan yang besar.  Fakta mudah adalah bahawa seorang perekrut yang mencari freelancer untuk bekerja pada projek mereka menggunakan "perhatian kepada detail" sebagai satu ukuran indikatif sama ada pereka lepas mampu mengendalikan projek web utama.  Sekiranya anda mempunyai portfolio yang penuh dengan peminat yang cuai, ia akan lebih sukar untuk membuktikan bahawa anda boleh dipercayai dan berupaya.

Pemikiran Akhir dan Amaran

Saya katakan tadi, tetapi ini adalah titik terakhir saya.  Anda tidak akan benar-benar mencapai kesempurnaan pixel pada setiap comp dan tidak mengapa. Terdapat masa dan tempat untuk skrip kasar dan anda (dan pelanggan anda) akan tahu bila tiba masanya.  Teori 'piksel sempurna comps' ini tidak memerlukan 100% hasil daripada 100% masa, hanya menentukan sikap dasar yang anda bawa ke setiap projek.  Setelah bertahun-tahun bekerja dalam projek saya sendiri, saya boleh mengatakan ia adalah kesakitan.

Mempunyai pandangan atau komen yang berbeza?  Mulakan atau sertai perbincangan di bawah di bahagian komen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.