Pengembang ke jalur Desainer: Cara

Menjadi pengembang yang ingin menjadi perancang, saya benar-benar tertarik mempelajari cara membuat UI terbaik untuk situs web, aplikasi seluler, dll. Namun, saya tidak tahu apa-apa tentang Photoshop atau apa pun yang berkaitan dengan desain, keterampilan utama saya adalah HTML dan CSS .

Di mana saya harus mulai? Bagaimana saya belajar cara membuat situs web dan antarmuka yang indah?

Sebagai mantan pengembang yang telah menjadi desainer, ada beberapa hal yang saya sarankan. Pertama dan terutama, mulailah mengerjakan desain! Jika Anda memiliki kemampuan, cari mentor yang sudah menjadi desainer UI / UX dan mulai bekerja dengan mereka dalam proyek. Saya menemukan saya belajar lebih banyak dengan benar-benar mengerjakan proyek dan menyerap pengetahuan dari orang-orang yang telah melakukan ini selama bertahun-tahun daripada yang pernah saya lakukan dengan membaca buku.

Yang sedang berkata, jika Anda ingin membaca tentang UI / UX / etc., Saya akan melihat utas yang luar biasa ini: Harus-baca Buku Antarmuka Pengguna? Saya pikir favorit pribadi saya adalah Steve Krug's "Don't Make Me Think" - tetapi saya yakin Anda akan menemukan favorit Anda sendiri pada akhirnya.

Terakhir, sehubungan dengan alat-alat seperti Photoshop, Illustrator, dll ... jangan khawatir tentang itu! Pada akhirnya Anda akan menemukan alat yang paling cocok untuk Anda. Secara pribadi, saya mulai dengan maket pensil dan kertas, kemudian tergantung pada proyek saya akan pindah ke sesuatu di Balsamiq , atau Axure , atau kadang-kadang HTML dan CSS lurus - itu benar-benar tergantung pada ukuran proyek, ruang lingkup, dll. Gunakan apa pun yang paling nyaman untukmu. Pada akhirnya, yang terpenting adalah Anda mengomunikasikan visi Anda dengan jelas untuk desain Anda, bukan alat apa yang Anda gunakan untuk melakukannya.

Saya telah mencampurkan desain & pengembangan untuk waktu yang lama. Tetapi pada hari-hari awal saya menghabiskan lebih banyak waktu mempelajari alat pengeditan daripada apa yang membuat desain yang baik. Ada banyak tutorial yang dapat ditemukan untuk mempelajari cara menggunakan Photoshop, Illustrator, Fireworks, dll. Tapi senang memiliki pengertian & arahan desain. Ini adalah sesuatu yang saya masih ingin menjadi lebih baik.

Salah satu inspirasi saya adalah seorang pria bernama Robby Ingebretsen, karena dia melakukan pengembangan dan desain yang sangat baik. Situs webnya ada di nerdplusart.com .

Ada beberapa hal yang akan saya lihat darinya ...

• Daftar Pendek Saya (sangat) yang Harus Dibaca Buku untuk Desainer
• Dasar-Dasar Desain untuk Pengembang
• 10 Cara untuk Menyerang Masalah Desain dan Keluar Kemenangan

Ketika ia berbicara tentang semua presentasinya, saya pikir sangat penting untuk menemukan inspirasi untuk desain Anda. Bahkan desainer terbaik pun tidak begitu saja mengeluarkan hal-hal seperti ini. Salah satu bookmark saya adalah koleksi "Desain Grafis Baru" , sebagian besar terlihat dalam karya cetak. Kebanyakan dari mereka sangat sederhana, sering menggunakan tipografi itu sendiri sebagai elemen grafis utama. Sesederhana tampaknya, hanya browsing melalui hal-hal seperti ini dapat membantu Anda membentuk desain Anda.

Sama seperti belajar Visual Studio tidak membuat salah satu pengembang perangkat lunak yang baik, tidak juga hanya belajar Photoshop membuat satu perancang UI yang baik.

Jika Anda ingin pergi ke jalur formal, pendidikan dalam Seni / Desain Grafis, Faktor Manusia, Psikologi, Arsitektur Informasi / ilmu perpustakaan semua akan menjadi tempat untuk mencari.

Secara informal, mulai bekerja! ;) Cara terbaik untuk belajar adalah lakukan saja.

Saya seorang desainer grafis yang terlatih secara formal yang telah mengambil keterampilan pengembangan perangkat lunak saat bekerja. Saya mulai dari kebutuhan murni.

Secara pribadi, saya pikir anggota tim UX terbaik adalah mereka yang memiliki campuran kedua keterampilan. Jadi, saya pikir Anda berada di jalur yang benar.

Saya akan mulai dengan membaca buku "Head First Web Design" oleh Watrall & Siarto (diterbitkan oleh O'Reilly). Ini sangat masuk akal, mudah dicerna, dan menuntun Anda melalui segala hal yang harus dipertimbangkan oleh seorang desainer. Ini bukan studi mendalam, tetapi membuat Anda mulai tahu pertanyaan apa yang perlu Anda jawab selanjutnya. Itu tidak mencakup navigasi, organisasi, tata letak, penulisan, warna, dan aksesibilitas.

Juga, sebelum Anda beralih ke Photoshop, Adobe Illustrator, atau apa pun, beri bingkai desain Anda untuk memastikan semuanya ada di tempat yang tepat sebelum Anda berkomitmen waktu ekstra untuk membuatnya terlihat cantik. Anda dapat membuat sketsa di atas kertas atau papan tulis, atau Anda dapat menggunakan alat. Alat yang saya temukan sangat membantu dalam langkah ini adalah Balsamiq Mockups . Ini memungkinkan Anda berpikir tentang organisasi situs dan tata letak terlebih dahulu.

Saya benar-benar mengambil pendekatan yang berlawanan dari UX Designer ke UI Developer, namun, ketika mengambil Desain, akan merekomendasikan beberapa bidang untuk memulai:

Saya akan melihat buku "Don't Make Me Think!" oleh Steve Krug , yang menurut saya adalah buku yang bagus tentang mendesain untuk mendesain di web.

Ada banyak sumber daya web yang bagus termasuk SmashingMagazine.com dan PSDTuts.com, yang memberikan artikel bagus saat ini di dunia desain dan teknologi web.

Saya juga akan melihat pemahaman para pelaku HCI jika Anda mencari secara khusus untuk menjadi Desainer UX.

Semoga sukses dan selamat merancang!

Saya benar-benar tertarik mempelajari cara membuat UI kedudukan tertinggi untuk situs web, aplikasi seluler, dll.

Oke, itu topik yang luas. Anda ingin membuat situs web "cantik", "kedudukan tertinggi", terlihat profesional. Jadi, Anda perlu tahu apa yang membuat orang menganggap sesuatu sebagai "indah", bukan? Beruntung bagi Anda, kecantikan tidak terlalu subjektif.

Salah satu kunci untuk desain visual yang indah adalah harmoni .

Kurangnya harmoni adalah apa yang membuat desain Anda terlihat amatir.

Dan, hal terbaik adalah bahwa harmoni visual datang ke matematika. Ini bukan tentang memiliki firasat.

Seperti yang telah ditunjukkan orang lain, saya akan merekomendasikan merancang situs web sendiri. Cobalah untuk menerapkan prinsip-prinsip desain yang Anda pelajari alih-alih menggunakan kerangka kerja yang siap pakai. Mungkin sulit pada awalnya, tetapi itu akan membantu Anda menjadi lebih baik.

Bagaimana menanamkan harmoni dalam desain situs web

Berikut ini adalah contoh praktis dan latihan kecil yang lucu yang dapat Anda lakukan sekarang.

Salah satu cara yang saya pribadi sukai adalah menggunakan skala modular untuk mengukur elemen-elemen situs web dalam proporsi yang harmonis. Situs web yang dapat membantu Anda menghasilkan skala modular adalah ini: modularscale.com

Manfaat menggunakan skala modular adalah dapat membuat keputusan ukuran semudah memilih nomor dari skala.

Misalnya, mari kita ukur judul situs web (untuk mengkomunikasikan hierarki visual).

Katakanlah kita memiliki skala modular ini berdasarkan ukuran font tubuh 19px yang saya pilih (19px karena terlihat paling baik dengan font yang saya gunakan, tetapi Anda dapat melewati langkah ini dan pergi dengan ukuran 16px default) dan rasio 1,412 (Tidak perlu masuk ke perincian mengapa saya memilih rasio ini. Rasio apa saja akan lebih baik daripada tidak ada rasio untuk proyek Anda.):

Melihat itu, saya akan memilih H1 menjadi 2,815em, H2 menjadi 1,994em dan H3 menjadi 1,412em. 3 angka pertama lebih besar dari ukuran font tubuh. Mudah sekali, kan? Teks isi akan 1em (dalam kasus saya 19px). Lalu, saya akan mengukur H4-H6 pada 1em dan menggunakan kontras (berat font atau gaya berbeda) untuk membedakannya dari teks isi.

Jadi, coba ini sekarang:

1. Hasilkan skala modular Anda sendiri
2. Dapatkan dokumen HTML biasa (konten asli, mohon jangan Lorem Ipsum)
3. Gunakan skala untuk mengukur pos.
4. Kemudian coba gunakan skala untuk keputusan ukuran lain (margin, paddings, dll)

Itu hanya langkah kecil menuju desain yang lebih baik, tetapi saya berharap ini akan membantu Anda.

Jika menurut Anda ini bermanfaat, Anda dapat membaca daftar 7 tips saya yang lain untuk perancang web pemula yang tahu HTML dan CSS

PS: Anda benar-benar harus banyak membaca

Seperti kata orang lain, baca:

• Elemen Desain Grafis oleh Alexander White
• The Elements of Typographic Style oleh Robert Bringhurst
• Don't Make Me Think oleh Steve Krug

Juga, di sini daftar besar sumber daya online seperti blog dan komunitas yang perlu diperhatikan: enboard.co/webdesign/