It helps to think of Canvases as individual pages or screens within your website or app. I would recommend the settings shown above. Omnigraffle creates and converts your wireframes into a basic html version, You can view your prototype in a browser and is useful if you are running any remote user testing as it can be uploaded online and shared. You can then open up the saved PDF in a reader of your choice and easily email it to a team member, client or again use it for some feedback.
If you have any comments or further questions about creating Prototypes please comment below or feel free to email me. What is a Prototype? Both types of wireframes are useful during the creative process and can be produced using design tools like OmniGraffle. Then, create a hi-fi wireframe to explore more of the UI and UX details. Your goal is to quickly communicate your idea by constructing a simplified visual representation of your design.
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. 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.
Jumps Elsewhere - Use this to link to other canvases in your Omnigraffle doc. Personally, I like to keep canvases in Omnigraffle analogous to pages on a website, so I try to only use this action when linking to unique pages. It's also nice to use this to link form submit buttons to the page users should be redirected to when the form is submitted.
Shows or Hides Layers - I'm a big fan of this action for mocking up interactions within a page. A good example of when to use it is if you want a modal window to appear when the user clicks a button.
To do this, create a new layer of your canvas called "Modal Window" and set it to hidden. Then set the action on the button to show the modal window layer. For a final touch, create a close button and set its action to hide the modal window layer. Using "Show or Hides Layer" for these types of interactions keeps the number of canvases you have to manage from getting out of hand. To interact with the actions you've created, either hold down "B" on your keyboard or turn on the Browse tool.
You'll then notice that hovering over objects with associated actions causes a pulsating blue outline to appear. Clicking on the object will then execute the action.
For better presentation, it helps to select "Hide Toolbar" from the View menu. A big drawback to testing out your prototypes in Omnigraffle is that standard browser actions, specifically back, are not present.
0コメント