membuat mock up website

0
9

EVERYTHING YOU NEED TO KNOW ..
Photoshop memiliki pengikut pengguna setia yang hebat, berkat kekayaan fitur, opsi, dan konten buatan pengguna yang mendalam. Daftar 250 sumber daya Photoshop terbaik ini berbicara banyak tentang popularitas alat ini. Dan banyak pixel-perfect die-hards masih merasa lebih nyaman merancang mockups mereka di Photoshop daripada pesaing langsung dan alat mockup yang lebih khusus.
Photoshop dapat digunakan untuk membuat tiruan fenomenal, selama Anda mengetahui fitur yang relevan – beberapa fiturnya sepertinya berlebihan untuk disain web kecuali jika Anda mengedit gambar dengan berat.
Mari kita lihat beberapa tip untuk membuat mockups di Photoshop (berdasarkan saran dari PlasticMinds dan pengalaman kita sendiri), dan bagaimana membuat pengalaman lebih kolaboratif.
Manfaatkan Shapes & Shape Layers
Banyak cara yang sama seperti wireframe memberikan garis besar dasar untuk mockup, bentuk dan lapisan bentuk adalah titik awal yang baik untuk mockup PS Anda. (Sebagai bonus, semua lapisan juga diawetkan jika Anda mengimpor file Photoshop Anda ke dalam aplikasi kami, UXPin).
Photoshop memberi Anda berbagai pilihan untuk membuat bentuk dasar ini, dan mudah diubah ukurannya untuk diedit nanti. Jake Rocheleau setuju, dan menunjukkan bahwa jika Anda melihat secara dekat sebagian besar situs web yang dipublikasikan, Anda masih dapat menemukan bentuk asli yang digunakan untuk header, panel navigasi, tombol, dan widget sidebar.
3 CARA UNTUK MEMBUAT MOCK UP WEBSITE

01.MENGGUNAKAN TOOL BESPOKE
Menggunakan alat seperti UXPin, atau solusi lain seperti Moqups atau Balsamiq, akan memberi Anda semua yang Anda butuhkan untuk membangun mockup Anda dan memfasilitasi keseluruhan proses. Alat ini dirancang untuk membuat proses pembuatan semudah mungkin, sehingga Anda dapat lebih fokus pada keputusan gaya dan kurang tentang cara memanipulasi program.

Baik para ahli dan pemula merasa paling nyaman dengan alat mockup, karena para pemula lebih memilih kemudahan penggunaannya, sementara para ahli menghargai rancangan yang secara khusus disesuaikan dengan kebutuhan mereka yang maju.
Moqups dan Balsamiq menyediakan fungsionalitas lebih banyak daripada alat non-desain yang kadang-kadang digunakan untuk wireframes dan mockups (seperti Keynote), namun hanya terbatas pada desain kesetiaan rendah. Mereka dapat, bagaimanapun, akan sangat berguna jika tujuannya adalah untuk menciptakan low-fidelity wireframes dengan sangat cepat.
Ketika datang ke alat mockup, banyak yang ditargetkan lebih ke arah wireframing daripada mockups sejati. Dengan kolaborasi langsung, UXPin menawarkan puluhan perpustakaan elemen untuk menghemat waktu, dan ini adalah masalah sederhana untuk menyeret, menjatuhkan, dan menyesuaikan untuk menciptakan mockup Anda.
02.MENGGUNAKAN SOFTWARE DESAIN GRAFIS
Beberapa desainer bersumpah dengan perangkat lunak seperti Photoshop, Sketch atau Illustrator, terutama yang sangat ahli atau akrab dengan alat yang menawarkan kontrol ke piksel. Seperti yang ditunjukkan oleh Nick Pettit dari Treehouse dalam sebuah karya yang menjelaskan jenis mockup, platform desain grafis bekerja paling baik jika Anda menargetkan tingkat realisme dan kesetiaan tertinggi. Dan seperti yang kami jelaskan dalam prototip cepat kami dengan menggunakan panduan Photoshop CC, ini mungkin lebih mudah dari perkiraan Anda.

Bekerja dalam perangkat lunak perancangan grafis memberi Anda akses ke pilihan warna yang sangat beragam, jadi jika Anda bekerja dalam batasan skema warna yang kaku dan preset – misalnya, berdasarkan peraturan merek tertentu – maka program ini mungkin yang terbaik pilihan. Lebih dari pilihan warna, program ini menawarkan alat visual yang jauh lebih banyak, yang memungkinkan Anda mengatasi hal-hal kecil secara rinci

Namun, kelemahan penggunaan perangkat lunak jenis ini adalah sulit menerjemahkannya bila sudah waktunya mulai merancang desain. Apa yang bekerja di Photoshop mungkin tidak selalu bekerja dalam kode (elemen seperti font, bayangan, efek gradien, dan sebagainya), yang dapat diterjemahkan ke waktu yang terbuang untuk mencari tahu solusi untuk tahap prototip.

Jika Anda memiliki halaman bergaya berat, mungkin akan membantu untuk menuntaskan rincian visual spesifik dalam proses mockup (dalam hal mana Photoshop atau Sketch akan memberi Anda banyak pilihan).

Lihat saja daftar Hubspot dari homepage terindah, dan mudah dimengerti mengapa terkadang membantu memilah semua detail visual lebih cepat daripada nanti. Demikian pula, jika Anda berurusan dengan klien yang kasar atau sulit dipercaya, mempresentasikannya dengan mockup cantik dan mengesankan mungkin akan membuat mereka lebih mudah.

Ini juga perlu disebutkan bahwa mockups yang dibuat di Photoshop atau Sketch dapat diseret dan jatuh ke fase prototipe dengan UXPin. Ini memungkinkan Anda dengan mudah menghidupkan semua lapisan (tidak rata) dengan beberapa klik, dan memastikan Anda tidak perlu memulai dari awal kapan waktunya untuk melakukan prototip. Untuk detail lebih lanjut tentang bagaimana ini bekerja, lihat tutorial kami tentang cara mengotomatiskan handoff Anda.

Jika visual bukan satu-satunya prioritas Anda, Anda mungkin lebih efisien menggunakan alat yang memungkinkan Anda melakukan perekaman gambar, maket, dan prototipe semua di satu tempat. Perangkat lunak perancangan grafis bisa menjadi masalah lebih dari yang layak untuk maket kecuali jika Anda mencari visualisasi optimal – Anda pasti perlu berkomunikasi secara teratur dengan pengembang Anda, karena alat ini tidak dirancang untuk kolaborasi.

03.MENGKODEKAN MOCKUP ANDA (CODING)
Sebagai permulaan, jika Anda terutama perancang dan tidak nyaman dengan coding, maka ini jelas bukan pilihan. Seperti yang dibahas dalam The Guide to Mockups, kode maket bukan pilihan default.

Sebagian besar pengkodean dapat ditunda sampai prototip (jika Anda membuat prototipe HTML / Javascript) atau bahkan nanti (jika Anda menggunakan alat prototip). Namun, terlepas dari kompleksitas dan rintangan potensial, ada banyak perancang terhormat yang menganjurkan pengenalan kode ke fase mockup.
Seperti Joel Falconer menunjukkan kepada kita di TNW, membangun struktur dalam HTML dan kemudian beralih ke CSS untuk tata letak dasar dapat merampingkan keseluruhan proses pengembangan. Paling tidak teori – banyak orang berpendapat bahwa hanya berfokus pada visual selama tahap mockup menghemat waktu dalam pengambilan keputusan dan organisasi di jalan. Tetapi mereka yang lebih suka coding awal mengerti bahwa lebih banyak perubahan matematis seperti ukuran bisa diimplementasikan lebih mudah bila kode sudah tertulis.

Salah satu pendukung makam kode terbesar adalah Ash Maurya, Pendiri / CEO Spark59 dan pembicara dalam pengembangan. Ketika menjelaskan bagaimana dia lebih suka membangun makam, Maurya membela rute HTML / CSS, dan membuat beberapa poin padat:


  • FEASIBILITY
  • :
    Macam ‘Flashy’ yang dirancang hanya agar terlihat bagus bisa jadi sulit diterjemahkan ke dalam kode, sehingga menyia-nyiakan waktu dan usaha. Unsur seperti gradien, font, dan efek – sementara mudah dibuat di alat lain – bisa rumit atau bahkan tidak mungkin dibuat ulang saat dikodekan. Mulai dari kode memungkinkan Anda mengetahui dengan segera apa yang dapat dan tidak dapat Anda lakukan
  • QUICK ITERATION
  • :
    Menurut Maurya, coding sebenarnya menghemat waktu dengan menyederhanakan proses iterasi. Namun, yang lain menyarankan itu menambah waktu dengan menyeret keputusan desain.
  • MINIMAL WASTE
  • :
    Membuat mockup dalam bentuk apa pun selain teknologi akhir di mana produk dikirim menghasilkan pemborosan. “Karena mockup akan berakhir di HTML / CSS, Maurya menyarankan untuk menambahkan kesetiaan di sana.

Tapi seperti yang telah kami sebutkan sebelumnya, tiruan dengan coding bukanlah strategi yang populer, karena lebih banyak alasan daripada kesulitan pengkodean. Mulai kode terlalu dini dapat membatasi kreativitas dan kesiapan Anda untuk bereksperimen, karena mudah mengkhawatirkan kelayakan ide Anda dalam kode daripada betapa menariknya penampilan mereka.
Terserah Anda saat mengenalkan coding. Pastikan Anda mengetahui prioritas desain Anda dan terus memperbarui pengembang tentang bagaimana Anda memprioritaskan fitur.

KESIMPULAN :
Jangan membuat kesalahan dengan memikirkan semua mockups sama saja. Keputusan sederhana tentang platform, kesetiaan, dan pengkodean akan menghasilkan hasil yang berbeda secara signifikan.
Tahu apa yang Anda inginkan dan apa tujuan Anda sebelum Anda memulai proses perancangan – jika Anda menginginkan alat yang mendukung ketiga fase itu, sebaiknya mulai menggunakannya daripada mulai setengah jalan. Demikian juga, jika Anda memerlukan mockup bintang yang benar-benar realistis, ingatlah bahwa Anda akan menggunakan editor desain grafis di beberapa titik.

MUNGKIN CUKUP SEKIAN, SEMOGA BERMANFAAT ^_^

LEAVE A REPLY

Please enter your comment!
Please enter your name here