Learn how to wireframe effectively for Drupal sites by using the Greybox Model. Greyboxing is a great in-between solution in the wireframe-to-design workflow. This method also allows the actual design process to be more in touch with the initial wireframe. Learn how to save time and increase productivity using a greybox model created in Adobe Fireworks. How to use pages, layers, grids, guides, smart guides, and component symbols to streamline your UX workflow. Also covered in this session is how to design a Drupal-specific wireframe. Discover ways to set up and design a wireframe that ensures that you cover ALL the Drupal elements. Read more on Chapter Three's Blog: http://www.chapterthree.com/greyboxing

1. THE ART OF
WIREFRAMING
VISUALIZING THE USER EXPERIENCE

2. FLOOR VAHN
LEAD DESIGNER

3. WHY
WIREFRAME ?
IN 1 MINUTE OR LESS...

4. !
GAIN
UNDERSTANDING

5. HELP
PROJECT
WORKFLOW

6. ?
INFORM
STAKEHOLDERS

7. MAKE + DEVELOPERS
DESIGNERS
HAPPY

8. 3 COMMON
WIREFRAME
TYPES

9. WIREFRAME
SKETCHES
Quick / experiment
+ feedback

10. LOW FIDELITY
WIREFRAMES
Block diagrams /
testing flows

11. HIGH FIDELITY
WIREFRAMES
Detailed, includes
comments

12. GREYBOXING

13. BUSINESS
AS USUAL...

14. CONCEPT SELECTION
GREYBOXING
HIGH FIDELITY
LOW FIDELITY
IDEA GENERATION

15. Shows a lot of detail
close to built product
Allows for details
early in the project
DESIGNER
watch out: Conversation
STAKEHOLDER
Clients get bogged
down in detail.

16. POPULAR
WIREFRAMING
TOOLS

17. balsamiq
adobe illustrator
omnigraffle
visio
axure
adobe fireworks

18. FIREWORKS
MAKES ME HAPPY :)

19. Create & Share Libraries
Create Non-destructive Effects
Multiple Pages in 1 Document
Create, Share, Reuse Symbols
Build a Wireframe Stencil
Pixel-accurate Rendering

20. A FEW
EXAMPLES

24. MOODBOARDS

29. H1

30. H2

32. A
B

33. WIREFRAMING
GNINGISED

34. DESIGN...
WHILE YOU
WIREFRAME??

36. +

38. TECHNIQUE

39. CREATING
A GREYBOX MODEL

40. CREATE
YOUR OWN
or
DOWNLOAD
OURS

41. DOWNLOAD @
www.chapterthree.com/greyboxing

42. ESSENTIAL
DRUPAL PAGES

50. SYMBOLS IN
DOCUMENT
LIBRARY

53. SYMBOL
EDITING
WINDOW

55. CREATE
YOUR
OWN
STENCILS

56. SHARE
WITH
OTHERS

57. ALL
YOURS!

58. SYMBOLS VS
STYLES

59. STYLES

60. SYMBOLS

61. TIPS...

62. 960 GRID
www.960.gs

65. 970 GRID?

66. ORANGE COMMANDS
Workflow Automation for Fireworks
orangecommands.com
Align Grids
Alpha Guides
Canvas Pages
Color Position
Effects Properties
Export Select
Export Settings Size

67. DRUPAL
ELEMENTS
what did I miss...

68. DRUPAL
PAGE ELEMENTS

69. Block Titles & Block Styles
“More” Button
Comments
Bread Crumbs
Pagination

70. DRUPAL
ADMIN

71. Admin Tabs & Secondary Tabs
Collapsable Field Sets
Error Messages

73. THANK YOU