NYPL Design ToolkitVersion: 0.1.36
NYPL Design Toolkit
- About This Toolkit
- Buttons And Menus
- Color Accessibility Table
- Color Reference
- General Microformats
- SVG Index
- Tables And Data
- Visible Focus
- Landmark roles & Regions
- Skip Links
- Development Checklist
- NYPL User Experience & Visual Design Project Index
- Visible Focus
- Discovery home
- Discovery search results
- Discovery detail page
- Discovery request page
- Discovery request form
- Discovery request confirmation page
About This Toolkit
This toolkit aims to serve multiple purposes:
- facilitate the rapid creation of new web user interfaces
- ensure consistency in design and quality
- serve as the main repository for documenting the web design efforts at NYPL Digital
- establish and promote universal design best practices
This is a work in progress. We will be constantly updating it, making additions and modifications to suit the needs of the team and the organization. If you see something missing or wrong, please open an issue on the Github repository.
How This Site Is Organized
While the goal is to make this toolkit as easy to use as possible, some web development experience is required to be able to use it successfully.
The main idea behind this toolkit is to have as much of the design and functionality for any user interface available “out of the box”. You shouldn’t need to be writing any custom CSS. If you are working on a NYPL Digital project and you think the functionality or widget you need is not covered, please open an issue in Github. This way future projects will benefit from new developments and you won’t need to do the heavy lifting of coming up with a custom solution to a design problem. As someone else put it best: “the real way to scale CSS, is to stop writing CSS.”
After relying on custom web fonts for a while, we have decided that it is in our patron’s best interest for NYPL websites to rely on system fonts instead. These fonts have several benefits:
- they are already installed in your computer or mobile device so there is no additional download required to use them, thus reducing bandwidth usage costs
- having the nuances of bold text, italic text, or
code textalso increases the size of the download (and we want those)
- our materials are multilanguage, making finding a custom font that supports, say, Persian or Chinese very expensive
- even if a custom font supports every single language, like the commendable Noto free font by Google, it will be a very big download for our patrons (the complete Google Noto set is 970 megabytes!)
These are just the main reasons why we decided, for now, to use system fonts in this toolkit.
Accessibility And Mobile First
This toolkit puts universal design and mobile use first. All features should be accessible to all users in all devices. We strive to conform to WCAG 2.0 AA standard. If you see something that does not conform to this goal and standard, please open an issue in Github.
There are installation instructions in the Github repository.
The idea behind this toolkit borrows heavily from initiatives such as the Gov.UK Service Manual or the US Web Design Standards. We hope this code, which is available on Github, will be of use to others.