C++ComponentsIntroduction to C++Learn C++

The Top 5 UI Design Alignment Tips For Your C++ App

The Top 5 UI Design Alignment Tips For Your C++ App

What is align? I have a project; how can I design UI zones in my C++ app? How to design a C++ app compatible with multi-platform layouts? How can I design for landscape and portrait apps with one form design?

Align is one of the great features of C++ Builder for application UI design. C++ Builder is very flexible and allows you to design and produce any kind of application. These tips below are not mandatory but are worth considering if you are beginner and if you are not sure how to design your application, so it looks great across all platforms and devices.

Tip 1: Always use Align in UI areas

Use Align in design time. Faster and simple, you don’t need to write extra code to align each of your components. In FMX applications, these ‘Area’s can be Panels (TPanel), Layout (TLayout), Rectangle (TRectangle) to define zones in your application. In VCL applications, use TPanel, TRectangle, TGroupBox … etc.

Avoid coding to Align! Try to NOT use size checks, if() clauses as much as possible.

Tip 2: Focus on your users’ needs

What is primary for your users? What they need? What they use mostly? What are the main actions, operations in your application? Which design parts can be disabled?

Tip 3: Simple UI design is the best design

The main part should be Client which is scalable in all size formats. Generally simple designed application UI’s has one UI area. You can use semi-transparent side panels on this area. You can make visible some buttons and parts in some conditions. This is generally good for console like output apps, photo view apps, 2D or 3D graphic apps, …etc.

The Top 5 UI Design Alignment Tips For Your C++ App - area alignment
UI Design 1

Generally when you design an application there are 5 main areas to consider. Top area generally holds buttons, menu or some other main components of your application.

The Top 5 UI Design Alignment Tips For Your C++ App - alignment zones
UI Design 2

If we generalize UI design in more common design there are 13 areas that you should consider when you design an application. Some main parts and sub parts can be neglectable but you should consider all these areas well. Professional high DPI applications like Photoshop, Word, Excel, PowerPoint, SolidWorks, AutoCAD, 3D Studio Max, … etc. uses every section of this areas. Mobile applications may not able to display all of these areas, so you should consider to disable or use menu to switch other areas.

The Top 5 UI Design Alignment Tips For Your C++ App - an alignment layout
UI Design 3

Yes this example above is for more complex and more professional apps. Here are some more useful examples for your apps,

The Top 5 UI Design Alignment Tips For Your C++ App - more aiignments
UI Design 4
The Top 5 UI Design Alignment Tips For Your C++ App - a typical tree/navigation view layout
UI Design 5

Tip 4: Use form events to check for changes in size and screen resolution

OnResize() and OnPaint() events are good to check size of the form. You can enable and disable some parts. You can also use components like flow layouts to help automate the process of resizing and aligning controls.

Tip 5: Disable unnecessary areas in lower resolutions and when the target device doesn’t support a feature

Not all devices are the same. In past times we would write programs for computers which were almost exclusively desktop devices, and they all pretty much looked the same and had the same, very limited, sets of features. In the modern times we’re not so lucky. Your C++ app might run on hardware which looks very different to the one on which it was written. This is especially true for cross-platform apps working on mobile devices. Use techniques like TPlatform components to check the actual functionality available and disable, or even better completely hide, functionality which is linked to parts of the app which rely on hardware or devices which are not present.

close

Oh hi there 👋
It’s nice to meet you.

Sign up to receive awesome C++ content in your inbox, every day.

We don’t spam! Read our privacy policy for more info.


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial

Free C++Builder Community Edition

About author

Dr. Yilmaz Yoru has 35+ years of coding with more than 30+ programming languages, mostly C++ on Windows, Android, Mac-OS, iOS, Linux, and some other operating systems. He was born in 1974, Eskisehir-Turkey, started coding in college and graduated from the department of Mechanical Engineering of Eskisehir Osmangazi University in 1997. He worked as a research assistant at the same university for more than 10 years. He received his MSc and PhD degrees from the same department at the same university. Since 2012, he is the founder and CEO of Esenja LLC Company. He has married and he is a father of a son. Some of his interests are Programming, Thermodynamics, Fluid Mechanics, Artificial Intelligence, 2D & 3D Designs, and high-end innovations.
Related posts
C++C++11C++14C++17C++20Learn C++Syntax

What Is A Forced (Default) Copy Assignment Operator In Modern C++

C++C++11C++14C++17C++20Learn C++Syntax

What is Implicitly-declared Copy Assignment Operator In C++?

C++C++11C++14C++17C++20Learn C++Syntax

What is Avoiding Implicit Copy Assignment In C++?

C++C++11C++14C++17C++20Learn C++

Typical Declaration Of A Copy Assignment Operator Without std::swap