Lihat antarmuka "melalui mata desainer": tentang interaksi front-end dengan desainer

Perancang antarmuka dan pengembang antarmuka adalah spesialis yang berbeda, tetapi tugas mereka terkait erat. Sedemikian rupa sehingga perancang cerdas memahami dasar-dasar tata letak, dan programmer tahu prinsip-prinsip desain yang baik. Ini membantu untuk menghindari kesalahpahaman dan mendapatkan hasil yang diharapkan. Detail mengatakan Vladimir Sinitsyn, kepala Desain dan UX di Netologi.

Hai Berikut adalah dua alasan utama mengapa pengembang front-end perlu mengetahui dasar-dasar desain.

Alasan pertama. Frontender dan desainer memecahkan masalah umum


Perancang membuat tata letak, dan pengembang front-end mengubahnya menjadi antarmuka situs penuh. Produk berkualitas tinggi diperoleh ketika kedua spesialis memahami esensi dari pekerjaan masing-masing.

  • Perancang harus memahami dasar-dasar tata letak dan CMS (jika ia membuat tata letak untuk sistem kontrol). Hal ini memungkinkan untuk mendefinisikan batasan teknis dengan lebih baik dan betapa sulitnya bagi front-end untuk mengimplementasikan ide tersebut.
  • Pengembang harus memahami dengan benar logika dan struktur tata letak, mencari tahu apa dan bagaimana cara kerjanya, bagaimana animasi ditampilkan, bagaimana interaksi antara elemen-elemen pada halaman terjadi. Karena ide-ide desainer tidak selalu jelas pada pandangan pertama.

Desainer sering berpikir tidak biasa dan menemukan solusi inovatif untuk antarmuka web situs. Lebih mudah bagi pengembang front-end untuk memahami logika perancang, memahami aliran pemikirannya.
Sistem kolaborasi dengan tata letak tidak selalu menyederhanakan pekerjaan. Sekarang sistem untuk membuat tata letak sangat dikembangkan sehingga perancang dapat mengirimkan ke front-endner semua informasi yang diperlukan tanpa pertemuan pribadi dan diskusi - hanya mengatur kerja bersama dalam program. Di satu sisi, ini menghemat waktu tim. Di sisi lain, pengembang perlu memahami ide kolega dan mencari tahu bagaimana desain tata letak bekerja. Kalau tidak, diskusi panjang dan perbaikan tidak bisa dihindari.

Cara membangun interaksi antara perancang dan pengembang: aturan dasar


Saya akan memberikan beberapa tips dari pengalaman pribadi tentang bagaimana membangun kerja sama dan membuat kerja tim nyaman.

Jika Anda seorang desainer dan menyiapkan tata letak, cobalah untuk menyederhanakan pekerjaan pengembang front-end:

  • Bekerja di grid. Ya, asimetri sebagai teknik sekarang menjadi populer, tetapi juga harus dituliskan dalam grid.
  • Ketik objek sebanyak mungkin dalam tata letak. Mengetik memfasilitasi dan mempercepat tata letak.
  • Tampilkan keadaan objek dalam interaksi.
  • Urutkan layer dan beri nama dengan nama yang ramah. Misalnya, lapisan header adalah header, lapisan tombol adalah tombol. Jadi pengembang akan dengan cepat mengetahui tata letak Anda.
  • Kumpulkan semua gambar, ikon, font, dan elemen lainnya di satu tempat sehingga Anda tidak perlu membuang waktu untuk mengekspor elemen dari tata letak.
  • Buat kit UI pada halaman terpisah dan perlihatkan semua status dan elemen.
  • Jangan terlalu malas mengomentari tata letak prototipe sebelum menyerahkannya ke vendor front-end - dengan cara ini seorang rekan kerja akan mengetahuinya lebih cepat.

Jika Anda adalah vendor front-end dan ubah tata letak menjadi antarmuka situs web:

  • Jangan ragu untuk bertanya kepada perancang jika ada sesuatu yang tidak jelas.
  • Jika Anda melihat dari pengalaman bahwa Anda perlu membuat perubahan pada tata letak, diskusikan dulu dengan perancang. Setiap perubahan harus disetujui.
  • Jika proyek tersebut merupakan proyek tim, pada tahap pertama pekerjaan, diskusikan dengan rekan kerja alat apa yang Anda rencanakan untuk digunakan dan cara terbaik untuk mentransfer tata letak kepada Anda untuk tata letak.
  • Jangan takut untuk mendiskusikan desain dan memberikan komentar yang membangun. Jika Anda melihat sesuatu tidak dapat direalisasikan, jelaskan mengapa dan apa yang bisa diganti.

Ketika setiap anggota tim memahami apa yang dilakukan rekan-rekannya dan bagaimana menyederhanakan tugas mereka, pekerjaan berjalan dengan lancar. Hasilnya adalah antarmuka yang berkualitas, dikirimkan tepat waktu.

Alasan kedua. Lebih mudah bagi pengembang yang tahu desain untuk mencari pekerjaan


Pengembang dengan pengetahuan desain yang baik dapat menjadi spesialis universal dan menutup dua posisi sekaligus.

Di mana desainer front-end dalam permintaan


Perusahaan besar bersedia membayar dua spesialis terpisah - pengembang dan desainer. Di segmen lain dari pasar situasinya berbeda - seringkali perusahaan lebih suka mempekerjakan spesialis universal yang sendirian dapat menutup banyak tugas.

Pembangun situs sekarang populer dan sebagian besar sistem CMS bekerja sebagai konstruktor. Dengan bantuan mereka, seorang programmer dapat membuat antarmuka yang sederhana, tetapi untuk membuat tata letak yang berkualitas, Anda masih membutuhkan keterampilan seorang desainer. Desainer secara masif menggunakan perusahaan kecil dan pelanggan pribadi. Lebih menguntungkan bagi mereka untuk menyewa spesialis universal yang akan membuat tata letak dan mengubahnya menjadi antarmuka dengan atau tanpa konstruktor. Situasi serupa terjadi dengan freelance.

Apa yang harus dipelajari tentang desain terlebih dahulu jika Anda adalah pengembang front-end


Saya langsung ingat ilustrasi yang bagus dari 20 prinsip desain dasar. Saya menyarankan Anda untuk mulai menyelam dengannya.


Pada tahap berikutnya, pahami dalam praktiknya alat pembuatan antarmuka: Figma, Adobe XD atau Sketch. Baca, lihat ulasan masing-masing dan pilih yang lebih dekat dengan Anda. Hal utama tidak terbatas pada manual. Perhatikan mereka dan segera latih keterampilan Anda dalam berlatih, tepat di alat.

Di masa depan, saya sarankan untuk memahami program 3D: Cinema 4D dan Adobe Dimension; dan animasi antarmuka: ProtoPie dan Adobe After Effect.

Tempat belajar


Di universitas. Saya tidak akan merekomendasikan universitas, mereka memberi terlalu banyak ekstra untuk memulai dengan cepat, dan pelatihan itu sendiri diperpanjang. Jika ini adalah pendidikan pertama Anda, maka Anda dapat pergi ke universitas demi ijazah. Mereka yang sudah memiliki pendidikan harus melihat ke arah intensitas (mereka diajarkan bahkan di beberapa universitas) atau kursus online.

Secara mandiri. Pendidikan mandiri cocok bagi mereka yang tahu cara menyaring dan menyusun informasi, memiliki ketekunan dan disiplin diri. Sekarang dalam domain publik ada terlalu banyak informasi yang tidak selalu diverifikasi dan berguna, di dalamnya Anda dapat menjadi semakin bingung dan menjauh dari keterampilan yang diperlukan.

Kursus online. Pilihan bagi mereka yang peduli untuk mendapatkan informasi terstruktur, instruksi, dan umpan balik dari guru.

Kiat


  • Pelajari dasar-dasar desain untuk lebih memahami tata letak dan mengubahnya menjadi antarmuka tanpa banyak diskusi dan penyempurnaan.
  • Pelajari desain secara mendalam untuk menjadi spesialis universal dan melamar posisi tidak hanya di perusahaan besar, tetapi juga di agensi digital, pemula, dan mencari pelanggan secara freelance.
  • Kuasai alat perancang bukan dengan manual, tetapi secara manual - buka program dan pahami.
  • Jika Anda siap memfilter informasi dan menemukan materi pelatihan yang berguna di Internet, pelajari sendiri desainnya. Jika Anda ingin mempercepat proses dan belajar dalam program yang terstruktur dan relevan, pilih kursus.

Jika Anda siap untuk mempelajari dasar-dasar desain web, kami mengundang Anda ke kursus baru di Netologi


Kami meluncurkan kursus " Desain Web dari Nol ke Tengah " dan kami mengundang pengembang front-end yang ingin menguasai antarmuka dengan tepat "dari sudut pandang perancang".
Empat setengah bulan pelatihan dalam format video, lokakarya, dan analisis pekerjaan rumah. Kami menggabungkan teori dengan praktik, dan juga menguasai alat utama perancang web.

Source: https://habr.com/ru/post/id465245/


All Articles