A–C
D–H
I–Z
Project centers
Community resources
- Flex cookbook (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User group search
- About user groups
- Adobe Community Experts (ACE)
- Developer events
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
- MXNA (blog aggregator)
- Adobe blogs
Archives
ADC program
Additional resources
Flex Article
Designing for Flex – Part 3: Structuring your application
Rob Adams
Table of Contents
- Introduction
- Three types of structure
- Applying the structures
- Designing information structures
- Designing process structures
- Designing creation structures
- Fluid navigation
- Entry points
- Visual hierarchy
The structural design process answers questions such as: What is the most important information or functionality to present up front? How will the user complete his key tasks? How will he move from one part of the application to another in pursuit of his goal? How will he locate and evaluate the information he needs to make decisions on what to do next?
Structural decisions have a significant impact on the usability and desirability of an application, and they often prove difficult to change late in the development process if you get them wrong. For these reasons it’s common practice in HTML application development to spend a significant amount of time creating wireframes, or low-fidelity representations of page structure, and flow diagrams that explain how users will navigate from one page to the next. Structure is equally important in Flex application design, but since Flex applications are organized differently from traditional HTML and desktop applications, thinking through the structure requires a slightly different perspective.
This article covers:
- The three types of application structure: information, process, and creation.
- How to use these structures as building blocks for designing your own application’s structure.
- How to design the entry point, or front door, of your application to immediately engage your users.
- How to apply your knowledge of users’ tasks to help them fluidly and effortlessly accomplish their goals.
- How to employ the principles of visual hierarchy to guide users within a screen as well as between them.
The Designing for Flex series includes the following articles:
- Part 1: Overview and discovering Flex
- Part 2: Planning your application
- Part 3: Structuring your application
- Part 4: Merging the web and the desktop
- Part 5: Designing content displays
- Part 6: Guiding with motion
- Part 7: Making your application fast
- Part 8: Making your application safe
- Appendix A: List of best practices
- Appendix B: For further reading
I suggest that you read parts 1 and 2 before proceeding with this part of the series.
Download all parts of the FIG series as PDF files that you can print and read offline: adobe_flex_interface_guide.zip (ZIP, 5.7MB)
This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
About the author
Rob Adams works for Adobe Systems, Inc. in San Francisco, California. He started at Macromedia, Inc. in 2004 and has worked on the Flash authoring tool, Flash Player, and Fireworks, but nowadays works primarily on the Flex product line. He is involved with the design of the core framework itself as well as the designer/developer tools such as Flex Builder and Creative Suite. Although his primary focus is on design research, he also does some design work, promotes sound design practices both within Adobe and without, and makes himself a general pain in the necks of the designers, product managers, and engineers he works with.
