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.
![[]](http://eightshapes.com/assets/images/content_baseline.gif){kind=small}
Hi, i am interested in try using your “wireframe-components”. Could you tell me how to install it after download?
Thanks
Joyce
Joyce,
In order to use the samples, simply unzip the EightShapes Unify download, open a wireframe template file (in /wireframes/, ending in .indt), and then use either (a) File > Place or (b) drag and drop to add the components to your wireframe.
The Wireframe Basics video covers these getting started activities.
Thanks,
Nathan
Dear Lord! This is comprehensive. Appreciate your economy in typography, how you’ve conceived of the file structure, the attention to grid theory, mastery of Indesign (masters, object styles etc.) and the fact that you’ve shared this with the world. I’ve been playing with this for the past day and I’m very impressed. Many, many thanks!
Nathan,
I’ll second the sentiment of the others above. Nice work & well done!
My question stems from the usage of InDesign Page Snippets that you have within the _components folder. All files within this folder end with an .inds extension (e.g.: /wireframes/_components/Logo.inds). How would you recommend adding logo snippets for each of my clients?
In other words, I’ll either need to somehow override your Logo.inds file -OR- overwrite the EightShapes Logo.inds with my company’s logo within the same Logo.inds file?
While I can open the Logo.inds InDesign snippet file by placing it within an existing, open InDesign document … I cannot see a way to save, save as, or export as a MyLogo.inds InDesign snippet file.
I hope there is an easy way to override rather than overwriting your templates.
Thanks,
_rs
Please also note that I did read through the page entitled Customizing Deliverables as linked in the footer and the 2 links below:
http://unify.eightshapes.com/users-guide/deliverable-basics/customizing-deliverable-templates/
http://unify.eightshapes.com/users-guide/deliverable-basics/customizing-deliverable-templates/customize-the-logo/
…I could not seem to find anything about saving out .inds design snippet files (only customizing an already generated wireframe template document).
Perhaps this is your intent (for obvious “you’d like credit for your work” reasons), I just thought there might be an easier way to extend and create my own .inds files.
Again thank you!
_rs
My apologies … I see that in
http://unify.eightshapes.com/users-guide/deliverable-basics/customizing-deliverable-templates/customize-the-logo/
…it does talk about how to make a .inds file, it just doesn’t say it like this (or make mention of the file extension), hence my confusion.
Basically, after completing steps 5 & 6:
5. Select Object > Interactive > Convert to Button
6. With the button selected, check “Visible in PDF but doesn’t Print†from the panel option menu on the Button panel.
…and step 6.5 would be…
If you want, you can save your new logo (button object) as MyClientLogo.inds within the /wireframe/_components/ directory for later reuse.
Heh, now it all makes sense
Again thank you Nathan!
Ratioswitch,
Creating a new snippet is easy: just select the artwork you’d like in the snippet, and then drag it to your desktop OR File > Export (file type = snippet). Our intent is not necessarily “credit for our work” as you state; the templates are provided for you to communicate design better and we’d expect that your company logo is the one positioned in the top left of deliverables. That said, sustaining a reference to where you got the templates is appreciated.
Nathan