Wireframing Made Easy with Ext JS Stencils

We’re excited to announce the release of Ext JS Stencils, a complete UI asset kit for Adobe Illustrator. With the recent release of Sencha Ext JS 6, we wanted to include assets that help designers easily mock up applications. Ext JS Stencils contains all of the components and styles used within the Ext JS classic toolkit. Stencils can be used in a product development workflow to help designers communicate with developers and other stakeholders. Stencils consist of three Adobe Illustrator files (for the Triton, Crisp, and Neptune themes) that you can use to design great looking applications quickly and easily.

Download Now

Our primary motivation for creating Stencils was to help improve communication between designers and developers. We learned from our customers that one of the major challenges for designers in an application development cycle was understanding the breadth of UI components and styles available in Ext JS. We addressed this concern by providing visual assets that match exactly what is available within the framework. We chose to create these assets in Illustrator because it is one of the most widely used design tools among designers.

While creating Ext JS Stencils, we went to great lengths to make sure that it would be an accurate representation of what you can achieve with Ext JS 6 – to the very last pixel. We created all of the Ext JS components in vector form and converted them into symbols, so you can quickly and easily create your application mockups. The Illustrator symbols can be scaled intelligently without distortion because we used 9-slice scaling. In Illustrator, symbols are found in the symbol panel, and we made sure that the symbols we introduced with Ext JS Stencils follow a standard naming convention. Additionally, we preconfigured all of the text styles into the character styles panel and included a full-color palette for each theme.

Last, we used Ext JS Stencils to build some sample application wireframes, which you can find in the Illustrator document. With these examples, we are demonstrating possible customizations you can make in Ext JS. In one example, we created a mockup of a video library application. While the header section is not an Ext JS component, after consulting with one of our engineers we found that a custom header like this can be easily implemented using XTemplates. For everything else, we used the out-of-the-box Ext JS component symbols: side navigation tabs, buttons, grids, and grid widgets.

In another example, we created a website inspired by the popular advertisement website Craigslist. Our goal was to make it easy to visualize the best way to design a well-known website and use Ext JS to build it. In doing so, we decided to configure the home page with an Ext JS Accordion Layout. This layout make it easier for users to navigate dozens of categories.

We hope these examples are useful and you enjoy using Ext JS Stencils to create great application mockups for your products.

To get you started, we have created a tutorial video that walks you through the basics on how to use Ext JS Stencils. Try it out, and share your feedback in the forum.