Easiest way of recreating a web page in axure

Axure RP 8
1

Hi,

I am looking to create a web page with similar theme and widgets (mostly the same look and feel) in form of a wireframe in Axure. Is there a way where I can take the HTML page or its screenshot and convert that to wireframe in Axure or is there any easier way to replicate an existing web page to Axure since creating the page from scratch is not replicating the exact look and feel of the web page.

2

Well, Axure is not a web page editor. If you want to take existing HTML and just make a few changes with full visuals, you are better off with a tool like Dreamweaver or even a good text editor like Notepad++.

Axure is intended to be a wireframe prototype tool which lets you quickly (or slowly) design, demo and test the basics. You can include full visuals though, including PNG, GIF, JPG, SVG, etc. You can also inject or refer to external CSS and Javascript if needed to help with styling.

For recreating the layout, look and feel of an existing web page or app, you can take a screenshot (or collection of screenshots) of a page and drag that image into Axure as a guide to then place, size, and style Axure’s widgets on top of it. I recommend converting the screenshot image(s) to a dynamic panel (right-click the image for popup menu, or CTRL+SHIFT+ALT+D on Win, CMD+SHIFT+OPT+D on Mac.) Then you can set the opacity to 50% or whatever, send it to back, hide/show the panel, move it front/back, turn the view on/off in the Outline panel to use it as a “onion skin” back and forth while you set up your page. Delete it or just hide it when done.

You don’t have to recreate everything on the page, either. You can oftentimes keep some things exactly as they are in the static screenshot and just overlay hotspot widgets for any different interactions you need.

You can also copy and paste images directly from a web page (if you have legal rights of course :wink: ) You can’t directly drag & drop–at least not in Windows but you can right-click-copy-image then right-click-paste in Axure. You can also slice or crop copies of your screenshot image (right-click any image) to use areas with identical visuals.

For HTML/CSS styled elements, you can use the browser’s Inspect tool to see the coding, get colors, fonts, sizes, treatments, etc. which you can then use with Axure’s widgets and styles to recreate things. Or you can use the graphics tool of your choice to create/copy anything then pull that into Axure. If a button or container has a complex design I will often take a screenshot, pull it into Photoshop, inspect the colors, recreate text to match, or remove text, or pull out / recreate portions of it or whatever… and then I save out layers to PNGs to pull in to Axure.

Something to keep in mind is that Axure converts pretty much everything to PNGs in the prototype’s HTML, so if you can create anything better/quicker/easier in a graphics app, that’s usually a better way to achieve final visual look & feel. The advantage of Axure’s built-in widgets and styling is that it is easier to resize, change text, styles, etc. --which is more of a wireframing activity anyway.

Good luck!

1 Like
3

Hi

Can you please let me know if I have a screenshot of HTML imported in Axure, how can I remove certain components (such as buttons, labels etc.) from the screenshot so that post editing and embedding my components while previewing those never show up and I can perform interactions with the rest of the screenshot?

4

I would say there are two basic approaches to removing certain components or areas of a screenshot.

  1. Slice them out. This is best with complex backgrounds or if you want to copy or move the component.
  • Right-click on an image and select “Slice Image” (or Ctrl+6)
  • Click upper-left corner of area
  • Ctrl+6 again
  • Click lower-right corner of area
  • Click on the rectangular area you just sliced then move, hide or delete it
  1. Mask them over. Easiest if the background is a flat color.
  • Drag in a rectangle widget, like “Box 1” or “Box 2”
  • Size the widget to cover the component/area
  • Set the border to “none” and the fill to match the screenshot background.

To add interactions to a screenshot, just drag in a hotspot widget, size and place it where you want and add an action to the OnClick event.

For example, let’s say I want to prototype something based on this Axure Forum. I’ll take a screenshot here and get rid of the “like”, “share” and “more” buttons and make a link for the “Reply” button.
Using the slice approach, the steps would look like…

Screenshot:

Slice operation 1:

Slice operation 2:

Hidden slice:

Hotspot:

Using the mask approach is easier in this case because the background is flat white, so I could just put a white rectangle over it:

Make sense?

5

Yes thanks a lot for that. Well another approach I tried out was to just overlap or mask the existing screenshot area with the new component (like a button in screenshot with a new widget or screenshot of just a button). So when I preview it the only the new component shows up. Let me know if this is also a way to resolve this issue.

6

Yes, that should work fine, as long as your new widget is same size or larger. Whatever works, whatever is easier and faster, as long as it gets the results you require.

Oh, one other tip: you can lock the screenshot (Arrange > Locking or Ctrl+K) so you don’t accidentally select or move it around.