Fireworks is not the most suitable application for defining such things as animations, CSS transforms and transitions, or non-Web-font families (or CSS styles in general, although Fireworks does export CSS code, if needed). These are a critical part of the experience but might be better defined with a prototype or the like.<\/p>\n
(Some specifications of motion design are useful in a style guide \u2014 such as easing, timing, gradient, rotation, and scaling end points \u2014 but an interactive prototype would demonstrate these much better than a static image or document.)<\/p>\n
All that being said, the size of the style guide should fit the project. If you\u2019re making a simple app, you could probably keep it lean. If you\u2019re working for a financial institution, then it might need to be substantially bigger and more prescriptive. The format and level of detail are up to you.<\/p>\n
If you\u2019re developing a mobile app, ensure that the design and development team is familiar with the human interface guidelines of the relevant device or platform.\u00a0Apple<\/a>,\u00a0Google<\/a>,\u00a0Microsoft<\/a>\u00a0and others publish guidelines to ensure quality and consistency. The guidelines are geared to designers, but you might want to ensure that your team understands things like the minimum touch size for buttons (44 \u00d7 44 pixels for iOS, by the way) and the standards for typography and icons.<\/p>\n I try to\u00a0keep everything on one page in Fireworks, because exporting slices is much easier if all elements are on the same page (more on that later). The alternative is going to each page, exporting an image, checking that I\u2019ve put it in the right folder, and then cursing myself if I\u2019ve accidentally saved it to the wrong spot.<\/p>\n Speaking of which, aren\u2019t slices in Fireworks awesome? Without them, we\u2019d have to do something like this:<\/p>\n","protected":false},"excerpt":{"rendered":" Fireworks is not the most suitable application for defining such things as animations, CSS transforms and transitions, or non-Web-font families (or CSS styles in general, although Fireworks does export CSS code, if needed). These are a critical part of the experience but might be better defined with a prototype or the like. (Some specifications of…<\/p>\n","protected":false},"author":1,"featured_media":106,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"footnotes":""},"categories":[5],"tags":[11,13,18],"class_list":["post-149","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-engineering-2","tag-architect","tag-building","tag-engineering","post_format-post-format-image"],"_links":{"self":[{"href":"http:\/\/www.donbui.com\/index.php?rest_route=\/wp\/v2\/posts\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.donbui.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.donbui.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.donbui.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.donbui.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=149"}],"version-history":[{"count":0,"href":"http:\/\/www.donbui.com\/index.php?rest_route=\/wp\/v2\/posts\/149\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.donbui.com\/index.php?rest_route=\/wp\/v2\/media\/106"}],"wp:attachment":[{"href":"http:\/\/www.donbui.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.donbui.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.donbui.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}