Assets and tools

The design system is built to allow web designers and web developers create consistent, clean and user friendly websites for federal government entities (FGE's). There are a number of recommended tools available to help designers and developers.

Low-fidility templates

Guided by the principles present in the design system, using the components and blocks defined, and after research on requirements of FGE's, the UAE design system recommends the following templates as guidelines for design of federal government websites.

Templates are also stored on Figma, and are available as references. These are live template files that can be updated by the design system to reflect changes with each design system version release.

The use of Figma

Figma is a collaborative web application for interface design. Figma works on any operating system that runs a web browser. Macs, Windows PCs, Linux machines, and even Chromebooks can be used with Figma. It is the only design tool of its type that does this.

The design system has created all required assets for components, blocks and patterns as a ` .fig ` file which you may download and use within your project.

Testing your project

The success of a website hinges not just on its aesthetics but also on its functionality and user experience. Testing a website is a critical step that cannot be overlooked, necessitating the collaborative efforts of both designers and developers.

Designers ensure that the visual and interactive elements resonate with the intended audience and the principles of user-centred design have been adapted to use as part of the design system, tested for accessibility from a design perspective, and visualised for mobile layouts.

Developers, on the other hand, validate the website's technical soundness, ensuring smooth navigation, quick loading time, and cross-platform compatibility - all while maintaining security, user data, and dynamic content management.

For UX researchers, designers and graphics team

Testing the design of the website before it goes to development is crucial. A designer must test the concept, usability, responsive layout and more.

• User centric testing: Designing for users means understanding their needs, preferences, and pain points. Testing allows designers to gather feedback directly from the users and refine the design based on real-world interactions.
• Accessibility tests: Accessibility testing ensures that the design is usable by everyone, including people of determination. This is not only a moral obligation but, in many places, a legal one as well.
• Consistency checks: Maintaining consistency is key for a professional and trustworthy appearance. Designers must follow guidelines and components in their design.
• Test for improved conversations: Test the design for content and the use of conversational, professional, and clear content use.
• Test and validate the content: Designing without content is a bad choice. UX research must set a strategy for copy on a website, and UX writing must move in parallel to the UX and design process.
• Post-development test: After an initial front end development, the design team must collaborate with the development team to validate if the designs have been accurately implemented. This is a collaborative effort between teams. Working as a team, designers and developers should be open to ideas and feedback.

For UI developers, backend developers and DevOps teams

Implementing the design that has been validated, tested and approved means making sure you provide a high quality frontend build that is perfectly in sync with the design. While development and planning, use the code samples in the design system to eliminate the need to re-create tested and validated code. Developers should, ideally, spend a lot more time testing than what designers do.

Front-end or UI developers must concentrate on the following testing methods:

• Mobile responsiveness testing: Ensuring that the website looks and functions correctly on various mobile devices and screen sizes.
• Accessibility testing: Making sure the website is usable by people of determination, adhering to standards of WCAG 2.1, using simulators for screen readers or using the native operating system screen reader, and ensuring that the entire website can be navigated by a keyboard.
• Compatibility testing: Ensuring the website functions correctly across different devices, browsers, and operating systems.
• SEO testing: Checking the website for search engine optimization factors to ensure that it's discoverable and ranks well on search engines.
• Design validation testing: Collaborate with the design and UX team to validate if the designs have been implemented as expected.

Backend developers, application developers, and developers involved in creation of data-driven code should make sure the following tests are carried out:

• Unit testing: Testing individual units or components of the software to ensure that each part functions as intended.
• Integration testing: Ensuring that different modules, services, forms and more of the application work harmoniously when integrated with backend systems.
• Functional testing: Verifying that the application performs its intended functions correctly when any data is submitted via a service application.
• Performance testing: Evaluating the responsiveness and stability of the website and application by conducting Load Tests, Stress Tests and validating the speed of the website.
• Security checks: Identifying vulnerabilities or weaknesses (if any) that can be exploited by attackers.
• User acceptance testing (UAT): Always aim to release a service or module to a closed group of internal stakeholders first - also called Alpha version and then to a closed group of external users - also called Beta version before a public release. By using the feedback from both version, you can ensure minimal complaints from the target audience.

Tools to help test your design

Testing the design of a website is crucial to ensure that it provides a consistent, intuitive, and accessible user experience across different devices and browsers. Here are some tools commonly used for design testing: