Hyperlinked infographics for document interfaces

Check our web resources site: Pictures You Can Poke a Stick At!

Task-based diagramsVisual instructions for mobile and web documents

We can design interactive interfaces for visual-first mobile and web documents. Using high-quality scalable vector graphics (SVG), we help you to conceptualize overall system processes of your products or services and produce accessible and engaging hypergraphics.

  • Visuals for document concepts, tasks and references
  • Single-page visualized help with links to open browser windows
  • Hyperlinked icons for "quick links" to key parts of your documents
  • Overviews of system components and process diagrams
  • Multilingual graphics for translation/localization
  • Embedded videos inside illustrations for e-learning
  • Annotated screenshots
  • Document restructuring to convert text to graphics—visual concepts, tasks and reference information.
Custom user interface design for products and servicesInfographics for help reference informationIcons for document navigation and tasks

Single-page visualized helpCustomized infographic design with hyperlinking

Scalable vector graphics (SVG) is a high-quality graphics format for line-based diagrams such as charts, maps, symbols and infographics. SVG-based graphics can be printed in PDF documents and displayed in all major web browsers.

Technical illustration software such as Adobe Illustrator can export SVG. And we can help you get figures from Microsoft Office Suite into your web pages. Word, Excel, PowerPoint—they can all be turned into impressive interactive graphics with statistical information at your fingertips.

Imagine visual documentation where pictures can replace words. Icons, symbols and interactive graphics in web content. Point and click on pictures to navigate through technical documents. Zoom in to see more detail. Hover over charts and diagrams to get popup tooltips. Or open up new browser windows for more information.

SVG means you can make lots of text easier to navigate, more usable and more engaging with hyperlinked graphics. It makes learning workplace documents easier, faster, fun. It makes for a great user experience (UX) because visuals are the first thing users read and remember. It works on desktops and tablets. It's a W3C standard and integrates with HTML 5 and CSS 3 web technologies. And it's easy to use.

Interactive system diagramInteractive charts, maps and diagrams

How impressive would your statistics look when users hover over bar graphs and pie charts and get popup tooltip information? Or click on a map and it links to other web pages with supplementary information? Or system diagrams that take a user through processes?

  • Produce high-quality charts from Microsoft Office for your web pages.
  • Create interactive reporting dashboards to showcase important statistics to support business intelligence reporting
  • Interactive system and process diagrams.

Charts:YouTube logoMap: YouTube logo

Hyperlinked icons for quick links to web documentsVisual technical documentation

If you need a "getting started" guide to help software users navigate through technical documents, we can help produce graphics that show overall components and processes of your system at a glance.

  • Infographics give users a quick overview of software functionality
  • Visual table of contents hyperlink to different parts of user guide
  • Well-designed graphics can engage users with introductory instructions
  • Suitable for desktop and mobile documents.

YouTube logo

Multilingual graphics for translation/localizationLanguage translation

Technical documents that are produced for multiple markets may need to be translated into multiple languages. You can have SVG illustrations that contain all translationsusers then choose the language to display in illustrations.

  • Type translated text directly into SVG files
  • User selects their language preference in browser
  • "Single-source" graphics for international marketsdraw an illustration once and reuse it for multiple languages.

YouTube logo

Selective display of information

Where you have lots of complex overlapping graphics and users only need to display selected parts, SVG can let users choose only the information they need.

  • Turn graphics or layers on and off
  • Hover over text and graphics to show only relevant information.

YouTube logo

Embedded video for e-learning and trainingEmbedded video for e-learning and training

With video training now emerging as a tool for training employees in workplace procedures, SVG pages can include links to videos that sit side-by-side with visual procedures.

  • Embedded video player in SVG – MP4, MPEG, WMV, MOV…
  • Video supplements interactive visual instructions in the same web page.

YouTube logo

Hypergraphics | Help documents | Ebook production | Training | Contact | Terms
© 2011–2015 Xmplar