Search code examples
javascriptarchitecturefrontendsystem-design

Are there materials on frontend design system?

Has anyone come across the material for designing frontend applications (starting with functional and non-functional requirements). I will give an example

https://www.youtube.com/watch?v=3MADCVqL534&t=1171s https://www.youtube.com/watch?v=utWopFyY5cE

Perhaps there is still usable material?

Solution

  • From an architecture / design perspective I like to think about the context in which the system / UI will be used:

    enter image description here

    ...and to consider usability principles:

    enter image description here

    Having thought about those, I'd start by designing using pen & paper / whiteboard. Specifically:

    • Screen map / Functional - what pages/screens/widgets are needed, and how they relate. Be careful in that sometimes you need to think in terms of functionality - not "pages/screens", partly because sometimes functionality might be better encapsulated in a reusable widget that occurs in more than one place.
    • Special scenarios - e.g. user registration or some critical functional task.
    • Wireframes of screens / widgets, starting with those that will best inform the rest of the design.

    I don't have anything for NFR's specifically - where the NFR's inform the design, but I do have some basic "starter" usability requirements:

    enter image description here