Latest Ext JS 7.8 is now available. Learn more

Wireframing Made Easy with Ext JS Stencils

July 23, 2015 198 Views

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.

Ext JS Stencils Example

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.

Ext JS Stencils Example

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.

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More