Apakah desainer web perlu tahu cara membuat kode?

Sebagai pengembang web, baik arsitek front-end dan back-end, saya bekerja dengan banyak desainer yang berbeda dan kadang-kadang merasa frustrasi bekerja dengan perusahaan desain di mana tidak ada pemikiran tentang bagaimana menyelesaikan desain dalam CSS dasar dan HTML. Di sisi lain sebagai pengembang, saya diharapkan dapat menghasilkan kode dari desain apa pun.

Apakah desainer web perlu mengetahui teknik CSS dan HTML modern dasar? Mengapa atau mengapa tidak penting bagi perancang web yang berpengetahuan luas?

Beberapa pemikiran umum:

• Pengembang web front-end harus cukup terampil untuk membuat kode desain apa pun.
• Desainer web harus memiliki pemahaman tentang bagaimana pengguna akan benar-benar berinteraksi dengan desain mereka.
• Toko desain lebih suka memiliki desain desainer dan menyerahkan semua kode kepada pengembang.

Apakah desainer web perlu mengetahui teknik CSS dan HTML modern dasar?

Iya nih.

Mengapa atau mengapa tidak penting bagi perancang web yang berpengetahuan luas?

Saya menjawab "ya" karena Anda menggunakan kata dasar .

Sangat penting bahwa perancang web mengetahui teknik HTML dan CSS dasar, dengan cara yang sama bahwa arsitek harus mengetahui sesuatu tentang fisika dan ilmu material, perancang cetak harus tahu sesuatu tentang proses pencetakan CMYK dan perancang busana harus tahu sesuatu tentang kain.

Jika Anda tidak tahu apa - apa tentang teknik CSS dan HTML, Anda tidak dapat menyebut diri Anda seorang "perancang web". Anda hanya seorang seniman atau sesuatu.

Komentar tentang pemikiran Anda:

Pengembang web front-end harus cukup terampil untuk membuat kode desain apa pun.

Salah. Ini adalah penyederhanaan yang berlebihan. Beberapa hal tidak diterjemahkan dengan baik ke web. Beberapa desain mungkin berantakan atau tidak berfungsi pada platform atau ukuran layar tertentu yang perlu didukung.

Seorang desainer web perlu mengetahui batasan-batasan tergantung pada audiens dan persyaratan kinerja. Seorang desainer yang tahu CSS dan HTML tahu bagaimana men-tweak desain sehingga kode yang mendasarinya dapat dibuat sebagai responsif dan seefisien mungkin.

Desainer web harus memiliki pemahaman tentang bagaimana pengguna akan benar-benar berinteraksi dengan desain mereka.

Anda telah mendeskripsikan Desain UX , yang merupakan disiplin yang sama sekali berbeda. Meskipun Desain Pengalaman Pengguna melibatkan aspek Desain Grafis, itu benar-benar tidak ada hubungannya dengan CSS atau HTML.

Sementara perancang web yang berpengetahuan luas harus terbiasa dengan Desain UX, itu juga umum bagi mereka untuk berkolaborasi dengan spesialis UX.

Toko desain lebih suka memiliki desain desainer dan menyerahkan semua kode kepada pengembang.

Ini mungkin sebagian benar, tetapi tidak sepenuhnya. Salah satu paradigma populer dalam sistem manajemen konten adalah MVC (model / view / controller). Banyak toko desain ingin para desainer memiliki pengetahuan dengan pengkodean HTML / CSS sehingga mereka dapat fokus pada penyajian konten ("tampilan"), sementara para pengembang fokus pada model / pengontrol.

Ini bukan untuk mengatakan bahwa beberapa toko tidak mempekerjakan Artis Grafis yang hanya berfokus pada elemen grafis dan mendorong piksel sekitar - tetapi mereka bukan Desainer Web, dalam pandangan saya. Situs web besar mungkin mempekerjakan Seniman Grafis, Desainer Web, Desainer UX, Pengembang Web, dan Spesialis Basis Data yang semuanya berkolaborasi untuk menghasilkan situs web yang sudah jadi. Seorang freelancer yang membangun situs yang lebih kecil mungkin mencoba-coba semua disiplin ilmu dan menyebut diri mereka Desainer Web / Pengembang.

Seorang desainer web harus memahami cara kerja kode dan kemampuannya, dengan cara yang sama seorang desainer cetak memahami seperti apa bentuk tinta di kertas dan bagaimana kertas dapat dilipat atau dipotong. Setiap desainer harus memahami keterbatasan dan kekuatan media yang dipilih.

Jika seorang perancang web membuat situs yang sangat indah ini, dia perlu mempelajari dasar-dasar pengkodean atau duduk dengan seorang koder di beberapa titik dalam proses untuk memeriksa bahwa situs keindahan dapat dicapai. Jadi saya akan mengatakan seorang desainer web minimal perlu tahu tentang kode.

Saya pikir itu adalah specious untuk mengatakan "seorang pengembang dapat kode apa pun," dengan cara yang sama Anda tidak dapat mengatakan bahwa apa pun yang dapat dicetak dapat direproduksi secara tepat di web menggunakan HTML / CSS.

Lauren, ghoppe dan Farray semua berbicara dengan tenang, jadi aku tidak akan mengulangi apa pun dari apa yang mereka katakan. Sebagai soal kepraktisan, izinkan saya menawarkan jawaban lain atas pertanyaan Anda yang eksplisit dan implisit.

Pendekatan terbaik untuk pengembang adalah pendekatan yang sama dengan yang dilakukan pencetak pada drum sejak Gutenberg memotong jenis pertamanya: bersikeras bahwa perancang melibatkan Anda dalam proyek sejak awal. Jelaskan bahwa Anda harus terlibat dalam diskusi sebelum satu piksel menyentuh layar.

Ketika saya sedang mengerjakan proyek desain cetak yang melibatkan sesuatu yang tidak biasa, saya sedang berbicara dengan pencetak dan orang penjilidan segera. Mereka tahu lebih banyak tentang kerajinan mereka daripada saya, jadi saya menjadikannya sebagai usaha saya untuk melibatkan mereka sejak awal. Sayangnya, para desainer pemula, terutama ketika mereka baru keluar dari sekolah dan belum mengenal dunia nyata, kadang-kadang mengabaikan langkah sederhana itu dan berakhir di kimshee yang dalam tanpa penyelamat kehidupan.

Kampanye di blog, di forum, dengan klien dan manajer proyek, dengan sekolah dan grup pengguna lokal dan desainer apa pun dalam jangkauan: "Bicaralah dengan pengembang Anda sebelum mulai mendesain!"

Seorang pengembang akan mendapatkan comps dari desainer yang tidak tahu apa yang mereka minta, sama seperti departemen prepress kadang-kadang mendapatkan karya seni yang tidak dapat digunakan (dan desainer mendapatkan briefing hanya akan mengikuti masochist). Tetapi Anda dapat mencegah banyak frustrasi dan membuang-buang waktu jika Anda bersikeras tempat di meja perencanaan.

Iya dan tidak. Mengetahui bagaimana lingkungan target Anda berfungsi adalah penting, tetapi tidak terlalu penting bagi Anda untuk memahami kode spesifik yang diperlukan untuk membuat sistem bekerja seperti itu. Dengan kata lain - Saya tidak akan khawatir tentang sintaksis khusus untuk membuat sudut bulat di semua mesin browser utama, tapi saya akan menganggap penting bahwa Anda memahami apakah Anda dapat membuat sudut bulat di semua browser utama (dan berapa banyak kode yang diperlukan) untuk melakukannya).

Sebagai contoh, hanya beberapa tahun yang lalu kami masih dibebani dengan IE6. Kami memiliki desain yang benar-benar indah untuk aplikasi intranet perusahaan, tetapi sangat bergantung pada hamparan transparan. IE6 dapat menampilkan PNG8s tetapi tidak menghormati saluran alpha di PNG24s, dan untuk menggunakan opacity berbasis CSS diperlukan ActiveX filter dan masalah lainnya. Lingkaran dapat dilompati untuk mencapai efek yang diinginkan, tetapi masing-masing lingkaran mewakili siklus pengembangan yang lebih lama, tingkat bug yang lebih tinggi, pemeliharaan yang lebih sulit, dll. Selain biaya langsung dalam jam kerja pengembangan dan pemeliharaan desain (sekarang merepotkan) ini, ada juga biaya peluang untuk mengikat pengembang-jam menambal basis kode kludgy alih-alih bekerja pada versi N + 1.

Ketika dalam situasi semacam ini, biaya / manfaat dari setiap efek visual dalam suatu desain harus diukur:

• Seberapa luar biasa efek visualnya?
  Bisakah itu diganti dengan visual lain yang sama-sama berdampak yang tidak memerlukan banyak sumber daya Konstruksi?

• Bisakah efeknya direproduksi dengan benar pada target? Jika desain asli Anda tidak dapat dibuat ulang secara akurat oleh target, desain Anda perlu diganti dengan perkiraan terdekat yang akan tersedia. (Untungnya ini semakin menjadi masalah bagi desainer web.)

• Berapa lama waktu yang Anda anggarkan?
  Bisakah Anda mendapatkan lebih banyak jam kerja di Konstruksi untuk mencapai efek yang Anda inginkan? Jika tidak, dapatkah Anda mendesain ulang fitur dalam waktu yang lebih singkat?

• Berapa banyak basis kode yang harus di refactored untuk mengakomodasi visual Anda?
  Jika Desain dan Konstruksi terjadi secara bersamaan, atau jika Anda melakukan reskinning aplikasi warisan, seberapa sulitkah coders untuk memasukkan visual Anda? Bukan hanya jam yang terlibat untuk melakukan penulisan ulang, tetapi potensi jam debugging dan mempertahankan kode yang baru diubah.

Ada beberapa tumpang tindih antara poin-poin di atas, dan beberapa poin lainnya yang tidak terdaftar. Intinya adalah bahwa, bahkan dalam daftar pendek ini, ada biaya bisnis yang harus dipertimbangkan. Anda dapat menilai situasi dengan lebih efisien jika Anda memahami bagaimana sistem target sebenarnya bekerja.

Jika Anda memiliki pemahaman tentang batasan CSS atau HTML sebelum membuat desain Anda, Anda dapat membuat desain yang akan mengalir melalui fase Konstruksi tanpa masalah. Anda juga akan memiliki keyakinan bahwa desain Anda dapat diimplementasikan, dan kekuatan mengetahui perkiraan biaya. Ini selalu berguna untuk berada di pihak Anda.

Dalam pengalaman saya (saya seorang pembuat kode, bukan seorang desainer), tidak begitu banyak pertanyaan bahwa desainer web harus tahu tentang kode. Tetapi mereka harus tahu tentang bagaimana pekerjaan mereka diterapkan di dalam browser.

Masalah terbesar dengan desainer tanpa pengetahuan yang cukup tentang web / browser adalah bahwa mereka menciptakan desain yang terlihat indah, tetapi tidak benar-benar berfungsi di dalam browser. Hanya beberapa hal yang beberapa mungkin tidak dipertimbangkan:

• Penggunaan font. Mereka menggunakan font yang dipasang dengan PhotoShop mereka, yang rata-rata tidak dimiliki pengguna. Atau mereka menggunakan font Mac, yang tidak ada di Windows / Linux.
• Kurangnya rasa hormat terhadap ukuran layar / browser. Desain tidak dimaksudkan untuk ditampilkan di komputer yang lebih kecil. Karena notebook / tablet yang lebih kecil menjadi lebih populer, kebutuhan untuk mempertimbangkan ukuran layar yang lebih kecil menjadi lebih penting.
• Apa yang harus terjadi ketika Anda mengubah ukuran layar browser? Perancang telah memperhitungkan apa yang harus terjadi dengan desain ketika browser diubah ukurannya.
• Bagaimana dengan scroll bar. Desain biasanya dilengkapi dengan placeholder "lorem ipsum". Bagaimana jika banyak teks masuk ke placeholder itu dan kita perlu scroll bar, di mana kita harus meletakkannya.
• Banyak gambar. Beberapa desain mengharuskan Anda untuk memotong banyak png. Ini dapat menyebabkan waktu respons yang lama dari server web karena halaman awal mengharuskan browser untuk mengunduh semua png ini.

Ini adalah masalah yang saya lihat ketika bekerja dengan desainer. Ini bukan masalah tentang perancang yang tidak tahu apa-apa tentang kode. Tetapi masalah tentang tidak memikirkan bagaimana desain digunakan.

Pemahaman yang lebih luas tentang medium yang sedang digarap selalu membuat seseorang menjadi seniman dan pengrajin yang lebih baik di ranah itu.

Banyak desainer web yang tidak tahu pengembangan ujung depan sulit untuk bekerja tanpa banyak karena mereka adalah desainer web yang buruk tetapi karena mereka sama sekali bukan desainer web. Mereka adalah desainer grafis dengan latar belakang cetak dan berusaha membuat brosur dan poster daripada situs web yang sebenarnya.

Ini seperti menyewa penata taman untuk merombak kamar mandi Anda. Mereka memiliki perasaan desain, dan mungkin memahami beberapa dasar, tetapi kemungkinan mereka jauh lebih baik dalam lansekap halaman depan Anda daripada di ubin kamar mandi Anda.

Satu dekade yang lalu ketika sebagian besar situs web masih dibangun seperti jalur perakitan lantai pabrik, bukan masalah untuk meminta satu orang melakukan PSD, orang berikutnya membuat HTML dan selanjutnya menambahkan DB, dll.

Namun belakangan ini, pembuatan web paling progresif dilakukan dengan proses yang gesit dan tim-tim tersebut beragam dengan banyak metodologi pengalaman pengguna yang ditambahkan, peningkatan progresif, sistem back end dan front end yang terintegrasi, konsep-konsep seperti desain web reaktif yang diombang-ambingkan, dll. Dengan demikian, banyak proses desain harus terjadi dalam kode . Baik itu pembuatan prototipe, pengujian pengguna, desain berulang, atau apa pun yang Anda miliki, kodenya adalah medium dan tim perlu memahaminya.

Tidak, tidak semua orang di tim harus dapat menulis plugin jQuery. Tetapi tim setidaknya harus tahu siapa mereka dan Tim Web / UX harus memiliki orang-orang yang BISA menulisnya, karena pada akhirnya, apa pun yang dirancang harus dibangun.

Iya nih. Seorang seniman harus memahami media tempat ia bekerja, baik itu seorang pelukis dengan minyak dan kanvasnya, seorang pemahat dengan marmer dan pahatnya, atau seorang desainer web dengan HTML dan CSS-nya.

Saya dulu bekerja di industri videogame. Perancang permainan terbaik adalah orang-orang kreatif dengan kemampuan teknis yang kuat yang memahami keterbatasan medium yang terus berubah dan dapat merancang untuk itu. Orang-orang yang tidak dapat melakukan hal itu secara berlebihan dan implementasi visi mereka yang dipermudah berakhir dengan penghisapan.

Baru-baru ini saya melakukan pengembangan web di mana latar belakang desainer sepenuhnya di media cetak. Hasilnya adalah halaman yang agak indah, yang akan sangat fantastis di media cetak, tetapi bekerja dengan buruk sebagai situs web.

Bagi saya, pelepasan desainer / pengembang adalah sesuatu yang terjadi bertahun-tahun yang lalu, tetapi kemudian orang-orang menyadari bahwa desain web lebih dari sekadar melakukan mockup.

Bagi saya, ketika seseorang menyebut diri mereka seorang desainer web, saya berharap:

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

Bagi saya, seorang desainer web adalah seseorang yang dapat membuat sisi klien dari sebuah situs.

Seorang perancang web yang baik akan memiliki semua ini, dan pemahaman tentang bagaimana pilihan yang mereka buat selama proses desain mempengaruhi UX situs.

Ketika seseorang mengatakan pengembang web, saya berharap:

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

Sebuah baik pengembang web akan memiliki semua ini, dan dapat memahami bagaimana pilihan arsitektur ia membuat akan mempengaruhi ujung depan situs dan fungsi terkena pengguna.

Anda juga mendapatkan orang yang berspesialisasi dalam UX dan area lain yang lebih horizontal daripada desain web, karena mereka berlaku untuk sejumlah lingkungan pengembangan yang berbeda.

sunting: Jika ada yang punya contoh grup desain yang baik yang memisahkan desain grafis dari desain web saya akan sangat tertarik.

Desainer harus memiliki gagasan tentang cara kerja pengkodean. Terkadang ini satu-satunya cara untuk mencegah pengembang front-end mereka melakukan pembunuhan . Untuk memperoleh gagasan itu, pengalaman langsung mungkin merupakan cara termudah.

Memang ada yang lain, tetapi tidak ada salahnya bisnis Anda untuk belajar memprogram sedikit Javascript. (Sebenarnya kali berubah dan ada legiun dari orang-orang dengan keterampilan desainer yang dapat javascript jalan keluar dari DOM mereka, tapi itu cerita yang berbeda)

Pikiran umum saya:

• Pengembang web front-end harus berurusan dengan backend yang mengerikan dan banyak tingkat keanehan untuk mengganggu seluk-beluk desain Anda. Sebagian besar kekhasan tersebut disebabkan oleh pilihan buruk backend pre-fab pada bagian manajemen dan mencuri banyak waktu untuk berurusan.

• Desainer web saat berurusan dengan orang-orang yang stres seperti itu mempertaruhkan hidup mereka , terus-menerus. Dan harus mempertimbangkan beberapa masalah front-end dengan pertimbangan serius, daripada menjatuhkan desain di atas meja mereka dan lari berteriak ke kantor "Aku sudah selesai, aku sudah selesai, mulai sekarang ini semua kesalahan dev! "

• Toko desain harus terbakar.

Tergantung di mana Anda bekerja.

Jika Anda bekerja untuk perusahaan besar, maka ini semua bisa menjadi peran individu:

1. UX atau Spesialis Arsitektur - merencanakan arsitektur / organisasi informasi situs / membuat gambar rangka

2. Desainer - mendesain situs menggunakan photoshop atau alat lain

3. Pengembang Front End - melakukan html / css / javascript / json / xml / dll. dan menulis kode templating yang mengintegrasikan ujung depan dengan belakang

4. Pengembang Back End - melakukan pemrograman yang membuat semuanya benar-benar bekerja secara dinamis

Sebagian besar tempat tingkat menengah mengharuskan desainer untuk menangani keputusan UX juga. Tetapi tempat yang lebih kecil mungkin membutuhkan perancang untuk melakukan semua 3 hal di atas. Namun ujung depan adalah area yang rumit dan ada orang-orang dari berbagai keterampilan di dalamnya. Jika Anda seorang desainer yang perlu melakukan front end, Anda pasti tidak diharapkan untuk tahu lebih banyak daripada HTML / CSS dan JQuery atau beberapa karya frame lainnya. Mengharapkan seorang desainer untuk mengetahui aspek javascript yang lebih dalam dan integrasi back end terlalu banyak bertanya.

Tentu saja jika Anda lepas, Anda harus tahu dan melakukan semuanya sendiri;)

Saya pikir desainer web harus tahu HTML / CSS - bahkan jika itu hanya terbatas pada dasar-dasar - demi dapat membuat desain web dan antarmuka web yang berfungsi pada media.

Desainer web dapat memilih untuk tidak menulis HTML / CSS sendiri, tetapi mengetahui bagaimana markup dan CSS berfungsi sangat penting untuk menjadi seorang desainer web. Desainer web mungkin tidak perlu menjadi ninja HTML / CSS, tetapi ini bermanfaat bagi mereka untuk mengetahui (setidaknya) bagaimana comps tata letak web mereka dikonversi ke situs web.

Apakah desainer web perlu tahu cara membuat kode?

Ya, desainer Web harus berurusan dengan perangkat lunak seperti Adobe Photoshop, Illustrator, dan InDesign untuk membuat desain untuk web. Kemudian desain ini berkaitan dengan pengkodean untuk membuatnya online. Dan untuk itu, sangat penting bagi perancang web untuk memahami komponen desain yang ada untuk mewakili sebagai pengkodean. Untuk itu, mereka harus memiliki pengetahuan tentang pengkodean, tidak sepenuhnya memahami tetapi dengan dasar-dasar.

Secara pribadi, itu semua tergantung pada keterampilan dan persyaratan Anda. Keterampilan untuk dapat belajar dan memahami hal-hal dengan cepat. Persyaratan menjadi keuangan. Mempelajari sesuatu akan membutuhkan waktu., Dan itu akan membunuh produktivitas Anda untuk saat ini.

Jadi, jika Anda memiliki banyak waktu untuk membunuh, silakan belajar kode.

Saya telah menjadi desainer selama empat tahun terakhir dan saya pandai mengedit hal-hal dasar. Saya hanya tidak punya cukup waktu untuk belajar kode cara pro.