February 3, 2016 - Comments Off on Designing a Logo Following Inclusive Design Principles

Designing a Logo Following Inclusive Design Principles

Background

For those unaware, I am a current senior at SUNY New Paltz working on my Graphic Design Thesis. For the project, I am prototyping an web app I'm calling Mobility Map. Think Waze, but for physically disabled individuals in pedestrian settings. This semester, I am focusing on what the user interface and information structure would be if this app were to be built.

A large component of this project being a success is making sure that I make my visual components readable and usable for people with a variety of impairments that could inhibit their user experience. This past week, my task was to come up with my font, color, and logo selection that I would use throughout the Mobility Map Interface. I'm going to walk you through my process, so if anyone is interested in how this is done, or doing research for a similar project, I can be of help to them!


Process

As with any logo concept, I started with sketching! Here's a look at some of my ideas before I got onto the computer.

 img002img001IMG_0201

(Above) The sketches done in pen were older, and helped inform the ones to the right done in pencil. Originally, I was too stuck on my idea of what a mobility impairment is. It isn't necessarily someone in a wheelchair. Mobility impairments can be shown in different ways, and there really wasn't a simple way to convey that aspect in the identity. I also don't want to alienate users who don't necessarily have a documented mobility impairment, but need to use it on a case by case basis (a user category I've been thinking about is able bodied people on skateboards or bikes).

(Below) After working on these concepts in pencil, I started translating my favorite ideas into type and vectors on Illustrator. There, the ideas kind of went off in different directions. I also experimented a little with color, just to give myself a better idea of how the elements would interact.

 

Screen-Shot-2015-11-06-at-4.27.03-PMScreen Shot 2016-02-03 at 3.09.32 PM


Font Selection

When it came to typeface selection, I wanted to select something that would be extra readable, and welcoming. This led to me looking for something maybe with a history of being used as signage, like Highway Gothic or Frutiger. I also like the "friendliness" conveyed by Museo or Proxima, but a concern was coming across as childish or silly.

121401_fg0x     2478437a7313d272936c684b6b2b4e

Screen Shot 2016-02-03 at 3.45.28 PMIn the end, I went with DIN Round Pro, which is a typeface derived from a German typeface called DIN, which stands for "Deutsche Industrie Norm." The font was originally intended for use in industry in Germany, most popularly on Autobahn signage. (source) I think this modern, rounded twist on an industrial, readable sans serif serves well to what I'm trying to accomplish.

Another factor that contributed to the selection of DIN, is that there is a lot of differentiation between the characters. My typeface selection was influenced by this guide for typography for the visually impaired. I tmade many valuable points, such as how illegible serif fonts could be when italicized, as well as how it's best to use sans serif with high x height and differentiation between characters. (see left)

 

 

 


 

Color Selection

Screen Shot 2016-02-03 at 3.09.46 PMAnother concern when making decisions in the appearance of an interface is making sure the colors you use don't make your product unusable for people with vision impairments of varying types, including low vision, color blindness, and dyslexia. Contrast between elements and theor backgrounds is crucial to color schemes being useful. There are a variety of tools available for devising accessible color themes, and these 3 are my favorites:

Color Oracle- desktop application that allows you preview what your screen looks like if someone with the 3 most common forms of color blindness would see it

Color Brewer- color scheme generator with intent to be used in geospatial data presentation. I has some filtering options for people with color blindness

Color Safe-  assists in making typographic color selections to meet WCAG Guidelines of text and background contrast ratios.

 

I applied the color scheme to my favorite progress logo, and really liked the result!

Screen Shot 2016-02-03 at 2.46.34 PM

 


Finalized Identity

After picking out the colors I wanted to use, I applied that to my favorite logo concepts. Here is the result:

 

Screen Shot 2016-02-03 at 3.06.17 PM

 

Comments are closed.