Georgia Tech Web Design System

Static Site and Figma Mockups

I worked alongside my design team and web development team to create a system of web components with the ultimate goal of developing it into a Drupal 8 theme. The theme based on this system is used campus-wide.

Project Details

Tools

CSS
Bootstrap
JQuery
Figma
Adobe XD

Roles

UI Design
Static site build
Collaborative Drupal 8 implementation
Drupal theme repo maintenance

Homepage Redesign

example landing page for the Georgia Tech design system

example landing page for the Georgia Tech design system

Color Palette:

color swatches and fonts

Mobile Display:

Theme Guide

Design Guide Provided to Developers

Georgia Tech Web Design System development guide

Georgia Tech Web Design System development guide

Header and Footer Breakpoint Guide

Desktop/Large

Georgia Tech Web Design System breakpoint guide

Medium

Georgia Tech Web Design System breakpoint guide

Small

Georgia Tech Web Design System breakpoint guide

Extra Small

Georgia Tech Web Design System breakpoint guide

Layout Tools for Designers

Adobe XD Wireframe

Georgia Tech Web Design System XD template

Adobe InDesign Template for Print Designers

Georgia Tech Web Design System development guide

Elements and Components

Static Coded Style Guides

Georgia Tech Web Design System typography

Georgia Tech Web Design System components style guide

Georgia Tech Web Design System colors and patterns

Static HTML + CSS Header, Footer, and Main Nav Menu

Desktop Dropdown Menu

Georgia Tech Web Design System

Static HTML + CSS Full Page Demos

Landing Pages

Long Scrolling Page

Dark Page

Georgia Tech Website sub-section redesign

Light Page

Georgia Tech department website redesign

Internal Pages

Basic

Georgia Tech Web Design System subsection

News Article

Georgia Tech Web Design System subsection

Directory

Georgia Tech Web Design System subsection

Site Sub-Section Application

Tier 1

Georgia Tech Web Design System subsection

Tier 2

Georgia Tech Web Design System subsection

Tier 3

Georgia Tech Web Design System subsection

Drupal custom layout tool editor view

Drupal Development

Custom Drupal Layout Tool

A tool to allow content creators to build a limitless variety of layouts.

digital commencement program on a tablet screen

Drupal Subtheme

Digital Event Program

This interactive commencement program provided an affordable pandemic-era alternative to printed programs.

website header reading 'we have something to say'

University Design System

Design system for a university's online brand.