Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Building a large-scale
cross-screen UI library in Axure
http://www.flickr.com/photos/otterman/4475203104/
Lennart Hennigs
...
A bit of context…
Situation
 Axure was widely available
 …and used for various purposes:
 Wireframes & UI Flows
 Inter...
So why bother?
 Facilitate wide adaption.
 Speed up prototyping.
 Stop reinventing the wheel.
 Ensure consistency.
 E...
Components of a UI Library.
UI Elements Addons Fonts
UI Patterns
Document Structure Specification Template
How
To
Components of a UI Library.
UI Elements Addons Fonts
UI Patterns
Document Structure Specification Template
How
To
Screen Resolutions.
iOS Android
opensignal.com, 07/2013
opensignal.com, 07/2013
Android Devices.
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/g...
Mobile resolutions
of iOS.
http://www.idev101.com/code/User_Interface/sizes.html
non-retina 1.0
retina 2.0
Take-away:
Scale your elements.
 Use the viewport tag to scale your
elements.
 Scale down, not up.
 With retina and HDP...
Take-away:
Use widget styles.
 But you actually only want to layout
your elements only once.
 …using widget (and interac...
Take-away:
Building widget libraries.
1. Start with one library and build your
elements.
2. Use widget styles for their st...
Take-away:
Building widget libraries.
 Prioritize and order your elements.
 Steal the most-used widgets
(Rectangle, Plac...
More on
Mobile Screen Sizes.
xlarge >= 960dp x 720dp
large >= 640dp x 480dp
normal >= 470dp x 320dp
small >= 426dp x 320dp...
More on
Mobile Screen Sizes.
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
http://screensiz.es/
Components of a UI Library.
UI Elements Addons Fonts
UI Patterns
Document Structure Specification Template
How
To
Take-away:
Additional Libraries?
 Flowchart elements
 Wireframe-style elements
 Devices
More on
Flowchart Elements.
http://www.linowski.ca/downloads/ISN_1.2_Introduction.pdf
http://www.jjg.net/ia/visvocab/
Components of a UI Library.
UI Elements Addons Fonts
UI Patterns
Document Structure Specification Template
How
To
Take-away:
Importing fonts.
 We use our own font.
 To make it available I created a CSS file.
1. Font2Web
2. Base64 Enco...
http://ia.net/blog/responsive-typography-the-basics/
More on
Responsive Typography.
Components of a UI Library.
UI Elements Addons Fonts
UI Patterns
Document Structure Specification Template
How
To
Take-away:
The .RP file.
 Suggested project structure
 How-to section (optional)
 Settings and helpers for printing
 S...
Take-away:
The .RP file.
 Suggested project structure
 How-to section (optional)
 Settings and helpers for printing
 S...
Take-away:
The .RP file.
 Suggested project structure
 How-to section (optional)
 Settings and helpers for printing
 S...
Take-away:
The .RP file.
 Suggested project structure
 How-to section (optional)
 Settings and helpers for printing
 S...
More on
Specifications.
Luke Perman
 Better specifications with Axure RP
 Golden rules for a cleaner specification outpu...
Components of a UI Library.
UI Elements Addons Fonts
UI Patterns
Document Structure Specification Template
How
To
(Common) Mobile App Patterns…
 Splash Screen
 First-time use flow
 Tabs
 Sliding Menu
 Scrollable pages
 Popups and ...
If you are interested in the
details…
http://www.axureformobile.com/
Beware!
Shameless self-promotion!
Components of a UI Library.
UI Elements Addons Fonts
UI Patterns
Document Structure Specification Template
How
To
Take-away:
What’s else?
 Make it a living package.
 Add a readme.first file to it.
 Version control it.
 Make it widel...
Take-away:
Learnings?
 You can’t control how people will use it.
 Nor what part of your package they will use.
 But you...
With great power
comes great responsibility.
http://www.flickr.com/photos/toomuchdew/9284836919
Thank you.
http://www.axureformobile.com
http://www.usercentered.de
@LennartHennigs
T….
Building a large-scale cross-screen UI library in Axure
Nächste SlideShare
Wird geladen in …5
×

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

4.560 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, Kunst & Fotos
  • Als Erste(r) kommentieren

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….

×