Wireframing

Plan your UI properly. Know what elements, such as screens, components, and states, you need. Create a descriptive wireframe and acquire a detailed UI specification before you start to make the process of creating the UI more efficient. Qt Creator enables you to turn your UI concept into a wireframe with a scalable layout where all your screens and controls are in place. You can present your wireframe to developers and other stakeholders for discussion, review, and approval before continuing into the prototyping phase.

In Qt Creator, you build UIs around the behavior of components and how they connect with one another. You can use preset components available in the Library view or combine them to create your own components. You can specify values for the properties of a component to change its appearance and behavior. All components have a set of predefined properties, some of which control things that are visible to users, while others are used behind the scene.

You drag-and-drop the preset components from the Library view to the Form Editor, 3D Editor, or Navigator view to create instances of them. You then change the instances to your liking by modifying their properties in the Properties view. The application code is generated for you accordingly. For more information about the code, open the developer documentation by pressing F1.

  • Components

    Qt Design Studio comes with preset components that you can use in wireframes and prototypes by creating instances of them. To build your own components, you can modify the properties of the component instances and combine them. You can import designs and assets from other tools as components.

  • Specifying Component Properties

    You can specify values for the properties of a component to change its appearance and behavior. All components have a set of predefined properties. Some properties, such as position, size, and visibility, are common to all components, whereas others are specific to the component. You can specify values for properties of component instances in the Properties view.

  • Scalable Layouts

    The position of a component in a UI can be either absolute or relative to other components. While manual positioning is efficient for a static UI, consider the other available methods, such as anchors, layouts, positioners, and property bindings, for dynamic UIs.

  • Using Custom Fonts

    You can load custom fonts to Qt Creator and use them in your designs.

  • Annotating Designs

    You can annotate your designs to provide reviewers or developers with additional information about them.

  • Loading Placeholder Data

    You can create QML files that contain placeholder data, so that you can test grid, list, or path views, even though you don't have access to real data.

  • UI Files

    Some of the wizards create projects that contain UI files (.ui.qml). You should always edit UI files in Form Editor and Properties, to avoid breaking the code.

© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.