Building Axure Icon Widget Libraries Using Web Fonts

Building Axure Icon Widget Libraries Using Web Fonts

by Svetlin Denkov @svetlindenkov

March 24th, 2016

+

Introduction

1

Who Am I?

WHO AM I Svetlin “Svet” Denkov **Pseudo name on Axure Forums = light_forger (http://bit.ly/1DwVXyZ)

� UXer with passion for IxD & Vis. Design �  DePaul HCI Graduate

�  Constantly evolves own prototyping tool kit with different technologies

�  Writes and presents when the muse strikes him J

Why Give This Talk

WHY GIVE THIS TALK Known Pain Points Icons play an important role in UI design, yet Axure: - Has few customizable icon libraries (most use PNGs). - Offers no way to use existing SVGs out-of-the-box (you can import in 8.0, but can’t edit). - There is no way to create Bezier-curve widgets in 7.0.

WHY GIVE THIS TALK (cont.) Target Audience - Visual Designers in charge of UX. - IxDs co-owning wires/prototypes with Visual Designers. - Anyone coming from Photoshop/Sketch background who wants same level of flexibility.

WHY GIVE THIS TALK (cont.) Other Solutions? - Axure 8 has a Pen tool now. Takeaway: Better to use existing SVGs than re-author them! - SVGs CAN be added to Axure. Takeaway: This requires iFrames and Axure plugins = too messy! - Importing assets from Photoshop or Sketch Takeaway: Results in static, non editable images.

WHY GIVE THIS TALK (cont.) Real Life Problem - Wanted to use IcoMoon icons in an Axure prototype, but there was no easy way to do so. - Using Web Fonts created a reusable solution: Axure IcoMoon Library!

https://icomoon.io/ Resources: http://bit.ly/1HFuET0

Tonight’s Lineup

TONIGHT’S LINEUP Our Focus

Axure Web Fonts Summary

SVG Crea5on

Web Font Crea5on

Using Web Font in Axure

Building Icon Library

TONIGHT’S LINEUP (cont.) Fun For Another Day - Detailed walkthrough of Web Fonts in Axure 7. For more on the topic, consult the Resources below. - Font Mapping in Axure 7. - Teaching you Photoshop’s pen tool. - Having a scholarly debate on why Sketch is better than Axure for Visual Design J

http://bit.ly/1kolcv3 http://bit.ly/ZBbXj5 http://bit.ly/1T3nzVt Resources:

TONIGHT’S LINEUP (cont.) Assumptions - We are working under Mac and OS X. - Dealing with icon fonts primarily. - We don’t have fonts sharing identical name. - Your font has matching name in CSS reference/@font-face spec and when added to Font Book.

2


SVG Crea5on

Web Font Crea5on



AXURE WEB FONTS SUMMARY What Is A Web Font? - This is not Axure technology. Introduced in CSS2. - Uses @font-face or CSS method to load custom fonts on a site. - Different font types can be used: .ttf, .eof, .woff, etc.

http://bit.ly/1VKSl41 Resources: http://bit.ly/1dAyZOe http://bit.ly/1R7OKgp

AXURE WEB FONTS SUMMARY The Axure Connection - First introduced in Axure 7.0 as two features: Web Fonts and Font Mapping.

AXURE WEB FONTS SUMMARY The Axure Connection (cont.) - First introduced in Axure 7.0 as two features: Web Fonts and Font Mapping.

AXURE WEB FONTS SUMMARY Additional Details - Can have multiple web fonts in a single prototype. - Web fonts can be letter-based or icon-based. - Letter-based fonts map character to character: “A” in Arial maps to “A” in Open Sans - Icon-based fonts use a 4-character Unicode notation to represent a glyph (image character).

http://bit.ly/1T21uFX Resources: http://bit.ly/1Rtdulx http://bit.ly/1ZgLktL

AXURE WEB FONTS SUMMARY Font Uses - Local use = installed on local machine only. Takeaway: Best if we want to see font in local .rp. If published online, font not seen! - Web use = spec included for web font. Takeaway: Using CSS or @font-face allows to view the generated prototype on any machine. Still need local font for .rp editing.

Axure Web Fonts Demo

3


SVG Crea5on

Web Font Crea5on



Basics

SVG CREATION What Is SVG? - SVG = Scalable Vector Graphics or a resolution-agnostic method of scaling graphics. - SVG is a work-in-progress W3C standard. - SVGs can be created via code or with Illustrator or Inkscape.

http://bit.ly/1R7TaEa http://bit.ly/1Rv1jyd http://bit.ly/21BWVTT Resources:

SVG CREATION Working with Web Fonts - Web fonts can be created from SVGs. - When creating a web font, the SVGs are stored in the font. - Each glyph is assigned a Unicode used to retrieve the SVG. - There are font generators for letter-based and icon-based web fonts.

http://fontello.com/ http://fontastic.me/ https://icomoon.io Resources:

Approaches

SVG CREATION Considerations - Can’t have overlapping paths. Unify into single shape! - Can’t have different color segments. Use single color! - Stroke must not have a fill and background must be transparent. - Use 36x36 px or 64x64 px resolution for best results.

http://bit.ly/1Vr7h9v http://bit.ly/1t6wCrL Resources:

SVG CREATION Sourcing SVGs - Can create your own or use existing assets. - Can download from Flaticon or Freepi. Be cognizant of licensing and author attributions. - Can use IcoMoon which has its own free icons.

+flaticon.com freepik.com Resources: icomoon.io

SVG Creation Demo

4


SVG Crea5on

Web Font Crea5on



Background

WEB FONT CREATION Background - For this, we will use IcoMoon because it has a library of 490 free icons licensed under GPL/CC BY 4.0. - It offers a flexible web app for icon-based font creation. - It is free, so support them! I am not associated with IcoMoon in any shape or form J (pun intended).

http://bit.ly/1MvJ76h http://bit.ly/1AskLG0 Resources:

IcoMoon Features

WEB FONT CREATION Access The App - In IcoMoon’s home screen, we tap on IcoMoon App or directly navigate to it via https://icomoon.io/app/#/select

WEB FONT CREATION Adding Icons - We can import our own icons or add the available icon packs.

WEB FONT CREATION Icon Modifications - We can select, delete, move, edit and search for icons.

WEB FONT CREATION Icon Set Options - We can specify icon size and make adjustments to the icon set.

Adding Icons

WEB FONT CREATION Blank Slate - Let’s remove the current icon set for sake of simplicity. We can, mix and match icons any way we like. - Then click on Import Icons and navigate to the destination which has your SVG icons. Select all of them and hit Open.

WEB FONT CREATION Adding Icons - The map icon is now added. We can edit it or add new icons. - Let’s name our set: Icon Menu > Get Info > Edit Meta Data. - If we have the Premium service, we can name the project and save it in the Cloud. Otherwise, it remains in browser cache only.

WEB FONT CREATION Icon Options - We can hover over to edit icon name and the Unicode code. - We can also get CSS/HTML codes, but that’s optional.

WEB FONT CREATION Public CSS Link - We can get a temporary 24-hr CSS link. - In Premium, the CSS gets stored in the Cloud. There is a way around both methods, which we will get to in a little bit.

Wrapping Up

WEB FONT CREATION Font Preferences - Via Preferences we can access font-specific options. Let’s give the font a unique name! - If using it outside of Axure, we can specify additional options.

h@ps://icomoon.io/#docs

WEB FONT CREATION Downloading The Font - We can then download a .zip of font.

WEB FONT CREATION Zip Contents - demo.html lists the glyphs and their Unicode characters. - fonts has 4 font formats. We will use .ttf. For format differences check out Transfonter (http://bit.ly/1RYhGEa). - style.css is the CSS needed for making the font into a web font.

Font Creation Demo

5


SVG Crea5on

Web Font Crea5on



Local Use

USING WEB FONT IN AXURE Local Use There are couple of steps we need to do to use the icon font on our local machine: 1. Install the font. 2. Configure a Unicode keyboard input. 3. Create a text widget and enter the glyph’s Unicode code. Let’s tackle these one by one!!!

USING WEB FONT IN AXURE Installing the Font - On Mac, drag the file into Font Book. On Windows, do the same under Fonts.

USING WEB FONT IN AXURE Unicode Input You can enter glyphs which have Unicode codes in different ways. Let’s discuss couple: 1. Using the Unicode keyboard in Mac. 2. Copying characters via Firefox’s Developer Tools. NOTE: most browsers allow for Unicode character copying. On Windows, you can can use Character Map or ALT + 4-digit code.

USING WEB FONT IN AXURE Option 1 - Mac Keyboard - We go to Preferences > Keyboard, click + and scroll to Others.

USING WEB FONT IN AXURE Option 1 - Mac Keyboard (cont.) - After clicking Add in the previous screen, we see the new entry.

USING WEB FONT IN AXURE Option 1 - Mac Keyboard (cont.) - Now, we can select the keyboard from the status bar!

USING WEB FONT IN AXURE Option 2 - Firefox Developer Tools - We can open a Firefox window and right click on the screen. - Then select Inspect Element to view the browser’s Dev Tools.

USING WEB FONT IN AXURE Option 2 - Firefox Developer Tools (cont.) - We then select > Console tab.

USING WEB FONT IN AXURE Option 2 - Firefox Developer Tools (cont.) - We type copy(‘\uxxxx’); where xxxx is the code of the glyph. - In our case, that’s e900. We hit Enter. CMD + V shows the glyph representation within the text box.

USING WEB FONT IN AXURE Getting It To Work - If Axure 7 was open while we installed the new font, that font won’t show in the font list. We will close and reopen the software! - Next, we drag a text widget and set its font to the new font. - We won’t see a noticeable change because the Unicode value has not been pasted yet!

USING WEB FONT IN AXURE Getting It To Work (cont.). - We first select the Unicode keyboard. - Next, while editing the text widget, we hold ALT and type the Unicode character code. Ours is e900! - The end result should be something like this:

NOT - The latter means something went wrong!!!

Local Font Use Demo

Remote Use

USING WEB FONT IN AXURE Remote Use - Good job! Now we have a custom icon font for Axure. - But we want to share our prototype with a client 100 miles away via AxShare. Will it work? - Nope! Because our .rp is using a font nobody can see online! We must put the font in an accessible web location first!

USING WEB FONT IN AXURE Preparing style.css - In style.css we only need the highlighted area. We must use relative paths for the url property.

USING WEB FONT IN AXURE Connecting to Server - We can use an FTP program such as Filezilla (http://bit.ly/1gEw9op) or CyberDuck (http://bit.ly/1Bj8KVv) to connect to a website host.

USING WEB FONT IN AXURE Access public_html Folder - The directory structure can very from host to host. - If unsure, inquire with the host’s Support team to find where your site resides.

USING WEB FONT IN AXURE Transfer Font Folder - We then transfer the font folder. For cleaner file structure, a fonts parent folder can be created. - Our directory must have 755 permissions, and files within 644.

USING WEB FONT IN AXURE Edit .htaccess file - We must edit the .htaccess file to enable web fonts.

USING WEB FONT IN AXURE Add Definition - We must add the following definition to the file and save it.

http://bit.ly/1WAxCjI Resources:

USING WEB FONT IN AXURE Copy style.css URL - This is the link we will paste into our Axure file.

USING WEB FONT IN AXURE Enter The URL in Axure - Under Publish > Generate HTML, in Web Fonts we add the link.

USING WEBFONT IN AXURE Publish to AxShare - Under Publish, we click on Publish to Axure Share. - To test if the remote setup works, we can open the link above on a different device, computer or phone!

USING WEB FONT IN AXURE Troubleshooting 1. Do you have the right paths in Axure and in .css file? 2. Can you access the .css (proper permissions on server)? 3. Is your .htaccess updated for web fonts? 4. Still not seeing it in your browser? Clear your history cache! NOTE: Still having problems? Try [email protected] or the Axure Forums (http://bit.ly/1Rvdueo).

Remote Font Use Demo

6


SVG Crea5on

Web Font Crea5on



Basics

BUILDING ICON LIBRARY Prerequisites - We must have the custom font installed on the machine on which we are authoring the library. - We must ensure there are no copyright issues: 1. Font uses SVGs that are ours. 2. Distribution of font and .rplib is permissible. 3. If we leveraged third-party resources, we must include a summary page in the library explaining this.

BUILDING ICON LIBRARY Creating The .rplib File - This option opens a new file with .rplib extension. - We must save it to a file name right away!

BUILDING ICON LIBRARY Adding A Widget Container - For each icon, we create a widget, like a page in .rp file. - We must name the widgets appropriately (helps with searches). - If multiple icons exist for the same concept, we can use the following notations: pen1, pen2, or pen-modern, pen-classic.

BUILDING ICON LIBRARY Inserting The Widget - We place a Label widget on the screen at (0, 0). - We then resize it to 36x36 px. A different size can be used, but this one works well. - Center aligning the text vertically and horizontally is a must.

BUILDING ICON LIBRARY Applying The Font - We set the font in the widget to testFontABC and the size to 36. - Next, using Unicode keyboard input, we type ALT + e900. - Now, we should the glyph show up!

Wrap Up

BUILDING ICON LIBRARY Including Additional Details - In the Widget Properties page, we must have Use the thumbnail selected, which uses the icon itself as a thumbnail image. - We can add a Tooltip and widget details under Widget Notes.

BUILDING ICON LIBRARY Best Practices - Include a cover page sharing information about how to use the library, author’s contact info, versioning, etc. - Use one widget per icon sized at 36x36 or 64x64 px. - Set default color to black or dark gray. - Give appropriate names to widgets (follow IcoMoon’s examples). - Group categories of icons in folders, which creates visual separation of collections.

BUILDING ICON LIBRARY Process - Once the library is ready, we must import it to our local installation of Axure, so it is available for all projects. - Next, we have to distribute the library to all team members by packaging the following assets: 1. The fonts folder. 2. Link to style.css (or actual .css file if not sharing the server URL) 3. .rplib library file. - These can be distributed via email or stored on a network drive. - As last step, if the library will evolve, we must introduce a change management process for font and library creation.

Library Creation Demo

Summary

7

SUMMARY What We Covered We covered much ground today! Give yourselves a pat on the back for getting through it J


SVG Crea5on

Web Font Crea5on



SUMMARY Major Takeaways 1. Axure doesn’t have true SVG support…yet! 2. The tool is capable of high fidelity visual designs. 3. Web Fonts lend Axure more flexibility in creating custom icons. 4. We can cut the authoring process by leveraging existing SVGs. 5. Time investment pays off long term by having shared use of the same assets by multiple team members.

Questions?

8

That’s All, Folks!

light_forger

@svetlindenkov

Svetlin Denkov