How to turn pre-designed Showit Wireframes into web pages


I recorded a quick video to show you how you can turn the pre-styled Showit Wireframes into a functional web page.

But before I move onto the planning and design I just wanted to give you a quick background of the Showit Wireframes. I created the Showit wireframes based on my design sprint research. I surveyed several designers and the majority of them came back saying that they prefer to design their clients websites directly in Showit and miss the prep work like sketching, building wireframes in third party programs — like XD, Figma or Sketch, turning those into visual design and then developing the website in the Showit, they skip this process. So based on this research I realised having pre-styled sections in Showit can really benefit designers. It can help you to streamline your design process, safe your time and make you more money because you are not building every section from scratch for desktop and mobile because the canvases are already pre-build.

So as I mentioned above, the wireframes are basically pre-build Showit canvases you can choose from when mapping out the layout of each individual page. They’re really easy to use, you just stuck them one on top of the other like you would be building a house using lego bricks. 😊

01. Planning

Planning the page layout is really important. My approach to web design is all about simplicity. I still like to follow some points of the traditional design strategy like doing a quick sketch of my idea, then transferring that into wireframes and then creating the visual side and designing the website in Showit. But I am all about simplicity and therefore the wireframes can really help me map out the page and the website layout really quick. As I already saved all sections as images all I have to do is just pick the ones I’d like to use for the page and pop them into Adobe XD. I use XD for my prep work because it allows me to create the style sheet with all colours, fonts and any components like graphics and icons I might be using for the site design. However, you can use any program you are comfortable with like Illustrator, Photoshop, Figma or Sketch.

02. Design

Once the planning is done I move onto mapping out the page layout in Showit. This is a really quick process because all I have to do is just mirror the page layout I created in XD using the section names and find them in Showit. To do this I just go to “My Library” and find the website for each category and pick the section I want to use. A piece of quick advice: make sure you choose to apply your fonts and colours and do this for all Showit canvases I’d like to use for the web page design.

Now that the foundation of the page is finished, I can start restyling it with my content like images and the copy.

Building a web page using the Showit Wireframes Kit is super easy and really quick. The mission is to help Showit designer streamline their business and make an income while making an impact.

Watch the video below to see how easy it is to turn pre-designed wireframes into a fully functional website.

Video Breakdown

Intro – 00:05
Planning – 01:50
Navigation Design – 07:35
Cover Design – 12:27
About Design – 16:20
Services Design – 19:54
Testimonials Design – 32:52
Blog Design – 35:05
Contact Design – 38:46
Footer Design – 43:32
Outro – 49:33

Leave a Reply

Your email address will not be published.