Apakah ada keuntungan melakukan mock-up gambar penuh dibandingkan terjun langsung ke penulisan HTML / CSS?

Di masa lalu, banyak perusahaan dan desainer web memiliki alur kerja yang terdiri dari dua atau tiga bagian, desain minimum, markup, backend. Ini adalah generalisasi dan garis mungkin sedikit kabur ... tapi saya yakin Anda mendapatkan intisari saya.

Seringkali perancang web "hanya visual" dan hanya akan bertanggung jawab untuk membangun mockup yang sangat rinci dalam perangkat lunak pengedit gambar, seperti Photoshop atau Fireworks. Maket akan menunjukkan setiap aspek yang mungkin dari halaman web dari warna dan pilihan jenis, ke latar belakang, ikon, foto dan gambar lain yang akan digunakan. Tetapi "perancang" itu tidak pernah peduli dengan konstruksi dan implementasi langsung yang sebenarnya. Mereka hanya fokus pada penampilan.

Setelah desain disetujui (dengan meninjau file gambar ini) tahap dua dilakukan - mentransisikan file gambar menjadi HTML / CSS langsung.

• Dalam lingkungan kursi tunggal atau lepas, perancang web mungkin telah menggunakan irisan dan diekspor ke HTML melalui beberapa opsi aplikasi internal. Pada kesempatan yang jarang , perancang dapat membuat bingkai halaman HTML / CSS dasar.

• Di beberapa lingkungan perusahaan, maket ini akan tetap dalam bentuk file gambar berlapis (.psd, .png [untuk Fireworks]) untuk perancang web dan perancang tidak akan pernah khawatir tentang penerapan markup atau kode apa pun . "Perancang" tidak pernah harus mempedulikan diri mereka sendiri dengan cara membuat HTML atau CSS untuk mengimplementasikan gambar tiruan yang mereka buat. File gambar diserahkan kepada "pengembang" yang kemudian bertanggung jawab untuk membuat HTML / CSS yang cocok dengan file gambar.

Saya membayangkan beberapa pekerjaan masih sangat seperti ini. Namun, dengan kemajuan dalam bahasa markup, yaitu CSS3, dan peningkatan dukungan browser - dalam banyak kasus menghabiskan waktu dengan hati-hati membangun representasi raster dari halaman web penuh bisa sangat tidak berguna dalam banyak kasus.

Dengan mark up saat ini, sangat mudah untuk mengimplementasikan banyak kebutuhan desain web secara langsung melalui HTML / CSS dan penggunaan aplikasi gambar terbatas untuk menghasilkan aset gambar kecil atau foto yang mungkin diperlukan. (Perpustakaan dan / atau templat seperti Bootstrap telah lebih jauh mendorong gagasan ini.)

Dalam alur kerja saya sendiri saya terutama pindah jauh dari maket halaman penuh kecuali mereka secara khusus diminta. Saya melakukan ini untuk meningkatkan kecepatan desain dan memastikan bahwa apa yang disetujui dekat dengan apa yang akhirnya akan diberikan di browser. Bahkan, saya belum membuat maket halaman penuh dalam beberapa tahun. Tapi saya sadar masih ada alur kerja menggunakan metode ini.

Apakah ada manfaat nyata untuk membuat maket halaman penuh dalam aplikasi pengeditan gambar sebelum terjun langsung ke HTML / CSS untuk konstruksi desain?

Manfaat membangun maket satu halaman penuh adalah pembagian kerja.

Di perusahaan besar yang memiliki desainer dan pengembang (ujung depan), tugas desainer adalah merancang dan pekerjaan pengembang adalah menulis kode .

Memiliki divisi ini memungkinkan perancang untuk menghabiskan seluruh waktu mereka bekerja pada tampilan, rasa, dan antarmuka untuk situs web dan tidak perlu tahu apa-apa tentang bagaimana itu dibuat. Mereka dapat membuat desain yang lebih berkualitas dan memikirkan keputusan lebih lama karena mereka tidak berusaha mendapatkan kode untuk melakukan apa yang mereka inginkan pada saat yang bersamaan.

Itu juga memungkinkan pengembang menulis lebih banyak kode dengan tidak harus memikirkan bagaimana akan terlihat termasuk rincian kecil dan berbagai negara. Mereka menerapkan desain sebaik mungkin dalam waktu yang diberikan dan dapat pindah ke proyek lain.

Jika perancang adalah pengembang juga, saya pikir sebagian besar orang kurang lebih mulai memihak Anda karena mereka menciptakan produk yang lebih kasar dan beralih dengan cepat untuk menguji berbagai hal. Hal ini memungkinkan ide untuk diuji dengan cepat sebagai lawan membuat dokumen photoshop pixel sempurna.

Namun, desain yang kasar dan iteratif tanpa kode juga merupakan pendekatan yang valid dan sangat berguna terutama untuk tata letak dan alur kerja. Bahasa markup dan teknologi baru tidak menciptakan bekerja dengan cepat dengan ide-ide kasar :)

Saya akan memilih Guffa dengan jawaban ini. Untuk lebih jelasnya, saya tidak mencoba untuk mengeluarkan Guffa, tetapi, poin-poin penting yang saya dengar. Saya ingin menawarkan beberapa poin tandingan juga. Saya tidak mengatakan Guffa salah dan saya benar. Saya hanya menawarkan tandingan.

1. Bagian kreatif dari proses desain menderita jika waktu dihabiskan mencoba untuk mencari tahu bagaimana melakukan hal-hal yang berbeda dalam HTML dan CSS.

Ini benar jika seseorang tidak menganggap kode sama kreatifnya. Photoshop dan HTML / CSS / JS keduanya merupakan media bagi seniman untuk bekerja. Seperti halnya cat sama kreatifnya dengan arang, jadi Photoshop juga bisa sama kreatifnya dengan media seperti HTML / CSS / JS.

Dan manfaat besar dari bekerja secara langsung dalam HTML / CSS / JS adalah multi-dimensionalitasnya. Photoshop, pada akhirnya, adalah kanvas datar. HTML / CSS / JS adalah kanvas dinamis dengan fluiditas, interaksi, animasi, dll.

Intinya, saya berpendapat kode adalah media yang lebih kreatif dalam hal ini.

2. Ketika para desainer dan coders adalah orang yang berbeda, bahkan jika para desainer cukup pandai dalam HTML dan CSS, mereka jarang benar-benar pandai dalam pengkodean. Hasilnya adalah (dalam berbagai derajat) kode yang tidak efisien yang membengkak dan sulit dipertahankan.

Poin berlawanan dengan hal ini, sayangnya, adalah sesuatu yang sering saya temui: Kebanyakan pengembang yang bekerja dalam peran khusus bekerja di organisasi yang lebih besar (di mana peran khusus lebih merupakan norma) dan, karena kurangnya pengetahuan lintas disiplin ( dan sering kali sama sekali tidak ada kode lapisan presentasi) membuat beberapa kode yang paling kembung sulit untuk mempertahankan kode front-end yang pernah saya lihat.

Intinya, saya tidak akan menganggap kemampuan desain visual seseorang sebagai indikasi kemampuan coding mereka. Saya akan melangkah lebih jauh dan berpendapat bahwa seorang generalis berbakat yang mengetahui desain dan pengkodean - bahkan jika mereka bukan desainer terbaik atau pembuat kode terbaik, seringkali dapat menciptakan produk keseluruhan yang lebih baik daripada tim yang sangat terpisah hanya karena fakta bahwa mereka dapat melihat gambar yang lebih besar saat mereka buat. Lebih sedikit yang hilang dalam terjemahan.

3. Jika Anda mulai menulis kode sebelum memiliki pandangan yang jelas tentang seperti apa desainnya, Anda membuat pilihan yang tidak diinformasikan tentang cara membuat kode. Risikonya adalah itu akan membuat kode lebih buruk, dan membatasi kemungkinan untuk desain.

Tetapi mendesain dalam kode tidak berarti itu kode produksi Anda. Saya telah mengerjakan proyek-proyek di mana sebagian besar kode yang kami buat adalah murni untuk sepenuhnya desain dan kemudian melakukan beberapa prototipe. Setelah selesai, kami kemudian akan menulis ulang bersih. Ini memiliki manfaat tambahan karena kami dapat menemukan banyak 'gotcha' di babak pertama pengkodean.

4. Kode HTML dan CSS dapat berubah cukup banyak dengan perubahan kecil dalam desain, yang akan membuat proses desain lebih statis. Anda berisiko membatasi diri hanya pada perubahan yang mudah dibuat dalam kode.

Argumen kontra untuk itu adalah desainer membatasi diri hanya perubahan yang mudah dilakukan di Photoshop. Itu juga bukan argumen yang sangat bagus.

Satu-satunya alasan untuk tidak melakukan mockup Photoshop terlebih dahulu adalah jika perancang tidak memahami batasan kode. Anda tidak akan pernah ingin memberikan klien sesuatu yang dia tidak bisa miliki di final.

Selama PSD mewakili sesuatu yang dapat direplikasi dalam CSS / HTML (diberikan lintas-browser dan batasan lintas media), saya akan melakukannya di Photoshop (atau InDesign - saya tahu beberapa desainer yang membuat kompilasi). Lebih cepat dan lebih mudah untuk memanipulasi gambar. Mengejek dalam CSS untuk saya akan menjadi pengkodean sebelum saya coding, jika itu masuk akal.

Ada beberapa alasan untuk menjaga elemen desain terpisah dari elemen pembuatan kode, misalnya:

• Bagian kreatif dari proses desain menderita jika waktu dihabiskan mencoba untuk mencari tahu bagaimana melakukan hal-hal yang berbeda dalam HTML dan CSS.

• Ketika para desainer dan coders adalah orang yang berbeda, bahkan jika para desainer cukup pandai dalam HTML dan CSS, mereka jarang benar-benar pandai dalam coding. Hasilnya adalah (dalam berbagai derajat) kode yang tidak efisien yang membengkak dan sulit dipertahankan.

• Jika Anda mulai menulis kode sebelum memiliki pandangan yang jelas tentang seperti apa desainnya, Anda membuat pilihan yang tidak diinformasikan tentang cara membuat kode. Risikonya adalah itu akan membuat kode lebih buruk, dan membatasi kemungkinan untuk desain.

• Kode HTML dan CSS dapat berubah cukup banyak dengan perubahan kecil dalam desain, yang akan membuat proses desain lebih statis. Anda berisiko membatasi diri hanya pada perubahan yang mudah dibuat dalam kode.