The Difference Between a Prototype and Wireframe

by Omni on June 25, 2020

You’ve got an idea—you did the hard work of coming up with an app, website, or brand-new product. Now it’s time to figure out how to share it. Wireframes and prototypes are tools that are relatively easy to create and can help you visualize the functions and possibilities for your concept. Here, we’ll explain what wireframes and prototypes are, the uses for both, and how they differentiate—so you can determine which is best for your project and build a plan to share your idea with the world.

What is a wireframe?

A wireframe is a static, basic sketch of your website, which makes it the perfect visual starting point during the brainstorming process. Rectangles or squares are used as placeholders to show the location of potential graphics, buttons, or text, and the accompanying lines connecting these shapes indicate the order of information shared on each page.

There are two different types of wireframes: low-fidelity (lo-fi) and high-fidelity (hi-fi). A lo-fi wireframe will help you map out the basic schematics of your site in black and white. In contrast, a hi-fi wireframe is typically constructed after a lo-fi wireframe and presented in grayscale—this simulates actual color tones to help you better visualize the final version. Think of the hi-fi wireframe as a more detailed blueprint of your concept that will give viewers a better understanding of the look, feel, and functionality of your site. Hi-fi wireframes often contain no content or some placeholder content, such as lorem ipsum, typeface preferences, and specific dimensions for images.

Both types of wireframes are useful during the creative process and can be produced using design tools like OmniGraffle. If you’re starting from scratch, sketch a lo-fi wireframe to establish the basic layout of your site and hone in on the essential hierography of information. Then, create a hi-fi wireframe to explore more of the UI and UX details. Keep in mind that simplicity is key when creating a wireframe—don’t worry about aesthetics. Your goal is to quickly communicate your idea by constructing a simplified visual representation of your design.

Wireframe for the Difference Between a Prototype and Wireframe

What is a prototype?

A prototype is an interactive model or simulation that demonstrates how the finished website or app will work. The primary goal of a prototype is to test the design and functionality of your concept before moving on to the next phase of development. Creating a prototype might seem like a waste of time, but it’s a crucial step in discovering potential flaws and can save you time and money in the long run.

Like wireframes, prototypes also differ in complexity—lo-fi or hi-fi—based on the level of interactivity that’s possible (e.g., how many buttons can be clicked), visual design, and content. Lo-fi prototypes are often paper sketches with some basic visual attributes (rectangles, boxes, and buttons) representing the order of information, and the interactivity is simulated by a person. More realistic in appearance and with a higher degree of functionality, hi-fi prototypes are computer-generated simulations that look and feel like the final product—all interface elements (animations, graphics, colors, and content) are included with interactive clickable hotspots for users to experience the site.

Creating a prototype allows you to test and tweak the functionality of your design and discover any features you may want to add to your product before entering the final phase of design. Prototypes take more time to construct than wireframes, but the feedback gained through user interaction can be invaluable. The more realistic your prototype is, the more in-depth feedback you’ll gain for future iterations.

Prototype

Understanding the difference between a wireframe and a prototype will help you determine which one best suits your needs. Using these design tools to map out and communicate the usability and functionality of your concept—and test your product—will save you time and resources and take you one step closer to production.

Flat-File Format: A New Enhancement for Sync Service Compatibility

by Omni on June 3, 2020

In the previous version of OmniGraffle for Mac and iOS, some customers were unable to open files stored in sync with providers such as Dropbox, Google Drive, and Box. These sync services do not support file packages—a common macOS format that treats a folder as a single file—so some users received a message that their selected file couldn’t be opened. Instead, file packages appeared as a regular folder or compressed zip file with the same file extension. Even if users didn’t experience direct issues, this bug would sometimes result in data loss while editing files synced with these services.

To work around this sync issue, many customers chose to store their documents using our single flat-file format—but this method was inefficient for handling attachments. Files were encoded into XML data—a significantly less efficient way to store files—and rewritten on each save. In this release, we’re introducing a new, single-file format (so you can still choose a file package) that performs better than the previous version and is fully compatible with sync services. We’ve unblocked the UI earlier in the saving process with this new zipped format—attachments are separate from the OmniGraffle XML data, so users can focus on their work without being concerned about file formats.

OmniGraffle files will be recognizable due to the .graffle extension, but users with versions of OmniGraffle before 7.16 and 3.14 won’t be able to open the zip format. It’s important to note this change if you’re working in a shared file environment or sending files to colleagues using older versions of OmniGraffle. For these situations, all legacy formats are available from the export panel, and existing legacy files will have the option to continue saving in the legacy format. We’re working hard to provide compatibility across platforms and accessible options for all.

Download the app for Mac or iOS, and if you have any questions or feedback, email support@omnigroup.com—our amazing Support Humans are standing by, ready to help.

OmniFocus 3.8 Launches with Support for Omni Automation

by Rosemary Orchard on May 28, 2020

The most powerful task management software on the market just got even more powerful! With Omni Automation, every user can leverage plug-ins and scripts to accomplish more every day, automating routine tasks and integrating with other tools and services. Omni Automation scripts work across Mac, iPhone, and iPad can be shared with others and can be written by anyone—using the same JavaScript language that powers dynamic web pages.

Screenshot of the Packing List plug-in

“We’ve always believed in the strength of iPad as a productivity platform, and in 2016 we set out to bring more of the power of our desktop apps to that transforming piece of glass,” explains Ken Case, co-founder and CEO of the Omni Group. “A key element of that power has always been user automation, and with Omni Automation we pioneered delivering a deeply integrated scripting environment which customers could use on Mac, iPad, and iPhone. With OmniFocus 3.8, Omni Automation is available for all of our Mac, iPad, and iPhone apps—and I can’t wait to see how our customers leverage this to build great custom solutions for themselves and their teams, saving significant time and increasing their productivity like never before.”

Omni Automation plugins and automation in OmniFocus Pro offer a level of customized automation previously not available on iOS. While the Mac has had support for AppleScript since it’s earliest days (and was started as a combination of OmniOutliner and AppleScript known as Kinkless GTD), this has left some of the most popular devices out of part of the automation loop. OmniFocus recently added more Shortcuts support, but Shortcuts, like AppleScript, are restricted to one platform—and they can’t offer the unique abilities that come from writing a script. Below are two example plug-ins you can download and use, or look at, to see how this new feature can enhance your OmniFocus workflows—on Mac, iPad, or iPhone. Now, with Omni Automation, plug-ins can be written once and will work the same on Macs, iPhones, and iPads.

Packing List Template

When you travel on a trip, one thing that is the same for most people every time is their packing list. You might add snorkels for a beach holiday, and the length of your trip likely determines a parka for a trip to Lapland, but the number of socks you take! You can create and use a plug-in to ask you how long your trip is, and have it use this information to generate a packing list for your trip. As well as smart entries on the list (like six pairs of socks for a six-night trip), it can also add static items (like your iPhone charging kit). Now you don’t need to worry about finding your template list or duplicating a base project and editing it—you can just run a plug-in.

Find out about this plug-in.

New Link-Back Task

In our complex world, we sometimes have tasks that are linked to or even depend on, each other. Ideally, these tasks would be connected to one another—so when you complete one, you can jump to the other and complete that too. With a plug-in, you can make a new inbox task which contains a link to your currently selected task in the notes—saving you the legwork of getting the link to the task and pasting it into the notes of the new task!

Find out about this plug-in.

Integration with OmniPlan, OmniGraffle, and OmniOutliner

All Omni Group applications now support JavaScript plug-ins—so you can transfer your data from one application to the other with ease. You can also turn a project in OmniFocus into a project plan in OmniPlan, a hierarchical diagram in OmniGraffle, or import templates from OmniOutliner.

We encourage you to explore existing plug-ins and the reference material in each app. Whether you’re an automation novice or a fully-fledged developer, we hope you enjoy OmniFocus 3.8.

Download the app for Mac or iOS, and if you have any questions or feedback, email omnifocus@omnigroup.com—our amazing Support Humans are standing by, ready to help.

OmniFocus 3.7 for iPhone and iPad Includes New Shortcuts

by Rosemary Orchard on April 20, 2020

OmniFocus 3.7 for iPhone and iPad is now available with several new actions for Today’s Forecast, Find Projects, and Find Tags Shortcuts.

New action for Today’s Forecast

The Today’s Forecast Shortcut now returns items from your Forecast perspective. Find Projects and Find Tags help you locate a project or tag by name, which you can use with our existing shortcuts to find or add items.

The Today’s Forecast action is brand new and returns all of the items from your Forecast view for today. This includes projects and tasks due today, as well as those with the tag you have selected to be included in your Forecast preferences.

Your daily forecast shortcut can be tailored to your needs—it can provide weather information, an overview of your calendar, or whatever type of overview you like. With the new Today’s Forecast action in Shortcuts, you can pull in information about daily tasks due, along with tagged items with your Forecast tag (or choose either of these individually). You can also include a count of these tasks in your daily overview in addition to the titles of the due tasks.

new shortcuts on OmniFocus 3.7 iPhone

Find Items faster

The Find Items action was introduced in OmniFocus 3.4 but has been updated in OmniFocus 3.7 to return the URL, allowing users to open that specific task. With the updated Find Items action, it’s now possible to add the URL to a note in a document, or simply open the URL to jump straight to the task.

New actions for Find Tags shortcut

With the Find Tags action, you can type in the name or partial name of any tag to find it. The Find Tags action returns one or more tagged objects—feed these items into the tags section of the Find Items action or use the URL for each tag to open it directly in OmniFocus. You can also use the output or multiples of this action with Add to Variable as a tag in the Add Item action.

Combining the Find Tags and Find Items actions in Shortcuts allows users to find items with one or more specific tasks. For example, in OmniFocus, I have some tags based on how much energy I have, which looks like this:

Find Tags and Find Items actions in Shortcuts

With a shortcut, I can be prompted for my energy level and then see which OmniFocus items might be well suited to boost it:

Shortcuts based on current energy level

New actions for Find Projects shortcut

The Find Projects action works in much the same way as the Find Tags action, just type in the name or partial name of any project to find it. Users can expand the action with Show More, then choose to find projects in a specific folder within their database. Return all of your projects (or projects within one or more folders) by leaving the text filter empty. Each returned project is an object—get the names of each project and the URL to view the project directly in OmniFocus. The Add Item action also accepts a project output from the Find Projects action as the input in the project section instead of hard coding a project or choosing it each time with the Ask Each Time variable.

Working with Database Objects

As OmniFocus now offers easy access to tags and projects, the Get Database Object from Input and Show Database Object in OmniFocus actions have been retired. The same functionality is available by opening the URL from the object of the OmniFocus Item (task, tag, or project).

OmniFocus 3.7 for iPhone and iPad underscores The Omni Group’s commitment to providing tools as powerful as you. Learn more about what’s included in this release.

Download the app, and if you have any questions or feedback, please email support@omnigroup.com—our amazing Support Humans are standing by, ready to help.

Export Infinite Canvases from OmniGraffle to Microsoft Visio

by Omni on April 14, 2020

OmniGraffle 7.15 for Mac and OmniGraffle 3.13 for iOS are now available. Both releases improve import and export accuracy and Microsoft Visio compatibility.

Highlights:

In a previous version of OmniGraffle, we introduced support for infinite canvases. However, OmniGraffle documents set up to use an infinite canvas did not export in a format that rendered correctly in Microsoft Visio. This release updates our Microsoft Visio export logic, so all items are now visible in Microsoft Visio and will automatically shift when exported from infinite canvases.

Images embedded in OmniGraffle documents are now embedded as PNGs when exporting to Microsoft Visio—offering a more efficient image format and resulting in significantly reduced file sizes.

This release also improves the text layout when exporting. Connection line paths now better match what’s shown in OmniGraffle. Customers can import more files without having them present an error or crashing. EMF image importing has also been improved.

We’re dedicated to providing tools as powerful as you. While there are still improvements to be made, we’re pleased to release OmniGraffle 7.15 for Mac and OmniGraffle 3.13 for iOS with improved Microsoft Visio compatibility. We know many people work with Windows users who create their work in Microsoft Visio, and we are working diligently to ensure compatibility.

These releases help you open and edit files from your colleagues—and send back updated copies with confidence that all work appears correctly in Microsoft Visio. These fixes are applicable to everyone, but are heavily focused on improvements for Pro users as Microsoft Visio import and export requires Pro.

Learn more about OmniGraffle 7.15 for Mac and OmniGraffle 3.13 for iOS in our Mac and iOS release notes.

Download the app for Mac or iOS, and if you have any questions or feedback, please email support@omnigroup.com—our amazing Support Humans are standing by, ready to help.