Tim D.
Tim is a designer and illustrator who loves koalas. 🐨🖋️
UI/UX Identity Design System
Drawn from the traditions of community based knowledge and participatory mapping, make your mark on the ever changing tidewater region. Upload sound recordings, images, original art, and more on a live map.
When creating my moodboard for Sound Map, I thought of the themes of climate change, nature, and the Tidewater region of Virginia. This generated a more muted color palette, reflecting the cool colors of the ocean and land. In my moodboard I also included images of shipping containers to reflect the Tidewater region’s maritime industry, and because they will be a big part of Sound Map’s future beyond the web application. The project will ultimately be a multimedia archive and art installation (via the app) such as prints, images, recordings, and sounds from across Hampton Roads. The prints and sounds together from the archive will be exhibited in an immersive installation that uses the visual system. If the funding can be secured the exhibition will travel around Virginia in a 20-foot shipping container, and because of that I felt like shipping containers could potentially be used to inspire design elements in the project’s identity. They offer a lot of inspiration in their shape, the colors they come in, and texture of the ridges.
The color palette takes inspiration from nautical colors and once again, the shipping containers. Professor Baylor wanted to follow the cooler color schemes, but he also made a point of wanting to make the map unique. Letting the users know that when they open the app, it is not just a regular navigational map, but one that can be interacted with and used to upload media. Another map-based project, Queering the Map, makes this clear by changing the typical colors of a map to bright pinks and purples. We decided on a final palette, which consisted of a bold blue and a red-orange as the primary colors and the soft, cool tones as the secondary palette. We felt that this palette best conveyed the themes of climate change and the feeling of the Tidewater region.
The final wordmark has Sound Map in the KT Projekt font with a line flowing through it to represent the rising sea levels and the ever so changing state of the climate. Surrounding the type are the ridges of the shipping container to localize it to the Tidewater region of Virginia. For the symbolic treatment of the logo, it is reduced to just an ‘S’ with the fluid line through the middle and the ridges around. The logo is also dynamic in that I was able to animate the line that flows through the middle. In the case that Professor Baylor wanted to include the logo in a video or other promotional material, it can be elevated with motion.
Users should be able to tell the importance of a component and be guided it. Visual cues of making a component bigger or a specific color will help emphasize that. But also, the number one aspect that will contribute to a positive experience that most designers unfortunately fail to consider is accessibility. For example, one of the functioning components that needed to be designed was a simple button that the user clicks when they want to play an audio file. How will the user know when the button is clicked, or even be able to be clicked? The way the button looks should be clearly different when it is either in its default, hover, or pressed state to indicate to the user that they are getting interactive feedback. In order to do so, I had to make sure each color contrasted and was different enough from each other. By making the button grayscale, it is indicated to the user that the button is unclickable. Little details such as these positively affect the user experience in more ways than one may realize. It helps the user and especially those that are visually impaired. The same accessibility consideration applies to everything else in the design system.
Working on Sound Map for A Changing Landscape was a great experience, and I am very thankful that Professor Baylor gave me the opportunity to collaborate with him as an undergraduate researcher for this project. Not only did this project allow me to apply the knowledge and skills I’ve gained during my time in the graphic design program, but it provided me with the unique chance to contribute to a greater socially charged project that will engage with the local community as well.
Throughout the duration of this project, it was also a privilege to have the partnership of the computer science 410 and 411 students who were coding the implemented system into the prototype. Working on the design system for this project was also invaluable because I gained real world experience that I would not get otherwise in a regular design class. I had designed several brand identities over my classes, but they were always hypothetical, without the intention of ever being executed. Creating the design system, seeing it being applied in real time into the application, and seeing the before and after was very rewarding. Instead of working off the usual design assignment brief, I was able to work with a real client, the same way professional designers do.