top-design.md

Design Guidelines

These design guidelines provide solutions for common scenarios in Azure. We formalize these best practices once several teams solve a similar problem using a well-researched approach and see successful real-world usage of the common solution. Azure teams should leverage these design guidelines to accelerate extension development and to provide users with a familiar experience so that users can easily adopt new Azure services.

Controls design guidance

Controls are the building blocks of the Azure UX. They allow users to view, edit, and analyze data. Using built in controls provides consistency across the portal. Additionally, issues around usability, accessibility, security and any other fundamentals are handled by the Framework team.

• Controls list and design guidance

Design patterns

Design patterns provide solutions for common Azure scenarios.

Portal patterns

Common navigation and interaction models across the portal

• Full screen navigation ensures the portal behaves like a website with full screen pages and no horizontal scrolling

• Notifications provide in-line guidance, feedback, validations, errors and portal notifications to users

Resource management patterns

UX to manage the full lifecycle of Azure resources.

• Create a resource

• Browse resources

• Manage a resource

Page design patterns

Page layouts for common Azure scenarios including guidance on where commands, tabs, fields and buttons should be placed

• Service overview provides get started, overview, configuration, monitoring and other information for an Azure service

• Responsive pages

• Lists and grids

• Forms gather, validate and submit user input

• Filtering

• Step wizard a set of sequential steps to perform a task

Quick tips on page design

* Pages should be full screen so that we avoid partial pages and avoid horizontal scrolling
* Content on a page should be constrained to a maximum width of 700px
* Each page that is displaying data should have a **Refresh** command

Design templates, toolkits and resources

Design templates, toolkits and resources are available so that you can easily create designs that leverage these patterns.

• Design templates and toolkits

  • Portal design toolkit in Figma
  • List of all design templates and toolkits

• Icons and illustrations

• Style guide

Writing guides

Writing guides are key resources to brand voice and content style and standards for Azure and the Business Applications Group within the Cloud + AI division. These two guides supply quick answers and essential direction for anyone who creates content — whether for brand naming, product design, documentation, marketing, PR, events, or other customer communications.

• Microsoft Cloud Style Guide
• Microsoft Writing Style Guide