Website Mockup Generator with Mobile and Desktop Views

Use wireframe mode to choose page sections, put them in order and compare desktop and mobile layouts. Use device frame mode to place a screenshot inside a browser window or phone frame for a proposal or post. Both modes export a PNG, and your screenshot is processed in your browser, never uploaded.

Device frame limits and screenshot widths
ItemValue
Screenshot formatsPNG, JPG, WebP
Largest upload15 MB, up to 8,000 pixels on a side
Screenshot width for a browser frameAbout 1440 pixels
Screenshot width for a phone frameAbout 390 pixels
ExportPNG at twice screen resolution

Updated

Two tools in one. Wireframe mode plans a page: pick the sections, put them in order and compare desktop and mobile layouts. Device frame mode presents a finished design: upload a screenshot and place it in a browser window or phone frame for a proposal or social post. Both export a PNG, and both run in your browser. Your screenshot is never uploaded.

How it works

  1. Wireframe mode: tick the sections your page needs, move them up and down, and switch between desktop and mobile. On mobile, columns stack the way most responsive sites do.
  2. Export the wireframe as a PNG, or print it and choose Save as PDF.
  3. Device frame mode: upload a PNG, JPG or WebP screenshot (up to 15 MB and 8,000 pixels on a side). Choose a browser window or a phone frame, a background colour and an optional address bar label.
  4. The image is drawn onto a canvas in your browser and exported as a PNG at twice screen resolution.
  5. When the structure is right, send the section plan to the We.Inc builder as a starting brief.

Plan on mobile, present on desktop

Layouts that look balanced on a wide screen often turn into a long scroll on a phone: three feature columns become three stacked blocks, and the pricing table pushes the contact form far down. Switching the wireframe to mobile shows that early, while moving a section is still a click.

Device frames are for the other end of the job: showing a client or a social audience what a finished page looks like. A plain screenshot in a clean frame is usually enough.

Tips

  • Lead with the hero: say what you do and who it is for in one line.
  • Put proof (reviews, logos, examples) near the first button, where people decide whether to trust you.
  • Check the mobile wireframe first. Most visitors to a small business site arrive on a phone.
  • For device frames, take the screenshot at the width the frame expects: about 1440 pixels for a browser and 390 for a phone.
  • Label mockups as mockups when you share them, so nobody mistakes a plan for a live site.

Frequently asked questions

What is the difference between a wireframe and a mockup?

A wireframe is a grey-box plan of what goes where. A mockup shows the finished look, often inside a device frame. This tool does both, in separate modes, and labels each export.

Is my screenshot uploaded?

No. The screenshot is read and drawn in your browser. Nothing is sent to We.Inc or anyone else.

Can I capture a screenshot of a live site here?

No. Capturing another site needs a server running a browser, which this free tool does not have. Take the screenshot yourself (your browser's developer tools can capture a full page) and upload it.

Can I export a PDF?

Yes. Use Print and choose Save as PDF as the printer. The PNG export gives you an image file.

Is the website mockup generator free?

Yes. There is no signup, watermark or limit.

Related: Font Pairing Tool, CSS Shadow Generator, Website Cost Calculator, Business website templates, Website builder.

Turn this result into your website or see the We.Inc website builder. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month, Pro at $49 and Max at $99. See pricing.

More in Free Tools

More on this topic

Product

Who It's For

Features

Resources

Company

View Sitemap