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 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.
Design patterns provide solutions for common Azure scenarios.
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
-
Guidance and feedback provide in-line guidance, feedback, validations, errors and portal notifications to users
UX to manage the full lifecycle of Azure resources.
Page layouts for common Azure scenarios including guidance on where commands, tabs, fields and buttons should be placed
-
Overview pages provide get started, overview, configuration, monitoring and other information for a service or resource
-
Forms gather, validate and submit user input
* 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 are available so that you can easily create designs that leverage these patterns.
-
Design templates and toolkits
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.