From wireframe to interactive prototype with Justinmind’s Kendo UI kit
With Justinmind’s all new Kendo UI kit, prototyping interactive web and mobile applications is faster than ever
Introducing Justinmind’s latest free widget library: Kendo UI. The new UI kit contains all the UI components you need to create and build native-feel, interactive web and mobile prototypes in the style of the Kendo framework.
Get the Kendo UI kit and start creating meaningful user experiences now! Download the Kendo UI kit to get started.
The days of wasting prototyping time on component hunts or building widgets from scratch are over. With Justinmind’s free Kendo UI library, you can do more work in less time: no more re-creating buttons, calls to action or progress bars. Justinmind’s UI kit packs a punch — with over 70+ components to choose from, design problems now have detailed-orientated design solutions. With these components, your UX design will be consistent from start to finish.
In this post, we’ll also walk through how to create and prototype your own e-commerce website from initial idea to interactive wireframe using Justinmind and the Kendo UI kit.
What is the Kendo UI framework?
Kendo UI is a complete component library which helps designers and developers create high quality, high performance responsive web and mobile apps.
Kendo framework means you can build HTML5 and JavaScript applications using the latest web and mobile standards. It combines the best of HTML5, CSS3 and jQuery and benefits from broad browser support including Chrome, Safari and Firefox. And with Justinmind’s new Kendo widget library, designers can create native feel rich web and mobile application prototypes with a drag and drop.
Kendo’s UI framework has everything you need to build JavaScript applications seamlessly. The framework comprises three distinct products, all of which are included in Justinmind’s widget kit.:
- Kendo UI Web: contains all the main elements of the Kendo kit including DataSource, templates, drag-and-drop and themeable widgets.
- Kendo DataViz: HTML5 powered, mobile-ready data visualization widgets.
- Kendo UI Mobile: native UI widgets for building HTML5 powered mobile apps.
Many developers and designers use UI frameworks as a foundation — a starting point — because they’re widely used and understood. A framework like Kendo’s can be used to ensure standardization across all web and mobile apps so that designs are consistent and adhere to predefined configurations.
With Justinmind’s Kendo widgets, you can create web and mobile application prototypes that look and feel just like products built with the actual framework, as well as customizing any UI components to your own preference.
What’s in the Justinmind Kendo UI kit?
Save time and reworks and work with over 70 customizable UI components including:
- Grid
- Editor
- Scheduler
- Charts
- DropDownList
- Window
- Upload
- TreeView
- ProgressBar
- TabStrip
Get started with Justinmind’s Kendo UI kit for wireframes & prototypes
To put the framework into action, follow these 4 steps to begin:
- Download Justinmind and start your free 30 day trial
- Download the Kendo UI kit from our widgets page
- Import the UI kit into the prototyping tool. The widgets are visible on the left hand side
- Start a new prototype using over 70 Kendo UI components
Prototyping an e-commerce website with Justinmind’s Kendo UI kit
As soon as you’ve downloaded the UI kit you can get started creating web and mobile experiences. Together let’s create a e-commerce website which uses Justinmind’s Kendo widgets to illustrate just how easy it is to get from initial idea to interactive wireframe.
Create your e-commerce homepage
In Justinmind, create a new web prototype. From there, you can decide on the screen dimensions. We’ll stick with the default in this case but feel free to adjust to your own preferences.
Now we have our blank canvas, we want to populate it with images, text and other widgets from Justinmind’s pre-defined libraries, as well as the Kendo UI kit you’ve just downloaded.
Remember that the Kendo library is entirely customizable, so our version will look different from the default styles found in Justinmind. All the more reason to experiment and have fun with the UX design.
Let’s add a hero image. Hero images are a great way to impress users who visit your site and act as a way of showing off your product or services. Drag the standard Justinmind image widget to your canvas and resize it accordingly. Ideally, you want to have the image to take up a quarter to half the length of the screen for full impact.
Most homepages have a navigation bar found at the top. Our e-commerce website will have dropdown menus where users can navigate to other areas of the website. We can use Kendo UI’s menu orientation widget. Drag this widget to the top right hand side of your screen. In the Events panel, you can link your navigation elements to other screens.
Don’t forget that with our template function, you can reuse content to save you time when designing. This means repeated elements such as navigation bars and logos can appear in the same place each time you make a new screen creating consistency across your web and mobile apps.
You can add a inspirational text, sales copy or a dramatic call to action on your hero image as this can help increase conversions. If you wish to add a button, use a button widget. You can add Events to the button. For example, an ‘on click’ Event could be used to take the user to another screen. This same process can be applied to your top navigation, too.
Create web & mobile experiences faster with Kendo UI. Download now.
To the left of your navigation bar, you can add another image widget if you have a logo you want to insert or a text widget if you simply want to write the name of the e-commerce website. You don’t have to settle for the standard fonts either — Justinmind has full Google Fonts integration.
Below your hero image, we’ll add a section for most popular products.
In our example, we used Kendo’s ScrollView. It’s similar to a carousel — which can also be constructed simply in Justinmind with dynamic panels — in that the user has to click either left or right to move through the content. Thankfully with the Kendo UI, you can save time by simply dragging the ScrollView widget onto the canvas and populating it with your own content.
ScrollView isn’t the only way to play with content in the e-commerce app. The Loading Content with AJAX widget is a great way to give users an bonus bit of content that will add value to their experience. When the user hovers over an image, a pop-up appears with additional information relating to that image, in our case to show the dimensions of the product with a call to action inside the window with ‘Show more’.
Prototyping your e-commerce product page
Now we can focus on a product page within our web prototype. A product page like the one we’re going to create will show you the potential of the Kendo UI kit. The main features of a product page are the images — a chance to show off your products and impress customers. This is where we can use the Replace/Effects in the Kendo UI kit.
With the Replace widget, when users hover over the smaller images on the right, the image will be enlarged on the left. This means users will get a more detailed look at the product on offer, along with enticing copy.
We also added radio buttons to indicate a change of color for the chair which can be done using the radio button widget in the widget panel under Forms and Input.
Let’s say a chair comes in two colors: blue and brown. You can use multiple dynamic panels to put the content in, then add an On Click > Set Active Panel event in the Events panel. Users can click the radio buttons which will trigger which content to show in the dynamic panel.
Using Kendo UI’s PanelBar means you can hide and display additional content using drop downs. In our example, you can see a box which contains Material, Measurement and Weight and Packaging and each of these has a drop down arrow to reveal information. It looks complex at first glance but with the pre-made UI component all you need to do is add your own text.
Creating an inspiration page using the Kendo UI kit
Our inspiration page has a lot to offer while remaining relatively simple by UX design standards. The inspiration page uses the same navigation bar we used throughout the e-commerce website so you know how to construct most of this page already. Plus many UI elements are repeated, which also makes for faster prototyping.
Since this page is meant to inspire, it is made up of mostly image widgets except for the main hero image.
What makes this page pop is one of the powerful Kendo UI widgets included in our new kit: Tooltip. You can upload an image with various products then add hotspots. These hotspots, once hovered over, can reveal additional information such as price, size and product name. It’s a great widget that can be used in many different contexts.
And with that, you’ve created a homepage, product page and inspiration page of an e-commerce website using a mix of standard Justinmind widgets and Kendo UI components.
Justinmind’s Kendo UI kit — download it now
With 70+ customizable widgets and hundreds of standard Justinmind widgets, you can create interactive wireframes and prototypes that stay true to the Kendo UI framework in no time at all. Download it now.
