Answer:

Dear student hopes it will help you.

1. Wireframing vs. prototyping

people (even designers) often confuse the terms wireframe and prototype. Do they know that
both are part of the design process, but aren’t they similar in form and functionality? Aren’t they
interchangeable? Aren’t they pretty much the same thing?

Actually, no. Both wireframes and prototypes serve distinct and unique roles in the product
design process. While the main difference between the two often boils down to fidelity (how
closely a mockup resembles the final product), there are other differences in design and
functionality.

What are wireframes?

A wireframe is a low-fidelity mockup that serves 3 simple and exact purposes:

1. It presents the information that will be displayed on the page

2. It gives an outline of the structure and layout of the page
3. It conveys the overall direction and description of the user interface

The key to a good wireframe is simplicity. Remember how one of the main differences between
wireframes and prototypes is fidelity? Wireframes are often low to medium fidelity, ranging
from boxes and lines sketched on paper to onscreen creations that have a more polished look.
Interactivity is at a minimum, so users can test behavior without as much concern for a product’s
look and feel.

What are prototypes?

A prototype is a barebones, relatively simple working model of an app or webpage. They are
typically the next step in the product design process after wireframing. Prototypes typically have
color, animations, and (hopefully) the actual content that will be on or in your product.

 
Unlike wireframes, prototypes are often medium to high fidelity. They allow the user to test a
digital product’s interface and interactions, and this level of functionality can be useful during
the usability testing of an application. Because they often resemble a more finished product, the
time and effort invested in creating a prototype can translate to savings during the development
phase

“Both wireframes and prototypes serve distinct and unique roles in the design process.

So what’s the difference, really?

If you think of your product as a human body, both wireframes and prototypes serve similar but
distinct purposes.

Wireframes serve as the skeleton of your digital product. They’re the base, and they provide a
general idea of the construction of what you’re building. Beyond the layout skeleton of the
design, the content and copy is the muscle of the product. The earlier you have the content and
copy for your design, the clearer the path will be from wireframe to prototype. It’s helpful to
have the actual content in place to make sure everything flows the way you want.

Prototypes are a more visual representation of your product. Think of prototypes as nearly
formed bodies with moldable skin or facial features. Drafting a prototype is like making your
creation suitable for the public. It’s not the final version, but it’s acceptable to show to other
people. This is the point where all you should need to do is make tiny tweaks before you send
your designs over to the engineers who’ll make it real.

Wireframing and prototyping tools

While there are tools out there that can serve as an all-in-one place to go from sketches to
prototypes complete with HTML and CSS, there are also more specialized tools that focus on
each part of the product design process. Below is a shortlist of ones that we recommend
exploring:

Wireframing

 Pen and paper are easy ways to get started with wireframes. Sketching is often the fastest
way to get ideas from your brain out into the world so that you can review, reflect, and
revise. One of the major upsides of using paper is that none of your creations are too
precious. You can always just crumple them up and toss them.
  Wirify by Volkside is a tool that “lets you turn any webpage into a wireframe in one
click.” It’s used less for creating wireframes and more for analyzing pages in a clear,
clear, streamlined way. This is great if you’re auditing an existing page in an effort to
improve.
 Freehand by InVision is like a lightweight, digital whiteboard where you and your team
can collaborate and communicate. The wireframes you create in Freehand are sharable
and collaborative, and using Freehand saves you the tedious steps of scanning and
uploading your hand-drawn wireframes, only to have to do it all over again when you
make a tiny change.

Prototyping

 The sketch is a vector graphics editor for MacOS that is used for screen and digital
product design. It’s known as a (slightly) simpler tool to use than Adobe Photoshop. Pair
Sketch with some of the widely available UI kits, and rapid prototyping just got a whole
lot easier.
 InVision (in case you didn’t know) lets you upload the design files you just created in
Sketch or Photoshop (or, in the near future, InVision Studio) and add animations,
gestures, and transitions to transform your static screens into clickable, interactive
prototypes. You can also simplify your feedback process by having clients, team
members, and stakeholders comment directly on your designs. It’s a one-stop prototyping
shop.

2. 

  How to Make a Wireframe with PowerPoint

Since PowerPoint is an easy-to-access tool, a lot of people take its assistance to meet their basic
designing needs. For instance, if you want, you can work on a new project and use its available
design tool. There are some mockups, shapes, editing tools, and design elements in the
application that would help you create a PowerPoint wireframe.

Besides that, you can also explore any free PowerPoint wireframe template to make your job
easier. There are third-party library assets that you can further include in your application.

While PowerPoint might be a user-friendly tool, it is ideally not recommended to create

wireframes. Firstly, even if you use a PowerPoint wireframe template, you can't improve its
fidelity. The result would only be a throwaway wireframe with minimum details. Also, it will
take a lot of time to work on a PowerPoint wireframe compared to any other professional
designing application.
 

Since creating a PowerPoint wireframe will consume a lot of time and effort, why not consider a
dedicated application like Wondershare Mockitt. This user-friendly and web-based application is
designed to create wireframes, prototypes, and mockups in minutes. 

Wireframing in Powerpoint? It Works!

PowerPoint's widespread availability and improving design capabilities make it a

compelling choice for wireframing.

Wireframing in Powerpoint? It Works!

PowerPoint's widespread availability and improving design capabilities make it a

compelling choice for wireframing.

It’s important for designers to translate the ideas in their heads into a tangible form that
stakeholders can relate to. Prior to writing any code, wireframes are a great way to quickly map
out the functionality and flow of a website or application. This helps anticipate conflicts (“That's
not what I had in mind") early in the process, at a point where they are painless to correct.

Dedicated wireframing tools are in abundance, so you might be surprised that my weapon of
choice for sketching wireframes is Microsoft PowerPoint. PowerPoint makes it possible for
stakeholders and non-techies to participate in the design process. When exchanging PowerPoint
slides over email, you can be fairly certain everyone will be able to view and edit them. The
software’s widespread availability and low barrier to entry make it an excellent communication
tool, able to bridge the gap between developers, designers, and clients.

Wireframing in Powerpoint? It Works!

PowerPoint's widespread availability and improving design capabilities make it a

compelling choice for wireframing.

 
 

It’s important for designers to translate the ideas in their heads into a tangible form that
stakeholders can relate to. Prior to writing any code, wireframes are a great way to quickly map
out the functionality and flow of a website or application. This helps anticipate conflicts (“That's
not what I had in mind") early in the process, at a point where they are painless to correct.

Dedicated wireframing tools are in abundance, so you might be surprised that my weapon of
choice for sketching wireframes is Microsoft PowerPoint. PowerPoint makes it possible for
stakeholders and non-techies to participate in the design process. When exchanging PowerPoint
slides over email, you can be fairly certain everyone will be able to view and edit them. The
software’s widespread availability and low barrier to entry make it an excellent communication
tool, able to bridge the gap between developers, designers, and clients.

As well, the design capabilities of PowerPoint are far better than the application's reputation
would indicate. In this article I'll show what PowerPoint 2010 (for Windows) brings to the table
when it comes to creating wireframes. Maybe I can convince you that PowerPoint isn't
as evil or dumb as you might have thought.

Arranging and Layering Support

Whatever simplifies is useful. Real-world wireframes can quickly become fairly complex as the
number of elements accumulates, but PowerPoint's grouping capabilities allow some order to be
brought to the chaos. Just select two or more shapes on a slide and choose Group > Group from
the context menu, or simply press Ctrl + G (or Ctrl + Shift + G to ungroup).

A helpful tool when working with grouped and layered shapes is the Selection Pane, available
via Home > Drawing > Arrange > Selection Pane. It gives a hierarchical overview of all the
shapes on the current slide and makes it easy to select individual shapes that are part of a group
or are hidden by other shapes.

PowerPoint's aligning and distributing features are also essential for wireframing. The menu
items found under Home > Drawing > Arrange > Align give several ways to align shapes on the
slide or distribute them evenly. A nifty addition in PowerPoint 2010 is the Smart Guides feature.
When you move a shape around, indicator lines let you know when the shape lines up with
another shape.

Import/Export Facilities

PowerPoint supports quite a few import and export formats. Besides common bitmap formats
like JPEG or PNG, it can also work with vector images in EMF, WMF, and EPS format. I
personally often draw icons in Inkscape (an open-source vector graphics editor) and export them
to an EMF file, which I then use in PowerPoint. A lesser-known feature of PowerPoint 2010 is
that it can export slides to PDF documents, or even convert them into a WMV video (File >
Save & Send > File Types > Create PDF/XPS Document or Create a Video).

Adding Interactivity

Presentation features make PowerPoint an ideal tool for demonstrating an application's flow as a
storyboard. Slide by slide you tell a story, presenting different steps in a user-interaction process.

Such a story can be linear, or dynamic, and non-linear using Actions to create buttons that move
to specific slides when clicked. To configure an action for a shape, simply select it on the slide
and choose Insert > Action from the Ribbon Bar. It's worth noting that Actions only have an
effect when PowerPoint is in presentation mode (press Shift + F5 to see the current slide in
presentation mode).

You can even create macros in VBA (Visual Basic for Applications) to simulate application
behavior—if you’re a bit crazy, that is. Info on how to bring up the Developer tab to start the
VBA editor is available here. I would say that writing VBA code requires too much effort,
defeating the purpose of rapid, low-fidelity wireframing, but it may suit your needs.

Making Use of Masters

Slide Masters allow you to create reusable templates for your slides. When you make different
wireframes that follow the same layout and share the same elements (such as a common header,
menu, and footer), this facility is especially useful.

To view the existing masters, select View > Slide Master from the PowerPoint Ribbon. After
creating a new layout and closing the master view, you can apply the master to an existing slide
by right-clicking the slide and selecting the master from the Layout menu.

Integration with Word and Other Office Applications

Another benefit of using PowerPoint for wireframing is that it's possible to fully embed slides
into a Word document. I use this a lot when writing specifications. Instead of having multiple
documents that quickly fall out of sync, I can keep all relevant documentation in one place.

The easiest way to embed a PowerPoint slide into a Word document is to drag & drop the slide
from PowerPoint's Slides pane directly into Word. You can then double-click the embedded slide
to activate it for editing. It’s also possible to copy a slide from PowerPoint’s Slides pane and
insert it into a Word document using Paste > Paste Special... > Microsoft Office PowerPoint
Slide Object.

Collaborating and Sharing Designs

Wireframes are usually subject to a lot of discussion and change. To keep up with all the
comments, you can use PowerPoint's review features, available under the Review Ribbon tab.
This makes it possible to add user-specific comments, and PowerPoint 2010 can also compare
different versions of a file and consolidate the differences.

An easy way to share a PowerPoint slideshow with coworkers and clients is to save it to
SkyDrive (you can get 25 GB of storage for free from Microsoft) or SharePoint. Both services
allow you to specify who is allowed to view and edit the file, and to keep track of changes
through version history.

Ready-to-Use Wireframe Stencils

My enthusiasm for using PowerPoint for wireframing led me to develop PowerMockup, an add-
on that provides ready-to-use wireframe templates for the typical elements of an application:
buttons, text boxes, menus, tabs, tables, and many more. It even allows you to create and
categorize your own wireframe stencils. Feel free to download the demo version and give the
tool a try.