Building a large-scale cross-screen UI library in Axure

4,248 views

Published on

In this presentation I share my experiences creating a Axure starter package for in-house use at my company, focusing on the UI library part covering mobile and web. I will explain how to use Widget Styles in Axure to speed up the creation process and to reduce the complexity. I will share my learnings to help you build your own libraries and get your company started with prototyping.

Published in: Technology, Art & Photos
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,248
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
0
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide
  • Hallo,mein Name istLennartHennigs.Ich bin Interaktionsdesignerbei der Deutschen Telekom.und in den nächsten 20 Min. möchteichüber die Herausforderungensprechen, die mir in meinem Job regelmäßig begegnen. Und wie man mit ihnen umgeht.
  • Die spannende Frage ist dann: Was tun?
  • Building a large-scale cross-screen UI library in Axure

    1. 1. Building a large-scale cross-screen UI library in Axure http://www.flickr.com/photos/otterman/4475203104/ Lennart Hennigs AxureWorld 2013
    2. 2. A bit of context… Situation  Axure was widely available  …and used for various purposes:  Wireframes & UI Flows  Interactive Prototypes  UI Specifications & Wording Lists  A style guide existed, defining mobile and web UI. Problem  But Axure skills varied.  No ready-made components for day-to-day prototyping projects.
    3. 3. So why bother?  Facilitate wide adaption.  Speed up prototyping.  Stop reinventing the wheel.  Ensure consistency.  Empower people to use the full range of Axure’s capabilities.
    4. 4. Components of a UI Library. UI Elements Addons Fonts UI Patterns Document Structure Specification Template How To
    5. 5. Components of a UI Library. UI Elements Addons Fonts UI Patterns Document Structure Specification Template How To
    6. 6. Screen Resolutions. iOS Android opensignal.com, 07/2013
    7. 7. opensignal.com, 07/2013 Android Devices.
    8. 8. Mobile resolutions of Android. LDPI 0.75 MDPI 1.0 HDPI 1.5 XHDPI 2.0 XXHDPI 3.0 XXXHDPI 4.0 http://developer.android.com/guide/practices/screens_support.html http://developer.android.com/design/style/metrics-grids.html
    9. 9. Mobile resolutions of iOS. http://www.idev101.com/code/User_Interface/sizes.html non-retina 1.0 retina 2.0
    10. 10. Take-away: Scale your elements.  Use the viewport tag to scale your elements.  Scale down, not up.  With retina and HDPI (2.0 and 1.5) elements you can cover all basic resolution classes.  You maybe want to build a web one.
    11. 11. Take-away: Use widget styles.  But you actually only want to layout your elements only once.  …using widget (and interaction) styles.  …and apply them to different libraries.  And use these checkboxes sparingly.
    12. 12. Take-away: Building widget libraries. 1. Start with one library and build your elements. 2. Use widget styles for their states: default, pressed, selected, disabled. 3. Test your elements. 4. Create a new library and import all elements (and styles). 5. Resize your elements based on the resolution class. 6. Repeat.
    13. 13. Take-away: Building widget libraries.  Prioritize and order your elements.  Steal the most-used widgets (Rectangle, Placeholder, Dynamic Panel, Image…).  Use a naming scheme.  Use folders (in Axure 7).  Watch people use your library.
    14. 14. More on Mobile Screen Sizes. xlarge >= 960dp x 720dp large >= 640dp x 480dp normal >= 470dp x 320dp small >= 426dp x 320dp http://developer.android.com/guide/practices/screens_support.html http://developer.android.com/design/style/metrics-grids.html
    15. 15. More on Mobile Screen Sizes. http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
    16. 16. http://screensiz.es/
    17. 17. Components of a UI Library. UI Elements Addons Fonts UI Patterns Document Structure Specification Template How To
    18. 18. Take-away: Additional Libraries?  Flowchart elements  Wireframe-style elements  Devices
    19. 19. More on Flowchart Elements. http://www.linowski.ca/downloads/ISN_1.2_Introduction.pdf http://www.jjg.net/ia/visvocab/
    20. 20. Components of a UI Library. UI Elements Addons Fonts UI Patterns Document Structure Specification Template How To
    21. 21. Take-away: Importing fonts.  We use our own font.  To make it available I created a CSS file. 1. Font2Web 2. Base64 Encoder 3. Embed Inline Webfonts  With Axure 7 you can use Axure’s Web Font settings. @font-face { font-family: '[your font name]'; font-style: normal; src: url('data:font/ttf;base64,[your encoded font]') format('TrueType'); }
    22. 22. http://ia.net/blog/responsive-typography-the-basics/ More on Responsive Typography.
    23. 23. Components of a UI Library. UI Elements Addons Fonts UI Patterns Document Structure Specification Template How To
    24. 24. Take-away: The .RP file.  Suggested project structure  How-to section (optional)  Settings and helpers for printing  Specification settings and template file
    25. 25. Take-away: The .RP file.  Suggested project structure  How-to section (optional)  Settings and helpers for printing  Specification settings and template file
    26. 26. Take-away: The .RP file.  Suggested project structure  How-to section (optional)  Settings and helpers for printing  Specification settings and template file
    27. 27. Take-away: The .RP file.  Suggested project structure  How-to section (optional)  Settings and helpers for printing  Specification settings and template file  Page content  Content of your widget table(s)  .doc templates (landscape and portrait, paper sizes)
    28. 28. More on Specifications. Luke Perman  Better specifications with Axure RP  Golden rules for a cleaner specification output Hamish King  From Prototype Presentations to Functional Specifications  Axure Specification Templates Explored  Axure Specification Templates Deep-Dive Nikolei Merk  Funktionstexte aus Axure exportieren (in German)
    29. 29. Components of a UI Library. UI Elements Addons Fonts UI Patterns Document Structure Specification Template How To
    30. 30. (Common) Mobile App Patterns…  Splash Screen  First-time use flow  Tabs  Sliding Menu  Scrollable pages  Popups and overlays To showcase these patterns I created a mobile prototype…
    31. 31. If you are interested in the details… http://www.axureformobile.com/ Beware! Shameless self-promotion!
    32. 32. Components of a UI Library. UI Elements Addons Fonts UI Patterns Document Structure Specification Template How To
    33. 33. Take-away: What’s else?  Make it a living package.  Add a readme.first file to it.  Version control it.  Make it widely available.  Allow people to report bugs and feature wishes.  Offer some basic training.
    34. 34. Take-away: Learnings?  You can’t control how people will use it.  Nor what part of your package they will use.  But you can create a good package for them.  And its not really a lot of work.  I created the first set of libraries in a week (80+ styles and about 350 element).  But you will most-likely become the contact for all things Axure.
    35. 35. With great power comes great responsibility. http://www.flickr.com/photos/toomuchdew/9284836919
    36. 36. Thank you.
    37. 37. http://www.axureformobile.com http://www.usercentered.de @LennartHennigs T….

    ×