Justinmind’s New Release: CSS view, multi-target events and online comments on scenarios

justinmind-new-release-header-7-8.png

What’s New

New major features in version 7.8.0

  • New palette to see the CSS code of UI elements.
  • Events can now be targeting more than one element in the same action.
  • Events can also be targeting elements in templates.
  • Comments can now be placed and replied in Scenarios from the online service.
  • New tooltips in color dropdowns showing the hexadecimal color selected.
  • Now you can paste hexadecimal colors with the hashtag included in color inputs.
  • New button in image properties to save the image to your computer.
  • And also several bugfixes, including:
    • Fixed ‘Too many sign-ins’ bug related to account activations.
    • Fixed simulation issues in iOS prototypes that prevented click events from being executed.
    • Dynamic panel hierarchy can now be modified in the Outline tab.
    • Fixed a bug related to images displayed in Set Value events.
    • Problem related to reverting delete actions on screens has been fixed.
    • Fixed issue with JIRA and TFS plugins where issue types were always converted to ‘task’ – they now remain as in source.
    • Fixed style of iOS checkboxes in simulation.
    • Fixed crash related to fonts and styles when not available.
    • Fixed HiDPi issue with drop downs.
    • Fixed copy and paste issue when clipboard was empty.
    • Fixed issue with datagrids’ pagination when datagrids were nested.
    • The drag and drop of links between components in your scenarios has been improved.
    • Upon exporting documentation to MS Word, the order will reflect that of the Screen’s panel, instead of alphabetical order.

 

 

via: https://www.justinmind.com/blog/wireframe-tool-prototyper-7-8-0/

 

7 reasons why you should always make a web or app prototype (or at least a wireframe)

WhyProto.png

  1. Get everyone speaking the same language
  2. Visualize the future product
  3. Share ideas
  4. Read the article if you want to know the rest.

via: Justinmind 7 reasons why…

Justinmind is a high-fidelity prototyping tool, not to be confused with wireframing.  Wireframing is a great way to quickly mock up some pages of a website for review and discussion.  Justinmind can take those static pages and bring them to life so the users, developers, and designers can all feel the flow between the pages.

Justinmind has data-driven simulations of what the content on the pages will look like.  Import a few Excel spreadsheets and you can see data that changes as you interact with the prototype.

Skip the email madness and collaborate with direct feedback on the design that everyone gets to share.  When you are at the point of needing documentation Justinmind can produce many reports as you can dream up using Word Templates.

 

Justinmind Version 7.7 released

7.7-new-release-Justinmind-prototyping-tool-header.png

The Justinmind (JIM) folks are keeping up the heat with improvements to the best prototyping tool around.  Don’t confuse prototyping with wireframes.  They have added training wheels to allow those who don’t use it regularly to be “Stepped” through how things work.   These training wheels can be taken off for those who already ride the JIM bike.  They have improved Scenarios with the ability to add images and a full-screen editing.  They have improved Requirements by allowing a single requirement be attached to multiple elements of a page.  Last they added a real Bootstrap UI no more using a user-created widget library from 4 years ago.   Keep your eyes open for some “Techniques” videos on JIM from our training branch.

Aren’t web designers and web developers the same thing?

webdesigner.png

I have been asked this question, many times, “Aren’t web designers and web developers the same thing?”  Currently ing a web designer and formally a web developer, I can safely say, No!  This article from DZones Amaya Farkiya does a better job than I at explaining the difference.

Rapid Prototyping web applications.. the best way

rapid-prototyping-software-development-life-cycle-header.png

I have been doing rapid prototyping for web and mobile applications for a few years now.  The answer to the question above is a definite YES!  If the user can “play” the prototype on the device it will be used on; they will be more likely to see things that need to adjusted.  “Play” includes viewing pages, entering data into forms, interacting  and navigation.  This article from Justinmind’s  E explains better than I can, more of the justification for real Rapid Prototyping web and mobile applications.  As a designer, I’m a big fan of Justinmind and use it  every day.     As a developer, I could write prototype scaffolding that could become the framework for the actual application.   While this may save a little time; Justinmind adds a collaboration layer that makes interaction with the user simple.  Recently Justinmind and Atlassian’s JIRA announced requirements integration which allows the prototype to feed the requirements to the developers via of JIRA’s.  If you’re going to be agile then you have to seriously consider rapid prototyping.

 

AMCHARTS LiveEditor Prototype a chart quickly

AMCharts

AmCharts is an excellent HTML/CCS JavaScript library for rendering all sorts of business charts.  Thier LiveEditor is an must have tool to add to your Prototyping toolbox.   LiveEditor allow you to import a CSV of your chart values and construct your chart.  Bar, line, column, 2D. 3D. speedo’s and animation along with all of the properties of the chart can be adjusted on-line and you see the results of your changes dynamically.  If you create a free account you can save the results of your efforts and recall them later.  Then you can export the masterpieces you build into HTML and include them in a web page or prototyping tool that allows for HTML.  Take the results of a Teradata query to a Animated Business Chart in less than 5 minutes.

While the LiveEdit is free and a great tool to get the best use our this product you should consider purchasing a license for a server, it’s only $140 which is quite a value.  You can consume data for the charts from a number of data sources including JSON.  Since it is a JavaScript library and uses HTML5.0 and CCS3.0 you can use this library in almost any development library from PHP, Python, Ruby on Rails up to Java and .NET.

Customized HTML Table Generator from Excel worksheets

TablesGen

 

Sometimes when you are developing a Prototype for a web site or dashboard you find yourself needing a HTML table that is nicely formatted.  Sometimes the data for the data table is in a Excel spreadsheet or a CSV file.  The Table Generator website is an online tool available from any browser to greatly simplify this.    This tool also handles LaTeX, Text, Markdown and Media Wiki tables.  There is a set of themes to help bling up the table formatting and color.  After you import or enter the data into the table you can use the tool to modify it for last minute tweeking.  The generated HTML file includes CSS to help maintain your formatting choices.

Justinmind vs. Protoshare Prototyping

When doing the design for a web application one of the considerations will be if the site is“Content” centric, “Commerce” centric  or “Data” centric.  Content centric sites have a fixed number of pages with very little data (ie: Blogs, Information sites, Wiki’s).  Commerce centric sites have a lot of data, images and a method for buying things (ie: Amazon, eBay).  A Data centric site is typically one that has lots of data and servers a specific purpose (ie: Monitoring Health Care Beneficiaries, Viewing Court Cases or reviewing store sales)  The prototyping tool you chose will have an impact on how your prototypes appear to the shareholders.

I’ve used Protoshare for the last 2 years and taught may others.  GeeMustHave has some tips and techniques for getting the most from Protoshare.  Recently a new prototyping tool has come to attention called Justinmind.  Justinmind is a Windows based tool that saves your prototypes locally in a file and optionally publishing them to the web for others to view and collaborate on.  If your web sites are “Data” centric you are going to love this application even if it doesn’t run on Apple Mac or Linux.

I’ve just begun an analysis and comparison of the two prototyping tools and will continue to do so for the next year or so.  I’m going to maintain the chart below as I discover different aspects of the 2 tools.

Created with Compare Ninja

Mice, they are so 90’s

MiceSo90s

Everyone uses them.  Mice.  So of us can’t use them because of things like Carpal Tunnel Syndrome.  If you a Mac user you may be accustomed to the touchpad like on a MacBook Air.  If you’re a Windows user you may have used to a touchpad on a Notebook.  If you use desktops you may be stuck using that mousey contraption.

Logitech makes a large touchpad called the T650 which I have been using at work and in my lab for a few years now.  I suffer from CTS and find this device very useful, powerful and sometimes frustrating.  If it’s too for from the “unifying Receiver” then it loses it mind and forgets it’s job of pointing the cursor around the screen.  Sometimes it forgets that “tap” really means a “click “in Windowspeak.  But generally it is a good device and will go for about 3 weeks before you have plug it in to recharge it. 

More important is the T650 support gestures.  Things like tap, swipe and pinch.  You can give a 3 year old child a tablet and within a few minutes they are gesturing like madmen.  It is the evolution of user interaction with machine.   Web designers have to adjust web site design to acknowledge how people interact with PC’s, tablets and cellphones.  Prototyping tools need to handle how people use their fingers to move about a web site more than just hyperlinks.  Soon we will have ambient displays that seem to hang in the air that humans franticly swipe at to make things happen. 

“Jim, I’m a Doctor not a web designer”

Protoshare Lesson #4 (V6) Tab controls two paths

Protoshare has a couple of ways to insert a Tab control into your prototype.  One is simple but rather limited, the other more complex but much more flexible.  I prefer the second method as I can make the content of the tab windows what ever I want.

Simple Method

The simple method requires you to use one of the stencils in the Web and Desktop category.  The RIA (Rich Internet Application) is a pre-coded tab that uses HTML for the content of the tabs.  You can not add other components like grid, text boxes, etc. without coding them in HTML.  There are plenty of good HTML tools that can help you but that makes it difficult for the non HTML type designer.

image

Open up the RIA control and locate the Tab control

image

Drag and Drop this into your page and you should see

image

By double clicking in the control you will open it up in edit mode with default tab names and Lorem content.

image

Now go and change the Tab names and content using the editor, you can add some formatting.

image

Notice that the Tab 3 look funny from the other tabs?  This is because I accidently edited out the HTML tag that makes this text a tab.  It’s easy to do and a little effort to fix.  I’m not going to cover how to fix it here because I don’t use the Simple tab controls that much.

Now here is what it looks like in design mode after editing and when you test it (Press T) it looks much the same and the tab work like they should.  Notice that Tab 3 is missing, that is because I messed up the HTML tag.

image

Now if I wanted to add text fields, buttons, drills downs I would need to go back into the Tab control and click on HTML and enter the HTML.  I know HTML and use a excellent free HTML editing tool called nVu at http://www.nvu.com/ to create forms and copy them into code.  I don’t recommend this to those who are HTML weak of heart.

Flexible Method

The flexible method will use a component from the Stencils from from the same category as the Simple method but it is the Interactive set.

image

When you open this set of components you will select one of the tab control, there is one with 3 tabs and another with 5 tabs.  It is much easier to delete a tab then to add one so go big.  You can also pick vertical or horizontal tabs.  There are no vertical tabs in the Simple Method.

image

I’m going to use the 3 tab version in the lesson.  Drag and drop into to you page.

image

It looks like a single component but it is really 2 components.  The top one is tab portion of the component and the bottom is the content of the component.

image

They can be sized and moved around independent of each other and that can be scary.  First time I did it I though I broke the component.  The tab portion of the component is control by a State with the tab names in it.  More on this later.

One of the things I like to do is align the first tab with the edge of the content of the tab.  You click on the upper tab portion.

image

Then just use the arrow keys to gently move the tabs over to the left.  If you accidently move the tabs up you will notice the component doesn’t look like a tab anymore.  Just move the tabs back down until they match up with the content again.

image

Much better, now we need to adjust the names of the tabs.  This is controled by the State attached to the tabs.  Click on the tabs and open up an Inspector panel.

image

You are going to want to click on the Edit State… for the Navigation control.

image

I make it habit of changing the Name of tab to something more meaningful.  Then I changes the tab values to be the names of the tabs I want.  If you want one less tab then delete the last one in the list.  If you want one more your going to have to wait until further on in this lesson.

image

Now here is what the Interactive tab control looks like after I save the State back.

image

Nice but the tabs aren’t wide enough to handle the text I entered, so you can just grab one of the handles and stretch it out.   As you stretch it the text in the tab will adjust dynamically.

image

Looking good….  Now on to the content.  Note the default content reminds you have to enter test mode (Press T) to change tabs and thus change the content for that tab.

First thing I’m going to do is change the content in the first (Introduction) tab to be just some sample RTF text.  I will delete the controls currently in the first tab content and drag a (form field label) onto the content.  Make sure the label is inside of the container.  Then I will go to the Inspector and change the label to RTF by clicking on the (Make Rich Text).

image

I had to stretch out the label so it fit in the panel.  Notice how I formatted the text with size. color and decoration (Bold).  I would also typically align the text to the Top of the label control.

Now I want to add a Grid control to the second tab to show a list of projects.  Grid controls are covered in Protoshare Lesson #3.  First I have to do is switch to Tab 2.  Remember you have to enter Test mode (Press T).  Then click on the second tab.

image

Then press (esc) to get out of test mode and back into design mode.  I’ll delete all the exiting controls and drag a Grid control in from the Stencils, Web & Desktop category, RIA Controls.  Next I would edit the Grid control to have some data in it that makes sense for the tab.

image

To do this grid using the Simple Method you would have to use a HTML editing tool, create the grid, tweak it, get the HTML and copy it, then go into the Simple Tab control, switch to HTML and locate the spot to paste it and carefully paste it.  Your chances of making a mistake go way up trying to make the Simple method flexible.

Next I want to put a form in the Reports tab.  First I will switch to Test mode (Press T) and drag and drop Protoshare controls into the tab. 

image

I do good work Winking smile.   To do this in the Simple method would require you to use the HTML editing tool again and put a table down to layout the labels and fields, draw labels and fields using HTML form components which have different properties than Protoshare inspector properties, get the HTML…. da ta da ta da…….  Even though I use an HTML edit all the time I would rather drag and drop PS controls into a container any day.

Simple is not necessarily flexible.  Having said that I must admit there are some things about the Flexible Tab control that are more difficult.  One of them is adding a tab.