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

Izradite Lo-fi Prototip Korisničkog Sučelja u 60 Sekundi

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

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Hajde da izradimo Lo Fi Prototip, u šezdeset sekundi, koristeći Madkit Sketch UI kit koji je dio ponude na Themeforest-u!

Pogledajte 'Screencast'

Izrada

Na duplikatu MadKit Sketch datoteke (Lo-Fi UI) napravite novu stranicu. Idite na Insert > Symbols > Base > Shapes > Window da za naš 'mockup' izradite prozor za pretraživanje.

ShapesShapesShapes
Shapes > window

Također u rubrici Shapes uzmite browser-header, i zatim prototipu dodijelite ime.

Najvažniji je Sadržaj

Sada ćemo sastaviti sadržaj našeg prototipa koristeći simbole koje ćete pronaći pod Categories (počnite sa 'coverom' video pozadine). Sada ćemo dodati listu proizvoda, testimonial slajder, nakon toga ćemo pokazati najnovije postove na blogu, dodati neke informacije o zaposlenicima tvrtke, i na kraju dovršiti sa kontakt podacima.

Raa-azvucite

Razvucite prozor kako bi pristajao vašem sadržaju.

stretch windowstretch windowstretch window
Razvucite oblik prozora

Sada selektirajte svih šest dijelova sadržaja, kliknite desnim gumbom u izborniku slojeva i odaberite Detach from Symbol. U Video BG objektu sakrijte Base/Shapes/window i podesite Video Background radijus na 0.

Sada ćemo sakriti oblik prozora na svakom drugom dijelu sadržaja, zatim ćemo preostalim dijelovima sakriti rubove i podesiti radijus na 0.

I na kraju odaberite prozor za pretraživanje i simbole zaglavlja te ih povucite skroz na vrh skupine.

Završili smo

Ovako se radi lo-fi UI prototip u šezdeset sekundi! Svakako provjerite što se još nalazi u ponudi za izradu prototipa u Sketchu na Themeforest-u:

wireframe Sketch app templateswireframe Sketch app templateswireframe Sketch app templates
'Wireframing Sketch app templates' - predlošci na Themeforest-u
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.