What the heck is wireframing/mockups and why to use it

Mockups reproduces the experience of sketching interfaces on a whiteboard, but using your computer, so they're easier to share, modify, and get honest feedback on.

Wireframes made with Mockups look like sketches, so stakeholders won't get distracted by little details, and can focus on what's really important instead.

There is lots of software for wireframing out there!

Drupal wireframing components for Balsamiq Mockup

I have chosen to work with Balsamiq Mockup, so you will find only components for this peace of software here.

In Drupal we have lots of features Boxes/Fields/... which are not implemented in common wireframing tools... also not in Balsamiq... But...

...There are some free components that make our lives easier!

extend Balsamiq Mockup with special Drupal components

• Header with logo, site name, slogan, primary and secondary links
• Node teasers with submitted, tags, different types of links, feed icon
• Sidebar with common blocks like search, user login, menus
• A Drupal-style pager
• Footer menu and footer message
• Drupal messages: warning, help, status, error
• Breadcrumbs, local task tabs
• Full node page with comment thread and form
• A few extra blocks like Quicktabs, view of recent comments, and Ubercart shopping cart block

Balsamiq Mockup Components by Fusion Drupal Themes

Download Balsamiq Mockup Drupal Starter Set

• Filefield
• Imagefield
• Add This block
• Content administration
• WYSYWIG-editor with input format

Balsamiq Mockup Components by Boris Doesborg

Download more Drupal Balsamiq Components

and for our open atrium fraction, there is also a layout available

Balsamiq Mockup Layout by Greg Bosen

Download Balsamiq Mockup set for Open Atrium

Language
English