Advertisement
  1. Web Design
  2. Prototyping

Lumikha ng Lo-fi UI Prototype sa loob ng 60 Segundos

by
Read Time:1 minLanguages:
This post is part of a series called 60 Second Video Tutorials.
Create a “Coming Soon” Page in 60 Seconds

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Tayo’y lumikha ng Lo Fi Prototype, sa loob ng animnapung segundos, gamit ang Madkit Sketch UI kit mula sa Themeforest!

Panuorin ang Screencast

Kung Paano ito Ginawa

Sa isang kopya ng Madkit sketch file ( Lo-Fi UI ) lumikha ng bagong pahina. Pumunta sa Ipasok > Simbolo > Base > Hugis > Window upang lumikha ng browser window para sa ating mockup.

ShapesShapesShapes
Hugis > Window 

At saka sa ilalim ng Hugis saklutin ang browser-header, at pagkatapos ay bigyan ng pangalan ang iyong prototype.

Hari ang nilalaman

Ngayon ay ating bubuuin ang nilalaman ng ating prototype sa pamamagitan ng simbolo na matatagpuan sa ilalim ng mga Kategoriya (simulan ng may lakip na video background). Susunod ay magdadagdag tayo ng listahan ng mga produkto, isang slider para sa mga testimoniya, pagkatapos nito ay ating ipapakita ang pinakabagong blog posts, kami ay magdadagdag ng ilan mga impormasyon sa mga tao ng kumpanya, at pagkatapos kami’y maglalagay ng ilan mga detalye para sa kontak.

Palaparin

Palaparin ang window object para ito ay maghusto sa iyong nilalaman:

stretch windowstretch windowstretch window
Palaparin ang korte ng window

Ngayon piliin lahat ang anim na pirasong nilalaman, mag right-click sa talaan ng layers, at piliin ang Tanggalin mula sa Simbolo. Sa Video BG object itago ang Base/Hugis/Window at ayusin ang Video Background’s radius sa 0.

Ngayon ay ating itatago ang window shape para sa bawat ikalawang piraso ng nilalaman, pagkatapos para sa natitirang mga piraso ating itatago ang mga hangganan at iayos ang radius sa 0.

Sa wakas, saklutin ang browser window at header symbols at i-drag silang lahat patungo sa pinakataas na stack.

Tayo’y natapos na

At ganyan kung paano ka lilikha ng lo-fi UI prototype sa loob ng animnapung segundos! Siguruhin na tignan ang iba pang mga inaalok para sa prototyping sa Sketch sa Themeforest:

wireframe Sketch app templateswireframe Sketch app templateswireframe Sketch app templates
Wireframing Sketch app templates sa Themeforest
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.