Containers & Blocks:
Wireframing Kit for Prototyping in Adobe XD

Containers & Blocks:

Wireframing Kit for Prototyping in Adobe XD

When wireframing, there is no reason you should as a designer have to recreate standard containers such as accordions, callouts, and tabs. Its a waste of your time, time that can be spent solving actual design problems.

Continuing my series of converting and recreating my illustrator wireframing assets, this time its containers and blocks. A few of these I use very sparsely or for particular purposes. Accordions and tabs used to be a way to cram and sort lots of content in a small space. While doing so, we are hiding some of that content from the user. Still useful as a space saver, I recommend not using them as an afterthought. They are more suitable for when including associated information, such as shipping terms on a product, etc. That said, accordions are one of my fav ways to display Q∓As, making questions easily skimmable and tabs are great for featured tags, filter inline on the page.

Oh, and please check back for more. Enjoy! ヾ^_^

Included in this kit

1. Accordion

A list of items, one column wide, displayed with black separating lines, plus and minus icons, and a black outline.
Vertically stacked list of item with icons indicating if it is collapsed or expanded.

2. Callouts

Callout block, with and without the collapsable icon.
Callout block, with and without the collapsable icon.

3. Cards

Callout block, with and without the collapsable icon.
Callout block, with and without the collapsable icon.

4. Time line/Timeline

Timeline with callout blocks.
Timeline with callout blocks.

5. Table

Table with table headers and 3 columns of content.
Table with table headers and content.

6. Tabs

Tabs with content.
Tabs with content.

7. Tooltips

Directional Tooltips.
Directional Tooltips.

Enjoy! ヾ^_^


More Wireframing Kits for Prototyping in Adobe XD


Get this sent to your inbox

Let us share our thinking, opinions, practices, valuable resources and everything else that is happening at Studio Elsa.