of 32 /32

# System Diagramming Basics

Embed Size (px)

DESCRIPTION

A very short overview of the critical steps and components of a successful system diagram.

### Text of System Diagramming Basics

©Tim  Sheiner  2013  All  rights  reserved 1

System  Diagramming  Basics

IXDSN-­‐210:  SystemsTim  Sheiner

©Tim  Sheiner  2013  All  rights  reserved

Agenda

2

The  pointBenefits  and  limitaCons  of  diagramsThe  reference  bookProcessConvenConsAnnotaConDecoraCon

©Tim  Sheiner  2013  All  rights  reserved

of  system  diagrams?

What  is  the  point

3

©Tim  Sheiner  2013  All  rights  reserved

CommunicaCon.

4

©Tim  Sheiner  2013  All  rights  reserved

System  Diagrams  as  a  tool

Benefits•O#en  actually  worth  one  thousand  words•Help  you—the  designer—definitely•Ac:vate  visual  and  spa:al  cogni:ve  machinery

LimitaCons•Not  dynamic•Help  others—not  the  designer—maybe•Can  become  an  end,  rather  than  a  means

5

©Tim  Sheiner  2013  All  rights  reserved

A  Reference  Book:  Communica:ng  Design

The  good  things•Dan’s  POV:  read  chapter  2!•The  informa:on  architecture  of  the  book•The  examples•The  detail  (well  explained  trees)

The  less  good  things•systems-­‐specific  ar:facts  not  covered•The  physical  format  of  the  book•The  detail  (obscures  the  forest)

6

©Tim  Sheiner  2013  All  rights  reserved

suggested  order  of  operaCons  for  construcCng  diagrams

Process

7

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Process1

8

1. [Make  a  list  of  the  pieces]2. Sketch3. Move  to  final  medium4. Color  sparingly5. Use  conven:ons6. Label,  label,  label

7. [Collaborate]1. Share2. Revisit  Inputs

8. Iterate1. Explore  a  different  approach2. Move  stuff  around

1adapted  from  CommunicaCng  Design,  pp  18-­‐19

©Tim  Sheiner  2013  All  rights  reserved

Process:  Sketch

9

©Tim  Sheiner  2013  All  rights  reserved

Process:  Place  the  Objects

10

©Tim  Sheiner  2013  All  rights  reserved

Process:  Make  Connec:ons

11

©Tim  Sheiner  2013  All  rights  reserved

Process:  Refine

12

©Tim  Sheiner  2013  All  rights  reserved

The  diagram  AND  the  learning  are  the  valuable  outcomes

13

~3  hours

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Conven:on

14

1. Follow  conven:on2. If  there  is  no  relevant  standard  to  follow,  apply  a  standard  of

consistency

©Tim  Sheiner  2013  All  rights  reserved

//  diagramming  conven:on

15

If  !(relevantStandard)  {internalConsistency;

}

©Tim  Sheiner  2013  All  rights  reserved

of  following  an  ad  hoc  internal  standard...

An  example

16

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Conven:ons

17

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Conven:ons

18

rectangle  =  plug-­‐in  logic

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Conven:ons

19

rounded  rectangle  =  controller  logic

round  =  API  type  object

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Conven:ons

20

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Conven:ons

21

brackets  =  sub  system

©Tim  Sheiner  2013  All  rights  reserved

Diagramming  Conven:ons

22

brackets  =  sub  system

layer:  use  of  different  bracket  styles  conveys  an  actual  difference

©Tim  Sheiner  2013  All  rights  reserved

Annota:on

23

Text  associated  with  the  illustraCon  and  intended  to  clarify  its  meaning.    A  common  kind  of  layer  applied  to  info  graphics.

©Tim  Sheiner  2013  All  rights  reserved

Notes

24

notes

©Tim  Sheiner  2013  All  rights  reserved

Key

25

key

©Tim  Sheiner  2013  All  rights  reserved

Call  out

26

this  is  a  call    outand  this  is  a  leader  line

©Tim  Sheiner  2013  All  rights  reserved

Decora:on

27

Imagery,  embellishment,  shading  or  any  kind  of  non-­‐textual    marks  applied  to  an  illustraCon  to  improve  its  communicaCon  value.      Oben  subject  to  abuse.

©Tim  Sheiner  2013  All  rights  reserved

Examples  of  Decora:on

28

©Tim  Sheiner  2013  All  rights  reserved

29

©Tim  Sheiner  2013  All  rights  reserved

30

Maximize  data-­‐ink  raCo2.

pixels  devoted  to  non-­‐redundant  informa:on

total  pixels  of  graphic

2Tube,  The  Visual  Display  of  QuanCtaCve  InformaCon,  p.  93

©Tim  Sheiner  2013  All  rights  reserved

31

Keepitsimple,stupid.

©Tim  Sheiner  2013  All  rights  reserved

Fin

32

Documents
Documents
Documents
Education
Documents
Documents
Documents
Documents
Documents
Education
Documents
Technology
Documents
Documents
Education
Documents
Documents
Documents
Documents
Documents
Documents
Documents
Documents
Documents
Technology
Documents
Education
Documents
Technology
Technology