Create a Lo-fi UI Prototype in 60 Seconds

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.

Stree-etch

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.

We’re Done

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: