DEV Community

Discussion on: Help designing web application UI

Collapse
layzee profile image
Lars Gyrup Brink Nielsen • Edited on

You are right. The wish to put everything in data tables, or "grids" as desktop developers call them, is a tell tale sign that you lack UX experts.

The Material Design language prefers lists for overview pages.

material.io/design/components/list...

Combine it with a detail view in a side sheet for a nice desktop UX.

material.io/design/components/shee...

You can use the side sheet for the history as well if it is simple enough to display in a small area of the viewport.

Put a relevant heading or a content filter in the start of the app bar. Use the end of the app bar for primary actions, i.e. icon buttons. Use Angular Material's toolbar component for the app bar - and the side sheet top bar as well.

material.angular.io/components/too...

Creating the overall layout and app shell can take a good portion of the initial development.

Use the Angular Material navigation schematic to get a decent starting point.

material.angular.io/guide/schemati...

Thread Thread
buinauskas profile image
Evaldas Author

This is really useful! We already got a top bar with sidenav that's kind of a YouTube layout clone. It's just the content that we struggle with.

Really appreciate your help! Thank you!