Yes, you may view our introductory video on https://youtu.be/HS4lRzp35I0 and learn more about the design system by visiting our about us page.
Frequently asked questions
This design system has been built to help federal government entities (FGE's) of the United Arab Emirates build consistent user experiences for their websites. The following are the most common asked questions, and their answers, to help guide entities with building such experiences.
The purpose of the design system is to create consistency in the experience delivered. With this as the guiding principle, all components produced in the design system are based on research, accessibility testing and more.
Ministries of the United Arab Emirates must use the components and blocks as they are, without any modification whatsoever. Federal Authorities are allowed limited changes, such as branding the components and blocks to suit their brand colour. Hence, both ministries and federal authorities must not modify core components and blocks and must comply with the guidelines and structure to its fullest extent.
Websites built for initiatives and other supporting activities have a choice to choose the use of the design system or not. It is recommended to utilise the design system in websites created for initiatives as well - however, this is not a mandatory requirement.
Yes, it is recommended to use the Design System 2.0 and all necessary components to build service portals and other internal portals that are end-user facing.
A few blocks and components have been designed and created with this in mind in particular - such as the Login block that guides the entity on how to effectively implement a login and registration system that encompasses the UAE PASS as the primary method to authenticate a user.
The service portal primarily includes the ability for users to submit forms and view the status of applied services. Further enhancements have also been planned in the roadmap of the design system to enhance the use of it beyond end-user facing websites only.
When designing websites, the approach to mobile and the width of devices are very important factors to consider. The UAE design system adopts a mobile-first approach in its CSS setup.
This means that when you design and program the front-end of your website, you must first consider the layout for a mobile device and gradually add elemental changes to see how it will adapt to larger screen sizes. Team members of the entity must enforce this, as a rule, that design team members must visualise the website layouts on a mobile. Team members must not approve the design and layout of screens just as they would be on a desktop.
In other words, the user experience of your website must be tested on mobile, first. It must work flawlessly on a mobile device and be responsive and fluid to accommodate the various screen sizes of mobile devices. Your decision on content, assets, images, media, layout and others must be planned from a mobile device approach first.
A few reference articles that can help better understand the concept:
It is recommended for an entity's internal team members to have detailed knowledge about the guidelines of the design system. They must be aware of the rules set forth in all guidelines.
They must play an important role in the planning and decision making phase. They must base the decisions of how design's are created, how content is created and how layouts are developed based on the published guidelines. Internal team members at entities should be the product owners, and must ensure that the final result follows the principles of accessibility and consistency.
Internal team members at entities must concentrate on content creation and copy writing as the first step. The "design brief document" must include - atleast 50% of the actual copy that has been approved for use on the website.
Internal team members at entities must also pay a great deal of attention to the development process and ensure that development of the website meets the design standards.
The assessment criteria is a great tool to refer to when there atetmpting to understand and plan the objectives of creating consistent and accessible websites.
The entity must fully understand all aspects of the guidelines, with key emphasis on colour, accessibility, layout and typography. Furthermore, the entity must evaluate their content as described in the content guideline.
To assist entities in self-evaluation, TDRA has compiled a list of assessment criteria on the design system 2.0 website under the resources section.
- If you have an issue to report, kindly submit it on our GitHub issues page.
- If you would like to open a community discussion, and discuss idea's, get help from the community or ask a question for help, kindly visit our our GitHub community page.
- For more information, you may also contact us at designsystem@tdra.gov.ae
Scrolling is a natural feature on the web today. Everybody is expected to scroll. However, "back to top" is a choice, and you may choose to add it if necessary, though any sticky element must follow WCAG 2.2 guidelines for floating elements where a floating element cannot disrupt any clickable element below it.
A recommendation is to have the back-to-top icon appear only when the footer is in the viewport, suggesting to the user that they are at the end of the page and if they choose, they can return to the start of the page.
The mobile application download banner is a component that must be placed above the footer. It is a choice of the website to include this on all pages, certain pages or only the homepage.
Any information or content on the website must add value to the user. Displaying a total count of visits to the website may give no value to the end user.
Collecting analytics and data of every page visit is mandatory — you may choose to use any analytics tool to do so. You may also choose to build a robust visualisation of data under the Open Data section if your entity wants to provide this. However, a counter of total visits is unecessary to showcase to a visitor.
If the entity finds it valuable to display a counter showing total visits to the website, they may do so below the contact number section on the footer component. You may include your reasons for adding it in the assessment criteria.
The format of a homepage must follow this :
- Header with navigation according to the provided block
- Hero section
- Service catalogue
- Initiatives
- News
After this section, up until the footer, everything is optional.
You must choose what is most relevant for the user — once again, measuring the speed index of the page and adding what adds value to the user must be the basis of all your decisions. For example, adding social feeds to your homepage adds no value. It takes the user away from your page. The objective of social media is to get users to your website and not the other way around.
You are free to describe a service, the steps and conditions, as required. Ensure you use relevant and proper content to describe what conditions are applicable to whom.
Be descriptive in explaining the details of the service. Aim to follow this pattern:
- Atleast 100 words to describe the service.
- The service procedure the user will expect.
- Conditions and requirements.
- FAQ's (if any)
- Attributes of the service
You may use any component from the design system to build the content of the service card page that helps communicate the information to the end user accurately.
You may add any fields to your form and ask anything that is required on the contact form.
The purpose of the design system templates is to highlight the fact that a form is required. It is more of a placeholder and the content of the form may vary from entity to entity. The requirement is to ensure the components like text fields, select box, radio buttons, checkboxes are used as per the design system.
An entity is free to add more information to the page. The design system has guidelines on how to manage content, layout and accessibility. As long as these are followed, the entity may add what is relevant to them.
An entity is free to add features such as these if they can enhance the experience and provide data on the entity itself. As long as accessibility, content, and layout guidelines are followed, the choice to display a form in a model or on a page is also in the hands of the entity.
Layout guidelines mandate the fact that the design system is a mobile-first-approach design system; hence, should you choose to open such a form in a modal, you must ensure it works effectively, seamlessly, and accurately on a mobile first.
Sustainability Development Goals, as described by the UN on https://sdgs.un.org/goals, are definitely an essential factor to display on the website. It is strongly recommended to dedicate a page within your information architecture on sustainability and describe how, on an overall basis, the entity follows the goals in digital and non-digital formats. Create content to describe sub-tasks on how elements of digital contribute towards these goals.
It is a choice whether you showcase which service or any part of an initiative fulfils which goal. You may place content on this on the particular page or link back to the sustainability content created.
Empathy mapping and UX study is an important step in determining the placement strategy of content. We have an article about this on "empathy mapping" which can be the guiding factor on how best to show relevant content to the user.
Being a "mobile-first" utility design system, it is expected that the first layouts and testing of content must be carried out on a mobile first. While designing the website, the design system must aim to create layouts meant for usability on a mobile first.
All features for responsive design are part of the components and blocks. Layouts and Typography guidelines have detailed explanations on how to utilise responsiveness.
The design system is designed to be responsive and mobile friendly for the web.
The Iconography guideline describes the use of icons and how best to place them on components. It is essential to use the recommended library. If a particular icon that you need to use does not exist, you must custom-create the icon following the guidelines mentioned in the design system Figma file.
The entity should understand the concept of Largest Contentful Paint (LCP), First Contentful Paint (FCP), Time to First Byte (TTFB) to determine the speed index of a page. Google recommends an LCP of less than 2.5 seconds per page, while the UAE design system benchmarks this and requires that the LCP does not exceed 2 seconds per page.
Please refer to the following for more about the loading time and speed requirements of a page:
To clarify first, WCAG's current version stands at 2.3 and therefore, compliance with any aspect of web accessibility must be in accordance with WCAG 2.2 as the minimum.
Furthermore, AAA level is not necessary - however every entity must attain the AA level. Failing to be tested against a AA level would lead to non compliance with the design system. Components designed in the design system are tested against AA level standard mentioned in WCAG 2.2.
Finally, colour contrast is not the only aspect to take into consideration for compliance with the AA level. For example, AA level compliance also requires:
- Icon sizes to be 32 x 32 as a minimum on desktops
- All interactive targets should take up at least 44 × 44 CSS pixels of space
- When a visitor fills out a form, any previously entered information should be available through auto-fill or selection.
- Captions are provided for all live audio content in synchronised media.
The above are only examples that highlights the need to meet various Success Criterion over and above contrast colour to attain the AA level. It is therefore recommended for all entities to study the Web Content Accessibility Guidelines (WCAG) 2.2 and aim to comply with standards set forth in this document.
Being a "mobile-first" utility design system, it is expected that the first layouts and testing of content must be carried out on a mobile first. While designing the website, the design system must aim to create layouts meant for usability on a mobile first.
All features for responsive design are part of the components and blocks. Layouts and Typography guidelines have detailed explanations on how to utilise responsiveness.
The design system is designed to be responsive and mobile friendly for the web.
The colour guideline defined the acceptable set of colours to utilise on a website. Ministries of the United Arab Emirates may not make any change to the usage of colour and must use the primary colour palette.
Federal authorities of the United Arab Emirates may brand the primary colour as they require. Using a colour swatch that accurately has the same level of hex codes as the UAE-GOLD colour will ensure all components are rendered accurately.
To maintain consistency, it is recommended to use colours mentioned in the guideline where possible as these have been tested for colour contrast ratio.
The recommended icon library has over 1,248 icons - each one available in 6 different types. This is a vast library, containing many icons that are useful.
If you still feel that there is a need for a specific icon that must be used, that does not exist, it is recommended that the design team creates this icon following the guidelines in the Figma file of the design system. Every custom icon designed must always be designed on a canvas that the same height and width.
You may certainly add this as a feature. However, you must decide how to save such selections and how to display them to the user. If the option to save a service as a favourite depends on the use of browser cookies, you must ensure you mention this in the privacy and cookie policy.
You may also want to consider how you can transition pre-saved favourites into a permanent record once a user has logged into their account.
Alerts may be "dismissable", and alerts may be "fixed".
A fixed alert is when the website wants to make sure the alert is always visible to the user.
A dismissable alert is a good user experience where the user has the choice to close an alert. Ideally, a user would close an alert - indicating that they have acknowledged it. Hence, if a user has intentionally closed an alert, it is considered that they have acknowledged the message.
If the website owner believes that the alert displayed is important and must always be visible to the user, then they must not classify it as dismissible.
Rather than a limitation, it is a recommendation. The criteria of assessment will be measured based on page speed, LCP and FCP. If a website can achieve the recommended values of LCP and FCP with 5 items in a slider, then you are free to add them. On a general scale, the design system recommends have not more than 3 items on your homepage banner component.
The design system has described in guidelines the concept of "Graceful Degradation". Furthermore, it also describes in detail the concept of "Responsive design."
Hence, it goes to state that screen resolution recommendation is not a factor. Your website must adapt to all resolutions! You must have relevant breakpoints for devices and you should choose (based on your analytics and data) at what resolution you are supposed to box your website. The layout guideline describes the method to do in detail.
Regarding browser support - Refer to the Browser Support page to understand how to implement browser support and use the strategy of Graceful Degradation. Your current analytics data will determine the maximum used browsers for your website. You must support all browsers that match the critieria mentioned on Browser Support. When Graceful Degradation is not possible, you must highlight a notice to the user on incompatible use.
Filter is a block that is available. Please refer to https://designsystem.gov.ae/docs/blocks/filter for an example.
The purpose of blocks is to provide best use cases. What an entity chooses to add in a filter is a choice and must be relevant to your entity's requirement and the results displayed.
As long as the component follows the design requirements of components such as text fields, dropdowns, checkboxes, radio buttons and more, the entity may add relevant filters that can help enhance the user experience.
The design system takes common use cases and provides an example. If your structure requires the ability to have multiple download types available, you may always amend such blocks.
However, make sure you use a component style as described - example, if you choose to allow the user to select "Type" as a dropdown - then use the "Select" component from the design system. On the other hand, if you want to allow the user to download by clicking a button with an icon, use consistent icons from the library.
Guidelines mention LCP and FCP as significant factors. When a page has a slider element (a banner with more than one image), it will always be considered the "Largest contentful element"; hence, the FCP of the website will be affected.
Guidelines also mention that large header images are recommended for no more than 3. If you add 3 images, lazy load them, and activate the auto scroll after the page load, it means your FCP and LCP will be as per assessment requirements.
Furthermore, adding a pause feature is actually an action. If UX studies for your website show it is a better solution, you may add it. On a general scale, a "Pause on hover" is considered a better approach to pause a slider rather than explicitly having a user click on a pause action.
Themes are definitely not recommended. A website must be consistent - that is the purpose of the design system. Also, it is our recommendation that Virtual tour is not a setting. It is a feature and you may show this to the user within navigation elements that would be most suitable to the subject.
Adding a settings icon - means you want the user to customise some settings that are relevant to that user. Ideally, such settings are applicable once a user is logged in - so that you may save those settings as a preference towards the user's account and load them every time for the user. Alternatively, you may save these preferences for users who are not logged in to their local storage or cookies. It is also important to consider the privacy settings that a user may apply for accepting cookies.
In all cases, providing the user with the ability to customise accessibility features must be managed by detection first and provide the user with an interface to only further enhance the experience.
Previous
Assets and tools
Next
Roadmap