Cara membuat antarmuka hebat di PhotoShop, dll


8

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 terkait dengan desain kecuali HTML dan CSS.

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

Apakah ada buku, tutorial, dll yang Anda rekomendasikan?

Terima kasih!

Jawaban:


4

Untuk UI, saya sarankan menggunakan Fireworks di atas Photoshop. Photoshop sangat bagus untuk karya seni yang kreatif dan kompleks (cetak atau web), tetapi menurut saya alat yang terlalu rumit untuk UI terkait web.

Fireworks secara khusus dirancang sebagai alat authoring berorientasi web di mana Photoshop tidak. Tool-set untuk Fireworks diarahkan untuk membangun UI web, bukan karya kreatif kompleks yang ditawarkan oleh Photoshop.

Fireworks menggunakan alat yang sangat mirip dengan Photoshop, minus mengasapi, sehingga Anda dapat melakukan semua yang Anda butuhkan untuk membuat UI web.

Fireworks juga merupakan bagian dari Adobe Creative Suite, jadi jika Anda memiliki Photoshop Anda harus memilikinya juga.

Bahan referensi, tidak khusus untuk Fireworks tetapi UI secara umum;

http://www.jankoatwarpspeed.com/

Saya sangat merekomendasikan membaca artikelnya dan mencari inspirasi untuk karyanya. Ada 2 sisi untuk UI yang sangat bagus: Antarmuka dan pengalaman menggunakan antarmuka. Juga disebut UI dan UX.

Mempelajari cara menggunakan aplikasi dapat ditemukan melalui tutorial online. Envato memiliki jaringan tutorial yang bagus http://tutsplus.com/ , diberikan situs Tutorial utama mereka untuk web berorientasi pada Photoshop, tetapi sebagian besar dari apa yang mereka lakukan di Photoshop dilakukan dengan metode yang sama, atau serupa, dalam Fireworks.

Saya juga menemukan diri saya cukup sering mem-bookmark situs-situs yang memiliki ciri-ciri desain unik atau elemen-elemen UI yang dalam beberapa skenario di masa depan akan berfungsi dengan baik untuk suatu proyek. Misalnya struktur tab yang unik, gaya akordian, atau bahkan pager.

Desain UI pada tingkat dasar dipecah menjadi bidang tampilan data. Karena Anda memiliki latar belakang pengembang, Anda tahu cara menyajikan data dari perspektif logika (Menu, akordeon, tab, dll.). Sekarang benar-benar hanya membangun UI yang menggunakan kontrol atau modul dari perspektif visual.

Beberapa bacaan tambahan tentang UX:

http://uxmovement.com/

Memiliki latar belakang pengembang juga, saya dapat memberitahu Anda bahwa ketika saya membangun aplikasi saya, langkah pertama adalah membuat UI yang pada gilirannya menentukan fungsionalitas aplikasi. Karya seni saya yang dibuat berfungsi baik sebagai nilai artistik untuk aplikasi tetapi juga definisi fungsinya. Saya selalu membangun logika saya di sekitar karya seni yang lengkap, tidak pernah sebaliknya. Ini selalu berarti bahwa saya mengutamakan pengguna.

Saya harap ini memberi Anda setidaknya titik awal.


1

Anda beruntung. Banyak orang datang ke dunia Desain Web mengajukan pertanyaan yang sama. Sering kali, Anda akan melihat tim orang, yang terdiri dari setidaknya satu pembuat kode dan satu desainer grafis. Pilihan bagus dengan Photoshop - itulah yang saya gunakan.

Dengan versi terbaru Adobe Photoshop, CS5, telah menjadi sangat canggih - mampu melakukan tugas-tugas kompleks dengan alat sederhana, atau bahkan tugas yang lebih kompleks dengan alat kompleks. Tetapi saya memperingatkan Anda, mempelajari semua fitur-fitur keren dari Photoshop dapat menyebabkan kekurangan nutrisi. :)

Berikut ini adalah tutorial yang mencakup dasar-dasarnya sehingga Anda bisa mendapatkan banyak hal:

Setelah Anda mendapatkan semua turun itu, saya menemukan sebuah sekelompok dari situs pada Google yang memiliki beberapa tutorial desain yang benar-benar inovatif.

Ada beberapa teknik yang mungkin harus Anda pelajari. Tip, mengkilap biasanya merupakan langkah yang baik hari ini. Untuk mendapatkan desain yang benar-benar unik, temukan fitur yang Anda sukai dari templat situs web mana pun, lalu gunakan dengan cara Anda sendiri.

Saya harap itu membantu. Tinggalkan komentar jika Anda memerlukan informasi lebih lanjut.


Terima kasih. Satu pertanyaan: apa yang Anda maksud dengan "mengkilap"? terima kasih
donald

Membuat segala sesuatu tampak mengkilap - tombol, bilah navigasi, tajuk, dll. Boonage.pjss2.net/2007/04/15/perfect-shine-button-or-icon
Christopher
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.