NYU Design System
UI, 2020
![](https://freight.cargo.site/t/original/i/75ffbd31e54af60b7f3ee9541b87b0ff6bc1a9beb0633c16258fa14ca53a5150/0_Component-main.png)
Overview
Digital Communications Group at New York University builds a design system for New York University’s digital experience. We were designing re-usable components for the visual consistency of NYU digital content. I created part of elements such as Charts / Tabs / Switch, Checkbox, and Radio / Text Area / Multiselect and Dropdown / Date Picker / Buttons.
Team
Suzanne Doig
Logan Johnson
Brittney Mc
Jaekook Han
Suzanne Doig
Logan Johnson
Brittney Mc
Jaekook Han
Role
UI Design
UI Design
Tool
Sketch
Frontify
Sketch
Frontify
![](https://freight.cargo.site/t/original/i/9ff970338b892abccea0900722ed399da296b2cd918b426620f30f0b1124dcfd/1_Chart.png)
Charts
Charts & Graphs are form of data visualization that allow users easy to compare data and use it to tell a story.
![](https://freight.cargo.site/t/original/i/b6e5b434ef86d544a4fe7a844c9f5119d76ad40c1d47c7025869e0ab69a5fedb/2_Tabs.png)
Tabs
Tabs organize content across different screens, data sets, and other interactions.
![](https://freight.cargo.site/t/original/i/ef5f577bd9b4022ea904513cdcaa89d660600e0fe9178d5f23c43e0cf7b7648f/3_Switch_Checkbox_Radio.png)
Switch
Switch represents a physical switch that allows users to turn things on or off, like a light switch. Tapping a switch is a two-step action: selection and execution.
Checkbox
Checkbox allows the user to select control that allows users to select multiple options at a time
Radio Button
Radio button allows the user to select one or more items from a set or turn an option on or off
![](https://freight.cargo.site/t/original/i/c5d1bcfaea5fd14f4d4b74789bfc6fa9cee27eb5c1a628155158012915780438/4_Text-Input.png)
Text Area
Text Area let users enter and edit text.
![](https://freight.cargo.site/t/original/i/5e0008c06340e1205f55af91766333faf40f77e834e88164a429ef2b16b9c29f/5_Dropdown_Multiselect.png)
Multiselect &
Dropdown
Multiselect is a non-editable select control that allows users to select multiple options at a time. Drop-down allows the user to choose one value from a list.
![](https://freight.cargo.site/t/original/i/9bdf7a6bc1b3b9641c5079bb973df484e272f008cf64876030db324804b44d56/6_Typography.png)
Typography
Gotham is our primary typeface. Gotham is a vernacular sans serif type designed at the Greenwich Village type foundry of Hoefler & Frere-Jones between 2002 and 2004. It is influenced by architectural and commercial signage in New York City and suggests the energy and exuberance of NYU and New York City.
![](https://freight.cargo.site/t/original/i/408dce87840456a2c9db426c1871e7ae1031bfa2f7e5704dcb251dc453044f69/7_Date-Time-Picker.png)
Date Picker
Date pickers let users select a date, or a range of dates.
![](https://freight.cargo.site/t/original/i/a4bf3ab7d761bef8968fac566480a0b77969bcb06c563dd3f2c1aba354e234f3/Buttons.png)
Buttons
Buttons allow users to take actions, and make choices, with a single tap.
Copyright 2021, Jaekook Han