Typography & Base:
Wireframing Kit for Prototyping in Adobe XD

Typography & Base:

Wireframing Kit for Prototyping in Adobe XD

Wireframes are the blueprint of a website or application and an important step in the development. A visual guide, illustrating all critical components needed for a user to accomplish the intended goal and purpose of the site or application. It serves as an agreement between all parties of what we are creating. Having a good wireframing kit cuts time and allows you to do faster prototyping.

I have in the past, tried and used several tools and methods to create and present wireframes, user-flows, and prototypes. Everything from Balsamiq, InVision, OmniGraffle to PDF click throughs. All with various success, none of them fit the rest of my tool stack, which consisted of Adobe Creative Suite, and mainly Adobe Illustrator. Yeah, I never really liked Photoshop for the web, and once things went responsive, vectors were an obvious choice. And as a result of this, I ended up with wireframing in Illustrator and using InDesign to create presentations and layout user-flows.

When Adobe announced their new prototyping application Adobe Experience Design, I was excited to try it out. Maybe it will replace what I currently am doing, and still play nice with the rest of the Adobe Suite?

It turns out I am quite comfortable working in Adobe XD (Experience Design). The application is still in beta, I am patiently waiting for upgrades to improve the things that are not. My existing Illustrator wireframing assets are, per project basis, converted and recreated one by one. So let me share with you, text component for structured blog content and media elements. Use them as you see fit, and please check back for more. I am planning to release smaller kits like this for different moving forward.

Enjoy! ヾ^_^

Included in this kit

1. Paragraphs

Two paragraphs blocks
Helvetica Neue Regular, 16/20

2. Headers

Header H1–6
H1, H2, H3, H4, H5, H6, Helvetica Neue Bold

3. Empasis/Strong

Helvetica Neue Italic/Bold

4. Divider

A single horizontal line

5. Unordered List

Bulleted list items and nested list items
Bulleted list items and nested list items. Helvetica Neue Regular

6. Ordered List

Ordered list items and nested list items
Ordered list items and nested list items. Helvetica Neue Regular

7. Definition List

Definition list with list title and list body sections
Helvetica Neue Regular/Bold

8. Blockquote

Charles Eames quote, as a blockquote
Helvetica Neue Regular/Italic

9. Code

Code Container
Courier Regular

10. Images

Media Image Placeholders
Image placeholders, large, medium and small.

11. Video Player

Media Video Player

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.