UPDATE: Wireframing Kit v3 is here

Jaison Justus
Feb 8, 2017 · 3 min read

Checkout Wireframing Kit v3

— — — —

Image for post
Image for post
Image for post
Image for post
Get Wireframing kit for Adobe XD — 110% Free

Wireframing is an important skill in the software industry, used to organise information on an interface and communicate it with the team. Balsamiq, UXPin, Omnigraffle, Axure etc. are few of the already established wireframing apps. So, why did I put effort creating this wireframe kit?

The main reason is to avoid multiple tool dependency when creating design artefacts like wireframes, mockups, etc. I have used Balsamiq for wireframing, Sketch for creating mockups and Keynote for prototyping/flow simulation. But the challenge is to manage and bridge these softwares.

When Adobe released their new tool called Adobe Experience Design (a.k.a Adobe XD) last year, I gave it a try. I used the tool to design screens for my personal project, and it gave me a single seamless platform to develop screens and simulate the flow between them. This feature got me thinking about doing wireframing on Adobe XD, so that I can create wireframes and corresponding mockups within one platform. On top of that, Adobe XD offers static prototyping, which allows you to conduct user testing very early in the development cycle, even at the stage of wireframing.

This kit contains

Image for post
Image for post
Screenshot of Wireframing Kit
  1. Textual helpers: heading, paragraphs, block quote, ordered list, unordered list.
  2. Input Controls: label, text input, text area, button, checkbox, radio, number, combobox, switch, slider, colour picker, date picker, field set, start rating, heart rating, file uploader, drag, drop file uploader.
  3. Dialog boxes and Feedbacks: alert, prompt, spinner, progress bar, notification messages, tooltips.
  4. Multimedia Controls: audio, video, image, thumbnails.
  5. Navigation Controls: horizontal navigation, vertical navigation, tabs, pagination, breadcrumb, previous-next button, segment control, stage/phase, tab bar.
  6. Dashboard: vertical bar chart, horizontal bar chart, pie chart, donut chart, line chart, area chart, bubble chart, plot chart, gauge, data blocks, world map.
  7. Text Input helpers: (text box with labels) email, username, password, name, nickname, designation, company, facebook, twitter, phone number, mobile number, address, search, location.
  8. Listing helpers: product list, news list, article list.
  9. Misc Components: carousel, WYSIWYG editor, calendar, captcha, accordion, social share, table, map, tags, date range, time range, registration form, login form, chat/message screen.
  10. Card: card layouts.
  11. Devices: mobile phone, desktop.

If the wireframing kit seems helpful, don’t forget to press the green heart. And follow me for more updates!

Source: http://jaison.info/writings/wireframing-kit-for-adobe-xd.html

Image for post
Image for post

Image for post
Image for post
Get Wireframing kit for Adobe XD — 110% Free

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store