Petref Saraci

Qt Design Studio – The New Age of UI Development

Published Tuesday June 26th, 2018
33 Comments on Qt Design Studio – The New Age of UI Development
Posted in Biz Circuit & Dev Loop, Qt 3D Studio, Qt Design Studio, UI | Tags: , , ,

Today, I am extremely happy to make a special product announcement.

Together with Qt 3D Studio 2.0, we are also releasing our newest and hottest addition to the Qt design tool family: Qt Design Studio

Qt Design Studio is a UI design and development environment that enables designers and developers to rapidly prototype and develop complex and scalable UIs.

I bet all of you have run into typical challenges when collaborating with either designer or developers, depending on your role.

Developers often see designs evolve in an ivory tower and then land on their desks as long and detailed PDFs with UI specifications. Sometimes, this happens after the initial effort estimates have been done. Most of the time, matching the UI specifications with what can be achieved on the target hardware is dubious and time-consuming. Equally time-consuming is the “negotiation” process with designers, which means compromising and refining under tight project schedules. That does not bode well for the quality of the final product.

Designers, on the other hand, are mostly concerned about coming up with the best design they can think of – their design vision. What’s possible in reality can be hard for them to fathom until they see their designs come to life on the actual device. They want to be able to evolve the designs by testing new approaches in minutes, instead of waiting at worst weeks, to see the design iterations run on the real hardware. Designers typically also want to test the designs on the device with real users as soon as possible, which can often fall by the wayside due to time constraints.

The real problem, however, is that this inefficient way of working causes the end user to pay the ultimate price in worse overall user experience.

unknown

We believe that collaboration between designers and developers in an effective workflow fosters and boosts product innovation and ultimately leads to a better user experience.

Enhanced workflow with Qt, QML, and Qt Design tools

Qt Design Studio is a single tool used by both designers and developers. That alone makes collaboration between the two a lot simpler and more streamlined: Designers can look the graphical view, while developers can look at the QML code. With this workflow, designers can have their Photoshop designs running on real devices in minutes!

Qt Design Studio features in more detail:

  • Qt Photoshop Bridge – Create your UI design and UI components in Photoshop and import them in Qt Design Studio. This is an advanced Photoshop plugin that exports your designs to Qt Design Studio where it is translated into QML.
  • Timeline-based animations – Creating advanced animations was never simpler. The timeline-/keyframe-based editor lets designers create pixel-perfect animations of any type without having to write a single line of code.
  • QML Live Preview – Run and preview your application or UI directly on the desktop, Android devices, and Boot2Qt devices. See how your changes affect the UI live on your target device in minutes!
  • QML Visual Effects – Apply out-of-the-box visual effects to your designs, e.g. blur, colorize, glow, and more. You can even animate the effects with the Timeline editor.
  • QML Shape Items – Several out-of-the-box shapes, i.e. Pie, Arc, Triangle, etc. are ready for prototyping and building custom QML visual elements.
  • Manage and create custom re-usable components – Turn your Photoshop layers into reusable components for different projects with but a few clicks.
  • and many more… e.g. manage layouts and states with ease

These key features will be finalized and polished for the 1.0 version, which is scheduled to release by the end of the year. Meanwhile, the technical preview release already contains most of the key features in fairly good shape. We’re more than happy to receive your feedback during this technology preview period.

Where can you get it? Head to our Qt Design Tools webpage, and click the “Free Tech Preview Trial” button under 2D Feature Highlights. This will sort you with a download link for your 10-day trial. You can always contact us if you want to extend the trial.

We have also created a set of how-to videos that will guide you through all the features and capabilities and show you in practice hands-on how to design and develop a UI with Qt Design Studio.

Our plan is to introduce Qt Design Studio as a free tool for all our commercial term license holders. You don’t need a valid commercial license for the tech preview. You will, however, need a valid commercial term license if you want to distribute the applications you have created with Qt Design Studio tech preview. We are also looking into open source options. We’ll share more information on that as it becomes available.

Last but not least, to learn more about Qt Design Studio and keep abreast with what’s in store in the future, make sure to watch our on-demand webinar!

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Biz Circuit & Dev Loop, Qt 3D Studio, Qt Design Studio, UI | Tags: , , ,

33 comments

Louis says:

I have some memories of trying to work with a Photoshop plugin that allowed to export into QML and that was really noneffective. The “id” of each part of the generated QML was completely unusable from a developer point of view and the result was degraded compared to the Photoshop file so I quickly dropped the idea and came back to the old way, implementing the design from an extract of images and gradients provided by the designer.

It is clear that most of the functionalities of Qt Design Studio are what the “Design” view was lacking.

Concretely, this tool looks great, I couldn’t watch all the videos but still the integration looks very smooth. My concerns about such a tool would be the following (sorry if one of the video already covers these questions):

* How can we compare the performance of the generated QML vs. the performance of a “manually” implemented QML? Does it “optimize” well the QML files when we look at QSG_VISUALIZE=batches/changes for example?
* Can the developer tune manually some parts afterwards in case of inefficiency of a component? If the answer is yes, won’t it be overwritten afterwards if the designer uses the graphical view to change the component? The underlying question is: how much can the developer and the designer cooperate when working on the same project with Qt Design Studio?
* Let’s say we want a “day” (light) and a “night” (dark) design, would this tool be accurate for this? How would you proceed?
* How much configurable such as UI could be? Or would it be static?
* Is it simple to use this into an application that provides multiple pages, and therefore that will have to load/unload the components created using Qt Design Studio?

Thanks,
Louis

Vikas Pachdha says:

“How can we compare the performance ….”
Using QML Profiler.

“Can the developer tune manually some parts ……”
User can make manual changes to the generated QML’s and there will be smart merge of the re-imported QML from the Photoshop. Though there will be limits to such changes and if nothing works you can still do manual merges using merge tools but recommendations & best practices shall be there in the documentation.

“Let’s say we want a “day” (light) and a “night” …”
I would say yes. The tool should generate pixel perfect assets and QML’s.

” How much configurable such as UI could …”
As of now its static. Though there are provisions by which you can add rows, columns and other layout management items but do consider that the idea is to get the assets and designs from Photoshop to QML easily, not write QML in Photoshop.

“Is it simple to use this into an application that provides..”
There should be no difference than using conventional way, albeit QDS shall provide more tools and components to achieve this.

Thomas Hartmann Thomas Hartmann says:

“How can we compare the performance of the generated QML vs. the performance of a “manually” implemented QML? Does it “optimize” well the QML files when we look at QSG_VISUALIZE=batches/changes for example?”

Since the designer is dealing with the declarative parts the performance is usually pretty optimal. Of course, there are corner
cases and the tool does not understand all the implications and requirements. If the user, for example, overuses transparency then the tool cannot do anything about this.
But as Vikas pointed out there is already the profiler and we are brainstorming about more and simpler tools to track performance and frame rates.

“How much configurable such as UI could be? Or would it be static?
Is it simple to use this into an application that provides multiple pages, and therefore that will have to load/unload the components created using Qt Design Studio?”

We do not have full comprehensive answers to these questions, yet, but eventually, we will provide components and functionality that allows very dynamic UI designs with multiple pages.
At the moment we already have states and the timeline which already allows adding a lot of dynamical elements to a UI.

Louis says:

Thanks for your answers!

Yes indeed something a bit more “graphical” for designers may be easier to investigate than the good old QML Profiler that is more oriented towards developers.

I agree that having recommendations & best practices is a good idea, especially for designers if you see bottlenecks on some stuff, to guide developers and designers better on their job using QDS.

That makes me think about the size management of the assets made on Photoshop: what about multiple target resolutions?

Brook Cronin says:

“That makes me think about the size management of the assets made on Photoshop: what about multiple target resolutions?”

This is a feature set we are actively researching, at the moment in the Qt Bridge PS Plugin you can find in the settings page a way to add multiple scale factors to your output, so you get a png / jpg asset for each set scale. In this instance you would want your source artwork to be at the largest resolution and each scaled down copy would then be smaller in file size without losing any quality, which works as an approach. If you are using illustrator to create your artwork, plus the addition of photoshop shapes, text items, smart objects and effects, essentially the vector based items (a workflow I personally use and would recommend) then you can create all you original art work on an artboard and then copy this artboard and scale all the content either up or down and arrange the artwork to fit different aspect ratios or orientations, then each of these would create separate qml files in the export / import process, with the exact graphical layouts and appropriately sized exported assets for each one.

Of course this still leaves the question of how you could share the u.i logic that you create for a single version across your multiple artboards, currently you would have to copy the code and adjust the i.d for each item, binding, property etc that you added, certainly a time consuming task manually. I would love to see some enablers here in the future and it’s something we will discuss going forward.

Jean-Michaël Celerier says:

Well, I guess I now know why my report https://bugreports.qt.io/browse/QTCREATORBUG-18405 was marked as out-of-scope…

Kai Dohmen says:

So why do we need another tool to create a UI which looks exactly like the QtCreator with extra features? Why dont you just add this features to the QtCreator?
Is there any technical reason for this? Or just to have a nice selling point for a commercial license?
If there is no technical reason, couldnt you just distribute the Photoshop Plugin to owner of a commercial license?

Thomas Hartmann Thomas Hartmann says:

The main reason to have a different tool than Qt Creator is accessibility and usability for non C++ developers.
Qt Creator is a C++ IDE first and this is not going to change.
The target group for Qt Design Studio does usually know nothing about C++ compilers, toolchains and compiling.
Therefore huge parts of the UI, documentation and many wizards of Qt Creator are confusing to anybody who is just interested in using Qt Quick and QML.
In the end, Qt Design Studio is a Qt Creator adjusted and optimized for designing QML and Qt Quick.
A purely technical reason would be that the release cycles of Qt Design Studio and Qt Creator will not be necessarily the same anymore which adds more flexibility to feature development.

Kai Dohmen says:

Okay. That was what I thought.
But you do not need to worry that the QtCreators Qml Designer will miss future features wich would make development much easier? So that you would be forced to install Qt Design Studio (or get a license)?

Seth says:

Will Qt Creator plugins and settings work with Qt Design Studio?

aportale says:

The settings are technically compatible, but intentionally kept in separate folders in order to prevent interference. For example does Qt Design Studio set some preferred defaults and enables a specific set of plugins.
Plugins of both products are at not binary compatible (at least according to a quick test I just did).

Qt Design Studio TP is available for download for everyone, please follow this link https://www.qt.io/ui-framework

jason says:

I tried to download and use the tool but because I don’ have any active licenses, I can’t even try it.

Thomas Hartmann Thomas Hartmann says:

If you follow the download link please fill in the form, including a valid email address, and you will be able to download, install and test the Qt Design Studio TP.

Jason says:

Did that, the license check in the installer denied me.

Brook Cronin says:

I just tested this with my Open Source account and it worked fine for me, can you give us some more information so we can try and figure out why it’s not working for you?

Camilo del Real says:

Hello, as Jason says, the installer does not allow installation because the test license key is not sent. In fact, why does it require a license key if it can be used under a GPL license?

jon says:

Skeletal animation mesh and built in bullet collision please..

Daniel Widerking says:

Amazing guys. Great work!

d3fault says:

was interested until you said you’re gonna sell it. RIP Qt, the 100% LGPL project. would be nice if these advertisements were only shown in the “biz circuit” portion of Qt blog.

come on Tukken, can’t The Qt Company survive solely on commercial-licensing (of identical product lines), support, and consulting?

Commercializing sub-projects like this might gain you a few extra commercial licenses, but it stalls the open source project as a whole by numerous years: none of the open source hackers can/will contribute to these commercial-only sub-projects until they are released open source years later…

@d3fault: As Petref wrote: “We are also looking into open source options.”

Steven Blackburn says:

The new tool was looking good until this point… I’m happy to see Qt generating enough money to keep up development but it would have been nicer to see more than a throw-away line on this. Is it that the Qt Company think the new tool is so specific to commercial development (like boot-to-Qt is seen) that the people who want it will be fine with paying for it? Or is there some other consideration, e.g. are you paying to use some existing code?

For the record, I’m not a designer but would be interested in any tool that allows me to concentrate on the UI away from Qt Creator: I’ve been using widgets for so long that I am having a hard time wrapping my head around QML and when to use it.

It looks like sorting out a good workflow for this tool is in its infancy, as suggested by the discussion around round-tripping, getting updated assets and different states. From the video the use of the bridge looks clunky with what feels like the mapping being done in an external process… but perhaps that will allow support to be extended to Affinity Designer / Photo, which is what I use. Finding a way to allow Design Studio to be used by everyone can only help provide more feedback and optimise the workflow.

I don’t see any point in trying Qt Design Studio until I know what chance there is that it could be useful to me in the future. As it stands, it looks interesting but not worth me experimenting with.

Hi Steven,

Many thanks for your feedback and comments, we appreciate your taking the time and sharing your concerns.

Qt Design Studio is available for everyone to download and use it and if you are doing a commercial and closed-source application then you would need the respective Qt commercial license.
Developing open source applications with Qt Design Studio is absolutely fine and allowed, based on the GPL licensing terms.

Solving complex workflow challenges to enable efficient collaboration between designers and developers is a big task that includes a very vast set of use-cases, which often are very industry specific, that need to be considered. Based on our customer feedback and working very closely with a large set of customers in various industries, I can say with certainty that Qt Design Studio is in the right direction.

Qt Photoshop Bridge is the very first Qt bridge to the graphical tools and more will come in the future. So far, we have received great feedback and already some customers are integrating into their workflows.

I would encourage you to try it out and let us know how does it work for you today. We are very pleased to receive concrete feedback on particular cases, what works and what doesn’t.

Thanks,
Petref

Steven says:

It is good to hear that “Developing open source applications with Qt Design Studio is absolutely fine and allowed” , although contrary to the paragraph near the end of the post that says “You will, however, need a valid commercial term license if you want to distribute the applications you have created with Qt Design Studio tech preview. We are also looking into open source options.”

If I can use it for my current development then I would be more inclined to give it a go.

David says:

Can’t you allow Qt company to do more then survive by insisting everything they spend their hard earned money on be given away.

Show some appreciation on what they do give away

avb says:

Is there a way to switch to a light theme?

Brook Cronin says:

Yes – In Preferences > Environments > Themes.

Thomas Tai says:

Where can I found the example photoshop files that you use for the demo? I can’t seem to find any examples project that I can learn from. Thank you.

Brook Cronin says:

All the project files for the demo can be found here at the bottom of the page, above the links to the videos: https://wiki.qt.io/QtDesignStudio

Dimitar Dobrev says:

I have just tried the Photoshop Bridge and Photoshop exported a folder with images and a text *.metadata in it. How do I then import this into Qt Design Studio?

Brook Cronin says:

Inside design studio in the Resources Tab there is a button called “Add New Resources”, click that and then navigate to and select your metadata file. This will import your artwork into the project.

ADM says:

Really good news!!
What about creating plugins for Qt Design Studio? Is it done the same way we do for QtCreator?

Thomas Hartmann says:

Yes, plugins for Qt Design Studio are binary compatible to plugins for Qt Creator. Something we do not plan to change in the future. Plugins just related to C++ are not part of the Qt Design Studio, though.

Commenting closed.

Get started today with Qt Download now