February 8, 2016 - Comments Off on Refining Identity and Starting to Apply it to the UI

Refining Identity and Starting to Apply it to the UI

This week, I have been working on furthering the visual identity elements, and thinking about how I'll be applying them in the user interface of Mobility Map.

I've formed sort of a "style guide" and built more onto the visual identity I have developed so far. As I'm working through my identity, I'm checking it against simulations of the most common forms of color blindness.

Screen Shot 2016-02-08 at 12.12.21 AM Screen Shot 2016-02-08 at 12.13.31 AM

I added some ideas for what I want body copy to look like, as well as thinking about how my stylistic concepts apply to the UI. In the style guide, I included a more finalized sample of a Mapbox theme optimized for accessibility. I was influenced by this terrific blog post that walked me through some ideas for using Mapbox Studio to create a more accessible basemap. It uses a primarily monochromatic color scheme, and uses Lexie Readable (a typeface optimized for legibility for dyslexic people- a little Comic Sans-ish but pretty sound when all uppercase) for the labels.


I currently am having difficulty getting the map to label the buildings properly, but I have submitted a ticket to the Mapbox team, and hope to receive assistance with it soon. I also hope to create another theme that uses the DIN Round Pro from the logo instead of Lexie, and perhaps one that isn't optimized for color blindness. The idea would be the user could select which basemap they prefer.

This week, I'm getting my mobile prototype off the ground in Sketch. I've got my project set up with inVision Sync, so I can see it update on the prototyping platform in real time as I make changes to my Sketch file. I started applying my Home screen concept to the Sketch file, which then transferred over to inVision seamlessly!

Screen Shot 2016-02-08 at 11.57.38 AM  Screen Shot 2016-02-08 at 12.08.50 PM Screen Shot 2016-02-08 at 12.09.16 PM

This week I'm going to finalize basic interactions with the menu and make some interactivity decisions for the home screen, which will then be applied throughout. I'm probably going to be looking into animation acceptable for use with vision impairment along the way. I'll share my resources as I come across them, as usual.


Comments are closed.