The State of Delaware is currently in the process of converting all of it's agency .gov websites to its first Design System, called Lighthouse.
Lighthouse was developed by the Government Information Center, where I was responsible for creating the new State of Delaware logo and the Design System’s visual branding.
The overall goal for Lighthouse is to ensure consistency, unity across all digital platforms, and for it to be accessible for hearing and visually impaired constituents.
Lighthouse was developed by the Government Information Center, where I was responsible for creating the new State of Delaware logo and the Design System’s visual branding.
The overall goal for Lighthouse is to ensure consistency, unity across all digital platforms, and for it to be accessible for hearing and visually impaired constituents.
Check out some of the Delaware.gov sites that have been placed in Lighthouse so far:
LOGO REDESIGN
While our team started to develop Delaware's new design system, it became evident that a new logo was needed to support the new brand.
These reasons include that this 10+ year old logo has:
- Text underneath that is hard to read and even harder to read in small scale.
- The scripted D is not accessible for visually impaired individuals.
- The letter “D” does not connect to the general public to being specifically “Delaware.”
While our team started to develop Delaware's new design system, it became evident that a new logo was needed to support the new brand.
These reasons include that this 10+ year old logo has:
- Text underneath that is hard to read and even harder to read in small scale.
- The scripted D is not accessible for visually impaired individuals.
- The letter “D” does not connect to the general public to being specifically “Delaware.”
I created a logo that was modern, simple, accessible, and with a symbolic tie. This logo appears in the new official state website header:
THE COLOR PALETTE
The color palette I created was designed for optimal flexibility. The color were chosen to enhance our client's content rather than distract, maintaining accessibility and style.
To create cohesion across Delaware.gov sites, the colors are fashioned to apply to all the website components, making it less work for our clients and more accessible, and ensuring Web Content Accessibility Guidelines (WCAG) 2.1 AAA contrast compliance for our users.
The main color, Pioneer Blue, was named after the definition of "pioneer".
A person or a group that originates or helps open up a new line of thought or activity or a new method or technical development.
This is the messaging we wanted to share with State agencies as we began working with them to implement their websites in Lighthouse.
I landed on this blue because I felt like it was welcoming, professional, balanced, easily complementary with other colors, and accessible.
Additionally, we’ll be incorporating the complementary color called Lighthouse Gold. This combination is our nod to color schemes commonly found in Delaware institutions, including the state license plate and the University of Delaware.
To create cohesion across Delaware.gov sites, the colors are fashioned to apply to all the website components, making it less work for our clients and more accessible, and ensuring Web Content Accessibility Guidelines (WCAG) 2.1 AAA contrast compliance for our users.
The main color, Pioneer Blue, was named after the definition of "pioneer".
A person or a group that originates or helps open up a new line of thought or activity or a new method or technical development.
This is the messaging we wanted to share with State agencies as we began working with them to implement their websites in Lighthouse.
I landed on this blue because I felt like it was welcoming, professional, balanced, easily complementary with other colors, and accessible.
Additionally, we’ll be incorporating the complementary color called Lighthouse Gold. This combination is our nod to color schemes commonly found in Delaware institutions, including the state license plate and the University of Delaware.
SERVICES BLOCK & HERO IMAGE
Hero Section
The Hero Section was essentially designed to create a uniform and accessible way for all agencies to grab the visitor’s attention and convey the site’s primary message or purpose. The Hero Section contains a headline, a large image, some text, and a link to more information on another page.
The services block is a Lighthouse feature I designed to better organize and display the top services offered by an agency in an accessible and user-friendly way. Each tile acts as a clickable element, allowing users to quickly navigate to detailed information about a specific service.
SOCIAL MEDIA BRANDING
As the Social Media Lead and Coordinator for the State of Delaware. I applied the Lighthouse branding to all social content. Get a deep dive on my process or check out their Instagram and Facebook to see it in action.
