I've recently started designing a web application for a project and at times, I realize there is a better solution but don't know where to look or how to do it myself easily. Is there any resource that collates best use-cases with design samples in web application user interfaces?
-
Is material design what you are talking about?– mootCommented Feb 8, 2022 at 23:31
-
Material design is great for individual components but how they come together and work in real-world applications would be incredibly helpful.– FurkanicusCommented Feb 9, 2022 at 11:24
-
All of google's stuff is material, android, chrome, google drive, docs, etc. and there's also examples in the material design doc– mootCommented Feb 9, 2022 at 22:45
3 Answers
Good resources I discovered some time ago are: https://www.pageflows.com/ https://saaswebsites.com/pro/
Not sure if you are looking for design patterns (i.e. technology and implementation agnostic design solutions to common user tasks and problems) such as those documented in UI Patterns or something more specific that has CSS and HTML like CodePen or just concepts like those in Dribbble or Behance (when you search for specific keywords).
I actually wish there was a site that collected good design patterns rather than the Dark Patterns website that has all the bad examples.
The one that I can think of which specifically relates to map based applications that has the type of detail you are looking for is Map UI Patterns.
But there are plenty of design systems that you can actually look up for inspirations or ideas like Atomic Design, Google Material Design, Microsoft Fluent UI, Carbon Design System by IBM, etc. Or ones specifically related to web applications like Bootstrap or Ant Design System.
I found a great resource for UI patterns which also provides some ideas as well.
https://www.uxlibrary.org/explore/ui-design/ui-patterns-and-inspiration
There are many references on that site but the ones that I found most useful are: