The complete guide to website wireframe design - Chapter 7

20 inspiring web and mobile wireframe examples

wireframe examples web and mobile header

Take a look at our top 20 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’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 wireframing 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.

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 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.

Start wireframing web and mobile apps with Justinmind
Download Free

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.

Alternatively, you can also head over to our prototype and wireframe examples page and get inspired about what you can do with Justinmind.

Awesome website wireframe examples to inspire you

1. Real estate agency website wireframe

Designed by Kira, this wireframe is a great example for real estate agencies and realtors. The design features a large hero image, and places particular importance on the search filters to improve the user experience of searching for property. We love that the design accounts for market data, such as statistics and real estate trends.

Wireframe example for real estate agencies

2. Beauty and fashion website wireframe

The fashion industry is known for stunning aesthetics, glossy magazines and, arguably, a whole lot of critique. Websites catering to these fashionistas have a lot to live up to! Egyptian UI Designer, Mahmoud Khaled Deiab presents his fashion eCommerce design here, starting with some sketches, and working up to a visual website wireframe example of the final design.

wireframe-prototype-example-beauty

What we find most interesting in this wireframe design is the use of space. Deiab has used the grid layout, allowing for easier readability and scannability. His use of whitespace helps to establish visual hierarchy between elements.

Additionally, his carefully chosen typography is an interesting, realistic compromise offered in the otherwise static, grayscale wireframe.

3. E-commerce website wireframe example

Innovations in online and mobile eCommerce are paving the way for users to perform advanced operations, such as national and international transfers, and receipt tracking on the go. Getting mobile apps and websites right the first time is essential, and we’re seeing tons of great wireframe templates and design models as a result. Below is our pick of the bunch.

wireframe-prototype-example-banking

Built by Jacopo Spina and showcased on Behance, this website wireframe example is a great representation of a custom eCommerce mobile website. The use of blue and white provides the necessary contrast between visual elements. Jacopo has used real content, such as the bottom navigation list to give users a realistic view of how the end product might look.

In his own words: “The wireframe has been designed as a default template for an e-commerce website, respecting the classic interface design, usability, call to actions, break lines but dividing the content for a perfect, smooth and crisp design on mobile and tablet devices.”

4. 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.

5. Shopify webpage wireframe example

Shopify is a massive eCommerce platform with over 600.000 different merchants in 2017. And so, it should come as no surprise that we could find some great wireframe examples out in the virtual wild, that make the most of the platform – and show off some great UX design skills by the designer.

Example of wireframe design for shopify online store

Designer Janna Hagan created this wonderful wireframe that showcases how a well organized wireframe can illustrate the strengths of the shop and the platform. As you can see, these wireframes are quite developed and even have some visual components that evoke the finished project.

6. 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?

7. 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!

8. 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

9. Health/wellness wireframe example

Melbourne-based design agency Alyoop designed this wireframe to show the layout design of a dashboard.

The design referred to wellness and health tool Back to my Body, and displays the dashboard that shows users all the most important content, such as the meal log in the shape of cards.

example of website wireframe for dashboards - health tool

This wireframe example accounts for users classifying their logged meals, letting the product know their tastes and preferences. That labelling system improves the usability of the product even further.

10. 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.

Awesome mobile app wireframe examples to get the ball rolling

1. 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!

2. 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. Melnyk’s inclusion of the user journey from start to finish.

3. 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

4. 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!

5. 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.

6. 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?

7. 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.

8. 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

9. 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!

10. 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

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
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers