Let’s create a Lo Fi Prototype, in sixty seconds, using the MadKit Sketch UI kit from Themeforest!
Watch the Screencast
How it’s Done
In a duplicate of the MadKit Sketch file (Lo-Fi UI) create a new page. Go to Insert > Symbols > Base > Shapes > Window to create a browser window for our mockup.
Also under Shapes grab a browser-header, and then give your prototype a name.
Content is King
Now we’ll assemble our prototype’s content by using symbols that can be found under Categories (start with a video background cover). Next we’ll add a product list, a testimonials slider, after that we’ll show the latest blog posts, we’ll add some info on the people of the company, then we’ll wrap up with some contact details.
Stretch your window object so that it fits your content:
Now select all six content pieces, right-click in the layers menu, and select Detach from Symbol. In the Video BG object hide the Base/Shapes/window and set the Video Background’s radius to 0.
Now we’re going to hide the window shape for every second piece of content, then for the remaining pieces we’ll hide the borders and set the radius to 0.
Finally, grab the browser window and the header symbols and drag them all the way to the top of the stack.
That’s how you create a lo-fi UI prototype in sixty seconds! Be sure to check out more of what’s on offer for prototyping in Sketch on Themeforest:
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post