Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Membuat Sebuah Prototipe UI Lo-fi Dalam 60 Detik

by
Difficulty:BeginnerLength:QuickLanguages:
This post is part of a series called 60 Second Video Tutorials.
Create a “Coming Soon” Page in 60 Seconds

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Mari membuat sebuah Prototipe Lo Fi, dalam enam puluh detik, menggunakan MadKit Sketch UI kit dari Themeforest!

Tonton Screencast

Bagaimana Itu Dilakukan

Dalam sebuah duplikat file MadKit Sketch (Lo-Fi UI) buat sebuah halaman baru. Pergi ke Insert > Symbols > Base > Shapes > Window untuk membuat sebuah jendela browser untuk mockup kita.

Shapes
Shapes > window

Juga di bawah Shapes ambil sebuah browser-header, dan kemudian berikan prototipemu sebuah nama.

Konten Adalah Raja

Sekarang kita akan menyusun konten prototipe kita menggunakan simbol yang dapat ditemukan di bawah Categories (mulai dengan sebuah cover background video) Berikutnya kita akan menambahkan sebuah daftar produk, sebuah slider testimonial, setelah itu kita akan menunjukkan post blog terbaru, kita akan menambahkan beberapa info tentang orang dari perusahaan, kemudian kita akan membungkusnya dengan beberapa detail kontak.

Melebar

Perlebar obyek jendelamu sehingga itu pas dengan kontenmu:

stretch window
Perlebar bentuk jendela

Sekarang pilih semua enam konten itu, klik kanan dalam menu layer, dan pilih Detach from Symbol. Dalam obyek Video BG sembunyikan Base/Shapes/window dan atur radius Video Background ke 0.

Sekarang kita akan menyembunyikan jendela video untuk setiap detik konten, kemudian untuk bagian tersisa kita akan menyembunyikan tepi dan mengatur radius ke 0.

Terakhir, ambil jendela browser dan simbol header dan tarik mereka semua ke arah puncak tumpukan.

Kita Sudah Selesai

Itulah bagaimana kamu membuat sebuah prototipe lo-fi UI dalam enam puluh detik! Pastikan untuk memeriksa lebih lanjut apa yang ditawarkan untuk membuat prototipe dalam Sketch pada Themeforest:

wireframe Sketch app templates
Template aplikasi Wireframing Sketch di Themeforest
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.