Dengan penemuan CSS3, haruskah seorang desainer web menggunakan Photoshop?

13

Saya melihat bahwa banyak desainer membuat karya desain web yang indah di Photoshop, tetapi sekarang dengan kedatangan CSS3, ketika mereka ingin mengubahnya menjadi HTML & CSS, mereka hanya memulai dari awal dan membuat sekitar 80% dari desain akhir menggunakan CSS3.

Misalnya, mereka menggunakan radius batas, opacity, gradien latar belakang, bayangan kotak dan bayangan teks, dan aturan CSS3 lainnya untuk mendapatkan apa yang telah mereka buat di Photoshop. Banyak kali mereka hanya mengimpor gambar dari Photoshop, yang lebih seperti karya kuas atau logo, atau semacamnya.

Pertanyaan saya adalah, apakah para desainer web masih menggunakan Photoshop untuk membuat sesuatu, dari mana hanya 20% yang akan berguna bagi mereka?

Bisakah perancang web membuat seluruh desain secara langsung dalam HTML & CSS tanpa repot-repot menambahkan lapisan tengah lainnya untuk membuat desain di Photoshop, dan kemudian cukup membuat elemen yang tersisa di sana?

adobe-photoshop website-design css

— Saeed Neamati
sumber

Merancang antarmuka situs vs mendesain tampilan adalah dua topik berbeda. Photoshop membuat alat bingkai kawat yang mengerikan; Namun, produk seperti MockFlow membuat alat visual yang mengerikan. 99% klien saya TIDAK BISA menafsirkan bingkai kawat secara akurat tentang bagaimana efek bayangan, atau skema warna akan bekerja bersama-sama (atau tak terhitung situasi tergantung visual lainnya).

— Dawson

Ini harus berupa obrolan atau setidaknya meta. Itu tidak memiliki jawaban yang terbatas.

— B01

17

Harus tidak setuju dengan semua orang. Photoshop bukan alat untuk mendesain situs web. Ini alat untuk membuat sketsa situs web. Situs web masih harus dirancang dalam media yang ada - yang cenderung CSS, HTML dan JS.

Itu tidak berarti Anda tidak menggunakan Photoshop. Tetapi Anda tentu tidak perlu melakukannya.

Saya penggemar berat tidak pernah menampilkan desain situs web di photoshop kepada klien. Ini bukan media tempat hidup. Photoshop comps tidak menawarkan kemampuan untuk berkomunikasi interaksi, perbedaan perangkat, kekhasan browser, clickability, responsiveness, dll.

Memang, dalam kenyataannya, banyak waktu Anda masih perlu menunjukkan mockup JPG. Baik. Gunakan Photoshop untuk itu. Tetapi jangan kemudian mengambil file PSD dan mengiris dan memotongnya ke situs web. Itu masuk akal pada tahun 1999. Tidak banyak hari ini. Alih-alih, ambil PSD itu, dan gunakan saja sebagai panduan. Ini kira-kira seperti apa situs itu tetapi memperhitungkan fakta bahwa itu dibangun dalam CSS / HTML / JS dan mengakomodasi sesuai kebutuhan.

Jadi, untuk menjawab pertanyaan:

Bisakah perancang web membuat seluruh desain secara langsung dalam HTML & CSS tanpa repot-repot menambahkan lapisan tengah lainnya untuk membuat desain di Photoshop, dan kemudian cukup membuat elemen yang tersisa di sana?

Iya. Orang tentu bisa melakukan itu. Saya pernah melihat itu dilakukan secara paralel dengan desainer PSD. Masalah terbesar dengan pendekatan PSD adalah ketika Anda bekerja pada tim yang gesit. File-file berat yang digunakan untuk dokumentasi (seperti PhotoShop) menjadi beban yang agak besar untuk proses Agile dan akhirnya menambahkan lebih banyak masalah daripada yang mereka pecahkan. Kami cenderung kemudian bekerja secara terbalik ... kami membuat sketsa di PS sesuai kebutuhan, dan kemudian merancang dan membangun dalam HTML / CSS / JS. Ketika kemudian kita perlu membuat pembaruan visual yang cepat untuk rapat, kita hanya akan menyaring markup lapisan presentasi yang berfungsi, dan menamparnya di PhotoShop dan men-tweak dengan cepat.

— DA01
sumber

Aku bersamamu @ DA01. +1.

— Saeed Neamati

1

Memberi +1 artikel bagus (oke mungkin bukan artikel), tapi Anda menyimpulkannya dengan baik! Saya setuju sepenuhnya dengan semua yang Anda katakan. Saya pribadi menyatakan untuk memberikan klien saya mockup HTML dan CSS langsung dengan fungsionalitas desain penuh sehingga mereka dapat 'mengalami' desain!

— Web_Designer

2

+1 untuk "tangkapan layar lapisan markup presentasi yang berfungsi". Sampai saya membaca jawaban ini, saya berpikir untuk mengatakan sesuatu seperti ini dalam jawaban saya sendiri, tetapi saya tidak akan memiliki banyak untuk ditambahkan, jadi saya memilih ini sebagai gantinya ...

— A

+1 Saya mulai melakukan sebagian besar pekerjaan desain saya di browser menggunakan CSS3 setahun berjalan dan bahkan jarang membuka Photoshop lagi.

— Chris_O

1

+1! Photoshop terutama adalah program manipulasi bitmap. Untuk kode yang ringan dan terkontrol dengan baik, tidak ada cara yang lebih baik daripada mengarahkan html dan css. Akan selalu ada hal-hal yang harus berubah dari PS ke web, dan seperti yang saya lihat; PS hanya menambahkan lapisan yang menyulitkan untuk klien.

— benteh

7

** EDIT **

Klien Baru?

Absolutely - Jika Anda mengajukan desain untuk klien / situs BARU. Orang awam umumnya mengalami kesulitan melihat apa yang ada di kepala Anda (saya). Wireframe, gambar, dll. Tidak selalu memotongnya - gores itu - mereka tidak memotongnya. Saya mendengar lebih banyak, "Saya pikir itu akan dilakukan X" dari klien ketika semua yang mereka miliki adalah WF, atau sketsa daripada yang saya lakukan ketika mereka diberi maket dengan logo, foto, font perusahaan, dan UI.

Skenario lain:

Mungkin tidak - Jika dapat menggunakan HTML / CSS / JS yang ada yang sesuai dengan persyaratan pekerjaan, atau Anda mengedit konten klien yang sudah ada, Anda akan lebih baik bekerja hanya dalam kode. Jika tidak, Anda mungkin akan menghabiskan banyak waktu di Photoshop untuk pengembalian yang sangat sedikit. Ada beberapa contoh (seperti @ DAO1 disebutkan) di mana screenshot dan tweak-via-Photoshop benar-benar dapat mempercepat proses persetujuan, atau menuntaskan ide, atau tiga.

** end **

Saya katakan ya -

Jauh lebih mudah untuk menjual desain Anda (dan lebih cepat membuat comps) dengan visual - bahkan jika disederhanakan. Di situlah PS paling membantu pekerjaan saya.

Saya juga menggabungkan layer dengan sistem grid, jadi saya bisa melihat bagaimana segala sesuatunya ditata, dan dengan cepat menyeretnya ke tempat saya membutuhkannya. Sekali lagi, ini membantu dengan comps, dan perubahan yang diminta klien.

Jika Anda menyimpan pustaka Photoshop dari elemen-elemen yang biasa Anda gunakan: kotak input sudut bulat berbasis vektor, kisi Anda, kotak "logo di sini" ... semua dalam lapisan satu file, atau beberapa file (pilihan Anda) - Anda dapat membuat halaman rumah dan halaman interior dalam waktu singkat untuk mengkodekannya.

Menyimpan file CSS umum (dengan pengaturan populer) juga akan membantu ketika tiba saatnya untuk kode, tapi saya tidak melihat nilai menghilangkan PS dari alur kerja - terlepas dari seberapa kuat CSS menjadi.

— Dawson
sumber

"Dalam sepersekian waktu yang dibutuhkan untuk kode mereka" yang benar-benar tergantung pada sejumlah hal - termasuk keahlian dari desainer. Saya menemukan bahwa seringkali lebih cepat untuk membuat perubahan klien / tweak langsung di CSS / HTML / JS daripada kembali ke Photoshop. Tetapi itu tergantung pada banyak faktor.

— DA01

DA01 - tentu saja. Alur kerja saya berubah saat proyek matang. Setelah diluncurkan, PSD tidak tersentuh.

— Dawson

3

Bisakah Anda menjamin bahwa 100% pengguna Anda memiliki browser yang akan melihat situs Anda persis seperti yang Anda (atau lebih penting lagi, klien) ingin dilihat? Tidak? Lalu berapa persen? 90%? 80%?

Bisakah Anda memastikan itu menurun dengan baik, sehingga versi alternatif yang dilihat oleh 10% sisanya (20%? 40%?) Dapat diterima?

Jika salah satu atau kedua masalah tersebut merupakan masalah, Anda memerlukan Photoshop.

— Lauren-Clear-Monica-Ipsum
sumber

Maaf; mengapa demikian? Bisakah Anda menjelaskan maksud Anda?

— benteh

@boblet Harap spesifikkan pertanyaan Anda. Menjelaskan apa?

— Lauren-Clear-Monica-Ipsum

Ah maaf; Saya bertanya-tanya mengapa Anda mengatakan Anda perlu PS karena kurangnya konsistensi browser? Entah bagaimana tidak masuk akal bagi saya.

— benteh

@boblet Yang saya maksud adalah bahwa dengan beberapa efek (misalnya, sudut membulat) Anda dapat membuatnya dalam CSS atau Photoshop. Tetapi browser lama tidak dapat menangani sudut bulat CSS; mereka keluar seperti sudut kotak biasa. Jadi jika sudut bundar benar-benar penting, Anda harus menggunakan Photoshop untuk membuatnya sebagai grafik agar semua browser dapat melihatnya.

— Lauren-Clear-Monica-Ipsum

Aha! Itu lebih masuk akal. Saya melihat sekarang, bahwa ini adalah posting lama, dan hari ini css sudut bulat, bayangan dll tidak benar-benar masalah lagi. Saya hanya peduli dengan praktik membuat mockup yang menyenangkan di PS, dan kemudian menabrak masalah menerjemahkan ke dalam kode yang masuk akal. Sering kali sulit bagi klien untuk menelannya; karena mereka sering tidak mengerti jembatan yang perlu menutup celah antara bitmap dan kode. Terima kasih telah menjelaskan.

— benteh

2

Hal-hal untuk dipikirkan:

Banyak yang dimasukkan ke dalam menempatkan desain mewah di web. Setidaknya untuk yang lebih kompleks. Photoshop membantu membuat hasil akhir terlihat lebih cepat.
Untuk seorang desainer di pekerjaannya, melakukan mock-up di Photoshop biasanya lebih cepat, dibenarkan, karena Anda tidak akan menghabiskan sepanjang hari meretas html dan CSS3.
Seperti yang Anda sebutkan mereka dapat melakukan 80% di CSS3, tetapi kemudian mereka akhirnya akan membutuhkan Photoshop membentuk beberapa bagian.
Saya berpendapat bahwa Anda tidak melakukan mock-up di Photoshop jika Anda adalah desainer dan pengembang dan itu akan menghemat waktu, jika tidak selalu melakukan mock-up di Photoshop.

— b01
sumber