I would recommend a couple of things:
Sidebar with links to headers similar to other documentation sites.
And if you are going to provide insights on accessibility, which is great, make sure your site is also accessible.
Show HN: UI Playbook – A documented collection of UI components
11–20 of 36 posts
Re: Show HN: UI Playbook – A documented collection of UI components
#12Why no spinbox?
Re: Show HN: UI Playbook – A documented collection of UI components
#13Nice! This is awesome!
Re: Show HN: UI Playbook – A documented collection of UI components
#14Earlier quoted context omitted.
What's your general thought on adapting one of the bigger design systems with thousands of hours of improvement & polishing vs building one from scratch? I do think there is need for a common vernacular in these components, however I think that too often teams start from scratch when they could pull something off the shelf, and swap out some colors. List of corporate sponsored design systems: https://designsystemsrep…
Agree with this comment. I think it is awesome that OP worked on a design system for the first time, that’s great experience to have, but it doesn’t warrant further diluting the market with another unfinished system.
It's not a design system. It's documentation/best practices around common UI components that you'd find in most design systems.
Re: Show HN: UI Playbook – A documented collection of UI components
#15Why no spinbox?
Had to look it up. I think these are more-commonly called "Number Input Box" ?
Re: Show HN: UI Playbook – A documented collection of UI components
#16Hey! After my first experience with design systems, I decided to kickstart a project called UI Playbook which is my attempt to document common UI components, their functionality, best practices, accessibility requirements, and examples. If at least one person finds this useful — it's a win!
What's your general thought on adapting one of the bigger design systems with thousands of hours of improvement & polishing vs building one from scratch? I do think there is need for a common vernacular in these components, however I think that too often teams start from scratch when they could pull something off the shelf, and swap out some colors. List of corporate sponsored design systems: https://designsystemsrep…
At some point you’re fighting against the design system more than you’re using it. It’s The same reason that I wouldn’t build a web app on WordPress. WP is great if what you want is a WordPress site. Otherwise, you’re just trying to shoe horn _your app_ into WordPress. Most of these things aren’t difficult to build and can be picked up a la carte and customized to whatever extent.
Re: Show HN: UI Playbook – A documented collection of UI components
#17Earlier quoted context omitted.
Agree with this comment. I think it is awesome that OP worked on a design system for the first time, that’s great experience to have, but it doesn’t warrant further diluting the market with another unfinished system.
It's not a design system. It's documentation/best practices around common UI components that you'd find in most design systems.
Oh, then I guess I don’t see the point? Actual design systems vary quite a bit, refer to their documentation for their exact flavor of how to implement UI correctly and eliminate the middleman. I’m not saying having a general knowledge of the underlying tools is bad, that’s great knowledge to have, but it does already exist if you look for it.
Re: Show HN: UI Playbook – A documented collection of UI components
#18Was wondering why OP only seems to recommend reach-io as examples, turns out they are a contributor. It’s all open source so like, you’re not doing anything malicious for profit here, but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example system if this is supposed to be system agnostic documentation
Re: Show HN: UI Playbook – A documented collection of UI components
#19Was wondering why OP only seems to recommend reach-io as examples, turns out they are a contributor. It’s all open source so like, you’re not doing anything malicious for profit here, but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example system if this is supposed to be system agnostic documentation
> but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example
No it wouldn’t. That’s a lot of disclaimer burden to put on someone.
Re: Show HN: UI Playbook – A documented collection of UI components
#20Earlier quoted context omitted.
What's your general thought on adapting one of the bigger design systems with thousands of hours of improvement & polishing vs building one from scratch? I do think there is need for a common vernacular in these components, however I think that too often teams start from scratch when they could pull something off the shelf, and swap out some colors. List of corporate sponsored design systems: https://designsystemsrep…
At some point you’re fighting against the design system more than you’re using it. It’s The same reason that I wouldn’t build a web app on WordPress. WP is great if what you want is a WordPress site. Otherwise, you’re just trying to shoe horn _your app_ into WordPress. Most of these things aren’t difficult to build and can be picked up a la carte and customized to whatever extent.
The depth & flexibility in many of these libraries is quite extraordinary.
Totally agree with the Wordpress example, however, I'd argue that more products & applications should attempt to be build upon known primitives to reduce cognitive overload for both the building team and the end users.