Maak een Lo-fi UI-prototype in 60 seconden

Laten we binnen zestig seconden een Lo Fi-prototype maken met de MadKit Sketch UI-kit van Themeforest!

Bekijk de Screencast

 

Hoe het gedaan wordt

Maak een nieuwe pagina in een duplicaat van het MadKit Sketch-bestand (Lo-Fi UI). Ga naar Invoegen> Symbolen> Basis> Vormen> Venster om een ​​browservenster voor onze mockup te maken. 

Vormen> venster

Ook onder vormen pak een browser-header en geef je prototype een naam.

Inhoud is koning

Nu zullen we de inhoud van ons prototype assembleren met behulp van symbolen die je kunt vinden onder Categorieën (begin met een achtergrondomslag voor video). Vervolgens voegen we een productlijst toe, een testimonials-schuifregelaar, daarna laten we de nieuwste blogposts zien, voegen we wat info toe over de mensen van het bedrijf, waarna we een aantal contactgegevens invullen.

Stree-etsen

Rek uw vensterobject uit zodat het bij uw inhoud past:

Rek de venstervorm uit

Selecteer nu alle zes inhoudsitems, klik met de rechtermuisknop in het lagenmenu en selecteer Maak los van het symbool. In de Video BG object verberg de Base / Shapes / window en stel de Video Achtergrondstraal naar 0.

Nu gaan we de venstervorm voor elk tweede stuk inhoud verbergen, voor de resterende stukken verbergen we de randen en stellen we de straal in op 0.

Pak ten slotte het browservenster en de header-symbolen en sleep ze helemaal naar de bovenkant van de stapel.

Werden gedaan

Zo creëer je in zestig seconden een lo-fi UI-prototype! Zorg dat u meer informatie over prototyping vindt in Sketch on Themeforest:

Wireframing Schets app-sjablonen op Themeforest