Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!


Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free


Handoff Designs with Accurate Specs, Assets, Code Snippets Automatically.

Get Started for Free

23 Best Mobile App and Website Wireframe Examples For Inspiration

Mockplus Team 326312 Views

The 23 best wireframe design examples for mobile APP and websites are special for UX/UI designers. You’ll definitely get wireframing inspirations from it.

How to quickly present your ideas at the very beginning of a product? Most UX/UI designers tend to do a quick wireframing. That’s a really wise choice. But how to do a productive wireframe design? Where do you go for inspirations? You prefer using wireframing tools or just pen and paper? Those are the questions I’ll answer for you with the 23 Best Mobile App and Website Wireframe Examples.

Part 1: Mobile APP Wireframe Examples

Below I will introduce you some excellent wireframe templates covering subjects of profile, weather, music, sports, community, food, etc. Hope you can be inspired by them.

1. TickTick

Type: Task management App, Tool


TickTick is a powerful task management app with a particularly excellent animated tutorial. This tutorial adopts the way of interacting with users and adds a real mobile phone interface together to guide them.

2. ColorfulClouds

Type: App, Weather


ColorfulCloads is a beautiful weather app which can accurately forecast the future rainfall, air pollution and more weather conditions. The most beautiful part of this app is a flat weather illustration on its Homepage. Pages of this prototype: Login, Home, Weather & Pollution, Weather, City, Help and Settings, etc.

The project file can be downloaded here.

3. Onefootball

Type: App, Sports


Onefootball is an app for football fans and offers breaking news, statistics, scores and live videos of over 100 international football leagues and competitions. The first page named “Favorite Team” has a floating button that could be easily approached by using a Scroll Box component to set a rolling football team list and then adding a button above the scrolling area.

The project file can be downloaded here.

4. WeUI

Type: App, Community


WeUI is an excellent community APP wireframe example. The key features of WeUI are the notification and upload, operation succeeds, form error, etc. The icons and shapes can easily get from the Mockplus icon library.

The project file can be download here.

5. Qello-Concerts

Type: App, Music


Qello Concerts is a unique Music App wireframe example. The main pages including home, spotlight, top watched concerts, new releases, browse, etc. This work can be done quickly by using popup panel, sliding drawer and other pre-designed components.

6. Recipes

Type: App, Food


Recipes is an App designed for your delicate life, where you can find the recipes you need quickly. High-quality food images on the first page catch your eyes. The procedures of this food are within reach. In this App, the designer use sliding menu, which can be realized with the Sliding Drawer component in Mockplus. Besides, the auto image fill feature helps you to make such a beautiful prototype quickly.

The project file can be downloaded here.

7. Way of Life

Type: App, Management


Way of Life, as its name suggests, is an App which helps you record and manage life. For people who are not very good at managing time, such application often works a lot. In this prototype, a time picker is used to set the alarm clock and some scrolling numbers are used to set hours and minutes. And in Mockplus, in order to make such a time picker, you can use the Scroll Box and the Text Area together to have scrolling numbers, set a transparent background in Scroll Box and use a line component to box these numbers.

The project file can be downloaded here.

8. Swipes

Type: Efficiency tool APP


This is an efficiency tool App, which helps you record things and improve work efficiency. The prototype below mainly consists of the Login/Signup page and other essential pages. Usually, we encounter this situation in a Login/Signup page: enter the password and the Login button will change color and turn to clickable.

The project file can be downloaded here.

9. South Devon Accounting

Type: Service, App


This is an App which offers accounting and business consulting service. The layout is clear and simple, with the main menu consist of icons and characters. To build this menu I use the icon button component in Mockplus directly since it I can edit both icon and text on it. Besides, it has various styles for me to choose. Accompanied by a rich component library, I can build a menu like this easily and quickly.

The project file can be downloaded here.

10. Encode

Type: educational App, Tool


Encode is an educational App, where people can learn coding. The color of this App is system-oriented and the layout is simple and clear. The first page mainly consists of the list and one can make such a list quickly with Repeater in Mockplus. Besides, it is a long page so people can view more information by swiping the screen. This can be achieved in two ways: first is the small red slider on pages in Mockplus, the other is the Scroll Box.

The project file can be downloaded here.

11. Weather App

Type: APP, weather

Weather App

Weather App is made by designer Matt Sclarandis. He did this initial design in Adobe Illustrator and Photoshop. And the actual functioning application was programmed in java.It is a collection of wireframes and design for desktop and iPhone weather application.

12. Mobile Wireframe Kit

Type: Mobile

Mobile Wireframe Kitt

Mobile Wireframe Kit helps you work smarter with symbols to generate mockups with 90+ mobile screens and hundreds of elements . It’s also delivered with flowchart templates, great for UX flows or presentations. And as always, the kit is well-organized. Each individual layer has been meticulously named and all screens are sorted in a collection of 16 categories.

The project file can be download here.

13. User Profile Concept

Type: Profile


This wireframe example was made by Tomasz Sochacki, a really talented designer. On the Behance page, you can also find the visual design、the chosen version and the final version of this project.

The project file can be download here.

Part 2: Website Wireframe Examples

1. Global Sources

Type: E-commerce

Global Sources

Global Sources is a typical E-commerce website wireframe example. It contains several main pages, including home, categories, login, messages, etc. Every commodity can be displayed in the central area with rich information orderly. The navigation is flexible and useful.

2. So Stereo

Type: Web, Music

So Stereo

So Stereo is a simple and enjoyable music web wireframe example. It contains pages of home, search, discover, faq, privacy policy, terms of service, etc. The best part is you can submit music you love to it by simply click the“submit music” button.

The project file can be download here

3. EdX

Type: Web, Education


Edx is a quick wireframing example of education. It only wireframes with basic frames and elements. The main pages include entrepreneurship, courses, programs, school & partners, about, etc. A good example of any kind of educational institute or online courses.

The project file can be download here

4. StyleXstyle

Type: Web, Fashion


StyleXstyle is a really stylish fashion web wireframe example. It has the basic pages like details, login, charity auction, profile, etc. Each page is well-designed and every element is placed orderly. User can easily navigate to what they want.

The project file can be download here

5. Valet

Type: Web, Enterprise


Valet is a general website of enterprises. When designing a web prototype, mouse hover interactions are often used. In Mockplus, you can make these interactions easily with the stateful interaction feature. The only thing you need to do is to click the little “lightning” icon near the color, border, text and so on properties with stateful interactions, and then you can easily set the effect when the cursor passes it or when mouse down.

The project file can be downloaded here.

6. Fedena

Type: Web, Software


Fedena is all-in-one school management software and school management system with features like timetable, attendance, parent-teacher-student communication and more. The main pages are the register, login, forums, download, contact, etc in this wireframe example.

The project file can be downloaded here

7. The Value Engineers

Type: Web, Official Website

The Value Engineers

The Value Engineers is a strategic brand consultant with expertise in branding, strategy & innovation, underpinned by insight. The main pages of this wireframe example include home, about us, who we work with, contact, details, etc.

The project file can be download here

8. Caza

Type: Property Listing Website - Branding + Wires


This wireframe was designed by Waseem Arshad, a designer from Dubai. He holds the opinion that an upcoming property listings website, its going to be clean, intuitive and responsive. The wireframes are quite detailed and explain the workflow clearly.

The project file can be download here.

9. 3M Innovation Website

Type: Innovation

3M Innovation Website

This site attached to, integrated with and shaped a responsive platform for The innovation site represents a digital home to the physical innovation centers across the world. It tells the stories and highlights the technologies that have allowed 3M innovation to advance human growth and potential.

10. Wireframe for website

Type: general

Wireframe for website

The wireframe for websites example was made by Sanjay Patel. It is a general website wireframe that could be used for kinds of purpose. The layout is quite clean and simple, and all the elements are kept in good check.

Part 3: What Is the Best Wireframing Tool?

Most of the above wireframe examples are made by prototyping/wireframing tools, and few are just sketches by pen and paper. If you prefer a screen wireframing, you’d better master a quick wireframing tool. The first I’d like to introduce is Mockplus, a simple & clean tool makes you focus on the design instead of spending time on learning it.

1) Choose components and icons from Mockplus to quickly get started

Mockplus has more than 200 components, 3000 SVG icons, abundant templates and demos. Just drop them into your canvas freely. Mockplus also it supports to export MP file from Sketch directly.

2) Unique and sweet design to boost your design

The visualized Format Painter, which can paste style to any content with just one click, the Repeater, which can free you from making the same miscellaneous adjustments, the Auto Data Fill, which can automatically fill all selected images or contents at once with simple clicks, etc.

Auto Data Fill

3) Create interactions visually with simple drag-and-drop effortlessly

Do fast interaction design? Then you won't miss Mockplus. The whole interaction design is totally visualized, just with a simple drag-and-drop, you can build interactive wireframes and prototypes just right. The interactions in Mockplus include Page Link, Components Interaction and Interaction State. Also, it's Auto-recovery can bring you more convenience.

4) Various ways to test out your wireframe on native devices at once

Mockplus has 8 ways to share and test out your wireframes or prototypes. Whether on the mobile, browser or desktop platforms, you are in the freedom of choice. Never be limited to platforms or network anymore.

More wireframing tools: 5 Free Quick Wireframe Tools For UI/UX Designers.

That’s all of it. Hope the 23 wireframe examples will inspire your innovation and help you to create something beautiful and useful. Thanks for your time.

You may also interested in:

20 Best Examples of Portfolio Design Websites That Bring You Inspiration(Updated)

18 Free Excellent User Persona Templates You Can't Miss Out

25 Best Free Personal Website Templates and Resources



Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here