Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

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

by
Difficulty:BeginnerLength:QuickLanguages:
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.

Shapes
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 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 templates
Wireframing Sketch alkalmazás sablonok Themeforesten
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.