Microsoft has finally released Windows 8, and is promoting its launch with a billion-dollar marketing campaign. This creates new opportunities for app developers, especially since the Windows Store isn’t yet as crowded as the Apple and Android counterparts. However, before you go ahead and start programming an app, I’d suggest you design some quick prototypes first to validate your idea. Play with different variants, show them to your peers, and adapt the designs based on the feedback you receive. Although this may seem like unwanted overhead, in the end, it will result in a better app with a better user experience. In some cases, the gathered feedback may even prevent you from investing time and money into an idea that no one really finds interesting or needed.
To help minimize the prototyping effort, I have created a set of interface templates for PowerPoint. Using these templates, you can quickly put together a Windows 8 app layout and iterate on it. All elements in the set are based upon regular PowerPoint vector shapes, and are fully editable and customizable.
PowerPoint is actually quite a good choice for simple prototypes. Its slide-by-slide approach allows you to present a flow and tell a story with your designs. You can even create basic clickable prototypes by adding hyperlinks between slides. Furthermore, PowerPoint is available on almost every computer, including tablets that run Windows RT, and is fairly simple to get started with.
When you take a look at the screenshots below, you will notice that the designs lack color and other visual cues. Simplified illustrations like these are called “wireframes”, and are intended to help focus on the layout and functionality of your app. Wireframes allow you to produce quick results and don’t let you get bogged down by aesthetic details that have little or no impact on how your app will work.
Download the Templates For Free!
Basically, you can use it any way you want, private or commercial, just as long as you distribute the resulting work under the same license and give proper credit to the original creators:
- The wireframing set has been compiled by Andreas Wulf,
- The included icons are based on the “Modern UI Icons” collection by Austin Andrews,
What’s Included?
Example grid page displaying item previews arranged in groups.
Example page displaying details for a single group with previews for each item in the group.
Example page displaying one item in detail.
Example page displaying a list of items and the details for the selected item.
Example of a Metro app in snapped view state.
Example of an app in fill view state.
Collection of common UI controls (part 1): button, text box, list box, check box, radio button, toggle switch, etc.
Collection of common UI controls (part 2): search box, date/time picker, slider, progress bar, scrollbar, etc.
Grid view (with groups).
List view and charms bar.
App header, app bar, and toast.
Message dialog.
Text styles.
240 app icons (part 1).
240 app icons (part 2).
Touch gestures.
Pimping PowerPoint with PowerMockup
While you can build great prototypes with this free wireframing set and PowerPoint alone, you may find yourself wanting the templates to be in a format that is easier to search through. In this case, I can highly recommend taking a look at PowerMockup, an add-on for PowerPoint that my company has developed.
PowerMockup provides a searchable library of wireframe elements that can easily be dragged and dropped onto a slide. Best of all, the tool allows you to add your own creations to the library and share them with others. I have used this functionality to create three category files that you can use with PowerMockup:
After downloading the files, switch to the “PowerMockup” tab in the PowerPoint Ribbon bar, click on “Import Files”, and select the downloaded .pmst files. Here is a screenshot of how it will look like after you have imported the templates:
All elements, including the icons, are properly named and tagged, making them easily searchable.
I hope you enjoy the set!
0 comments:
Post a Comment