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

Egy Lo-fi UI prototípus készítése 60 másodpercben

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

Hungarian (Magyar) translation by Bózsó Péter (you can also view the original English article)

Készítsünk egy Lo Fi prototípust hatvan másodpercben, a MadKit Sketch UI eszköz használatával Themeforestről!

Nézd meg a screencastot

Hogyan készül

A MadKit Sketch fájl egy másolatában (Lo-Fi UI) készítsünk egy új oldalt. Menj az Elhelyezés > Szimbólumok > Bázis > Formák > Ablakhoz, hogy készíts egy böngésző ablakot a mintadarabunknak.

ShapesShapesShapes
Formák > Ablak

Továbbá a Formák alatt fogj egy böngésző fejlécet, aztán adj a prototípusodnak egy nevet.

A tartalom király

Most össze fogjuk gyűjteni a prototípusunk tartalmát szimbólumok használatával ami a Kategóriák alatt megtalálható (kezdjük egy videó háttér borítóval). Ezután hozzá fogunk adni egy terméklistát, egy ajánlások csúszkát, ezután meg fogjuk mutatni a legújabb blog posztokat, hozzá fogunk adni egy kis infót a cég embereiről, ezután le fogjuk zárni néhány elérhetőségi adattal.

Nyújtás

Nyújtsd meg az ablak objektumodat, hogy illeszkedjen a tartalmadhoz.

stretch windowstretch windowstretch window
Nyújtsd meg az ablak formát

Most válaszd ki mind a hat tartalom darabot, jobb-katt a rétegek menüre, és válassz Leválasztást Szimbólumból. A Videó BG objektumban rejtsd el a Bázis/formák/ablakot és állítsd be a Videó Háttér sugarát 0-ra.

Most el fogjuk rejteni az ablak formát a tartalom minden darab másodpercére, aztán a maradék darabokhoz el fogjuk rejteni a határokat és beállítani a sugarat 0-ra.

Végül, ragadd meg a böngésző ablakot és a fejléc szimbólumokat és húzd őket végig a kupac tetejére.

Kész vagyunk

Így készítesz egy lo-fi UI prototípust hatvan másodpercben! Biztosan nézz meg többet a Sketch prototípus fejlesztésről Themeforesten.

wireframe Sketch app templateswireframe Sketch app templateswireframe Sketch app templates
Wireframing Sketch alkalmazás sablonok Themeforesten
Advertisement
Did you find this post useful?
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.