tyfu.com | the portfolio of shawn kenney : » Rapid Prototyping with CorelDRAW or Why am I the only one using this tool?
Portfolio by Year Design
Photography
Random
User Experience

Corel Draw Screenshot
Rapid Prototyping with CorelDRAW
or
Why am I the only one using this tool?

Creating a rapid prototype in CorelDRAW is fairly easy, and can be used to either extend your existing wireframes or tie together your mockups into a document that can better illustrate a more finished work flow and can be quickly shared with others.

Disclaimer: This is not a blog post to convince people to like CorelDRAW, or to convert Illustrator users or businesses to CorelDRAW. This is merely a post on an alternative for existing or past CorelDRAW users to buying another tool to add to our UX toolbox. It assumes you have a basic understanding of how to use CorelDRAW.

I love CorelDRAW. I’ve been using this application for over half my life. I love the simple interface, the ease in which I can work with vectors and the flexibility it gives me by supporting multiple pages and master pages. I’ve used it to design logos (including mine). I’ve used it do design icon families. I’ve used it to design posters. I’ve used it layout a book. I’ve used it to design websites. I’ve used it to create style guides. I’ve used it to create wireframes and I have begun more and more to use it to create rapid prototypes for discount usability testing and stakeholder reviews early in the design phase.

So why would we create a rapid prototype?

First, we may want to have examples of proposed solutions that we can quickly put together and walk through with other stakeholders, development team members or executive leadership and done so in a format that can be printed, viewed on screen, or e-mailed off site for review.

Second, we may want to validate our work prior to development starting with users to make sure our designs are meeting their needs and expectations. This would be more of a smoke test, and not a performance test with data, eye tracking, heat maps, etc.

Third, we may want to create a file that mimics a minimal amount of user interaction to make sure no major bottle necks exist in our website or application’s work flow or no key data/functionality is missing from the architecture. I say a minimal amount because…

Finally, prototyping can be expensive. Creating prototypes with working code, or conducted with elaborate testing scenarios often run by a third party can add weeks or months to a project and adds the cost of additional resources to your budget, often times for very little if any noticeable return on investment and can actually take a user experience professional away from their core responsibilities. Creating a rapid prototype can often cover the majority of use cases in our work flow without the need for a more robust alternative.

So what advantages does CorelDRAW bring to the table? Well, if you are an existing CorelDRAW user then there is no learning curve because you’ll be using all the tools you are currently familiar with. You’ll also have the luxury to pull in assets from other CorelDRAW files and begin working with them immediately, especially if you are already using CorelDRAW to create wireframes. If you are an Illustrator user but have a copy of CorelDRAW laying around and are looking for a way to create rapid prototypes this is a great reason to blow the dust off that license and get working. CorelDRAW’s support for Illustrator documents is good enough to import most of your work from there as well. CorelDRAW’s support for PDF export is a huge plus, along with the ability to attach events to objects in your document and it’s native support for multiple pages and master pages which really make CorelDRAW a ready to use environment for this sort of work.

I’ll create an example of how to use these tools by creating a wireframe based prototype of my site. While this post will be demonstrating these concepts using CorelDRAW X5 (15), the functionality needed will be available in many older versions of the app as well. A link to my final document can be found at the end of this article. We’ll start by creating a new document and setting up a new master page layer. For this type of work I prefer to work in grid mode, so I’ll turn on my grid (View > Grid) and I’ll also turn on Snap to Grid (View > Snap to Grid or Ctrl – Y). In the Object Manager Panel (Tools > Object Manager) we’ll see that by default we are provided with a single page and a master page by default. At the bottom of the panel are two buttons. The one with the orange layer in the middle is our new master page layer, so let’s add one.

When we click the button a new master layer named “Layer 2” will appear on the screen, but we are also provided an opportunity to change the name. Let’s type in ‘header/footer” since these are the elements we will persist across the pages of our prototype. With the layer selected, I’m going to begin placing elements on my page that will serve as the header and footer for my site. I’ll be adding a rectangle with artistic text for the title of my site that displays at the top of each page. I’ll be making the text say “tyfu.com | the portfolio of shawn kenney” but you can make the text say anything you’d like or use a logo if you’d prefer.

Once the text has been positioned, right click on the text object and select “Properties” to launch the Object Properties panel. In this example we will be treating Page 1 as the home page, so as we build our prototype out any interaction with this element should always direct us back to home. Along the top of object panel you’ll see a series of tabs with icons. The second to last icon which should look like a small globe on it will which allow us to assign behaviors to our object. If we assign a behavior directly to the text however, the area that is “hot” will be limited to the paths in the font and nothing more. So if we want an area to still work in the event the user click the white space between characters we’ll need to draw an object on top of the text. Create a new rectangle that extends a little bit past the edges of the text on all sides and don’t forget to remove any border on the object when you are done!

With this new object selected, return to the object properties panel. “Link” should be selected by default in the Behavior dropdown. Below that in the URL dropdown you should see “http://”. If we wanted to link this to an external web we could type that in here, but in this example we are going to select “_PAGE1” from the list of dropdown options. A red crosshatch should now display in the document over the object we linked. Don’t worry, that won’t export out later. That’s just to let us know that a behavior was set to that object.

Now that we have attached an event to our object we are going to test to make sure our objects were properly added to the master page. Since right now we are working on the Master Page layer “header/footer” we will need to select the layer present in Page 1, or else any further object we add will also be added to the master page. Return to your Object Manager Panel and select “Layer 1” under “Page 1.” Once it has been selected use the artistic text tool to add the text “page 1” to the center of the screen. This will let us know that we are successfully moving between pages of our document.

Next let’s add a second page to the document, which you can do using the page controls at the bottom left corner of the document window. When added your new page should look just like the first page, except the text “page 1” should have disappeared. That’s because a new page will only show elements we’ve added to our Master Page layer and nothing more. Add “page 2” to the center of this page as we did on the first and then export your document to PDF using the built in CorelDRAW PDF publisher (File > Publish to PDF) and then open your PDF.

Your PDF should have two pages, that you can navigate through as you would with a standard PDF. Each page should have all the elements we’ve added to our master page along with text in the center of the page with the page name. Test your functionality by viewing page 2, then click the title of the page (or logo if you used one) in the upper left. If successful you should be taken back to page 1. That’s it, you’ve now successfully created your first simple rapid prototype showing how navigating back to home from any page will work.

The next step is to being building out the remaining elements to your master page (such as footer elements) and adding in additional pages to build out your workflow. As you add additional pages to your document, you will be able to select those pages as behavior links from your object properties panel to build more complex interactions. Be sure to setup all the pages you want in your document first before adding any key behaviors between them. If you set your behaviors then change the order of pages in your document your behaviors will not automatically update with them, and they will need to be reassigned to the correct page. You can also add annotated notes to the design of your page too, to provide viewers of the document any additional context you feel is appropriate. You are also not limited to wireframes either. If you have mockups created in Photoshop you can easily import each of your layer comps to a page, then draw your objects you wish to use as triggers for your behaviors for a final PDF that more closely resembles your final project. When you are all done, republish your PDF and distribute.

There are a few limitations to using CorelDRAW for your rapid prototyping solution. First, all events are handle through clicks. So if you want to demonstrate how more advanced interactions such as mouse over events or focus change events would work those would have to be explained through a note in the document, verbally to the viewer or just inferred by the viewer. If you are trying to conduct a more formal usability test to determine time on task, or ability for the user to successfully complete the work flow this would not be the right approach either as there is no ability to capture data behind the scenes. This approach could work well though for think out loud methods of testing with metrics captures by observers. Finally, other than laying out elements visually I have not found an effective way to mimic form behavior. So if you want to show how a form would work, or how error handling would be done in a form based work flow this would be less than ideal. However, CorelDRAW works great for a rapid prototype that can help find gaps in requirements, missing elements, basic work flow usability issues and help tell a story to stakeholders and leadership by allowing you do build an interactive prototype quickly and cheaply.

Download Sample File (PDF)

Leave a Reply

Your email address will not be published. Required fields are marked *

I am a certified usability analyst, user experience & graphic designer, and information architect with web & .net development experience based in Cleveland, Ohio.

Copyright 1996 - 2014

Member, American Mensa