Wireframe Components
A component is a chunk of a page design.
A component contains generic, atomic elements (like text, links, buttons, checkboxes, and images) combined into a meaningful building block used – and reused – in your interface design of an entire page. Other common terms you may have heard to describe a page chunk include module, portlet, widget, or even molecule.
The word component can mean different things to different people. For example, if you want to be more precise, you could refer to the components of this system as web page components to formally distinguish them from the broader and more technical concepts of software components that engineers think so deeply about.
The EightShapes Unify system comes with sample components for you to get the idea.
Wireframe Component Samples
Want to learn more about component-based wireframes and creating libraries for your team to use? Then may we suggest Modular Web Design: Creating Reusable Components for User Experience Design and Documentation by EightShapes partner, Nathan Curtis.
Where
/wireframes/_components/
How
To use a component:
- Find the snippet of interest by navigating to the /wireframes/_pages/ directory and, if using Adobe Bridge, using keywords to filter components to show a subset of interest.
- Place the snippet using one of the following options:
- Select File > Place and selecting the snippet of interest
- Drag the snippet from Adobe Bridge or your files window (Windows Explorer or Mac Finder) into an InDesign wireframe document.
- Position the embedded content (text, objects, etc) in your layout.
- Ungroup the embedded content if necessary to customize your layout.
NOTE: You cannot open a page snippet file independently of an InDesign document (.indd) file; the snippet must be placed into a document.
When
Place a component onto your wireframe layout at any point during the composition of a page design.
Why
You can use component-based techniques to break complex problems (a page or even an entire site design) into parts that are easier to conceive, understand, and communicate. Breaking down the design enables you to separate it into different areas and focus attention on smaller self-contained problems, one at a time.
By dividing the page into components, a designer, engineer and other project participants can understand an entire solution but also focus on each part separately: a header & footer navigation system, photo galleries, or even the tone, quantity, and length of each headline in a list.
Components are essential for reusing a design in multiple places across a user experience. By breaking down a design into components, you increase the likelihood that you can reuse individual pieces again in other places with slight or no modification.
Reusable components increase consistency, improve design productivity, reduce (or even eliminate) subsequent implementation time, and let you to minimize the impacts of updates since many page designs rely on the same part. You can establish a modular design by creating sensible boundaries between each component, and then recombining them over and over in systematic ways.