Visual Design - Applying a Design System
The previous work: At Fuzzy Math, I led research and assisted in wireframing for a pro bono project with the Depression and Bipolar Support Alliance (DBSA), and gave feedback to a visual designer as she created and applied a visual language to the site.
The design system: When considering a design system to work with, I was looking for something that:
Had a free Sketch file with a library of pre-styled components
Was comprehensive enough to encompass most of the components that I already needed
Wasn’t so expansive that it would be overwhelming to learn and apply
After considering a variety of options, what I landed on was the U.S. Web Design System (USWDS), which felt both reasonably comprehensive and mentally accessible for a relatively new visual designer to work with, with the bonus that it felt intended for informational delivery, which happens to be one of DBSA’s main goals.
I started with a relatively straightforward informational page, and as I continue practicing will get into more visually styled pages with media assets such as landing pages.
Desktop:
A desktop wireframe of an informational page on Bipolar Depression
A desktop visual design comp of the same Bipolar Depression informational page, with USWDS styling applied.
Some structural changes were made to accommodate differences between the wireframes’ designs and those in the visual comps, for example the navigation bar and breadcrumbs in the wires compared to the nav bar + side navigation with highlighted current state in the comps
Mobile:
A mobile wireframe of an informational page on Bipolar Depression
A mobile visual design comp of the same Bipolar Depression informational page, with USWDS styling applied.
I’ll continue to update this page (and most likely move images to InVision) as I continue practicing.