<\/a><\/p>\n

What:<\/h3>\n

I created a stylesheet that turns any mxml app into a wireframe. This allows you to wireframe using real components.<\/p>\n

Why:<\/h3>\n

\n
1. To keep prototypes looking like prototypes, avoiding premature discussion about Halo look and feel.<\/li>\n
2. Using flex for the wireframes help insure that they are technically feasible. Designers build familiarity with Flex.<\/li>\n
3. Save time wireframing by using the automatic layout features of flex.<\/li>\n
4. Reuse the UI layout effort in wireframing to save time at implementation\u2014just remove the stylesheet or replace with a production one and you have a styled flex UI.<\/li>\n
5. Allows for wireframes that actually *work*<\/strong>–can be interacted with. You can now \u201cwireframe\u201d the interaction design work without needing to create a Flash animation mockup.<\/li>\n<\/ol>\n

   How:<\/h3>\n

   If you\u2019re using FlexBuilder for wireframing, just use the Design panel > CSS tab > Attach StyleSheet button to add the wireframe.css to your app. Or under the application tag just add the style tag:<\/p>\n

   < mx:Style source=\"..\/Wireframes\/wireframe.css\" \/><\/p><\/blockquote>\n

   (where ..\/Wireframes\/ is the path to this css file) and the entire app will inherit these styles. Note that if you are overriding this elsewhere, the more localized styles will override the wireframe styles\u2014wireframing is usually happening long before styling so this shouldn\u2019t be a problem.<\/p>\n

   You can download it here<\/a>.<\/p>\n

   This is just a first rough draft that I’ve been using. If you use this at all, let me know if it works for you and if there are any improvements needed.<\/p>\n","protected":false},"excerpt":{"rendered":"

   Here’s a stylesheet that makes a Flex app look like a wireframe and yet remain fully functional. This allows you to prototype using Flex instead of Illustrator or Visio.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5,6],"tags":[],"class_list":["post-13","post","type-post","status-publish","format-standard","hentry","category-downloads","category-flex","category-tools"],"_links":{"self":[{"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":1,"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":236,"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions\/236"}],"wp:attachment":[{"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/scarynoises.com\/blog\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}