Category Archives: Graphics

Sigils, Swastikas and Symbology

April 19, 2016Design, Graphics, GraphsJon

Came across sigil in some technical documentation (https://github.com/apple/swift-evolution/blob/master/proposals/0029-remove-implicit-tuple-splat.md)

https://www.google.com/search?q=sigil : “an inscribed or painted symbol considered to have magical power.”

On a related note, after reading The Long Ships I though the name of one of the characters – Sigrun – was kind of neat since in Old Norse it means “victory rune”. However, the rune itself was horribly co-opted by the Nazi SS (the all-too-familiar double lightning bolt design, featuring two of them). That is hardly the only example.

Years ago, my aunt presented a slide show from her travels around Asia. It was surprising to see “backwards” swastikas prominently featured on Buddhist temples. She explained their long history in that part of the world. Despite Japan’s alliance with Nazi Germany in WWII these weren’t remnants of that time.

However, now there is a Japanese proposal to substitute another symbol on maps for tourists (prior to the 2020 Olympics): http://www.bbc.com/news/world-asia-35349619. Farther in the body of the article there are, indeed, symbols that might benefit from a change, such as the encircled H, which to many might suggest an emergency helipad rather than a hotel. However, I’d be inclined to keep the swastika since if far preceded use by the Nazis and runs the other direction. In a way, it symbolizes the opposite while reminding us of the negative aspects of human nature.

Sibling Rivalry

December 8, 2015Graphics, HTML5, javascript, User InterfaceJon

While working on a new responsive menu, I soon realized the need to be able to close any menu that might be open should the user choose another one. In a wide layout it would look particularly messy and confusing to have multiple menus shown. In a mobile layout that wouldn’t be so bad since there’s an accordion effect. However, the more real estate you can give back to the user the better!

Fortunately, jQuery has a handy selector that will grab all the li elements at the same level as the currently clicked/tapped element:

$(this).siblings().each(function() {
 
 // Animate close
 TweenLite.to($(this).find("ul > li"), speedFactor / 2, { height: 0, opacity: 0, ease: Power3.easeIn });
 TweenLite.to($(this).find(".menuArrow"), speedFactor / 2, { rotation: -90, ease: Power3.easeInOut });
 TweenLite.set($(this).find("ul > li"), { display: "none", delay: speedFactor / 2 });

 // Indicate menu is closed
 $(this).data("menuOpen", false);
});

Similar functionality can and should also be applied to the page as a whole so that pointing somewhere else would close all menus. Or, for that matter, when the user selects an item. Here are the results:

Less is (almost always) more

October 16, 2015geospatial, Graphics, Graphs, Interactives, Maps, User InterfaceJon

This morning, I came across a tweet linking to a National Geographic article on data visualization and eye candy, which I emailed to a few friends (when we want to carry on a more in-depth conversation Twitter just doesn’t cut it):

http://news.nationalgeographic.com/2015/09/150922-data-points-visualization-eye-candy-efficiency/

“Find a metaphor, start simple, and build up from there.”

One, who works at an economics research organization, replied with:

“We have lots of tools that allow relatively informed users to explore data and answer questions that they have, but few of our visualizations actually stick to a single story line. We’re trying to improve the balance of exploratory tools vs. simple, compelling stories.”

My response:

That’s highly similar to the approach often taken with interactive mapping interfaces – either attempting to duplicate desktop GIS functionality or show a particular facet of data with spatial attributes. Finding the balance between them is tricky. Generally, end users want to answer one or two questions though.

The trails web app I linked to recently – https://helenamontanamaps.org/Html5Viewer/?viewer=trails – is about as far as I’d ever go towards the GISFunc side of things anymore (there are a few gee-wiz, that’s cool features like mixed transparency for the base layers…but are they really necessary in most cases? No way).

http://mapbrief.com/2015/01/09/daring-to-build-a-citizen-centric-homepage-the-philadelphia-story/ is one of the best pieces I’ve read on user-focused functionality.

Incidentally, I read that NatGeo article on my phone and many of the visualizations were too small to be intelligible. For some reason, this one on landslides stood out to me as good on the phone (although on my desktop monitor the map background is barely visible):

A couple days ago, one of these correspondents sent me a link to a draft page showing all kinds of data related to load times, download sizes, CMSes used, and number of subscribers for a raft of news publications. I can’t share that page in its current state but will say that I wrote back encouraging him to make it way simpler. Just ’cause Tableau gives you a kitchen sink toolbox doesn’t mean you have to use it.

Power Generation Across the U.S.

September 11, 2015Graphics, GraphsJon

NPR posted an interesting series of charts showing how the country and each state derives its mix of electric power generation: http://www.npr.org/2015/09/10/319535020/coal-gas-nuclear-hydro-how-your-state-generates-power One thing that stood out to me is that something we in the NW take for granted – hydro power – isn’t widely used:

%Hydro

US: 6
AK: 26
CA: 9 (dropped from 19!)
ID: 62 (dropped from 83)
ME: 31 (up from 20)
MT: 37
OR: 59
SD: 48
WA: 69

With the exception of the Missouri River dams in SD, I’d guess that it’s a combination of topography (suitable sites), the need to impound runoff for irrigation and flood control (and to a degree, navigation – Snake/Columbia), with a relatively decent amount of water.

Also interesting: contrasting two coal-producing states like WV and WY. The former depends almost entirely on coal. The latter, while still really high (89%), gets 11% from renewables and hydro. Incidentally, MT is getting close to half (44%) of its power generation from renewables and hydro. But OR at 63% and WA at 76% lead the country. (All you have to worry about is forest fire smoke).

ID is, despite its ultra-conservative mindset, is in the running for cleanest state. It gets 62% from hydro, 21% from renewables and 17% from natural gas (the latter being somewhat surprising. AFAIK, natural gas would have to be imported (presumably from WY, UT, and CO). VT gets all its power (with the exception of that portion of Renewables using biofuels) from non-carbon sources. However, 72% is nuclear. Presumably they’re not burying the waste in Bernie Sanders’ back yard.

On our last visit to Kauai, I was struck by how much photovoltaic generation there is now. However, renewables only make up 10% of the mix. HI is still heavily dependent on oil and coal. Midwestern states still love them some serious amounts of coal, yet another “quality” which doesn’t engender a desire to live there. AR actually increased its coal consumption!

In all, these graphs are nicely done and quite informative.

Designing a Versatile Logo

September 9, 2014Design, Graphics, User InterfaceJon

Good logo design has always been hard. The number one characteristic of successful logos – ones that stand the test of time – is simplicity. The best example is GE’s logo, which was created in the 1890s and revamped somewhat in 2004:

It’s only gotten harder with the advent of digital media and mobile device screens of all resolutions. On the other hand, tools have gotten better and for those who aren’t artistically-inclined more resources, such as typefaces and icons, are readily available.

Recently, I decided to create a web and app-based service called NoteVote. Basically, if you hate sitting through long meetings, this will be a tool you’ll like. While it may seem odd, one thing I do whenever coining a new name is to test how it will lend itself to branding. Someone else might jump straight into coding but at heart I’m a UI/UX guy.

The first things that came to mind were to include elements such as a note icon and a thumbs up icon, as well as both a logotype (a logo including text) and a stand-alone logo (suitable for app icons, favicons or uses where space is constrained). I also looked through my typefaces and chose to use Banda (the regular weight is free), which is a friendly, clean and well-spaced design (the kind you’d invite your mother to see). My first iteration was this:

I sent this around to a few friends – people with varied backgrounds (sculptor, web/app developer, English/writing professor, grass-fed beef rancher and one of my favorite people, Chrysti the Wordsmith – to see what they thought.

The artist was the first to get back to me and his comment was, “I wish there was an alternative yay or nay for the thumb; Facebook has made us all sick of looking at that icon, but I see why you like it—its a clean logo.” So…a few more iterations:

There are things I like about these. Yet, aside from the over-used check mark, what they lacked was the humanistic element. Other logos I’ve designed that have worked well have at least suggested that, e.g:

So it was back to the thumbs up. “Talk to the hand!” 🙂 And from there, tweaking various aspects of the design. One thing I wanted to be sure of is that the line weight of the artwork was exactly the same as the fontweight. In Illustrator, this is as easy as converting a character to outlines, selecting a leg, and copy/pasting it, then looking at the reported width:

I also wanted the note icon to look square – like a Post-It. (Never mind that bending the corner is usually associated more with a sheet icon. Sometimes rules are meant to be bent). I started with a square, created the bent corner, then made three significant alterations.

Both logotype and standalone variations
Joining the hand and note icons
Removing the upper left-hand corner

Variations are necessary because, as mentioned, a logo needs to be able to accommodate a variety of branding uses. Joining elements marries the design elements into a cohesive whole. This serves to unite the cognitive concepts expressed in the logo as well as differentiate it from similar designs. Removing the corner was done to counterbalance the break above the n in the logotype variation and to suggest both speed and the notion that once the note-taking part is done it takes a backseat to voting on the best ideas.

Surprisingly, the second proved the most challenging. I had something in mind similar to approaches like this (although I dug this up just now, well after the fact):

My first attempts were like this:

And that would be fine. I found, however, after printing it out and looking at it on my phone that it didn’t feel quite right. So I did this and digitized the inner curve:

That’s some high-tech shinola, there, resulting in:

Other considerations are noted here:

Going with a single color and ensuring that the artwork is using it properly – i.e. no masks, mixed RGB/CMYK or other colors – means it is effortless to change it to accommodate light or dark backgrounds and to avoid color clashes. The SVG version is tiny and can be used just like this in a web page, meaning it will never be jaggy, regardless of page sizing or screen resolution. Who wants to create endless raster variations?

I hope this helps you with design considerations. Feel free to direct questions my way via Tweet to @stonetipapps or http://notevote.uservoice.com/ which is also where you can sign up for the NoteVote beta.

Drawing an Anatomically Correct Directional Arrow

March 24, 2014Design, Graphics, User InterfaceJon

It’s far down the list of issues I’ve ever dealt with, yet the ubiquitous directional arrow has always bothered me a bit because the blades are too thick. This is because it is naively rendered using the same stroke width. I took a look at it and realized that the proper blade thickness should be based on the blades’ angle. This can be determined mathematically by taking the square root of the cosine, e.g.

So a line that was 3 pixels wide becomes 2.53 pixels wide (3 x .840896). Here’s a schematic showing the construction steps (click or tap to embiggen):

The effect is less pronounced at shallow angles, more so at steeper angles (with a corresponding need for correction):

Update:

The morning after originally publishing this post, I saw a proper example of one of these arrows…on a North American Van Lines moving truck. Who woulda thunk? But a little analysis of the logo with an arrow overlaid that has blades at a 37.5° angle shows their designer was, uhm, pardon the pun, thinking along the same lines:

It’s very close to fitting the formula.

Make it Musical

January 16, 2014Design, Graphics, User InterfaceJon

When I first started taking guitar lessons, my instructor told me that while it would be hard at first to sound good (it’s still hard, bro) to “always keep it musical.” What he meant and what I try to explain to my son as he progresses as a guitarist is to make it sound like a song. Don’t get wrapped up in the mechanics or lose the beat.

Yesterday, I was with our other boy and we stopped into Staples to get some school supplies. This was my first opportunity to play around with both an iPad Air and the new Mini, which is the one I’d get if when I start doing cross-platform development for iOS. They are both really nice devices and very light. I had an iPad (3) and the Air blows it away. Yesterday evening toting my Surface to a book seminar I’m part of it felt heavy in comparison.

Yet this was also my first time really experiencing iOS 7. And one thing that struck me is that the animations seemed rather clunky. How could this be? The display tag below it proudly extolled the presence of the mighty A7 processor. It’s not a hardware issue. I was surprised how rough things like the transition between portrait and landscape are. Not to make comparisons too much, but Microsoft did a pretty good job on that in Windows 8.x.

It wasn’t until we were driving home that it struck me what it was. Whoever designed those animations failed to make them musical. I had happened to turn the radio on, which was set to NPR. While I’m not much of a Classical music fan, I appreciate certain composers and pieces. The overture from Verdi’s La Forza del Destino was playing. As it opened, I suddenly pictured in my mind animating tiles and color transitions in time with the music and reflecting the mood of the piece. Feel free to listen to it while you finish reading:

If you’ve ever seen Fantasia or Bruno Bozetto’s parody Allegro Non Troppo then you will have some idea what I am talking about. The next time you make an animation or transition, try setting it to music while you’re working on it. One thing these master composers had down is timing and mood.

In a subsequent post, I’ll show a recent example where I was setting animation and transitions to sound effects for an animated, vector-based splash screen. Ordinarily I wouldn’t add one to an app, preferring to get right down to business, but this is for a game and it’s also meant to add a little branding and some personality. One thing I found is that visual perception effects the way the user connects sound and sight. Sometimes you have to futz with timing so that a sound either starts earlier or later.

That’s “Code” Comfort

November 25, 2013geospatial, GIS, Graphics, MapsJon

I’ve been working on a mobile app that will support adding vector-based mapping polygons. Using California and Massachusetts to do a test on MULTIPOLYGON states and a map extent spanning the lower 48, I imported the data, ran the code and when I saw the visual, thought something was messed up:

How could the code be putting California at the top of the image? I went back to my source map and sure enough, the northern tip of California really does go as high as central Massachusetts. It occurred to me that it could be because of the Lambert Conformal Conic projection for the contiguous U.S. that I’m using. But it turns out the northern boundary of California is 42° and so is the southern boundary of western Mass (or at least it seems that was the intention at the time, given the quality of surveying and certain conditions facing surveyors – see the Granby Notch story (http://www.nytimes.com/2001/01/26/nyregion/driveway-another-state-blunder-1642-creates-headaches-today-for-homeowners-who.html) .

Incidentally, several states share 42° as an official boundary:

Sometimes our notions of things, based on certain conceptions, distort reality. I can see where my perceptions of California as being in the southwestern part of the country and being mostly warmer than the chilly, northeasterly Massachusetts would make it hard to believe they could have boundaries near the same latitude. At least I know my routines work. That’s “code comfort.” Still lots of work to do!

Labeling Graphs

November 19, 2013Design, Graphics, GraphsJon

Recently, WikiLeaks released a draft text of the intellectual property chapter of the Trans-Pacific Partnership agreement. In what is otherwise an excellent (and somewhat disturbing) analysis of the data done by Gabriel Michael, a Ph.D. candidate at George Washington University, there is one problem: I couldn’t read the labeling on the graphs very easily. In this case, since the data is heavily tied to connections between countries, it’s essential to understanding the relationships presented in the graphs.

To a degree, this was exacerbated by the layout of the Washington Post’s article template (http://www.washingtonpost.com/blogs/monkey-cage/wp/2013/11/18/the-united-states-is-isolated-in-the-trans-pacific-partnership-negotiations/) which is where I first viewed these. But even viewed on the author’s original site – somewhat larger – they can still be difficult to read (http://topromotetheprogress.wordpress.com/2013/11/17/visualizing-negotiating-positions-in-the-tpp-ip-chapter/).

Allow me to make it clear that I’m not picking on anybody here or denigrating some very fine scholarship. I’m just adding a couple of modest improvements in the hope that graphics such as these will be able to reach an even wider audience. They carry a message that really needs to be received by as many people as possible.

First, the obvious. I increased the font size. However, it’s (usually) more legible to also change to a sans-serif typeface…and, while we’re at it, let’s bump up the weight. So now we have:

It’s worth noting that I was able to save the image at a smaller size too. It’s 440 pixels wide (including a bit of white space) and could now conceivably be viewed on a phone.

There is another improvement that may be made: Getting rid of the thin black lines around the circles. They don’t fit with the rest of the imagery in the graphs. Furthermore, a hollow shape requires a bit more visual decoding by the viewer’s eyes. Of course, removing those lines also means reversing the text color and picking some solid color for the circles. I chose a grayish-blue, not too saturated, to provide a bit of contrast to the yellow-orange-red lines:

Again, this post is not meant to be anything more than constructive. We all have our strengths and weaknesses.

Now That’s a Detour

March 22, 2013geospatial, Graphics, MapsJon

Here’s a screenshot from Flightradar24. It’s typical of flights between Beirut and Amman. I can see why, given the situation in Syria, flights wouldn’t go that way. But I’d be curious to know if planes detour around Israeli airspace because they aren’t allowed there. Or is it because of some Arab political decision?

I find the app fascinating, especially when you see a flight heading right over Helena that’s going from somewhere like SFO to Dubai. Or even the Fedex flights from Anchorage and everywhere else that all still flock to Memphis. I wonder, despite the package processing infrastructure there, why someone hasn’t come up with a more efficient set of routing algorithms to use the least effort to get packages from A to B. Amazon Air anyone?

Stonetip – Visual Coder

Musings and Occasionally Helpful Coding, UI and UX Observations from the Author of Game of Throwns