Design System
[Concrete Design] is a design system to be used to create clean interfaces that make sites easier to navigate. It is specifically tailored to the needs of government websites for the city of Philadelphia. Using [Concrete Design] you can set up a versatile and eye-catching backdrop that will help bring your imagery to life. I collaborated with a classmate of mine and took on the role of designer which entailed creating assets, content, conceptualizing a brand, and determining when to deviate from the design system.
view prototype
view reference site
view case study
The Process
This process introduced a new challenge of figuring out how much we wanted to customize the elements and at what point it wouldn’t count as being part of the same design system. Keeping all of this in mind, I was strategic about how we deviated from the system and how we could use customizability best to our service. The style of the typography remained the same across the sites for the most part, but for the education site, I wanted to introduce edges that were a bit softer and more friendly. The curved edges that were introduced to the typography of the headings were also applied to the secondary buttons.
Across the three products, I wanted to make sure that we made good use of white space so that the amount of content to be taken in at once wouldn’t be overwhelming to the user and that we could use iconography as a counterpoint to make it more engaging.