Table of Contents
Developing with Axure and Illustrator
Axure
Axure is a prototyping tool for websites and applications.
- Use a “grid” (10 pixels spacing for example) and “local”/“global” guides to align your UI elements.
- Hold down “ctrl” to add a “global” guide.
- Use “select all” to see the width and height of a master. If the width or height is not a multiple of the grid spacing add an “invisible” rectangle to adjust the width and height of the master.
- Axure can split an image into multiple parts. This saves some back and forth between Axure and Photoshop. The split command is found in the context menu of an image.
- Create a “master” for every graphical asset. This will both make the prototype load faster because images are shared between pages and it will make it much easier to update assets.
Illustrator
- Create your illustrator document as a “Web Document” to get “pixel” alignment. Also remember to enable “Snap to pixels” and “View Pixels”.
- Use the “slice” tool to export slices of the art board. Use “Save for Web” and “Select export custom slices”.
- Assign a keyboard shortcut to “Object > Slice Options”.
- Preferably set the width and height of a objects to an even number in order to avoid X, Y coordinates being offset by 0.5 pixel.
- Always set the width and height of a slice to an even number otherwise the X or Y coordinate of the slice will be offset by 0.5 pixel. Preferably set the width and height of slices to the grid size in Axure (a multiple of 10 pixels for example).
- Place slices and objects in appropriate layers so that they are easy to locate.
- Create a symbol for each asset. Place the symbol in an isolated area for export and also in a graphical context for evaluation.