Documentation Diagram Design Guide

Design
21

Here is my meager contribution. I’m going to assume I also don’t have permissions to post an image (update: or even a link to one, apparently) since i just registered, but here’s a link! Click on the image for full size.

Whipping together a legend graphic, but the idea is: (1) ember orange → state, (2) light ember orange → api hook/callback (3) grey → function (4) arrow leading into a box is a function call, leading out from a state is a transition… etc etc.

Minimalism and blending in with the existing ember design language are the main drivers, here. I also modified the graphic slightly for clarity.

1 Like
22

There’s some lovely ideas in all of these. Two points:

  • If a highly ‘designed’ scheme is chosen it would be best if it fitted closely with the current web design (unless a re-design is in the near future).
  • If a different scheme is preferable then something generic that could survive a website redesign and the porting to other media (print/presentation etc) could be worth pursuing

I went for the former but am willing to be convinced that the latter could be just as important.

23

Aside from the possible issues for the color-blind, I like the yes/no action icons at the base of the arrows. It feels cleaner and limits the amount of space taken up by the transition arrows the action responses.

24

I like your intention here, but am on the fence overall. I think the text within the boxes is too small from a readability standpoint.

25

@endash I like the color scheme and the minimalism, but the arrows seem inconsistent in a way that doesn’t intuit their meaning. I do think some minimalist text outlining the logic of each transition would be good, but overall I think I like your design the best.

Whatever we settle on, it should probably be very similar to how we might present the run loop, if such documentation is desirable. Would love to blast through that diagram with someone.

26

I like that you’ve used the page background as the diagram background and the overall colour scheme.

27

I like @endash’s plain background without frame. So I had a go…

and here’s a version with less colour…

1 Like
28

I realy like the colourfull version. Well done!

29

Here’s another visual style to add to the mix. Added a little dimension here.

http://uibucks.tumblr.com/image/46520435462

I like @endash option simplicity and @sambeau colorful option.

30

I gave the “Lifecycle of an Ember View” diagram a quick pass with a similar aesthetic as the current Ember design (I definitely agree the design should either be extremely generic, or closely fit the current Ember site aesthetic). This is really simple for now (and definitely lacking some contrast I think), and I’m not sure if this diagram really is the best example for presentation of this styling… will probably update/try another diagram when I have some more time.

2 Likes