New HTML5 Interactive Designer
With all the buzz words surrounding internet technologies today its really hard for anyone but the super tech enthusiast to understand why “Cloud”, “HTML5” or “JQuery” is such a big deal. So why should you be excited about the NEW HTML5 based Interactive Designer? Let me break it down to the basics, its faster then flash, it can be on more platforms and is easier to manipulate. Those are the three most paramount needs for all internet technologies and with the HTML5 designer we can now get there. Gone are the days where we would have to rely on a third party technology to manipulate imagery and text dynamically. Now with the much needed improvements to the basic foundations of internet languages we can press forward, stay at the bleeding edge of innovation and take advantage of the latest and greatest browser or language improvements.
What about the specifics? What is different about this NEW HTML5 Interactive Designer? Well, let me walk you through some of the best part of our new designer…
Easy Element Manipulation
With the new html5 interface adjusting text and image elements is a snap.
With the new html5 interface its super simple to drag a corner and re-size a text or image area. Need to move a layer to any place on the page? Just click and drag like you would with any desktop program and we have helpful cursor indications to let the user know what action is available as they hover over the element.
Rotation is even easier now! The green handle will allow you to rotate your element to any degree! You will be hard pressed to find any Interactive Designer online that allows for this extreme in rotation manipulation.
The Layer Browser
A multitude of options to edit layers any way you want.
The layer browser is the list of all the elements that are part of the template for that particular page. Each element, whether it is text or image, has its own set of options for manipulation.
As you can see here this is a text element and its options for editing. You can edit everything that makes up that text element from its font name to more advanced possibilities such as Leading and Tracking.
Many standard fonts are available by default but the Interactive Designer doesn’t limit you to just those. The template creator can upload any fonts needed to be used in the template.
And the best part about it, when you edit the text it updates on the template INSTANTLY!
Zooming, lets get closer!
Need to make a very detailed edit, just ZOOM!
A simple and quick drop down option from the control bar at the top of the template allows for zooming of the template. Which allows the user to get in very close and edit the template elements very exactly.
From 100% to “Fit Width” we have just about every option you will need to pull the template closer and make that brochure or business card exactly the way you want it.
Page Transitions
How about a little eye candy? Just switch a page and watch them slide!
A simple click on one of the page indicators causes the page the user is viewing to slide out of the way while the page they requested slides into view. Not only is the transition smooth and beautiful but its also very cool!
And with the page hover indicators the user doesn’t even need to click on the page to see what it looks like. Just hover over the page indicator and you will get a nice preview of the page you about to request. This is great for multiple page templates where finding the right page quickly is essential.
Text Options
As shown previously we have a multitude of text options to allow for complete customization of text areas. Here is a list of all the options that our users can take advantage of with the new html5 interactive interface.
- Font Name – Tons of fonts to choose from, or upload your own.
- Font Size – from 0 to 999 we’re ready for anything, and the template designer can limit these numbers.
- Leading – Control the vertical line space
- Tracking – Control the horizontal letter spacing
- Alignment – From “Top Left” to “Bottom Right”, we know how to align.
- Font Color – Pick your favorite color
- Font Styles – Bold, Italic, Underline of course
- Arrangement – You can stack font layers any way you want.
- Text Editing – Type and it updates INSTANTLY!
Text Picker, even more options for text manipulation!
Need just a specific selection of text options TEXT PICKER!
As a template creator / printer do you need to limit the text options for your users? We have the right thing for you, its called a “Text Picker”.
The user simply clicks on the text element and the layer options open, but instead of a text area to enter in their text they get a drop down with several options. There can be any number of options here.
Just click the text you want and the element on the template updates instantly. Wow that is cool! Oh and did I mention that we support ANY font? Yes that is correct you are seeing an Asian font set in the image here. Not only that but the HTML5 Interactive Designer is totally localized, so not only can you have all the fonts in the world but all the controls to edit the template will be in the language set by the browser. Allons-y!
Image Options
When a user uploads an image they can manipulate it in many different ways. They can drag it across the template to any position. Rotate it by any degree. Re-size the image any way they see fit. They could also arrange the images in any stacking order or put the images behind the background if they so choose. Image manipulation made simple!
Image Picker
Image picker popup makes selecting specific images simple and fast.
Yes we have a picker for images also. As a template designer do you need to limit your users to just a few select images? Or do you want to make choices simple and easy for that company business card that needs to look the same for each employee?
We have an “Image Picker” to solve these needs. The user just clicks on the image that is part of the template and the listing of possible images pops up for an easy choice. Select your image and see it appear on the template then begin to edit like you would any other image. Simple and awesome!
Adding Images
The html5 Interactive Designer users can add images with a simple click of a button. Within seconds they will be navigating their hard drives or Facebook accounts looking for that perfect image to add to the template. Then its just a matter of cropping the image to size and then they have a new image that is part of the template and ready to be manipulated just like any image element.
We even allow template designers to limit this functionality. If you want to keep your template to specific possibilities then its easy to turn off adding images.
Adding Text
Adding text is just as easy… no, its even easier then adding images! The user just needs to click the “Add Text” button and BAM! their editing a new text area. Its just that quick!
Yes, we even allow the template designer to limit this functionality. If you don’t want extra text beyond what is part of the master template just simply turn of that option.
Undo / Redo, a life saver!
I don’t know about you but I think my life would be much worse without the invention of “undo”. We can’t have the undo button in real life but in cyber space we go beyond the reality and into infinite possibilities! Did you just make a change that really looks bad? One click and your back to where you were. Or mash that button a ton of times and watch the template change before your eyes going back in time to a place that you loved even more.
And don’t worry if you hit the undo button too many times, that is why we have “redo”! Yep, its just as simple.
Cropping
As a programmer this was one of the hardest things I have ever had to do. It has taken us a ton of man hours to get this just perfect. It is so simple to just choose an image area that is part of a template, browse your hard drive, select an image and enter in to this wonderful space that is cropping.
On the left we have a selection box that is super simple to move around and re-size, and on the right you can see your selection by itself instantly. There is no question on how your image is going to look after you hit the “Add Image” button. You can see everything you need here. Even if the quality of the image that is being upload is not going to print well the html5 interactive designer will let the user know in simple text and color coding that their image is great or not so good.
With the wealth of information it provides and the easy of use cropping with the interactive designer is one of our most powerful tools.
Need a simple way to only use a part of an image, we can do it.
Facebook Integration
Click the button to login to facebook and choose an image
As you know the HTML5 interactive designer can be used on mobile platforms. But some platforms don’t have the ability to choose images from its hard drive. So this is one reason why we decided to integrate Facebook into the Interactive Designer. Once a user clicks on an image they are brought to a screen to choose their hard drive or to connect to their Facebook account and choose an image.
From there is a simple interface that is shown that allows the user to navigate their Facebook albums and choose the perfect image from their Facebook account.
Its super easy to navigate your facebook albums and pictures.
The Future
I’m not at all scared to tell you that we just released the new HTML5 Interactive Designer. Its brand new, right out of the box and it works great! So imagine if we keep improving it because that is exactly what we are going to do. We constantly listen to all of our users and every piece of feedback is taken into consideration. If the HTML5 Interactive Designer is this great right out of beta then you can consider its future to be very bright indeed.
