Group 37
Overview Requirements Development Prototype Testing Logs Meta
Overview:
Overview
Our Project
Version Control
Requirements:
Requirements
MoSCoW
Use Cases
Development:
Background Research
Technical Research
Architecture Research
Developing Solution
User Interface
Prototype:
Design Guide
Form Renderer
Dashboard
Visual Report
Testing
Logs:
Design Guide
Form Renderer
Dashboard
Visual Report
Meta:
Project Management
Bi-weekly Reports
Plans for Term 2
Updated: 22/11/2016

Technical Research: Material UI

Material UI is a User Interface Library, developed by Google, used for the development of responsive User Interfaces [1]. It relies on using react to execute Google’s Material design features. It contains a number of React components such as app bar, avatar and icons.


Key Features

  • It is readily compatible with React JS, a technology favoured by the majority of teams on the project. This allows for greater integration
  • Utilising Google’s Material Design, it utilises fundamental design principles allowing for more beautiful designs
  • Utilises the css Less preprocessor. This extends the CSS Language allowing variables, mixins, functions and other features that make CSS more maintainable [2]


    • Usage

    Material UI dictates how UX elements behave and interact visually. It first focuses on general design principles (physics, light, space, momentum) and expands on those principles to provide concrete examples and requirements for specific elements Material UI is less opinionated about implementation, unlike Bootstrap, which is more of a true development framework. [3] Therefore, this lack of customisation regarding UX may be a disadvantage considering there are NHS guidelines with regard to designing websites.


    Advantages

  • Utilises a CSS framework
  • Easy to learn
  • Full Material Design Support
  • Flex-box grid system and adaptive layout directives.


    • Disadvantages

  • Community is not as big as other frameworks such as Bootstrap, therefore potentially more difficult to troubleshoot [4]
  • Lack some useful web components like table and labels [5]


    • Alternatives

  • Bootstrap
  • PURE.CSS


    • References

    [1] "13 Material Design Frameworks For Modern UI Development |". Codecondo.com. N.p., 2016. Web. 22 Nov. 2016.
    [2] "Best UI Library For React ?". React Discuss. N.p., 2016. Web. 22 Nov. 2016.
    [3] [closed], Comparison. "Comparison Between Bootstrap And Material Design Frameworks". Ux.stackexchange.com. N.p., 2016. Web. 22 Nov. 2016.
    [4] Team, The. "Getting Started | Less.Js". Lesscss.org. N.p., 2016. Web. 22 Nov. 2016.
    [5] ]"Angular Material Vs Semantic-Ui Vs Bootstrap Vs Foundation Vs Materialize". Medium. N.p., 2016. Web. 22 Nov. 2016.