Baru-baru ini, kami bekerja dengan seorang desainer grafis (yang diatur oleh klien) untuk menyediakan skin untuk aplikasi Django + Bootstrap yang telah kami buat. Perancang menyediakan serangkaian gambar statis dari tata letak baru, bersama dengan dokumen yang menjelaskan beberapa atribut teknis (ukuran font, warna, beberapa dimensi dll).
Ternyata sangat memakan waktu untuk mengimplementasikan ini. Meskipun seluruh situs pada dasarnya adalah halaman depan, halaman indeks, dan setengah lusin halaman detail, saya menghabiskan setidaknya 5 hari hanya menerapkan perubahan CSS dan HTML. Jadi saya akan pergi mengambil risiko dan menyebutnya The Wrong Way .
Pendekatan dasar saya adalah:
- Bandingkan gambar statis dan render saat ini, dan perhatikan perbedaannya.
- Tebak perubahan apa yang dibutuhkan dalam CSS / HTML
- Buat perubahan itu
- Lanjutkan ke langkah 1.
Beberapa masalah tertentu adalah saya tidak mengerti bahwa desain termasuk perubahan dari 8 kolom menjadi 12, beberapa gambar yang disediakan dalam format yang salah (. gulat CSS biasa untuk mencapai rendering pixel sempurna dll. Dan kadang-kadang saya harus mengatur ulang template HTML untuk mendapatkan perilaku tertentu.
Apa jalan yang benar?
Jawaban:
Di perusahaan saya, ada beberapa orang yang berspesialisasi dalam pekerjaan ini.
Mereka adalah desainer. Dan mereka tahu HTML. Mereka dapat menjadi jembatan antara desainer dan insinyur front-end; seperti biasanya. Dengan cara ini, kita hanya perlu mengintegrasikan HTML mereka.
Ini kerja keras. Ada alasan mengapa situs seperti "PSD ke HTML dalam 24 jam" berfungsi dengan baik. Solusi di perusahaan kami adalah membuat orang-orang berspesialisasi dalam melakukan ini. Bagi kami, bekerja dengan HTML sangat mudah.
Tidak ada peluru perak.
sumber
Saya tidak yakin ada "cara yang benar", tetapi cara yang cukup efektif untuk bekerja sama dengan seorang desainer adalah dengan terlebih dahulu membangun sistem tanpa gaya yang menggunakan templat dan memungkinkan pertukaran semua templat dengan mudah. Kemudian, setelah Anda memiliki antarmuka fungsional-tapi-unstyled (atau gaya minimal), Anda menyerahkan hasilnya kepada desainer untuk styling.
Contoh yang layak dari pola desain semacam ini adalah jQueryUI ( http://jqueryui.com/ )
sumber
Pertama, saya harus mengakui bahwa saya tidak pernah bekerja dengan ujung depan web sejauh ini.
Tetapi saya pikir mungkin merupakan praktik yang baik bagi Anda dan perancang untuk menulis prosa tentang bagaimana seharusnya desain akhir. Dengan begitu Anda bisa lebih yakin itu konsisten, karena akan berbau jika Anda menggambarkan tabel yang berbeda untuk setiap halaman. Prosa dapat membuat implementasi Anda lebih mudah, karena Anda benar-benar menulis kode, yang lebih dekat dengan implementasi Anda daripada gambar.
Coba juga untuk membuat perancang fokus pada komponen, bukan seluruh halaman. Jika Anda mendapatkan komponen halaman dengan benar, maka menyusunnya ke seluruh halaman adalah langkah yang jauh lebih mudah.
sumber
Saya telah mengembangkan HTML / CSS dengan beberapa desainer dan sebagaimana telah dinyatakan, tidak ada "peluru perak". Desainer yang telah bekerja dengan saya tidak tahu banyak (tidak ada) tentang html / css. Beberapa dari mereka memiliki pengalaman dalam mendesain web dan saya harus mengatakan ketika mereka memiliki pengetahuan itu, selalu berakhir dengan lebih mudah untuk mengembangkan dan "situs web yang lebih baik" terutama ketika responsif terhadap UX terlibat.
Saya kira apa yang beberapa perusahaan mencari situs web tidak tahu / abaikan adalah: siapa pun dapat mengatakan dia adalah seorang desainer grafis / webdevelopper / webdesigner / desainer UI dengan pengetahuan dasar (atau bahkan tidak ada, ya saya pernah melihatnya) di keduanya. Sedangkan "yang asli" dapat bekerja lebih keras dan menghasilkan situs web yang dikelola dan efektif. Saya mencoba untuk "mendidik" klien dan menjelaskan bahwa desain Web melibatkan keterampilan yang "tidak hanya" yang tidak dimiliki desainer grafis. Ketika ini berhasil, saya biasanya mengirim klien ke desainer yang telah bekerja bersama saya dan memiliki alur kerja yang sama dengannya.
Ini mengatakan, itu sering terjadi karena banyak alasan bahwa Anda akhirnya membangun situs web dengan orang-orang yang memiliki keterampilan grafis dan tidak memiliki keterampilan mendesain web. Dalam situasi ini, cara terbaik yang saya temukan untuk menghemat waktu pengkodean dan tidak berakhir dengan tata letak yang tak terhindarkan adalah dengan terlibat dalam proses desain dan berkomunikasi dengan desainer dan menjelaskan apa yang dapat / tidak dapat Anda lakukan dan apa yang lebih sederhana / lebih baik. dari sudut pandang Anda.
Meskipun ini bisa sulit untuk diorganisasikan dalam beberapa situasi, itu adalah modal untuk menjelaskan kepada klien dan perancang bahwa "jika Anda berpikir webdesigning membentuk bigining dari proyek web Anda akhirnya menghemat waktu, uang dan headeachs" dan bahwa Anda akan menjadi senang untuk mengambil bagian dalam proses perancangan untuk menghemat waktu dan uang itu.
Ini adalah worflow yang saya coba ikuti di sebagian besar proyek:
Waktu yang saya habiskan untuk berkomunikasi dan bekerja dengan desainer disimpan selama proses pengkodean dan ini berakhir dengan kode yang lebih sederhana, lebih mudah dikelola, dan lebih rapi.
Ini tidak menyelamatkan Anda dari desainer bahagia yang memanggil Anda pada malam Jumat dengan mokup yang sangat cantik yang telah dilihat klien dan sekarang ingin dengan kalimat ini: "Hei pall, bisakah Anda memberi kode ini untuk saya, batas waktu adalah ... kemarin! " Kemudian seluruh teori berantakan dan jika Anda mencari pekerjaan pada saat itu, Anda baik untuk kemajuan sepanjang minggu.
Kesimpulan:
Saya tidak berpikir ini sangat berbeda dari kode apa pun yang berhubungan dengan bukan proyek, cara terbaik untuk bekerja dengan orang lain adalah berkomunikasi dengan mereka.
sumber
Sebagai seorang desainer grafis menjadi pengembang web stack penuh, bagi saya ini sejauh ini merupakan bagian yang mudah. Saya menemukan bahwa sering kali ada kesenjangan komunikasi antara tim desain UX dan pengembang yang mengimplementasikan produk. Tentu saja, dokumen membantu, tetapi prosesnya dapat mulai terasa lebih alami setelah beberapa percakapan tatap muka tentang strategi terjadi. Juga, saya tahu bahwa waktu itu langka untuk semua orang, tetapi cobalah untuk terlibat selama fase desain dan tata letak. Ini dapat sangat membantu ketika komunikasi dibutuhkan antara perancang dan pengembang. Proyek ini mengambil lebih dari upaya tim yang bersatu dan kurang dari skenario "Yah, aku sudah selesai, di atas tembok itu berjalan" skenario. Saya merasa sangat bermanfaat memiliki desain dan pengembangan yang terjadi secara paralel, dorong tim desain untuk memasok Anda dengan bingkai gambar di awal proses. Dengan begitu, Anda dapat melakukan satu pass gaya yang hanya menangani tata letak dan pemosisian. Kemudian, saat deaigns menjadi lebih kaya dan lengkap. Ambil pass CSS lain untuk penampilan dan atribut gaya lainnya. Setidaknya ini membuat Anda tidak harus fokus pada semuanya sekaligus.
sumber
Saya menghadapi masalah yang sama. Saya punya ide bahwa alat seperti Greasemonkey atau Tampermonkey dapat digunakan untuk tujuan itu. Baru minggu lalu, saya meminta komentar tentang ide ini: Bagaimana cara meng-outsource UI dari aplikasi Web yang dinamis? , tetapi tidak mendapatkan respons yang memuaskan.
Dengan alat-alat ini Anda dapat menyuntikkan CSS, HTML dan Javascript ke halaman. Dalam ide saya, Anda memberikan URL situs yang berfungsi kepada desainer dan mengharapkan skrip Greasemonkey sebagai imbalan. Secara teoritis Anda harus dapat mengintegrasikannya dengan sangat cepat ke situs yang ada. Dengan cara ini, akan menjadi tugas perancang untuk menulis HTML dan CSS dan membuat situs tersebut benar-benar berfungsi. Ini membutuhkan keterampilan pemrograman lebih banyak di sisi desainer sekalipun.
Saya tahu bahwa ide ini membutuhkan banyak penjelasan. Tetapi saya belum mencobanya dan tidak tahu apakah ada orang lain yang melakukan ini. Mungkin ada beberapa masalah dengan implementasinya.
sumber