WorkWithPlus provides various design systems created by UX experts that adhere to the latest usability and UX guidelines. Also, WorkWithPlus provides 100% flexibility, so you can customize our default designs systems or create your own from scratch according to your business needs.
This document aims to guide design teams on how to utilize WorkWithPlus to create appealing designs that meet client requirements with minimal customizations.
Important: To streamline development and avoid unnecessary complexity, engaging designers with expertise in GeneXus and WorkWithPlus is highly recommended. Their understanding of the platform facilitates the creation of easily implementable designs. Designers lacking this specific knowledge may unintentionally introduce design elements that are difficult to realize within the GeneXus framework.
This is our suggested approach in order to reduce workload, avoid repetitive tasks and create amazing designs easily. With this design you can create any type of design with 100% flexibility.
It doesn't matter if your design is not exactly as one of the default WorkWithPlus design systems, you will be able to customize everything and create any design that you need. The designer must have expertise in GeneXus+WorkWithPlus to take advantage of current styles and predefined WorkWithPlus behaviours to reduce workload for the development team.
Let's go on with further explanations about this approach.
WorkWithPlus provides various design systems that designers can explore to create designs that are closer to the default WorkWithPlus designs. The default designs are based on the latest usability and UX guidelines, making them an excellent starting point for most projects. However, some clients may have specific design requirements that require customization. In such cases, designers can propose alternatives that require minimal customizations.
Design teams can explore all available designs and their features on examples.workwithplus.com. This allows them to see how our designs works at runtime and the different layouts you can create, and get inspiration for their projects.
In these examples, designers can visualize the different screen types that you can create: forms, lists, dashboards, homes, wizards, etc. So the design team can propose a design that bases on the WorkWithPlus Design Systems in order to reduce the amount of customization effort needed.
The Design System Wizard is an ideal tool for designers who are not proficient in GeneXus programming. It allows designers to explore all possible alternatives without programming knowledge. Designers can make changes and see them instantly in the preview. This approach enables design teams to take full advantage of all the design alternatives that WorkWithPlus provides and create attractive designs that meet UX guidelines.
If any additional change is needed, it can be done in the Design System Object "WorkWithPlusDS" that will contain only the customizations made by the design team. The WorkWithPlus classes will always be encapsulated in the "WorkWithPlusBaseDS" object, and the "WorkWithPlusDS" object won't be modified.
For design teams comfortable with Figma but less familiar with GeneXus + WorkWithPlus, this approach offers a workflow where designs are imported into GeneXus.
The steps are:
Use the Import Design feature from GeneXus to import the design into GeneXus.
Important: GeneXus requires the designer must follow specific design guidelines and best practices to ensure good results.
Once the design is imported within GeneXus, the WorkWithPlus "Skip Design System" feature then facilitates the automatic creation of the WorkWithPlus instance for these layouts. This enables the maintenance of the screens using WorkWithPlus's hierarchical structure and live preview. You can read more about this feature here.
It's important to note, however, that this method requires manual creation of WorkWithPlus templates for automating Knowledge Base functionalities, resulting in a greater overall effort than our preferred Option 1.
- WorkWithPlus enables design teams to efficiently build user-centric designs following modern UX principles.
- Leveraging provided design systems, exploring examples, and using the Design System Wizard helps teams:
- Minimize customization efforts.
- Accelerate project timelines.
- While importing from Figma offers flexibility, directly utilizing WorkWithPlus's built-in features (Option 1) is the recommended approach for:
- Streamlined development.
- Optimal results.
- Note on Option 1: While it may require more initial time and effort, it leads to applications that are:
- Easier to maintain.
- Easier to evolve over time.
- The suggested options are summarized in the following diagram:
|