UI Mock-up Templates to Create Unique User Interfaces

A UI mockup is a realistic representation or a visual draft of the design of a website or a web/mobile application. A UI mockup reflects the app’s or the site’s design elements, such as the color scheme, images, logos, typography, buttons etc., hence representing the final appearance of the app’s interface.

Following are some helpful UI mockup templates that are created professionally using Creately’s UI Mockup Tool. You can use them to illustrate the user interfaces of websites and mobile/website applications you are designing. Simply click the template to use it as a template or edit it online.

UI Mockup Template of a Sign in Page

This template is a basic member login mock-up. It includes two fields to enter member login information and a signup button for those who are not members yet. In addition, there is also an option for those who have forgotten the login password. Simply click on the image to make any changes that you want or to use this as a template.

UI Mockup Template of a Sign in Page

Click on the image to edit online

UI Mockup Template of a Web Store- Shopping Cart

This template shows a UI mock-up of a Webstore or an eCommerce website, more specifically of the shirts category page under the Men’s section. You can use this template as an inspiration to create a new eCommerce website UI mock-up. Click on the image to change the details as it fits the requirements of your very own online store.    

UI Mockup Template of a Web Store- Shopping Cart

Click on the image to edit online

UI Mock-up Template of a Web Page

The following template represents a UI mock-up of a website page (the Homepage of the website).  It is a simple tab style website, with a header (where the tabs are displayed), a sub-header (where a header image can be displayed) and a footer (where links to other landing pages could be displayed).

In between the header and the footer, more details are presented in a user-friendly manner. You can use other web UI controls available in the app to edit the template to match your needs. Simply click the image and start modifying online.

UI Mockup Template of a Web Page

Click on the image to edit online

UI Mockup Template of Apple eMail Client – Compose Screen

Here is a UI mockup template of the composer screen of the Apple email client. The necessary OSX controls you need to design OSX applications are available within the app. Click on the image to use this as a template or change it according to your requirements.

In case you are also designing an iPhone application, here are some iPhone UI Mockup Templates to help you out.   

Mockup Template of Apple eMail Client - Compose Screen

Click on the image to edit online

UI Mockup Template of a Blog

This is a UI mockup template of a blog page. You can find more UI controls such as social share buttons, blog posts, breadcrumb links, menus etc. that are needed to design blog page UI mock-ups in the app. Click on the image to edit the template as per the requirements of your blog design.

UI Mockup Template of a Blog

Click on the image to edit online

UI Mockup Template of a Website Contact Form

The UI mockup template below is of a website contact form. The essential contact information such as the address, email address and a contact number is added on the right side. Below these details is a map marking the location of the business. On the left side of the page is a contact form that visitors can use to book an appointment. Click on the image to edit this template according to your needs.

UI Mockup Template of a Website Contact Form

Click on the image to edit online

UI Mockup Template of a Twitter Page

The following UI mock-up template shows a Twitter page (for a personal or a business account). Creately offers all icons necessary to create UI mockups for commercial applications such as Twitter. Simply click the image to use it as a template and modify it according to your own design ideas.

UI Mockup Template of a Twitter Page

Click on the image to edit online

UI Mockup Template of a Software Installation Wizard

The following template represents a UI mock-up of a software installation wizard. Wizards, which are commonly used to install software, describe the steps in an installation process of a software. This template shows one such step, and the UI mockup templates of the following steps are linked to it to simulate the real time scenario (click the ‘Next’ button to access the next template). Click on the image and proceed to modify it as you want.   

UI Mockup Template of a Software Installation Wizard

Click on the image to edit online

UI Mockup Template of a Facebook Page

Here is a UI mockup template of a Facebook page. In the designing process of a social media application such as Facebook, you can quickly design  UI mock-up templates like this with the help of the app. Click on the image to use this as a template or adjust it as you want.

One of the UI Mock-up Templates Available in Creately

Click on the image to edit online

UI Mockup Template of a Payroll System

The UI mockup template below is of a payroll system for Windows operating system. Functions such as calculating salary, over-time etc. are presented in the template. You can edit the template and add more functions to the system using the icons available in the app. Click on the image to start editing.  

One of the UI Mock-up Templates Available in Creately

Click on the image to edit online

More UI Mockup Templates

Creately’s easy-to-use UI mockup tool and professionally designed UI mock-up templates will help you get started on your own website design or application design right away. If you are looking for a bit of inspiration or help, do check out our community for unique ideas contributed by our users as well.  

More Diagramming Templates

 

Author

Amanda

Amanda Athuraliya is the communication specialist/content writer at Cinergix, the team behind the development of the online diagramming tool, Creately. She is an avid reader, a budding writer and a passionate researcher who loves to write about all kinds of topics.

Leave a Comment

*
*

This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 9 approved comments. Use your real name and then @ your keywords (maximum of 3)
Back to top