UI Guidelines

It’s important that you adhere to guidelines for creating and implementing user interface (UI) components that offer a consistent and good experience to the user.

The following information is a snapshot of guidance mainly from the Google material design system which focuses on a popular range of UI components.

Buttons

Material Design Buttons Guidelines M3

Material Design Buttons Guidelines M2

Alerts

Navigation is a crucial element within any digital products. And as a user interface designer, you will need to focus on how the user can navigate effectively throughout all of the screens/pages within a site/application. It’s important that you take on board the guidelines offered within Google Material Design, Apple HCI, UX, HCI theory and accessibility

MATERIAL DESIGN, 2020. Material Design [viewed 1 November 2020]. Available from: https://material.io/design/navigation/understanding-navigation.html#types-of-navigation

MATERIAL DESIGN, 2020. Material Design [viewed 1 November 2020]. Available from: https://material.io/design/navigation/navigation-transitions.html

Menus

Material Design describes menus as “… displaying a list of choices on temporary surfaces.” This week we will look at the guidelines to support appropriate design and development of menus.

MATERIAL DESIGN, 2020. Material Design [viewed 8 November 2020]. Available from: https://material.io/components/menus#exposed-dropdown-menu

Forms and text fields

Forms & Text Field Support Links

ANGULAR, 2020. Angular Material [viewed 15 November 2020]. Available from: https://material.angular.io/components/form-field/examples

FRIEDLAND.,M. 2020. Stop using Material Design text fields! [viewed 15 November 2020]. Available from: https://www.matsuko.ca/blog/stop-using-material-design-text-fields/

MATERIAL DESIGN, 2020. Material Design [viewed 15 November 2020]. Available from: https://material.io/components/text-fields

MDBOOTSTRAP.COM., 2019. Material design form - Material Design for Bootstrap [viewed 15 November 2020]. Available from: https://mdbootstrap.com/snippets/jquery/mdbootstrap/944378

WEBAIM.ORG., 2020. WebAIM: Creating Accessible Forms - General Form Accessibility [viewed 15 November 2020]. Available from: https://webaim.org/techniques/forms/

Modals

“The modal component provides a solid foundation for creating dialogs, popovers and lightboxes.”

ui-patterns.com, 2020. Modal design pattern [viewed 23 November 2020]. Available from: http://ui-patterns.com/patterns/modal-windows

MATERIALUI.COM., 2020. React Modal component - Material-UI [viewed 23 November 2020]. Available from: https://material-ui.com/components/modal/