How do UX and UI design processes bring a web project idea to life with Drupal? On the one hand, UX designers define the structure and usability through wireframes, while on the other hand, UI designers add visual and aesthetic elements. This joint effort ensures an optimal user experience. We present these methods to you in detail!
UX and UI design of a web project
When designing a digital product (website, business application, software, etc.), UX and UI designers work together to create detailed mockups of the project that will then be handed over to developers. This is the UX and UI design phase.
The creation of wireframes and UI mockups is a production phase in the UX and UI design process. Its purpose is to bring to life the essential preliminary work of analyzing the project, its needs, and its users. That is the core challenge of UX design: to deeply understand the targets and their needs in order to then envision and shape the ideal digital product. During the comprehension phase, UX designers use different methods to get to know the project’s target audience: benchmarking, user research, personas, user journeys, wireframes, user testing, and more…
Wireframes define the overall structure and usability of the pages
When designing a Drupal project, UX designers are the first to get involved. After a phase of understanding and thoroughly analyzing the needs and users, they translate the findings into wireframes.
Wireframes are schematic and static representations of the site’s future interfaces. They are devoid of colors and visual details. They focus solely on the structural layout of elements on a page. In other words, wireframes are rough sketches that serve to define the overall architecture and usability of the site interface. They can be created on paper or using dedicated software. In our case, we are big fans of Figma.
Here is an example from the redesign project of the Opéra National de Bordeaux website.
We distinguish three levels of wireframes
- Low-fidelity wireframes: Simple sketches that highlight the overall layout of elements while avoiding details.
- Medium-fidelity wireframes: These add an extra level of detail. The main interface elements begin to take shape, providing a more concrete view while still avoiding unnecessary details.
- High-fidelity wireframes: These are close to the final product, incorporating visual details such as colors, fonts, and graphic elements.
The level of detail provided depends on the project’s needs. It should also be noted that it naturally increases as the project progresses: the approach is rough at first, then gradually becomes more precise.
UI mockups reflect the final look of a Drupal project
Once the wireframes have been created and approved, the UX designer hands them over to their colleague, the UI designer. They also share certain important points. For example, they will highlight the elements to be emphasized, those on which the UI designer may take more or less creative liberty, and so on.
After this handover, the UI designer sets to work creating UI mockups. Unlike wireframes, UI mockups represent a more detailed and visually appealing version of the user interface. Their purpose is to dress up the wireframes, making them visually attractive (spacing, images, etc.) and aligned with the brand guidelines of the site owner (typography, colors, logo, illustrations, icons, and so on). They will reflect the final appearance of the product.
There are three levels of UI mockups
- High-fidelity UI mockups: These mockups are the closest to the final product. They include all visual and interactive details, allowing designers and stakeholders to visualize the overall user experience.
- Low- and mid-fidelity UI mockups: Although less detailed than high-fidelity mockups, these versions provide a more concrete view of the interface. They can be useful in the early stages of the design process to gather feedback without investing too much time in details.
Do you want to improve the user experience of your Drupal project? UX and UI design are full of tools and methods to help you!
As we have seen, wireframes and UI mockups play complementary and sequential roles in the design process of a web project. They allow the separation of structure and form, two essential steps to creating a rich and intuitive user experience.
Contact us to discuss your Drupal project. Our designers are ready to listen and will be happy to assist you!
