Layout
The structural set-up of space is key to a clean design and great user experience. Layout determines how all the elements of a page support consistency across the website by defining grids, spacing and sections.
Principles
Familiar
Layouts should be designed using a familiar structure that users are used to interacting with.
Simple and Clean
Keeping the layout minimal improves usability.
Consistent
Listed items should same in terms of size, style and content.
Layout guidelines:
- - Grid
- - Responsive
- - Spacing
- - Content structure
- - Elevation
- - Section
Layout components:
- - Grid
- - Cards
- - List
- - Dividers
- - Modals
- - Header
- - Menu
- - Masthead
- - Footer
Layout guidelines:
Grid
The grid system is composed of 12 flexible columns with a gutter between columns of 24px.
Columns
There are 12 columns available in each row that allow you to create different combinations of elements that can span any number of columns.
Application 1
Application 2
You can break the equal-width grid to create containers with different width.
Mixed
1 of 2
2 of 2 (wider)
1 of 3
2 of 3
3 of 3
1 of 3 (wider)
2 of 3
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
Application 1
This services section uses 4 containers in a row. The first container is the tab components, and the other 3 containers are service cards.
Application 2
You can create unlimited combinations using the grid system but ensure all layouts remain consistent. A good way to do this is by experimenting with the columns until you reach your desired result or simply picking 1-3 layout examples from Templates and creating the remaining pages using the same.
Gutter
The space between each column is called a gutter. The acceptable spacing ranges between 20px to 32px; the default value is 24px. It is important to use the same gutter space for all pages of a website
Padding
The space on the left and right side of the grid is 100px by default. On wider aspect ratios, increase the padding to keep the grid the same
Layout guidelines:
Responsive
To keep user experiences consistent across devices, use the grid system, and padding method explained here.
Suggested breakpoints:
- - Large (desktop): 1600px
- - Medium (desktop and mobile): 1000px
- - Small (mobile): 600px
Note: For mobile breakpoints, you can also use the 6-column grid system.
Large (desktop)
1600px with 100px padding = 1400px container
Padding
Container
Since the default aspect ratio is 16:10, for wider screens (e.g. 16:9 or 21:9), increase the padding and keep the container fixed.
Example of an ultrawide aspect ratio:
Application
Medium (desktop or mobile)
1000px with 20px padding = 960px container
Small (mobile)
600px with 16px padding = 568px container
Since the width of the screen is lower in the medium and small breakpoints, reduce the number of items in the row using the grid system. You can reduce the number of columns from 12 to 8 in the medium or to 6 columns for smaller device.
Application:
In this concept, the 12 column grid in the large breakpoint converts to a 6 column grid in the mobile layout.
Large
Medium
Small
Layout guidelines:
Spacing
Spacing refers to the required space between elements, sections and the overall layout. Consistent spacing makes an interface clear and easy to scan. Our spacing system aligns to an 8px grid by default, and for smaller objects, we use a 4px grid.
Primary spacing (8px interval)
Secondary spacing (4px interval)
Usage
Space has meaning. Elements with less space will be considered relative while adding more space between elements signifies separation.Use this simple rule of thumb to create consistent, easy-to-understand layouts.
Example of space usage:
4 - 12 px
Ideal for small spaces such as connecting an icon to a label
12 - 24 px
Inner padding for small elements; connecting a heading to its body description text
24 - 48 px
Inner padding for a card or small container
48 - 72 px
Ideal to use for space between high contrast and large elements such as space between the hero display and description and padding of medium-size elements such as cards
72px & above
Ideal for separating sections and large elements
Application
Do
Use spacing to separate sections and elements in the layout
Don't
Use large spacing for related content or less spacing for separate sections/elements
Layout guidelines:
Content structure
Structure your layout based on the content and user needs. Begin with matching what your majority of users look for on your website; our study has shown that the top two content types are: New announcements and Services. The next set of content that comes below them should go lower in users' importance or fit the criteria of your minority demographics (e.g. researchers).
Highest value
Display this at the top of your page as all users will see this content.
High value
Approximately 30% of a reduction will occur in this area, which means only 70% will view the content.
Medium value
Expect a further 30% drop in users viewing medium value content. Donʼt place critical information in this area.
Low value
Use the bottom line of your value list, as only a few users will see the content in this area
Using this guideline, ensures that the main actions are placed in the high-value areas for maximum user interaction.
To sum up, it is important to keep the layout scrollable by ensuring section and container heights are less than the screen's height.
Highest value
100% view by users
High value
70% view by users
Medium value
40% view by users
Low value
20% view by users
Layout guidelines:
Elevation
Some components and elements can be elevated on the Z index, such as modals. Modals appear on top of the entire screen and have a shadow, indicating that the component has been elevated and is the most important part of the layout until an action occurs.
There are 3 levels of elevation:
Small
Ideal for small elements such as an icon or a list
Medium
Great for medium emphasis elements such as a card or a small section
Large
Recommended for modals that should cover the entire screen
Small
X: 0
Y: 2px
Blur: 4px
Medium
X: 0
Y: 6px
Blur: 12px
Large
X: 0
Y: 20px
Blur: 40px
Shadow colour
Shadow colour uses UAE Black 100 with 16% opacity in small and medium elevations and 32% opacity in large elevations.
You can also use dark values (higher than 60) of the primary colour in certain situations.
Application
Shadow: UAE Gold 70, 32% opacity, large elevation
Shadow: UAE Gold 60, 16% opacity, medium elevation
Layout guidelines:
Section
A section or a container is an area that contains content, components and other elements. Sections need to be created using these principles:
Purpose
Only use sections when content needs to be separated from other elements..
Contrast
Separated sections must be visible on the page.
Consistent
Create sections with predictable grids, shapes and behaviours across the website..
Use the following components to create a section:
Purpose
In some layouts, you may need to create more sections to emphasize a part of it, balance the interface's weight or show a clear information hierarchy.
Do
Add sections for related content to separate it from other pieces of content
Contrast
Sections need contrast to be recognisable.Use environment colours to create minimal contrast between sections.
Do
Create contrast between sections
You can also use dividers to separate containers:
Application
Consistency
Create consistent sections across the website in terms of behaviour, size, style and colour palette. For instance, when using full-width backgrounds for each section, using smaller containers breaks their consistency and may confuse users when differentiating between sections (which can be mistaken for other elements).
Do
Use dividers to separate sections
Layout components:
Cards
Cards are containers that accept various types of elements. A card groups content to make it relative and easy to scan.
Application
Usage
Elements such as typography, components, media and data can be placed in cards.
Cards can be used when multiple items are displayed, and each one is a distinct element.
Cards can be used for
- - Services
- - Initiatives
- - Blog
- - Open Data
- - e-Participation
- - Polls
Cards can use elevation:
Application
Application
Size
Cards should follow the grid system. Card width can range from 2 columns to full-width. Ensure the height of the cards is 60% below that of the screen height.
Do
Keep card height 60% below entire screen height
Don't
Use card height that exceeds 60% of the breakpoint height
Do
Keep card information concise
Don't
Add too much information on a single card
Do
Make card containers clickable if they contain only one link
You can pick one of the cards from templates:
Behaviour
Cards require default and hover states to support feedback when the card is rolled over. Cards can contain additional information that is visible when the hover state is activated. The motion of the hover state should be minimum and natural to prevent issues arising from excessive motions for sensitive users.
Do
Keep card information concise
Don't
Add too much information on a single card
Note: Make sure the card size remains the same as the default state.
Layout components:
List
When there are many items to showcase, a list is a good option as it is clean, structured, and understandable. This enables easy scanning of items. Ensure that all items follow a similar structure
Related
List related items together.
Consistent
Listed items should same in terms of size, style and content.
Understandable
Users should be easily able to understand listed information.
One-line list
| Sample title | Sample | |
|---|---|---|
| List item in one line | Sample data | |
| List item in one line | Sample data | |
| List item in one line | Sample data | |
| List item in one line | Sample data | |
Two-line list
| Sample title | Sample | |
|---|---|---|
|
Two line list item Sample description text |
Sample data | |
|
Two line list item Sample description text |
Sample data | |
|
Two line list item Sample description text |
Sample data | |
Supporting elements
Cards can contain various elements such as icons, actions and dividers
Icon
Icons can be placed on both left and right sides of the list.
Leading icon
Two line list item
Sample description text
Two line list item
Sample description text
Two line list item
Sample description text
Ending icon
Two line list item
Sample description text
Two line list item
Sample description text
Two line list item
Sample description text
Actions and Select
Buttons
Two line list item
Sample description text
Sample description text
Sample description text
Two line list item
Sample description text
Select components
Two line list item
Sample description text
Two line list item
Sample description text
Two line list item
Sample description text
Style
Choose list style based on your layout and other elements
With background
| Sample title | Sample | |
|---|---|---|
|
Two line list item Sample description text |
Sample data | |
|
Two line list item Sample description text |
Sample data | |
|
Two line list item Sample description text |
Sample data | |
With border
| Sample title | Sample | |
|---|---|---|
|
Two line list item Sample description text |
Sample data | |
|
Two line list item Sample description text |
Sample data | |
|
Two line list item Sample description text |
Sample data | |
List_Colour
Lists should be simple. Reduce the amount of colour used for elements. Use primary colour for action components or to add emphasis..
Application
Recently Updated
Apr 2021
|
Statistics of Prohibited Content Categories |
Website Traffic | |
|
Gasoline & Diesel Domestic prices 2019 |
Reports and Sta.. | |
|
Statistics of Prohibited Content Categories |
Website Traffic | |
|
Annual Statistical Report 2018 Book |
Annual Report |
Layout components:
Dividers
Dividers are used to separate different pieces of content, data or elements. .
Line
With label
Specs
1px
UAE Black 100 - 16% opacity
Layout components:
Modals
Modals are the highest priority content of a layout that requires urgent user action to proceed.
Usage
Use modals when critical action is required before users can complete a process.
Examples:
- - Confirmations
- - Important announcements
- - Error messages
- - Success messages
TRA Conference is now LIVE on YouTube
It's free for everyone
Specs
The modal height should be smaller than the screen's height (less than 70% of the screen's height) without scrolling. The width can range from 20 to 40% of screen width.
Standard size:
Layout components:
Header
An integral part of each page which remains fixed at the top when scrolling. Headers contain useful links along with the required logos
Header style
Two header variations can be used. One has more height, allowing room to add more elements, and the second is compact in height, which is ideal for when header elements are limited.
Large
Compact
Layout components:
Menu
The menu is part of a header and stays anchored at the top of the screen. A menu contains useful links and actions
Menus can be compact and large and can include icons depending on the depth of links you have to display
Large
Compact
Layout components:
Masthead
The most important part of each screen, the masthead, sits at the top of
the page and showcases themed page content with a hero display title.
Mastheads can use imagery, components (such as search, actions,
etc.) and navigation elements.
Masthead style
Here are two variations for mastheads. The hero variation features a large container and should be used for your landing page. The compact variation features a shorter container and should be only used for internal pages
Hero
Compact
When creating mastheads, the most important thing to remember is to keep their height lower than the screen height, so the content is visible. This will prompt users to continue scrolling.
Do
Keep masthead height lower than screen height
Don't
Make the masthead cover the full screen
Specs
Application 1
This main page uses a hero masthead. .
Examples 2
This internal page uses a compact masthead.
Layout components:
Footer
Like headers, footers are a part of each page and will be placed below all of the contents at the end of the page
Footer style
There are two footer variations. One with more area to place content and one with less.
Large | Without logo
Compact | With logo
Breadcrumb
A breadcrumb indicates the page's hierarchy back to its parent page. It helps users situate themselves on the website
Breadcrumb Style
You can use one of the two styles for breadcrumbs:
With icon
Classic
Breadcrumb Placement
The breadcrumb should be at the top of the page after the header. Based on your layout, you can left-align [above the page title] or centre-align the breadcrumb
Specs
Application
Note: Use white colour when placing breadcrumb on dark or saturated backgrounds
See mastheads in Templaes.
Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Usage
If users have to look at more than 20 items displayed, use pagination to reduce the scroll time on a page.
Style
Pagination has two styles, and your selection will depend on the number of pages of content. If there are less than seven pages of content to display, use the default style and implement the secondary style for more than seven pages.
Default
Secondary
Placement
Pagination's placement is at the bottom of a page below the first set of information displayed
Colour
Use UAE Black for pagination and a primary colour to show what page the user is currently at.
Monochrome
Specs
Progress bar
Progress bar is a visual reference to help users understand how far along they are in a process and gives them an idea of the remaining steps
Usage
Use progress bars when more than one step is required to complete a task
Style and Placement
Two styles can be used for progress bars - horizontal, placed at the top or vertical, placed along the side.
Horizontal
Vertical
Colour
Use primary or functional colours for progress bars.
See functional colours in Colour System
Specs
Application
Section search
Apart from the main Search feature [also known as Global Search], section-specific search filters content within the section. This helps users to find content without having to navigate away from the context.
Placement
Place the section search directly above the section content. It should include a visible search field that has a smaller UI style than the Global Search.
Style
Section Search has two different UI hierarchies. Section Search can be positioned on the top of the page, below the page title for an internal page with a singular theme. Section Search can be positioned on the top side of a section panel situated in between other sections
Application 1: Section Search positioned on the top of Services page
Application 2: Section Search positioned on the Services section panel on the Main page.
Notification panel
Notification panel is a quick way to alert users to important updates, information and shortcuts to actions. It uses card overlays.
Usage
Use it when you require to alert users to multiple notifications ranging in urgency. The notifications should be listed from highest to lowest priority and be accessible to users whenever they are ready to take action.
Specs
