How to Create Beautiful Mockup Designs and Demo for your Blog Using Free Wireframe Tools ?

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools
Free Wireframe Tools
I think you can understand what is a mockup or wireframe by seeing the above image. Now a days wireframes/mockups are expensive way to promote any blog or website in social media. It helps to represent any blog or website with great visuals. As visuals are much attractive than texts, you can attract more people by sharing wireframes/mockups (wireframes and mockups are same thing) on social networking sites like facebook, linkdin, pinterest, twitter etc. You can take your blog's promotion to the next level using these wireframes or mockups. These can be used in facebook cover photos. Not only photo, you can also make demo videos for your blog using wireframes/mockups. In youtube its a trend to add a intro video clip in every video. By this, you can also make youtube intro videos. But in this post I will show only images(not intro videos).

Are you a template designer ? Thats Great. You can make demo pics of your own templates to show your customers.

There are many free and paid tools to make wireframes or mockups for website or blog. But here I am using MagicMockups to make wireframes or mockups for free. Its a good and easy website to create free wireframes. I choose MagicMockups because of its simple design and smooth interface. So lets see how to make wireframes for free...

  • Open MagicMockups in your web browser. It will look like the following image.

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools

  • In the left side you can see some environments. Choose any one among them and click on that environment(pic).

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools

  • Now the environment(picture) will load. In the top there are two options to insert your image. One is 'Upload Image' and the another is 'Capture Url'.

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools

  • Click on 'capture url' option.(If you have a picture then you can upload that)
  • Input your blog url and click on 'GO!'

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools


  • Now it will show 'Please wait...Capturing Screenshot...'
  • After that your homepage will load.

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools

  • Now click on 'Download' and choose an image size among them.

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools

  • It will show 'Please wait...  Your mockup is getting ready'

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools


  • Then click on your disered size button.

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools

  • It will take a new tab to open the wireframe.

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools

  • At last save the wireframe(image) by clicking right mouse button > save image as.
  • A window will appear. Give a name, choose location and click on save.

how-to-create-beautiful-mockup-designs-demo-for-blog-using-free-wireframe-tools
Thats it.

Now you can share this wireframe on facebook by which people will attract by seeing them and will come to visit your blog. Enjoy...

SHARE THIS

Author:

I'm an 18 years aged Passionate Blogger from West Bengal, India. I just love to write articles and share them with people. The day was 28th September 2015, when my dream of having a website comes true and I made this website to help you and peoples like you!

Previous Post
Next Post