Ada cukup banyak bidang yang terkait dengan desain di industri TI. Yang paling umum adalah desainer, tersembunyi di balik akronim UX dan UI. Beberapa orang bahkan berhasil memasukkan pengembang front-end sebagai desainer. Mari kita coba mencari tahu siapa saja desainer di dunia IT, apa perbedaan antara UI dan UX, dan apa hubungan yang harus dirancang oleh front-end engineer.
Desainer
Mengembangkan antarmuka aplikasi, situs web, atau permainan merupakan proses yang agak rumit dan memerlukan penerapan pengetahuan dari berbagai bidang: teknik, psikologi, dan desain. Perancang antarmuka pengguna (dalam bahasa Inggris - Antarmuka Pengguna atau UI) fokus pada cara fungsionalitas situs ditampilkan (pencarian, tab, menu) dan detail interaksi antara klien dan antarmuka. Tujuan seorang desainer UI adalah desain produk modern yang dapat diterima secara estetis . UX adalah singkatan dari User Experience, yang berarti “pengalaman pengguna”. Seorang desainer UX lebih fokus pada kegunaan dan pemahaman antarmuka oleh calon pengguna. Spesialis seperti itu akan sering melakukan penelitian dan survei yang akan menjadi dasar pembuatan konsep desain, dan juga menguji konsep selama dan setelah pengembangan. Biasanya berfokus pada struktur, konten, navigasi, dan cara pengguna berinteraksi dengan elemen-elemen ini.
Ini menghasilkan peta situs, prototipe, yang merupakan struktur dasar saat membuat perangkat lunak. Tujuan dari pekerjaan seorang desainer UX adalah agar pengguna dapat dengan cepat dan mudah mendapatkan tujuan kedatangannya dari situs ini . Namun, saat ini sangat umum melihat kedua spesialisasi ini ditulis dengan garis miring. Artinya, tugas kedua arah dilakukan oleh satu spesialis. Seorang desainer UX/UI mendesain interaksi pengguna dengan antarmuka, memutuskan apa yang sebenarnya perlu dia lakukan, dan bertanggung jawab atas tampilan antarmuka ini.
Apa yang perlu diketahui oleh desainer UX/UI
Editor grafis . Alat yang paling populer di pasaran adalah Adobe Photoshop, Adobe Illustrator, serta Sketch, Figma. Pilih editor yang nyaman bagi Anda dan pertama-tama cobalah menggambar tangkapan layar situs web atau aplikasi, modernkan sedikit.
Alat pembuatan prototipe (Mockplus, Axure) . Alat pembuatan prototipe adalah penghubung antara ide dan implementasinya. Tidak masalah alat apa yang Anda gunakan. Anda dapat mencoba beberapa dan memutuskan salah satu yang sesuai dengan gaya dan preferensi Anda.
Psikologi pengguna. Sudah pada tahap desain, Anda harus memikirkan apakah akan nyaman bagi Anda atau orang lain untuk menggunakan antarmuka ini. Tempatkan diri Anda pada posisi klien, bangun hubungan yang kuat dengannya dan perhatikan kebutuhannya. Bagaimanapun, suatu produk akan sukses jika ada permintaan terhadapnya.
Anda juga membutuhkan pengetahuan tentang teori warna . Beberapa hal kita ketahui sejak kecil, terutama mereka yang bersekolah di sekolah seni. Namun, ada beberapa hal spesifik mengenai karya desainer. Pengetahuan dasar dapat diperoleh dari buku atau artikel di Internet.
Bergantung pada spesifikasi pekerjaannya, Anda mungkin memerlukan pemahaman tentang HTML dan CSS atau (beberapa) bahasa pemrograman (tautan ke sumber daya dapat ditemukan di bawah, di bagian “Yang Harus Diketahui Pengembang Front-end”).
Pengembang ujung depan
Tugas utama pengembang front-end adalah mengembangkan bagian klien dari antarmuka. Artinya, spesialis seperti itu “merevitalisasi” apa yang dirancang oleh para desainer. Dia bertanggung jawab atas pengoperasian dan pengoperasian antarmuka dan lebih sedikit bertanggung jawab atas konten visual. Pengembang front-end sering kali perlu menemukan solusi yang baik untuk antarmuka pengguna selama tahap pengembangannya, sehingga ia sering berkolaborasi dengan desainer UX/UI. Kode yang ditulis oleh pengembang front-end berjalan di browser pengguna (seperti yang mereka katakan, "di sisi klien"). Selain itu, salah satu tugas terpenting adalah memastikan bahwa situs atau aplikasi web terlihat sama di semua platform dan browser.
Apa yang Harus Diketahui oleh Pengembang Front-end
Biasanya, front-end didasarkan pada tiga pilar: bahasa markup halaman HTML, style sheet CSS, dan bahasa pemrograman JavaScript. Selain itu, front-end developer harus memahami prinsip pengoperasian protokol HTTP, server dan browser, serta fitur tampilan antarmuka pada berbagai perangkat yang saat ini ada di pasaran. Alat dan metode untuk membuat antarmuka web terus berkembang dan berubah, sehingga pengembang harus terus memantau hal ini.
HTML dan CSS (tata letak)
Ini adalah tata letaknya, batu bata yang menjadi dasar pembuatan situs tersebut. Bahasa markup HTML menentukan organisasi situs, konten, dan semua interaksi di antara keduanya. Ini memungkinkan Anda untuk menentukan bagian atas halaman, bagian bawah, blok samping dengan konten, judul, tampilan teks dan elemen multimedia. Style sheet CSS digunakan untuk menghias elemen HTML. Mereka menentukan dengan tepat bagaimana setiap elemen grafis yang terletak di halaman ditampilkan. Dengan menggunakan HTML5 dan CSS3 versi terbaru, Anda dapat menempatkan komponen video dan audio pada halaman, membuat gambar dan animasi 2D, dan bahkan menulis game sederhana. Tidak perlu mengingat semua tag dan gaya sekaligus. Akan sangat membantu jika mempelajari dasar-dasarnya dan segera menerapkannya. Situs yang sangat bagus di mana Anda dapat mempelajari dasar-dasar HTML dan CSS adalah W3School. Tetapi hanya jika Anda memiliki setidaknya pengetahuan dasar bahasa Inggris.
Selain itu, pengembang front-end harus memahami pengembangan lintas browser dan lintas platform, tata letak adaptif dan responsif.
tali sepatu
Ini adalah kerangka kerja untuk HTML, CSS dan JavaScript. Artinya, templat tertentu yang darinya, seperti dari konstruktor, Anda dapat merakit situs jauh lebih cepat daripada tanpa templat tersebut. Namun tentunya Anda perlu menyesuaikannya sendiri dengan kebutuhan Anda. Jika Anda tahu bahasa Inggris, kami merekomendasikan situs web getbootstrap dan w3schools yang sama .
JavaScript
Javascript adalah inti dari pengembangan front-end. Ini adalah bahasa pemrograman antarmuka pertama dan paling luas. Itu dapat menambahkan banyak fitur ke situs. Pada tingkat dasar, bahasa ini memungkinkan Anda menambahkan elemen interaktif ke halaman. Ini digunakan untuk membuat peta yang diperbarui secara real-time, game online interaktif, dan film. Dalam kursus JavaRush senior kami, kami belajar sedikit JavaScript. Anda juga dapat mempelajarinya di W3School yang sama atau membacanya dalam bahasa Rusia di situs javascript.ru .
jQuery
jQuery adalah perpustakaan Javascript yang berisi plugin dan ekstensi yang dapat membuat pengembangan lebih mudah dan cepat. Daripada menulis kode dari awal, perpustakaan memungkinkan Anda menambahkan komponen siap pakai, yang kemudian dapat dikustomisasi untuk proyek tertentu. Anda dapat menggunakan fungsi pengisian otomatis formulir pencarian, mengatur ulang dan mengubah ukuran grid, dan mengatur penghitung waktu mundur. Kursus jQuery langsung di w3school
Kerangka kerja Javascript
Ada berbagai jenis kerangka kerja, tetapi Anda dapat memilih salah satu yang nyaman untuk Anda gunakan. Yang paling terkenal adalah Angular, Backbone, Ember, dan React. Mereka mewakili struktur kode yang sudah jadi. Mereka membantu mempercepat pembangunan. Dan jika dikombinasikan dengan perpustakaan, mereka dapat meminimalkan pengembangan situs web atau aplikasi dari awal. Tinjau 5 kerangka kerja dan perpustakaan JavaScript paling populer tahun 2017
Sistem kontrol versi Git
Sistem kontrol versi dapat melacak perubahan yang dilakukan pada kode seiring waktu. Mereka juga memungkinkan Anda untuk kembali ke versi proyek sebelumnya. Git adalah sistem kontrol versi yang paling banyak digunakan. Mengetahui cara bekerja dengan Git adalah keterampilan penting bagi setiap pengembang. Tutorial Git dalam bahasa Rusia
Kesimpulan singkat
UI adalah singkatan dari User Interface, yang berarti “antarmuka pengguna”. Artinya, Perancang UI terutama bertanggung jawab atas bagaimana produk disajikan kepada pengguna. Dia mengembangkan tombol, ikon, memilih font, dan menyiapkan tata letak. UX adalah singkatan dari Pengalaman Pengguna. Jadi seorang desainer UX merancang desain situs web, aplikasi - atau apa pun - sehingga pengguna merasa nyaman dan memahami apa itu, dan dia bisa mendapatkan apa yang dia butuhkan dari situs tersebut dengan sedikit usaha. Seringkali, kedua jenis pekerjaan tersebut dilakukan oleh satu orang orkestra: seorang desainer UI/UX. Pengembang Front-end meramaikan karya desainer dengan memperkenalkan dinamika ke dalamnya: tombol mulai ditekan, dan gambar mulai berubah. Dia harus mengetahui bahasa pemrograman, dibumbui dengan kerangka kerja, praprosesor, dan perpustakaan.
GO TO FULL VERSION