These design specifications share the design of the public WSDOT website (www.wsdot.wa.gov) including what the pages will look like, the components and styling that make up these pages and the icons.
Use the navigation on the left to review specifications for design foundations, components, and page types. If you have questions, additions, or need clarification - reach out to the WSDOT Web Team at webhelp@wsdot.wa.gov.
Tracking changes to this document
If changes are made to any of these pages after December 1st, 2020, they will be documented in a "Change Log" section on the page that got the edit. When there are changes, Anthro-Tech will post a message in the Basecamp thread alerting those following the thread that changes have been made.
The core team will be updated weekly to alert the entire team to any updates that have been requested or made.
Links & downloads
This document contains all of the annotation, guidelines, interaction explanations and descriptions of use for these page types and components - but all of the components and page mockups are stored in Figma. When needing to inspect a design for attributes like spacing, color codes, and more - use the links below to launch the design files.
Accessing Figma
To inspect the Figma files for code snippets, create a free account and use the "Inspect Mode" links below. Review Figma's article for navigating Figma as a developer.
Each Figma file has two views - a Presentation mode that works like slides, and an "Editor" or "Inspect" mode that shows the artboard view.
All global styling and components that apply to the WSDOT brand overall.
Wireframes (ARCHIVED)
The wireframes were created for usability testing and do not reflect all of the changes made post-test. Use the mockup file above for screens reflecting the latest decisions.
