How to Create a Website Mockup

When it comes to web design, there are two types of mockups that you need to be aware of. The first type of mockup is the concept design of the website you make to get your client’s approval. You can use wireframing tools and mockup tools to create these website mockup designs.

The second type of mockup is the one you use to present your design to clients. It’s sort of like the beautiful frame an artist would use when showcasing their artworks. Mockup templates feature pre-made layouts for easily placing your website design to present them in a professional way.

While these are two different types of mockups, both need to work well together to make a successful web design proposal and win over your client.

5 Website Mockup Tools

Back in the day, designers used Photoshop to create website mockup designs. This was a painful and a time-consuming task since you had to manually design everything from scratch in Photoshop.

Today, there are many amazing apps and tools for creating wireframes and mockup designs with ease. These tools include pre-made design elements, like buttons, grids, image placeholders, and more that you can easily drag and drop onto a canvas to create your own website mockups and user interfaces.

Here are 5 of the best tools for creating website mockup designs.


  • Price: $12 per month

Framer is a versatile mockup tool for Mac you can use to create all types of layouts, including website mockups, app user interfaces, and web app interfaces. The mockup editor of Framer is highly interactive and automatically adapts to the changes you make. Framer also features a unique drawing tool for creating custom icons. And more.


  • Price: $9 per month

Balsamiq is a powerful “rapid wireframing tool” that works on the cloud and as a desktop app. This tool is ideal for creating a quick sketch-like mockup of your website or app design and create a wireframe layout for your design. It also lets you choose between two design styles. You can either create wireframes in a hand-drawn sketch style or use a clean wireframe design.

  • Price: Free or $16 per month is a wireframing tool that comes with a minimal user interface to let designers focus on designing mockups without any distractions. The tool features a drag and drop editor for creating mockups for mobile phones, tablets, and web. You can also add annotations to your mockup designs as well.


  • Price: $13 per month

Moqups is an online app for creating mobile app UIs and website mockups. The tool not only lets you create wireframes and mockup designs but also allows you to create interactive prototypes of the designs to show to your clients how the final design would look like.


  • Price: $199 per year

Mockplus comes with more than 200 pre-made UI components for creating rapid prototypes of websites and apps using a drag and drop editor. It has a beginner-friendly user interface that’s easier to learn and even lets you test drive prototypes on native devices with a simple QR code scan.

50+ Website Mockup Templates

Once you have your mockup design ready, you can use a mockup template to present your design to your client. Or even showcase it on your own portfolio.

You don’t have to spend hours creating a mockup template. Simply browse and pick a template from this collection. These templates come with smart objects allowing you to paste your design onto the template with just one-click using Photoshop.

The Perspective Website Mockup

This modern perspective mockup template not only comes with 11 different perspective views for showcasing your design, but it also allows you to easily create your own perspective workflow as well. You can easily drag and drop your website designs into this mockup to present them in a beautiful way.

Isometric Website Mockup

This perspective website mockup also includes a nice MacBook mockup that allows you to showcase your website in a professional way. The mockup template includes 6 mockups with different perspective views in easily editable PSD files.

The Screens – Perspective PSD Mockup Template

The Screens is a perspective screen display mockup, which you can also use to showcase your website on an iMac screen. The mockup includes 3 different perspectives. The PSD files are equipped with smart objects for placing your website mockup in the template with one-click.

Perspective Presentation Web Mockup 08

Another modern perspective website mockup that’s ideal for presenting your website designs to clients or showcasing designs on a portfolio. This mockup also features separated shadows and changeable backgrounds as well.

Beautiful Free Perspective Website Mockup

A high-quality perspective website mockup featuring 3 display sizes in isometric view and it also comes in 300 DPI. It’s hard to believe this template is free.

3D Web Showcase Mockups

The great thing about presenting websites in perspective mockups is the ability to give your designs a 3D view. This mockup pack includes 12 of those 3D-like mockups that give different perspectives to your website designs.

Perspective Presentation Web Mockup

This mockup allows you to showcase your designs in 2 different styles. One standing up and the other laid down. Both featuring perspective views. The mockup comes as a 3000 x 2000 resolution PSD file.

3D Desktop Screen Mockups

Another perspective website mockup with a 3D view. This mockup is designed for showcasing website designs on a desktop screen. The pack includes 9 mockups with different perspective views and changeable backgrounds.

Perspective Web Mockup 16

A professionally designed perspective website mockup for showcasing full-length website designs. This mockup lets you showcase different pages of your web designs all in one mockup presentation.

PSD Web Showcase Mockup 02

This is a collection of several different website mockup templates that are suitable for various types of website presentations. It includes tablet mockups, iMac mockups, and more for showcasing your designs in perspective view.

Perspective Web Mockup 05

Whether you’re looking for a mockup to showcase your web designs in a portfolio or include in a presentation, this mockup will definitely come in handy. The mockup template comes in a PSD file with separated shadows and well-organized layers.

Perspective Web Mockup 17

This website mockup template has an interesting perspective view. It actually looks as if the mockups are stick to a wall or a ceiling. It’s great for giving your presentation a unique look.

PSD Web Showcase Mockup

Another set of 3D-style website mockups that includes several different perspective views as well as device mockups for showcasing your web designs in various ways.

Perspective Presentation Web Mockup

This perspective website mockup also features a unique view, allowing you to use it for showcasing websites or different features of an online service on a website homepage. The template comes in a fully-editable PSD file in 3000 x 2000 resolution.

Perspective Website PSD Mock-Up

A stunning free perspective mockup template to present your website design. Despite being free, this template features a professional and a premium look that makes it worth downloading.

Perspective Presentation Web Mockup 09

This mockup gives your website designs a close-up view with a perspective. The template comes in 3000 X 2000 resolution with fully layered smart objects and changeable backgrounds for easier customization. It also includes a pre-designed template to help you get started quickly.

Perspective Web Mockup 14

Another perspective mockup that lets you showcase your designs in a more artistic way. This template will help you highlight the best parts of your website design. The mockup PSD file is fully editable and comes in 3000 X 2000 resolution.

Free Perspective Web Mockup

This free mockup template also comes in high-resolution and features a wide perspective view to give your designs more exposure.

3D Isometric Perspective Mock-Up

An uncommon mockup with a 3D isometric perspective. This mockup comes with a single perspective view, but you’ll be able to customize and use the template however you like. It’s fully layered with smart objects.

Free Perspective Website PSD Mockup

Another free perspective mockup template for showcasing your simple designs. The PSD file is fully layered with smart objects for easy customization.

Perspective Presentation Web Mockup 07

The unique perspective views used in this mockup template will give you a feeling like you’re staring at a design at an art gallery. It will help your website designs to look more attractive when presenting to your clients. The PSD file can be customized to your preference as well.

Freebie – Perspective Website PSD Mock-Up

A high-quality free mockup template featuring a unique perspective view for showcasing your website designs in your personal portfolio or client work. This template also comes fully layered and organized with smart objects.

Perspective Web Mockup 11

This mockup also comes with a pre-made PSD file for easier customization. The design itself features a perspective view that gives you a clearer view of your website design. It’s fully layered and comes with a separated shadow, which you can keep or remove if you like.

Web Page Mock Up Collection

This gorgeous collection of website mockups includes a set of perspective templates for showcasing your designs in many different views. You can download and use this template for free, as long as you give credits to the original author.

Perspective Web Mockup 13

Another perspective mockup that you can use to present your designs in a vertical view like a stack of cards. The template is fully editable and you can easily copy and paste your website design into the PSD without any effort.

Website & iPhone 5 3D Display Mockups

A two-in-one collection of website mockups and an iPhone 5 mockup. The website mockup templates in this pack feature perspective views and can be customized to easily present your own designs. The template pack is free to download.

Perspective Web Mockup 01

This perspective mockup seems perfect for showcasing your different website designs in your portfolio. It can also be used to present designs to your clients as well. The template is fully customizable with adjustable shading and shadows.

Free Webpage Mockup PSD

Another free perspective website mockup template for quick and easy project showcasing. This template features a professional design that will make your website designs pop. The template is free to use with attribution.

Perspective Web Mockup 15

A rather minimalist perspective mockup template for presenting minimal and modern website designs. This template features a blurred effect that you can use to highlight the main parts of your website design.

Free Web Page PSD Mockup

Web designers say that above the fold is the most important part of a website design. This free mockup template will help you highlight that important part of your website layout. The template is also fully equipped with smart layers for easy editing as well.

Perspective Web Mockup 12

This mockup will make your website designs look as if they are hanging from a wall. The perspective design of this template will also make your designs stand out from the crowd. The template PSD comes in 3000 x 2000 resolution.

Website Layout Design Showcase Mock-up PSD

A high-quality perspective website mockup PSD with full layers and smart objects. The best part is this template is free to download and you can use it for both your personal and commercial projects.

Perspective Web Mockup 07

This perspective mockup comes with two views to help you showcase your designs in more than one way. The template is fully customizable and you can easily change the background without harming the perspective view as well.

3D Website Display Mockup

This unique perspective mockup pack comes in 2 versions, a 2000×1900 pixels version and a 4000×3800 pixels version. It includes 15 3D perspective mockup files, along with 3 Macbook Air mockups and a Safari browser mockup.

Take your design presentation to the next level by showcasing your website design on mobile and desktop devices. Check out our handpicked collections of iPhone mockups and MacBook mockups for more.