Perangkat Desainer: Alur Kerja, Perangkat Lunak, dan Situs Web

Diterbitkan: 2020-12-17

Sama seperti pengembang perangkat lunak, penulis konten, orang pemasaran dan sebagainya, desainer perlu memiliki perangkat yang baik untuk membantu mereka dalam menangani pekerjaan sehari-hari. Apa yang kami coba lakukan di sini adalah menguraikan alat, alur kerja, dan cara Anda dapat menggabungkannya untuk mempercepat pekerjaan Anda dan mengurangi kemungkinan kesalahan dan kesalahan.

Mengumpulkan informasi

Ketika sebuah proyek baru datang, beberapa jam pertama kebanyakan tentang mengumpulkan informasi tentang itu - masalah apa yang dihadapi klien, apa tujuan mereka, apa yang mereka sukai, dan sebagainya. Selama langkah penting ini, perancang harus mencoba untuk menjadi sebagai sebanyak mungkin data yang berguna, yang nantinya akan digunakan untuk membuat keputusan yang cerdas.

Evernote

Evernote adalah perangkat lunak yang luar biasa - ini bukan hanya aplikasi untuk membuat catatan. Itu dapat menyimpan file, menggabungkannya dalam koleksi, tag, grup, dll. Melalui pencariannya yang kuat, Anda dapat merujuk kembali ke proyek sebelumnya dan seterusnya. Tentu saja, sisi terkuatnya adalah bagaimana Anda menggunakannya. Mereka memiliki pedoman kasar untuk beberapa pendekatan organisasi.

Screenshot Halaman Beranda Evernote

Email, Slack, Zoom…

Berikutnya adalah satu lagi yang jelas, tetapi ada alasan mengapa kami menambahkannya - menunda panggilan, pesan atau video meeting bisa menjadi penundaan besar untuk sebuah proyek. Seringkali, kemampuan untuk berbagi layar dan memeriksa maket, gambar rangka, konsep dan desain adalah penyelamat hidup. Jangan pernah lupakan itu

Temukan Inspirasi

Jika informasi sudah cukup, langkah selanjutnya adalah mengumpulkan inspirasi - bagaimana seharusnya tampilan aplikasi / situs web, apa gayanya, apa tujuannya, dll. Adakah ide keren untuk menggunakan teknologi baru atau berbagai jenis media ? Semua desainer mencari inspirasi kiri dan kanan - situs web, buku, majalah, apa pun.

Dribbble, Behance, dan situs serupa

Untuk alasan inilah (dan bagi desainer untuk menyombongkan diri) situs web seperti Dribbble ada. Di sana, kita, desainer bisa menelusuri ide dan pendekatan yang memecahkan masalah yang sedang kita hadapi. Terkadang, tujuannya adalah untuk membangun "halaman penjualan umum untuk layanan A". Halaman penjualan itu benar-benar memiliki beberapa paragraf dengan foto stok. Benar-benar tujuan yang tidak menginspirasi, tetapi itu realistis. Kombinasi warna, tipografi, spasi, dll. Semuanya bisa sedikit lebih unik. Mungkin coba tata letak yang berbeda juga! Dan idenya bisa datang dari halaman arahan acak yang diposting 3-4 tahun yang lalu. Halaman Penemuan 99Design juga merupakan tempat yang bagus untuk melihat!

Screenshot Contoh Dribbble

Awwwards

Kami menempatkan situs seperti Awwwards dalam kategori terpisah karena situs tersebut benar-benar menampilkan sesuatu yang telah dibuat dan terlihat berfungsi. Dan terlebih lagi, ini lebih berfokus pada cara artistik, bukan pada “karya desain apa pun”. Seringkali, situs sangat berat sehingga hanya dapat digunakan pada mesin kelas atas, tetapi Anda masih bisa mendapatkan inspirasi darinya.

Palet warna / branding

Untuk bangunan baru, di mana tidak ada warna yang ditentukan sebelumnya, salah satu langkah untuk mulai bekerja adalah memilih sesuatu yang sesuai dengan situs baru. Ada dua cara untuk mendekatinya - pilih skema warna yang ada atau setel warna primer / sekunder dan kerjakan seluruh skema berdasarkan skema tersebut.

ColorHunt

Situs web seperti Color Hunt menyediakan koleksi palet warna buatan komunitas. Anda dapat memilih dan menggunakan salah satunya secara langsung atau memilih warna utama untuk memulai. Tidak secantik itu tetapi juga mirip adalah Pecinta Warna.

Screenshot Contoh Color Hunt

BrandColors

BrandColors memiliki tujuan yang sedikit berbeda - BrandColors menyediakan daftar merek utama dan skema warnanya. Anda dapat menemukan beberapa corak dan kombinasi hebat di sana yang dapat menginspirasi bangunan Anda. Warna tidak berada di bawah hak cipta apa pun, tetapi saran kami adalah bermain-main dengannya sedikit daripada menyalin-tempel semua warna dari tempat-tempat seperti Amazon misalnya.

Aset Premium dan Gratis

Tidak selalu ada cukup waktu untuk mengerjakan setiap komponen situs. Terkadang, yang terbaik adalah mengambil paket ikon, ilustrasi atau foto stok yang dibuat oleh desainer / fotografer lain dan menggunakannya secara langsung.

  • Font-Awesome - Koleksi ikon dalam bentuk font glyph
  • Envato Elements - Banyak pilihan aset berkualitas premium dengan harga yang bagus.
  • Unsplash - Koleksi besar foto berkualitas tinggi yang dapat digunakan secara gratis
  • Generator SVG seperti squircley, getwaves, blobmaker
  • Adobe Fonts (berbayar) dan Google Fonts (gratis)

Tip terbaik di sini adalah menemukan beberapa situs seperti ini di atas dan dekat dengannya, sehingga Anda mengurangi sebanyak mungkin waktu dan upaya yang harus Anda lakukan untuk mencari dan menemukan grafik terbaik untuk pekerjaan itu.

Alat Desain Utama

Dengan pekerjaan awal selesai, itu datang untuk benar-benar membangun desain. Karena semua perangkat lunak profesional untuk desainer memiliki semua alat yang diperlukan untuk membuat desain web / aplikasi, kami akan melewati alat wireframing.

Figma

Pilihan inti kami untuk pekerjaan desain di DevriX adalah Figma. Ini memberikan kemampuan kolaborasi yang hebat serta aplikasi berbasis browser yang dapat diakses oleh siapa pun di tim, baik itu Linux, Mac atau Windows. Sebelumnya kami menggunakan Adobe XD, tetapi anggota berbasis Linux tidak dapat menggunakannya dan Sketch hanya dikunci di Mac.

Screenshot Halaman Beranda Figma

Illustrator / Desainer Afinitas

Untuk lebih banyak pekerjaan khusus, Illustrator atau Affinity Designer jelas merupakan beberapa pilihan teratas. Dalam satu atau dua tahun terakhir, ilustrasi khusus adalah salah satu bagian situs web yang paling trending. Grafik yang besar dan berwarna-warni menguasai paruh atas dan lebih banyak pengalaman tentang alat yang tepat jelas merupakan hal yang baik untuk dilakukan. Di tempat ini, kita juga dapat menambahkan software 3D seperti Blender untuk rendering model 3d, yang dapat digunakan sebagai aset pada halaman web.

Photoshop / Foto Afinitas

Photoshop adalah perangkat lunak terkemuka untuk desain web. Itu mungkin terdengar aneh hari ini terutama karena kita memiliki semua alat hebat ini yang fokus utamanya untuk web. Tetapi Photoshop masih merupakan alat yang hebat dan kami sering menggunakannya ketika ada foto yang perlu diedit atau dipotong bentuk / formulir.

Presentasi

Tapi ini bukan hanya pekerjaan desain - PNG statis. Beberapa desainer yang sedikit lebih fokus pada grafik gerak dan interaksi. Demo yang bagus tentang bagaimana elemen harus berperilaku saat mengarahkan kursor, menggesek, atau mengklik akan sangat membantu pekerjaan pengembang front-end. Baik Figma dan Adobe XD dapat membantu dalam hal itu, tetapi keduanya juga terbatas.

Adobe After Effects

After Effects dianggap sebagai salah satu pilihan pertama untuk grafik gerak. Ini menyediakan semua alat yang diperlukan untuk mewakili semua tindakan dan animasi. Hal yang baik untuk mengingatkan desainer di sini adalah bahwa animasi harus mengikuti batasan web. Menambahkan buram gerakan bukanlah sesuatu yang dapat Anda lakukan. Jadi, ketika Anda masuk ke animasi yang lebih canggih, pasti diskusikan dengan tim pengembang front-end Anda atau baca lebih lanjut tentang animasi di web dan apa yang mungkin. Hal yang sama berlaku untuk UX dan A11y.

Penyimpanan

Figma dan Adobe XD cukup banyak berfokus pada cloud, jadi Anda tidak perlu khawatir kehilangan pekerjaan, tetapi tidak semuanya seperti itu - Photoshop, file Illustrator, font yang telah Anda unduh, foto, dll. Semuanya ada di mesin Anda.

Yang terbaik adalah mencadangkannya dan membuatnya dapat diakses setiap saat, terutama jika Anda bekerja di lebih dari satu mesin. Dan untuk membagikannya, itu sangat mudah.

Dropbox

Pilihan teratas untuk ini adalah Dropbox. Dengan aplikasi desktop yang mudah digunakan, ini akan mengawasi file Anda dan menyinkronkannya ke cloud segera setelah Anda membuat perubahan apa pun. Dari sana, membagikannya dengan klien atau tim Anda hanya dengan sekali klik.