Having diagrams that explain concepts visually is fundamental to good documentation. Unfortunately, most engineers are not designers, which means that most diagrams are more hindrance than help. Here are some examples of bad or mediocre technical diagrams:
Here are some examples of what I consider to be good diagrams:
What I’d like your help with:
Create a design language that fits with the Ember.js website design aesthetic for architectural and other explanatory diagrams. You should use the existing diagrams as a starting place. You can find them in the Ember.js website repository (just clone the repo to your computer and search for all of the images using something like Spotlight).
Once that’s done, we’ll create re-usable components (using something like SVG, perhaps) that contributors to the guides can use to build diagrams that are both consistent and pleasant to the eye.
I fully understood your original request, I think. However, I was looking to see if there was a particular diagram that you thought might be a good one to look at as a sounding-board/prototype for exploring a design language that was liked by everyone. I have found in the past that creating a whole scheme for all diagrams in one go is very time consuming and ultimately nigh-on impossible when there are opinionated people to please. So, I wondered whether there was one diagram anyone interested could tackle to show ideas and possibilities. Once we nail one we can collectively move on to others and define the scheme iteratively.
I suspect most designers would prefer the tentative approach where they iterate with feedback
As a Red/Green colorblind user, the colors are a bit too subdued, particularly the red arrow isn’t quite distinguishable from the green arrow – only the symbols are.
Replying for Christian (he wasn’t able to post images?)
"After a little design research and exploration, I came up with this look and feel. I ran with the idea of literal embers in a campfire (ember: “A small piece of burning or glowing coal or wood in a dying fire…” ). This made me think of old maps and the movie Moonrise Kingdom.
@cjeria I love those…really appreciate the thought you put into them, and I love that that lines aren’t just straight… I also love the legend in the bottom right corner. My only thought is that these might not fit in with the current design of the Ember.js website. Perhaps as you design them you could take a screenshot of the website and place it in the background and design over the top of it?