Justinmind-logo

40 inspiring web and mobile app wireframe examples

April 01, 2019
wireframe examples web and mobile header

Take a look at our top 40 favorite wireframing examples to help you create the ultimate web and mobile app designs

On the hunt for some UX design inspiration? We have you covered! We’ve scoured the web for the most creative wireframe examples. We know that those first steps in the creative process can be quite tricky – and inspiration is a key factor in it.

Start wireframing web and mobile apps with Justinmind. It's Free. Unlimited projects!

We’ve got everything from banking, beauty and healthcare website wireframe examples to travel, leisure and weather app wireframe mobile app examples. Check them out below!

Wireframing your website and mobile apps with Justinmind

Creating a wireframe at the beginning of your design process is always a good idea. At this stage, you can afford to keep things simple and even make a few mistakes. This is the moment when, hopefully, you will see all your grave mistakes in the structure of your design. Just in time to fix them before doing so becomes very expensive and troublesome.

Sketching before wireframing

There are designers that even add in a preliminary step before they start wireframing. The so-called sketch is basically a drawing of the wireframe before you actually create it digitally. At Justinmind we also offer a Sketching UI kit, that has all your favorite UI components that resemble a drawing made by hand.

sketching wireframe user experiences prototyping tool ui kit

Just drag and drop the components to get a quick grasp of your design before you commit to a real wireframe.

On actual wireframing

Once you have a sketch (analog or digital) it is time to get to the wireframing. This step of product development doesn’t sound too taxing, it does require planning and the right equipment. When was the last time you saw a contractor just start building a house without a blueprint or the right machinery?

That’s why we believe that having the right wireframe tool is crucial. It will save you a lifetime of worrying about how you can put the elements together, how each screen relates to the other, or how the hell you are going to share your work with other stakeholders.

wireframe tool wireframe ui kit customized

Another factor to consider before you start is the need for the right UI kit. Like our sketching UI kit, a proper UI kit will come in handy when you get the design going. Don’t waste time searching the internet for the right square placeholder, buttons or classic icons. Another good point is to always keep the information architecture in mind as your design evolves.

We recommend you find a UI kit that you can work with, and keep it within reach throughout the wireframing process.

At Justinmind, we have two UI kits that are massive hits among our users:

  • The Web wireframing UI kit is extensive, with over 500 different UI components. It includes everything from different types of buttons, data lists and ready-made sliders to pricing tables. It’s a one-stop-shop for anything you could need for creating your wireframe the quickest and most practical way possible. Learn more about it here.
  • The Mobile wireframing UI kit serves the same purpose but focuses on elements better suited for mobile devices. You’ll find everything from icons, notification components, numeric keyboards to maps. You can learn more about it here.
free-mobile-wireframing-ui-kit-ios-android

When it comes to building a wireframe, Justinmind makes it as easy as possible. Aside from the UI kits, the website wireframe tool comes with several other advanced features that can take your design to the next level:

Create high-fidelity, interactive wireframes: step up the fidelity of your wireframe and even cross the line into prototyping by adding the key interactions of the product. With Justinmind, you easily build on your wireframe, and come to a fully-functional website or mobile app prototype.

Use parallax scrolling: Parallax layouts can give your design a sense of depth by using different speeds for the background and foreground. Use pinned elements to create fixed components of the design that stay at a certain spot as the user scrolls.

Have data-driven design: Some designs need to simulate how the product would act with different types of data. Use dynamic data lists and grids to replicate conditions – and obtain forms that behave like the finished product.

Put the widget library to good use: Just like the UI kits mentioned above, Justinmind has plenty of other ready-to-use UI kits – all of which are free, and carefully designed to suit your needs. Covers both mobile and web design components.

Get the rough drafts out of the way before you start to build up to high-fidelity prototypes – this is where your visual and interactive design elements get refined. In our examples below, you’ll see a selection of rough and refined wireframe examples.

Awesome website wireframe examples to inspire you

1. New project sketch wireframe

It’s no secret that wireframes have very humble beginnings, with most of the initial design being made on paper. We love that this sketch wireframe example also shows the reasoning and nature of each section of the website, because it showcases how UX design calls for strategy and planning. This wireframe example is all about creating a foundation of the design that respects the goals of the project, showing us how UX designers see past the pretty visuals.

paper sketch of website wireframe example

2. Getting wired up: wireframe example

This is a wonderful wireframe example, because it shows an aspect of UX design that can be often overlooked or misunderstood. The designer, JT Grauke, shares that the wired up wireframe was created with close collaboration with the folks in charge of content strategy and copywriting.

wired up - wireframe example of a website

It goes to show that wireframing can also be done in order to reflect and promote the content in its full glory. Of course, other things like visual hierarchy are done beautifully in this wireframe, showing us the best of both worlds!

3. High fidelity wireframe example

What we love about this high-fidelity wireframe is that it manages to organize complex information in a way that isn’t overwhelming. As most designers will tell you with a sigh, creating a dashboard that can be easily understood is no walk in the park. Translating data to more visual means like a graph or map can make a huge difference, which this wireframe example does beautifully!

website wireframe with example of clean layout

4. Earth Tribe wireframes

This wireframe is a prime example of making efficient use of the available space. With a clear separation of sections, along with the use of both cards and a grid – the Earth Tribe Wireframe shows us the best aspect of wireframing. We love that the structure leaves plenty of empty space, giving the eye a bit of rest.

example of wireframe by earth tribe

5. Method 4 react wireframe

This is a very interesting wireframe example. It’s high-fidelity, including all the main visuals and offering a great use of the space. The Method 4 react wireframe includes several screens of a website that could easily be adapted to suit any ecommerce or service website. The best of all? This wireframe can be bought on Dribbble and used in your next project.

example of wireframe by method 4 react

6. Website Wireframe Design

This low-fidelity wireframe example shows us the power of content structuring. The screen space is well-divided, with clear sections that are easily processed by the user’s eye. Sahil Bajaj used the zig-zag approach, alternating with modules that place the content on the left and then on the right.

example of website wireframe made with low fidelity

Despite the fact that this wireframe example only enjoys low fidelity, we appreciate the use of real written content. Even without the images, it’s easy to see what the finished experience would be like. It goes to show that using the final (or as close as possible) content is always a good idea.

Start wireframing web and mobile apps with Justinmind. It's Free. Unlimited projects!

7. Source Wireframe (kit)

Brought to you by Max Schneider, this wireframe example is a wonderfully practical resource to have at hand. It focuses the eye on the header, using a very well-planned distribution of the screen space. With a navigation menu at the top-right, the design is a classic homepage example. The best part? The Source Wireframe is available for purchase at the sweet price of $69.95.

wireframe of website example by source kit

8.Ecommerce Website Wireframe(s)

In the ecommerce website wireframe, brought to you by Rafal Cyrnek, we see a great take on content structuring. The design allows for plenty of striking visuals, as well as the accompanying sales pitch. We like the use of white space, which makes the entire wireframe seem easy on the eyes. In this single shot, we can appreciate the different approach to different types of content, from the homepage to an event page.

example of ecommerce website wireframe

9. Services wireframe example - catering

If your client offers some type of service, this wireframe might be the perfect material for design inspiration. Designed by Masadur Rahman for a catering service, this high-fidelity wireframe design shows us the power of simplicity and whitespace.

Wireframe example for services website - catering

Notice how different colors separate the screens that present different information, such as presenting the company or laying down the services they offer. Great work on ensuring good accessibility with the simple navigation bar at the top.

10. Setting page example

This is a classic example of a wireframe that deals with a lot of information. In this case, we have a settings page. We love how Steve Schoger organized all this information, both in the categories of settings to the left and the content itself, on the right. We can see that in each setting category, there’s not only an icon but also a description to help users find what they’re looking for.

example of settings page in low fidelity wireframe

The form itself on the Account page is also an example of a good wireframe design. There’s plenty of space between elements to allow for visual hierarchy, the labels are descriptive and easy to understand.

11. Travel blog (landing page) wireframe example

Designer Zahid Hasan Zisan created this wonderful wireframe which is quite simple in its composition – it doesn’t have visual elements as of yet. But due to the simplicity of the wireframe, we can fully appreciate the smart structuring of the landing page.

Example of wireframe for landing page - for a travel blog

With a navigation menu at the top of the page and the clever positioning of different components such as text boxes, this wireframe is a great example of how to make the most of the screen space you have. You’ll notice plenty of whitespace, which both guides our eye around the wireframe, and gives us relief from the information on the screen. Pretty smooth, eh?

12. Homepage for Marketing agency website wireframe

UX designer Sergei Pikin shared this wonderful wireframe on Dribble – it regards a homepage built for a digital marketing agency. You’ll notice that the design already has the real content and some visuals such as icons and logos.

wireframe example for homepage of digital marketing agency

The design uses color to give a sense of organization and separation of areas. The real images are missing, and were most likely, added at a later stage in the product development process.

The navigation bar at the top gives us a preview into the information architecture and the navigation flow of the whole website – all that, without ever overloading the eye. Impressive!

13. Social media management tool wireframe example

This wireframe shows the skeleton of Sweet.io, a social media management tool, designed by David Kovalev. Notice the use of real content and even a few basic visual components, that give us a glimpse into the final design.

social media management tool wireframe example

14. Containers Wireframe (kit)

This is an interesting example of wireframe design, because of its modular nature. The idea is that Denis Abdullin created several modules, which can be arranged in the most convenient way for each individual page. The wireframe example we see is simply a combination out of many possible ones.

example of website wireframe made with modular design

15. Banking (dashboard) wireframe

This dashboard wireframe, brought to you by Seçil Kalem goes into much more detail and contains complex data, as you would expect from a banking platform. This wireframe design is impressive, precisely because that complex data is presented in a logical and well-organized way to the user.

wireframe example for banking platforms or personal finance tools

As a good dashboard should, the user can see all the crucial information in a glimpse. Using real written content, we can get a real feel of the finished product. This high-fidelity wireframe example, is a great pointer in how to get a lot of information in the same screen in a coherent way.

16. Muscat example wireframe

This wireframe made the list due to its wonderful use of whitespace and strong sales pitch. Yes, we have very little text and most of the experience is left for the visual elements – but that’s ok. Sometimes, online shopping can indeed be a visual experience, and this wireframe design potentialized that. Sometimes, a simple design can be powerful, like in this Muscat wireframe example made by Emil Gleguła.

online store for glasses - low fidelity wireframe

17. Blank Wireframe Kit

This wireframe design is low-fidelity but still enjoys quite a few details. We can appreciate the use of components and elements to clearly divide the space, creating noticeable sections on the page. There’s plenty of breathing room, while still offering a lot of visual and written content.

Even more interesting is that the designer also included the mobile version of the same wireframe, where we can see how elements are prioritized and compressed to offer the same user experience. Brought to you by Craftwork Studio.

wireframe example with great visual hierarchy

18. Wireframing Kit

It’s true that this one is more of a components kit than a wireframe example. However, it still teaches us something about the art of wireframing content. Even with a small amount of content to play with, Denis Abdullin still managed to create a hierarchy and build a good layout. This is a good example of a base that could be built upon with relative ease.

example of website homepage wireframe

19. Source Wireframe Kit

This is another case where designers create UI kits for their wireframes, with their example wireframe featuring on this list. In this case, we particularly enjoy the way Max Schneider chose to display his work. At first, we can see the low-fidelity wireframe which includes the basics but focuses primarily on the layout. Then we can see a finished design, which includes all the details and visuals. It goes to show that a truly good layout design can be a practical resource to have at hand for a large number of websites.

example website wireframe with zig-zag

20. Upshift Wireframe

This website wireframe example, brought to you by Michał Roszyk, comes with a mid-fidelity level, including some of the content but not all the visuals. We can appreciate the division of the space, with a layout that creates separate sections of the page. The header section could be perfect for any kind of high-impact visual, like a powerful sales pitch or a featured article. We love the use of white space, which allows each little element to sing, without ever becoming too much for the user’s eye.

website wireframe for upshift

21. Voom Website Wireframes UX

In this wireframe example, we can appreciate the use of spacing and the clear visual hierarchy of the components. The wireframe enjoys a zig-zag layout, which makes it easy for the user to skim the content with minimum cognitive effort. This wireframe example is brought to you by Karol Woźniak.

example of voom website wireframe

22. Construction Company Wireframes

Another wireframe example that is all about layout and space allocation. The Construction Company Wireframes shows us that creating a defined header area can help us to deliver a powerful argument right off the bat.

example of construction company website wireframe

The wireframe, made by Mathijs Lemmers, follows the classic arrangement of placing navigation links to the left, with the branding to the right. We enjoy the simplicity of this wireframe, knowing that it can be truly illuminating to analyze the allocation of space without distractions.

Start wireframing web and mobile apps with Justinmind. It's Free. Unlimited projects!

Awesome mobile app wireframe examples to get the ball rolling

1. Portfolio wireflow

This mobile app wireframe also offers us insight on how wireframing can be so closely linked to other aspects of UX design. Like some of our previous examples, the portfolio wireflow is all about the marriage of wireframing with user flows and information architecture. To us, this is a wonderful and practical example of how UX design delivers the best results with a holistic approach.

example of portfolio wireframe for mobile app

2. Yes or no app product design

This wireframe is actually a part of a whole project that was posted on Behance, complete with user flows and the finished high-fidelity prototype. The Yes of No wireframe itself isn’t all that visually pleasing – but wireframes don’t have to be. They have to be functional, which this wireframe definitely is. It makes for a straightforward representation of the bare bones and it helps us to appreciate how the final design relies on the wireframe.

mobile app wireframe example for yes or no

3. Mobile Wireframes

This is another great example of a mobile wireframe that knows how to make the most of the limited space. We love the use of a grid system, which helps the screen to offer more information while keeping the cognitive load light. The visual hierarchy is done beautifully in this mobile wireframe example, with elements having a clear relationship to each other, making the entire wireframe easy to understand on the first sight.

example of mobile app wireframe clean interface

4. Low-fidelity wireframes

This is another great ecommerce-themed example. The low-fidelity wireframe shows us several screens of an ecommerce app, going from the login screen all the way to the checkout, all of which enjoy wonderful visual balance. We love that the wireframes use the right types of UI elements to make the most of each step along the shopping experience.

example of low fidelity app wireframe

5. Loan App Wireframe

As we mentioned before, translating hard data and numbers into a more digestible design can be very tough. Simplifying complex things is one of more sure ways to truly test UX designers – and this one passed without any trouble.

example of loan app wireframe

The loan app wireframe is all about handing people bite-sized pieces of data, to make the entire experience of having a loan easier. It’s also about giving the whole situation a feeling of certainty, helping users with the mental stress of the loan itself.

6. Online travel services wireframe mobile app

Siddhartha Pandey has created one of the best travel wireframe mobile app examples we’ve ever seen. His interactive ‘My Journey’ wireframe comes complete with all the trimmings. After being prompted to sign in with social media sites, such as Facebook or Google+, you will select your travel dates and destination from the calendar and drop down respectively.

wireframe mobile app examples travel

Siddhartha Pandey's travel app wireframe on Behance

After passing through the usual screens that other online travel apps and sites require us to fill in, Pandey’s wireframe offers nifty – and optional – extras to fill in, such as the purpose of your trip, inventory filters and the option to purchase travel items ahead of the trip. Nice one!

7. Mobile app wireframing  for online groceries

Digital grocery shopping has soared in recent years, stamping out the drudgery and inconvenience of in-store browsing. But that means that the sites that we buy from need to be quick and easy to use.

Design beautiful and effective wireframes with Justinmind
Download Free

Based on UX research and testing, Volodymyr Melnyk’s clickable online grocery shopping & delivery service mobile app wireframe is very impressive.

wireframe mobile app-examples ecommerce

Volodymyr Melnyk's UX wireframe for mobile app of online grocery shopping & delivery service on Behance

With helpful feature descriptions on the homepage, a smart side-menu, quick login system using social media and latest search options, this wireframe looks like it could compete with many of the online grocery stores currently in place.

8. Social networking mobile app wireframing

ResMed Senior Visual Interaction Designer, Marc Caldwell presents his sensual ‘Logic ‘n’ flow’ online dating wireframe, and it’s everything we hoped it would be. His designs are complete and easy to follow, with forms, labels and content placeholders to provide additional – if somewhat raunchy! – hints to the user.

wireframe mobile app examples healthcare

Marc Caldwell's Logic 'n' Flow wireframe series on Dribbble

9. Weather app wireframe

How about a smart weather app that allows you to demonstrate descriptive weather statuses such as the temperature, pressure, and humidity.

In this wireframe mobile app example below, designed by Matt Sclanrandis, we can clearly visualize each feature that the final weather app will contain. Helpful stats, graphics, and history charts can be put in place, as well as interactive maps, and the forecast around your area.

wireframe mobile app examples weather app

Matt Sclarandis's Weather App Wireframe on Behance

When presenting a weather app to colleagues or stakeholders, we would recommend showing them a clickable wireframe, or mid-to-high-fidelity prototype, so that they understand the functionality as well as the visual structure and attributes. Weather is pretty interactive!

10. Mobile app wireframe for sports and leisure

If you’re unfamiliar with the company, San Francisco-based Boosted makes skateboards with light and powerful electric motors. The team used Justinmind to wireframe and prototype their iOS mobile app last year, and their feedback was awesome!

“Closing the gap between my simpler wireframes and interactive prototypes. I chose Justinmind because it strikes a balance and it’s nailed what I need from prototyping”

									Emilio Gonzalez - Boosted Board’s Senior UX Designer								

Working closely with the Product Engineering team, the designers created a series of paper wireframes before “taking it to the pixels”. After this, the team moved on to create wireframes with detailed user navigation flow. These helped them to fully define each design element, and make sure that everyone – software engineers included – was on the same page.

You can find more about these sketches and wireframes here.

wireframe mobile app examples skateboarding
wireframe mobile app second example
third example of mobile wireframe

You can read more about their journey, and how the final app prototype came to be here in our Boosted Boards case study.

Start wireframing web and mobile apps with Justinmind. It's Free. Unlimited projects!

11. Smart home mobile app wireframe example

This high-fidelity wireframe already has the key animations the finished product. With a simple design that has the visual components but not the color scheme, we can appreciate the simplicity and practicality of the product.

smart home app wireframe example

Designed by Alyoop, this wireframe was even used for user testing. What’s not to love, right?

12. Banking mobile app wireframe example

This high-fidelity wireframe already uses real content but leaves the visual fluff for a later stage in the product development. We like this design, because even though it was originally meant for a price tracking tool, the concept can be applied to most banking and personal finance tools.

mobile app wireframe for banking and personal finance tools

Designed by Kishore, this wireframe example works well to showcase how to display complex data in the reduced screen of a smartphone. The different areas of the screen are well separated, and the design leaves plenty of whitespace to provide relief to the eye of the user.

13. Music mobile app wireframe example

This wireframe by Afshin Mohammadi is a simple and powerful design that lets the practical functionality of the product shine. It showcases how music will be displayed, and how users can explore new types of music using the product.

mobile app wireframe example - music explorer

14. Sports mobile app wireframe example

Designer Reiss created this high-fidelity wireframe for a mobile app that deals with all things football-related. The wireframes we see below are a great example of how we can use real content, and even add some color to wireframes before taking it to the prototype level.

mobile app wireframe example of sports and leisure

In the wireframe, we can appreciate the navigation components and the different aspects of the product. Simple and straightforward – just the way we like it!

15. Education mobile app wireframe example

Another great wireframe example by Kishore – this one, concerning a mobile app that helps parents stay up-to-date on their children’s school work. We love the navigation bar at the bottom of the page that shows us the most crucial features of the app.

education and school work mobile app wireframe example

Start wireframing web and mobile apps with Justinmind. It's Free. Unlimited projects!

16. Tiny Frames

This wireframe example is as low-fidelity as some designers will get. It’s stripped of any visual fluff or minute detail. In part, that is what earned it a spot on this wireframe examples list. When we are free of any details, we can focus on the actual content structure and allocation of space. The mobile screen comes with very limited space, but this design ensures that the most important elements have their place. This wireframe was made by Anton Tkachev.

tiny frames - low fidelity app wireframe

17. Hotel Booking App Wireframe

This mobile app wireframe example portrays a hotel booking app. We love the approach when it comes to displaying the wireframe, with the low-fidelity screens being replaced by high-fidelity design. It goes to show that the gap between low and high fidelity can be indeed immense, but even the bare bones can capture great design. In the low-fidelity wireframe screens, we can sense a product that makes navigating and exploring easy. Made by 11Daniyal.

hotel booking mobile app wireframe as example

18. Mobile Wireframes

In the Mobile Wireframes example, we see how designers can make a mobile screen with plenty of information and content while still allowing things to breathe. There’s a great visual hierarchy at play here, with elements having the right separation between themselves to allow the right interpretation. We can see a total of 3 screens, including the homepage, an About page, and a News page. Brought to you by Patryk Moskot.

mobile app wireframe example

The wrap-up

Dipping your toe in the pond of wireframing before jumping head-first into the deep pool of prototyping is always a good idea. We know that, sometimes, mustering up the inspiration to get the ball rolling can be tough. But hopefully, with these wonderful web and mobile app wireframe examples, you’ll find yourself having an idea or two about how to approach your next project!

WIREFRAME · COMMUNICATE · VALIDATE
ALL-IN-ONE WIREFRAMING TOOL FOR WEB AND MOBILE APPS
Rebeka Costa
In-house SEO manager, usability enthusiast and patron of all sleep-deprived designers