Panduan profesional untuk desain UI

Pengarang: Randy Alexander
Tanggal Pembuatan: 25 April 2021
Tanggal Pembaruan: 16 Boleh 2024
Anonim
Learn UI Design for Mobile Apps like a PRO! - Figma Tutorial
Video: Learn UI Design for Mobile Apps like a PRO! - Figma Tutorial

Isi

Ketika saya memulai karir saya, saya adalah seorang desainer web. Saya bekerja dalam desain web selama empat tahun, dimulai dengan situs bisnis kecil dan akhirnya beralih ke klien yang lebih besar. Saya menemukan bahwa bukan desain grafis yang membuat saya tertarik, atau bekerja untuk nama merek yang lebih besar. Saya lebih tertarik pada pola penomoran halaman, cara orang berinteraksi dengan formulir, dan hal-hal seperti kinerja yang dirasakan, daripada desain visual halaman web.

Ketika saya menonton film sci-fi, saya akan melihat antarmuka. Dan ketika saya memainkan videogame, saya akan mengamati cara menunya ditata. Jika salah satu dari ciri-ciri ini terdengar asing bagi Anda, Anda mungkin juga seorang desainer UI.

Saya berhenti dari pekerjaan agen saya dan memulai perusahaan saya sendiri. Di halaman LinkedIn saya, saya mencoba merangkum tujuan karier baru saya: membuat perangkat lunak terbaik. Sudah empat tahun sejak saya memulai sebagai pekerja lepas, dan perjalanan saya tidak berhenti. Hari-hari ini saya membantu menjalankan perusahaan desain UI kecil bernama Mono. Kami baru-baru ini menyambut anggota tim keempat kami.


Dalam artikel ini saya ingin menjelaskan bagaimana rasanya menjadi seorang desainer UI, termasuk apa sebenarnya pekerjaan tersebut, di mana menemukan sumber belajar terbaik, dan bagaimana menjadi lebih baik dalam keahlian Anda.

Apa yang dilakukan desainer UI?

Saya menemukan bahwa secara umum Anda dapat membagi pekerjaan perancang antarmuka pengguna menjadi empat kategori. Anda berkomunikasi dengan klien, Anda melakukan penelitian, Anda merancang dan membuat prototipe, dan Anda berkomunikasi dengan pengembang. Mari kita lihat masing-masing fase ini secara lebih mendetail.

Komunikasi klien

Komunikasi klien adalah tentang memahami masalah klien. Tujuannya adalah untuk memahami bisnis klien Anda, jadi awal proyek biasanya membutuhkan banyak pembicaraan. Tidak apa-apa untuk tidak mengetahui terlalu banyak tentang domain klien Anda saat Anda memulai - Anda dapat melihat bisnis mereka dengan cara yang baru sementara Anda membayangkan kemungkinan solusi desain.


Untuk menjadi perancang UI yang baik, Anda harus mampu memikirkan bisnis klien Anda pada akhirnya. Misalnya, klien Anda mungkin berada di bidang penerbangan. Bekerja untuk mereka pada akhirnya akan membuat Anda memiliki pengetahuan yang cukup tentang industri tersebut. Jadi, tip untuk kebahagiaan Anda sendiri di sini adalah memilih industri tempat Anda bekerja dengan bijak, sehingga Anda tidak berakhir menjadi ahli dalam sesuatu yang tidak Anda pedulikan atau tidak Anda minati.

Selama proyek berlangsung, komunikasi tidak berhenti. Sebagai seorang desainer, Anda akan terus menerus mempresentasikan karya Anda. Di perusahaan kami, kami adalah tim jarak jauh, jadi kami tidak memiliki banyak pertemuan langsung. Alih-alih, kami memanfaatkan banyak berbagi layar melalui konferensi video. Alat komunikasi seperti Skype dan Slack digunakan setiap hari.

Berguna untuk menggabungkan metode komunikasi sinkron dan asinkron. Panggilan bagus jika Anda membutuhkan banyak informasi dengan cepat, tetapi Anda harus berada di sekitar pada waktu yang sama. Kami menganggap Slack sebagai 'pendingin air virtual' kami dan menggunakan Basecamp untuk mengelola proyek desain yang kompleks. Saat kami mendesain prototipe menggunakan HTML dan CSS, kami menggunakan Masalah GitHub untuk mendiskusikan kode secara langsung.


Penelitian

Selain komunikasi klien, Anda akan melakukan banyak penelitian. Ini dapat mencakup studi lapangan, lokakarya dengan klien, menganalisis persaingan atau menentukan strategi - pada dasarnya, hampir semua hal yang membantu Anda memahami masalah yang dihadapi.

Riset adalah yang menginformasikan pilihan desain Anda. Ini adalah artikel yang pernah Anda baca, atau hal baru yang baru saja dirilis Apple. Jika sudah waktunya menjelaskan mengapa Anda membuat pilihan desain tertentu, penelitian Anda mendukung Anda.

Penelitian bisa sangat luas. Saya sering menguji perangkat baru untuk tujuan penelitian atau mendaftar ke aplikasi web baru untuk mempelajari antarmuka penggunanya.

Desain dan pembuatan prototipe

Sebagai seorang desainer, Anda kemungkinan besar akan menghabiskan sebagian besar waktu Anda melakukan pekerjaan desain dan pembuatan prototipe. Proyek desain UI dapat bergerak maju dalam berbagai cara, mulai dari membuat sketsa, desain mendetail, hingga pengkodean.

Metode yang Anda gunakan sangat bergantung pada jenis proyek. Apa yang Anda rancang? Apakah ini situs web, atau Anda lebih suka menyebutnya sebagai aplikasi? Apakah itu menggunakan teknologi asli? Apakah ini desain ulang atau Anda memulai dari awal?

Di perusahaan kami tidak ada proses tetap, tetapi sebagian besar proyek mengikuti urutan kasar yang sama: dimulai dengan sketsa dan gambar rangka, berlanjut ke desain visual dan interaksi yang terperinci, dan diakhiri dengan prototipe.

Sebagai desainer, kami menghabiskan banyak waktu untuk memikirkan alat kami. Meskipun alat yang hebat itu penting, itu bukanlah hal yang paling penting. Mampu menggunakan Adobe Creative Suite dan aplikasi seperti Sketch secara kompeten sama dengan menggunakan pensil untuk menggambar atau kuas untuk melukis. Anda masih perlu membuat lukisan.

Meski begitu, minat yang sehat pada alat adalah hal yang baik. Saya suka mencoba alat baru yang dapat membantu saya menjadi lebih produktif. Alat pengeditan vektor favorit saya adalah Illustrator, tetapi sebagian besar pekerjaan desain visual saya dilakukan di Sketch akhir-akhir ini. Anggota tim lain telah beralih ke alat yang lebih baru seperti Affinity Designer.

Alat adalah pilihan yang sangat pribadi. Selama kita bisa bekerja sama dengan mudah, semua orang bebas memilih sendiri. Untuk mempermudah pembicaraan tentang desain kami dengan klien, kami membuat prototipe dengan InVision. Untuk pembuatan prototipe yang lebih canggih, kami menggunakan HTML dan CSS. Alat yang Anda butuhkan semuanya tergantung pada pekerjaan yang ingin Anda lakukan dengannya.

Komunikasi pengembang

Bagian yang sering dilupakan dari karya desainer UI adalah komunikasi pengembang. Hari-hari ini Anda tidak bisa lepas hanya dengan mengirimkan desain Anda ke pengembang dan berharap desain tersebut diterapkan dengan benar. Desainer terbaik tahu bahwa tantangannya bukan dalam menciptakan desain, tetapi dalam mengkomunikasikannya - tidak hanya kepada pemangku kepentingan yang harus memberikan persetujuannya, tetapi juga kepada pengembang yang harus menerapkannya.

Mengkomunikasikan desain datang dalam berbagai bentuk: spesifikasi terperinci, penyediaan aset, peninjauan desain bersama-sama. Apa yang masuk akal untuk disampaikan di setiap contoh sangat bergantung pada apakah proyek tersebut asli atau aplikasi web.

Pendekatan tradisionalnya adalah memberikan aset di samping desain layar. Desain layar dapat digunakan untuk melihat seperti apa desain secara keseluruhan, sementara asetnya adalah ikon PNG dan SVG yang siap digunakan, sehingga pengembang tidak perlu berurusan dengan editor grafis.

Di perusahaan kami, kami mendukung memberikan lebih dari itu. Kami menggunakan panduan gaya komponen untuk membantu menjaga konsistensi dalam desain kami. Saat kami berurusan dengan proyek web, kami memberikan kumpulan HTML dan CSS yang mendetail, didokumentasikan sedikit demi sedikit, siap untuk diterapkan. Saya percaya bahwa memiliki mata desain dalam setiap fase pengembangan perangkat lunak adalah satu-satunya cara untuk mencapai tujuan saya dalam membuat perangkat lunak kelas dunia.

Aplikasi web vs aplikasi asli

Saat Anda mendesain aplikasi asli untuk sebuah platform (mis. IOS atau Android), Anda cenderung untuk mematuhi pedoman tertentu. Saat Anda mendesain untuk web, tidak banyak panduan yang tersedia. Apa yang biasanya terjadi adalah klien Anda memiliki seperangkat pedoman grafis untuk merek mereka yang menentukan bagaimana sesuatu harus terlihat.

Namun, pedoman ini cenderung disesuaikan dengan situs web pemasaran, dan apa yang ada di dalamnya tidak selalu mengarah pada keputusan antarmuka pengguna yang baik. Font cenderung dipilih karena alasan pemasaran, bukan karena alasan keterbacaan. Warna mungkin berani dan mencolok, yang berfungsi di kampanye iklan, tetapi tidak di aplikasi yang Anda gunakan sehari-hari. Panduan ini harus ditafsirkan.

Ada beberapa pedoman UI untuk web. Anda dapat berargumen bahwa web adalah tempat peleburan berbagai gaya. Jika Anda membuat sesuatu yang terasa lebih seperti aplikasi daripada situs web, Anda perlu tahu tentang kerangka kerja yang banyak digunakan seperti Bootstrap dan ZURB Foundation. Kerangka kerja mulai menentukan bagaimana segala sesuatunya terlihat, karena Anda tidak ingin menciptakan kembali kemudi. Dan itu mungkin hal yang bagus.

Di perusahaan kami, kami suka menggunakan Bootstrap. Ini memberikan ukuran default yang masuk akal untuk elemen UI umum seperti tombol, tabel data, dan modals.

Dalam desain web, Anda lebih dibatasi oleh kapasitas teknis web. Dulu akan sulit menerapkan perkembangan visual sederhana seperti sudut membulat di situs web. Hari-hari ini sudah lama berlalu - Anda sekarang bebas menggambar antarmuka pengguna dengan banyak bayangan, transisi, animasi, dan bahkan 3D.

Sebagai seorang desainer, jauh lebih realistis untuk mengontrol proses dan desain di browser. Saya belum melihat banyak desainer UI mengambil alih pemrograman UI aplikasi asli, tetapi desainer yang melakukan HTML dan CSS aplikasi web adalah hal yang biasa. Jika Anda dapat membuat kode desain Anda sendiri, Anda akan memiliki keunggulan dibandingkan rekan non-pengkodean Anda, dan bagi saya itu satu-satunya cara untuk benar-benar memahami cara kerja web.

Batasan web

Anda akan segera mengetahui bahwa tidak semua trik keren yang Anda pelajari didukung di setiap browser, dan itulah realitas mendesain untuk web. Mengikuti prinsip-prinsip yang terkenal seperti penyempurnaan progresif adalah hal yang baik, di mana Anda memuat konten yang disempurnakan jika memungkinkan, tetapi juga memikirkan tentang bagaimana konten mengalami penurunan kualitas.

Belakangan ini, 'memotong sawi' menjadi populer. Diperjuangkan oleh tim web BBC, ini melibatkan pembedaan antara peramban 'baik' dan 'buruk', dan memberikan pengalaman terbatas pada peramban 'buruk'. Namun, ini benar-benar hanya berfungsi untuk situs konten.

Dalam hal pengalaman seperti aplikasi, banyak orang membatasi dukungan hanya untuk beberapa browser terkemuka, untuk membuat pengembangan lebih mudah. Sayangnya, hal ini membawa kita kembali ke situasi tahun 1996 di mana Anda memerlukan browser tertentu untuk melihat konten.

Meningkatkan keahlian Anda

Jadi, bagaimana Anda mengikuti perkembangan industri web yang bergerak cepat dan meningkatkan keahlian Anda? Mari kita lihat beberapa metode berbeda untuk meningkatkan keterampilan Anda ...

Pengetahuan platform

Bagian utama dari persenjataan desainer adalah pengetahuan platform. Anda harus tahu tentang berbagai sistem operasi, dan bagaimana orang menggunakannya. Sebagai desainer, kami cenderung menggunakan Mac, tetapi kemudian mudah untuk melupakan bahwa sebagian besar orang di luar sana menggunakan kotak Windows untuk menyelesaikan pekerjaan mereka.

Saya merasa Anda hanya dapat benar-benar memahami sesuatu jika Anda menggunakannya sendiri. Saya lebih suka menggunakan Mac saya untuk mendesain, tetapi menghabiskan banyak waktu untuk mengejar evolusi berbagai platform lainnya. Saya memiliki beberapa salinan Windows yang diinstal di Mac saya sebagai mesin virtual. Saya sibuk menguji versi baru Windows 10 menggunakan Program Insider Microsoft untuk memeriksa berbagai perubahan di UI.

Saya juga secara teratur membeli perangkat keras baru untuk menguji cara kerjanya. Saya membeli Apple Watch hanya untuk menguji platformnya. Saya kemudian menjualnya karena saya merasa itu tidak menambah banyak hal dalam hidup saya.

Selanjutnya, web dapat dilihat sebagai sistem operasinya sendiri. Ini terus berkembang, dengan fitur baru ditambahkan ke setiap vendor browser setiap minggunya. Sangatlah bermanfaat untuk mengetahui tentang aspek teknis browser, terutama tentang CSS dan kemampuan grafis. Anda perlu mengetahui apa itu SVG dan WebGL, dan bagaimana Anda dapat menggunakan Web Animations API.

Setiap platform berkembang seiring waktu dan sebagai perancang antarmuka pengguna, tugas Anda adalah untuk selalu mengikuti perkembangan. Bagaimanapun, apa pun yang Anda rancang tidak hidup dalam isolasi, tetapi merupakan bagian dari ekosistem perangkat lunak yang lebih besar.

Kembali ke dasar

Apa yang kita perjuangkan hari ini tidak jauh berbeda dengan apa yang kita perjuangkan 20 tahun lalu. Ada banyak sekali nasihat bagus dalam buku. Coba Desain Defensif untuk Web oleh Jason Fried dan Matthew Linderman dan Jangan Make Me Think oleh Steve Krug sebagai permulaan.

Jika Anda tidak tahu tentang konsep seperti modalitas dan kemampuan, Anda perlu membaca. Anda harus bisa menjelaskan apa itu hukum Fitts. Hukum kedekatan Gestalt? Ini adalah inti dari desain UI.

Dapatkan inspirasi dari game dan film

Sebagai desainer UI, saya memanfaatkan sumber inspirasi lain untuk melakukan pekerjaan saya. Saya menemukan banyak inspirasi dalam game. Beberapa game sangat kompleks, dan desainer UI harus memecahkan masalah antarmuka kompleks yang sama seperti desainer UI yang mengerjakan proyek bisnis.

Game juga bisa menandakan tren. Minimalis yang ditemukan di menu Colin McRae Rally mengingatkan saya pada arah iOS7. Bisa dibilang, desain animasi UI yang kini sedang trendy muncul di game bertahun-tahun lalu. Perpindahan dari skeuomorphism ke antarmuka fungsional yang telanjang dan 'desain datar' juga terlihat dalam game. Bandingkan Oblivion 2006 dengan Skyrim 2011. Kedua game tersebut adalah RPG dalam seri yang sama, tetapi perbedaannya mencolok.

Antarmuka futuristik dalam film Marvel seperti Iron Man juga menjadi inspirasi bagi saya. Mereka sebenarnya bukan contoh yang dapat digunakan, tetapi membuat saya lebih memikirkan tentang komputasi secara keseluruhan. Apakah kita menginginkan masa depan layar, atau kita ingin layar menghilang? Ini mungkin pertanyaan yang bagus untuk diajukan di pub yang penuh dengan desainer.

Anda tumbuh sebagai desainer melalui kerja keras, ketekunan, berbicara dengan teman, dan banyak membaca. Sekitar setahun yang lalu saya membaca sebuah artikel di New York Times tentang orang-orang berusia 80-an yang terus mengasah keterampilan mereka. Saya merasa seperti saya baru memulai. Bagaimana dengan anda

Postingan Populer
Cara menggunakan warna untuk membuat ilustrasi Anda menonjol
Membaca

Cara menggunakan warna untuk membuat ilustrasi Anda menonjol

Perlakuan warna dalam ilu tra i adalah uru an pribadi, dan tidak boleh ada dua ilu tra i yang diperlakukan ama. Warna, jika digunakan dengan benar, dapat menarik beberapa pukulan vi ual yang kuat yang...
Speaker merampingkan tata letak situs untuk meningkatkan kecepatan
Membaca

Speaker merampingkan tata letak situs untuk meningkatkan kecepatan

Beberapa de ainer web, terutama mereka yang terkenal dalam indu tri ini, mera a perlu untuk membuat emacam pernyataan de ain ketika mereka mende ain ulang itu pribadi mereka; ering kali menggabungkan ...
Di balik layar ilustrasi 3D petualang ini
Membaca

Di balik layar ilustrasi 3D petualang ini

ebagai manajer produk di tim pengembangan aplika i di China, Luoqin menciptakan eni 3D re olu i tinggi ebagai hobi dan mengatakan bahwa kecintaannya pada CG dan emua mahakarya CG yang hebat mendorong...