Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Situs eCommerce Prototype Pertamamu dengan Adobe XD

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Kinanthi Hayuningtyas (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial saya sebelumnya, kita melihat bagaimana Adobe XD bisa digunakan pada sebuah aplikasi wirefaram seluler. Saat ini saya akan berbagi bagaimana kamu bisa mendesian sebuah visual mockup dan prototype

Adobe XD bisa digunakan pada desain keduanya situs dan seluler. dan menawarkannya sebuah efisensi ruang kerja untuk merancang pengalaman anda termasuk interaktivitas sederhana yang dapat dikirimkan kepada sebuah pengembang atau persentasi kepada klien.

kita akan membuat sebuah situs untuk toko pakaian online sederhana. sebuah merek fiktif yang disebut "Lo-key". Yang menjual garis dasar bertema kemerdekaan. ikuti terus untuk belajar, dan jangan ragu untuk modifikasi dan eksperimen dengan hasilnya jika anda menggunakan tutorial ini pada desain toko anda.

1. Reset Pengguna Anda 

ini tutorial mengasumsikan bahwa anda sudah menyelesaikan tugas rumah anda. Jika bisnis anda, berarti anda sudah tau siapa pelanggan anda dan pengalaman situs seperti apa yang cocok untuk mereka. Sebagai seorang desainer, kamu harus menyelesaikan reset pengguna anda, mendesain atau menetapkan identitas merek.  menghabiskan waktu yang bagus untuk wireframing dan merevisi.

Tentunya, jika anda hanya mencoba Adobe XD dan menggunakan tutorial ini untuk belajar dasar mengenai desain prototype, anda akan melakukannya dengan baik. Jangan anggap proses yang diuraikan di sini adalah keseluruhan dari proses desain UX yang sebenarnya!.

Setelah Anda siap untuk mulai mengembangkan mockup visual dan interaktif, Anda dapat beralih ke langkah berikutnya.

2. Memilih Ukuran Layar

Hal pertama yang diminta oleh Adobe XD adalah memilih ukuran layar. Default untuk web adalah Web 1920 (1920 X 1080 px) tetapi Anda juga bisa mengambil salah satu dari pilihan yang lain (Web 1280 atau Web 1366) atau memiliih ukutaran custom.

picking a screen size in adobe xd

Setelah Anda membuat pilihan Anda, Anda akan disambut oleh ruang kerja XD, dalam tampilan Desain secara default, dan kanvas putih bersih ("artboard") dalam ukuran pilihan Anda.

3. Buat Duplikat Artboard Anda

Kami akan mengejek empat halaman standar untuk sebuah toko online: 

  1. sebuah home page
  2. sebuah halaman kategori ("Shirts")
  3. Keranjang (menunjukkan item yang telah ditambahkan pelanggan untuk pembayaran)
  4. Halaman Tentang (yang memiliki sedikit informasi tentang merek)

Kami juga akan membutuhkan artboards untuk menu drop-down, serta pop-up yang menampilkan lebih banyak rincian untuk produk yang dipilih (efek "lightbox") tetapi kita dapat membuatnya nanti. 

Untuk saat ini, buat tiga artboards lagi dengan memilih fungsi artboard dari panel kiri dan klik di mana saja di samping artboard pertama Anda. 

creating more artboards in adobe xd

Anda bisa, sebagai alternatif, juga klik artboard pertama untuk memilihnya dan pilih Edit> Duplicate. Ubah nama masing-masing dengan mengetuk dua kali judul default (terlihat di kiri atas setiap artboard).

4. Menempatkan Gambar dan Menambahkan Teks

Untuk beranda kami, kami akan melakukan sesuatu yang cukup populer dengan situs web di industri fesyen dan ritel. Kami akan memilih satu gambar besar untuk menjadi seluruh latar belakang kami. 

Tips: Anda dapat membiarkan Adobe XD mengetahui artboard adalah beranda Anda dengan memilih seluruh artboard dan mengeklik tag abu-abu yang muncul di sisi kiri atas. Ini akan menjadi biru untuk menunjukkan bahwa ini adalah halaman pendaratan atau halaman awal untuk pengalaman Anda.

Setelah Anda memutuskan pada gambar yang ingin Anda gunakan, pilih File> Impor (alternatif, tekan Cmd + Shift + I) untuk mencari gambar itu pada disk Anda dan impor ke kanvas Anda. Jika gambar Anda lebih besar dari papan seni, tekan dan tahan di atasnya, dan tarik ke sekeliling untuk menemukan posisi yang Anda suka.

Melanjutkan estetika minimalis kami, kami akan menjaga teks kami singkat dan bersih - hanya nama merek (atau logo), tagline, dan bilah navigasi. 

Pilih alat Teks dari panel di sebelah kiri dan klik di mana saja yang Anda inginkan pada artboard pertama untuk mulai menulis. Untuk teks logo kami, saya memulai di bawah pertengahan tetapi Anda dapat memindahkannya ke tempat yang diinginkan dengan mengeklik dan menyeretnya. Tentu saja, Anda juga dapat mengimpor gambar logo dengan cara yang sama seperti kami mengimpor gambar latar belakang kami. 

Di bawah teks logo, Anda dapat menggunakan alat Teks lagi untuk menulis slogan merek Anda.

homepage design

Adobe XD menawarkan banyak pilihan pemformatan standar untuk teks Anda. Anda dapat memilih blok teks apa pun dan mengubah font, gaya, warna, ukuran, dan atribut lainnya. Screenshot di bawah ini menunjukkan format untuk teks navigasi di home page

text formatting in adobe xd

Font dalam contoh ini mengikuti skala 1: 2 yang harmonis yang dapat Anda pelajari dalam panduan ini tentang tipografi yang efektif untuk web:

Gunakan apa yang telah Anda pelajari di bagian ini untuk menambahkan judul halaman untuk empat halaman yang tersisa dan tempatkan gambar dan teks isi untuk halaman Keranjang dan Tentang.

cart page in our ecommerce design

5. Membuat sebuah Simbol

Mari kita buka halaman About.

Temukan ikon navigasi yang Anda sukai (seperti yang ditemukan di set ini) dan letakkan di sepanjang logo, di sudut kiri atas, di halaman About (atau salah satu dari dua halaman lainnya, selain halaman Beranda).

menu icon
Contoh menu icon

Karena Anda membutuhkan ikon dan logo untuk laman lain juga, Anda dapat mengubahnya menjadi Simbol. Klik kanan dan pilih Make Symbol (atau tekan Cmd + K). Anda dapat mengakses simbol apa pun yang Anda buat dengan mengklik ikon Aset di halaman kiri. Dari sana, Anda dapat menyeret dan menjatuhkan simbol ke salah satu papan luncur Anda. Dengan cara ini, Anda tidak perlu menyalin-tempel setiap waktu.

Anda dapat menghubungkan simbol Lo-Key Anda ke halaman beranda menggunakan metode di langkah berikutnya.

6. Membuat Link Pertama

Beralih ke mode Prototype dari bar di atas. Perbesar papan art pertama Anda (Beranda) dan pilih About Text. Panah biru akan muncul di sebelahnya. Tekan dan tarik keluar. Kabel biru akan mengikuti dengan patuh ke mana pun kursor Anda pergi ..

blue wire

Seret ke papan seni kedua Anda (About) dan biarkan di sana. Anda kini telah membuat tautan antara dua laman dan, memastikan tab Transition dipilih, Anda dapat memilih jenis transition dan pelonggaran menggunakan munculan yang muncul saat Anda menjatuhkan kawat. Untuk saat ini, Anda dapat mempertahankan transisi ke none karena kami ingin halaman About untuk segera mengganti halaman rumah segera setelah tombol About ditekan.

transition settings

Anda dapat mengulangi metode ini untuk menambahkan tautan ke halaman lain. 

7. Gunakan Overlay untuk Menambahkan Dropdown Menu dan Lightbox

Sekarang, tambahkan menu tarik-turun navigasi kami.

Buat papan seni baru, berjudul Nav, dan ubah dimensinya menjadi persyaratan Anda menggunakan kontrol Width dan height yang ditampilkan di panel kanan. Artboard Nav ditunjukkan di bawah ini adalah 210px X 275px.

Menggunakan Teks dan, secara opsional, Line tool di panel kiri, desain menu tarik-turun Anda. Menu ini akan muncul ketika pelanggan Anda mengklik ikon hamburger.

drop down menu design

Kembali dalam mode Prototipe, seret kawat dari menu hamburger ke papan seni Nav. Di kotak yang muncul, alihkan ke tab Overlay. Kotak hijau akan muncul yang menunjukkan di mana hamparan akan muncul. Seret untuk memindahkannya hingga berada di bawah menu hamburger Anda. Pilih None sebagai pengaturan transisi Anda (atau bereksperimen dengan opsi lain).

Sekarang klik ikon Play di jendela kanan atas. Halaman rumah Anda akan muncul di jendela pratinjau. Klik tombol About untuk menuju ke halaman About.  Sekarang, klik ikon hamburger. Ini akan memunculkan menu drop-down Anda. Klik lagi dan itu akan hilang.

Anda dapat menghubungkan item / judul halaman di drop-down ke halaman masing-masing menggunakan metode yang sama seperti pada Langkah 6. Ini akan mengubahnya menjadi navigasi yang berfungsi untuk semua halaman dalam prototipe Anda.

8. Gunakan Fitur "Ulangi Kotak" untuk Membuat Baris dan Kolom Objek

Untuk halaman Shirts kami, kami membutuhkan beberapa baris produk.

Untuk itu, kita akan menggunakan fitur XD yang disebut Repeat Grid. Jika desain Anda melibatkan elemen berulang atau daftar konten, fitur Repeat Grid memungkinkan Anda melakukan itu sembari tetap membuatnya mudah untuk melakukan perubahan yang memperbarui secara otomatis di seluruh grid.

Gunakan Rectangle dari panel kiri untuk menggambar persegi panjang 450px x 300px dan kemudian gunakan Fill dari panel kanan untuk mewarnai warna abu-abu terang untuk menunjukkan ini adalah placeholder gambar.

Sekarang pilih persegi panjang dan klik pada Repeat Grid di panel kanan (atau Object> Repeat Grid). Garis hijau dan slider hijau akan muncul di sekitar pilihan Anda, memungkinkan Anda untuk memperluas daftar konten Anda ke segala arah (baik vertikal dan horizontal dalam kasus kami). Untuk saat ini, klik dan seret cukup panjang untuk membuat dua baris dengan tiga kolom masing-masing.

repeat grid feature

Pilih kisi ulang Anda dan kemudian arahkan pada ruang putih di antara persegi panjang Anda. Saat berubah menjadi merah muda, Anda dapat menyeret ke atas dan ke bawah untuk mengubah padding antar sel.

padding between grid cells

Untuk mengisi grid Anda dengan gambar produk, seret foto produk Anda dari satu folder ke grid Anda di XD. Mereka akan mengisi grid secara otomatis. 

images in the grid

Anda dapat menggunakan metode overlay yang sama dari Langkah 7 untuk membuat lightbox produk Anda yang muncul saat Anda mengklik kaos / produk. 

pop up overlay

9. Langkah Opsional: Bagikan!

Adobe XD memungkinkan Anda dengan cepat dan mudah membagikan apa pun yang Anda kerjakan dengan kolaborator dan pemangku kepentingan lainnya.

Jiika Anda sedang mengerjakan aplikasi atau situs web untuk klien, Anda dapat membagikan tautan ke proyek desain Anda dengan mereka dengan memilih File> Share> Publish Prototype.

publish options

Anda juga dapat mempublikasikan Spesifikasi Desain yang memungkinkan pengembang (atau siapa pun dalam hal ini) untuk melihat pemformatan dan pengaturan lain untuk prototipe Anda di browser. Mereka juga dapat mengunduh aset apa pun, seperti gambar atau grafik, yang Anda tandai untuk diekspor (masuk ke View> Layers. Anda dapat memilih item apa saja dan mengklik ikon di sebelahnya, atau, klik kanan pada item apa pun dalam daftar dan pilih Mark for Batch Export).

Design Specs in a web browser
Design Specs dalam sebuah browser web

Kesimpulan

Dan selesai! Anda sekarang telah merancang prototipe untuk toko online sederhana. Ini dapat dibagikan dengan pemangku kepentingan, atau dipilih dan dibangun oleh pengembang. Lihat tautan di bawah untuk mempelajari lebih lanjut tentang Adobe XD!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.