Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. Design Theory

Great Design Hurts: Berjuang untuk Kesempurnaan Pixel

by
Read Time:9 minsLanguages:
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

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Saya akan membagikan teori desain yang telah saya kerjakan untuk menerapkan alur kerja saya sendiri selama beberapa tahun terakhir: pixel perfect mockups.  Bagi beberapa orang, itu mungkin sangat jelas, namun sebuah prinsip yang sangat penting bagi proses perancangan saya sekarang, saya katakan bahwa ini adalah satu-satunya gagasan paling berpengaruh yang telah saya sajikan dalam merancang selama lebih dari 10 tahun.

Mengadopsi teori ini bukan hanya langkah lain dalam proses perancangan, ini adalah perspektif yang mengubah revolusi pikiran yang niscaya akan meningkatkan kualitas setiap desain yang pernah Anda kerjakan mulai dari sekarang.  Ingin menjadi perancang web yang lebih baik dan mengerjakan proyek yang lebih besar?  Baca terus

Great Design Hurts

Pixel Perfect CompsPixel Perfect CompsPixel Perfect Comps

Beberapa tahun yang lalu di SXSW 2008, saya pertama kali diperkenalkan pada ide desain mockups "pixel perfect".  Michael Lopp (penulis beberapa buku desain hebat dan seorang manajer teknik senior di Apple) berada di panel untuk sesi yang berjudul, "Great Design Hurts"; Pidatonya lucu dan ditambahkan dengan kata-kata kurang pantas seperti di episode Bill Maher.  Di antara titik ceramahnya yang sangat mendalam adalah permata kecil yang menjelaskan bagaimana di Apple, masing-masing perancang mengabdikan diri pada gagasan tentang kecerdasan pixel perfect.  Artinya, masing-masing dan setiap perusahaan berjalan di sekitar perusahaan sangat tepat, sangat murni, sangat rinci sehingga pemirsa biasa tidak dapat membedakan antara desain dan tangkapan kode sepenuhnya.

... Masing-masing dan setiap perusahaan di sekitar perusahaan sangat tepat, sangat murni, sangat rinci sehingga pemirsa biasa tidak dapat membedakan antara desain dan tangkapan layar yang sepenuhnya dikodekan.

"Itu dia!",  Saya pikir, "gagasan yang akan merevolusi proses desain saya".  Dan memang memang begitu.

Lihat, untuk memulai setiap proyek desain dengan maksud untuk mengikutinya sampai perubahan pixel terakhir hampir setiap aspek proses perancangan.  Bahkan jika Anda tidak benar-benar mengikuti setiap saat, gagasan untuk memulai desain dengan niat itu akan memiliki efek dramatis pada produk akhir.

Setelah satu atau dua bulan mencoba hal ini, PSD saya lebih bersih, file saya bergerak lebih cepat, proyek saya tidak ' dragging ' di tahap selanjutnya lagi, dan saya menghabiskan lebih sedikit waktu di phone dengan klien yang mencoba menjelaskan perbedaannya. Antara mockup desain yang kasar dan produk jadi.  Oh, dan saya dipekerjakan lebih banyak lagi, yang merupakan metrik yang bagus untuk diikuti dengan ukuran apapun.

Jadi apa yang membuat pixel perfect comp?  Pada dasarnya, ini merancang mockup (khususnya mockup web, tapi bisa apa saja) seolah-olah Anda menata dengan kode di tempat pertama.  Jika Anda pernah bekerja sama sekali dengan CSS / HTML Anda akan tahu apa yang saya maksud.  Itu termasuk:

  1. Margin yang sempurna
  2. Padding yang sempurna
  3. Penggunaan font yang sempurna dan konsisten
  4. Borders sempurna & latar belakang
  5. Penggunaan warna yang konsisten
  6. Penyimpangan yang cerdas dan dapat dibenarkan dari 5 aturan pertama.

Izinkan saya menguraikan gagasan ini; Ketika kebanyakan desainer memulai sebuah proyek, desain mereka seolah-olah hanya sebuah mockup.  Pengetahuan bahwa beberapa spesialis pengembang atau Quality Assurance akan datang di kemudian hari dan menyempurnakan semuanya membatasi berapa banyak waktu dan usaha yang mereka masukkan ke dalam desain individual.

Apa yang terjadi selanjutnya adalah wajar bagi kebanyakan desainer: Klien diberi tahu bahwa gambar dan icons hanyalah "placeholder".  Teks Lorem Ipsum digunakan sebagai pengganti konten nyata.  Bahkan navigasi dan elemen antarmuka pengguna utama lainnya dapat ditukar dengan " filler " sampai tepat sebelum diluncurkan dalam banyak kasus.

Apa itu "Perfect"?

" Perfect " berarti setiap elemen dari setiap desain sesuai persis seperti yang Anda inginkan dalam produk terprogram akhir.

Dengan margin & padding, ini berarti bahwa semuanya konsisten di seluruh desain situs.  Jika setiap blok sidebar dalam desain dimaksudkan memiliki margin 10px, maka rancang dengan cara itu masing-masing dan setiap waktu ada blok sidebar.

Dengan font & warna, itu berarti penggunaan konsisten di seluruh situs.  Rancang setiap potongan font seolah-olah itu terkait dengan elemen HTML (yaitu: semua H1 selalu 18px, bold, Georgia menggunakan warna hitam).  Jangan menyimpang - salah satu manajer proyek favorit saya pernah mengatakan kepada saya, seharusnya tidak ada lebih dari 3 atau 4 font styles pada satu halaman kecuali Anda memiliki alasan bagus untuk melakukannya.  Jika Anda menggunakan warna merah tertentu sebagai warna sorot di situs ini, pastikan warna merah tepat di setiap tempat (kecuali jika Anda punya alasan untuk tampil berbeda).

Borders, HR rules, & latar belakang juga harus konsisten - Saya telah melihat beberapa perbandingan di mana setiap border & HR memiliki nuansa warna yang berbeda - ini pada akhirnya mengarah pada perbandingan tampak ceroboh dan tidak profesional.  Untuk mata yang tidak terlatih, mudah untuk melihat kapan sebuah desain terasa setengah matang ... bahkan jika orang itu tidak dapat menemukan apa yang sebenarnya salah.

Akhirnya, gunakan icons, gambar, judul, dan teks yang mendekati hal yang sebenarnya.  Jika Anda mendesain ulang situs web, gunakan konten yang telah mereka publikasikan daripada Lorem Ipsum.  Jika klien mengatakan bahwa mereka memiliki icons atau gambar baru yang akan mereka gunakan dalam perancangan ulang, mintalah mereka dan sertakan mereka dalam desain.

Ingat, kami berusaha untuk membuat comps desain yang sangat tepat sehingga terlihat seperti tangkapan layar dari keadaan sebenarnya, langsung, penerapan kode.

Argumen Melawan Kesempurnaan

Sebelum melangkah lebih jauh, mari membahas counter-arguments yang jelas.  Biaya.  Waktu.  Upaya.  Frustrasi ... argumen yang sudah terbentuk dalam pikiran Anda mungkin terdengar seperti ini:

"Jika saya meluangkan waktu yang dibutuhkan untuk detail detail setiap mockup desain yang melewati tangan saya, saya akan menghabiskan 3x waktu lebih banyak pada desain ... belum lagi kenyataan bahwa jika klien tidak menyukai desain, semuanya berjalan di tempat sampah ".

Sebuah argumen yang adil, dan yang pasti memiliki kelebihan, tapi itu tidak cukup untuk menggagalkan artikel ini :) Ingat, tujuannya bukan untuk membuat setiap mockup desain benar-benar sempurna (yang akan menjadi gila dan mahal) - tujuannya adalah untuk mengubah pendekatan Anda untuk desain.  Faktanya adalah bahwa pendekatan pixel-perfect tidak begitu praktis dalam banyak kasus ... tapi itu harus menghentikan Anda untuk mencapainya.

Mari kita periksa manfaat dari pixel perfect comps dan kemudian kita akan kembali ke argumen ini.

Manfaat Pixel Perfect Mockups

Ini memaksa Anda untuk lebih terorganisir.  Lebih banyak organisasi berarti semakin sedikit waktu yang dihabiskan untuk bergulat dengan PSD Anda dan lebih banyak waktu yang dihabiskan untuk menghabiskan waktu yang lama di desain.

Tidak perlu lagi menjelaskan kepada klien.  Jika Anda telah merancang comp dengan sempurna, yaitu, semuanya sesuai dengan keinginan Anda, Anda tidak perlu menjelaskan kepada klien bahwa apa yang mereka lihat dalam desain tidak benar-benar menjadi produk akhir. .

Tidak perlu lagi menjelaskan kepada pengembang.  Hal ini terutama berguna saat klien Anda mengirimkan desain Anda ke tim pengembang di India di mana email penjelasan yang panjang tidak diterjemahkan.  Jika satu-satunya pekerjaan mereka adalah memberi kode EXACTLY apa yang mereka lihat di comp, ini mengurangi kemungkinan bahwa mereka akan salah menafsirkan spesifikasi desain apa pun.  Dan, lebih mudah bagi programmer fasih yang bekerja dengan saya; Mereka bisa fokus pada pemrograman, tidak mencoba untuk mencari tahu apakah saya menginginkan margin 10px atau margin 15px.

Kurang waktu yang dihabiskan di QA.  Quality analysis, jika Anda tidak terbiasa, adalah desain tahapan akhir yang tidak menyenangkan di mana Anda kembali ke desain kasar diawal yang 'diusulkan' dan mempersiapkannya untuk presentasi akhir.  Bagi pengembang, ini juga merupakan nama dari putaran 'pra-peluncuran' terakhir di mana masing-masing dan setiap detail, bug fungsional, dan stray pixel bisa diluruskan.  Tentu, dalam proyek kecil Anda mungkin tidak akan pernah melewati siklus QA; Tapi dalam proyek yang lebih besar yang memiliki anggaran, Anda tidak bisa meninggalkan proyek sampai langkah ini selesai dan cleaned up source file diserahkan.

Art Directors / Klien yang Lebih Bahagia.  Jika Art Directors Anda (atau apa pun namanya) dapat menghabiskan lebih sedikit waktu untuk memikirkan rincian tentang comps Anda dan lebih banyak waktu memberi arahan yang berharga, tekanan darah mereka (dan Anda) pasti akan turun saat pertemuan tinjauan desain.

Hasil akhir terlihat lebih profesional.  Ya, comps Anda akan terlihat lebih profesional.  Sekarang Anda menghabiskan lebih sedikit waktu untuk menjelaskan atau membuat alasan untuk mockups ceroboh, Anda dapat meluangkan lebih banyak waktu untuk meningkatkan tingkat Anda ...

The Counter-Punch

Jadi, sebagai tanggapan terhadap argumen melawan pixel perfect comps, saya akan membuat points terakhir ini.

Comps Anda seharusnya sudah sempurna.  Ini adalah tujuan akhir dari setiap proyek desain, dan jika Anda tidak sampai di sana pada akhirnya, itu mungkin karena Anda tidak pernah bermaksud untuk sejak awal.

Butuh waktu KURANG daripada alternatifnya.  Pilih satu: menghabiskan 6 jam dengan cermat merancang mockup web dan mendapatkan persetujuan klien dengan cepat ATAU menghabiskan 4 jam pada desain dan 4 jam lainnya memperbaiki kesalahan bodoh lainnya sebelum akhirnya Anda meminta klien untuk menandatangani desain.

Editan & Revisi terjadi lebih cepat dengan cara ini, tidak melambat.  Jika Anda telah merancang mockup Anda menggunakan mentalitas ini, dan PSD Anda diatur untuk mencerminkan hal ini, setiap revisi revisi berikutnya yang diminta klien akan terjadi pada kecepatan kilat.

Mockups yang sangat baik berarti lebih sedikit waktu dalam development.  Ini menghemat uang Anda (atau klien Anda).  Ini adalah penyewa dasar prototipe cepat - melakukannya dengan benar sebelum memasuki siklus development yang mahal.

Ini adalah kesenjangan terbesar antara proyek kecil dan pekerjaan dengan anggaran yang besar.  Fakta sederhana adalah bahwa seorang perekrut yang mencari freelancer untuk mengerjakan proyek mereka menggunakan "perhatian terhadap detail" sebagai ukuran indikatif tunggal apakah perancang freelance mampu menangani proyek web utama.  Jika Anda memiliki portofolio yang penuh dengan comps ceroboh, itu akan menjadi lebih sulit untuk membuktikan bahwa Anda dapat dipercaya dan mampu.

Pemikiran Akhir dan Peringatan

Saya mengatakannya sebelumnya, tapi ini point terakhir saya.  Anda tidak akan benar-benar mencapai pixel perfection pada setiap komp dan itu tidak masalah.  Ada waktu dan tempat untuk rough-sketch-comp dan Anda (dan klien Anda) akan tahu kapan waktunya.  Teori ’pixel perfect comps’ ini tidak memerlukan 100% hasil dari 100% waktu, hanya menentukan sikap dasar yang Anda bawa ke setiap proyek.  Setelah bertahun-tahun mengerjakan ini dalam proyek saya sendiri, saya dapat mengatakan itu sepadan dengan rasa sakitnya.

Punya sudut pandang atau komentar yang berbeda?  Mulailah atau ikut diskusi di bawah ini di bagian komentar!

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.