Konsep Pengembangan Web Semua Desainer Web Harus Memahami

Ada banyak yang bisa dikatakan tentang kesenjangan yang ditemukan antara desainer dan pengembang. Memang ada banyak desainer / pengembang hibrida yang bisa mengerti kedua sisi mata uang, tapi mereka sedikit dan jarang.

Proyek kreatif terus berkembang komunikasi yang tepat. Namun ini bisa sulit ketika perancang dan pengembang tidak yakin bagaimana caranya berbicara satu sama lain. Saya tidak berpikir desainer perlu tahu cara menulis JavaScript yang tepat, dan pengembang juga tidak harus menguasai pemilihan tipografi. Tetapi ada beberapa topik mendasar yang saya pikir berjalan dua arah.

Topik-topik berikut adalah pengalaman pribadi saya ide pengembangan web vital yang harus dipahami semua desainer. Sebagai seorang desainer / pengembang sendiri, saya tahu betapa membingungkannya mempelajari kedua area tersebut. Tapi itu selalu sepadan dengan usaha untuk belajar karena pemahaman yang jelas meningkatkan komunikasi dan membuat seorang desainer jauh lebih berharga bagi tim kreatif.

Perilaku Kode Frontend

Desainer web sering dianggap memiliki keterampilan frontend bersama dengan bakat desain mereka. Ini adalah topik yang hangat diperdebatkan, sebagian besar karena ada tidak ada jawaban yang benar.

Desainer harus melakukan apa yang mereka inginkan merasa nyaman dengan. Jika itu berarti hanya melakukan pekerjaan desain visual, maka jadilah itu. Namun pemahaman singkat tentang teknologi frontend dapat membuat desainer yang sama lebih intuitif saat membuat aset untuk pengembang.

Saya percaya setiap desainer setidaknya harus mengerti tiga bahasa dasar pengembangan frontend (HTML, CSS, dan JS) beserta cara penggunaannya. Sebagai contoh, sebagian besar menu dropdown mengandalkan JavaScript tetapi ada juga alternatif CSS saja.

Ketika seorang desainer sedang menyusun menu dropdown, mereka dapat memikirkan kompleksitas penerapannya melalui kode. Seorang desainer yang memahami elemen mana yang memerlukan JavaScript dapat lebih siap untuk memahami apa yang mereka minta untuk dibuat oleh pengembang.

Ini mungkin tanpa belajar menulis satu baris kode.

CSS dibuat untuk gaya situs web. Sebagian besar statis selain dari animasi CSS, dan CSS menciptakan mayoritas visual di sebuah halaman. Sebagian besar fitur dinamis dibuat dengan JavaScript.

Jika Anda dapat memahami pembagian ini, itu akan menghembuskan upaya sadar ke dalam karya desain. Ini juga akan memaksa desainer gerak UX untuk mempertimbangkan berapa banyak pekerjaan yang dilakukan untuk menjiwai antarmuka.

Teknik Responsif

Setiap desainer web setidaknya harus tahu istilahnya desain responsif. Ini memungkinkan situs web untuk beradaptasi dengan berbagai ukuran layar, yang masing-masing memiliki tata letak yang berbeda. Dimensi perangkat saat tata letak baru diterapkan didefinisikan oleh breakpoints, menambahkan (salah satu) file CSS.

Breakpoint ditentukan oleh a lebar piksel tertentu (dan / atau terkadang tinggi), baik minimum atau maksimum, di mana tata letak beradaptasi agar sesuai dengan ukuran layar itu. Jadi tata letak yang responsif akan terlihat berbeda pada monitor 1080px daripada pada smartphone 320px.

Untuk melihat bagaimana breakpoints bekerja di situs nyata, periksa situs web Media Queries.

Tugas Anda sebagai perancang adalah mempertimbangkan bagaimana setiap breakpoint mungkin mempengaruhi maket itu. Anda mungkin ditugasi merancang beberapa komputer, masing-masing pas ke dimensi layar yang berbeda.

Setelah Anda memahami bahwa breakpoint CSS menentukan kondisi saat tata letak berubah, Anda akan memiliki waktu yang jauh lebih mudah mengirimkan aset ini ke tim pengembang.

Pikirkan Modular Dengan Desain

Pengembang selalu menginginkannya menggunakan kembali kode sebisa mungkin, karena pendekatan ini membuat pengembangan kurang bertele-tele dan mengurangi ukuran file - sebenarnya ini adalah teknik optimisasi kode yang penting.

Desain modular menjelaskan metode membuat situs web dari “modul” itu bisa digunakan kembali seiring waktu. Pikirkan tombol, input form, gaya tajuk, atau pemblokiran dengan gaya mewah.

Jika kamu elemen desain secara modular, menjadi lebih mudah bagi pengembang untuk membuat kode tata letak kelas CSS yang dapat digunakan kembali. Itu selalu ide yang baik untuk memikirkan di mana Anda bisa cukup digunakan kembali warna, tekstur, dan elemen halaman yang sama, namun Anda harus pintar tentang hal itu tidak membahayakan estetika keseluruhan.

Bahkan lebih baik jika Anda membubuhi keterangan elemen mana yang telah Anda salin di berbagai mockup, sehingga pengembang dapat tandai bagian-bagian situs ini dengan kode berulang - membuat pengembangan lebih cepat dan lebih sederhana.

Desain modular berhubungan dengan desain atom, kedua pendekatan tersebut lebih diarahkan pada pengembang. Namun visualisasi dapat membantu Anda memahami cara kode bekerja, jadi jika Anda kesulitan melakukannya memvisualisasikan desain modular lihat posting ini untuk melihat beberapa contoh.

Memahami Gambar Retina & SVG

Biasanya tugas desainer adalah menyiapkan gambar, mengambil foto yang diperlukan, dan mendesain ikon dari awal. Ini berarti desainer bertanggung jawab penuh atas hal ini memberikan aset visual bahwa pengembang akhirnya kode ke dalam tata letak. Inilah mengapa penting untuk dipahami ukuran retina dan untuk lulus aset yang didukung retina kepada pengembang bersama dengan mockup terakhir.

Saya akan sangat merekomendasikan posting Majalah Smashing ini jika Anda ingin mempelajari lebih lanjut tentang alur kerja desain retina. Retinize Ini adalah koleksi tindakan Photoshop gratis yang bisa secara otomatis membuat versi retina dari aset Anda.

Kebanyakan desainer sudah tahu untuk mendukung @ 2x gambar, tetapi perangkat iPhone 6+ yang lebih baru miliki @ 3x resolusi. Namun beberapa proyek tidak peduli dengan ukuran gambar @ 3x, jadi bicarakan dengan pimpinan proyek Anda sebelum menyelesaikan aset apa pun.

Satu hal terakhir yang perlu dipertimbangkan adalah kemajuan SVG di web. Semua browser modern mendukung SVG yang merupakan format gambar berbasis vektor. Ini berarti ikon SVG akan melakukannya secara otomatis skala tanpa kehilangan kualitas, jadi Anda tidak perlu aset retina untuk grafik SVG.

Namun, tidak semua tim kreatif bersedia menggunakan SVG untuk desain web. Mereka didukung oleh peramban tentu saja, tetapi dalam beberapa kasus mereka juga bisa sulit untuk diterapkan. Inilah sebabnya mengapa komunikasi sangat penting untuk hubungan desainer / pengembang yang sukses.

Diskusikan pro & kontra penggunaan grafik vektor dan putuskan apa yang paling cocok untuk setiap proyek. Dengan hanya memiliki pemahaman tentang fitur-fitur ini Anda akan dapat berkomunikasi dengan pengembang dengan jelas, dan bahkan membantu mereka membuat kode tata letak untuk dukungan retina.

Memahami Aksesibilitas

Peningkatan progresif dan degradasi anggun dua cara berbeda dalam menangani masalah yang sama: aksesibilitas. Tidak semua pengguna menggunakan perangkat atau menjalankan browser yang mendukung 100% fitur dinamis situs web.

Pengguna ini masih harus mendapatkan pengalaman yang berhasil, dan ini perlu ditangani dengan pengkodean yang tepat. Beberapa pembaca layar mungkin mengabaikan semua kode JavaScript dan CSS, tetapi situs web masih perlu berfungsi.

Saya baru-baru ini melakukan posting meliputi peningkatan progresif secara rinci, karena ini metode pengembangan pilihan saya. Peningkatan progresif dimulai dengan fitur yang sangat mendasar, kemudian bekerja hingga lebih banyak “maju” fitur.

Degradasi anggun adalah pendekatan yang berlawanan dimana semua fitur utama dirancang terlebih dahulu, maka pengembang memutuskan bagaimana menangani fitur-fitur ini jika pengguna tidak mendukung JavaScript atau CSS.

Tidak mungkin seorang desainer akan diminta untuk melakukan maket untuk situasi ini. Tetapi penting bahwa desainer memahami istilah-istilah ini dan apa artinya, karena mereka mempengaruhi proses pengembangan. Ini terutama berlaku untuk proyek-proyek di mana aksesibilitas menjadi perhatian besar.

Dalam Penutupan

Ada beberapa topik yang saya lewatkan karena saya anggap opsional. Kontrol versi, penanganan kesalahan, dan animasi JavaScript adalah beberapa topik yang lebih rumit yang mungkin ingin dibahas oleh para perancang.

Tapi sejujurnya, poin yang dibahas dalam posting ini akan lebih dari membantu desainer memahami persyaratan tim pengembangan. Dengan hanya membaca sekilas permukaan pengembangan web Anda akan mendapat wawasan yang akan membantu Anda mengkomunikasikan ide dan bersimpati dengan masalah yang terjadi selama produksi.

Jika Anda mencari lebih banyak konten terkait lihat posting ini:

Cara Berkomunikasi Secara Efektif dengan Pengembang (smashingmagazine.com)
Bantu Desainer dan Pengembang Belajar Memahami Satu Sama Lain (uie.com)
Belajar Kode Memberi Anda Keuntungan sebagai Desainer UX (jessicaivins.net)