Mini Design System

DESCRIPTION

This case study is based on the final assignment of HCI 472 (Design Fundamentals II), a foundational class of the Master’s in Human Computer Interaction program at DePaul University. In this assignment, we were tasked to create accessible, interactive and responsive artifacts using component libraries. Final deliverables included a condensed design system and pattern library.

Main Contributions: Typography, logo, grids, spacing, layout, component guidelines for cards, navigation bar and footer, resposive design (mobile, iPad and desktop). Bootstrap was utilized to create a mock website using University hosted servers.

Class: HCI 472 Design Fundamentals II

In this HCI 472 assignment we utilized Bootstrap (HTML, CSS, Javascript) to create a mock portfolio website using a design system and pattern library designed ourselves.

The design system included component guidelines (cards, navigation bar, footer) such as descriptions, usage, accessibility considerations and code snippets. Visual guidelines included colors, typography, logo, grids, spacing and layout. Additionally, examples of responsive design including desktop, tablet and mobile were provided for each component and grid layout.

The typography consists of:
IBM Plex Sans and IBM Mono Sans.

IBM Plex was designed by Mike Abbink from IBM BX&D, in collaboration with Bold Monday, a Dutch type foundry. It is a Grotesque style typeface that includes a Sans, Sans Condensed, and Mono. This project utilized the Sans and Mono type faces.

The color palette consists of neutral tones such as beige, white, dark navy and dark grey colors.
They are inspired by colors from the environment- and feel warm and earthy.

The primary foundational colors (beige, dark grey) are used for key features and components in the UI, such as body text color, background color, and buttons. Secondary foundational colors are used for less prominent aspects of the UI such as the text within the footer and accent text.

contact
kddomines@gmail.com

Mini Design System

In this HCI 472 assignment we utilized Bootstrap (HTML, CSS, Javascript) to create a mock portfolio website using a design system and pattern library designed ourselves.

The typography consists of:IBM Plex Sans and IBM Mono Sans.

The color palette consists of neutral tones such as beige, white, dark navy and dark grey colors. They are inspired by colors from the environment- and feel warm and earthy.

The typography consists of:
IBM Plex Sans and IBM Mono Sans.

The color palette consists of neutral tones such as beige, white, dark navy and dark grey colors.
They are inspired by colors from the environment- and feel warm and earthy.