example of the Georgia Tech web design system on a computer screen, tablet and phone

Georgia Tech Web Design System

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.

Medium

  • Digital

Roles

  • Design
  • Static HTML and stylesheet development
  • Collaborative Drupal 8 implementation
  • Ongoing Drupal theme maintenance via github

Landing Page

example landing page for the Georgia Tech design system
example landing page for the Georgia Tech design system color swatches and fonts
example landing page for the Georgia Tech design system
example landing page for the Georgia Tech design system

Initial Theme Guide

Design Guide Provided to Developers

Georgia Tech Web Design System development guide
Georgia Tech Web Design System development guide

Elements and Componants

Fully Coded Style Guides

Georgia Tech Web Design System
Georgia Tech Web Design System
Georgia Tech Web Design System

Fully Coded Header, Footer, and Main Nav Menu

Desktop Dropdown Menu

Georgia Tech Web Design System

Tablet

Georgia Tech Web Design System

Mobile

example landing page for the Georgia Tech design system

Mobile Menu

example landing page for the Georgia Tech design system

Live Code Full Page Demos

Landing Pages

Long Page

Georgia Tech Website sub-section Redesign

Dark Page

Georgia Tech Website sub-section Redesign

Light Page

Georgia Tech Website sub-section 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